@dxos/react-ui-geo 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/dist/lib/browser/index.mjs

@@ -3,15 +3,13 @@ import {
 } from "./chunk-GMWLKTLN.mjs";
 
 // src/components/Globe/Globe.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
 import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 
 // src/hooks/context.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 import { useControlledState } from "@dxos/react-ui";
@@ -23,29 +21,24 @@ var defaults = {
   zoom: 4
 };
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
-var GlobeContextProvider = ({ children, size, center: centerParam = defaults.center, zoom: zoomParam = defaults.zoom, translation: translationParam, rotation: rotationParam }) => {
-  var _effect = _useSignals();
-  try {
-    const [center, setCenter] = useControlledState(centerParam);
-    const [zoom, setZoom] = useControlledState(zoomParam);
-    const [translation, setTranslation] = useControlledState(translationParam);
-    const [rotation, setRotation] = useControlledState(rotationParam);
-    return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
-      value: {
-        size,
-        center,
-        zoom,
-        translation,
-        rotation,
-        setCenter,
-        setZoom,
-        setTranslation,
-        setRotation
-      }
-    }, children);
-  } finally {
-    _effect.f();
-  }
+var GlobeContextProvider = ({ children, size, center: centerProp = defaults.center, zoom: zoomProp = defaults.zoom, translation: translationProp, rotation: rotationProp }) => {
+  const [center, setCenter] = useControlledState(centerProp);
+  const [zoom, setZoom] = useControlledState(zoomProp);
+  const [translation, setTranslation] = useControlledState(translationProp);
+  const [rotation, setRotation] = useControlledState(rotationProp);
+  return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
+    value: {
+      size,
+      center,
+      zoom,
+      translation,
+      rotation,
+      setCenter,
+      setZoom,
+      setTranslation,
+      setRotation
+    }
+  }, children);
 };
 var useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
@@ -631,9 +624,25 @@ var useTour = (controller, points, options = {}) => {
 };
 
 // src/components/Toolbar/Controls.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2 from "react";
-import { IconButton, Toolbar } from "@dxos/react-ui";
+import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-geo";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "zoom in icon button": "Zoom in",
+        "zoom out icon button": "Zoom out",
+        "start icon button": "Start",
+        "toggle icon button": "Toggle"
+      }
+    }
+  }
+];
+
+// src/components/Toolbar/Controls.tsx
 var controlPositions = {
   topleft: "top-2 left-2",
   topright: "top-2 right-2",
@@ -641,58 +650,42 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-      classNames: [
-        "gap-2",
-        classNames
-      ]
-    }, /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--plus--regular",
-      label: "zoom in",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("zoom-in")
-    }), /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--minus--regular",
-      label: "zoom out",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("zoom-out")
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("zoom in icon button"),
+    onClick: () => onAction?.("zoom-in")
+  }), /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--minus--regular",
+    iconOnly: true,
+    label: t("zoom out icon button"),
+    onClick: () => onAction?.("zoom-out")
+  }));
 };
 var ActionControls = ({ classNames, onAction }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-      classNames: [
-        "gap-2",
-        classNames
-      ]
-    }, /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--play--regular",
-      label: "start",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("start")
-    }), /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--globe-hemisphere-west--regular",
-      label: "toggle",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("toggle")
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--path--regular",
+    iconOnly: true,
+    label: t("start icon button"),
+    onClick: () => onAction?.("start")
+  }), /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--globe-hemisphere-west--regular",
+    iconOnly: true,
+    label: t("toggle icon button"),
+    onClick: () => onAction?.("toggle")
+  }));
 };
 
 // src/components/Globe/Globe.tsx
