@dxos/react-ui-geo 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/dist/lib/browser/index.mjs

@@ -3,43 +3,16 @@ import {
 } from "./chunk-GMWLKTLN.mjs";
 
 // src/components/Globe/Globe.tsx
-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 { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
+import React2, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import { useComposedRefs, useControlledState, useDynamicRef, useThemeContext } from "@dxos/react-ui";
+import { composable, composableProps, 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 { 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 }) => {
-  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"));
 };
@@ -64,7 +37,7 @@ var timer = (cb) => {
 };
 
 // src/util/inertia.ts
-import { select, drag, timer as timer2 } from "d3";
+import { drag, select, 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) => {
@@ -427,6 +400,7 @@ var cancelDrag = (node) => node.on(".drag", null);
 
 // src/hooks/useGlobeZoomHandler.ts
 import { useCallback } from "react";
+var ZOOM_FACTOR = 0.1;
 var useGlobeZoomHandler = (controller) => {
   return useCallback((event) => {
     if (!controller) {
@@ -434,11 +408,15 @@ var useGlobeZoomHandler = (controller) => {
     }
     switch (event) {
       case "zoom-in": {
-        controller.setScale((scale) => scale * 1.1);
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
         break;
       }
       case "zoom-out": {
-        controller.setScale((scale) => scale * 0.9);
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
         break;
       }
     }
@@ -523,8 +501,8 @@ var useSpinner = (controller, options = {}) => {
 };
 
 // src/hooks/useTour.ts
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from "d3";
-import { useEffect as useEffect3, useState as useState2, useMemo } from "react";
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from "d3";
+import { useEffect as useEffect3, useMemo, useState as useState2 } from "react";
 import versor2 from "versor";
 var TRANSITION_NAME = "globe-tour";
 var defaultDuration = 1500;
@@ -571,7 +549,7 @@ var useTour = (controller, points, options = {}) => {
               {
                 context.beginPath();
                 context.strokeStyle = options?.styles?.arc?.strokeStyle ?? "yellow";
-                context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.scale ?? 1);
+                context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.zoom ?? 1);
                 context.setLineDash(options?.styles?.arc?.lineDash ?? []);
                 path({
                   type: "LineString",
@@ -583,7 +561,7 @@ var useTour = (controller, points, options = {}) => {
                 context.stroke();
                 context.beginPath();
                 context.fillStyle = options?.styles?.cursor?.fillStyle ?? "orange";
-                path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.scale ?? 1));
+                path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.zoom ?? 1));
                 path({
                   type: "Point",
                   coordinates: ip(t22)
@@ -597,7 +575,7 @@ var useTour = (controller, points, options = {}) => {
             await transition2.end();
             last = next;
           }
-        } catch (err) {
+        } catch {
         } finally {
           setRunning(false);
         }
@@ -619,9 +597,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 React from "react";
+import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
+
+// src/translations.ts
+var translationKey = "@dxos/react-ui-geo";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "zoom-in-icon.button": "Zoom in",
+        "zoom-out-icon.button": "Zoom out",
+        "start-icon.button": "Start",
+        "toggle-icon.button": "Toggle"
+      }
+    }
+  }
+];
+
+// src/components/Toolbar/Controls.tsx
 var controlPositions = {
   topleft: "top-2 left-2",
   topright: "top-2 right-2",
@@ -629,62 +623,42 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  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();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("zoom-in-icon.button"),
+    onClick: () => onAction?.("zoom-in")
+  }), /* @__PURE__ */ React.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-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();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--path--regular",
+    iconOnly: true,
+    label: t("start-icon.button"),
+    onClick: () => onAction?.("start")
+  }), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--globe-hemisphere-west--regular",
+    iconOnly: true,
+    label: t("toggle-icon.button"),
+    onClick: () => onAction?.("toggle")
+  }));
 };
 
 // src/components/Globe/Globe.tsx
@@ -742,400 +716,377 @@ 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, {
+var GlobeRoot = composable(({ children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props }, forwardedRef) => {
+  const localRef = useRef(null);
+  const composedRef = useComposedRefs(localRef, forwardedRef);
+  const { width, height } = useResizeDetector({
+    targetRef: localRef
+  });
+  const [center, setCenter] = useControlledState(centerProp);
+  const [zoom, setZoom] = useControlledState(zoomProp ?? 4);
+  const [translation, setTranslation] = useControlledState(translationProp);
+  const [rotation, setRotation] = useControlledState(rotationProp);
+  return /* @__PURE__ */ React2.createElement(GlobeContext.Provider, {
+    value: {
       size: {
         width,
         height
       },
-      ...props
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
-  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
-    })), [
+      center,
+      zoom,
+      translation,
+      rotation,
+      setCenter,
+      setZoom,
+      setTranslation,
+      setRotation
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      classNames: "relative dx-container"
+    }),
+    ref: composedRef
+  }, children));
+});
+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 * 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,
+      projection,
+      center,
+      get zoom() {
+        return zoomRef.current;
+      },
       translation,
       rotation,
