@next-degree/pickle-shared-js 0.13.1 → 0.13.5

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

@@ -1,401 +1,22 @@
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/components/ui/Map/MapComponent.tsx
-var MapComponent_exports = {};
-__export(MapComponent_exports, {
-  MapComponent: () => MapComponent
-});
-module.exports = __toCommonJS(MapComponent_exports);
-var import_react_google_maps4 = require("@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
-var import_react = require("react");
-var import_use_supercluster = __toESM(require("use-supercluster"), 1);
-
-// 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] = (0, import_react.useState)([
-    [-180, -85],
-    [180, 85]
-  ]);
-  return { bounds, setBounds };
-}
-function useZoomLevel(initialZoom) {
-  const [zoomLevel, setZoomLevel] = (0, import_react.useState)(initialZoom);
-  return { zoomLevel, setZoomLevel };
-}
-function useClusters(coordinates, bounds, zoomLevel) {
-  const points = (0, import_react.useMemo)(() => {
-    if (!coordinates) return [];
-    return convertCoordinatesToGeoJSON(coordinates);
-  }, [coordinates]);
-  const { clusters, supercluster } = (0, import_use_supercluster.default)({
-    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
-var import_react_google_maps3 = require("@vis.gl/react-google-maps");
-var import_react3 = require("react");
-
-// src/components/ui/Map/ClusterMarker.tsx
-var import_react_google_maps = require("@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(
-    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_react2 = require("react");
-function FocusCircle({
-  focusPoint,
-  radiusMiles,
-  map,
-  mapsLibrary
-}) {
-  const circleRef = (0, import_react2.useRef)(null);
-  const circleProps = (0, import_react2.useMemo)(() => {
-    if (!focusPoint || !radiusMiles) return null;
-    return {
-      center: focusPoint,
-      radius: radiusMiles * 1609.34
-    };
-  }, [focusPoint, radiusMiles]);
-  (0, import_react2.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_react2.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 })
-  );
-}
+var chunkMPWBYIWU_cjs = require('../../../chunk-MPWBYIWU.cjs');
+require('../../../chunk-MTNMKBY6.cjs');
+require('../../../chunk-PSRWV7UW.cjs');
+require('../../../chunk-APHLSON7.cjs');
+require('../../../chunk-SKMP4FO7.cjs');
+require('../../../chunk-EBKY3MJH.cjs');
+require('../../../chunk-4JSV7KA3.cjs');
+require('../../../chunk-DU5OQA67.cjs');
+require('../../../chunk-NLGWU2KI.cjs');
+require('../../../chunk-MGWZXPMF.cjs');
+require('../../../chunk-Q7SFCCGT.cjs');
 
-// 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_react3.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
-      }
-    )
-  ));
-}
 
-// 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(import_react_google_maps4.APIProvider, { apiKey }, /* @__PURE__ */ React.createElement(
-    MapContent,
-    {
-      mapId,
-      mapCenter,
-      mapZoom,
-      position,
-      coordinates,
-      clusters,
-      supercluster,
-      onPinHover,
-      onPinClick,
-      focusPoint,
-      radiusMiles,
-      className,
-      setBounds,
-      setZoomLevel
-    }
-  ));
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  MapComponent
+Object.defineProperty(exports, "MapComponent", {
+  enumerable: true,
+  get: function () { return chunkMPWBYIWU_cjs.MapComponent; }
 });
+//# sourceMappingURL=MapComponent.cjs.map
 //# sourceMappingURL=MapComponent.cjs.map

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

@@ -1 +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":["import_react_google_maps","useSupercluster","import_react_google_maps","import_react","import_react","import_react_google_maps"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"MapComponent.cjs"}

package/dist/components/ui/Map/MapComponent.d.cts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PinData, MapComponentProps } from './types.cjs';
 
-declare function MapComponent<T = PinData>({ apiKey, mapId, position, coordinates, onPinHover, onPinClick, focusPoint, radiusMiles, className, zoom, }: Readonly<MapComponentProps<T>>): React.JSX.Element;
+declare function MapComponent<T = PinData>({ apiKey, mapId, position, coordinates, onPinHover, onPinClick, focusPoint, radiusMiles, className, zoom, }: Readonly<MapComponentProps<T>>): react_jsx_runtime.JSX.Element;
 
 export { MapComponent };

package/dist/components/ui/Map/MapComponent.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PinData, MapComponentProps } from './types.js';
 
-declare function MapComponent<T = PinData>({ apiKey, mapId, position, coordinates, onPinHover, onPinClick, focusPoint, radiusMiles, className, zoom, }: Readonly<MapComponentProps<T>>): React.JSX.Element;
+declare function MapComponent<T = PinData>({ apiKey, mapId, position, coordinates, onPinHover, onPinClick, focusPoint, radiusMiles, className, zoom, }: Readonly<MapComponentProps<T>>): react_jsx_runtime.JSX.Element;
 
 export { MapComponent };