@@ -751,185 +744,146 @@ var getProjection = (type = "orthographic") => {
   return type ?? geoOrthographic();
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    const { ref, width, height } = useResizeDetector();
-    return /* @__PURE__ */ React3.createElement("div", {
-      ref,
-      className: mx("relative flex grow overflow-hidden", classNames)
-    }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
-      size: {
-        width,
-        height
-      },
-      ...props
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  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 GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionParam, topology, features, styles: stylesParam }, forwardRef3) => {
-  var _effect = _useSignals3();
-  try {
-    const { themeMode } = useThemeContext();
-    const styles = useMemo2(() => stylesParam ?? defaultStyles[themeMode], [
-      stylesParam,
-      themeMode
-    ]);
-    const [canvas, setCanvas] = useState3(null);
-    const canvasRef = (canvas2) => setCanvas(canvas2);
-    const projection = useMemo2(() => getProjection(projectionParam), [
-      projectionParam
-    ]);
-    const layers = useMemo2(() => {
-      return timer(() => createLayers(topology, features, styles));
-    }, [
-      topology,
-      features,
-      styles
-    ]);
-    const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
-    const zoomRef = useDynamicRef(zoom);
-    useEffect4(() => {
-      if (center) {
-        setZoom(1);
-        setRotation(positionToRotation(geoToPosition(center)));
-      }
-    }, [
-      center
-    ]);
-    const zooming = useRef(false);
-    useImperativeHandle(forwardRef3, () => {
-      return {
-        canvas,
-        projection,
-        center,
-        get zoom() {
-          return zoomRef.current;
-        },
-        translation,
-        rotation,
-        setCenter,
-        setZoom: (s) => {
-          if (typeof s === "function") {
-            const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
-            transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
-              zooming.current = false;
-            });
-          } else {
-            setZoom(s);
-          }
-        },
-        setTranslation,
-        setRotation
-      };
-    }, [
-      canvas
-    ]);
-    const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
-      alpha: false
-    })), [
+var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef3) => {
+  const { themeMode } = useThemeContext();
+  const styles = useMemo2(() => stylesProp ?? defaultStyles[themeMode], [
+    stylesProp,
+    themeMode
+  ]);
+  const [canvas, setCanvas] = useState3(null);
+  const canvasRef = (canvas2) => setCanvas(canvas2);
+  const projection = useMemo2(() => getProjection(projectionProp), [
+    projectionProp
+  ]);
+  const layers = useMemo2(() => {
+    return timer(() => createLayers(topology, features, styles));
+  }, [
+    topology,
+    features,
+    styles
+  ]);
+  const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
+  const zoomRef = useDynamicRef(zoom);
+  useEffect4(() => {
+    if (center) {
+      setZoom(1);
+      setRotation(positionToRotation(geoToPosition(center)));
+    }
+  }, [
+    center
+  ]);
+  const zooming = useRef(false);
+  useImperativeHandle(forwardRef3, () => {
+    return {
       canvas,
-      projection
-    ]);
-    useEffect4(() => {
-      if (canvas && projection) {
-        timer(() => {
-          projection.scale(Math.min(size.width, size.height) / 2 * zoom).translate([
-            size.width / 2 + (translation?.x ?? 0),
-            size.height / 2 + (translation?.y ?? 0)
-          ]).rotate(rotation ?? [
-            0,
-            0,
-            0
-          ]);
-          renderLayers(generator, layers, zoom, styles);
-        });
-      }
-    }, [
-      generator,
-      size,
-      zoom,
+      projection,
+      center,
+      get zoom() {
+        return zoomRef.current;
+      },
       translation,
       rotation,
-      layers
-    ]);
-    if (!size.width || !size.height) {
-      return null;
+      setCenter,
+      setZoom: (s) => {
+        if (typeof s === "function") {
+          const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
+          transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
+            zooming.current = false;
+          });
+        } else {
+          setZoom(s);
+        }
+      },
+      setTranslation,
+      setRotation
+    };
+  }, [
+    canvas
+  ]);
+  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
+    alpha: false
+  })), [
+    canvas,
+    projection
+  ]);
+  useEffect4(() => {
+    if (canvas && projection) {
+      timer(() => {
+        projection.scale(Math.min(size.width, size.height) / 2 * zoom).translate([
+          size.width / 2 + (translation?.x ?? 0),
+          size.height / 2 + (translation?.y ?? 0)
+        ]).rotate(rotation ?? [
+          0,
+          0,
+          0
+        ]);
+        renderLayers(generator, layers, zoom, styles);
+      });
     }
-    return /* @__PURE__ */ React3.createElement("canvas", {
-      ref: canvasRef,
-      width: size.width,
-      height: size.height
-    });
-  } finally {
-    _effect.f();
+  }, [
+    generator,
+    size,
+    zoom,
+    translation,
+    rotation,
+    layers
+  ]);
+  if (!size.width || !size.height) {
+    return null;
   }
+  return /* @__PURE__ */ React3.createElement("canvas", {
+    ref: canvasRef,
+    width: size.width,
+    height: size.height
+  });
 });
 var GlobeDebug = ({ position = "topleft" }) => {
-  var _effect = _useSignals3();
-  try {
-    const { size, zoom, translation, rotation } = useGlobeContext();
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-    }, /* @__PURE__ */ React3.createElement("pre", {
-      className: "font-mono text-xs text-green-700"
-    }, JSON.stringify({
-      size,
-      zoom,
-      translation,
-      rotation
-    }, null, 2)));
-  } finally {
-    _effect.f();
-  }
+  const { size, zoom, translation, rotation } = useGlobeContext();
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx("z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
+  }, /* @__PURE__ */ React3.createElement("pre", {
+    className: "font-mono text-xs text-green-700"
+  }, JSON.stringify({
+    size,
+    zoom,
+    translation,
+    rotation
+  }, null, 2)));
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
+  }, children);
 };
 var CustomControl = ({ position, children }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute overflow-hidden", controlPositions[position])
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(CustomControl, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React3.createElement(ZoomControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeAction = ({ onAction, position = "bottomright", ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(CustomControl, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React3.createElement(ActionControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx("z-10 absolute overflow-hidden", controlPositions[position])
+  }, children);
 };
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ZoomControls, {
+  onAction
+}));
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ActionControls, {
+  onAction
+}));
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
@@ -940,7 +894,6 @@ var Globe = {
 };
 
 // src/components/Map/Map.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import "leaflet/dist/leaflet.css";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
@@ -948,7 +901,7 @@ import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperati
 import { createRoot } from "react-dom/client";
 import { MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx, mx as mx2 } from "@dxos/react-ui-theme";
