@elabs-ai/components-maps 4.0.0

package/dist/index.js

@@ -0,0 +1,1475 @@
+"use client";
+import "./index.css";
+
+// src/map-canvas/map-canvas.tsx
+import MapLibreGL from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+import { Spinner, StatePanel } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+// src/map-canvas/map-context.ts
+import { createContext, use } from "react";
+var MapContext = createContext(null);
+function useMap() {
+  const context = use(MapContext);
+  if (!context) {
+    throw new Error("useMap must be used within a <MapCanvas>");
+  }
+  return context;
+}
+
+// src/map-canvas/use-resolved-basemap-theme.ts
+import { resolveThemeIsDark } from "@elabs-ai/components-tokens";
+import { useEffect, useState } from "react";
+function getBrandTheme() {
+  if (typeof document === "undefined") return null;
+  const root = document.documentElement;
+  if (root.getAttribute("data-theme")) return resolveThemeIsDark(root) ? "dark" : "light";
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+  return null;
+}
+function getSystemTheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getThemeAttribute() {
+  if (typeof document === "undefined") return "";
+  return document.documentElement.getAttribute("data-theme") ?? "";
+}
+function useResolvedBasemapTheme(themeProp) {
+  const [detected, setDetected] = useState(() => getBrandTheme() ?? getSystemTheme());
+  const [themeAttr, setThemeAttr] = useState(getThemeAttribute);
+  useEffect(() => {
+    const update = () => {
+      setThemeAttr(getThemeAttribute());
+      const brand = getBrandTheme();
+      if (brand) setDetected(brand);
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    const mediaQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    const handleSystemChange = (e) => {
+      if (!getBrandTheme()) setDetected(e.matches ? "dark" : "light");
+    };
+    mediaQuery?.addEventListener("change", handleSystemChange);
+    return () => {
+      observer.disconnect();
+      mediaQuery?.removeEventListener("change", handleSystemChange);
+    };
+  }, []);
+  const resolvedTheme = themeProp ?? detected;
+  return { resolvedTheme, themeKey: `${themeAttr}:${resolvedTheme}` };
+}
+
+// src/map-canvas/map-canvas.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultStyles = {
+  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+  light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+};
+var blankMapStyle = {
+  version: 8,
+  sources: {},
+  layers: [
+    {
+      id: "background",
+      type: "background",
+      paint: { "background-color": "transparent" }
+    }
+  ]
+};
+function MapLoadingOverlay() {
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-xs", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading map", className: "size-5" }) });
+}
+function getViewport(map) {
+  const center = map.getCenter();
+  return {
+    center: [center.lng, center.lat],
+    zoom: map.getZoom(),
+    bearing: map.getBearing(),
+    pitch: map.getPitch()
+  };
+}
+var MapCanvas = forwardRef(function MapCanvas2({
+  children,
+  className,
+  theme: themeProp,
+  styles,
+  blank = false,
+  projection,
+  viewport,
+  onViewportChange,
+  loading = false,
+  ...props
+}, ref) {
+  const containerRef = useRef(null);
+  const [mapInstance, setMapInstance] = useState2(null);
+  const [initFailed, setInitFailed] = useState2(false);
+  const [isLoaded, setIsLoaded] = useState2(false);
+  const [isStyleLoaded, setIsStyleLoaded] = useState2(false);
+  const currentStyleRef = useRef(null);
+  const styleTimeoutRef = useRef(null);
+  const internalUpdateRef = useRef(false);
+  const { resolvedTheme, themeKey } = useResolvedBasemapTheme(themeProp);
+  const isControlled = viewport !== void 0 && onViewportChange !== void 0;
+  const onViewportChangeRef = useRef(onViewportChange);
+  onViewportChangeRef.current = onViewportChange;
+  const mapStyles = useMemo(() => {
+    if (styles) {
+      return {
+        dark: styles.dark ?? defaultStyles.dark,
+        light: styles.light ?? defaultStyles.light
+      };
+    }
+    if (blank) {
+      return { dark: blankMapStyle, light: blankMapStyle };
+    }
+    return defaultStyles;
+  }, [styles, blank]);
+  useImperativeHandle(ref, () => mapInstance, [mapInstance]);
+  const clearStyleTimeout = useCallback(() => {
+    if (styleTimeoutRef.current) {
+      clearTimeout(styleTimeoutRef.current);
+      styleTimeoutRef.current = null;
+    }
+  }, []);
+  useEffect2(() => {
+    if (!containerRef.current) return;
+    const initialStyle = resolvedTheme === "dark" ? mapStyles.dark : mapStyles.light;
+    currentStyleRef.current = initialStyle;
+    let map;
+    try {
+      map = new MapLibreGL.Map({
+        container: containerRef.current,
+        style: initialStyle,
+        renderWorldCopies: false,
+        // Attribution control OFF by default — a maintainer decision for internal
+        // use, taken deliberately and recorded in CHANGELOG.md + the map-components
+        // rule. NOTE THE CONSTRAINT: the default Carto basemap serves OpenStreetMap
+        // data, which is ODbL-licensed and requires the credit, and Carto's terms
+        // require it too — so a surface that ships PUBLICLY on these tiles must turn
+        // it back on with `attributionControl={{ compact: true }}` (it wins through
+        // `...props` below), or move to tiles licensed without the requirement via
+        // `styles` / `blank`.
+        attributionControl: false,
+        ...props,
+        ...viewport
+      });
+    } catch {
+      setInitFailed(true);
+      return;
+    }
+    const styleDataHandler = () => {
+      clearStyleTimeout();
+      styleTimeoutRef.current = setTimeout(() => {
+        setIsStyleLoaded(true);
+        if (projection) {
+          map.setProjection(projection);
+        }
+      }, 100);
+    };
+    const loadHandler = () => {
+      setIsLoaded(true);
+      map.getContainer().querySelectorAll("details.maplibregl-ctrl-attrib[open]").forEach((el) => {
+        el.open = false;
+      });
+    };
+    const handleMove = () => {
+      if (internalUpdateRef.current) return;
+      onViewportChangeRef.current?.(getViewport(map));
+    };
+    map.on("load", loadHandler);
+    map.on("styledata", styleDataHandler);
+    map.on("move", handleMove);
+    setMapInstance(map);
+    return () => {
+      clearStyleTimeout();
+      map.off("load", loadHandler);
+      map.off("styledata", styleDataHandler);
+      map.off("move", handleMove);
+      map.remove();
+      setIsLoaded(false);
+      setIsStyleLoaded(false);
+      setMapInstance(null);
+    };
+  }, []);
+  useEffect2(() => {
+    if (!mapInstance || !isControlled || !viewport) return;
+    if (mapInstance.isMoving()) return;
+    const current = getViewport(mapInstance);
+    const next = {
+      center: viewport.center ?? current.center,
+      zoom: viewport.zoom ?? current.zoom,
+      bearing: viewport.bearing ?? current.bearing,
+      pitch: viewport.pitch ?? current.pitch
+    };
+    if (next.center[0] === current.center[0] && next.center[1] === current.center[1] && next.zoom === current.zoom && next.bearing === current.bearing && next.pitch === current.pitch) {
+      return;
+    }
+    internalUpdateRef.current = true;
+    mapInstance.jumpTo(next);
+    internalUpdateRef.current = false;
+  }, [mapInstance, isControlled, viewport]);
+  useEffect2(() => {
+    if (!mapInstance || !resolvedTheme) return;
+    const newStyle = resolvedTheme === "dark" ? mapStyles.dark : mapStyles.light;
+    if (currentStyleRef.current === newStyle) return;
+    clearStyleTimeout();
+    currentStyleRef.current = newStyle;
+    setIsStyleLoaded(false);
+    mapInstance.setStyle(newStyle, { diff: true });
+  }, [mapInstance, resolvedTheme, mapStyles, clearStyleTimeout]);
+  useEffect2(() => {
+    if (!mapInstance || !isStyleLoaded || !projection) return;
+    mapInstance.setProjection(projection);
+  }, [mapInstance, isStyleLoaded, projection]);
+  const contextValue = useMemo(
+    () => ({
+      map: mapInstance,
+      isLoaded: isLoaded && isStyleLoaded,
+      resolvedTheme,
+      themeKey
+    }),
+    [mapInstance, isLoaded, isStyleLoaded, resolvedTheme, themeKey]
+  );
+  if (initFailed) {
+    return /* @__PURE__ */ jsx("div", { className: cn("relative h-full w-full", className), children: /* @__PURE__ */ jsx(
+      StatePanel,
+      {
+        kind: "error",
+        title: "Map unavailable",
+        description: "This browser can\u2019t render WebGL maps.",
+        className: "h-full"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative h-full w-full", className), children: [
+    (!isLoaded || loading) && /* @__PURE__ */ jsx(MapLoadingOverlay, {}),
+    mapInstance && children
+  ] }) });
+});
+
+// src/map-marker/map-marker.tsx
+import MapLibreGL2 from "maplibre-gl";
+import { createContext as createContext2, use as use2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MarkerContext = createContext2(null);
+function useMarkerContext() {
+  const context = use2(MarkerContext);
+  if (!context) {
+    throw new Error("MapMarker sub-components must be used within <MapMarker>");
+  }
+  return context;
+}
+function MapMarker({
+  longitude,
+  latitude,
+  children,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  draggable = false,
+  ...markerOptions
+}) {
+  const { map } = useMap();
+  const callbacksRef = useRef2({
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onDragStart,
+    onDrag,
+    onDragEnd
+  });
+  callbacksRef.current = {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onDragStart,
+    onDrag,
+    onDragEnd
+  };
+  const marker = useMemo2(() => {
+    const markerInstance = new MapLibreGL2.Marker({
+      ...markerOptions,
+      element: document.createElement("div"),
+      draggable
+    }).setLngLat([longitude, latitude]);
+    const handleClick = (e) => callbacksRef.current.onClick?.(e);
+    const handleMouseEnter = (e) => callbacksRef.current.onMouseEnter?.(e);
+    const handleMouseLeave = (e) => callbacksRef.current.onMouseLeave?.(e);
+    markerInstance.getElement()?.addEventListener("click", handleClick);
+    markerInstance.getElement()?.addEventListener("mouseenter", handleMouseEnter);
+    markerInstance.getElement()?.addEventListener("mouseleave", handleMouseLeave);
+    const handleDragStart = () => {
+      const lngLat = markerInstance.getLngLat();
+      callbacksRef.current.onDragStart?.({ lng: lngLat.lng, lat: lngLat.lat });
+    };
+    const handleDrag = () => {
+      const lngLat = markerInstance.getLngLat();
+      callbacksRef.current.onDrag?.({ lng: lngLat.lng, lat: lngLat.lat });
+    };
+    const handleDragEnd = () => {
+      const lngLat = markerInstance.getLngLat();
+      callbacksRef.current.onDragEnd?.({ lng: lngLat.lng, lat: lngLat.lat });
+    };
+    markerInstance.on("dragstart", handleDragStart);
+    markerInstance.on("drag", handleDrag);
+    markerInstance.on("dragend", handleDragEnd);
+    return markerInstance;
+  }, []);
+  useEffect3(() => {
+    if (!map) return;
+    marker.addTo(map);
+    return () => {
+      marker.remove();
+    };
+  }, [map]);
+  const { offset, rotation, rotationAlignment, pitchAlignment } = markerOptions;
+  useEffect3(() => {
+    const current = marker.getLngLat();
+    if (current.lng !== longitude || current.lat !== latitude) {
+      marker.setLngLat([longitude, latitude]);
+    }
+    if (marker.isDraggable() !== draggable) {
+      marker.setDraggable(draggable);
+    }
+    const currentOffset = marker.getOffset();
+    const newOffset = offset ?? [0, 0];
+    const [newOffsetX, newOffsetY] = Array.isArray(newOffset) ? newOffset : [newOffset.x, newOffset.y];
+    if (currentOffset.x !== newOffsetX || currentOffset.y !== newOffsetY) {
+      marker.setOffset(newOffset);
+    }
+    if (marker.getRotation() !== (rotation ?? 0)) {
+      marker.setRotation(rotation ?? 0);
+    }
+    if (marker.getRotationAlignment() !== (rotationAlignment ?? "auto")) {
+      marker.setRotationAlignment(rotationAlignment ?? "auto");
+    }
+    if (marker.getPitchAlignment() !== (pitchAlignment ?? "auto")) {
+      marker.setPitchAlignment(pitchAlignment ?? "auto");
+    }
+  }, [marker, longitude, latitude, draggable, offset, rotation, rotationAlignment, pitchAlignment]);
+  return /* @__PURE__ */ jsx2(MarkerContext.Provider, { value: { marker, map }, children });
+}
+function MapMarkerContent({ children, className }) {
+  const { marker } = useMarkerContext();
+  return createPortal(
+    /* @__PURE__ */ jsx2("div", { className: cn2("relative cursor-pointer", className), children: children || /* @__PURE__ */ jsx2(DefaultMarkerIcon, {}) }),
+    marker.getElement()
+  );
+}
+function DefaultMarkerIcon() {
+  return /* @__PURE__ */ jsx2("div", { className: "relative size-4 rounded-full border-2 border-background bg-primary shadow-sm" });
+}
+function PopupCloseButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Close popup",
+      className: "absolute top-1 right-1 z-10 inline-flex size-5 items-center justify-center rounded-sm text-foreground transition-colors duration-fast hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+      children: /* @__PURE__ */ jsx2(X, { className: "size-3.5", "aria-hidden": "true" })
+    }
+  );
+}
+function MapMarkerPopup({
+  children,
+  className,
+  closeButton = false,
+  ...popupOptions
+}) {
+  const { marker, map } = useMarkerContext();
+  const container = useMemo2(() => document.createElement("div"), []);
+  const { offset, maxWidth } = popupOptions;
+  const popup = useMemo2(() => {
+    return new MapLibreGL2.Popup({
+      offset: 16,
+      ...popupOptions,
+      closeButton: false
+    }).setMaxWidth("none").setDOMContent(container);
+  }, []);
+  useEffect3(() => {
+    if (!map) return;
+    popup.setDOMContent(container);
+    marker.setPopup(popup);
+    return () => {
+      marker.setPopup(null);
+    };
+  }, [map]);
+  useEffect3(() => {
+    popup.setOffset(offset ?? 16);
+    if (maxWidth) {
+      popup.setMaxWidth(maxWidth);
+    }
+  }, [popup, offset, maxWidth]);
+  const handleClose = () => popup.remove();
+  return createPortal(
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn2(
+          "relative max-w-62 rounded-md bg-popover p-3 text-popover-foreground shadow-ring-md",
+          "animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          className
+        ),
+        children: [
+          closeButton && /* @__PURE__ */ jsx2(PopupCloseButton, { onClick: handleClose }),
+          children
+        ]
+      }
+    ),
+    container
+  );
+}
+function MapMarkerTooltip({ children, className, ...popupOptions }) {
+  const { marker, map } = useMarkerContext();
+  const container = useMemo2(() => document.createElement("div"), []);
+  const { offset, maxWidth } = popupOptions;
+  const tooltip = useMemo2(() => {
+    return new MapLibreGL2.Popup({
+      offset: 16,
+      ...popupOptions,
+      closeOnClick: true,
+      closeButton: false
+    }).setMaxWidth("none");
+  }, []);
+  useEffect3(() => {
+    if (!map) return;
+    tooltip.setDOMContent(container);
+    const handleMouseEnter = () => {
+      tooltip.setLngLat(marker.getLngLat()).addTo(map);
+    };
+    const handleMouseLeave = () => tooltip.remove();
+    marker.getElement()?.addEventListener("mouseenter", handleMouseEnter);
+    marker.getElement()?.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      marker.getElement()?.removeEventListener("mouseenter", handleMouseEnter);
+      marker.getElement()?.removeEventListener("mouseleave", handleMouseLeave);
+      tooltip.remove();
+    };
+  }, [map]);
+  useEffect3(() => {
+    tooltip.setOffset(offset ?? 16);
+    if (maxWidth) {
+      tooltip.setMaxWidth(maxWidth);
+    }
+  }, [tooltip, offset, maxWidth]);
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn2(
+          "pointer-events-none rounded-md bg-foreground px-2 py-1 text-meta text-balance text-background shadow-md",
+          "animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          className
+        ),
+        children
+      }
+    ),
+    container
+  );
+}
+function MapMarkerLabel({ children, className, position = "top" }) {
+  const { marker } = useMarkerContext();
+  const positionClasses2 = {
+    top: "bottom-full mb-1",
+    bottom: "top-full mt-1"
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn2(
+          "absolute left-1/2 -translate-x-1/2 whitespace-nowrap",
+          "text-meta font-medium text-foreground",
+          positionClasses2[position],
+          className
+        ),
+        children
+      }
+    ),
+    marker.getElement()
+  );
+}
+
+// src/map-popup/map-popup.tsx
+import MapLibreGL3 from "maplibre-gl";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { X as X2 } from "lucide-react";
+import { cn as cn3 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MapPopup({
+  longitude,
+  latitude,
+  onClose,
+  children,
+  className,
+  closeButton = false,
+  ...popupOptions
+}) {
+  const { map } = useMap();
+  const onCloseRef = useRef3(onClose);
+  onCloseRef.current = onClose;
+  const container = useMemo3(() => document.createElement("div"), []);
+  const { offset, maxWidth } = popupOptions;
+  const popup = useMemo3(() => {
+    return new MapLibreGL3.Popup({
+      offset: 16,
+      ...popupOptions,
+      closeButton: false
+    }).setMaxWidth("none").setLngLat([longitude, latitude]);
+  }, []);
+  useEffect4(() => {
+    if (!map) return;
+    const onCloseProp = () => onCloseRef.current?.();
+    popup.on("close", onCloseProp);
+    popup.setDOMContent(container);
+    popup.addTo(map);
+    return () => {
+      popup.off("close", onCloseProp);
+      if (popup.isOpen()) {
+        popup.remove();
+      }
+    };
+  }, [map]);
+  useEffect4(() => {
+    const current = popup.getLngLat();
+    if (!current || current.lng !== longitude || current.lat !== latitude) {
+      popup.setLngLat([longitude, latitude]);
+    }
+    popup.setOffset(offset ?? 16);
+    if (maxWidth) {
+      popup.setMaxWidth(maxWidth);
+    }
+  }, [popup, longitude, latitude, offset, maxWidth]);
+  const handleClose = () => {
+    popup.remove();
+  };
+  return createPortal2(
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn3(
+          "relative max-w-62 rounded-md bg-popover p-3 text-popover-foreground shadow-ring-md",
+          "animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          className
+        ),
+        children: [
+          closeButton && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              "aria-label": "Close popup",
+              className: "absolute top-1 right-1 z-10 inline-flex size-5 items-center justify-center rounded-sm text-foreground transition-colors duration-fast hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx3(X2, { className: "size-3.5", "aria-hidden": "true" })
+            }
+          ),
+          children
+        ]
+      }
+    ),
+    container
+  );
+}
+
+// src/map-controls/map-controls.tsx
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4, useState as useState3 } from "react";
+import { Locate, Maximize, Minus, Plus } from "lucide-react";
+import { Spinner as Spinner2 } from "@elabs-ai/components-ui";
+import { cn as cn4 } from "@elabs-ai/components-ui/lib/cn";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var positionClasses = {
+  "top-left": "top-2 left-2",
+  "top-right": "top-2 right-2",
+  "bottom-left": "bottom-2 left-2",
+  "bottom-right": "bottom-10 right-2"
+};
+function ControlGroup({ children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col divide-y overflow-hidden rounded-md bg-surface-elevated shadow-ring-sm", children });
+}
+function ControlButton({
+  onClick,
+  label,
+  children,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick,
+      "aria-label": label,
+      type: "button",
+      className: cn4(
+        "flex size-8 items-center justify-center text-foreground transition-colors duration-fast",
+        "hover:bg-surface-muted",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50"
+      ),
+      disabled,
+      children
+    }
+  );
+}
+function MapControls({
+  position = "bottom-right",
+  showZoom = true,
+  showCompass = false,
+  showLocate = false,
+  showFullscreen = false,
+  className,
+  onLocate,
+  onLocateError
+}) {
+  const { map } = useMap();
+  const [waitingForLocation, setWaitingForLocation] = useState3(false);
+  const handleZoomIn = useCallback2(() => {
+    map?.zoomTo(map.getZoom() + 1, { duration: 300 });
+  }, [map]);
+  const handleZoomOut = useCallback2(() => {
+    map?.zoomTo(map.getZoom() - 1, { duration: 300 });
+  }, [map]);
+  const handleResetBearing = useCallback2(() => {
+    map?.resetNorthPitch({ duration: 300 });
+  }, [map]);
+  const handleLocate = useCallback2(() => {
+    if (!("geolocation" in navigator)) return;
+    setWaitingForLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const coords = {
+          longitude: pos.coords.longitude,
+          latitude: pos.coords.latitude
+        };
+        map?.flyTo({
+          center: [coords.longitude, coords.latitude],
+          zoom: 14,
+          duration: 1500
+        });
+        onLocate?.(coords);
+        setWaitingForLocation(false);
+      },
+      (error) => {
+        onLocateError?.(error);
+        setWaitingForLocation(false);
+      }
+    );
+  }, [map, onLocate, onLocateError]);
+  const handleFullscreen = useCallback2(() => {
+    const container = map?.getContainer();
+    if (!container) return;
+    if (document.fullscreenElement) {
+      void document.exitFullscreen();
+    } else {
+      void container.requestFullscreen();
+    }
+  }, [map]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn4("absolute z-10 flex flex-col gap-1.5", positionClasses[position], className),
+      children: [
+        showZoom && /* @__PURE__ */ jsxs4(ControlGroup, { children: [
+          /* @__PURE__ */ jsx4(ControlButton, { onClick: handleZoomIn, label: "Zoom in", children: /* @__PURE__ */ jsx4(Plus, { className: "size-4", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx4(ControlButton, { onClick: handleZoomOut, label: "Zoom out", children: /* @__PURE__ */ jsx4(Minus, { className: "size-4", "aria-hidden": "true" }) })
+        ] }),
+        showCompass && /* @__PURE__ */ jsx4(ControlGroup, { children: /* @__PURE__ */ jsx4(CompassButton, { onClick: handleResetBearing }) }),
+        showLocate && /* @__PURE__ */ jsx4(ControlGroup, { children: /* @__PURE__ */ jsx4(
+          ControlButton,
+          {
+            onClick: handleLocate,
+            label: "Find my location",
+            disabled: waitingForLocation,
+            children: waitingForLocation ? /* @__PURE__ */ jsx4(Spinner2, { label: "Locating", className: "size-4 text-foreground" }) : /* @__PURE__ */ jsx4(Locate, { className: "size-4", "aria-hidden": "true" })
+          }
+        ) }),
+        showFullscreen && /* @__PURE__ */ jsx4(ControlGroup, { children: /* @__PURE__ */ jsx4(ControlButton, { onClick: handleFullscreen, label: "Toggle fullscreen", children: /* @__PURE__ */ jsx4(Maximize, { className: "size-4", "aria-hidden": "true" }) }) })
+      ]
+    }
+  );
+}
+function CompassButton({ onClick }) {
+  const { map } = useMap();
+  const compassRef = useRef4(null);
+  useEffect5(() => {
+    if (!map || !compassRef.current) return;
+    const compass = compassRef.current;
+    const updateRotation = () => {
+      const bearing = map.getBearing();
+      const pitch = map.getPitch();
+      compass.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`;
+    };
+    map.on("rotate", updateRotation);
+    map.on("pitch", updateRotation);
+    updateRotation();
+    return () => {
+      map.off("rotate", updateRotation);
+      map.off("pitch", updateRotation);
+    };
+  }, [map]);
+  return /* @__PURE__ */ jsx4(ControlButton, { onClick, label: "Reset bearing to north", children: /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      ref: compassRef,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      className: "size-5 transition-transform duration-fast",
+      style: { transformStyle: "preserve-3d" },
+      children: [
+        /* @__PURE__ */ jsx4("path", { d: "M12 2L16 12H12V2Z", className: "fill-destructive" }),
+        /* @__PURE__ */ jsx4("path", { d: "M12 2L8 12H12V2Z", className: "fill-destructive/50" }),
+        /* @__PURE__ */ jsx4("path", { d: "M12 22L16 12H12V22Z", className: "fill-muted-foreground/60" }),
+        /* @__PURE__ */ jsx4("path", { d: "M12 22L8 12H12V22Z", className: "fill-muted-foreground/30" })
+      ]
+    }
+  ) });
+}
+
+// src/map-route/map-route.tsx
+import { useEffect as useEffect6, useId } from "react";
+
+// src/lib/use-token-color.ts
+import { resolveTokenColor } from "@elabs-ai/components-tokens";
+import { useLayoutEffect, useState as useState4 } from "react";
+function useTokenColor(name, fallback = "#000000") {
+  const { map, themeKey } = useMap();
+  const [color, setColor] = useState4(fallback);
+  useLayoutEffect(() => {
+    setColor(resolveTokenColor(name, { el: map?.getContainer(), fallback }));
+  }, [name, fallback, map, themeKey]);
+  return color;
+}
+
+// src/map-route/map-route.tsx
+function MapRoute({
+  id: propId,
+  coordinates,
+  color,
+  width = 3,
+  opacity = 0.8,
+  dashArray,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  interactive = true
+}) {
+  const { map, isLoaded } = useMap();
+  const autoId = useId();
+  const id = propId ?? autoId;
+  const sourceId = `route-source-${id}`;
+  const layerId = `route-layer-${id}`;
+  const primary = useTokenColor("--primary");
+  const lineColor = color ?? primary;
+  useEffect6(() => {
+    if (!isLoaded || !map) return;
+    map.addSource(sourceId, {
+      type: "geojson",
+      data: {
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: [] }
+      }
+    });
+    map.addLayer({
+      id: layerId,
+      type: "line",
+      source: sourceId,
+      layout: { "line-join": "round", "line-cap": "round" },
+      paint: {
+        "line-color": lineColor,
+        "line-width": width,
+        "line-opacity": opacity,
+        ...dashArray && { "line-dasharray": dashArray }
+      }
+    });
+    return () => {
+      try {
+        if (map.getLayer(layerId)) map.removeLayer(layerId);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+      }
+    };
+  }, [isLoaded, map]);
+  useEffect6(() => {
+    if (!isLoaded || !map || coordinates.length < 2) return;
+    const source = map.getSource(sourceId);
+    if (source) {
+      source.setData({
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates }
+      });
+    }
+  }, [isLoaded, map, coordinates, sourceId]);
+  useEffect6(() => {
+    if (!isLoaded || !map || !map.getLayer(layerId)) return;
+    map.setPaintProperty(layerId, "line-color", lineColor);
+    map.setPaintProperty(layerId, "line-width", width);
+    map.setPaintProperty(layerId, "line-opacity", opacity);
+    map.setPaintProperty(layerId, "line-dasharray", dashArray);
+  }, [isLoaded, map, layerId, lineColor, width, opacity, dashArray]);
+  useEffect6(() => {
+    if (!isLoaded || !map || !interactive) return;
+    const handleClick = () => {
+      onClick?.();
+    };
+    const handleMouseEnter = () => {
+      map.getCanvas().style.cursor = "pointer";
+      onMouseEnter?.();
+    };
+    const handleMouseLeave = () => {
+      map.getCanvas().style.cursor = "";
+      onMouseLeave?.();
+    };
+    map.on("click", layerId, handleClick);
+    map.on("mouseenter", layerId, handleMouseEnter);
+    map.on("mouseleave", layerId, handleMouseLeave);
+    return () => {
+      map.off("click", layerId, handleClick);
+      map.off("mouseenter", layerId, handleMouseEnter);
+      map.off("mouseleave", layerId, handleMouseLeave);
+    };
+  }, [isLoaded, map, layerId, onClick, onMouseEnter, onMouseLeave, interactive]);
+  return null;
+}
+
+// src/map-arc/map-arc.tsx
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo4, useRef as useRef5 } from "react";
+
+// src/lib/arc-math.ts
+function buildArcCoordinates(from, to, curvature, samples) {
+  const [x0, y0] = from;
+  const [xTo, y2] = to;
+  const rawDx = xTo - x0;
+  const x2 = rawDx > 180 ? xTo - 360 : rawDx < -180 ? xTo + 360 : xTo;
+  const dx = x2 - x0;
+  const dy = y2 - y0;
+  const distance = Math.hypot(dx, dy);
+  if (distance === 0 || curvature === 0) return [from, [x2, y2]];
+  const mx = (x0 + x2) / 2;
+  const my = (y0 + y2) / 2;
+  const nx = -dy / distance;
+  const ny = dx / distance;
+  const offset = distance * curvature;
+  const cx = mx + nx * offset;
+  const cy = my + ny * offset;
+  const points = [];
+  const segments = Math.max(2, Math.floor(samples));
+  for (let i = 0; i <= segments; i += 1) {
+    const t = i / segments;
+    const inv = 1 - t;
+    const x = inv * inv * x0 + 2 * inv * t * cx + t * t * x2;
+    const y = inv * inv * y0 + 2 * inv * t * cy + t * t * y2;
+    points.push([x, y]);
+  }
+  return points;
+}
+
+// src/lib/merge-hover-paint.ts
+function mergeHoverPaint(paint, hoverPaint) {
+  if (!hoverPaint) return paint;
+  const merged = { ...paint };
+  for (const [key, hoverValue] of Object.entries(hoverPaint)) {
+    if (hoverValue === void 0) continue;
+    const baseValue = merged[key];
+    merged[key] = baseValue === void 0 ? hoverValue : ["case", ["boolean", ["feature-state", "hover"], false], hoverValue, baseValue];
+  }
+  return merged;
+}
+
+// src/map-arc/map-arc.tsx
+var DEFAULT_ARC_CURVATURE = 0.2;
+var DEFAULT_ARC_SAMPLES = 64;
+var ARC_HIT_MIN_WIDTH = 12;
+var ARC_HIT_PADDING = 6;
+var DEFAULT_ARC_LAYOUT = {
+  "line-join": "round",
+  "line-cap": "round"
+};
+function MapArc({
+  data,
+  id: propId,
+  curvature = DEFAULT_ARC_CURVATURE,
+  samples = DEFAULT_ARC_SAMPLES,
+  paint,
+  layout,
+  hoverPaint,
+  onClick,
+  onHover,
+  interactive = true,
+  beforeId
+}) {
+  const { map, isLoaded } = useMap();
+  const autoId = useId2();
+  const id = propId ?? autoId;
+  const sourceId = `arc-source-${id}`;
+  const layerId = `arc-layer-${id}`;
+  const hitLayerId = `arc-hit-layer-${id}`;
+  const primary = useTokenColor("--primary");
+  const mergedPaint = useMemo4(
+    () => mergeHoverPaint(
+      { "line-color": primary, "line-width": 2, "line-opacity": 0.85, ...paint },
+      hoverPaint
+    ),
+    [primary, paint, hoverPaint]
+  );
+  const mergedLayout = useMemo4(() => ({ ...DEFAULT_ARC_LAYOUT, ...layout }), [layout]);
+  const hitWidth = useMemo4(() => {
+    const w = paint?.["line-width"] ?? 2;
+    const base = typeof w === "number" ? w : ARC_HIT_MIN_WIDTH;
+    return Math.max(base + ARC_HIT_PADDING, ARC_HIT_MIN_WIDTH);
+  }, [paint]);
+  const geoJSON = useMemo4(
+    () => ({
+      type: "FeatureCollection",
+      features: data.map((arc) => {
+        const { from, to, ...properties } = arc;
+        return {
+          type: "Feature",
+          properties,
+          geometry: {
+            type: "LineString",
+            coordinates: buildArcCoordinates(from, to, curvature, samples)
+          }
+        };
+      })
+    }),
+    [data, curvature, samples]
+  );
+  const latestRef = useRef5({ data, onClick, onHover });
+  latestRef.current = { data, onClick, onHover };
+  useEffect7(() => {
+    if (!isLoaded || !map) return;
+    map.addSource(sourceId, {
+      type: "geojson",
+      data: geoJSON,
+      promoteId: "id"
+    });
+    map.addLayer(
+      {
+        id: hitLayerId,
+        type: "line",
+        source: sourceId,
+        layout: DEFAULT_ARC_LAYOUT,
+        paint: {
+          "line-color": "transparent",
+          "line-width": hitWidth,
+          "line-opacity": 1
+        }
+      },
+      beforeId
+    );
+    map.addLayer(
+      {
+        id: layerId,
+        type: "line",
+        source: sourceId,
+        layout: mergedLayout,
+        paint: mergedPaint
+      },
+      beforeId
+    );
+    return () => {
+      try {
+        if (map.getLayer(layerId)) map.removeLayer(layerId);
+        if (map.getLayer(hitLayerId)) map.removeLayer(hitLayerId);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+      }
+    };
+  }, [isLoaded, map]);
+  useEffect7(() => {
+    if (!isLoaded || !map) return;
+    const source = map.getSource(sourceId);
+    source?.setData(geoJSON);
+  }, [isLoaded, map, geoJSON, sourceId]);
+  useEffect7(() => {
+    if (!isLoaded || !map || !map.getLayer(layerId)) return;
+    for (const [key, value] of Object.entries(mergedPaint)) {
+      map.setPaintProperty(layerId, key, value);
+    }
+    for (const [key, value] of Object.entries(mergedLayout)) {
+      map.setLayoutProperty(layerId, key, value);
+    }
+    if (map.getLayer(hitLayerId)) {
+      map.setPaintProperty(hitLayerId, "line-width", hitWidth);
+    }
+  }, [isLoaded, map, layerId, hitLayerId, mergedPaint, mergedLayout, hitWidth]);
+  useEffect7(() => {
+    if (!isLoaded || !map || !interactive) return;
+    let hoveredId = null;
+    const setHover = (next) => {
+      if (next === hoveredId) return;
+      const sourceExists = !!map.getSource(sourceId);
+      if (hoveredId != null && sourceExists) {
+        map.setFeatureState({ source: sourceId, id: hoveredId }, { hover: false });
+      }
+      hoveredId = next;
+      if (next != null && sourceExists) {
+        map.setFeatureState({ source: sourceId, id: next }, { hover: true });
+      }
+    };
+    const findArc = (featureId) => featureId == null ? void 0 : latestRef.current.data.find((arc) => String(arc.id) === String(featureId));
+    const handleMouseMove = (e) => {
+      const featureId = e.features?.[0]?.id;
+      if (featureId == null || featureId === hoveredId) return;
+      setHover(featureId);
+      map.getCanvas().style.cursor = "pointer";
+      const arc = findArc(featureId);
+      if (arc) {
+        latestRef.current.onHover?.({
+          arc,
+          longitude: e.lngLat.lng,
+          latitude: e.lngLat.lat,
+          originalEvent: e
+        });
+      }
+    };
+    const handleMouseLeave = () => {
+      setHover(null);
+      map.getCanvas().style.cursor = "";
+      latestRef.current.onHover?.(null);
+    };
+    const handleClick = (e) => {
+      const arc = findArc(e.features?.[0]?.id);
+      if (!arc) return;
+      latestRef.current.onClick?.({
+        arc,
+        longitude: e.lngLat.lng,
+        latitude: e.lngLat.lat,
+        originalEvent: e
+      });
+    };
+    map.on("mousemove", hitLayerId, handleMouseMove);
+    map.on("mouseleave", hitLayerId, handleMouseLeave);
+    map.on("click", hitLayerId, handleClick);
+    return () => {
+      map.off("mousemove", hitLayerId, handleMouseMove);
+      map.off("mouseleave", hitLayerId, handleMouseLeave);
+      map.off("click", hitLayerId, handleClick);
+      setHover(null);
+      map.getCanvas().style.cursor = "";
+    };
+  }, [isLoaded, map, hitLayerId, sourceId, interactive]);
+  return null;
+}
+
+// src/map-geojson/map-geojson.tsx
+import { useEffect as useEffect8, useId as useId3, useMemo as useMemo5, useRef as useRef6 } from "react";
+function MapGeoJSON({
+  data,
+  id: propId,
+  promoteId,
+  fillPaint,
+  linePaint,
+  fillHoverPaint,
+  onClick,
+  onHover,
+  interactive = false,
+  beforeId
+}) {
+  const { map, isLoaded } = useMap();
+  const autoId = useId3();
+  const id = propId ?? autoId;
+  const sourceId = `geojson-source-${id}`;
+  const fillLayerId = `geojson-fill-${id}`;
+  const lineLayerId = `geojson-line-${id}`;
+  const defaultFill = useTokenColor("--border");
+  const defaultLine = useTokenColor("--background");
+  const showFill = fillPaint !== false;
+  const showLine = linePaint !== false;
+  const mergedFillPaint = useMemo5(
+    () => mergeHoverPaint({ "fill-color": defaultFill, ...fillPaint || {} }, fillHoverPaint),
+    [defaultFill, fillPaint, fillHoverPaint]
+  );
+  const mergedLinePaint = useMemo5(
+    () => ({
+      "line-color": defaultLine,
+      "line-width": 0.5,
+      ...linePaint || {}
+    }),
+    [defaultLine, linePaint]
+  );
+  const latestRef = useRef6({ onClick, onHover });
+  latestRef.current = { onClick, onHover };
+  useEffect8(() => {
+    if (!isLoaded || !map) return;
+    map.addSource(sourceId, {
+      type: "geojson",
+      data,
+      ...promoteId ? { promoteId } : {}
+    });
+    return () => {
+      try {
+        if (map.getLayer(lineLayerId)) map.removeLayer(lineLayerId);
+        if (map.getLayer(fillLayerId)) map.removeLayer(fillLayerId);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+      }
+    };
+  }, [isLoaded, map]);
+  useEffect8(() => {
+    if (!isLoaded || !map) return;
+    const source = map.getSource(sourceId);
+    source?.setData(data);
+  }, [isLoaded, map, data, sourceId]);
+  useEffect8(() => {
+    if (!isLoaded || !map) return;
+    const source = map.getSource(sourceId);
+    if (!source) return;
+    if (showFill && !map.getLayer(fillLayerId)) {
+      map.addLayer(
+        {
+          id: fillLayerId,
+          type: "fill",
+          source: sourceId,
+          paint: mergedFillPaint
+        },
+        beforeId
+      );
+    } else if (!showFill && map.getLayer(fillLayerId)) {
+      map.removeLayer(fillLayerId);
+    }
+    if (showLine && !map.getLayer(lineLayerId)) {
+      map.addLayer(
+        {
+          id: lineLayerId,
+          type: "line",
+          source: sourceId,
+          paint: mergedLinePaint
+        },
+        beforeId
+      );
+    } else if (!showLine && map.getLayer(lineLayerId)) {
+      map.removeLayer(lineLayerId);
+    }
+    if (showFill && map.getLayer(fillLayerId)) {
+      for (const [key, value] of Object.entries(mergedFillPaint)) {
+        map.setPaintProperty(fillLayerId, key, value);
+      }
+    }
+    if (showLine && map.getLayer(lineLayerId)) {
+      for (const [key, value] of Object.entries(mergedLinePaint)) {
+        map.setPaintProperty(lineLayerId, key, value);
+      }
+    }
+  }, [
+    isLoaded,
+    map,
+    sourceId,
+    fillLayerId,
+    lineLayerId,
+    showFill,
+    showLine,
+    mergedFillPaint,
+    mergedLinePaint,
+    beforeId
+  ]);
+  useEffect8(() => {
+    if (!isLoaded || !map || !interactive || !showFill) return;
+    let hoveredId = null;
+    const setHover = (next) => {
+      if (next === hoveredId) return;
+      const sourceExists = !!map.getSource(sourceId);
+      if (hoveredId != null && sourceExists) {
+        map.setFeatureState({ source: sourceId, id: hoveredId }, { hover: false });
+      }
+      hoveredId = next;
+      if (next != null && sourceExists) {
+        map.setFeatureState({ source: sourceId, id: next }, { hover: true });
+      }
+    };
+    const handleMouseMove = (e) => {
+      const feature = e.features?.[0];
+      if (!feature) return;
+      map.getCanvas().style.cursor = "pointer";
+      const featureId = feature.id;
+      if (featureId === hoveredId) return;
+      setHover(featureId ?? null);
+      latestRef.current.onHover?.({
+        feature,
+        longitude: e.lngLat.lng,
+        latitude: e.lngLat.lat,
+        originalEvent: e
+      });
+    };
+    const handleMouseLeave = () => {
+      setHover(null);
+      map.getCanvas().style.cursor = "";
+      latestRef.current.onHover?.(null);
+    };
+    const handleClick = (e) => {
+      const feature = e.features?.[0];
+      if (!feature) return;
+      latestRef.current.onClick?.({
+        feature,
+        longitude: e.lngLat.lng,
+        latitude: e.lngLat.lat,
+        originalEvent: e
+      });
+    };
+    map.on("mousemove", fillLayerId, handleMouseMove);
+    map.on("mouseleave", fillLayerId, handleMouseLeave);
+    map.on("click", fillLayerId, handleClick);
+    return () => {
+      map.off("mousemove", fillLayerId, handleMouseMove);
+      map.off("mouseleave", fillLayerId, handleMouseLeave);
+      map.off("click", fillLayerId, handleClick);
+      setHover(null);
+      map.getCanvas().style.cursor = "";
+    };
+  }, [isLoaded, map, fillLayerId, sourceId, interactive, showFill]);
+  return null;
+}
+
+// src/map-cluster-layer/map-cluster-layer.tsx
+import { useEffect as useEffect9, useId as useId4, useMemo as useMemo6 } from "react";
+var DEFAULT_CLUSTER_THRESHOLDS = [100, 750];
+function MapClusterLayer({
+  data,
+  clusterMaxZoom = 14,
+  clusterRadius = 50,
+  clusterColors,
+  clusterThresholds = DEFAULT_CLUSTER_THRESHOLDS,
+  pointColor,
+  onPointClick,
+  onClusterClick
+}) {
+  const { map, isLoaded } = useMap();
+  const id = useId4();
+  const sourceId = `cluster-source-${id}`;
+  const clusterLayerId = `clusters-${id}`;
+  const clusterCountLayerId = `cluster-count-${id}`;
+  const unclusteredLayerId = `unclustered-point-${id}`;
+  const success = useTokenColor("--success");
+  const warning = useTokenColor("--warning");
+  const destructive = useTokenColor("--destructive");
+  const primary = useTokenColor("--primary");
+  const surface = useTokenColor("--background");
+  const resolvedClusterColors = useMemo6(
+    () => clusterColors ?? [success, warning, destructive],
+    [clusterColors, success, warning, destructive]
+  );
+  const resolvedPointColor = pointColor ?? primary;
+  useEffect9(() => {
+    if (!isLoaded || !map) return;
+    map.addSource(sourceId, {
+      type: "geojson",
+      data,
+      cluster: true,
+      clusterMaxZoom,
+      clusterRadius
+    });
+    map.addLayer({
+      id: clusterLayerId,
+      type: "circle",
+      source: sourceId,
+      filter: ["has", "point_count"],
+      paint: {
+        "circle-color": [
+          "step",
+          ["get", "point_count"],
+          resolvedClusterColors[0],
+          clusterThresholds[0],
+          resolvedClusterColors[1],
+          clusterThresholds[1],
+          resolvedClusterColors[2]
+        ],
+        "circle-radius": [
+          "step",
+          ["get", "point_count"],
+          20,
+          clusterThresholds[0],
+          30,
+          clusterThresholds[1],
+          40
+        ],
+        "circle-stroke-width": 1,
+        "circle-stroke-color": surface,
+        "circle-opacity": 0.85
+      }
+    });
+    map.addLayer({
+      id: clusterCountLayerId,
+      type: "symbol",
+      source: sourceId,
+      filter: ["has", "point_count"],
+      layout: {
+        "text-field": "{point_count_abbreviated}",
+        "text-font": ["Open Sans"],
+        "text-size": 12
+      },
+      paint: {
+        "text-color": surface
+      }
+    });
+    map.addLayer({
+      id: unclusteredLayerId,
+      type: "circle",
+      source: sourceId,
+      filter: ["!", ["has", "point_count"]],
+      paint: {
+        "circle-color": resolvedPointColor,
+        "circle-radius": 5,
+        "circle-stroke-width": 2,
+        "circle-stroke-color": surface
+      }
+    });
+    return () => {
+      try {
+        if (map.getLayer(clusterCountLayerId)) map.removeLayer(clusterCountLayerId);
+        if (map.getLayer(unclusteredLayerId)) map.removeLayer(unclusteredLayerId);
+        if (map.getLayer(clusterLayerId)) map.removeLayer(clusterLayerId);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+      }
+    };
+  }, [isLoaded, map, sourceId]);
+  useEffect9(() => {
+    if (!isLoaded || !map || typeof data === "string") return;
+    const source = map.getSource(sourceId);
+    if (source) {
+      source.setData(data);
+    }
+  }, [isLoaded, map, data, sourceId]);
+  useEffect9(() => {
+    if (!isLoaded || !map) return;
+    if (map.getLayer(clusterLayerId)) {
+      map.setPaintProperty(clusterLayerId, "circle-color", [
+        "step",
+        ["get", "point_count"],
+        resolvedClusterColors[0],
+        clusterThresholds[0],
+        resolvedClusterColors[1],
+        clusterThresholds[1],
+        resolvedClusterColors[2]
+      ]);
+      map.setPaintProperty(clusterLayerId, "circle-radius", [
+        "step",
+        ["get", "point_count"],
+        20,
+        clusterThresholds[0],
+        30,
+        clusterThresholds[1],
+        40
+      ]);
+      map.setPaintProperty(clusterLayerId, "circle-stroke-color", surface);
+    }
+    if (map.getLayer(clusterCountLayerId)) {
+      map.setPaintProperty(clusterCountLayerId, "text-color", surface);
+    }
+    if (map.getLayer(unclusteredLayerId)) {
+      map.setPaintProperty(unclusteredLayerId, "circle-color", resolvedPointColor);
+      map.setPaintProperty(unclusteredLayerId, "circle-stroke-color", surface);
+    }
+  }, [
+    isLoaded,
+    map,
+    clusterLayerId,
+    clusterCountLayerId,
+    unclusteredLayerId,
+    resolvedClusterColors,
+    clusterThresholds,
+    resolvedPointColor,
+    surface
+  ]);
+  useEffect9(() => {
+    if (!isLoaded || !map) return;
+    const handleClusterClick = async (e) => {
+      const features = map.queryRenderedFeatures(e.point, {
+        layers: [clusterLayerId]
+      });
+      const feature = features[0];
+      if (!feature) return;
+      const clusterId = feature.properties?.cluster_id;
+      const pointCount = feature.properties?.point_count;
+      const coordinates = feature.geometry.coordinates;
+      if (onClusterClick) {
+        onClusterClick(clusterId, coordinates, pointCount);
+      } else {
+        const source = map.getSource(sourceId);
+        const zoom = await source.getClusterExpansionZoom(clusterId);
+        map.easeTo({
+          center: coordinates,
+          zoom
+        });
+      }
+    };
+    const handlePointClick = (e) => {
+      const feature = e.features?.[0];
+      if (!onPointClick || !feature) return;
+      const coordinates = feature.geometry.coordinates.slice();
+      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+      }
+      onPointClick(feature, coordinates);
+    };
+    const handleMouseEnterCluster = () => {
+      map.getCanvas().style.cursor = "pointer";
+    };
+    const handleMouseLeaveCluster = () => {
+      map.getCanvas().style.cursor = "";
+    };
+    const handleMouseEnterPoint = () => {
+      if (onPointClick) {
+        map.getCanvas().style.cursor = "pointer";
+      }
+    };
+    const handleMouseLeavePoint = () => {
+      map.getCanvas().style.cursor = "";
+    };
+    map.on("click", clusterLayerId, handleClusterClick);
+    map.on("click", unclusteredLayerId, handlePointClick);
+    map.on("mouseenter", clusterLayerId, handleMouseEnterCluster);
+    map.on("mouseleave", clusterLayerId, handleMouseLeaveCluster);
+    map.on("mouseenter", unclusteredLayerId, handleMouseEnterPoint);
+    map.on("mouseleave", unclusteredLayerId, handleMouseLeavePoint);
+    return () => {
+      map.off("click", clusterLayerId, handleClusterClick);
+      map.off("click", unclusteredLayerId, handlePointClick);
+      map.off("mouseenter", clusterLayerId, handleMouseEnterCluster);
+      map.off("mouseleave", clusterLayerId, handleMouseLeaveCluster);
+      map.off("mouseenter", unclusteredLayerId, handleMouseEnterPoint);
+      map.off("mouseleave", unclusteredLayerId, handleMouseLeavePoint);
+    };
+  }, [isLoaded, map, clusterLayerId, unclusteredLayerId, sourceId, onClusterClick, onPointClick]);
+  return null;
+}
+export {
+  MapArc,
+  MapCanvas,
+  MapClusterLayer,
+  MapControls,
+  MapGeoJSON,
+  MapMarker,
+  MapMarkerContent,
+  MapMarkerLabel,
+  MapMarkerPopup,
+  MapMarkerTooltip,
+  MapPopup,
+  MapRoute,
+  buildArcCoordinates,
+  useMap
+};
+//# sourceMappingURL=index.js.map