@page-speed/maps 0.1.3 → 0.1.5

package/dist/components/geo-map.js

@@ -0,0 +1,1207 @@
+import * as React3 from 'react';
+import React3__default from 'react';
+import { Marker, Map as Map$1, GeolocateControl, NavigationControl } from 'react-map-gl/maplibre';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/utils/getMapLibreStyleUrl.ts
+var MAPLIBRE_DEFAULT_STYLE_URL = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+var DEFAULT_STADIA_STYLE_URL = "https://tiles.stadiamaps.com/styles/osm_bright.json";
+var STYLE_MAP = {
+  default: DEFAULT_STADIA_STYLE_URL,
+  "alidade-smooth": "https://tiles.stadiamaps.com/styles/alidade_smooth.json",
+  "alidade-smooth-dark": "https://tiles.stadiamaps.com/styles/alidade_smooth_dark.json",
+  "maplibre-default": MAPLIBRE_DEFAULT_STYLE_URL,
+  "osm-bright": "https://tiles.stadiamaps.com/styles/osm_bright.json",
+  "stadia-outdoors": "https://tiles.stadiamaps.com/styles/outdoors.json",
+  "stamen-toner": "https://tiles.stadiamaps.com/styles/stamen_toner.json",
+  "stamen-terrain": "https://tiles.stadiamaps.com/styles/stamen_terrain.json",
+  "stamen-watercolor": "https://tiles.stadiamaps.com/styles/stamen_watercolor.json"
+};
+var HTTP_URL_REGEX = /^https?:\/\//i;
+function isStadiaMapsUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.hostname === "tiles.stadiamaps.com";
+  } catch {
+    return false;
+  }
+}
+function assertStadiaApiKey(stadiaApiKey) {
+  if (!stadiaApiKey.trim()) {
+    throw new Error(
+      "A non-empty stadiaApiKey is required for Stadia Maps style URLs."
+    );
+  }
+}
+function appendStadiaApiKey(styleUrl, stadiaApiKey) {
+  if (!isStadiaMapsUrl(styleUrl)) {
+    return styleUrl;
+  }
+  assertStadiaApiKey(stadiaApiKey);
+  const parsed = new URL(styleUrl);
+  if (!parsed.searchParams.has("api_key")) {
+    parsed.searchParams.set("api_key", stadiaApiKey);
+  }
+  return parsed.toString();
+}
+function getMapLibreStyleUrl(value, stadiaApiKey) {
+  const normalizedApiKey = stadiaApiKey.trim();
+  if (!value || typeof value !== "string") {
+    if (!normalizedApiKey) {
+      return MAPLIBRE_DEFAULT_STYLE_URL;
+    }
+    return appendStadiaApiKey(DEFAULT_STADIA_STYLE_URL, normalizedApiKey);
+  }
+  if (STYLE_MAP[value]) {
+    const mappedStyleUrl = STYLE_MAP[value];
+    if (isStadiaMapsUrl(mappedStyleUrl) && !normalizedApiKey) {
+      return MAPLIBRE_DEFAULT_STYLE_URL;
+    }
+    return appendStadiaApiKey(mappedStyleUrl, normalizedApiKey);
+  }
+  if (HTTP_URL_REGEX.test(value)) {
+    if (isStadiaMapsUrl(value) && !normalizedApiKey) {
+      return MAPLIBRE_DEFAULT_STYLE_URL;
+    }
+    return appendStadiaApiKey(value, normalizedApiKey);
+  }
+  if (!normalizedApiKey) {
+    return MAPLIBRE_DEFAULT_STYLE_URL;
+  }
+  return appendStadiaApiKey(DEFAULT_STADIA_STYLE_URL, normalizedApiKey);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SimplePressable = React3.forwardRef(({ children, className, href, onClick, ...props }, ref) => {
+  if (href) {
+    const isExternal = href.startsWith("http://") || href.startsWith("https://");
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href,
+        className,
+        target: isExternal ? "_blank" : props.target,
+        rel: isExternal ? "noopener noreferrer" : props.rel,
+        onClick,
+        ...props,
+        children
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className,
+        onClick,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className, children });
+});
+SimplePressable.displayName = "SimplePressable";
+var DEFAULT_MAPLIBRE_CSS_HREF = "https://cdn.jsdelivr.net/npm/maplibre-gl@5.18.0/dist/maplibre-gl.css";
+var MAPLIBRE_STYLESHEET_ID = "page-speed-maplibre-gl-css";
+var DEFAULT_FLY_TO_OPTIONS = Object.freeze({});
+var VIEW_STATE_COORDINATE_EPSILON = 1e-6;
+var VIEW_STATE_ZOOM_EPSILON = 0.01;
+var DEFAULT_FLY_TO_EASING = (t) => 1 - Math.pow(1 - t, 3);
+function joinClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function hasMeaningfulViewStateDelta(previous, next) {
+  return Math.abs(previous.latitude - next.latitude) > VIEW_STATE_COORDINATE_EPSILON || Math.abs(previous.longitude - next.longitude) > VIEW_STATE_COORDINATE_EPSILON || Math.abs(previous.zoom - next.zoom) > VIEW_STATE_ZOOM_EPSILON;
+}
+function ensureMapLibreStylesheet(href) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const existingLink = document.getElementById(MAPLIBRE_STYLESHEET_ID);
+  if (existingLink instanceof HTMLLinkElement) {
+    if (existingLink.getAttribute("href") !== href) {
+      existingLink.setAttribute("href", href);
+    }
+    return;
+  }
+  const matchingLink = Array.from(
+    document.querySelectorAll("link[rel='stylesheet']")
+  ).find((link) => link.getAttribute("href") === href);
+  if (matchingLink instanceof HTMLLinkElement) {
+    matchingLink.id = MAPLIBRE_STYLESHEET_ID;
+    return;
+  }
+  const stylesheet = document.createElement("link");
+  stylesheet.id = MAPLIBRE_STYLESHEET_ID;
+  stylesheet.rel = "stylesheet";
+  stylesheet.href = href;
+  stylesheet.dataset.pageSpeedMaps = "maplibre-css";
+  document.head.appendChild(stylesheet);
+}
+function DefaultMarker({ marker }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        cursor: marker.draggable ? "grab" : "pointer",
+        transform: "translate(-50%, -100%)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative"
+      },
+      onClick: marker.onClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: "32",
+            height: "32",
+            viewBox: "0 0 24 24",
+            fill: marker.color || "#3B82F6",
+            style: { filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.35))" },
+            children: /* @__PURE__ */ jsx("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 4.85 6.13 12.24 6.39 12.55a.75.75 0 0 0 1.16 0C12.87 21.24 19 13.85 19 9c0-3.87-3.13-7-7-7Zm0 9.75A2.75 2.75 0 1 1 12 6.25a2.75 2.75 0 0 1 0 5.5Z" })
+          }
+        ),
+        marker.label ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: -28,
+              left: "50%",
+              transform: "translateX(-50%)",
+              background: "#FFFFFF",
+              borderRadius: 6,
+              padding: "2px 8px",
+              fontSize: 12,
+              fontWeight: 500,
+              whiteSpace: "nowrap",
+              boxShadow: "0 3px 10px rgba(0, 0, 0, 0.2)"
+            },
+            children: marker.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function normalizeMarkers(markers) {
+  return markers.map((marker, index) => {
+    if (marker.lat !== void 0 && marker.lng !== void 0) {
+      return marker;
+    }
+    const basicMarker = marker;
+    return {
+      id: basicMarker.id ?? index,
+      lat: basicMarker.latitude,
+      lng: basicMarker.longitude,
+      color: basicMarker.color,
+      draggable: basicMarker.draggable,
+      label: basicMarker.label,
+      element: basicMarker.element,
+      onClick: basicMarker.onClick
+    };
+  });
+}
+function MapLibre({
+  stadiaApiKey,
+  mapLibreCssHref,
+  viewState,
+  onViewStateChange,
+  mapStyle,
+  center = viewState ? { lat: viewState.latitude ?? 0, lng: viewState.longitude ?? 0 } : { lat: 0, lng: 0 },
+  zoom = viewState?.zoom ?? 14,
+  styleUrl,
+  markers = [],
+  onMoveEnd,
+  onClick,
+  onMarkerDrag,
+  className,
+  style,
+  children,
+  showNavigationControl = true,
+  showGeolocateControl = false,
+  navigationControlPosition = "bottom-right",
+  geolocateControlPosition = "top-left",
+  flyToOptions = DEFAULT_FLY_TO_OPTIONS
+}) {
+  const mapRef = React3__default.useRef(null);
+  const resolvedMapLibreCssHref = mapLibreCssHref && mapLibreCssHref.trim().length > 0 ? mapLibreCssHref : DEFAULT_MAPLIBRE_CSS_HREF;
+  const [internalViewState, setInternalViewState] = React3__default.useState({
+    latitude: viewState?.latitude ?? center.lat,
+    longitude: viewState?.longitude ?? center.lng,
+    zoom: viewState?.zoom ?? zoom
+  });
+  const isUserInteracting = React3__default.useRef(false);
+  const isMarkerDragging = React3__default.useRef(false);
+  const dragAnimationFrame = React3__default.useRef(null);
+  const lastReportedViewState = React3__default.useRef(null);
+  const resolvedFlyToOptions = React3__default.useMemo(
+    () => ({
+      speed: flyToOptions.speed ?? 0.8,
+      curve: flyToOptions.curve ?? 1.2,
+      bearing: flyToOptions.bearing ?? 0,
+      easing: flyToOptions.easing ?? DEFAULT_FLY_TO_EASING
+    }),
+    [
+      flyToOptions.bearing,
+      flyToOptions.curve,
+      flyToOptions.easing,
+      flyToOptions.speed
+    ]
+  );
+  React3__default.useEffect(() => {
+    ensureMapLibreStylesheet(resolvedMapLibreCssHref);
+  }, [resolvedMapLibreCssHref]);
+  React3__default.useEffect(() => {
+    if (!mapRef.current || !viewState || isUserInteracting.current || isMarkerDragging.current) {
+      return;
+    }
+    setInternalViewState((previous) => {
+      const next = {
+        latitude: viewState.latitude ?? previous.latitude,
+        longitude: viewState.longitude ?? previous.longitude,
+        zoom: viewState.zoom ?? previous.zoom
+      };
+      const hasChanged = hasMeaningfulViewStateDelta(previous, next);
+      if (!hasChanged) {
+        return previous;
+      }
+      const isEchoedMoveState = !!lastReportedViewState.current && !hasMeaningfulViewStateDelta(lastReportedViewState.current, next);
+      if (!isEchoedMoveState) {
+        mapRef.current?.flyTo({
+          center: [next.longitude, next.latitude],
+          zoom: next.zoom,
+          speed: resolvedFlyToOptions.speed,
+          curve: resolvedFlyToOptions.curve,
+          bearing: resolvedFlyToOptions.bearing,
+          easing: resolvedFlyToOptions.easing,
+          essential: true
+        });
+      }
+      return next;
+    });
+  }, [
+    resolvedFlyToOptions,
+    viewState?.latitude,
+    viewState?.longitude,
+    viewState?.zoom
+  ]);
+  const handleMoveStart = React3__default.useCallback(() => {
+    isUserInteracting.current = true;
+  }, []);
+  const handleMove = React3__default.useCallback(
+    (event) => {
+      const nextViewState = event.viewState;
+      setInternalViewState({
+        latitude: nextViewState.latitude,
+        longitude: nextViewState.longitude,
+        zoom: nextViewState.zoom
+      });
+      const roundedViewState = {
+        latitude: Number(nextViewState.latitude.toFixed(6)),
+        longitude: Number(nextViewState.longitude.toFixed(6)),
+        zoom: Number(nextViewState.zoom.toFixed(2))
+      };
+      lastReportedViewState.current = roundedViewState;
+      onViewStateChange?.(roundedViewState);
+    },
+    [onViewStateChange]
+  );
+  const handleMoveEnd = React3__default.useCallback(
+    (event) => {
+      isUserInteracting.current = false;
+      if (!onMoveEnd) {
+        return;
+      }
+      const map = event.target;
+      const nextCenter = map.getCenter();
+      const nextZoom = map.getZoom();
+      const bounds = map.getBounds();
+      onMoveEnd(
+        {
+          lat: Number(nextCenter.lat.toFixed(6)),
+          lng: Number(nextCenter.lng.toFixed(6))
+        },
+        Number(nextZoom.toFixed(2)),
+        bounds
+      );
+    },
+    [onMoveEnd]
+  );
+  const handleMapClick = React3__default.useCallback(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      onClick({ latitude: event.lngLat.lat, longitude: event.lngLat.lng });
+    },
+    [onClick]
+  );
+  const normalizedMarkers = React3__default.useMemo(
+    () => normalizeMarkers(markers),
+    [markers]
+  );
+  const markerElements = React3__default.useMemo(
+    () => normalizedMarkers.map((marker) => /* @__PURE__ */ jsx(
+      Marker,
+      {
+        longitude: marker.lng,
+        latitude: marker.lat,
+        draggable: marker.draggable,
+        onDragStart: () => {
+          isMarkerDragging.current = true;
+        },
+        onDrag: (event) => {
+          if (!mapRef.current) {
+            return;
+          }
+          const nextLngLat = event.lngLat;
+          if (!nextLngLat || nextLngLat.lng === void 0 || nextLngLat.lat === void 0) {
+            return;
+          }
+          const draggedLng = nextLngLat.lng;
+          const draggedLat = nextLngLat.lat;
+          if (dragAnimationFrame.current) {
+            cancelAnimationFrame(dragAnimationFrame.current);
+          }
+          dragAnimationFrame.current = requestAnimationFrame(() => {
+            if (!mapRef.current) {
+              return;
+            }
+            const bounds = mapRef.current.getBounds();
+            const viewportWidth = bounds.getEast() - bounds.getWest();
+            const viewportHeight = bounds.getNorth() - bounds.getSouth();
+            const edgePadding = 0.1;
+            const westThreshold = bounds.getWest() + viewportWidth * edgePadding;
+            const eastThreshold = bounds.getEast() - viewportWidth * edgePadding;
+            const southThreshold = bounds.getSouth() + viewportHeight * edgePadding;
+            const northThreshold = bounds.getNorth() - viewportHeight * edgePadding;
+            const nearWestEdge = draggedLng < westThreshold;
+            const nearEastEdge = draggedLng > eastThreshold;
+            const nearSouthEdge = draggedLat < southThreshold;
+            const nearNorthEdge = draggedLat > northThreshold;
+            if (!nearWestEdge && !nearEastEdge && !nearSouthEdge && !nearNorthEdge) {
+              return;
+            }
+            let panLng = draggedLng;
+            let panLat = draggedLat;
+            const offsetAmount = 0.2;
+            if (nearWestEdge) {
+              panLng = draggedLng - viewportWidth * offsetAmount;
+            }
+            if (nearEastEdge) {
+              panLng = draggedLng + viewportWidth * offsetAmount;
+            }
+            if (nearSouthEdge) {
+              panLat = draggedLat - viewportHeight * offsetAmount;
+            }
+            if (nearNorthEdge) {
+              panLat = draggedLat + viewportHeight * offsetAmount;
+            }
+            mapRef.current?.easeTo({
+              center: [panLng, panLat],
+              duration: 200
+            });
+          });
+        },
+        onDragEnd: (event) => {
+          isMarkerDragging.current = false;
+          if (dragAnimationFrame.current) {
+            cancelAnimationFrame(dragAnimationFrame.current);
+            dragAnimationFrame.current = null;
+          }
+          if (!onMarkerDrag) {
+            return;
+          }
+          const nextLngLat = event.lngLat;
+          if (!nextLngLat || nextLngLat.lng === void 0 || nextLngLat.lat === void 0) {
+            return;
+          }
+          onMarkerDrag(marker.id ?? null, {
+            latitude: nextLngLat.lat,
+            longitude: nextLngLat.lng
+          });
+        },
+        children: marker.element ? typeof marker.element === "function" ? marker.element() : marker.element : /* @__PURE__ */ jsx(DefaultMarker, { marker })
+      },
+      marker.id
+    )),
+    [normalizedMarkers, onMarkerDrag]
+  );
+  const resolvedMapStyleUrl = React3__default.useMemo(() => {
+    if (styleUrl) {
+      return appendStadiaApiKey(styleUrl, stadiaApiKey);
+    }
+    if (mapStyle) {
+      return getMapLibreStyleUrl(mapStyle, stadiaApiKey);
+    }
+    return getMapLibreStyleUrl("osm-bright", stadiaApiKey);
+  }, [mapStyle, stadiaApiKey, styleUrl]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: joinClassNames("relative w-full h-full", className),
+      style: { width: "100%", height: "100%", ...style },
+      children: /* @__PURE__ */ jsxs(
+        Map$1,
+        {
+          ref: mapRef,
+          ...internalViewState,
+          mapStyle: resolvedMapStyleUrl,
+          onMoveStart: handleMoveStart,
+          onMove: handleMove,
+          onMoveEnd: handleMoveEnd,
+          onClick: handleMapClick,
+          attributionControl: false,
+          trackResize: true,
+          dragRotate: false,
+          touchZoomRotate: false,
+          children: [
+            showGeolocateControl ? /* @__PURE__ */ jsx(GeolocateControl, { position: geolocateControlPosition }) : null,
+            showNavigationControl ? /* @__PURE__ */ jsx(NavigationControl, { position: navigationControlPosition }) : null,
+            markerElements,
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+var PANEL_POSITION_CLASS = {
+  "top-left": "left-4 top-4",
+  "top-right": "right-4 top-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-right": "bottom-4 right-4"
+};
+var DEFAULT_VIEW_STATE = {
+  latitude: 39.5,
+  longitude: -98.35,
+  zoom: 3
+};
+var VIDEO_FILE_EXTENSION_REGEX = /\.(mp4|webm|ogg|mov|m4v|m3u8)(\?.*)?$/i;
+function resolveMediaType(item) {
+  if (item.type) {
+    return item.type;
+  }
+  return VIDEO_FILE_EXTENSION_REGEX.test(item.src) ? "video" : "image";
+}
+function normalizeId(value, fallback) {
+  if (value === null || value === void 0 || value === "") {
+    return fallback;
+  }
+  return String(value);
+}
+function buildClusterCenter(markers) {
+  if (!markers.length) {
+    return null;
+  }
+  const total = markers.reduce(
+    (accumulator, marker) => ({
+      latitude: accumulator.latitude + marker.latitude,
+      longitude: accumulator.longitude + marker.longitude
+    }),
+    { latitude: 0, longitude: 0 }
+  );
+  return {
+    latitude: total.latitude / markers.length,
+    longitude: total.longitude / markers.length
+  };
+}
+function resolveActionKey(action, index) {
+  if (typeof action.label === "string" && action.label.trim().length > 0) {
+    return `label:${action.label}:${index}`;
+  }
+  if (action.href) {
+    return `href:${action.href}:${index}`;
+  }
+  return `action:${index}`;
+}
+var FallbackIcon = ({
+  size = 20,
+  className
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" })
+  }
+);
+var FallbackImg = ({ src, alt, className, loading }) => /* @__PURE__ */ jsx("img", { src, alt, className, loading });
+function MarkerActions({ actions }) {
+  if (!actions || actions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      href,
+      onClick,
+      className: actionClassName,
+      variant,
+      size,
+      asButton,
+      ...rest
+    } = action;
+    const buttonStyles = cn(
+      "inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium transition-colors",
+      variant === "outline" ? "border border-border bg-background hover:bg-muted" : "bg-primary text-primary-foreground hover:bg-primary/90",
+      size === "sm" && "text-sm px-3 py-1.5",
+      size === "icon" && "p-2",
+      actionClassName
+    );
+    return /* @__PURE__ */ jsx(
+      SimplePressable,
+      {
+        href,
+        onClick,
+        className: buttonStyles,
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          label,
+          iconAfter
+        ] })
+      },
+      resolveActionKey(action, index)
+    );
+  }) });
+}
+function MarkerMediaCarousel({
+  mediaItems,
+  optixFlowConfig,
+  IconComponent = FallbackIcon,
+  ImgComponent = FallbackImg
+}) {
+  const [activeIndex, setActiveIndex] = React3.useState(0);
+  const totalItems = mediaItems.length;
+  const mediaResetKey = React3.useMemo(
+    () => mediaItems.map((item, index) => {
+      const itemId = normalizeId(item.id, `media-${index}`);
+      return `${itemId}:${item.src}:${item.type ?? ""}:${item.poster ?? ""}`;
+    }).join("|"),
+    [mediaItems]
+  );
+  const activeItemIndex = Math.min(activeIndex, Math.max(0, totalItems - 1));
+  React3.useEffect(() => {
+    setActiveIndex(0);
+  }, [mediaResetKey]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: mediaItems.map((item, index) => {
+      const isActive = index === activeItemIndex;
+      const mediaType = resolveMediaType(item);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": !isActive,
+          className: cn(
+            "absolute inset-0 transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100 z-1" : "opacity-0 z-0 pointer-events-none"
+          ),
+          children: mediaType === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsx(
+            ImgComponent,
+            {
+              src: item.src,
+              alt: item.alt ?? "Map marker media",
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              optixFlowConfig
+            }
+          )
+        },
+        normalizeId(item.id, `media-slide-${index}`)
+      );
+    }) }),
+    totalItems > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show previous media",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
+          onClick: () => {
+            setActiveIndex(
+              (current) => (current - 1 + totalItems) % totalItems
+            );
+          },
+          children: /* @__PURE__ */ jsx(IconComponent, { name: "lucide/arrow-left", size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Show next media",
+          className: "absolute right-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-2",
+          onClick: () => {
+            setActiveIndex((current) => (current + 1) % totalItems);
+          },
+          children: /* @__PURE__ */ jsx(IconComponent, { name: "lucide/arrow-right", size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Show media item ${index + 1}`,
+          className: cn(
+            "h-2 rounded-full transition-all duration-300",
+            index === activeItemIndex ? "w-6 bg-card" : "w-2 bg-card opacity-50 hover:opacity-100"
+          ),
+          onClick: () => setActiveIndex(index)
+        },
+        normalizeId(item.id, `media-dot-${index}`)
+      )) })
+    ] }) : null
+  ] });
+}
+function getMarkerTitle(marker, markerIndex) {
+  if (marker.title !== void 0 && marker.title !== null) {
+    return marker.title;
+  }
+  if (marker.label !== void 0 && marker.label !== null) {
+    return marker.label;
+  }
+  return `Location ${markerIndex + 1}`;
+}
+function GeoMap({
+  className,
+  mapWrapperClassName,
+  mapClassName,
+  panelClassName,
+  panelPosition = "top-left",
+  stadiaApiKey = "",
+  mapStyle = "osm-bright",
+  styleUrl,
+  mapLibreCssHref,
+  markers = [],
+  clusters = [],
+  viewState,
+  defaultViewState,
+  onViewStateChange,
+  onMapClick,
+  onMarkerDrag,
+  showNavigationControl = true,
+  showGeolocateControl = false,
+  navigationControlPosition = "top-right",
+  geolocateControlPosition = "top-left",
+  flyToOptions,
+  markerFocusZoom = 14,
+  clusterFocusZoom = 5,
+  selectedMarkerId,
+  initialSelectedMarkerId,
+  onSelectionChange,
+  clearSelectionOnMapClick = true,
+  mapChildren,
+  optixFlowConfig,
+  IconComponent = FallbackIcon,
+  ImgComponent = FallbackImg
+}) {
+  const normalizedStandaloneMarkers = React3.useMemo(
+    () => markers.map((marker, index) => ({
+      ...marker,
+      id: normalizeId(marker.id, `marker-${index}`)
+    })),
+    [markers]
+  );
+  const normalizedClusters = React3.useMemo(() => {
+    const results = [];
+    clusters.forEach((cluster, clusterIndex) => {
+      const clusterId = normalizeId(cluster.id, `cluster-${clusterIndex}`);
+      const normalizedClusterMarkers = cluster.markers.map(
+        (marker, markerIndex) => ({
+          ...marker,
+          id: normalizeId(marker.id, `${clusterId}-marker-${markerIndex}`),
+          clusterId
+        })
+      );
+      const clusterCenter = cluster.latitude !== void 0 && cluster.longitude !== void 0 ? { latitude: cluster.latitude, longitude: cluster.longitude } : buildClusterCenter(normalizedClusterMarkers);
+      if (!clusterCenter) {
+        return;
+      }
+      results.push({
+        ...cluster,
+        id: clusterId,
+        latitude: clusterCenter.latitude,
+        longitude: clusterCenter.longitude,
+        markers: normalizedClusterMarkers
+      });
+    });
+    return results;
+  }, [clusters]);
+  const markerLookup = React3.useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalizedStandaloneMarkers.forEach((marker) => {
+      lookup.set(marker.id, marker);
+    });
+    normalizedClusters.forEach((cluster) => {
+      cluster.markers.forEach((marker) => {
+        lookup.set(marker.id, marker);
+      });
+    });
+    return lookup;
+  }, [normalizedClusters, normalizedStandaloneMarkers]);
+  const clusterLookup = React3.useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalizedClusters.forEach((cluster) => {
+      lookup.set(cluster.id, cluster);
+    });
+    return lookup;
+  }, [normalizedClusters]);
+  const firstCoordinate = React3.useMemo(() => {
+    const allCoords = [];
+    normalizedStandaloneMarkers.forEach((marker) => {
+      allCoords.push({ latitude: marker.latitude, longitude: marker.longitude });
+    });
+    normalizedClusters.forEach((cluster) => {
+      allCoords.push({ latitude: cluster.latitude, longitude: cluster.longitude });
+    });
+    if (allCoords.length > 0) {
+      const sum = allCoords.reduce(
+        (acc, coord) => ({
+          latitude: acc.latitude + coord.latitude,
+          longitude: acc.longitude + coord.longitude
+        }),
+        { latitude: 0, longitude: 0 }
+      );
+      return {
+        latitude: sum.latitude / allCoords.length,
+        longitude: sum.longitude / allCoords.length
+      };
+    }
+    return {
+      latitude: DEFAULT_VIEW_STATE.latitude,
+      longitude: DEFAULT_VIEW_STATE.longitude
+    };
+  }, [normalizedClusters, normalizedStandaloneMarkers]);
+  const calculatedZoom = React3.useMemo(() => {
+    if (normalizedStandaloneMarkers.length + normalizedClusters.length <= 1) {
+      return markerFocusZoom;
+    }
+    const allCoords = [];
+    normalizedStandaloneMarkers.forEach((marker) => {
+      allCoords.push({ latitude: marker.latitude, longitude: marker.longitude });
+    });
+    normalizedClusters.forEach((cluster) => {
+      allCoords.push({ latitude: cluster.latitude, longitude: cluster.longitude });
+    });
+    if (allCoords.length === 0) {
+      return DEFAULT_VIEW_STATE.zoom;
+    }
+    const lats = allCoords.map((c) => c.latitude);
+    const lngs = allCoords.map((c) => c.longitude);
+    const latDiff = Math.max(...lats) - Math.min(...lats);
+    const lngDiff = Math.max(...lngs) - Math.min(...lngs);
+    const maxDiff = Math.max(latDiff, lngDiff);
+    if (maxDiff > 10) return 3;
+    if (maxDiff > 5) return 5;
+    if (maxDiff > 2) return 7;
+    if (maxDiff > 1) return 9;
+    if (maxDiff > 0.5) return 10;
+    if (maxDiff > 0.1) return 12;
+    return 13;
+  }, [normalizedClusters, normalizedStandaloneMarkers, markerFocusZoom]);
+  const [uncontrolledViewState, setUncontrolledViewState] = React3.useState({
+    latitude: defaultViewState?.latitude ?? firstCoordinate.latitude,
+    longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
+    zoom: defaultViewState?.zoom ?? calculatedZoom
+  });
+  React3.useEffect(() => {
+    if (!viewState && !defaultViewState) {
+      setUncontrolledViewState({
+        latitude: firstCoordinate.latitude,
+        longitude: firstCoordinate.longitude,
+        zoom: calculatedZoom
+      });
+    }
+  }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
+  const isControlledViewState = viewState !== void 0;
+  const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
+  const applyViewState = React3.useCallback(
+    (nextState) => {
+      if (!isControlledViewState) {
+        setUncontrolledViewState((current) => {
+          const next = { ...current, ...nextState };
+          const hasChanged = current.latitude !== next.latitude || current.longitude !== next.longitude || current.zoom !== next.zoom;
+          return hasChanged ? next : current;
+        });
+      }
+      onViewStateChange?.(nextState);
+    },
+    [isControlledViewState, onViewStateChange]
+  );
+  const [selection, setSelection] = React3.useState(() => {
+    if (initialSelectedMarkerId !== void 0 && initialSelectedMarkerId !== null) {
+      return {
+        type: "marker",
+        markerId: String(initialSelectedMarkerId)
+      };
+    }
+    return { type: "none" };
+  });
+  React3.useEffect(() => {
+    if (selectedMarkerId === void 0 || selectedMarkerId === null) {
+      return;
+    }
+    setSelection({
+      type: "marker",
+      markerId: String(selectedMarkerId)
+    });
+  }, [selectedMarkerId]);
+  const selectedMarker = selection.markerId ? markerLookup.get(selection.markerId) : void 0;
+  const selectedCluster = selection.clusterId ? clusterLookup.get(selection.clusterId) : void 0;
+  React3.useEffect(() => {
+    if (selection.type === "marker" && selection.markerId && !selectedMarker) {
+      setSelection({ type: "none" });
+      onSelectionChange?.({ type: "none" });
+    }
+  }, [onSelectionChange, selectedMarker, selection]);
+  const emitSelectionChange = React3.useCallback(
+    (nextSelection) => {
+      if (nextSelection.type === "none") {
+        onSelectionChange?.({ type: "none" });
+        return;
+      }
+      if (nextSelection.type === "marker") {
+        const parentCluster = nextSelection.marker.clusterId ? clusterLookup.get(nextSelection.marker.clusterId) : void 0;
+        onSelectionChange?.({
+          type: "marker",
+          marker: nextSelection.marker,
+          cluster: parentCluster
+        });
+        return;
+      }
+      onSelectionChange?.({
+        type: "cluster",
+        cluster: nextSelection.cluster
+      });
+    },
+    [clusterLookup, onSelectionChange]
+  );
+  const selectMarker = React3.useCallback(
+    (marker) => {
+      setSelection({
+        type: "marker",
+        markerId: marker.id,
+        clusterId: marker.clusterId
+      });
+      applyViewState({
+        latitude: marker.latitude,
+        longitude: marker.longitude,
+        zoom: markerFocusZoom
+      });
+      emitSelectionChange({ type: "marker", marker });
+    },
+    [applyViewState, emitSelectionChange, markerFocusZoom]
+  );
+  const selectCluster = React3.useCallback(
+    (cluster) => {
+      setSelection({
+        type: "cluster",
+        clusterId: cluster.id
+      });
+      applyViewState({
+        latitude: cluster.latitude,
+        longitude: cluster.longitude,
+        zoom: clusterFocusZoom
+      });
+      emitSelectionChange({ type: "cluster", cluster });
+    },
+    [applyViewState, clusterFocusZoom, emitSelectionChange]
+  );
+  const clearSelection = React3.useCallback(() => {
+    setSelection({ type: "none" });
+    emitSelectionChange({ type: "none" });
+  }, [emitSelectionChange]);
+  const mapMarkers = React3.useMemo(() => {
+    const resolvedMarkers = [];
+    normalizedClusters.forEach((cluster) => {
+      const isSelected = selection.type === "cluster" && selection.clusterId === cluster.id;
+      resolvedMarkers.push({
+        id: `cluster-pin:${cluster.id}`,
+        latitude: cluster.latitude,
+        longitude: cluster.longitude,
+        element: () => {
+          const customMarkerElement = cluster.markerElement;
+          const markerBody = typeof customMarkerElement === "function" ? customMarkerElement({
+            isSelected,
+            count: cluster.markers.length
+          }) : customMarkerElement;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "group cursor-pointer",
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                selectCluster(cluster);
+              },
+              "aria-label": `View ${cluster.markers.length} clustered locations`,
+              children: markerBody ?? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex min-h-10 min-w-10 items-center justify-center rounded-full border-2 border-white px-2 text-xs font-semibold text-white shadow-lg transition-transform duration-200 group-hover:scale-105",
+                    isSelected && "ring-4 ring-primary/30",
+                    cluster.pinClassName
+                  ),
+                  style: {
+                    backgroundColor: cluster.pinColor ?? "var(--foreground)"
+                  },
+                  children: cluster.markers.length
+                }
+              )
+            }
+          );
+        }
+      });
+    });
+    normalizedStandaloneMarkers.forEach((marker) => {
+      const isSelected = selection.type === "marker" && selection.markerId === marker.id;
+      const customMarkerElement = marker.markerElement;
+      resolvedMarkers.push({
+        id: marker.id,
+        latitude: marker.latitude,
+        longitude: marker.longitude,
+        draggable: marker.draggable,
+        element: () => {
+          const markerBody = typeof customMarkerElement === "function" ? customMarkerElement({ isSelected }) : customMarkerElement;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "group cursor-pointer",
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                selectMarker(marker);
+              },
+              "aria-label": typeof marker.title === "string" ? `View ${marker.title}` : "View location details",
+              children: markerBody ?? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex h-4 w-4 rounded-full border-2 border-white shadow-md transition-transform duration-200 group-hover:scale-110",
+                    isSelected && "h-5 w-5 ring-4 ring-primary/30",
+                    marker.pinClassName
+                  ),
+                  style: {
+                    backgroundColor: marker.pinColor ?? "#f43f5e"
+                  }
+                }
+              )
+            }
+          );
+        }
+      });
+    });
+    return resolvedMarkers;
+  }, [
+    normalizedClusters,
+    normalizedStandaloneMarkers,
+    selectCluster,
+    selectMarker,
+    selection
+  ]);
+  const renderMarkerPanel = () => {
+    if (selectedMarker) {
+      const markerMediaItems = selectedMarker.mediaItems ?? [];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-2xl",
+            panelClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close marker details",
+                className: "flex size-12 items-center justify-center rounded-bl-lg rounded-br-0 rounded-t-0 bg-black text-white transition-all duration-500 absolute top-0 right-0 z-10 cursor-pointer ring-4 ring-white",
+                onClick: clearSelection,
+                children: /* @__PURE__ */ jsx(IconComponent, { name: "lucide/x", size: 20 })
+              }
+            ),
+            markerMediaItems.length > 0 ? /* @__PURE__ */ jsx(
+              MarkerMediaCarousel,
+              {
+                mediaItems: markerMediaItems,
+                optixFlowConfig,
+                IconComponent,
+                ImgComponent
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+                selectedMarker.eyebrow ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide", children: selectedMarker.eyebrow }) : null,
+                /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight", children: selectedMarker.title ?? selectedMarker.label ?? "Location" })
+              ] }) }),
+              selectedMarker.summary ? /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed", children: selectedMarker.summary }) : null,
+              selectedMarker.locationLine ? /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-start text-sm gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  IconComponent,
+                  {
+                    name: "lucide:map-pin",
+                    className: "opacity-50",
+                    size: 18
+                  }
+                ),
+                typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsx(
+                  SimplePressable,
+                  {
+                    href: selectedMarker.locationUrl,
+                    className: cn(
+                      "transition-all duration-500",
+                      "font-medium opacity-75 hover:opacity-100",
+                      selectedMarker.locationUrl ? "underline underline-offset-4" : ""
+                    ),
+                    children: selectedMarker.locationLine
+                  }
+                ) : selectedMarker.locationLine
+              ] }) : null,
+              selectedMarker.hoursLine ? /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-start text-sm gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  IconComponent,
+                  {
+                    name: "lucide:clock",
+                    className: "opacity-50",
+                    size: 18
+                  }
+                ),
+                typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
+              ] }) : null,
+              selectedMarker.markerContentComponent ? /* @__PURE__ */ jsx("div", { className: "relative", children: selectedMarker.markerContentComponent }) : null,
+              /* @__PURE__ */ jsx(MarkerActions, { actions: selectedMarker.actions })
+            ] })
+          ]
+        }
+      );
+    }
+    if (selectedCluster) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-4 shadow-2xl",
+            panelClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close cluster details",
+                className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
+                onClick: clearSelection,
+                children: /* @__PURE__ */ jsx(IconComponent, { name: "lucide/x", size: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              selectedCluster.label ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: selectedCluster.label }) : null,
+              /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-tight text-foreground", children: selectedCluster.title ?? "Clustered Locations" }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: selectedCluster.summary ?? `${selectedCluster.markers.length} location${selectedCluster.markers.length === 1 ? "" : "s"} in this cluster.` })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-2 overflow-y-auto pr-1", children: selectedCluster.markers.map((marker, markerIndex) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "w-full rounded-lg border border-border/60 p-3 text-left transition hover:border-border hover:bg-muted/50",
+                onClick: () => selectMarker(marker),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "line-clamp-1 text-sm font-semibold text-foreground", children: getMarkerTitle(marker, markerIndex) }),
+                  marker.summary ? /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-xs text-muted-foreground", children: marker.summary }) : null
+                ]
+              },
+              marker.id
+            )) })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("h-[520px] w-full", mapWrapperClassName), children: /* @__PURE__ */ jsx(
+          MapLibre,
+          {
+            stadiaApiKey,
+            mapStyle,
+            styleUrl,
+            mapLibreCssHref,
+            viewState: resolvedViewState,
+            onViewStateChange: applyViewState,
+            markers: mapMarkers,
+            onClick: (coord) => {
+              onMapClick?.(coord);
+              if (clearSelectionOnMapClick) {
+                clearSelection();
+              }
+            },
+            onMarkerDrag,
+            showNavigationControl,
+            showGeolocateControl,
+            navigationControlPosition,
+            geolocateControlPosition,
+            flyToOptions,
+            className: cn("h-full w-full", mapClassName),
+            children: mapChildren
+          }
+        ) }),
+        selection.type !== "none" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute z-20",
+              PANEL_POSITION_CLASS[panelPosition]
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: renderMarkerPanel() })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { GeoMap };
+//# sourceMappingURL=geo-map.js.map
+//# sourceMappingURL=geo-map.js.map