@next-degree/pickle-shared-js 0.12.7 → 0.13.0

package/dist/components/ui/Map/MapComponent.js

@@ -0,0 +1,367 @@
+"use client";
+
+// src/components/ui/Map/MapComponent.tsx
+import { APIProvider } from "@vis.gl/react-google-maps";
+
+// src/components/ui/Map/constants.ts
+var DEFAULT_POSITION = { lat: 40.715021, lng: -74.00459 };
+var DEFAULT_ZOOM = 10;
+var CLUSTER_DISTANCE_THRESHOLD = 1e-3;
+var PIN_COLORS = {
+  background: "#0B5441",
+  borderColor: "#EBFDF1",
+  glyphColor: "#D4F500"
+};
+var FOCUS_CIRCLE_STYLES = {
+  strokeColor: "#0B5441",
+  strokeOpacity: 0.8,
+  strokeWeight: 2,
+  fillColor: "#0B5441",
+  fillOpacity: 0.1,
+  clickable: false,
+  zIndex: 1
+};
+var CLUSTERING_CONFIG = {
+  radius: 60,
+  maxZoom: 16,
+  minPoints: 2
+};
+
+// src/components/ui/Map/hooks.ts
+import { useMemo, useState } from "react";
+import useSupercluster from "use-supercluster";
+
+// src/components/ui/Map/utils.ts
+function getCenterForCoordinates(coords) {
+  if (coords.length === 0) return DEFAULT_POSITION;
+  const avgLat = coords.reduce((sum, coord) => sum + coord.lat, 0) / coords.length;
+  const avgLng = coords.reduce((sum, coord) => sum + coord.lng, 0) / coords.length;
+  return { lat: avgLat, lng: avgLng };
+}
+function getZoomForCoordinates(coords, defaultZoom) {
+  if (coords.length <= 1) return defaultZoom;
+  const lats = coords.map((coord) => coord.lat);
+  const lngs = coords.map((coord) => coord.lng);
+  const latDiff = Math.max(...lats) - Math.min(...lats);
+  const lngDiff = Math.max(...lngs) - Math.min(...lngs);
+  const maxDiff = Math.max(latDiff, lngDiff);
+  if (maxDiff > 0.1) return 8;
+  if (maxDiff > 0.05) return 10;
+  if (maxDiff > 0.01) return 12;
+  return 14;
+}
+function filterClusterCoordinates(coordinates, clusterLat, clusterLng) {
+  return coordinates.filter((coord) => {
+    const latDiff = Math.abs(coord.lat - clusterLat);
+    const lngDiff = Math.abs(coord.lng - clusterLng);
+    const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff);
+    return distance < CLUSTER_DISTANCE_THRESHOLD;
+  });
+}
+
+// src/components/ui/Map/clustering.ts
+function convertCoordinatesToGeoJSON(coordinates) {
+  return coordinates.map((coord, index) => ({
+    type: "Feature",
+    properties: {
+      cluster: false,
+      pointId: index,
+      data: coord.data
+    },
+    geometry: {
+      type: "Point",
+      coordinates: [coord.lng, coord.lat]
+    }
+  }));
+}
+
+// src/components/ui/Map/hooks.ts
+function useMapBounds(_coordinates) {
+  const [bounds, setBounds] = useState([
+    [-180, -85],
+    [180, 85]
+  ]);
+  return { bounds, setBounds };
+}
+function useZoomLevel(initialZoom) {
+  const [zoomLevel, setZoomLevel] = useState(initialZoom);
+  return { zoomLevel, setZoomLevel };
+}
+function useClusters(coordinates, bounds, zoomLevel) {
+  const points = useMemo(() => {
+    if (!coordinates) return [];
+    return convertCoordinatesToGeoJSON(coordinates);
+  }, [coordinates]);
+  const { clusters, supercluster } = useSupercluster({
+    points,
+    bounds: [-180, -85, 180, 85],
+    // Use global bounds for consistency
+    zoom: zoomLevel || 10,
+    options: CLUSTERING_CONFIG
+  });
+  return { clusters, supercluster };
+}
+
+// src/components/ui/Map/MapContent.tsx
+import { AdvancedMarker as AdvancedMarker3, Map, Pin as Pin2, useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
+import { useCallback } from "react";
+
+// src/components/ui/Map/ClusterMarker.tsx
+import { AdvancedMarker } from "@vis.gl/react-google-maps";
+function ClusterMarker({
+  cluster,
+  coordinates,
+  onPinClick,
+  onPinHover,
+  zoomToLevel,
+  supercluster
+}) {
+  const [lng, lat] = cluster.geometry.coordinates;
+  const { point_count: pointCount } = cluster.properties;
+  const handleClick = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinClick?.(clusterCoordinates);
+    const expansionZoom = supercluster.getClusterExpansionZoom(cluster.id);
+    zoomToLevel(expansionZoom);
+  };
+  const handleMouseEnter = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinHover?.(clusterCoordinates);
+  };
+  const handleMouseLeave = () => onPinHover?.(null);
+  return /* @__PURE__ */ React.createElement(
+    AdvancedMarker,
+    {
+      key: `cluster-${cluster.id}`,
+      position: { lat, lng },
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "relative flex items-center justify-center", id: "CLUSTER_MARKER" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-red-500 text-sm font-bold text-white shadow-lg" }, pointCount || "?"))
+  );
+}
+
+// src/components/ui/Map/FocusCircle.tsx
+import { useEffect, useMemo as useMemo2, useRef } from "react";
+function FocusCircle({
+  focusPoint,
+  radiusMiles,
+  map,
+  mapsLibrary
+}) {
+  const circleRef = useRef(null);
+  const circleProps = useMemo2(() => {
+    if (!focusPoint || !radiusMiles) return null;
+    return {
+      center: focusPoint,
+      radius: radiusMiles * 1609.34
+    };
+  }, [focusPoint, radiusMiles]);
+  useEffect(() => {
+    if (!map || !mapsLibrary || !circleProps) {
+      return;
+    }
+    if (!circleRef.current) {
+      const circle = new google.maps.Circle({
+        center: circleProps.center,
+        radius: circleProps.radius,
+        ...FOCUS_CIRCLE_STYLES,
+        map
+      });
+      circleRef.current = circle;
+    } else {
+      circleRef.current.setCenter(circleProps.center);
+      circleRef.current.setRadius(circleProps.radius);
+    }
+  }, [map, mapsLibrary, circleProps]);
+  useEffect(() => {
+    return () => {
+      if (circleRef.current) {
+        circleRef.current.setMap(null);
+        circleRef.current = null;
+      }
+    };
+  }, []);
+  return null;
+}
+
+// src/components/ui/Map/IndividualMarker.tsx
+import { AdvancedMarker as AdvancedMarker2, Pin } from "@vis.gl/react-google-maps";
+function IndividualMarker({
+  coordinate,
+  onPinClick,
+  onPinHover
+}) {
+  const handleMouseEnter = () => onPinHover?.(coordinate);
+  const handleMouseLeave = () => onPinHover?.(null);
+  const handleClick = () => onPinClick?.(coordinate);
+  return /* @__PURE__ */ React.createElement(
+    AdvancedMarker2,
+    {
+      position: { lat: coordinate.lat, lng: coordinate.lng },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(Pin, { ...PIN_COLORS })
+  );
+}
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/Map/MapContent.tsx
+function MapContent({
+  mapId,
+  mapCenter,
+  mapZoom,
+  position,
+  coordinates,
+  clusters,
+  supercluster,
+  onPinHover,
+  onPinClick,
+  focusPoint,
+  radiusMiles,
+  className,
+  setBounds,
+  setZoomLevel
+}) {
+  const map = useMap();
+  const mapsLibrary = useMapsLibrary("maps");
+  const zoomToLevel = useCallback(
+    (newZoom) => {
+      if (map) {
+        map.setZoom(newZoom);
+      }
+    },
+    [map]
+  );
+  const handleBoundsChanged = (e) => {
+    if (e.detail.bounds) {
+      const bounds = e.detail.bounds;
+      setBounds([
+        [bounds.south, bounds.west],
+        [bounds.north, bounds.east]
+      ]);
+    }
+  };
+  const handleZoomChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  const handleCameraChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative h-screen max-w-full", className) }, /* @__PURE__ */ React.createElement(
+    Map,
+    {
+      defaultZoom: mapZoom,
+      defaultCenter: mapCenter,
+      mapId,
+      keyboardShortcuts: true,
+      disableDefaultUI: true,
+      zoomControl: true,
+      onBoundsChanged: handleBoundsChanged,
+      onZoomChanged: handleZoomChanged,
+      onCameraChanged: handleCameraChanged
+    },
+    position && !coordinates && /* @__PURE__ */ React.createElement(AdvancedMarker3, { position }, /* @__PURE__ */ React.createElement(Pin2, { ...PIN_COLORS })),
+    coordinates && clusters.map((cluster) => {
+      const { cluster: isCluster } = cluster.properties;
+      if (isCluster) {
+        return /* @__PURE__ */ React.createElement(
+          ClusterMarker,
+          {
+            key: `cluster-${cluster.id}`,
+            cluster,
+            coordinates,
+            onPinClick,
+            onPinHover,
+            zoomToLevel,
+            supercluster
+          }
+        );
+      }
+      const originalPoint = coordinates[cluster.properties.pointId];
+      return /* @__PURE__ */ React.createElement(
+        IndividualMarker,
+        {
+          key: `marker-${cluster.properties.pointId}`,
+          coordinate: originalPoint,
+          onPinClick,
+          onPinHover
+        }
+      );
+    }),
+    coordinates && clusters.length === 0 && coordinates.map((coord, index) => /* @__PURE__ */ React.createElement(
+      IndividualMarker,
+      {
+        key: `fallback-${index}`,
+        coordinate: coord,
+        onPinClick,
+        onPinHover
+      }
+    )),
+    focusPoint && radiusMiles && /* @__PURE__ */ React.createElement(
+      FocusCircle,
+      {
+        focusPoint,
+        radiusMiles,
+        map,
+        mapsLibrary
+      }
+    )
+  ));
+}
+
+// src/components/ui/Map/MapComponent.tsx
+function MapComponent({
+  apiKey,
+  mapId,
+  position,
+  coordinates,
+  onPinHover,
+  onPinClick,
+  focusPoint,
+  radiusMiles,
+  className,
+  zoom = 10
+}) {
+  const { bounds, setBounds } = useMapBounds(coordinates);
+  const { zoomLevel, setZoomLevel } = useZoomLevel(zoom || DEFAULT_ZOOM);
+  const { clusters, supercluster } = useClusters(coordinates, bounds, zoomLevel);
+  const mapCenter = coordinates && coordinates.length > 0 ? getCenterForCoordinates(coordinates) : position || DEFAULT_POSITION;
+  const mapZoom = coordinates && coordinates.length > 1 ? getZoomForCoordinates(coordinates, zoom) : position ? zoom : DEFAULT_ZOOM;
+  return /* @__PURE__ */ React.createElement(APIProvider, { apiKey }, /* @__PURE__ */ React.createElement(
+    MapContent,
+    {
+      mapId,
+      mapCenter,
+      mapZoom,
+      position,
+      coordinates,
+      clusters,
+      supercluster,
+      onPinHover,
+      onPinClick,
+      focusPoint,
+      radiusMiles,
+      className,
+      setBounds,
+      setZoomLevel
+    }
+  ));
+}
+export {
+  MapComponent
+};
+//# sourceMappingURL=MapComponent.js.map

