@page-speed/maps 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -1,12 +1,30 @@
 'use strict';
 
-var React = require('react');
+var React3 = require('react');
 var maplibre = require('react-map-gl/maplibre');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/core/MapLibre.tsx
 
@@ -85,6 +103,42 @@ function generateGoogleMapLink(latitude, longitude, zoom = 15) {
 function generateGoogleDirectionsLink(latitude, longitude) {
   return `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var SimplePressable = React3__namespace.forwardRef(({ children, className, href, onClick, ...props }, ref) => {
+  if (href) {
+    const isExternal = href.startsWith("http://") || href.startsWith("https://");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref,
+        href,
+        className,
+        target: isExternal ? "_blank" : props.target,
+        rel: isExternal ? "noopener noreferrer" : props.rel,
+        onClick,
+        ...props,
+        children
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className,
+        onClick,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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({});
@@ -211,18 +265,18 @@ function MapLibre({
   geolocateControlPosition = "top-left",
   flyToOptions = DEFAULT_FLY_TO_OPTIONS
 }) {
-  const mapRef = React__default.default.useRef(null);
+  const mapRef = React3__namespace.default.useRef(null);
   const resolvedMapLibreCssHref = mapLibreCssHref && mapLibreCssHref.trim().length > 0 ? mapLibreCssHref : DEFAULT_MAPLIBRE_CSS_HREF;
-  const [internalViewState, setInternalViewState] = React__default.default.useState({
+  const [internalViewState, setInternalViewState] = React3__namespace.default.useState({
     latitude: viewState?.latitude ?? center.lat,
     longitude: viewState?.longitude ?? center.lng,
     zoom: viewState?.zoom ?? zoom
   });
-  const isUserInteracting = React__default.default.useRef(false);
-  const isMarkerDragging = React__default.default.useRef(false);
-  const dragAnimationFrame = React__default.default.useRef(null);
-  const lastReportedViewState = React__default.default.useRef(null);
-  const resolvedFlyToOptions = React__default.default.useMemo(
+  const isUserInteracting = React3__namespace.default.useRef(false);
+  const isMarkerDragging = React3__namespace.default.useRef(false);
+  const dragAnimationFrame = React3__namespace.default.useRef(null);
+  const lastReportedViewState = React3__namespace.default.useRef(null);
+  const resolvedFlyToOptions = React3__namespace.default.useMemo(
     () => ({
       speed: flyToOptions.speed ?? 0.8,
       curve: flyToOptions.curve ?? 1.2,
@@ -236,10 +290,10 @@ function MapLibre({
       flyToOptions.speed
     ]
   );
-  React__default.default.useEffect(() => {
+  React3__namespace.default.useEffect(() => {
     ensureMapLibreStylesheet(resolvedMapLibreCssHref);
   }, [resolvedMapLibreCssHref]);
-  React__default.default.useEffect(() => {
+  React3__namespace.default.useEffect(() => {
     if (!mapRef.current || !viewState || isUserInteracting.current || isMarkerDragging.current) {
       return;
     }
@@ -273,10 +327,10 @@ function MapLibre({
     viewState?.longitude,
     viewState?.zoom
   ]);
-  const handleMoveStart = React__default.default.useCallback(() => {
+  const handleMoveStart = React3__namespace.default.useCallback(() => {
     isUserInteracting.current = true;
   }, []);
-  const handleMove = React__default.default.useCallback(
+  const handleMove = React3__namespace.default.useCallback(
     (event) => {
       const nextViewState = event.viewState;
       setInternalViewState({
@@ -294,7 +348,7 @@ function MapLibre({
     },
     [onViewStateChange]
   );
-  const handleMoveEnd = React__default.default.useCallback(
+  const handleMoveEnd = React3__namespace.default.useCallback(
     (event) => {
       isUserInteracting.current = false;
       if (!onMoveEnd) {
@@ -315,7 +369,7 @@ function MapLibre({
     },
     [onMoveEnd]
   );
-  const handleMapClick = React__default.default.useCallback(
+  const handleMapClick = React3__namespace.default.useCallback(
     (event) => {
       if (!onClick) {
         return;
@@ -324,11 +378,11 @@ function MapLibre({
     },
     [onClick]
   );
-  const normalizedMarkers = React__default.default.useMemo(
+  const normalizedMarkers = React3__namespace.default.useMemo(
     () => normalizeMarkers(markers),
     [markers]
   );
-  const markerElements = React__default.default.useMemo(
+  const markerElements = React3__namespace.default.useMemo(
     () => normalizedMarkers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
       maplibre.Marker,
       {
@@ -415,7 +469,7 @@ function MapLibre({
     )),
     [normalizedMarkers, onMarkerDrag]
   );
-  const resolvedMapStyleUrl = React__default.default.useMemo(() => {
+  const resolvedMapStyleUrl = React3__namespace.default.useMemo(() => {
     if (styleUrl) {
       return appendStadiaApiKey(styleUrl, stadiaApiKey);
     }
@@ -482,7 +536,7 @@ function computeGeoCenter(coordinates) {
   return { lat, lng };
 }
 function useGeoCenter(coordinates) {
-  return React.useMemo(() => computeGeoCenter(coordinates), [coordinates]);
+  return React3.useMemo(() => computeGeoCenter(coordinates), [coordinates]);
 }
 var TILE_SIZE = 512;
 function latToMercatorY(lat) {
@@ -540,7 +594,7 @@ function computeDefaultZoom(options) {
 }
 function useDefaultZoom(options) {
   const { coordinates, mapWidth, mapHeight, padding, maxZoom, minZoom } = options;
-  return React.useMemo(
+  return React3.useMemo(
     () => computeDefaultZoom({
       coordinates,
       mapWidth,
@@ -552,12 +606,857 @@ function useDefaultZoom(options) {
     [coordinates, mapWidth, mapHeight, padding, maxZoom, minZoom]
   );
 }
+var SIZE_CONFIG = {
+  sm: {
+    outer: "size-10",
+    middle: "size-7",
+    inner: "size-5",
+    dot: "size-2"
+  },
+  md: {
+    outer: "size-14",
+    middle: "size-10",
+    inner: "size-7",
+    dot: "size-2.5"
+  },
+  lg: {
+    outer: "size-20",
+    middle: "size-14",
+    inner: "size-10",
+    dot: "size-3.5"
+  }
+};
+function MapMarker({
+  size = "md",
+  isSelected = false,
+  dotColor,
+  innerRingColor,
+  middleRingColor,
+  outerRingColor,
+  className,
+  onClick,
+  interactive = true,
+  "aria-label": ariaLabel = "Map location marker"
+}) {
+  const sizeConfig = SIZE_CONFIG[size];
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex items-center justify-center rounded-full transition-transform duration-200",
+        sizeConfig.outer,
+        isSelected && "scale-110",
+        className
+      ),
+      style: { backgroundColor: outerRingColor },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full transition-all duration-200",
+              sizeConfig.middle
+            ),
+            style: { backgroundColor: middleRingColor }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full transition-all duration-200",
+              sizeConfig.inner
+            ),
+            style: { backgroundColor: innerRingColor }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute rounded-full transition-all duration-200",
+              sizeConfig.dot
+            ),
+            style: { backgroundColor: dotColor }
+          }
+        )
+      ]
+    }
+  );
+  if (!interactive) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "group cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-full",
+      onClick,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "transition-transform duration-200 group-hover:scale-110",
+            isSelected && "scale-110"
+          ),
+          children: content
+        }
+      )
+    }
+  );
+}
+function NeutralMapMarker(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MapMarker,
+    {
+      ...props,
+      dotColor: "hsl(var(--neutral-900, 0 0% 9%))",
+      innerRingColor: "hsl(var(--neutral-400, 0 0% 64%))",
+      middleRingColor: "hsl(var(--neutral-300, 0 0% 78%))",
+      outerRingColor: "hsl(var(--neutral-200, 0 0% 88%))"
+    }
+  );
+}
+function createMapMarkerElement(config) {
+  return function MarkerElement({ isSelected }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MapMarker, { ...config, isSelected, interactive: false });
+  };
+}
+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__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" })
+  }
+);
+var FallbackImg = ({ src, alt, className, loading }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className, loading });
+function MarkerActions({ actions }) {
+  if (!actions || actions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      SimplePressable,
+      {
+        href,
+        onClick,
+        className: buttonStyles,
+        ...rest,
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon,
+          label,
+          iconAfter
+        ] })
+      },
+      resolveActionKey(action, index)
+    );
+  }) });
+}
+function MarkerMediaCarousel({
+  mediaItems,
+  optixFlowConfig,
+  IconComponent = FallbackIcon,
+  ImgComponent = FallbackImg
+}) {
+  const [activeIndex, setActiveIndex] = React3__namespace.useState(0);
+  const totalItems = mediaItems.length;
+  const mediaResetKey = React3__namespace.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__namespace.useEffect(() => {
+    setActiveIndex(0);
+  }, [mediaResetKey]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/arrow-left", size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/arrow-right", size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.useMemo(
+    () => markers.map((marker, index) => ({
+      ...marker,
+      id: normalizeId(marker.id, `marker-${index}`)
+    })),
+    [markers]
+  );
+  const normalizedClusters = React3__namespace.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__namespace.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__namespace.useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalizedClusters.forEach((cluster) => {
+      lookup.set(cluster.id, cluster);
+    });
+    return lookup;
+  }, [normalizedClusters]);
+  const firstCoordinate = React3__namespace.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__namespace.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__namespace.useState({
+    latitude: defaultViewState?.latitude ?? firstCoordinate.latitude,
+    longitude: defaultViewState?.longitude ?? firstCoordinate.longitude,
+    zoom: defaultViewState?.zoom ?? calculatedZoom
+  });
+  React3__namespace.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__namespace.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__namespace.useState(() => {
+    if (initialSelectedMarkerId !== void 0 && initialSelectedMarkerId !== null) {
+      return {
+        type: "marker",
+        markerId: String(initialSelectedMarkerId)
+      };
+    }
+    return { type: "none" };
+  });
+  React3__namespace.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__namespace.useEffect(() => {
+    if (selection.type === "marker" && selection.markerId && !selectedMarker) {
+      setSelection({ type: "none" });
+      onSelectionChange?.({ type: "none" });
+    }
+  }, [onSelectionChange, selectedMarker, selection]);
+  const emitSelectionChange = React3__namespace.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__namespace.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__namespace.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__namespace.useCallback(() => {
+    setSelection({ type: "none" });
+    emitSelectionChange({ type: "none" });
+  }, [emitSelectionChange]);
+  const mapMarkers = React3__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/x", size: 20 })
+              }
+            ),
+            markerMediaItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              MarkerMediaCarousel,
+              {
+                mediaItems: markerMediaItems,
+                optixFlowConfig,
+                IconComponent,
+                ImgComponent
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+                selectedMarker.eyebrow ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide", children: selectedMarker.eyebrow }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-tight", children: selectedMarker.title ?? selectedMarker.label ?? "Location" })
+              ] }) }),
+              selectedMarker.summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-relaxed", children: selectedMarker.summary }) : null,
+              selectedMarker.locationLine ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-start text-sm gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconComponent,
+                  {
+                    name: "lucide:map-pin",
+                    className: "opacity-50",
+                    size: 18
+                  }
+                ),
+                typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-start text-sm gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  IconComponent,
+                  {
+                    name: "lucide:clock",
+                    className: "opacity-50",
+                    size: 18
+                  }
+                ),
+                typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
+              ] }) : null,
+              selectedMarker.markerContentComponent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: selectedMarker.markerContentComponent }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(MarkerActions, { actions: selectedMarker.actions })
+            ] })
+          ]
+        }
+      );
+    }
+    if (selectedCluster) {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { name: "lucide/x", size: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+              selectedCluster.label ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: selectedCluster.label }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-tight text-foreground", children: selectedCluster.title ?? "Clustered Locations" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-h-56 space-y-2 overflow-y-auto pr-1", children: selectedCluster.markers.map((marker, markerIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "line-clamp-1 text-sm font-semibold text-foreground", children: getMarkerTitle(marker, markerIndex) }),
+                  marker.summary ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 line-clamp-2 text-xs text-muted-foreground", children: marker.summary }) : null
+                ]
+              },
+              marker.id
+            )) })
+          ]
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-[520px] w-full", mapWrapperClassName), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute z-20",
+              PANEL_POSITION_CLASS[panelPosition]
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: renderMarkerPanel() })
+          }
+        ) : null
+      ]
+    }
+  );
+}
 
 exports.DTMapLibreMap = DTMapLibreMap;
+exports.GeoMap = GeoMap;
 exports.MapLibre = MapLibre;
+exports.MapMarker = MapMarker;
+exports.NeutralMapMarker = NeutralMapMarker;
 exports.appendStadiaApiKey = appendStadiaApiKey;
 exports.computeDefaultZoom = computeDefaultZoom;
 exports.computeGeoCenter = computeGeoCenter;
+exports.createMapMarkerElement = createMapMarkerElement;
 exports.generateGoogleDirectionsLink = generateGoogleDirectionsLink;
 exports.generateGoogleMapLink = generateGoogleMapLink;
 exports.getMapLibreStyleUrl = getMapLibreStyleUrl;