@dxos/react-ui-geo 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/node/index.cjs

@@ -35,7 +35,7 @@ __export(node_exports, {
   closestPoint: () => closestPoint,
   controlPositions: () => controlPositions,
   createLayers: () => createLayers,
-  geoCircle: () => geoCircle2,
+  geoCircle: () => geoCircle,
   geoInertiaDrag: () => geoInertiaDrag,
   geoLine: () => geoLine,
   geoPoint: () => geoPoint,
@@ -55,31 +55,34 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 var import_chunk_LAICG6L2 = require("./chunk-LAICG6L2.cjs");
-var d37 = __toESM(require("d3"));
+var import_tracking = require("@preact-signals/safe-react/tracking");
+var import_d3 = require("d3");
 var import_react = __toESM(require("react"));
 var import_react_resize_detector = require("react-resize-detector");
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_debug = require("@dxos/debug");
 var import_react_ui2 = require("@dxos/react-ui");
-var d34 = __toESM(require("d3"));
+var import_d32 = require("d3");
 var import_react3 = require("react");
-var d3 = __toESM(require("d3"));
+var import_d33 = require("d3");
 var import_versor = __toESM(require("versor"));
-var d32 = __toESM(require("d3"));
-var d33 = __toESM(require("d3"));
-var topojson = __toESM(require("topojson-client"));
+var import_d34 = require("d3");
+var import_d35 = require("d3");
+var import_topojson_client = require("topojson-client");
 var import_react4 = require("react");
 var import_react5 = require("react");
-var d35 = __toESM(require("d3"));
+var import_d36 = require("d3");
 var import_react6 = require("react");
-var d36 = __toESM(require("d3"));
+var import_d37 = require("d3");
 var import_react7 = require("react");
 var import_versor2 = __toESM(require("versor"));
-var import_log = require("@dxos/log");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react8 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_leaflet = require("leaflet/dist/leaflet.css");
 var import_leaflet2 = __toESM(require("leaflet"));
 var import_react9 = __toESM(require("react"));
@@ -91,23 +94,28 @@ var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var GlobeContext = /* @__PURE__ */ (0, import_react2.createContext)(void 0);
 var GlobeContextProvider = ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation }) => {
-  const [center, setCenter] = (0, import_react_ui2.useControlledState)(_center);
-  const [scale, setScale] = (0, import_react_ui2.useControlledState)(_scale);
-  const [translation, setTranslation] = (0, import_react_ui2.useControlledState)(_translation);
-  const [rotation, setRotation] = (0, import_react_ui2.useControlledState)(_rotation);
-  return /* @__PURE__ */ import_react2.default.createElement(GlobeContext.Provider, {
-    value: {
-      size,
-      center,
-      scale,
-      translation,
-      rotation,
-      setCenter,
-      setScale,
-      setTranslation,
-      setRotation
-    }
-  }, children);
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const [center, setCenter] = (0, import_react_ui2.useControlledState)(_center);
+    const [scale, setScale] = (0, import_react_ui2.useControlledState)(_scale);
+    const [translation, setTranslation] = (0, import_react_ui2.useControlledState)(_translation);
+    const [rotation, setRotation] = (0, import_react_ui2.useControlledState)(_rotation);
+    return /* @__PURE__ */ import_react2.default.createElement(GlobeContext.Provider, {
+      value: {
+        size,
+        center,
+        scale,
+        translation,
+        rotation,
+        setCenter,
+        setScale,
+        setTranslation,
+        setRotation
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var useGlobeContext = () => {
   return (0, import_react2.useContext)(GlobeContext) ?? (0, import_debug.raise)(new Error("Missing GlobeContext"));
@@ -133,7 +141,7 @@ var geoInertiaDrag = (target, render, projection, options) => {
   if (target.node) {
     target = target.node();
   }
-  target = d3.select(target);
+  target = (0, import_d33.select)(target);
   const inertia = geoInertiaDragHelper({
     projection,
     render: (rotation) => {
@@ -157,7 +165,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((0, import_d33.drag)().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
   return inertia;
 };
 var geoInertiaDragHelper = (opt) => {
@@ -218,7 +226,7 @@ function inertiaHelper(opt) {
       0,
       0
     ],
-    timer: d3.timer(() => {
+    timer: (0, import_d33.timer)(() => {
     }),
     time: 0,
     t: 0,
@@ -309,7 +317,7 @@ var geoPoint = (point) => ({
   type: "Point",
   coordinates: geoToPosition(point)
 });
-var geoCircle2 = ({ lat, lng }, radius) => d32.geoCircle().radius(radius).center([
+var geoCircle = ({ lat, lng }, radius) => (0, import_d34.geoCircle)().radius(radius).center([
   lng,
   lat
 ])();
@@ -359,7 +367,7 @@ var createLayers = (topology, features, styles) => {
   if (styles.graticule) {
     layers.push({
       styles: styles.graticule,
-      path: d33.geoGraticule().step([
+      path: (0, import_d35.geoGraticule)().step([
         6,
         6
       ])()
@@ -369,13 +377,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: (0, import_topojson_client.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: (0, import_topojson_client.mesh)(topology, topology.objects.countries, (a, b) => a !== b)
       });
     }
     if (topology.objects.dots && styles.dots) {
@@ -447,7 +455,7 @@ var useDrag = (controller, options = {}) => {
     if (!canvas || options.disabled) {
       return;
     }
-    geoInertiaDrag(d34.select(canvas), () => {
+    geoInertiaDrag((0, import_d32.select)(canvas), () => {
       controller.setRotation(controller.projection.rotate());
       options.onUpdate?.({
         type: "move",
@@ -466,7 +474,7 @@ var useDrag = (controller, options = {}) => {
       })
     });
     return () => {
-      cancelDrag(d34.select(canvas));
+      cancelDrag((0, import_d32.select)(canvas));
     };
   }, [
     controller,
@@ -515,7 +523,7 @@ var useMapZoomHandler = (controller) => {
 var useSpinner = (controller, options = {}) => {
   const [running, setRunning] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
-    let timer4;
+    let timer3;
     const start = () => {
       const delta = options.delta ?? [
         1e-3,
@@ -524,7 +532,7 @@ var useSpinner = (controller, options = {}) => {
       ];
       let t = 0;
       let lastRotation = controller.projection.rotate();
-      timer4 = d35.timer((elapsed) => {
+      timer3 = (0, import_d36.timer)((elapsed) => {
         const dt = elapsed - t;
         t = elapsed;
         const rotation = [
@@ -537,9 +545,9 @@ var useSpinner = (controller, options = {}) => {
       });
     };
     const stop = () => {
-      if (timer4) {
-        timer4.stop();
-        timer4 = void 0;
+      if (timer3) {
+        timer3.stop();
+        timer3 = void 0;
       }
     };
     if (controller && running) {
@@ -561,15 +569,14 @@ var useSpinner = (controller, options = {}) => {
     () => setRunning(false)
   ];
 };
-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 = (0, import_react7.useMemo)(() => (0, import_d37.selection)(), []);
   const [running, setRunning] = (0, import_react7.useState)(options.running ?? false);
   (0, import_react7.useEffect)(() => {
     if (!running) {
-      selection2.interrupt(TRANSITION_NAME);
+      selection.interrupt(TRANSITION_NAME);
       return;
     }
     let t;
@@ -579,7 +586,7 @@ var useTour = (controller, points, options = {}) => {
         const context = canvas.getContext("2d", {
           alpha: false
         });
-        const path = d36.geoPath(projection, context).pointRadius(2);
+        const path = (0, import_d37.geoPath)(projection, context).pointRadius(2);
         const tilt = options.tilt ?? 0;
         let last;
         try {
@@ -595,12 +602,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 = (0, import_d37.geoInterpolate)(p1 || p2, p2);
+            const distance = (0, import_d37.geoDistance)(p1 || p2, p2);
             const r1 = p1 ? positionToRotation(p1, tilt) : controller.projection.rotate();
             const r2 = positionToRotation(p2, tilt);
             const iv = import_versor2.default.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();
@@ -627,28 +634,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) {
-          import_log.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);
       };
     }
   }, [
@@ -668,52 +667,62 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      classNames
-    ]
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
-    //
-    icon: "ph--plus--regular",
-    label: "zoom in",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("zoom-in")
-  }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
-    //
-    icon: "ph--minus--regular",
-    label: "zoom out",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("zoom-out")
-  }));
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        classNames
+      ]
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
+      //
+      icon: "ph--plus--regular",
+      label: "zoom in",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("zoom-in")
+    }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.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__ */ import_react8.default.createElement(import_react_ui3.Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      classNames
-    ]
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
-    //
-    icon: "ph--play--regular",
-    label: "start",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("start")
-  }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
-    //
-    icon: "ph--globe-hemisphere-west--regular",
-    label: "toggle",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("toggle")
-  }));
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        classNames
+      ]
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
+      //
+      icon: "ph--play--regular",
+      label: "start",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("start")
+    }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.IconButton, {
+      //
+      icon: "ph--globe-hemisphere-west--regular",
+      label: "toggle",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("toggle")
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var defaultStyles = {
   light: {
@@ -758,161 +767,200 @@ var defaultStyles = {
   }
 };
 var projectionMap = {
-  orthographic: d37.geoOrthographic,
-  mercator: d37.geoMercator,
-  "transverse-mercator": d37.geoTransverseMercator
+  orthographic: import_d3.geoOrthographic,
+  mercator: import_d3.geoMercator,
+  "transverse-mercator": import_d3.geoTransverseMercator
 };
 var getProjection = (type = "orthographic") => {
   if (typeof type === "string") {
-    const constructor = projectionMap[type] ?? d37.geoOrthographic;
+    const constructor = projectionMap[type] ?? import_d3.geoOrthographic;
     return constructor();
   }
-  return type ?? d37.geoOrthographic();
+  return type ?? (0, import_d3.geoOrthographic)();
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
-  const { ref, width, height } = (0, import_react_resize_detector.useResizeDetector)();
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    ref,
-    className: (0, import_react_ui_theme.mx)("relative flex grow overflow-hidden", classNames)
-  }, /* @__PURE__ */ import_react.default.createElement(GlobeContextProvider, {
-    size: {
-      width,
-      height
-    },
-    ...props
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { ref, width, height } = (0, import_react_resize_detector.useResizeDetector)();
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      ref,
+      className: (0, import_react_ui_theme.mx)("relative flex grow overflow-hidden", classNames)
+    }, /* @__PURE__ */ import_react.default.createElement(GlobeContextProvider, {
+      size: {
+        width,
+        height
+      },
+      ...props
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var GlobeCanvas = /* @__PURE__ */ (0, import_react.forwardRef)(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
-  const { themeMode } = (0, import_react_ui.useThemeContext)();
-  const styles = (0, import_react.useMemo)(() => _styles ?? defaultStyles[themeMode], [
-    _styles,
-    themeMode
-  ]);
-  const [canvas, setCanvas] = (0, import_react.useState)(null);
-  const canvasRef = (canvas2) => setCanvas(canvas2);
-  const projection = (0, import_react.useMemo)(() => getProjection(_projection), [
-    _projection
-  ]);
-  const layers = (0, import_react.useMemo)(() => {
-    return timer(() => createLayers(topology, features, styles));
-  }, [
-    topology,
-    features,
-    styles
-  ]);
-  const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
-  const scaleRef = (0, import_react_ui.useDynamicRef)(scale);
-  (0, import_react.useEffect)(() => {
-    if (center) {
-      setScale(1);
-      setRotation(positionToRotation(geoToPosition(center)));
-    }
-  }, [
-    center
-  ]);
-  const zooming = (0, import_react.useRef)(false);
-  (0, import_react.useImperativeHandle)(forwardRef3, () => {
-    return {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { themeMode } = (0, import_react_ui.useThemeContext)();
+    const styles = (0, import_react.useMemo)(() => _styles ?? defaultStyles[themeMode], [
+      _styles,
+      themeMode
+    ]);
+    const [canvas, setCanvas] = (0, import_react.useState)(null);
+    const canvasRef = (canvas2) => setCanvas(canvas2);
+    const projection = (0, import_react.useMemo)(() => getProjection(_projection), [
+      _projection
+    ]);
+    const layers = (0, import_react.useMemo)(() => {
+      return timer(() => createLayers(topology, features, styles));
+    }, [
+      topology,
+      features,
+      styles
+    ]);
+    const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
+    const scaleRef = (0, import_react_ui.useDynamicRef)(scale);
+    (0, import_react.useEffect)(() => {
+      if (center) {
+        setScale(1);
+        setRotation(positionToRotation(geoToPosition(center)));
+      }
+    }, [
+      center
+    ]);
+    const zooming = (0, import_react.useRef)(false);
+    (0, import_react.useImperativeHandle)(forwardRef3, () => {
+      return {
+        canvas,
+        projection,
+        center,
+        get scale() {
+          return scaleRef.current;
+        },
+        translation,
+        rotation,
+        setCenter,
+        setScale: (s) => {
+          if (typeof s === "function") {
+            const is = (0, import_d3.interpolateNumber)(scaleRef.current, s(scaleRef.current));
+            (0, import_d3.transition)().ease(zooming.current ? import_d3.easeLinear : import_d3.easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
+              zooming.current = false;
+            });
+          } else {
+            setScale(s);
+          }
+        },
+        setTranslation,
+        setRotation
+      };
+    }, [
+      canvas
+    ]);
+    const generator = (0, import_react.useMemo)(() => canvas && projection && (0, import_d3.geoPath)(projection, canvas.getContext("2d", {
+      alpha: false
+    })), [
       canvas,
-      projection,
-      center,
-      get scale() {
-        return scaleRef.current;
-      },
+      projection
+    ]);
+    (0, import_react.useEffect)(() => {
+      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 = (0, import_react.useMemo)(() => canvas && projection && d37.geoPath(projection, canvas.getContext("2d", {
-    alpha: false
-  })), [
-    canvas,
-    projection
-  ]);
-  (0, import_react.useEffect)(() => {
-    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__ */ import_react.default.createElement("canvas", {
+      ref: canvasRef,
+      width: size.width,
+      height: size.height
+    });
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ import_react.default.createElement("canvas", {
-    ref: canvasRef,
-    width: size.width,
-    height: size.height
-  });
 });
 var GlobeDebug = ({ position = "topleft" }) => {
-  const { size, scale, translation, rotation } = useGlobeContext();
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-  }, /* @__PURE__ */ import_react.default.createElement("pre", {
-    className: "font-mono text-xs text-green-700"
-  }, JSON.stringify({
-    size,
-    scale,
-    translation,
-    rotation
-  }, null, 2)));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { size, scale, translation, rotation } = useGlobeContext();
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      className: (0, import_react_ui_theme.mx)("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
+    }, /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-10 absolute overflow-hidden", controlPositions[position], classNames)
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      className: (0, import_react_ui_theme.mx)("z-10 absolute overflow-hidden", controlPositions[position], classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var CustomControl = ({ position, children }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    className: (0, import_react_ui_theme.mx)("z-10 absolute overflow-hidden", controlPositions[position])
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      className: (0, import_react_ui_theme.mx)("z-10 absolute overflow-hidden", controlPositions[position])
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ import_react.default.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ import_react.default.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ import_react.default.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ import_react.default.createElement(ActionControls, {
-    onAction
-  })),
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = (0, import_tracking.useSignals)();
+    try {
+      return /* @__PURE__ */ import_react.default.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ import_react.default.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = (0, import_tracking.useSignals)();
+    try {
+      return /* @__PURE__ */ import_react.default.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ import_react.default.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
   Debug: GlobeDebug,
   Panel: GlobePanel
 };
@@ -925,159 +973,188 @@ var defaults = {
   zoom: 4
 };
 var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.MapContainer, {
-    className: (0, import_react_ui_theme2.mx)("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 = (0, import_tracking4.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.MapContainer, {
+      className: (0, import_react_ui_theme2.mx)("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__ */ (0, import_react9.forwardRef)(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = (0, import_react_resize_detector2.useResizeDetector)({
-    refreshRate: 200
-  });
-  const map = (0, import_react_leaflet.useMap)();
-  (0, import_react9.useImperativeHandle)(forwardedRef, () => ({
-    setCenter: (center2, zoom2) => {
-      map.setView(center2, zoom2);
-    },
-    setZoom: (cb) => {
-      map.setZoom(cb(map.getZoom()));
-    }
-  }), [
-    map
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (width && height) {
-      map.invalidateSize();
-    }
-  }, [
-    width,
-    height
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (center) {
-      map.setView(center, zoom);
-    } else if (zoom !== void 0) {
-      map.setZoom(zoom);
-    }
-  }, [
-    center,
-    zoom
-  ]);
-  (0, import_react9.useEffect)(() => {
-    const handler = (0, import_async.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
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (markers.length > 0) {
-      const bounds = (0, import_leaflet2.latLngBounds)(markers.map((marker) => marker.location));
-      map.fitBounds(bounds);
-    } else {
-      map.setView(defaults.center, defaults.zoom);
-    }
-  }, [
-    markers
-  ]);
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
-    ref,
-    className: "flex w-full h-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.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__ */ import_react9.default.createElement(import_react_leaflet.Marker, {
-      key: id,
-      position: {
-        lat,
-        lng
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { ref, width, height } = (0, import_react_resize_detector2.useResizeDetector)({
+      refreshRate: 200
+    });
+    const map = (0, import_react_leaflet.useMap)();
+    (0, import_react9.useImperativeHandle)(forwardedRef, () => ({
+      setCenter: (center2, zoom2) => {
+        map.setView(center2, zoom2);
       },
-      icon: (
-        // TODO(burdon): Create custom icon from bundled assets.
-        new import_leaflet2.default.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__ */ import_react9.default.createElement(import_react_leaflet.Popup, null, title));
-  }));
+      setZoom: (cb) => {
+        map.setZoom(cb(map.getZoom()));
+      }
+    }), [
+      map
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (width && height) {
+        map.invalidateSize();
+      }
+    }, [
+      width,
+      height
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (center) {
+        map.setView(center, zoom);
+      } else if (zoom !== void 0) {
+        map.setZoom(zoom);
+      }
+    }, [
+      center,
+      zoom
+    ]);
+    (0, import_react9.useEffect)(() => {
+      const handler = (0, import_async.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
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (markers.length > 0) {
+        const bounds = (0, import_leaflet2.latLngBounds)(markers.map((marker) => marker.location));
+        map.fitBounds(bounds);
+      } else {
+        map.setView(defaults.center, defaults.zoom);
+      }
+    }, [
+      markers
+    ]);
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
+      ref,
+      className: "flex w-full h-full overflow-hidden bg-baseSurface"
+    }, /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.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__ */ import_react9.default.createElement(import_react_leaflet.Marker, {
+        key: id,
+        position: {
+          lat,
+          lng
+        },
+        icon: (
+          // TODO(burdon): Create custom icon from bundled assets.
+          new import_leaflet2.default.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__ */ import_react9.default.createElement(import_react_leaflet.Popup, null, title));
+    }));
+  } finally {
+    _effect.f();
+  }
 });
 var CustomControl2 = ({ position, children }) => {
-  const map = (0, import_react_leaflet.useMap)();
-  (0, import_react9.useEffect)(() => {
-    const control = new import_leaflet2.Control({
-      position
-    });
-    control.onAdd = () => {
-      const container = import_leaflet2.DomUtil.create("div", (0, import_react_ui_theme2.mx)("!m-0", controlPositions[position]));
-      import_leaflet2.DomEvent.disableClickPropagation(container);
-      import_leaflet2.DomEvent.disableScrollPropagation(container);
-      const root = (0, import_client.createRoot)(container);
-      root.render(/* @__PURE__ */ import_react9.default.createElement(import_react_ui4.ThemeProvider, {
-        tx: import_react_ui_theme2.defaultTx
-      }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Provider, null, children)));
-      return container;
-    };
-    control.addTo(map);
-    return () => {
-      control.remove();
-    };
-  }, [
-    map,
-    position,
-    children
-  ]);
-  return null;
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const map = (0, import_react_leaflet.useMap)();
+    (0, import_react9.useEffect)(() => {
+      const control = new import_leaflet2.Control({
+        position
+      });
+      control.onAdd = () => {
+        const container = import_leaflet2.DomUtil.create("div", (0, import_react_ui_theme2.mx)("!m-0", controlPositions[position]));
+        import_leaflet2.DomEvent.disableClickPropagation(container);
+        import_leaflet2.DomEvent.disableScrollPropagation(container);
+        const root = (0, import_client.createRoot)(container);
+        root.render(/* @__PURE__ */ import_react9.default.createElement(import_react_ui4.ThemeProvider, {
+          tx: import_react_ui_theme2.defaultTx
+        }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.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__ */ import_react9.default.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ import_react9.default.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ import_react9.default.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ import_react9.default.createElement(ActionControls, {
-    onAction
-  }))
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = (0, import_tracking4.useSignals)();
+    try {
+      return /* @__PURE__ */ import_react9.default.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ import_react9.default.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = (0, import_tracking4.useSignals)();
+    try {
+      return /* @__PURE__ */ import_react9.default.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ import_react9.default.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {