@dxos/react-ui-geo 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/lib/node/index.cjs

@@ -55,11 +55,13 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 var import_chunk_LAICG6L2 = require("./chunk-LAICG6L2.cjs");
+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");
@@ -77,8 +79,10 @@ var import_react6 = require("react");
 var import_d37 = require("d3");
 var import_react7 = require("react");
 var import_versor2 = __toESM(require("versor"));
+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"));
@@ -90,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"));
@@ -658,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: {
@@ -760,149 +779,188 @@ var getProjection = (type = "orthographic") => {
   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 = (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
-  ]);
-  (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
 };
@@ -915,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 = {