@dxos/react-ui-geo 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -3,42 +3,49 @@ import {
 } from "./chunk-ENCWOTYX.mjs";
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
-import * as d37 from "d3";
-import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo, useRef, useState as useState3 } from "react";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition, easeLinear, easeSinOut } from "d3";
+import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-geo/src/hooks/context.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { 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, scale: _scale, translation: _translation, rotation: _rotation }) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [scale, setScale] = useControlledState(_scale);
-  const [translation, setTranslation] = useControlledState(_translation);
-  const [rotation, setRotation] = useControlledState(_rotation);
-  return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
-    value: {
-      size,
-      center,
-      scale,
-      translation,
-      rotation,
-      setCenter,
-      setScale,
-      setTranslation,
-      setRotation
-    }
-  }, children);
+  var _effect = _useSignals();
+  try {
+    const [center, setCenter] = useControlledState(_center);
+    const [scale, setScale] = useControlledState(_scale);
+    const [translation, setTranslation] = useControlledState(_translation);
+    const [rotation, setRotation] = useControlledState(_rotation);
+    return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
+      value: {
+        size,
+        center,
+        scale,
+        translation,
+        rotation,
+        setCenter,
+        setScale,
+        setTranslation,
+        setRotation
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
 };
 
 // packages/ui/react-ui-geo/src/hooks/useDrag.ts
-import * as d34 from "d3";
+import { select as select2 } from "d3";
 import { useEffect } from "react";
 
 // packages/ui/react-ui-geo/src/util/debug.ts
@@ -57,7 +64,7 @@ var timer = (cb) => {
 };
 
 // packages/ui/react-ui-geo/src/util/inertia.ts
-import * as d3 from "d3";
+import { select, drag, timer as timer2 } from "d3";
 import versor from "versor";
 var restrictAxis = (axis) => (original, current) => current.map((d, i) => axis[i] ? d : original[i]);
 var geoInertiaDrag = (target, render, projection, options) => {
@@ -67,7 +74,7 @@ var geoInertiaDrag = (target, render, projection, options) => {
   if (target.node) {
     target = target.node();
   }
-  target = d3.select(target);
+  target = select(target);
   const inertia = geoInertiaDragHelper({
     projection,
     render: (rotation) => {
@@ -91,7 +98,7 @@ var geoInertiaDrag = (target, render, projection, options) => {
     time: options.time,
     hold: options.hold
   });
-  target.call(d3.drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
+  target.call(drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
   return inertia;
 };
 var geoInertiaDragHelper = (opt) => {
@@ -152,7 +159,7 @@ function inertiaHelper(opt) {
       0,
       0
     ],
-    timer: d3.timer(() => {
+    timer: timer2(() => {
     }),
     time: 0,
     t: 0,
@@ -232,7 +239,7 @@ function inertiaHelper(opt) {
 }
 
 // packages/ui/react-ui-geo/src/util/path.ts
-import * as d32 from "d3";
+import { geoCircle as d3GeoCircle } from "d3";
 var positionToRotation = ([lng, lat], tilt = 0) => [
   -lng,
   tilt - lat,
@@ -246,7 +253,7 @@ var geoPoint = (point) => ({
   type: "Point",
   coordinates: geoToPosition(point)
 });
-var geoCircle2 = ({ lat, lng }, radius) => d32.geoCircle().radius(radius).center([
+var geoCircle = ({ lat, lng }, radius) => d3GeoCircle().radius(radius).center([
   lng,
   lat
 ])();
@@ -285,8 +292,8 @@ var getDistance = (point1, point2) => {
 };
 
 // packages/ui/react-ui-geo/src/util/render.ts
-import * as d33 from "d3";
-import * as topojson from "topojson-client";
+import { geoGraticule } from "d3";
+import { feature, mesh } from "topojson-client";
 var createLayers = (topology, features, styles) => {
   const layers = [];
   if (styles.water) {
@@ -300,7 +307,7 @@ var createLayers = (topology, features, styles) => {
   if (styles.graticule) {
     layers.push({
       styles: styles.graticule,
-      path: d33.geoGraticule().step([
+      path: geoGraticule().step([
         6,
         6
       ])()
@@ -310,13 +317,13 @@ var createLayers = (topology, features, styles) => {
     if (topology.objects.land && styles.land) {
       layers.push({
         styles: styles.land,
-        path: topojson.feature(topology, topology.objects.land)
+        path: feature(topology, topology.objects.land)
       });
     }
     if (topology.objects.countries && styles.border) {
       layers.push({
         styles: styles.border,
-        path: topojson.mesh(topology, topology.objects.countries, (a, b) => a !== b)
+        path: mesh(topology, topology.objects.countries, (a, b) => a !== b)
       });
     }
     if (topology.objects.dots && styles.dots) {
@@ -390,7 +397,7 @@ var useDrag = (controller, options = {}) => {
     if (!canvas || options.disabled) {
       return;
     }
-    geoInertiaDrag(d34.select(canvas), () => {
+    geoInertiaDrag(select2(canvas), () => {
       controller.setRotation(controller.projection.rotate());
       options.onUpdate?.({
         type: "move",
@@ -409,7 +416,7 @@ var useDrag = (controller, options = {}) => {
       })
     });
     return () => {
-      cancelDrag(d34.select(canvas));
+      cancelDrag(select2(canvas));
     };
   }, [
     controller,
@@ -463,12 +470,12 @@ var useMapZoomHandler = (controller) => {
 };
 
 // packages/ui/react-ui-geo/src/hooks/useSpinner.ts
-import * as d35 from "d3";
+import { timer as d3Timer } from "d3";
 import { useEffect as useEffect2, useState } from "react";
 var useSpinner = (controller, options = {}) => {
   const [running, setRunning] = useState(false);
   useEffect2(() => {
-    let timer4;
+    let timer3;
     const start = () => {
       const delta = options.delta ?? [
         1e-3,
@@ -477,7 +484,7 @@ var useSpinner = (controller, options = {}) => {
       ];
       let t = 0;
       let lastRotation = controller.projection.rotate();
-      timer4 = d35.timer((elapsed) => {
+      timer3 = d3Timer((elapsed) => {
         const dt = elapsed - t;
         t = elapsed;
         const rotation = [
@@ -490,9 +497,9 @@ var useSpinner = (controller, options = {}) => {
       });
     };
     const stop = () => {
-      if (timer4) {
-        timer4.stop();
-        timer4 = void 0;
+      if (timer3) {
+        timer3.stop();
+        timer3 = void 0;
       }
     };
     if (controller && running) {
@@ -516,19 +523,17 @@ var useSpinner = (controller, options = {}) => {
 };
 
 // packages/ui/react-ui-geo/src/hooks/useTour.ts
-import * as d36 from "d3";
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from "d3";
+import { useEffect as useEffect3, useState as useState2, useMemo } from "react";
 import versor2 from "versor";
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-geo/src/hooks/useTour.ts";
 var TRANSITION_NAME = "globe-tour";
 var defaultDuration = 1500;
 var useTour = (controller, points, options = {}) => {
-  const selection2 = d36.selection();
+  const selection = useMemo(() => d3Selection(), []);
   const [running, setRunning] = useState2(options.running ?? false);
   useEffect3(() => {
     if (!running) {
-      selection2.interrupt(TRANSITION_NAME);
+      selection.interrupt(TRANSITION_NAME);
       return;
     }
     let t;
@@ -538,7 +543,7 @@ var useTour = (controller, points, options = {}) => {
         const context = canvas.getContext("2d", {
           alpha: false
         });
-        const path = d36.geoPath(projection, context).pointRadius(2);
+        const path = geoPath(projection, context).pointRadius(2);
         const tilt = options.tilt ?? 0;
         let last;
         try {
@@ -554,12 +559,12 @@ var useTour = (controller, points, options = {}) => {
             }
             const p1 = last ? geoToPosition(last) : void 0;
             const p2 = geoToPosition(next);
-            const ip = d36.geoInterpolate(p1 || p2, p2);
-            const distance = d36.geoDistance(p1 || p2, p2);
+            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 = selection2.transition(TRANSITION_NAME).duration(Math.max(options.duration ?? defaultDuration, distance * 2e3)).tween("render", () => (t2) => {
+            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();
@@ -586,28 +591,20 @@ var useTour = (controller, points, options = {}) => {
                 context.fill();
               }
               context.restore();
-              if (options.autoRotate) {
-                projection.rotate(iv(t2));
-                setRotation(projection.rotate());
-              }
+              projection.rotate(iv(t2));
+              setRotation(projection.rotate());
             });
             await transition2.end();
             last = next;
           }
         } catch (err) {
-          log.catch(err, void 0, {
-            F: __dxlog_file,
-            L: 112,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
         } finally {
           setRunning(false);
         }
       });
       return () => {
         clearTimeout(t);
-        selection2.interrupt(TRANSITION_NAME);
+        selection.interrupt(TRANSITION_NAME);
       };
     }
   }, [
@@ -622,6 +619,7 @@ var useTour = (controller, points, options = {}) => {
 };
 
 // packages/ui/react-ui-geo/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";
 var controlPositions = {
@@ -631,52 +629,62 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      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")
-  }));
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        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();
+  }
 };
 var ActionControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      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")
-  }));
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        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();
+  }
 };
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
@@ -723,166 +731,206 @@ var defaultStyles = {
   }
 };
 var projectionMap = {
-  orthographic: d37.geoOrthographic,
-  mercator: d37.geoMercator,
-  "transverse-mercator": d37.geoTransverseMercator
+  orthographic: geoOrthographic,
+  mercator: geoMercator,
+  "transverse-mercator": geoTransverseMercator
 };
 var getProjection = (type = "orthographic") => {
   if (typeof type === "string") {
-    const constructor = projectionMap[type] ?? d37.geoOrthographic;
+    const constructor = projectionMap[type] ?? geoOrthographic;
     return constructor();
   }
-  return type ?? d37.geoOrthographic();
+  return type ?? geoOrthographic();
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
-  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));
+  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) => {
-  const { themeMode } = useThemeContext();
-  const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [
-    _styles,
-    themeMode
-  ]);
-  const [canvas, setCanvas] = useState3(null);
-  const canvasRef = (canvas2) => setCanvas(canvas2);
-  const projection = useMemo(() => getProjection(_projection), [
-    _projection
-  ]);
-  const layers = useMemo(() => {
-    return timer(() => createLayers(topology, features, styles));
-  }, [
-    topology,
-    features,
-    styles
-  ]);
-  const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
-  const scaleRef = useDynamicRef(scale);
-  useEffect4(() => {
-    if (center) {
-      setScale(1);
-      setRotation(positionToRotation(geoToPosition(center)));
-    }
-  }, [
-    center
-  ]);
-  const zooming = useRef(false);
-  useImperativeHandle(forwardRef3, () => {
-    return {
+  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, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
+    const scaleRef = useDynamicRef(scale);
+    useEffect4(() => {
+      if (center) {
+        setScale(1);
+        setRotation(positionToRotation(geoToPosition(center)));
+      }
+    }, [
+      center
+    ]);
+    const zooming = useRef(false);
+    useImperativeHandle(forwardRef3, () => {
+      return {
+        canvas,
+        projection,
+        center,
+        get scale() {
+          return scaleRef.current;
+        },
+        translation,
+        rotation,
+        setCenter,
+        setScale: (s) => {
+          if (typeof s === "function") {
+            const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
+            transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
+              zooming.current = false;
+            });
+          } else {
+            setScale(s);
+          }
+        },
+        setTranslation,
+        setRotation
+      };
+    }, [
+      canvas
+    ]);
+    const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
+      alpha: false
+    })), [
       canvas,
-      projection,
-      center,
-      get scale() {
-        return scaleRef.current;
-      },
+      projection
+    ]);
+    useEffect4(() => {
+      if (canvas && projection) {
+        timer(() => {
+          projection.scale(Math.min(size.width, size.height) / 2 * scale).translate([
+            size.width / 2 + (translation?.x ?? 0),
+            size.height / 2 + (translation?.y ?? 0)
+          ]).rotate(rotation ?? [
+            0,
+            0,
+            0
+          ]);
+          renderLayers(generator, layers, scale, styles);
+        });
+      }
+    }, [
+      generator,
+      size,
+      scale,
       translation,
       rotation,
-      setCenter,
-      setScale: (s) => {
-        if (typeof s === "function") {
-          const is = d37.interpolateNumber(scaleRef.current, s(scaleRef.current));
-          d37.transition().ease(zooming.current ? d37.easeLinear : d37.easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
-            zooming.current = false;
-          });
-        } else {
-          setScale(s);
-        }
-      },
-      setTranslation,
-      setRotation
-    };
-  }, [
-    canvas
-  ]);
-  const generator = useMemo(() => canvas && projection && d37.geoPath(projection, canvas.getContext("2d", {
-    alpha: false
-  })), [
-    canvas,
-    projection
-  ]);
-  useEffect4(() => {
-    if (canvas && projection) {
-      timer(() => {
-        projection.scale(Math.min(size.width, size.height) / 2 * scale).translate([
-          size.width / 2 + (translation?.x ?? 0),
-          size.height / 2 + (translation?.y ?? 0)
-        ]).rotate(rotation ?? [
-          0,
-          0,
-          0
-        ]);
-        renderLayers(generator, layers, scale, styles);
-      });
+      layers
+    ]);
+    if (!size.width || !size.height) {
+      return null;
     }
-  }, [
-    generator,
-    size,
-    scale,
-    translation,
-    rotation,
-    layers
-  ]);
-  if (!size.width || !size.height) {
-    return null;
+    return /* @__PURE__ */ React3.createElement("canvas", {
+      ref: canvasRef,
+      width: size.width,
+      height: size.height
+    });
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ React3.createElement("canvas", {
-    ref: canvasRef,
-    width: size.width,
-    height: size.height
-  });
 });
 var GlobeDebug = ({ position = "topleft" }) => {
-  const { size, scale, 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,
-    scale,
-    translation,
-    rotation
-  }, null, 2)));
+  var _effect = _useSignals3();
+  try {
+    const { size, scale, 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,
+      scale,
+      translation,
+      rotation
+    }, null, 2)));
+  } finally {
+    _effect.f();
+  }
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute overflow-hidden", controlPositions[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();
+  }
 };
 var CustomControl = ({ position, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute overflow-hidden", controlPositions[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 Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(ActionControls, {
-    onAction
-  })),
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = _useSignals3();
+    try {
+      return /* @__PURE__ */ React3.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React3.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = _useSignals3();
+    try {
+      return /* @__PURE__ */ React3.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React3.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
   Debug: GlobeDebug,
   Panel: GlobePanel
 };
 
 // packages/ui/react-ui-geo/src/components/Map/Map.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import "leaflet/dist/leaflet.css";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
 import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
@@ -901,159 +949,188 @@ var defaults = {
   zoom: 4
 };
 var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(MapContainer, {
-    className: mx2("relative flex w-full h-full grow bg-baseSurface", classNames),
-    attributionControl: false,
-    // TODO(burdon): Only if attention.
-    scrollWheelZoom: true,
-    zoomControl: false,
-    center,
-    zoom,
-    ...props
-  });
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement(MapContainer, {
+      className: mx2("relative flex w-full h-full grow bg-baseSurface", classNames),
+      attributionControl: false,
+      // TODO(burdon): Only if attention.
+      scrollWheelZoom: true,
+      zoomControl: false,
+      center,
+      zoom,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = useResizeDetector2({
-    refreshRate: 200
-  });
-  const map = useMap();
-  useImperativeHandle2(forwardedRef, () => ({
-    setCenter: (center2, zoom2) => {
-      map.setView(center2, zoom2);
-    },
-    setZoom: (cb) => {
-      map.setZoom(cb(map.getZoom()));
-    }
-  }), [
-    map
-  ]);
-  useEffect5(() => {
-    if (width && height) {
-      map.invalidateSize();
-    }
-  }, [
-    width,
-    height
-  ]);
-  useEffect5(() => {
-    if (center) {
-      map.setView(center, zoom);
-    } else if (zoom !== void 0) {
-      map.setZoom(zoom);
-    }
-  }, [
-    center,
-    zoom
-  ]);
-  useEffect5(() => {
-    const handler = debounce(() => {
-      onChange?.({
-        center: map.getCenter(),
-        zoom: map.getZoom()
-      });
-    }, 100);
-    map.on("move", handler);
-    map.on("zoom", handler);
-    return () => {
-      map.off("move", handler);
-      map.off("zoom", handler);
-    };
-  }, [
-    map,
-    onChange
-  ]);
-  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("div", {
-    ref,
-    className: "flex w-full h-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ React4.createElement(TileLayer, {
-    className: "dark:filter dark:grayscale dark:invert",
-    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-  }), markers?.map(({ id, title, location: { lat, lng } }) => {
-    return /* @__PURE__ */ React4.createElement(Marker, {
-      key: id,
-      position: {
-        lat,
-        lng
+  var _effect = _useSignals4();
+  try {
+    const { ref, width, height } = useResizeDetector2({
+      refreshRate: 200
+    });
+    const map = useMap();
+    useImperativeHandle2(forwardedRef, () => ({
+      setCenter: (center2, zoom2) => {
+        map.setView(center2, zoom2);
       },
-      icon: (
-        // TODO(burdon): Create custom icon from bundled assets.
-        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));
-  }));
+      setZoom: (cb) => {
+        map.setZoom(cb(map.getZoom()));
+      }
+    }), [
+      map
+    ]);
+    useEffect5(() => {
+      if (width && height) {
+        map.invalidateSize();
+      }
+    }, [
+      width,
+      height
+    ]);
+    useEffect5(() => {
+      if (center) {
+        map.setView(center, zoom);
+      } else if (zoom !== void 0) {
+        map.setZoom(zoom);
+      }
+    }, [
+      center,
+      zoom
+    ]);
+    useEffect5(() => {
+      const handler = debounce(() => {
+        onChange?.({
+          center: map.getCenter(),
+          zoom: map.getZoom()
+        });
+      }, 100);
+      map.on("move", handler);
+      map.on("zoom", handler);
+      return () => {
+        map.off("move", handler);
+        map.off("zoom", handler);
+      };
+    }, [
+      map,
+      onChange
+    ]);
+    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("div", {
+      ref,
+      className: "flex w-full h-full overflow-hidden bg-baseSurface"
+    }, /* @__PURE__ */ React4.createElement(TileLayer, {
+      className: "dark:filter dark:grayscale dark:invert",
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    }), 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.
+          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();
+  }
 });
 var CustomControl2 = ({ position, children }) => {
-  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
-  ]);
-  return null;
+  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
+    ]);
+    return null;
+  } finally {
+    _effect.f();
+  }
 };
 var Map = {
   Root: MapRoot,
   Canvas: MapCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React4.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React4.createElement(ActionControls, {
-    onAction
-  }))
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = _useSignals4();
+    try {
+      return /* @__PURE__ */ React4.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React4.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = _useSignals4();
+    try {
+      return /* @__PURE__ */ React4.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React4.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  }
 };
 export {
   ActionControls,
@@ -1064,7 +1141,7 @@ export {
   closestPoint,
   controlPositions,
   createLayers,
-  geoCircle2 as geoCircle,
+  geoCircle,
   geoInertiaDrag,
   geoLine,
   geoPoint,