-      layers
-    ]);
-    if (!size.width || !size.height) {
-      return null;
+      setCenter,
+      setZoom: (state) => {
+        if (typeof state === "function") {
+          const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
+          transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
+            zooming.current = false;
+          });
+        } else {
+          setZoom(state);
+        }
+      },
+      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__ */ React2.createElement("canvas", {
+    ref: canvasRef,
+    width: size.width,
+    height: size.height
+  });
 });
 var GlobeDebug = ({ position = "topleft" }) => {
-  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();
-  }
+  const { size, zoom, translation, rotation } = useGlobeContext();
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm", controlPositions[position])
+  }, /* @__PURE__ */ React2.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__ */ React2.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();
-  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx("z-10 absolute overflow-hidden", controlPositions[position])
+  }, children);
 };
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React2.createElement(ZoomControls, {
+  onAction
+}));
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React2.createElement(ActionControls, {
+  onAction
+}));
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  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();
-    }
-  },
+  Zoom: GlobeZoom,
+  Action: GlobeAction,
   Debug: GlobeDebug,
   Panel: GlobePanel
 };
 
 // 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";
-import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
+import React3, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } from "react";
 import { createRoot } from "react-dom/client";
-import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
-import { debounce } from "@dxos/async";
+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 { composable as composable2, composableProps as composableProps2, defaultTx, mx as mx2 } from "@dxos/ui-theme";
 var defaults = {
-  // TODO(burdon): Guess location.
   center: {
     lat: 51,
     lng: 0
   },
   zoom: 4
 };
-var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(MapContainer, {
-      className: mx2("relative grid grow bg-baseSurface", classNames),
-      attributionControl: false,
-      // TODO(burdon): Only if attention.
-      scrollWheelZoom: true,
-      zoomControl: false,
-      center,
-      zoom,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+var [MapContextProvider, useMapContext] = createContext2("Map");
+var MapRoot = composable2(({ children, onChange, ...props }, forwardedRef) => {
+  const attention = false;
+  return /* @__PURE__ */ React3.createElement(MapContextProvider, {
+    attention,
+    onChange
+  }, /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps2(props, {
+      role: "none",
+      classNames: "dx-container grid dx-focus-ring-inset"
+    }),
+    ref: forwardedRef
+  }, children));
+});
+MapRoot.displayName = "Map.Root";
+var MAP_CONTENT_NAME = "Map.Content";
+var MapContent = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props }, forwardedRef) => {
+  const { attention } = useMapContext(MAP_CONTENT_NAME);
+  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__ */ React3.createElement(MapContainer, {
+    ...props,
+    className: mx2("group relative grid bg-base-surface!", classNames),
+    attributionControl: false,
+    zoomControl: false,
+    scrollWheelZoom,
+    doubleClickZoom,
+    touchZoom,
+    center: center ?? defaults.center,
+    zoom: zoom ?? defaults.zoom,
+    whenReady: () => {
+    },
+    ref: mapRef
+  }, children);
+});
+MapContent.displayName = "Map.Content";
+var MAP_TILES_NAME = "Map.Tiles";
+var MapTiles = (_props) => {
+  const ref = useRef2(null);
+  const { onChange } = useMapContext(MAP_TILES_NAME);
+  useMapEvents({
+    zoomstart: (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom()
+      });
+    }
+  });
+  const { attention } = useMapContext(MAP_TILES_NAME);
+  useEffect5(() => {
+    if (ref.current) {
+      ref.current.getContainer().dataset.attention = attention ? "1" : "0";
+    }
+  }, [
+    attention
+  ]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.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
+  }));
 };
-var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const { ref, width, height } = useResizeDetector2({
-      refreshRate: 200
-    });
-    const map = useMap();
-    useImperativeHandle2(forwardedRef, () => ({
-      setCenter: (center2, zoom2) => {
-        map.setView(center2, zoom2);
+MapTiles.displayName = MAP_TILES_NAME;
+var MapMarkers = ({ selected, markers }) => {
+  const map = useMap();
+  useEffect5(() => {
+    if (markers.length > 0) {
+      const bounds = latLngBounds(markers.map((marker) => marker.location));
+      map.fitBounds(bounds);
+    } else {
+      map.setView(defaults.center, defaults.zoom);
+    }
+  }, [
+    markers
+  ]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React3.createElement(Marker, {
+      key: id,
+      position: {
+        lat,
+        lng
       },
-      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();
-  }
-});
+      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__ */ React3.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();
-  }
+  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__ */ React3.createElement(ThemeProvider, {
+        tx: defaultTx
+      }, /* @__PURE__ */ React3.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__ */ React3.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ZoomControls, {
+  onAction
+}));
+var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ActionControls, {
+  onAction
+}));
 var Map = {
   Root: MapRoot,
-  Canvas: MapCanvas,
-  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();
-    }
-  }
+  Content: MapContent,
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction
 };
 export {
   ActionControls,
   Globe,
-  GlobeContextProvider,
+  GlobeContext,
   Map,
   ZoomControls,
   closestPoint,
@@ -1152,6 +1103,8 @@ export {
   renderLayers,
   restrictAxis,
   timer,
+  translationKey,
+  translations,
   useDrag,
   useGlobeContext,
   useGlobeZoomHandler,