package/dist/components/ui/Map/MapComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/Map/MapComponent.tsx","../../../../src/components/ui/Map/constants.ts","../../../../src/components/ui/Map/hooks.ts","../../../../src/components/ui/Map/utils.ts","../../../../src/components/ui/Map/clustering.ts","../../../../src/components/ui/Map/MapContent.tsx","../../../../src/components/ui/Map/ClusterMarker.tsx","../../../../src/components/ui/Map/FocusCircle.tsx","../../../../src/components/ui/Map/IndividualMarker.tsx","../../../../src/lib/utils.ts"],"sourcesContent":["'use client'\n\nimport { APIProvider } from '@vis.gl/react-google-maps'\n\nimport { DEFAULT_POSITION, DEFAULT_ZOOM } from '@/components/ui/Map/constants'\nimport { useClusters, useMapBounds, useZoomLevel } from '@/components/ui/Map/hooks'\nimport { MapContent } from '@/components/ui/Map/MapContent'\nimport type { MapComponentProps, PinData } from '@/components/ui/Map/types'\nimport { getCenterForCoordinates, getZoomForCoordinates } from '@/components/ui/Map/utils'\n\nexport function MapComponent<T = PinData>({\n  apiKey,\n  mapId,\n  position,\n  coordinates,\n  onPinHover,\n  onPinClick,\n  focusPoint,\n  radiusMiles,\n  className,\n  zoom = 10,\n}: Readonly<MapComponentProps<T>>) {\n  const { bounds, setBounds } = useMapBounds(coordinates)\n  const { zoomLevel, setZoomLevel } = useZoomLevel(zoom || DEFAULT_ZOOM)\n  const { clusters, supercluster } = useClusters(coordinates, bounds, zoomLevel)\n\n  const mapCenter =\n    coordinates && coordinates.length > 0\n      ? getCenterForCoordinates(coordinates)\n      : position || DEFAULT_POSITION\n\n  const mapZoom =\n    coordinates && coordinates.length > 1\n      ? getZoomForCoordinates(coordinates, zoom)\n      : position\n        ? zoom\n        : DEFAULT_ZOOM\n\n  return (\n    <APIProvider apiKey={apiKey}>\n      <MapContent\n        mapId={mapId}\n        mapCenter={mapCenter}\n        mapZoom={mapZoom}\n        position={position}\n        coordinates={coordinates}\n        clusters={clusters}\n        supercluster={supercluster}\n        onPinHover={onPinHover}\n        onPinClick={onPinClick}\n        focusPoint={focusPoint}\n        radiusMiles={radiusMiles}\n        className={className}\n        setBounds={setBounds}\n        setZoomLevel={setZoomLevel}\n      />\n    </APIProvider>\n  )\n}\n","export const DEFAULT_POSITION = { lat: 40.715021, lng: -74.00459 }\nexport const DEFAULT_ZOOM = 10\nexport const CLUSTER_PIN_SCALE = 1.5\nexport const CLUSTER_DISTANCE_THRESHOLD = 0.001\n\nexport const PIN_COLORS = {\n  background: '#0B5441',\n  borderColor: '#EBFDF1',\n  glyphColor: '#D4F500',\n} as const\n\nexport const FOCUS_CIRCLE_STYLES = {\n  strokeColor: '#0B5441',\n  strokeOpacity: 0.8,\n  strokeWeight: 2,\n  fillColor: '#0B5441',\n  fillOpacity: 0.1,\n  clickable: false,\n  zIndex: 1,\n} as const\n\nexport const CLUSTERING_CONFIG = {\n  radius: 60,\n  maxZoom: 16,\n  minPoints: 2,\n} as const\n","import { useMemo, useState } from 'react'\nimport useSupercluster from 'use-supercluster'\n\nimport { convertCoordinatesToGeoJSON } from '@/components/ui/Map/clustering'\nimport { CLUSTERING_CONFIG } from '@/components/ui/Map/constants'\nimport type { Coordinate, PinData } from '@/components/ui/Map/types'\n\nexport function useMapBounds<T = PinData>(_coordinates?: Coordinate<T>[]) {\n  const [bounds, setBounds] = useState<[[number, number], [number, number]]>([\n    [-180, -85],\n    [180, 85],\n  ])\n\n  // Use global bounds for stability - let the map handle the actual bounds\n  // This prevents constant recalculation that causes clustering instability\n  return { bounds, setBounds }\n}\n\nexport function useZoomLevel(initialZoom: number) {\n  const [zoomLevel, setZoomLevel] = useState(initialZoom)\n  return { zoomLevel, setZoomLevel }\n}\n\nexport function useClusters<T = PinData>(\n  coordinates?: Coordinate<T>[],\n  bounds?: [[number, number], [number, number]],\n  zoomLevel?: number\n) {\n  const points = useMemo(() => {\n    if (!coordinates) return []\n    return convertCoordinatesToGeoJSON<T>(coordinates)\n  }, [coordinates])\n\n  const { clusters, supercluster } = useSupercluster({\n    points,\n    bounds: [-180, -85, 180, 85], // Use global bounds for consistency\n    zoom: zoomLevel || 10,\n    options: CLUSTERING_CONFIG,\n  })\n\n  return { clusters, supercluster }\n}\n","import { CLUSTER_DISTANCE_THRESHOLD, DEFAULT_POSITION } from '@/components/ui/Map/constants'\nimport type { Coordinate, PinData } from '@/components/ui/Map/types'\n\nexport function getCenterForCoordinates<T = PinData>(coords: Coordinate<T>[]): Coordinate<T> {\n  if (coords.length === 0) return DEFAULT_POSITION as Coordinate<T>\n\n  const avgLat = coords.reduce((sum, coord) => sum + coord.lat, 0) / coords.length\n  const avgLng = coords.reduce((sum, coord) => sum + coord.lng, 0) / coords.length\n\n  return { lat: avgLat, lng: avgLng }\n}\n\nexport function getZoomForCoordinates<T = PinData>(\n  coords: Coordinate<T>[],\n  defaultZoom: number\n): number {\n  if (coords.length <= 1) return defaultZoom\n\n  const lats = coords.map((coord) => coord.lat)\n  const lngs = coords.map((coord) => coord.lng)\n\n  const latDiff = Math.max(...lats) - Math.min(...lats)\n  const lngDiff = Math.max(...lngs) - Math.min(...lngs)\n  const maxDiff = Math.max(latDiff, lngDiff)\n\n  if (maxDiff > 0.1) return 8\n  if (maxDiff > 0.05) return 10\n  if (maxDiff > 0.01) return 12\n  return 14\n}\n\nexport function getClusteringRadius(zoom: number): number {\n  if (zoom <= 8) return 200\n  if (zoom <= 12) return 150\n  return 100\n}\n\nexport function filterClusterCoordinates<T = PinData>(\n  coordinates: Coordinate<T>[],\n  clusterLat: number,\n  clusterLng: number\n): Coordinate<T>[] {\n  return coordinates.filter((coord) => {\n    const latDiff = Math.abs(coord.lat - clusterLat)\n    const lngDiff = Math.abs(coord.lng - clusterLng)\n    const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff)\n    return distance < CLUSTER_DISTANCE_THRESHOLD\n  })\n}\n\nexport function calculateDistance<T = PinData>(\n  coord1: Coordinate<T>,\n  coord2: Coordinate<T>\n): number {\n  const latDiff = Math.abs(coord1.lat - coord2.lat)\n  const lngDiff = Math.abs(coord1.lng - coord2.lng)\n  return Math.sqrt(latDiff * latDiff + lngDiff * lngDiff)\n}\n","import { CLUSTER_DISTANCE_THRESHOLD } from '@/components/ui/Map/constants'\nimport type { ClusterFeature, Coordinate, PinData } from '@/components/ui/Map/types'\nimport { calculateDistance } from '@/components/ui/Map/utils'\n\nexport function convertCoordinatesToGeoJSON<T = PinData>(coordinates: Coordinate<T>[]) {\n  return coordinates.map((coord, index) => ({\n    type: 'Feature' as const,\n    properties: {\n      cluster: false,\n      pointId: index,\n      data: coord.data,\n    },\n    geometry: {\n      type: 'Point' as const,\n      coordinates: [coord.lng, coord.lat],\n    },\n  }))\n}\n\nexport function createManualClusters<T = PinData>(\n  coordinates: Coordinate<T>[]\n): ClusterFeature<T>[] {\n  if (!coordinates || coordinates.length === 0) return []\n\n  const clusters: ClusterFeature<T>[] = []\n  const processed = new Set<number>()\n\n  coordinates.forEach((coord, index) => {\n    if (processed.has(index)) return\n\n    const nearby: number[] = [index]\n    coordinates.forEach((otherCoord, otherIndex) => {\n      if (otherIndex === index || processed.has(otherIndex)) return\n\n      const distance = calculateDistance(coord, otherCoord)\n\n      if (distance < CLUSTER_DISTANCE_THRESHOLD) {\n        nearby.push(otherIndex)\n      }\n    })\n\n    if (nearby.length >= 2) {\n      clusters.push({\n        type: 'Feature' as const,\n        properties: {\n          cluster: true,\n          point_count: nearby.length,\n        },\n        geometry: {\n          type: 'Point' as const,\n          coordinates: [coord.lng, coord.lat],\n        },\n        id: clusters.length,\n      })\n\n      nearby.forEach((i) => processed.add(i))\n    } else {\n      clusters.push({\n        type: 'Feature' as const,\n        properties: {\n          cluster: false,\n          pointId: index,\n          data: coord.data,\n        },\n        geometry: {\n          type: 'Point' as const,\n          coordinates: [coord.lng, coord.lat],\n        },\n        id: clusters.length,\n      })\n      processed.add(index)\n    }\n  })\n\n  return clusters\n}\n","'use client'\n\nimport { AdvancedMarker, Map, Pin, useMap, useMapsLibrary } from '@vis.gl/react-google-maps'\nimport { useCallback } from 'react'\n\nimport { ClusterMarker } from '@/components/ui/Map/ClusterMarker'\nimport { PIN_COLORS } from '@/components/ui/Map/constants'\nimport { FocusCircle } from '@/components/ui/Map/FocusCircle'\nimport { IndividualMarker } from '@/components/ui/Map/IndividualMarker'\nimport type { MapContentProps, PinData } from '@/components/ui/Map/types'\nimport { cn } from '@/lib/utils'\n\nexport function MapContent<T = PinData>({\n  mapId,\n  mapCenter,\n  mapZoom,\n  position,\n  coordinates,\n  clusters,\n  supercluster,\n  onPinHover,\n  onPinClick,\n  focusPoint,\n  radiusMiles,\n  className,\n  setBounds,\n  setZoomLevel,\n}: MapContentProps<T>) {\n  const map = useMap()\n  const mapsLibrary = useMapsLibrary('maps')\n\n  const zoomToLevel = useCallback(\n    (newZoom: number) => {\n      if (map) {\n        map.setZoom(newZoom)\n      }\n    },\n    [map]\n  )\n\n  const handleBoundsChanged = (e: {\n    detail: { bounds: { south: number; west: number; north: number; east: number } }\n  }) => {\n    if (e.detail.bounds) {\n      const bounds = e.detail.bounds\n      setBounds([\n        [bounds.south, bounds.west],\n        [bounds.north, bounds.east],\n      ])\n    }\n  }\n\n  const handleZoomChanged = (e: { detail: { zoom: number } }) => {\n    if (e.detail.zoom) {\n      setZoomLevel(e.detail.zoom)\n    }\n  }\n\n  const handleCameraChanged = (e: { detail: { zoom: number } }) => {\n    if (e.detail.zoom) {\n      setZoomLevel(e.detail.zoom)\n    }\n  }\n\n  return (\n    <div className={cn('relative h-screen max-w-full', className)}>\n      <Map\n        defaultZoom={mapZoom}\n        defaultCenter={mapCenter}\n        mapId={mapId}\n        keyboardShortcuts={true}\n        disableDefaultUI={true}\n        zoomControl={true}\n        onBoundsChanged={handleBoundsChanged}\n        onZoomChanged={handleZoomChanged}\n        onCameraChanged={handleCameraChanged}\n      >\n        {position && !coordinates && (\n          <AdvancedMarker position={position}>\n            <Pin {...PIN_COLORS} />\n          </AdvancedMarker>\n        )}\n\n        {coordinates &&\n          clusters.map((cluster) => {\n            const { cluster: isCluster } = cluster.properties\n\n            if (isCluster) {\n              return (\n                <ClusterMarker\n                  key={`cluster-${cluster.id}`}\n                  cluster={cluster}\n                  coordinates={coordinates}\n                  onPinClick={onPinClick}\n                  onPinHover={onPinHover}\n                  zoomToLevel={zoomToLevel}\n                  supercluster={supercluster}\n                />\n              )\n            }\n\n            const originalPoint = coordinates[cluster.properties.pointId!]\n            return (\n              <IndividualMarker\n                key={`marker-${cluster.properties.pointId}`}\n                coordinate={originalPoint}\n                onPinClick={onPinClick}\n                onPinHover={onPinHover}\n              />\n            )\n          })}\n\n        {coordinates &&\n          clusters.length === 0 &&\n          coordinates.map((coord, index) => (\n            <IndividualMarker\n              key={`fallback-${index}`}\n              coordinate={coord}\n              onPinClick={onPinClick}\n              onPinHover={onPinHover}\n            />\n          ))}\n\n        {focusPoint && radiusMiles && (\n          <FocusCircle\n            focusPoint={focusPoint}\n            radiusMiles={radiusMiles}\n            map={map}\n            mapsLibrary={mapsLibrary}\n          />\n        )}\n      </Map>\n    </div>\n  )\n}\n","'use client'\n\nimport { AdvancedMarker } from '@vis.gl/react-google-maps'\n\nimport type { ClusterMarkerProps, PinData } from '@/components/ui/Map/types'\nimport { filterClusterCoordinates } from '@/components/ui/Map/utils'\n\nexport function ClusterMarker<T = PinData>({\n  cluster,\n  coordinates,\n  onPinClick,\n  onPinHover,\n  zoomToLevel,\n  supercluster,\n}: ClusterMarkerProps<T>) {\n  const [lng, lat] = cluster.geometry.coordinates\n  const { point_count: pointCount } = cluster.properties\n\n  const handleClick = () => {\n    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng)\n    onPinClick?.(clusterCoordinates)\n\n    const expansionZoom = supercluster.getClusterExpansionZoom(cluster.id)\n    zoomToLevel(expansionZoom)\n  }\n\n  const handleMouseEnter = () => {\n    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng)\n    onPinHover?.(clusterCoordinates)\n  }\n\n  const handleMouseLeave = () => onPinHover?.(null)\n\n  return (\n    <AdvancedMarker\n      key={`cluster-${cluster.id}`}\n      position={{ lat, lng }}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div className=\"relative flex items-center justify-center\" id=\"CLUSTER_MARKER\">\n        <div className=\"flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-red-500 text-sm font-bold text-white shadow-lg\">\n          {pointCount || '?'}\n        </div>\n      </div>\n    </AdvancedMarker>\n  )\n}\n","'use client'\n\nimport { useEffect, useMemo, useRef } from 'react'\n\nimport { FOCUS_CIRCLE_STYLES } from '@/components/ui/Map/constants'\nimport type { FocusCircleProps, PinData } from '@/components/ui/Map/types'\n\nexport function FocusCircle<T = PinData>({\n  focusPoint,\n  radiusMiles,\n  map,\n  mapsLibrary,\n}: FocusCircleProps<T>) {\n  const circleRef = useRef<google.maps.Circle | null>(null)\n\n  const circleProps = useMemo(() => {\n    if (!focusPoint || !radiusMiles) return null\n    return {\n      center: focusPoint,\n      radius: radiusMiles * 1609.34,\n    }\n  }, [focusPoint, radiusMiles])\n\n  useEffect(() => {\n    if (!map || !mapsLibrary || !circleProps) {\n      return\n    }\n\n    if (!circleRef.current) {\n      const circle = new google.maps.Circle({\n        center: circleProps.center,\n        radius: circleProps.radius,\n        ...FOCUS_CIRCLE_STYLES,\n        map: map,\n      })\n\n      circleRef.current = circle\n    } else {\n      circleRef.current.setCenter(circleProps.center)\n      circleRef.current.setRadius(circleProps.radius)\n    }\n  }, [map, mapsLibrary, circleProps])\n\n  useEffect(() => {\n    return () => {\n      if (circleRef.current) {\n        circleRef.current.setMap(null)\n        circleRef.current = null\n      }\n    }\n  }, [])\n\n  return null\n}\n","'use client'\n\nimport { AdvancedMarker, Pin } from '@vis.gl/react-google-maps'\n\nimport { PIN_COLORS } from '@/components/ui/Map/constants'\nimport type { IndividualMarkerProps, PinData } from '@/components/ui/Map/types'\n\nexport function IndividualMarker<T = PinData>({\n  coordinate,\n  onPinClick,\n  onPinHover,\n}: IndividualMarkerProps<T>) {\n  const handleMouseEnter = () => onPinHover?.(coordinate)\n  const handleMouseLeave = () => onPinHover?.(null)\n  const handleClick = () => onPinClick?.(coordinate)\n\n  return (\n    <AdvancedMarker\n      position={{ lat: coordinate.lat, lng: coordinate.lng }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onClick={handleClick}\n    >\n      <Pin {...PIN_COLORS} />\n    </AdvancedMarker>\n  )\n}\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":"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","names":["AdvancedMarker","Pin","useMemo","useMemo","AdvancedMarker","AdvancedMarker","AdvancedMarker","Pin"]}

package/dist/components/ui/Map/MapContent.cjs

@@ -0,0 +1,279 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/Map/MapContent.tsx
+var MapContent_exports = {};
+__export(MapContent_exports, {
+  MapContent: () => MapContent
+});
+module.exports = __toCommonJS(MapContent_exports);
+var import_react_google_maps3 = require("@vis.gl/react-google-maps");
+var import_react2 = require("react");
+
+// src/components/ui/Map/ClusterMarker.tsx
+var import_react_google_maps = require("@vis.gl/react-google-maps");
+
+// src/components/ui/Map/constants.ts
+var CLUSTER_DISTANCE_THRESHOLD = 1e-3;
+var PIN_COLORS = {
+  background: "#0B5441",
+  borderColor: "#EBFDF1",
+  glyphColor: "#D4F500"
+};
+var FOCUS_CIRCLE_STYLES = {
+  strokeColor: "#0B5441",
+  strokeOpacity: 0.8,
+  strokeWeight: 2,
+  fillColor: "#0B5441",
+  fillOpacity: 0.1,
+  clickable: false,
+  zIndex: 1
+};
+
+// src/components/ui/Map/utils.ts
+function filterClusterCoordinates(coordinates, clusterLat, clusterLng) {
+  return coordinates.filter((coord) => {
+    const latDiff = Math.abs(coord.lat - clusterLat);
+    const lngDiff = Math.abs(coord.lng - clusterLng);
+    const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff);
+    return distance < CLUSTER_DISTANCE_THRESHOLD;
+  });
+}
+
+// src/components/ui/Map/ClusterMarker.tsx
+function ClusterMarker({
+  cluster,
+  coordinates,
+  onPinClick,
+  onPinHover,
+  zoomToLevel,
+  supercluster
+}) {
+  const [lng, lat] = cluster.geometry.coordinates;
+  const { point_count: pointCount } = cluster.properties;
+  const handleClick = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinClick?.(clusterCoordinates);
+    const expansionZoom = supercluster.getClusterExpansionZoom(cluster.id);
+    zoomToLevel(expansionZoom);
+  };
+  const handleMouseEnter = () => {
+    const clusterCoordinates = filterClusterCoordinates(coordinates, lat, lng);
+    onPinHover?.(clusterCoordinates);
+  };
+  const handleMouseLeave = () => onPinHover?.(null);
+  return /* @__PURE__ */ React.createElement(
+    import_react_google_maps.AdvancedMarker,
+    {
+      key: `cluster-${cluster.id}`,
+      position: { lat, lng },
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "relative flex items-center justify-center", id: "CLUSTER_MARKER" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-red-500 text-sm font-bold text-white shadow-lg" }, pointCount || "?"))
+  );
+}
+
+// src/components/ui/Map/FocusCircle.tsx
+var import_react = require("react");
+function FocusCircle({
+  focusPoint,
+  radiusMiles,
+  map,
+  mapsLibrary
+}) {
+  const circleRef = (0, import_react.useRef)(null);
+  const circleProps = (0, import_react.useMemo)(() => {
+    if (!focusPoint || !radiusMiles) return null;
+    return {
+      center: focusPoint,
+      radius: radiusMiles * 1609.34
+    };
+  }, [focusPoint, radiusMiles]);
+  (0, import_react.useEffect)(() => {
+    if (!map || !mapsLibrary || !circleProps) {
+      return;
+    }
+    if (!circleRef.current) {
+      const circle = new google.maps.Circle({
+        center: circleProps.center,
+        radius: circleProps.radius,
+        ...FOCUS_CIRCLE_STYLES,
+        map
+      });
+      circleRef.current = circle;
+    } else {
+      circleRef.current.setCenter(circleProps.center);
+      circleRef.current.setRadius(circleProps.radius);
+    }
+  }, [map, mapsLibrary, circleProps]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (circleRef.current) {
+        circleRef.current.setMap(null);
+        circleRef.current = null;
+      }
+    };
+  }, []);
+  return null;
+}
+
+// src/components/ui/Map/IndividualMarker.tsx
+var import_react_google_maps2 = require("@vis.gl/react-google-maps");
+function IndividualMarker({
+  coordinate,
+  onPinClick,
+  onPinHover
+}) {
+  const handleMouseEnter = () => onPinHover?.(coordinate);
+  const handleMouseLeave = () => onPinHover?.(null);
+  const handleClick = () => onPinClick?.(coordinate);
+  return /* @__PURE__ */ React.createElement(
+    import_react_google_maps2.AdvancedMarker,
+    {
+      position: { lat: coordinate.lat, lng: coordinate.lng },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(import_react_google_maps2.Pin, { ...PIN_COLORS })
+  );
+}
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/Map/MapContent.tsx
+function MapContent({
+  mapId,
+  mapCenter,
+  mapZoom,
+  position,
+  coordinates,
+  clusters,
+  supercluster,
+  onPinHover,
+  onPinClick,
+  focusPoint,
+  radiusMiles,
+  className,
+  setBounds,
+  setZoomLevel
+}) {
+  const map = (0, import_react_google_maps3.useMap)();
+  const mapsLibrary = (0, import_react_google_maps3.useMapsLibrary)("maps");
+  const zoomToLevel = (0, import_react2.useCallback)(
+    (newZoom) => {
+      if (map) {
+        map.setZoom(newZoom);
+      }
+    },
+    [map]
+  );
+  const handleBoundsChanged = (e) => {
+    if (e.detail.bounds) {
+      const bounds = e.detail.bounds;
+      setBounds([
+        [bounds.south, bounds.west],
+        [bounds.north, bounds.east]
+      ]);
+    }
+  };
+  const handleZoomChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  const handleCameraChanged = (e) => {
+    if (e.detail.zoom) {
+      setZoomLevel(e.detail.zoom);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("relative h-screen max-w-full", className) }, /* @__PURE__ */ React.createElement(
+    import_react_google_maps3.Map,
+    {
+      defaultZoom: mapZoom,
+      defaultCenter: mapCenter,
+      mapId,
+      keyboardShortcuts: true,
+      disableDefaultUI: true,
+      zoomControl: true,
+      onBoundsChanged: handleBoundsChanged,
+      onZoomChanged: handleZoomChanged,
+      onCameraChanged: handleCameraChanged
+    },
+    position && !coordinates && /* @__PURE__ */ React.createElement(import_react_google_maps3.AdvancedMarker, { position }, /* @__PURE__ */ React.createElement(import_react_google_maps3.Pin, { ...PIN_COLORS })),
+    coordinates && clusters.map((cluster) => {
+      const { cluster: isCluster } = cluster.properties;
+      if (isCluster) {
+        return /* @__PURE__ */ React.createElement(
+          ClusterMarker,
+          {
+            key: `cluster-${cluster.id}`,
+            cluster,
+            coordinates,
+            onPinClick,
+            onPinHover,
+            zoomToLevel,
+            supercluster
+          }
+        );
+      }
+      const originalPoint = coordinates[cluster.properties.pointId];
+      return /* @__PURE__ */ React.createElement(
+        IndividualMarker,
+        {
+          key: `marker-${cluster.properties.pointId}`,
+          coordinate: originalPoint,
+          onPinClick,
+          onPinHover
+        }
+      );
+    }),
+    coordinates && clusters.length === 0 && coordinates.map((coord, index) => /* @__PURE__ */ React.createElement(
+      IndividualMarker,
+      {
+        key: `fallback-${index}`,
+        coordinate: coord,
+        onPinClick,
+        onPinHover
+      }
+    )),
+    focusPoint && radiusMiles && /* @__PURE__ */ React.createElement(
+      FocusCircle,
+      {
+        focusPoint,
+        radiusMiles,
+        map,
+        mapsLibrary
+      }
+    )
+  ));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapContent
+});
+//# sourceMappingURL=MapContent.cjs.map