@elabs-ai/components-maps 4.2.0 → 5.0.0

package/dist/index.js

@@ -1,1490 +1,208 @@
 "use client";
 import "./index.css";
-
-// src/map-canvas/map-canvas.tsx
-import MapLibreGL from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
+import "./chunk-3HXFONRP.js";
 import {
-  forwardRef,
-  useCallback,
-  useEffect as useEffect2,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState as useState2
-} from "react";
-import { Spinner, StatePanel, useLocale } 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 { t } = useLocale();
-  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 projectionRef = useRef(projection);
-  projectionRef.current = projection;
-  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 (projectionRef.current) {
-          map.setProjection(projectionRef.current);
-        }
-      }, 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: t("maps.canvas.unavailableTitle"),
-        description: t("maps.canvas.unavailableDescription"),
-        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, useState as useState3 } from "react";
-import { createPortal } from "react-dom";
-import { X } from "lucide-react";
-import { cn as cn2 } from "@elabs-ai/components-ui/lib/cn";
-import { useLocale as useLocale2 } from "@elabs-ai/components-ui";
-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 [marker, setMarker] = useState3(null);
-  const callbacksRef = useRef2({
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onDragStart,
-    onDrag,
-    onDragEnd
-  });
-  callbacksRef.current = {
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onDragStart,
-    onDrag,
-    onDragEnd
-  };
-  const { anchor, className, offset, rotation, rotationAlignment, pitchAlignment } = markerOptions;
-  const initialRef = useRef2({ longitude, latitude, draggable });
-  initialRef.current = { longitude, latitude, draggable };
-  useEffect3(() => {
-    const markerInstance = new MapLibreGL2.Marker({
-      anchor,
-      className,
-      element: document.createElement("div"),
-      draggable: initialRef.current.draggable
-    }).setLngLat([initialRef.current.longitude, initialRef.current.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);
-    setMarker(markerInstance);
-  }, [anchor, className]);
-  useEffect3(() => {
-    if (!map || !marker) return;
-    marker.addTo(map);
-    return () => {
-      marker.remove();
-    };
-  }, [map, marker]);
-  useEffect3(() => {
-    if (!marker) return;
-    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]);
-  if (!marker) {
-    return null;
-  }
-  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 }) {
-  const { t } = useLocale2();
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-label": t("maps.popup.close"),
-      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-ring-inset",
-      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 { useLocale as useLocale3 } from "@elabs-ai/components-ui";
-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 { t } = useLocale3();
-  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": t("maps.popup.close"),
-              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-ring-inset",
-              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 useState4 } 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-ring-inset",
-        "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] = useState4(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 useState5 } from "react";
-function useTokenColor(name, fallback = "#000000") {
-  const { map, themeKey } = useMap();
-  const [color, setColor] = useState5(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;
-}
+  MapScaleBar,
+  computeMapScale,
+  metresPerPixel,
+  niceDistance
+} from "./chunk-T4TJTVVA.js";
+import "./chunk-NPUC3V37.js";
+import {
+  MapPopup
+} from "./chunk-UMOYRCDX.js";
+import "./chunk-IAHK5MVT.js";
+import {
+  MapRoute
+} from "./chunk-CJJT6AEI.js";
+import "./chunk-T3Z6TCDD.js";
+import {
+  MapMarker,
+  MapMarkerContent,
+  MapMarkerLabel,
+  MapMarkerPopup,
+  MapMarkerTooltip
+} from "./chunk-C4VI37TD.js";
+import "./chunk-RK4BUMHS.js";
+import {
+  MapNorthArrow
+} from "./chunk-E7VPNINZ.js";
+import "./chunk-D2RCPTRO.js";
+import {
+  MapPlanImage
+} from "./chunk-B3ZDBQ6I.js";
+import "./chunk-NNBURJHY.js";
+import {
+  MapPlanLegend
+} from "./chunk-RV673TB4.js";
+import {
+  MapPlanOverlay
+} from "./chunk-FQ6V7BFZ.js";
+import {
+  MapPlanStatus
+} from "./chunk-LU2UEKFM.js";
+import {
+  MapPlanTable
+} from "./chunk-VFBRFGID.js";
+import {
+  usePlanSelection
+} from "./chunk-HCOBWIM4.js";
+import "./chunk-LVYM6C5C.js";
+import {
+  MapControls
+} from "./chunk-S7N2WMVT.js";
+import "./chunk-5PDVG53B.js";
+import {
+  MapGeoJSON
+} from "./chunk-WS4Z7ENS.js";
+import "./chunk-DTV7JZVN.js";
+import {
+  MapInset
+} from "./chunk-PF3R2BXM.js";
+import "./chunk-QU33KPMP.js";
+import {
+  MapLegend
+} from "./chunk-V2REM6UT.js";
+import {
+  MAP_CORNERS
+} from "./chunk-GWULZOMW.js";
+import "./chunk-3SJN3IYT.js";
+import {
+  MapArc
+} from "./chunk-OEVVNPN3.js";
+import "./chunk-Q2I5YODW.js";
+import {
+  MapCanvas
+} from "./chunk-XQT7YLJY.js";
+import "./chunk-Z4EPSOB4.js";
+import "./chunk-Z5OPDBDC.js";
+import {
+  MapClusterLayer
+} from "./chunk-JGJ6442I.js";
+import {
+  ROUTE_ARROW_SIZE,
+  createRouteArrowImage,
+  routeArrowImageId
+} from "./chunk-2VVJRT66.js";
+import {
+  usePlanProjection
+} from "./chunk-MIMDP3EU.js";
+import {
+  useTokenColor
+} from "./chunk-Y44MEKJV.js";
+import "./chunk-643R7IJC.js";
+import {
+  MapAnnotation,
+  MapAnnotationKey
+} from "./chunk-QDWWP3N7.js";
+import {
+  DEFAULT_MAP_HEIGHT,
+  MAP_BREAKPOINTS,
+  MAP_BREAKPOINT_THRESHOLDS,
+  isMapResponsiveByBreakpoint,
+  mapBreakpointForWidth,
+  resolveMapResponsive,
+  useMapBreakpoint,
+  useMapResponsive
+} from "./chunk-W76NLFER.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+import {
+  MAP_LABEL_ANCHORS,
+  mapAnchorGeometry,
+  mapAnchorTransform
+} from "./chunk-4DANBD5B.js";
+import {
+  buildArcCoordinates
+} from "./chunk-BGCE3RR5.js";
+import "./chunk-2FPB53NG.js";
+import "./chunk-G7JDXDJN.js";
+import "./chunk-RNSLG64F.js";
+import {
+  PLAN_MERCATOR_SPAN,
+  createPlanCrs
+} from "./chunk-GYDTTAVD.js";
+import {
+  createPlanPatternTile,
+  planPatternImageId,
+  usePlanPatterns
+} from "./chunk-FHV5IA6N.js";
+import {
+  planBoundsOfGeometry,
+  planBoundsUnion,
+  planGroupId,
+  planGroupsFromRegions,
+  planRegionCentre,
+  planRegionsFromGeoJSON
+} from "./chunk-WNU4IOGL.js";
+import {
+  PLAN_FILL_OPACITY,
+  PLAN_STATUSES,
+  PLAN_STATUS_ENCODING,
+  planStatusMatch
+} from "./chunk-E65Z3MSV.js";
 export {
+  DEFAULT_MAP_HEIGHT,
+  MAP_BREAKPOINTS,
+  MAP_BREAKPOINT_THRESHOLDS,
+  MAP_CORNERS,
+  MAP_LABEL_ANCHORS,
+  MapAnnotation,
+  MapAnnotationKey,
   MapArc,
   MapCanvas,
   MapClusterLayer,
   MapControls,
   MapGeoJSON,
+  MapInset,
+  MapLegend,
   MapMarker,
   MapMarkerContent,
   MapMarkerLabel,
   MapMarkerPopup,
   MapMarkerTooltip,
+  MapNorthArrow,
+  MapPlanImage,
+  MapPlanLegend,
+  MapPlanOverlay,
+  MapPlanStatus,
+  MapPlanTable,
   MapPopup,
   MapRoute,
+  MapScaleBar,
+  PLAN_FILL_OPACITY,
+  PLAN_MERCATOR_SPAN,
+  PLAN_STATUSES,
+  PLAN_STATUS_ENCODING,
+  ROUTE_ARROW_SIZE,
   buildArcCoordinates,
-  useMap
+  computeMapScale,
+  createPlanCrs,
+  createPlanPatternTile,
+  createRouteArrowImage,
+  isMapResponsiveByBreakpoint,
+  mapAnchorGeometry,
+  mapAnchorTransform,
+  mapBreakpointForWidth,
+  metresPerPixel,
+  niceDistance,
+  planBoundsOfGeometry,
+  planBoundsUnion,
+  planGroupId,
+  planGroupsFromRegions,
+  planPatternImageId,
+  planRegionCentre,
+  planRegionsFromGeoJSON,
+  planStatusMatch,
+  resolveMapResponsive,
+  routeArrowImageId,
+  useMap,
+  useMapBreakpoint,
+  useMapResponsive,
+  usePlanPatterns,
+  usePlanProjection,
+  usePlanSelection,
+  useTokenColor
 };
 //# sourceMappingURL=index.js.map