+import { defaultTx, mx as mx2 } from "@dxos/ui-theme";
 var defaults2 = {
   center: {
     lat: 51,
@@ -958,197 +911,163 @@ var defaults2 = {
 };
 var [MapContextProvier, useMapContext] = createContext2("Map");
 var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const [attention, setAttention] = useState4(false);
-    const mapRef = useRef2(null);
-    const map = mapRef.current;
-    useImperativeHandle2(forwardedRef, () => ({
-      setCenter: (center2, zoom2) => {
-        mapRef.current?.setView(center2, zoom2);
-      },
-      setZoom: (cb) => {
-        mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
-      }
-    }), []);
-    useEffect5(() => {
-      if (!map) {
-        return;
-      }
-      if (attention) {
-        map.scrollWheelZoom.enable();
-      } else {
-        map.scrollWheelZoom.disable();
-      }
-    }, [
-      map,
-      attention
-    ]);
-    return /* @__PURE__ */ React4.createElement(MapContextProvier, {
-      attention,
-      onChange
-    }, /* @__PURE__ */ React4.createElement(MapContainer, {
-      ...props,
-      ref: mapRef,
-      className: mx2("group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset", classNames),
-      attributionControl: false,
-      zoomControl: false,
-      scrollWheelZoom,
-      doubleClickZoom,
-      touchZoom,
-      center: center ?? defaults2.center,
-      zoom: zoom ?? defaults2.zoom
-    }));
-  } finally {
-    _effect.f();
-  }
+  const [attention, setAttention] = useState4(false);
+  const mapRef = useRef2(null);
+  const map = mapRef.current;
+  useImperativeHandle2(forwardedRef, () => ({
+    setCenter: (center2, zoom2) => {
+      mapRef.current?.setView(center2, zoom2);
+    },
+    setZoom: (cb) => {
+      mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
+    }
+  }), []);
+  useEffect5(() => {
+    if (!map) {
+      return;
+    }
+    if (attention) {
+      map.scrollWheelZoom.enable();
+    } else {
+      map.scrollWheelZoom.disable();
+    }
+  }, [
+    map,
+    attention
+  ]);
+  return /* @__PURE__ */ React4.createElement(MapContextProvier, {
+    attention,
+    onChange
+  }, /* @__PURE__ */ React4.createElement(MapContainer, {
+    ...props,
+    ref: mapRef,
+    className: mx2("group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset", classNames),
+    attributionControl: false,
+    zoomControl: false,
+    scrollWheelZoom,
+    doubleClickZoom,
+    touchZoom,
+    center: center ?? defaults2.center,
+    zoom: zoom ?? defaults2.zoom
+  }));
 });
 MapRoot.displayName = "Map.Root";
 var MapTiles = (_props) => {
-  var _effect = _useSignals4();
-  try {
-    const ref = useRef2(null);
-    const { onChange } = useMapContext(MapTiles.displayName);
-    useMapEvents({
-      zoomstart: (ev) => {
-        onChange?.({
-          center: ev.target.getCenter(),
-          zoom: ev.target.getZoom()
-        });
-      }
-    });
-    const { attention } = useMapContext(MapTiles.displayName);
-    useEffect5(() => {
-      if (ref.current) {
-        ref.current.getContainer().dataset.attention = attention ? "1" : "0";
-      }
-    }, [
-      attention
-    ]);
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(TileLayer, {
-      ref,
-      "data-attention": attention,
-      detectRetina: true,
-      className: 'dark:grayscale dark:invert data-[attention="0"]:!opacity-80',
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-      keepBuffer: 4
-    }));
-  } finally {
-    _effect.f();
-  }
+  const ref = useRef2(null);
+  const { onChange } = useMapContext(MapTiles.displayName);
+  useMapEvents({
+    zoomstart: (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom()
+      });
+    }
+  });
+  const { attention } = useMapContext(MapTiles.displayName);
+  useEffect5(() => {
+    if (ref.current) {
+      ref.current.getContainer().dataset.attention = attention ? "1" : "0";
+    }
+  }, [
+    attention
+  ]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(TileLayer, {
+    ref,
+    "data-attention": attention,
+    detectRetina: true,
+    className: 'dark:grayscale dark:invert data-[attention="0"]:!opacity-80',
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    keepBuffer: 4
+  }));
 };
 MapTiles.displayName = "Map.Tiles";
 var MapMarkers = ({ selected, markers }) => {
-  var _effect = _useSignals4();
-  try {
-    const map = useMap();
-    useEffect5(() => {
-      if (markers.length > 0) {
-        const bounds = latLngBounds(markers.map((marker) => marker.location));
-        map.fitBounds(bounds);
-      } else {
-        map.setView(defaults2.center, defaults2.zoom);
-      }
-    }, [
-      markers
-    ]);
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
-      return /* @__PURE__ */ React4.createElement(Marker, {
-        key: id,
-        position: {
-          lat,
-          lng
-        },
-        icon: (
-          // TODO(burdon): Create custom icon from bundled assets.
-          // TODO(burdon): Selection state.
-          new L.Icon({
-            iconUrl: "https://dxos.network/marker-icon.png",
-            iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
-            shadowUrl: "https://dxos.network/marker-shadow.png",
-            iconSize: [
-              25,
-              41
-            ],
-            iconAnchor: [
-              12,
-              41
-            ],
-            popupAnchor: [
-              1,
-              -34
-            ],
-            shadowSize: [
-              41,
-              41
-            ]
-          })
-        )
-      }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
-    }));
-  } finally {
-    _effect.f();
-  }
+  const map = useMap();
+  useEffect5(() => {
+    if (markers.length > 0) {
+      const bounds = latLngBounds(markers.map((marker) => marker.location));
+      map.fitBounds(bounds);
+    } else {
+      map.setView(defaults2.center, defaults2.zoom);
+    }
+  }, [
+    markers
+  ]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React4.createElement(Marker, {
+      key: id,
+      position: {
+        lat,
+        lng
+      },
+      icon: (
+        // TODO(burdon): Create custom icon from bundled assets.
+        // TODO(burdon): Selection state.
+        new L.Icon({
+          iconUrl: "https://dxos.network/marker-icon.png",
+          iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
+          shadowUrl: "https://dxos.network/marker-shadow.png",
+          iconSize: [
+            25,
+            41
+          ],
+          iconAnchor: [
+            12,
+            41
+          ],
+          popupAnchor: [
+            1,
+            -34
+          ],
+          shadowSize: [
+            41,
+            41
+          ]
+        })
+      )
+    }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
+  }));
 };
 MapMarkers.displayName = "Map.Markers";
 var CustomControl2 = ({ position, children }) => {
-  var _effect = _useSignals4();
-  try {
-    const map = useMap();
-    useEffect5(() => {
-      const control = new Control({
-        position
-      });
-      control.onAdd = () => {
-        const container = DomUtil.create("div", mx2("!m-0", controlPositions[position]));
-        DomEvent.disableClickPropagation(container);
-        DomEvent.disableScrollPropagation(container);
-        const root = createRoot(container);
-        root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
-          tx: defaultTx
-        }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
-        return container;
-      };
-      control.addTo(map);
-      return () => {
-        control.remove();
-      };
-    }, [
-      map,
-      position,
-      children
-    ]);
-    return null;
-  } finally {
-    _effect.f();
-  }
-};
-var MapZoom = ({ onAction, position = "bottomleft", ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(CustomControl2, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React4.createElement(ZoomControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var MapAction = ({ onAction, position = "bottomright", ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(CustomControl2, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React4.createElement(ActionControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
+  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 MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React4.createElement(ZoomControls, {
+  onAction
+}));
+var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React4.createElement(ActionControls, {
+  onAction
+}));
 var Map = {
   Root: MapRoot,
   Tiles: MapTiles,
@@ -1176,6 +1095,8 @@ export {
   renderLayers,
   restrictAxis,
   timer,
+  translationKey,
+  translations,
   useDrag,
   useGlobeContext,
   useGlobeZoomHandler,