@dxos/react-ui-geo 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/dist/lib/browser/index.mjs

@@ -3,6 +3,7 @@ import {
 } from "./chunk-ENCWOTYX.mjs";
 
 // packages/ui/react-ui-geo/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 { useResizeDetector } from "react-resize-detector";
@@ -10,28 +11,34 @@ import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-geo/src/hooks/context.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 import { useControlledState } from "@dxos/react-ui";
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
 var GlobeContextProvider = ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation }) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [scale, setScale] = useControlledState(_scale);
-  const [translation, setTranslation] = useControlledState(_translation);
-  const [rotation, setRotation] = useControlledState(_rotation);
-  return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
-    value: {
-      size,
-      center,
-      scale,
-      translation,
-      rotation,
-      setCenter,
-      setScale,
-      setTranslation,
-      setRotation
-    }
-  }, children);
+  var _effect = _useSignals();
+  try {
+    const [center, setCenter] = useControlledState(_center);
+    const [scale, setScale] = useControlledState(_scale);
+    const [translation, setTranslation] = useControlledState(_translation);
+    const [rotation, setRotation] = useControlledState(_rotation);
+    return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
+      value: {
+        size,
+        center,
+        scale,
+        translation,
+        rotation,
+        setCenter,
+        setScale,
+        setTranslation,
+        setRotation
+      }
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
@@ -612,6 +619,7 @@ var useTour = (controller, points, options = {}) => {
 };
 
 // packages/ui/react-ui-geo/src/components/Toolbar/Controls.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2 from "react";
 import { IconButton, Toolbar } from "@dxos/react-ui";
 var controlPositions = {
@@ -621,52 +629,62 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      classNames
-    ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    //
-    icon: "ph--plus--regular",
-    label: "zoom in",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("zoom-in")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
-    //
-    icon: "ph--minus--regular",
-    label: "zoom out",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("zoom-out")
-  }));
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        classNames
+      ]
+    }, /* @__PURE__ */ React2.createElement(IconButton, {
+      //
+      icon: "ph--plus--regular",
+      label: "zoom in",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("zoom-in")
+    }), /* @__PURE__ */ React2.createElement(IconButton, {
+      //
+      icon: "ph--minus--regular",
+      label: "zoom out",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("zoom-out")
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 var ActionControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-    classNames: [
-      "gap-1",
-      classNames
-    ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
-    //
-    icon: "ph--play--regular",
-    label: "start",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("start")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
-    //
-    icon: "ph--globe-hemisphere-west--regular",
-    label: "toggle",
-    iconOnly: true,
-    size: 5,
-    classNames: "px-0 aspect-square",
-    onClick: () => onAction?.("toggle")
-  }));
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+      classNames: [
+        "gap-1",
+        classNames
+      ]
+    }, /* @__PURE__ */ React2.createElement(IconButton, {
+      //
+      icon: "ph--play--regular",
+      label: "start",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("start")
+    }), /* @__PURE__ */ React2.createElement(IconButton, {
+      //
+      icon: "ph--globe-hemisphere-west--regular",
+      label: "toggle",
+      iconOnly: true,
+      size: 5,
+      classNames: "px-0 aspect-square",
+      onClick: () => onAction?.("toggle")
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
@@ -725,154 +743,194 @@ var getProjection = (type = "orthographic") => {
   return type ?? geoOrthographic();
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
-  const { ref, width, height } = useResizeDetector();
-  return /* @__PURE__ */ React3.createElement("div", {
-    ref,
-    className: mx("relative flex grow overflow-hidden", classNames)
-  }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
-    size: {
-      width,
-      height
-    },
-    ...props
-  }, children));
+  var _effect = _useSignals3();
+  try {
+    const { ref, width, height } = useResizeDetector();
+    return /* @__PURE__ */ React3.createElement("div", {
+      ref,
+      className: mx("relative flex grow overflow-hidden", classNames)
+    }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
+      size: {
+        width,
+        height
+      },
+      ...props
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
-  const { themeMode } = useThemeContext();
-  const styles = 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 {
+  var _effect = _useSignals3();
+  try {
+    const { themeMode } = useThemeContext();
+    const styles = useMemo2(() => _styles ?? defaultStyles[themeMode], [
+      _styles,
+      themeMode
+    ]);
+    const [canvas, setCanvas] = useState3(null);
+    const canvasRef = (canvas2) => setCanvas(canvas2);
+    const projection = useMemo2(() => getProjection(_projection), [
+      _projection
+    ]);
+    const layers = useMemo2(() => {
+      return timer(() => createLayers(topology, features, styles));
+    }, [
+      topology,
+      features,
+      styles
+    ]);
+    const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
+    const scaleRef = useDynamicRef(scale);
+    useEffect4(() => {
+      if (center) {
+        setScale(1);
+        setRotation(positionToRotation(geoToPosition(center)));
+      }
+    }, [
+      center
+    ]);
+    const zooming = useRef(false);
+    useImperativeHandle(forwardRef3, () => {
+      return {
+        canvas,
+        projection,
+        center,
+        get scale() {
+          return scaleRef.current;
+        },
+        translation,
+        rotation,
+        setCenter,
+        setScale: (s) => {
+          if (typeof s === "function") {
+            const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
+            transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
+              zooming.current = false;
+            });
+          } else {
+            setScale(s);
+          }
+        },
+        setTranslation,
+        setRotation
+      };
+    }, [
+      canvas
+    ]);
+    const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
+      alpha: false
+    })), [
       canvas,
-      projection,
-      center,
-      get scale() {
-        return scaleRef.current;
-      },
+      projection
+    ]);
+    useEffect4(() => {
+      if (canvas && projection) {
+        timer(() => {
+          projection.scale(Math.min(size.width, size.height) / 2 * scale).translate([
+            size.width / 2 + (translation?.x ?? 0),
+            size.height / 2 + (translation?.y ?? 0)
+          ]).rotate(rotation ?? [
+            0,
+            0,
+            0
+          ]);
+          renderLayers(generator, layers, scale, styles);
+        });
+      }
+    }, [
+      generator,
+      size,
+      scale,
       translation,
       rotation,
-      setCenter,
-      setScale: (s) => {
-        if (typeof s === "function") {
-          const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
-          transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
-            zooming.current = false;
-          });
-        } else {
-          setScale(s);
-        }
-      },
-      setTranslation,
-      setRotation
-    };
-  }, [
-    canvas
-  ]);
-  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
-    alpha: false
-  })), [
-    canvas,
-    projection
-  ]);
-  useEffect4(() => {
-    if (canvas && projection) {
-      timer(() => {
-        projection.scale(Math.min(size.width, size.height) / 2 * scale).translate([
-          size.width / 2 + (translation?.x ?? 0),
-          size.height / 2 + (translation?.y ?? 0)
-        ]).rotate(rotation ?? [
-          0,
-          0,
-          0
-        ]);
-        renderLayers(generator, layers, scale, styles);
-      });
+      layers
+    ]);
+    if (!size.width || !size.height) {
+      return null;
     }
-  }, [
-    generator,
-    size,
-    scale,
-    translation,
-    rotation,
-    layers
-  ]);
-  if (!size.width || !size.height) {
-    return null;
+    return /* @__PURE__ */ React3.createElement("canvas", {
+      ref: canvasRef,
+      width: size.width,
+      height: size.height
+    });
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ React3.createElement("canvas", {
-    ref: canvasRef,
-    width: size.width,
-    height: size.height
-  });
 });
 var GlobeDebug = ({ position = "topleft" }) => {
-  const { size, scale, translation, rotation } = useGlobeContext();
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-  }, /* @__PURE__ */ React3.createElement("pre", {
-    className: "font-mono text-xs text-green-700"
-  }, JSON.stringify({
-    size,
-    scale,
-    translation,
-    rotation
-  }, null, 2)));
+  var _effect = _useSignals3();
+  try {
+    const { size, scale, translation, rotation } = useGlobeContext();
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
+    }, /* @__PURE__ */ React3.createElement("pre", {
+      className: "font-mono text-xs text-green-700"
+    }, JSON.stringify({
+      size,
+      scale,
+      translation,
+      rotation
+    }, null, 2)));
+  } finally {
+    _effect.f();
+  }
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
-  }, children);
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var CustomControl = ({ position, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute overflow-hidden", controlPositions[position])
-  }, children);
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: mx("z-10 absolute overflow-hidden", controlPositions[position])
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React3.createElement(ActionControls, {
-    onAction
-  })),
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = _useSignals3();
+    try {
+      return /* @__PURE__ */ React3.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React3.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = _useSignals3();
+    try {
+      return /* @__PURE__ */ React3.createElement(CustomControl, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React3.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
   Debug: GlobeDebug,
   Panel: GlobePanel
 };
 
 // packages/ui/react-ui-geo/src/components/Map/Map.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import "leaflet/dist/leaflet.css";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
 import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
@@ -891,159 +949,188 @@ var defaults = {
   zoom: 4
 };
 var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(MapContainer, {
-    className: mx2("relative flex w-full h-full grow bg-baseSurface", classNames),
-    attributionControl: false,
-    // TODO(burdon): Only if attention.
-    scrollWheelZoom: true,
-    zoomControl: false,
-    center,
-    zoom,
-    ...props
-  });
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement(MapContainer, {
+      className: mx2("relative flex w-full h-full grow bg-baseSurface", classNames),
+      attributionControl: false,
+      // TODO(burdon): Only if attention.
+      scrollWheelZoom: true,
+      zoomControl: false,
+      center,
+      zoom,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = useResizeDetector2({
-    refreshRate: 200
-  });
-  const map = useMap();
-  useImperativeHandle2(forwardedRef, () => ({
-    setCenter: (center2, zoom2) => {
-      map.setView(center2, zoom2);
-    },
-    setZoom: (cb) => {
-      map.setZoom(cb(map.getZoom()));
-    }
-  }), [
-    map
-  ]);
-  useEffect5(() => {
-    if (width && height) {
-      map.invalidateSize();
-    }
-  }, [
-    width,
-    height
-  ]);
-  useEffect5(() => {
-    if (center) {
-      map.setView(center, zoom);
-    } else if (zoom !== void 0) {
-      map.setZoom(zoom);
-    }
-  }, [
-    center,
-    zoom
-  ]);
-  useEffect5(() => {
-    const handler = debounce(() => {
-      onChange?.({
-        center: map.getCenter(),
-        zoom: map.getZoom()
-      });
-    }, 100);
-    map.on("move", handler);
-    map.on("zoom", handler);
-    return () => {
-      map.off("move", handler);
-      map.off("zoom", handler);
-    };
-  }, [
-    map,
-    onChange
-  ]);
-  useEffect5(() => {
-    if (markers.length > 0) {
-      const bounds = latLngBounds(markers.map((marker) => marker.location));
-      map.fitBounds(bounds);
-    } else {
-      map.setView(defaults.center, defaults.zoom);
-    }
-  }, [
-    markers
-  ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    className: "flex w-full h-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ React4.createElement(TileLayer, {
-    className: "dark:filter dark:grayscale dark:invert",
-    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-  }), markers?.map(({ id, title, location: { lat, lng } }) => {
-    return /* @__PURE__ */ React4.createElement(Marker, {
-      key: id,
-      position: {
-        lat,
-        lng
+  var _effect = _useSignals4();
+  try {
+    const { ref, width, height } = useResizeDetector2({
+      refreshRate: 200
+    });
+    const map = useMap();
+    useImperativeHandle2(forwardedRef, () => ({
+      setCenter: (center2, zoom2) => {
+        map.setView(center2, zoom2);
       },
-      icon: (
-        // TODO(burdon): Create custom icon from bundled assets.
-        new L.Icon({
-          iconUrl: "https://dxos.network/marker-icon.png",
-          iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
-          shadowUrl: "https://dxos.network/marker-shadow.png",
-          iconSize: [
-            25,
-            41
-          ],
-          iconAnchor: [
-            12,
-            41
-          ],
-          popupAnchor: [
-            1,
-            -34
-          ],
-          shadowSize: [
-            41,
-            41
-          ]
-        })
-      )
-    }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
-  }));
+      setZoom: (cb) => {
+        map.setZoom(cb(map.getZoom()));
+      }
+    }), [
+      map
+    ]);
+    useEffect5(() => {
+      if (width && height) {
+        map.invalidateSize();
+      }
+    }, [
+      width,
+      height
+    ]);
+    useEffect5(() => {
+      if (center) {
+        map.setView(center, zoom);
+      } else if (zoom !== void 0) {
+        map.setZoom(zoom);
+      }
+    }, [
+      center,
+      zoom
+    ]);
+    useEffect5(() => {
+      const handler = debounce(() => {
+        onChange?.({
+          center: map.getCenter(),
+          zoom: map.getZoom()
+        });
+      }, 100);
+      map.on("move", handler);
+      map.on("zoom", handler);
+      return () => {
+        map.off("move", handler);
+        map.off("zoom", handler);
+      };
+    }, [
+      map,
+      onChange
+    ]);
+    useEffect5(() => {
+      if (markers.length > 0) {
+        const bounds = latLngBounds(markers.map((marker) => marker.location));
+        map.fitBounds(bounds);
+      } else {
+        map.setView(defaults.center, defaults.zoom);
+      }
+    }, [
+      markers
+    ]);
+    return /* @__PURE__ */ React4.createElement("div", {
+      ref,
+      className: "flex w-full h-full overflow-hidden bg-baseSurface"
+    }, /* @__PURE__ */ React4.createElement(TileLayer, {
+      className: "dark:filter dark:grayscale dark:invert",
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    }), markers?.map(({ id, title, location: { lat, lng } }) => {
+      return /* @__PURE__ */ React4.createElement(Marker, {
+        key: id,
+        position: {
+          lat,
+          lng
+        },
+        icon: (
+          // TODO(burdon): Create custom icon from bundled assets.
+          new L.Icon({
+            iconUrl: "https://dxos.network/marker-icon.png",
+            iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
+            shadowUrl: "https://dxos.network/marker-shadow.png",
+            iconSize: [
+              25,
+              41
+            ],
+            iconAnchor: [
+              12,
+              41
+            ],
+            popupAnchor: [
+              1,
+              -34
+            ],
+            shadowSize: [
+              41,
+              41
+            ]
+          })
+        )
+      }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
+    }));
+  } finally {
+    _effect.f();
+  }
 });
 var CustomControl2 = ({ position, children }) => {
-  const map = useMap();
-  useEffect5(() => {
-    const control = new Control({
-      position
-    });
-    control.onAdd = () => {
-      const container = DomUtil.create("div", mx2("!m-0", controlPositions[position]));
-      DomEvent.disableClickPropagation(container);
-      DomEvent.disableScrollPropagation(container);
-      const root = createRoot(container);
-      root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
-        tx: defaultTx
-      }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
-      return container;
-    };
-    control.addTo(map);
-    return () => {
-      control.remove();
-    };
-  }, [
-    map,
-    position,
-    children
-  ]);
-  return null;
+  var _effect = _useSignals4();
+  try {
+    const map = useMap();
+    useEffect5(() => {
+      const control = new Control({
+        position
+      });
+      control.onAdd = () => {
+        const container = DomUtil.create("div", mx2("!m-0", controlPositions[position]));
+        DomEvent.disableClickPropagation(container);
+        DomEvent.disableScrollPropagation(container);
+        const root = createRoot(container);
+        root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
+          tx: defaultTx
+        }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
+        return container;
+      };
+      control.addTo(map);
+      return () => {
+        control.remove();
+      };
+    }, [
+      map,
+      position,
+      children
+    ]);
+    return null;
+  } finally {
+    _effect.f();
+  }
 };
 var Map = {
   Root: MapRoot,
   Canvas: MapCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React4.createElement(ZoomControls, {
-    onAction
-  })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
-    position,
-    ...props
-  }, /* @__PURE__ */ React4.createElement(ActionControls, {
-    onAction
-  }))
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
+    var _effect = _useSignals4();
+    try {
+      return /* @__PURE__ */ React4.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React4.createElement(ZoomControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  },
+  Action: ({ onAction, position = "bottomright", ...props }) => {
+    var _effect = _useSignals4();
+    try {
+      return /* @__PURE__ */ React4.createElement(CustomControl2, {
+        position,
+        ...props
+      }, /* @__PURE__ */ React4.createElement(ActionControls, {
+        onAction
+      }));
+    } finally {
+      _effect.f();
+    }
+  }
 };
 export {
   ActionControls,