mehdi-akbari-map 1.0.3 → 1.0.4

package/dist/components/InteractiveMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveMap.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAS,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAuE7C,CAAC"}
+{"version":3,"file":"InteractiveMap.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAS,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAiF7C,CAAC"}

package/dist/components/Map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../src/components/Map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAoB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAO3D,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAsJ3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../src/components/Map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAoB,QAAQ,EAAE,MAAM,UAAU,CAAC;AAK3D,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAkI3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/StoreCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoreCard.d.ts","sourceRoot":"","sources":["../../src/components/StoreCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwC9C,CAAC"}
+{"version":3,"file":"StoreCard.d.ts","sourceRoot":"","sources":["../../src/components/StoreCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyC9C,CAAC"}

package/dist/index.cjs

@@ -141,7 +141,7 @@ var Map = ({
     return () => {
       if (map) map.remove();
     };
-  }, [mapLib]);
+  }, [mapLib, options, onMapLoad]);
   (0, import_react.useEffect)(() => {
     if (!mapInstance || !selectedMarkerId) return;
     const selectedStore = markers.find((m) => m.id === selectedMarkerId);
@@ -170,10 +170,6 @@ var Map = ({
       let el;
       if (isCluster) {
         el = createClusterElement(count);
-        const newMarker2 = new mapLib.Marker({
-          element: el,
-          anchor: "center"
-        }).setLngLat([lng, lat]).addTo(mapInstance);
         el.onclick = (e) => {
           e.stopPropagation();
           const expansionZoom = Math.min(
@@ -195,7 +191,10 @@ var Map = ({
         });
         el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);
       }
-      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? "center" : "bottom" }).setLngLat([lng, lat]).addTo(mapInstance);
+      const newMarker = new mapLib.Marker({
+        element: el,
+        anchor: isCluster ? "center" : "bottom"
+      }).setLngLat([lng, lat]).addTo(mapInstance);
       markersRef.current.push(newMarker);
     });
   }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);
@@ -219,11 +218,7 @@ var Map = ({
     "div",
     {
       ref: mapContainerRef,
-      style: {
-        width: "100%",
-        height: "100%",
-        backfaceVisibility: "hidden"
-      }
+      style: { width: "100%", height: "100%", backfaceVisibility: "hidden" }
     }
   ) });
 };
@@ -238,6 +233,7 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
     {
       className: `store-card ${isSelected ? "active" : ""}`,
       onClick: onSelect,
+      "data-id": store.id,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-card-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
@@ -251,9 +247,9 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "store-desc", children: store.desc }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "action-buttons", children: [
-          store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u062A\u0645\u0627\u0633" }) }),
-          store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
+          store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u062A\u0645\u0627\u0633" }) }),
+          store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
         ] }) }) })
       ]
     }
@@ -265,12 +261,25 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InteractiveMap = (props) => {
   const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
   const [mapInstance, setMapInstance] = (0, import_react2.useState)(null);
+  const sliderRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 1024);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (isMobile && props.selectedMarkerId && sliderRef.current) {
+      const selectedCard = sliderRef.current.querySelector(`[data-id="${props.selectedMarkerId}"]`);
+      if (selectedCard) {
+        selectedCard.scrollIntoView({
+          behavior: "smooth",
+          inline: "center",
+          block: "nearest"
+        });
+      }
+    }
+  }, [props.selectedMarkerId, isMobile]);
   const handleStoreSelect = (store, index) => {
     props.onMarkerClick?.(store, index, mapInstance);
   };
@@ -300,7 +309,7 @@ var InteractiveMap = (props) => {
         }
       ),
       props.productName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "product-badge", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: props.productName }) }),
-      isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobile-slider", children: safeMarkers.map((store, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobile-slider", ref: sliderRef, children: safeMarkers.map((store, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         StoreCard,
         {
           store,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\r\nimport './styles.css';\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport { default as RawMap } from './components/Map';\r\n\r\n\r\nexport type {\r\n  MapProps,\r\n  MapOptions,\r\n  MarkerData,\r\n  Store,\r\n  MapboxMap,\r\n  LngLatLike,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  // ✅ ذخیره نمونه نقشه برای پاس دادن به کلیک مارکر\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    // ✅ حالا دیگر null نمی‌فرستیم، نمونه واقعی نقشه را می‌فرستیم\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  // اطمینان از اینکه markers همیشه یک آرایه است\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {/* ✅ استفاده از safeMarkers برای جلوگیری از خطای undefined */}\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        {/* ✅ دریافت نمونه نقشه وقتی لود شد */}\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  \r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  \r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    \r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    \r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n    if (isCluster) {\r\n  el = createClusterElement(count);\r\n  \r\n  const newMarker = new mapLib.Marker({ \r\n    element: el, \r\n    anchor: 'center' \r\n  })\r\n    .setLngLat([lng, lat])\r\n    .addTo(mapInstance);\r\n\r\n  el.onclick = (e) => {\r\n    e.stopPropagation(); \r\n    const expansionZoom = Math.min(\r\n      clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n      18\r\n    );\r\n    mapInstance.easeTo({ \r\n      center: [lng, lat], \r\n      zoom: expansionZoom,\r\n      duration: 800 \r\n    });\r\n  };\r\n      } else {\r\n        \r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  \r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n  <div style={{ position: 'relative', ...style }}>\r\n    <div \r\n      ref={mapContainerRef} \r\n      style={{ \r\n        width: '100%', \r\n        height: '100%',\r\n       \r\n        backfaceVisibility: 'hidden' \r\n      }} \r\n    />\r\n  </div>\r\n);\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\">\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\">\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\">\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["import_react","Supercluster","newMarker","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\r\nimport './styles.css';\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport { default as RawMap } from './components/Map';\r\n\r\n\r\nexport type {\r\n  MapProps,\r\n  MapOptions,\r\n  MarkerData,\r\n  Store,\r\n  MapboxMap,\r\n  LngLatLike,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n  const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  // ✅ هماهنگی اسکرول اسلایدر موبایل با مارکر انتخاب شده\r\n  useEffect(() => {\r\n    if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n      const selectedCard = sliderRef.current.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n      if (selectedCard) {\r\n        selectedCard.scrollIntoView({\r\n          behavior: 'smooth',\r\n          inline: 'center',\r\n          block: 'nearest'\r\n        });\r\n      }\r\n    }\r\n  }, [props.selectedMarkerId, isMobile]);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\" ref={sliderRef}>\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib, options, onMapLoad]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n      if (isCluster) {\r\n        el = createClusterElement(count);\r\n        el.onclick = (e) => {\r\n          e.stopPropagation();\r\n          const expansionZoom = Math.min(\r\n            clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n            18\r\n          );\r\n          mapInstance.easeTo({ \r\n            center: [lng, lat], \r\n            zoom: expansionZoom,\r\n            duration: 800 \r\n          });\r\n        };\r\n      } else {\r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ \r\n        element: el, \r\n        anchor: isCluster ? 'center' : 'bottom' \r\n      })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n  return (\r\n    <div style={{ position: 'relative', ...style }}>\r\n      <div \r\n        ref={mapContainerRef} \r\n        style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n      data-id={store.id} // برای پیدا کردن کارت در اسکرول موبایل\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\" onClick={(e) => e.stopPropagation()}>\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\" onClick={(e) => e.stopPropagation()}>\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\" onClick={(e) => e.stopPropagation()}>\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["import_react","Supercluster","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.css

@@ -42,6 +42,7 @@
   cursor: pointer;
   transition: all 0.2s ease;
   border-right: 4px solid transparent;
+  background: #fff;
 }
 .store-card:hover {
   background: #f9fafb;
@@ -71,15 +72,15 @@
 .store-price {
   color: #059669;
   font-weight: 800;
-  font-size: 15px;
+  font-size: 14px;
   background: #ecfdf5;
   padding: 2px 8px;
   border-radius: 6px;
 }
 .store-desc {
-  font-size: 12.5px;
+  font-size: 12px;
   color: #4b5563;
-  line-height: 1.6;
+  line-height: 1.5;
   margin: 8px 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -110,7 +111,7 @@
   border-radius: 8px;
   text-align: center;
   text-decoration: none;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
   color: #fff;
   transition: transform 0.1s, opacity 0.2s;
@@ -160,7 +161,6 @@
   height: 36px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
   cursor: pointer;
-  transition: none;
 }
 .neshan-cluster-marker:hover {
   border-color: #1d4ed8;
@@ -194,8 +194,9 @@
   padding: 0 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  pointer-events: none;
+  pointer-events: auto;
   z-index: 20;
+  align-items: flex-end;
 }
 .is-mobile .mobile-slider::-webkit-scrollbar {
   display: none;
@@ -209,6 +210,8 @@
   pointer-events: auto;
   scroll-snap-align: center;
   border: none;
+  height: auto;
+  flex-shrink: 0;
 }
 .product-badge {
   position: absolute;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.css"],"sourcesContent":["\r\n@import \"@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css\";\r\n\r\n\r\n.map-layout-root {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 100%;\r\n  direction: rtl;\r\n  font-family: inherit;\r\n  overflow: hidden;\r\n}\r\n\r\n\r\n.sidebar {\r\n  width: 350px;\r\n  background: #ffffff;\r\n  border-left: 1px solid #e5e7eb;\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 10;\r\n  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.sidebar-header {\r\n  padding: 20px;\r\n  font-weight: 800;\r\n  font-size: 18px;\r\n  color: #111827;\r\n  border-bottom: 1px solid #f3f4f6;\r\n  background: #fafafa;\r\n}\r\n\r\n.sidebar-list {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  scrollbar-width: thin;\r\n}\r\n\r\n\r\n.map-container {\r\n  flex: 1;\r\n  position: relative;\r\n  background: #f3f4f6;\r\n}\r\n\r\n\r\n.store-card {\r\n  padding: 16px;\r\n  border-bottom: 1px solid #f3f4f6;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  border-right: 4px solid transparent;\r\n}\r\n\r\n.store-card:hover {\r\n  background: #f9fafb;\r\n}\r\n\r\n.store-card.active {\r\n  background: #eff6ff;\r\n  border-right-color: #2563eb;\r\n}\r\n\r\n.store-card-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.store-name {\r\n  margin: 0;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  color: #111827;\r\n}\r\n\r\n.store-city {\r\n  display: block;\r\n  font-size: 12px;\r\n  color: #6b7280;\r\n  margin-top: 2px;\r\n}\r\n\r\n.store-price {\r\n  color: #059669;\r\n  font-weight: 800;\r\n  font-size: 15px;\r\n  background: #ecfdf5;\r\n  padding: 2px 8px;\r\n  border-radius: 6px;\r\n}\r\n\r\n.store-desc {\r\n  font-size: 12.5px;\r\n  color: #4b5563;\r\n  line-height: 1.6;\r\n  margin: 8px 0;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n\r\n.store-details-wrapper {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n}\r\n\r\n.active .store-details-wrapper {\r\n  grid-template-rows: 1fr;\r\n  margin-top: 14px;\r\n}\r\n\r\n.store-details-content {\r\n  min-height: 0;\r\n}\r\n\r\n.action-buttons {\r\n  display: flex;\r\n  gap: 8px;\r\n  padding-bottom: 4px;\r\n}\r\n\r\n.btn {\r\n  flex: 1;\r\n  padding: 10px 5px;\r\n  border-radius: 8px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  transition: transform 0.1s, opacity 0.2s;\r\n}\r\n\r\n.btn:active { transform: scale(0.95); }\r\n.btn-call { background: #2563eb; }\r\n.btn-wa { background: #10b981; }\r\n.btn-route { background: #7c3aed; }\r\n\r\n\r\n.neshan-marker-container {\r\n  pointer-events: auto;\r\n}\r\n\r\n.neshan-marker-body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  transform-origin: bottom center;\r\n}\r\n\r\n.neshan-marker-label {\r\n  background: #2563eb;\r\n  color: #ffffff !important;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  padding: 4px 12px;\r\n  border-radius: 20px;\r\n  margin-top: 6px;\r\n  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);\r\n  border: 2px solid #ffffff;\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n.neshan-cluster-marker {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ffffff;\r\n  border: 3px solid #2563eb;\r\n  border-radius: 50%;\r\n  width: 36px;\r\n  height: 36px;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\r\n  cursor: pointer;\r\n  transition: none;\r\n}\r\n\r\n.neshan-cluster-marker:hover {\r\n  border-color: #1d4ed8;\r\n  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.neshan-cluster-count {\r\n  color: #2563eb;\r\n  font-weight: 900;\r\n  font-size: 16px;\r\n  pointer-events: none; /* جلوگیری از تداخل کلیک با عدد */\r\n}\r\n\r\n\r\n.neshan-marker-selected .neshan-marker-body {\r\n  animation: marker-bounce 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);\r\n  z-index: 100;\r\n}\r\n\r\n@keyframes marker-bounce {\r\n  from { transform: translateY(0) scale(1.1); }\r\n  to { transform: translateY(-12px) scale(1.15); }\r\n}\r\n\r\n\r\n.is-mobile .mobile-slider {\r\n  position: absolute;\r\n  bottom: 24px;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  gap: 12px;\r\n  padding: 0 20px;\r\n  overflow-x: auto;\r\n  scroll-snap-type: x mandatory;\r\n  pointer-events: none;\r\n  z-index: 20;\r\n}\r\n\r\n.is-mobile .mobile-slider::-webkit-scrollbar { display: none; }\r\n\r\n.is-mobile .store-card {\r\n  min-width: 300px;\r\n  max-width: 85vw;\r\n  background: #ffffff;\r\n  border-radius: 16px;\r\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\r\n  pointer-events: auto;\r\n  scroll-snap-align: center;\r\n  border: none;\r\n}\r\n\r\n\r\n.product-badge {\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 20px;\r\n  background: rgba(255, 255, 255, 0.95);\r\n  backdrop-filter: blur(4px);\r\n  padding: 10px 18px;\r\n  border-radius: 12px;\r\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n  font-weight: 800;\r\n  font-size: 14px;\r\n  color: #1f2937;\r\n  z-index: 5;\r\n  border: 1px solid rgba(0, 0, 0, 0.05);\r\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["@import \"@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css\";\r\n\r\n.map-layout-root {\r\n  display: flex;\r\n  width: 100%;\r\n  height: 100%;\r\n  direction: rtl;\r\n  font-family: inherit;\r\n  overflow: hidden;\r\n}\r\n\r\n\r\n.sidebar {\r\n  width: 350px;\r\n  background: #ffffff;\r\n  border-left: 1px solid #e5e7eb;\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 10;\r\n  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.sidebar-header {\r\n  padding: 20px;\r\n  font-weight: 800;\r\n  font-size: 18px;\r\n  color: #111827;\r\n  border-bottom: 1px solid #f3f4f6;\r\n  background: #fafafa;\r\n}\r\n\r\n.sidebar-list {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  scrollbar-width: thin;\r\n}\r\n\r\n\r\n.map-container {\r\n  flex: 1;\r\n  position: relative;\r\n  background: #f3f4f6;\r\n}\r\n\r\n\r\n.store-card {\r\n  padding: 16px;\r\n  border-bottom: 1px solid #f3f4f6;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  border-right: 4px solid transparent;\r\n  background: #fff;\r\n}\r\n\r\n.store-card:hover {\r\n  background: #f9fafb;\r\n}\r\n\r\n.store-card.active {\r\n  background: #eff6ff;\r\n  border-right-color: #2563eb;\r\n}\r\n\r\n.store-card-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.store-name {\r\n  margin: 0;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  color: #111827;\r\n}\r\n\r\n.store-city {\r\n  display: block;\r\n  font-size: 12px;\r\n  color: #6b7280;\r\n  margin-top: 2px;\r\n}\r\n\r\n.store-price {\r\n  color: #059669;\r\n  font-weight: 800;\r\n  font-size: 14px;\r\n  background: #ecfdf5;\r\n  padding: 2px 8px;\r\n  border-radius: 6px;\r\n}\r\n\r\n.store-desc {\r\n  font-size: 12px;\r\n  color: #4b5563;\r\n  line-height: 1.5;\r\n  margin: 8px 0;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n\r\n.store-details-wrapper {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  overflow: hidden;\r\n}\r\n\r\n.active .store-details-wrapper {\r\n  grid-template-rows: 1fr;\r\n  margin-top: 14px;\r\n}\r\n\r\n.store-details-content {\r\n  min-height: 0;\r\n}\r\n\r\n.action-buttons {\r\n  display: flex;\r\n  gap: 8px;\r\n  padding-bottom: 4px;\r\n}\r\n\r\n.btn {\r\n  flex: 1;\r\n  padding: 10px 5px;\r\n  border-radius: 8px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  transition: transform 0.1s, opacity 0.2s;\r\n}\r\n\r\n.btn:active { transform: scale(0.95); }\r\n.btn-call { background: #2563eb; }\r\n.btn-wa { background: #10b981; }\r\n.btn-route { background: #7c3aed; }\r\n\r\n\r\n.neshan-marker-container {\r\n  pointer-events: auto;\r\n}\r\n\r\n.neshan-marker-body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  transform-origin: bottom center;\r\n}\r\n\r\n.neshan-marker-label {\r\n  background: #2563eb;\r\n  color: #ffffff !important;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  padding: 4px 12px;\r\n  border-radius: 20px;\r\n  margin-top: 6px;\r\n  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);\r\n  border: 2px solid #ffffff;\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n.neshan-cluster-marker {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ffffff;\r\n  border: 3px solid #2563eb;\r\n  border-radius: 50%;\r\n  width: 36px;\r\n  height: 36px;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);\r\n  cursor: pointer;\r\n}\r\n\r\n.neshan-cluster-marker:hover {\r\n  border-color: #1d4ed8;\r\n  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.neshan-cluster-count {\r\n  color: #2563eb;\r\n  font-weight: 900;\r\n  font-size: 16px;\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n.neshan-marker-selected .neshan-marker-body {\r\n  animation: marker-bounce 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);\r\n  z-index: 100;\r\n}\r\n\r\n@keyframes marker-bounce {\r\n  from { transform: translateY(0) scale(1.1); }\r\n  to { transform: translateY(-12px) scale(1.15); }\r\n}\r\n\r\n\r\n.is-mobile .mobile-slider {\r\n  position: absolute;\r\n  bottom: 24px;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  gap: 12px;\r\n  padding: 0 20px;\r\n  overflow-x: auto;\r\n  scroll-snap-type: x mandatory;\r\n  pointer-events: auto;\r\n  z-index: 20;\r\n \r\n  align-items: flex-end; \r\n}\r\n\r\n.is-mobile .mobile-slider::-webkit-scrollbar { display: none; }\r\n\r\n.is-mobile .store-card {\r\n  min-width: 300px;\r\n  max-width: 85vw;\r\n  background: #ffffff;\r\n  border-radius: 16px;\r\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\r\n  pointer-events: auto;\r\n  scroll-snap-align: center;\r\n  border: none;\r\n \r\n  height: auto; \r\n  flex-shrink: 0;\r\n}\r\n\r\n\r\n.product-badge {\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 20px;\r\n  background: rgba(255, 255, 255, 0.95);\r\n  backdrop-filter: blur(4px);\r\n  padding: 10px 18px;\r\n  border-radius: 12px;\r\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n  font-weight: 800;\r\n  font-size: 14px;\r\n  color: #1f2937;\r\n  z-index: 5;\r\n  border: 1px solid rgba(0, 0, 0, 0.05);\r\n}"],"mappings":"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","names":[]}

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/InteractiveMap.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/components/Map.tsx
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -104,7 +104,7 @@ var Map = ({
     return () => {
       if (map) map.remove();
     };
-  }, [mapLib]);
+  }, [mapLib, options, onMapLoad]);
   useEffect(() => {
     if (!mapInstance || !selectedMarkerId) return;
     const selectedStore = markers.find((m) => m.id === selectedMarkerId);
@@ -133,10 +133,6 @@ var Map = ({
       let el;
       if (isCluster) {
         el = createClusterElement(count);
-        const newMarker2 = new mapLib.Marker({
-          element: el,
-          anchor: "center"
-        }).setLngLat([lng, lat]).addTo(mapInstance);
         el.onclick = (e) => {
           e.stopPropagation();
           const expansionZoom = Math.min(
@@ -158,7 +154,10 @@ var Map = ({
         });
         el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);
       }
-      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? "center" : "bottom" }).setLngLat([lng, lat]).addTo(mapInstance);
+      const newMarker = new mapLib.Marker({
+        element: el,
+        anchor: isCluster ? "center" : "bottom"
+      }).setLngLat([lng, lat]).addTo(mapInstance);
       markersRef.current.push(newMarker);
     });
   }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);
@@ -182,11 +181,7 @@ var Map = ({
     "div",
     {
       ref: mapContainerRef,
-      style: {
-        width: "100%",
-        height: "100%",
-        backfaceVisibility: "hidden"
-      }
+      style: { width: "100%", height: "100%", backfaceVisibility: "hidden" }
     }
   ) });
 };
@@ -201,6 +196,7 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
     {
       className: `store-card ${isSelected ? "active" : ""}`,
       onClick: onSelect,
+      "data-id": store.id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "store-card-header", children: [
           /* @__PURE__ */ jsxs("div", { children: [
@@ -214,9 +210,9 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
         ] }),
         /* @__PURE__ */ jsx2("p", { className: "store-desc", children: store.desc }),
         /* @__PURE__ */ jsx2("div", { className: "store-details-wrapper", children: /* @__PURE__ */ jsx2("div", { className: "store-details-content", children: /* @__PURE__ */ jsxs("div", { className: "action-buttons", children: [
-          store.phone && /* @__PURE__ */ jsx2("a", { href: `tel:${store.phone}`, className: "btn btn-call", children: /* @__PURE__ */ jsx2("span", { children: "\u062A\u0645\u0627\u0633" }) }),
-          store.whatsapp && /* @__PURE__ */ jsx2("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", children: /* @__PURE__ */ jsx2("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
-          /* @__PURE__ */ jsx2("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", children: /* @__PURE__ */ jsx2("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
+          store.phone && /* @__PURE__ */ jsx2("a", { href: `tel:${store.phone}`, className: "btn btn-call", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u062A\u0645\u0627\u0633" }) }),
+          store.whatsapp && /* @__PURE__ */ jsx2("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
+          /* @__PURE__ */ jsx2("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
         ] }) }) })
       ]
     }
@@ -228,12 +224,25 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var InteractiveMap = (props) => {
   const [isMobile, setIsMobile] = useState2(false);
   const [mapInstance, setMapInstance] = useState2(null);
+  const sliderRef = useRef2(null);
   useEffect2(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 1024);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
+  useEffect2(() => {
+    if (isMobile && props.selectedMarkerId && sliderRef.current) {
+      const selectedCard = sliderRef.current.querySelector(`[data-id="${props.selectedMarkerId}"]`);
+      if (selectedCard) {
+        selectedCard.scrollIntoView({
+          behavior: "smooth",
+          inline: "center",
+          block: "nearest"
+        });
+      }
+    }
+  }, [props.selectedMarkerId, isMobile]);
   const handleStoreSelect = (store, index) => {
     props.onMarkerClick?.(store, index, mapInstance);
   };
@@ -263,7 +272,7 @@ var InteractiveMap = (props) => {
         }
       ),
       props.productName && /* @__PURE__ */ jsx3("div", { className: "product-badge", children: /* @__PURE__ */ jsx3("span", { children: props.productName }) }),
-      isMobile && /* @__PURE__ */ jsx3("div", { className: "mobile-slider", children: safeMarkers.map((store, idx) => /* @__PURE__ */ jsx3(
+      isMobile && /* @__PURE__ */ jsx3("div", { className: "mobile-slider", ref: sliderRef, children: safeMarkers.map((store, idx) => /* @__PURE__ */ jsx3(
         StoreCard,
         {
           store,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  // ✅ ذخیره نمونه نقشه برای پاس دادن به کلیک مارکر\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    // ✅ حالا دیگر null نمی‌فرستیم، نمونه واقعی نقشه را می‌فرستیم\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  // اطمینان از اینکه markers همیشه یک آرایه است\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {/* ✅ استفاده از safeMarkers برای جلوگیری از خطای undefined */}\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        {/* ✅ دریافت نمونه نقشه وقتی لود شد */}\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  \r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  \r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    \r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    \r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n    if (isCluster) {\r\n  el = createClusterElement(count);\r\n  \r\n  const newMarker = new mapLib.Marker({ \r\n    element: el, \r\n    anchor: 'center' \r\n  })\r\n    .setLngLat([lng, lat])\r\n    .addTo(mapInstance);\r\n\r\n  el.onclick = (e) => {\r\n    e.stopPropagation(); \r\n    const expansionZoom = Math.min(\r\n      clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n      18\r\n    );\r\n    mapInstance.easeTo({ \r\n      center: [lng, lat], \r\n      zoom: expansionZoom,\r\n      duration: 800 \r\n    });\r\n  };\r\n      } else {\r\n        \r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  \r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n  <div style={{ position: 'relative', ...style }}>\r\n    <div \r\n      ref={mapContainerRef} \r\n      style={{ \r\n        width: '100%', \r\n        height: '100%',\r\n       \r\n        backfaceVisibility: 'hidden' \r\n      }} \r\n    />\r\n  </div>\r\n);\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\">\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\">\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\">\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["useState","useEffect","newMarker","jsx","jsx","jsxs","useState","useEffect"]}
+{"version":3,"sources":["../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n  const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  // ✅ هماهنگی اسکرول اسلایدر موبایل با مارکر انتخاب شده\r\n  useEffect(() => {\r\n    if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n      const selectedCard = sliderRef.current.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n      if (selectedCard) {\r\n        selectedCard.scrollIntoView({\r\n          behavior: 'smooth',\r\n          inline: 'center',\r\n          block: 'nearest'\r\n        });\r\n      }\r\n    }\r\n  }, [props.selectedMarkerId, isMobile]);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\" ref={sliderRef}>\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib, options, onMapLoad]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n      if (isCluster) {\r\n        el = createClusterElement(count);\r\n        el.onclick = (e) => {\r\n          e.stopPropagation();\r\n          const expansionZoom = Math.min(\r\n            clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n            18\r\n          );\r\n          mapInstance.easeTo({ \r\n            center: [lng, lat], \r\n            zoom: expansionZoom,\r\n            duration: 800 \r\n          });\r\n        };\r\n      } else {\r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ \r\n        element: el, \r\n        anchor: isCluster ? 'center' : 'bottom' \r\n      })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n  return (\r\n    <div style={{ position: 'relative', ...style }}>\r\n      <div \r\n        ref={mapContainerRef} \r\n        style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n      data-id={store.id} // برای پیدا کردن کارت در اسکرول موبایل\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\" onClick={(e) => e.stopPropagation()}>\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\" onClick={(e) => e.stopPropagation()}>\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\" onClick={(e) => e.stopPropagation()}>\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":";AAEA,SAAgB,YAAAA,WAAU,aAAAC,YAAW,UAAAC,eAAc;;;ACAnD,SAAgB,WAAW,QAAQ,UAAU,mBAAmB;;;ACOzD,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,GAAqC;AAEnC,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,YAAU,YAAY;AAGtB,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,OAAK,YAAY,sBAAsB,aAAa,2BAA2B,EAAE;AAGjF,SAAO,OAAO,KAAK,OAAO;AAAA,IACxB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW,aAAa,eAAe;AAAA,EACzC,CAAC;AAGD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,SAAO,OAAO,QAAQ,OAAO;AAAA,IAC3B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IAEd,QAAQ,aAAa,sBAAsB;AAAA,IAC3C,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ,CAAC;AAED,MAAI,SAAS;AACX,UAAM,MAAM,SAAS,cAAc,KAAK;AACxC,QAAI,MAAM;AACV,QAAI,MAAM,QAAQ;AAClB,QAAI,MAAM,SAAS;AACnB,QAAI,MAAM,YAAY;AACtB,YAAQ,YAAY,GAAG;AAAA,EACzB,OAAO;AACL,YAAQ,MAAM,kBAAkB;AAAA,EAClC;AAEA,OAAK,YAAY,OAAO;AAGzB,MAAI,cAAc,OAAO,SAAS,OAAO,OAAO;AAC7C,UAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,UAAM,YAAY;AAClB,UAAM,cAAc,OAAO,QAAQ,GAAG,OAAO,KAAK,YAAQ,OAAO,QAAQ;AACzE,SAAK,YAAY,KAAK;AAAA,EAC1B;AAEE,YAAU,YAAY,IAAI;AAC1B,SAAO;AACT;;;ACtEO,SAAS,qBAAqB,OAA4B;AAC/D,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,YAAU,YAAY;AAGtB,QAAM,YAAY,SAAS,cAAc,MAAM;AAC/C,YAAU,YAAY;AACtB,YAAU,YAAY,MAAM,SAAS;AAErC,YAAU,YAAY,SAAS;AAC/B,SAAO;AACT;;;AFLA,OAAO,kBAAkB;AA8HnB;AA5HN,IAAM,MAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,QAAQ,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAC1C,MAAM;AACJ,QAAM,kBAAkB,OAAuB,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA2B,IAAI;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAc,IAAI;AAC9C,QAAM,aAAa,OAAc,CAAC,CAAC;AAEnC,QAAM,eAAe,OAAO,IAAI,aAAa;AAAA,IAC3C,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC,CAAC;AAEF,YAAU,MAAM;AACd,WAAO,iCAAiC,EAAE,KAAK,CAAC,QAAQ;AACtD,gBAAU,IAAI,WAAW,GAAG;AAAA,IAC9B,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,gBAAgB,WAAW,YAAa;AACxD,UAAM,MAAM,IAAI,OAAO,IAAI;AAAA,MACzB,WAAW,gBAAgB;AAAA,MAC3B,GAAG;AAAA,IACL,CAAC;AACD,QAAI,GAAG,QAAQ,MAAM;AACnB,qBAAe,GAAG;AAClB,kBAAY,GAAG;AAAA,IACjB,CAAC;AACD,WAAO,MAAM;AAAE,UAAI,IAAK,KAAI,OAAO;AAAA,IAAG;AAAA,EACxC,GAAG,CAAC,QAAQ,SAAS,SAAS,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,eAAe,CAAC,iBAAkB;AACvC,UAAM,gBAAgB,QAAQ,KAAK,OAAK,EAAE,OAAO,gBAAgB;AACjE,QAAI,eAAe;AACjB,kBAAY,MAAM;AAAA,QAChB,QAAQ,CAAC,cAAc,KAAK,cAAc,GAAG;AAAA,QAC7C,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,aAAa,OAAO,CAAC;AAE3C,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,CAAC,eAAe,CAAC,OAAQ;AAE7B,UAAM,SAAS,YAAY,UAAU;AACrC,UAAM,OAAO,KAAK,MAAM,YAAY,QAAQ,CAAC;AAE7C,UAAM,WAAW,aAAa,QAAQ;AAAA,MACpC,CAAC,OAAO,QAAQ,GAAG,OAAO,SAAS,GAAG,OAAO,QAAQ,GAAG,OAAO,SAAS,CAAC;AAAA,MACzE;AAAA,IACF;AAEA,eAAW,QAAQ,QAAQ,OAAK,EAAE,OAAO,CAAC;AAC1C,eAAW,UAAU,CAAC;AAEtB,aAAS,QAAQ,aAAW;AAC1B,YAAM,CAAC,KAAK,GAAG,IAAI,QAAQ,SAAS;AACpC,YAAM,EAAE,SAAS,WAAW,aAAa,MAAM,IAAI,QAAQ;AAE3D,UAAI;AAEJ,UAAI,WAAW;AACb,aAAK,qBAAqB,KAAK;AAC/B,WAAG,UAAU,CAAC,MAAM;AAClB,YAAE,gBAAgB;AAClB,gBAAM,gBAAgB,KAAK;AAAA,YACzB,aAAa,QAAQ,wBAAwB,QAAQ,EAAY;AAAA,YACjE;AAAA,UACF;AACA,sBAAY,OAAO;AAAA,YACjB,QAAQ,CAAC,KAAK,GAAG;AAAA,YACjB,MAAM;AAAA,YACN,UAAU;AAAA,UACZ,CAAC;AAAA,QACH;AAAA,MACF,OAAO;AACL,cAAM,YAAY,QAAQ;AAC1B,aAAK,0BAA0B;AAAA,UAC7B,QAAQ;AAAA,UACR,YAAY,UAAU,OAAO;AAAA,UAC7B,SAAS;AAAA,QACX,CAAC;AACD,WAAG,UAAU,MAAM,gBAAgB,WAAW,GAAG,WAAW;AAAA,MAC9D;AAEA,YAAM,YAAY,IAAI,OAAO,OAAO;AAAA,QAClC,SAAS;AAAA,QACT,QAAQ,YAAY,WAAW;AAAA,MACjC,CAAC,EACE,UAAU,CAAC,KAAK,GAAG,CAAC,EACpB,MAAM,WAAW;AAEpB,iBAAW,QAAQ,KAAK,SAAS;AAAA,IACnC,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,QAAQ,kBAAkB,eAAe,aAAa,CAAC;AAExE,YAAU,MAAM;AACd,UAAM,SAAc,QAAQ,IAAI,QAAM;AAAA,MACpC,MAAM;AAAA,MACN,YAAY,EAAE,GAAG,EAAE;AAAA,MACnB,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;AAAA,IACzD,EAAE;AACF,iBAAa,QAAQ,KAAK,MAAM;AAChC,kBAAc;AAAA,EAChB,GAAG,CAAC,SAAS,aAAa,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,gBAAY,GAAG,WAAW,aAAa;AACvC,WAAO,MAAM;AAAE,kBAAY,IAAI,WAAW,aAAa;AAAA,IAAG;AAAA,EAC5D,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,SACE,oBAAC,SAAI,OAAO,EAAE,UAAU,YAAY,GAAG,MAAM,GAC3C;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,oBAAoB,SAAS;AAAA;AAAA,EACvE,GACF;AAEJ;AAEA,IAAO,cAAQ;;;AGzHP,SACE,OAAAC,MADF;AAVD,IAAM,YAAsC,CAAC,EAAE,OAAO,YAAY,SAAS,MAAM;AACtF,QAAM,eAAe,sDAAsD,MAAM,GAAG,IAAI,MAAM,GAAG;AAEjG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,cAAc,aAAa,WAAW,EAAE;AAAA,MACnD,SAAS;AAAA,MACT,WAAS,MAAM;AAAA,MAEf;AAAA,6BAAC,SAAI,WAAU,qBACb;AAAA,+BAAC,SACC;AAAA,4BAAAA,KAAC,QAAG,WAAU,cAAc,gBAAM,MAAK;AAAA,YACvC,gBAAAA,KAAC,UAAK,WAAU,cAAc,gBAAM,MAAK;AAAA,aAC3C;AAAA,UACA,qBAAC,SAAI,WAAU,eAAe;AAAA,kBAAM;AAAA,YAAM;AAAA,aAAM;AAAA,WAClD;AAAA,QAEA,gBAAAA,KAAC,OAAE,WAAU,cAAc,gBAAM,MAAK;AAAA,QAGtC,gBAAAA,KAAC,SAAI,WAAU,yBACb,0BAAAA,KAAC,SAAI,WAAU,yBACb,+BAAC,SAAI,WAAU,kBACZ;AAAA,gBAAM,SACL,gBAAAA,KAAC,OAAE,MAAM,OAAO,MAAM,KAAK,IAAI,WAAU,gBAAe,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACxF,0BAAAA,KAAC,UAAK,sCAAI,GACZ;AAAA,UAED,MAAM,YACL,gBAAAA,KAAC,OAAE,MAAM,iBAAiB,MAAM,QAAQ,IAAI,QAAO,UAAS,WAAU,cAAa,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACnH,0BAAAA,KAAC,UAAK,kDAAM,GACd;AAAA,UAEF,gBAAAA,KAAC,OAAE,MAAM,cAAc,QAAO,UAAS,WAAU,iBAAgB,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACjG,0BAAAA,KAAC,UAAK,8DAAQ,GAChB;AAAA,WACF,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;;;AJPQ,SACE,OAAAC,MADF,QAAAC,aAAA;AApCD,IAAM,iBAAqC,CAAC,UAAU;AAC3D,QAAM,CAAC,UAAU,WAAW,IAAIC,UAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAc,IAAI;AACxD,QAAM,YAAYC,QAAuB,IAAI;AAE7C,EAAAC,WAAU,MAAM;AACd,UAAM,cAAc,MAAM,YAAY,OAAO,aAAa,IAAI;AAC9D,gBAAY;AACZ,WAAO,iBAAiB,UAAU,WAAW;AAC7C,WAAO,MAAM,OAAO,oBAAoB,UAAU,WAAW;AAAA,EAC/D,GAAG,CAAC,CAAC;AAGL,EAAAA,WAAU,MAAM;AACd,QAAI,YAAY,MAAM,oBAAoB,UAAU,SAAS;AAC3D,YAAM,eAAe,UAAU,QAAQ,cAAc,aAAa,MAAM,gBAAgB,IAAI;AAC5F,UAAI,cAAc;AAChB,qBAAa,eAAe;AAAA,UAC1B,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,OAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,kBAAkB,QAAQ,CAAC;AAErC,QAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,UAAM,gBAAgB,OAAO,OAAO,WAAW;AAAA,EACjD;AAEA,QAAM,cAAc,MAAM,WAAW,CAAC;AAEtC,SACE,gBAAAH,MAAC,SAAI,WAAW,mBAAmB,WAAW,cAAc,YAAY,IAErE;AAAA,KAAC,YACA,gBAAAA,MAAC,WAAM,WAAU,WACf;AAAA,sBAAAD,KAAC,YAAO,WAAU,kBAAiB,mGAAe;AAAA,MAClD,gBAAAA,KAAC,SAAI,WAAU,gBACZ,sBAAY,IAAI,CAAC,OAAO,QACvB,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,YAAY,MAAM,qBAAqB,MAAM;AAAA,UAC7C,UAAU,MAAM,kBAAkB,OAAO,GAAG;AAAA;AAAA,QAHvC,MAAM;AAAA,MAIb,CACD,GACH;AAAA,OACF;AAAA,IAGF,gBAAAC,MAAC,UAAK,WAAU,iBACd;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,CAAC,QAAQ;AAClB,2BAAe,GAAG;AAClB,kBAAM,YAAY,GAAG;AAAA,UACvB;AAAA;AAAA,MACF;AAAA,MAEC,MAAM,eACL,gBAAAA,KAAC,SAAI,WAAU,iBACZ,0BAAAA,KAAC,UAAM,gBAAM,aAAY,GAC5B;AAAA,MAGD,YACC,gBAAAA,KAAC,SAAI,WAAU,iBAAgB,KAAK,WACjC,sBAAY,IAAI,CAAC,OAAO,QACvB,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,YAAY,MAAM,qBAAqB,MAAM;AAAA,UAC7C,UAAU,MAAM,kBAAkB,OAAO,GAAG;AAAA;AAAA,QAHvC,MAAM;AAAA,MAIb,CACD,GACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":["useState","useEffect","useRef","jsx","jsx","jsxs","useState","useRef","useEffect"]}

package/dist/react.cjs

@@ -141,7 +141,7 @@ var Map = ({
     return () => {
       if (map) map.remove();
     };
-  }, [mapLib]);
+  }, [mapLib, options, onMapLoad]);
   (0, import_react.useEffect)(() => {
     if (!mapInstance || !selectedMarkerId) return;
     const selectedStore = markers.find((m) => m.id === selectedMarkerId);
@@ -170,10 +170,6 @@ var Map = ({
       let el;
       if (isCluster) {
         el = createClusterElement(count);
-        const newMarker2 = new mapLib.Marker({
-          element: el,
-          anchor: "center"
-        }).setLngLat([lng, lat]).addTo(mapInstance);
         el.onclick = (e) => {
           e.stopPropagation();
           const expansionZoom = Math.min(
@@ -195,7 +191,10 @@ var Map = ({
         });
         el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);
       }
-      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? "center" : "bottom" }).setLngLat([lng, lat]).addTo(mapInstance);
+      const newMarker = new mapLib.Marker({
+        element: el,
+        anchor: isCluster ? "center" : "bottom"
+      }).setLngLat([lng, lat]).addTo(mapInstance);
       markersRef.current.push(newMarker);
     });
   }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);
@@ -219,11 +218,7 @@ var Map = ({
     "div",
     {
       ref: mapContainerRef,
-      style: {
-        width: "100%",
-        height: "100%",
-        backfaceVisibility: "hidden"
-      }
+      style: { width: "100%", height: "100%", backfaceVisibility: "hidden" }
     }
   ) });
 };
@@ -238,6 +233,7 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
     {
       className: `store-card ${isSelected ? "active" : ""}`,
       onClick: onSelect,
+      "data-id": store.id,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "store-card-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
@@ -251,9 +247,9 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "store-desc", children: store.desc }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "store-details-content", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "action-buttons", children: [
-          store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u062A\u0645\u0627\u0633" }) }),
-          store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
+          store.phone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `tel:${store.phone}`, className: "btn btn-call", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u062A\u0645\u0627\u0633" }) }),
+          store.whatsapp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
         ] }) }) })
       ]
     }
@@ -265,12 +261,25 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InteractiveMap = (props) => {
   const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
   const [mapInstance, setMapInstance] = (0, import_react2.useState)(null);
+  const sliderRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 1024);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (isMobile && props.selectedMarkerId && sliderRef.current) {
+      const selectedCard = sliderRef.current.querySelector(`[data-id="${props.selectedMarkerId}"]`);
+      if (selectedCard) {
+        selectedCard.scrollIntoView({
+          behavior: "smooth",
+          inline: "center",
+          block: "nearest"
+        });
+      }
+    }
+  }, [props.selectedMarkerId, isMobile]);
   const handleStoreSelect = (store, index) => {
     props.onMarkerClick?.(store, index, mapInstance);
   };
@@ -300,7 +309,7 @@ var InteractiveMap = (props) => {
         }
       ),
       props.productName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "product-badge", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: props.productName }) }),
-      isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobile-slider", children: safeMarkers.map((store, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      isMobile && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobile-slider", ref: sliderRef, children: safeMarkers.map((store, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         StoreCard,
         {
           store,

package/dist/react.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport type {\r\n  MapProps,\r\n  MapOptions,\r\n  MarkerData,\r\n  Store,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  // ✅ ذخیره نمونه نقشه برای پاس دادن به کلیک مارکر\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    // ✅ حالا دیگر null نمی‌فرستیم، نمونه واقعی نقشه را می‌فرستیم\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  // اطمینان از اینکه markers همیشه یک آرایه است\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {/* ✅ استفاده از safeMarkers برای جلوگیری از خطای undefined */}\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        {/* ✅ دریافت نمونه نقشه وقتی لود شد */}\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  \r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  \r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    \r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    \r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n    if (isCluster) {\r\n  el = createClusterElement(count);\r\n  \r\n  const newMarker = new mapLib.Marker({ \r\n    element: el, \r\n    anchor: 'center' \r\n  })\r\n    .setLngLat([lng, lat])\r\n    .addTo(mapInstance);\r\n\r\n  el.onclick = (e) => {\r\n    e.stopPropagation(); \r\n    const expansionZoom = Math.min(\r\n      clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n      18\r\n    );\r\n    mapInstance.easeTo({ \r\n      center: [lng, lat], \r\n      zoom: expansionZoom,\r\n      duration: 800 \r\n    });\r\n  };\r\n      } else {\r\n        \r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  \r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n  <div style={{ position: 'relative', ...style }}>\r\n    <div \r\n      ref={mapContainerRef} \r\n      style={{ \r\n        width: '100%', \r\n        height: '100%',\r\n       \r\n        backfaceVisibility: 'hidden' \r\n      }} \r\n    />\r\n  </div>\r\n);\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\">\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\">\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\">\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["import_react","Supercluster","newMarker","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/react.ts","../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\n\r\nexport { InteractiveMap as NeshanMap } from './components/InteractiveMap';\r\n\r\n\r\nexport type {\r\n  MapProps,\r\n  MapOptions,\r\n  MarkerData,\r\n  Store,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n  const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  // ✅ هماهنگی اسکرول اسلایدر موبایل با مارکر انتخاب شده\r\n  useEffect(() => {\r\n    if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n      const selectedCard = sliderRef.current.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n      if (selectedCard) {\r\n        selectedCard.scrollIntoView({\r\n          behavior: 'smooth',\r\n          inline: 'center',\r\n          block: 'nearest'\r\n        });\r\n      }\r\n    }\r\n  }, [props.selectedMarkerId, isMobile]);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\" ref={sliderRef}>\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib, options, onMapLoad]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n      if (isCluster) {\r\n        el = createClusterElement(count);\r\n        el.onclick = (e) => {\r\n          e.stopPropagation();\r\n          const expansionZoom = Math.min(\r\n            clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n            18\r\n          );\r\n          mapInstance.easeTo({ \r\n            center: [lng, lat], \r\n            zoom: expansionZoom,\r\n            duration: 800 \r\n          });\r\n        };\r\n      } else {\r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ \r\n        element: el, \r\n        anchor: isCluster ? 'center' : 'bottom' \r\n      })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n  return (\r\n    <div style={{ position: 'relative', ...style }}>\r\n      <div \r\n        ref={mapContainerRef} \r\n        style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n      data-id={store.id} // برای پیدا کردن کارت در اسکرول موبایل\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\" onClick={(e) => e.stopPropagation()}>\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\" onClick={(e) => e.stopPropagation()}>\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\" onClick={(e) => e.stopPropagation()}>\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["import_react","Supercluster","import_jsx_runtime","import_jsx_runtime"]}

package/dist/react.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/InteractiveMap.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
 
 // src/components/Map.tsx
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -106,7 +106,7 @@ var Map = ({
     return () => {
       if (map) map.remove();
     };
-  }, [mapLib]);
+  }, [mapLib, options, onMapLoad]);
   useEffect(() => {
     if (!mapInstance || !selectedMarkerId) return;
     const selectedStore = markers.find((m) => m.id === selectedMarkerId);
@@ -135,10 +135,6 @@ var Map = ({
       let el;
       if (isCluster) {
         el = createClusterElement(count);
-        const newMarker2 = new mapLib.Marker({
-          element: el,
-          anchor: "center"
-        }).setLngLat([lng, lat]).addTo(mapInstance);
         el.onclick = (e) => {
           e.stopPropagation();
           const expansionZoom = Math.min(
@@ -160,7 +156,10 @@ var Map = ({
         });
         el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);
       }
-      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? "center" : "bottom" }).setLngLat([lng, lat]).addTo(mapInstance);
+      const newMarker = new mapLib.Marker({
+        element: el,
+        anchor: isCluster ? "center" : "bottom"
+      }).setLngLat([lng, lat]).addTo(mapInstance);
       markersRef.current.push(newMarker);
     });
   }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);
@@ -184,11 +183,7 @@ var Map = ({
     "div",
     {
       ref: mapContainerRef,
-      style: {
-        width: "100%",
-        height: "100%",
-        backfaceVisibility: "hidden"
-      }
+      style: { width: "100%", height: "100%", backfaceVisibility: "hidden" }
     }
   ) });
 };
@@ -203,6 +198,7 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
     {
       className: `store-card ${isSelected ? "active" : ""}`,
       onClick: onSelect,
+      "data-id": store.id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "store-card-header", children: [
           /* @__PURE__ */ jsxs("div", { children: [
@@ -216,9 +212,9 @@ var StoreCard = ({ store, isSelected, onSelect }) => {
         ] }),
         /* @__PURE__ */ jsx2("p", { className: "store-desc", children: store.desc }),
         /* @__PURE__ */ jsx2("div", { className: "store-details-wrapper", children: /* @__PURE__ */ jsx2("div", { className: "store-details-content", children: /* @__PURE__ */ jsxs("div", { className: "action-buttons", children: [
-          store.phone && /* @__PURE__ */ jsx2("a", { href: `tel:${store.phone}`, className: "btn btn-call", children: /* @__PURE__ */ jsx2("span", { children: "\u062A\u0645\u0627\u0633" }) }),
-          store.whatsapp && /* @__PURE__ */ jsx2("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", children: /* @__PURE__ */ jsx2("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
-          /* @__PURE__ */ jsx2("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", children: /* @__PURE__ */ jsx2("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
+          store.phone && /* @__PURE__ */ jsx2("a", { href: `tel:${store.phone}`, className: "btn btn-call", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u062A\u0645\u0627\u0633" }) }),
+          store.whatsapp && /* @__PURE__ */ jsx2("a", { href: `https://wa.me/${store.whatsapp}`, target: "_blank", className: "btn btn-wa", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u0648\u0627\u062A\u0633\u0627\u067E" }) }),
+          /* @__PURE__ */ jsx2("a", { href: googleMapUrl, target: "_blank", className: "btn btn-route", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx2("span", { children: "\u0645\u0633\u06CC\u0631\u06CC\u0627\u0628\u06CC" }) })
         ] }) }) })
       ]
     }
@@ -230,12 +226,25 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var InteractiveMap = (props) => {
   const [isMobile, setIsMobile] = useState2(false);
   const [mapInstance, setMapInstance] = useState2(null);
+  const sliderRef = useRef2(null);
   useEffect2(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 1024);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
+  useEffect2(() => {
+    if (isMobile && props.selectedMarkerId && sliderRef.current) {
+      const selectedCard = sliderRef.current.querySelector(`[data-id="${props.selectedMarkerId}"]`);
+      if (selectedCard) {
+        selectedCard.scrollIntoView({
+          behavior: "smooth",
+          inline: "center",
+          block: "nearest"
+        });
+      }
+    }
+  }, [props.selectedMarkerId, isMobile]);
   const handleStoreSelect = (store, index) => {
     props.onMarkerClick?.(store, index, mapInstance);
   };
@@ -265,7 +274,7 @@ var InteractiveMap = (props) => {
         }
       ),
       props.productName && /* @__PURE__ */ jsx3("div", { className: "product-badge", children: /* @__PURE__ */ jsx3("span", { children: props.productName }) }),
-      isMobile && /* @__PURE__ */ jsx3("div", { className: "mobile-slider", children: safeMarkers.map((store, idx) => /* @__PURE__ */ jsx3(
+      isMobile && /* @__PURE__ */ jsx3("div", { className: "mobile-slider", ref: sliderRef, children: safeMarkers.map((store, idx) => /* @__PURE__ */ jsx3(
         StoreCard,
         {
           store,

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  // ✅ ذخیره نمونه نقشه برای پاس دادن به کلیک مارکر\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    // ✅ حالا دیگر null نمی‌فرستیم، نمونه واقعی نقشه را می‌فرستیم\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  // اطمینان از اینکه markers همیشه یک آرایه است\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {/* ✅ استفاده از safeMarkers برای جلوگیری از خطای undefined */}\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        {/* ✅ دریافت نمونه نقشه وقتی لود شد */}\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\n\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  \r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  \r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    \r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    \r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n    if (isCluster) {\r\n  el = createClusterElement(count);\r\n  \r\n  const newMarker = new mapLib.Marker({ \r\n    element: el, \r\n    anchor: 'center' \r\n  })\r\n    .setLngLat([lng, lat])\r\n    .addTo(mapInstance);\r\n\r\n  el.onclick = (e) => {\r\n    e.stopPropagation(); \r\n    const expansionZoom = Math.min(\r\n      clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n      18\r\n    );\r\n    mapInstance.easeTo({ \r\n      center: [lng, lat], \r\n      zoom: expansionZoom,\r\n      duration: 800 \r\n    });\r\n  };\r\n      } else {\r\n        \r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ element: el, anchor: isCluster ? 'center' : 'bottom' })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  \r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  \r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n return (\r\n  <div style={{ position: 'relative', ...style }}>\r\n    <div \r\n      ref={mapContainerRef} \r\n      style={{ \r\n        width: '100%', \r\n        height: '100%',\r\n       \r\n        backfaceVisibility: 'hidden' \r\n      }} \r\n    />\r\n  </div>\r\n);\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\">\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\">\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\">\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["useState","useEffect","newMarker","jsx","jsx","jsxs","useState","useEffect"]}
+{"version":3,"sources":["../src/components/InteractiveMap.tsx","../src/components/Map.tsx","../src/utils/createCustomMarkerElement.ts","../src/utils/createClusterElement.ts","../src/components/StoreCard.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport Map from './Map';\r\nimport { StoreCard } from './StoreCard';\r\nimport { Store, MapProps } from '../types';\r\n\r\nexport const InteractiveMap: React.FC<MapProps> = (props) => {\r\n  const [isMobile, setIsMobile] = useState(false);\r\n  const [mapInstance, setMapInstance] = useState<any>(null);\r\n  const sliderRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    const checkMobile = () => setIsMobile(window.innerWidth < 1024);\r\n    checkMobile();\r\n    window.addEventListener('resize', checkMobile);\r\n    return () => window.removeEventListener('resize', checkMobile);\r\n  }, []);\r\n\r\n  // ✅ هماهنگی اسکرول اسلایدر موبایل با مارکر انتخاب شده\r\n  useEffect(() => {\r\n    if (isMobile && props.selectedMarkerId && sliderRef.current) {\r\n      const selectedCard = sliderRef.current.querySelector(`[data-id=\"${props.selectedMarkerId}\"]`);\r\n      if (selectedCard) {\r\n        selectedCard.scrollIntoView({\r\n          behavior: 'smooth',\r\n          inline: 'center',\r\n          block: 'nearest'\r\n        });\r\n      }\r\n    }\r\n  }, [props.selectedMarkerId, isMobile]);\r\n\r\n  const handleStoreSelect = (store: Store, index: number) => {\r\n    props.onMarkerClick?.(store, index, mapInstance);\r\n  };\r\n\r\n  const safeMarkers = props.markers || [];\r\n\r\n  return (\r\n    <div className={`map-layout-root ${isMobile ? 'is-mobile' : 'is-desktop'}`}>\r\n      \r\n      {!isMobile && (\r\n        <aside className=\"sidebar\">\r\n          <header className=\"sidebar-header\">لیست فروشگاه‌ها</header>\r\n          <div className=\"sidebar-list\">\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        </aside>\r\n      )}\r\n\r\n      <main className=\"map-container\">\r\n        <Map \r\n          {...props} \r\n          onMapLoad={(map) => {\r\n            setMapInstance(map);\r\n            props.onMapLoad?.(map);\r\n          }} \r\n        />\r\n        \r\n        {props.productName && (\r\n          <div className=\"product-badge\">\r\n             <span>{props.productName}</span>\r\n          </div>\r\n        )}\r\n\r\n        {isMobile && (\r\n          <div className=\"mobile-slider\" ref={sliderRef}>\r\n            {safeMarkers.map((store, idx) => (\r\n              <StoreCard \r\n                key={store.id} \r\n                store={store} \r\n                isSelected={props.selectedMarkerId === store.id}\r\n                onSelect={() => handleStoreSelect(store, idx)}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </main>\r\n    </div>\r\n  );\r\n};","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\r\nimport type { MapboxMap, Store, MapProps } from '../types';\r\nimport { createCustomMarkerElement } from '../utils/createCustomMarkerElement';\r\nimport { createClusterElement } from '../utils/createClusterElement';\r\nimport Supercluster from 'supercluster';\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n  options,\r\n  markers = [],\r\n  markerLogoUrl = '',\r\n  selectedMarkerId = null,\r\n  onMarkerClick,\r\n  onMapLoad,\r\n  style = { width: '100%', height: '100%' },\r\n}) => {\r\n  const mapContainerRef = useRef<HTMLDivElement>(null);\r\n  const [mapInstance, setMapInstance] = useState<MapboxMap | null>(null);\r\n  const [mapLib, setMapLib] = useState<any>(null);\r\n  const markersRef = useRef<any[]>([]);\r\n  \r\n  const clusterIndex = useRef(new Supercluster({\r\n    radius: 60,\r\n    maxZoom: 16\r\n  }));\r\n\r\n  useEffect(() => {\r\n    import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n      setMapLib(mod.default || mod);\r\n    });\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!mapLib || !mapContainerRef.current || mapInstance) return;\r\n    const map = new mapLib.Map({\r\n      container: mapContainerRef.current,\r\n      ...options,\r\n    });\r\n    map.on('load', () => {\r\n      setMapInstance(map);\r\n      onMapLoad?.(map);\r\n    });\r\n    return () => { if (map) map.remove(); };\r\n  }, [mapLib, options, onMapLoad]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance || !selectedMarkerId) return;\r\n    const selectedStore = markers.find(m => m.id === selectedMarkerId);\r\n    if (selectedStore) {\r\n      mapInstance.flyTo({\r\n        center: [selectedStore.lng, selectedStore.lat],\r\n        zoom: 16, \r\n        essential: true,\r\n        duration: 1500\r\n      });\r\n    }\r\n  }, [selectedMarkerId, mapInstance, markers]);\r\n\r\n  const updateMarkers = useCallback(() => {\r\n    if (!mapInstance || !mapLib) return;\r\n\r\n    const bounds = mapInstance.getBounds();\r\n    const zoom = Math.floor(mapInstance.getZoom());\r\n\r\n    const clusters = clusterIndex.current.getClusters(\r\n      [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],\r\n      zoom\r\n    );\r\n\r\n    markersRef.current.forEach(m => m.remove());\r\n    markersRef.current = [];\r\n\r\n    clusters.forEach(cluster => {\r\n      const [lng, lat] = cluster.geometry.coordinates;\r\n      const { cluster: isCluster, point_count: count } = cluster.properties;\r\n\r\n      let el: HTMLElement;\r\n\r\n      if (isCluster) {\r\n        el = createClusterElement(count);\r\n        el.onclick = (e) => {\r\n          e.stopPropagation();\r\n          const expansionZoom = Math.min(\r\n            clusterIndex.current.getClusterExpansionZoom(cluster.id as number),\r\n            18\r\n          );\r\n          mapInstance.easeTo({ \r\n            center: [lng, lat], \r\n            zoom: expansionZoom,\r\n            duration: 800 \r\n          });\r\n        };\r\n      } else {\r\n        const storeData = cluster.properties as Store;\r\n        el = createCustomMarkerElement({\r\n          marker: storeData,\r\n          isSelected: storeData.id === selectedMarkerId,\r\n          logoSrc: markerLogoUrl,\r\n        });\r\n        el.onclick = () => onMarkerClick?.(storeData, 0, mapInstance);\r\n      }\r\n\r\n      const newMarker = new mapLib.Marker({ \r\n        element: el, \r\n        anchor: isCluster ? 'center' : 'bottom' \r\n      })\r\n        .setLngLat([lng, lat])\r\n        .addTo(mapInstance);\r\n      \r\n      markersRef.current.push(newMarker);\r\n    });\r\n  }, [mapInstance, mapLib, selectedMarkerId, markerLogoUrl, onMarkerClick]);\r\n\r\n  useEffect(() => {\r\n    const points: any = markers.map(s => ({\r\n      type: 'Feature',\r\n      properties: { ...s },\r\n      geometry: { type: 'Point', coordinates: [s.lng, s.lat] }\r\n    }));\r\n    clusterIndex.current.load(points);\r\n    updateMarkers();\r\n  }, [markers, updateMarkers]);\r\n\r\n  useEffect(() => {\r\n    if (!mapInstance) return;\r\n    mapInstance.on('moveend', updateMarkers);\r\n    return () => { mapInstance.off('moveend', updateMarkers); };\r\n  }, [mapInstance, updateMarkers]);\r\n\r\n  return (\r\n    <div style={{ position: 'relative', ...style }}>\r\n      <div \r\n        ref={mapContainerRef} \r\n        style={{ width: '100%', height: '100%', backfaceVisibility: 'hidden' }} \r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Map;","import type { MarkerData } from '../types';\r\n\r\ninterface CreateMarkerOptions {\r\n  marker: MarkerData;\r\n  isSelected: boolean;\r\n  logoSrc?: string;\r\n  showPrice?: boolean;\r\n}\r\n\r\nexport function createCustomMarkerElement({\r\n  marker,\r\n  isSelected,\r\n  logoSrc = '',\r\n  showPrice = true,\r\n}: CreateMarkerOptions): HTMLElement {\r\n  \r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-marker-container';\r\n\r\n  \r\n  const body = document.createElement('div');\r\n  body.className = `neshan-marker-body ${isSelected ? 'neshan-marker-selected' : ''}`;\r\n  \r\n  \r\n  Object.assign(body.style, {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'center',\r\n    transition: 'transform 0.3s ease',\r\n    transform: isSelected ? 'scale(1.2)' : 'scale(1)',\r\n  });\r\n\r\n  \r\n  const iconBox = document.createElement('div');\r\n  Object.assign(iconBox.style, {\r\n    width: '36px',\r\n    height: '36px',\r\n    borderRadius: '50%',\r\n\r\n    border: isSelected ? '3px solid #3b82f6' : '2px solid #ef4444',\r\n    boxShadow: '0 4px 8px rgba(0,0,0,0.2)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    overflow: 'hidden'\r\n  });\r\n\r\n  if (logoSrc) {\r\n    const img = document.createElement('img');\r\n    img.src = logoSrc;\r\n    img.style.width = '100%';\r\n    img.style.height = '100%';\r\n    img.style.objectFit = 'cover';\r\n    iconBox.appendChild(img);\r\n  } else {\r\n    iconBox.style.backgroundColor = '#ef4444';\r\n  }\r\n\r\n  body.appendChild(iconBox);\r\n\r\n  \r\n if (showPrice && (marker.price || marker.name)) {\r\n    const label = document.createElement('div');\r\n    label.className = 'neshan-marker-label'; // استفاده از کلاس CSS جدید\r\n    label.textContent = marker.price ? `${marker.price} ت` : (marker.name ?? '');\r\n    body.appendChild(label);\r\n}\r\n\r\n  container.appendChild(body);\r\n  return container;\r\n}","export function createClusterElement(count: number): HTMLElement {\r\n  const container = document.createElement('div');\r\n  container.className = 'neshan-cluster-marker';\r\n  \r\n  \r\n  const countSpan = document.createElement('span');\r\n  countSpan.className = 'neshan-cluster-count';\r\n  countSpan.innerText = count.toString();\r\n  \r\n  container.appendChild(countSpan);\r\n  return container;\r\n}","import React from 'react';\r\nimport { Store } from '../types';\r\n\r\ninterface StoreCardProps {\r\n  store: Store;\r\n  isSelected: boolean;\r\n  onSelect: () => void;\r\n}\r\n\r\nexport const StoreCard: React.FC<StoreCardProps> = ({ store, isSelected, onSelect }) => {\r\n  const googleMapUrl = `https://www.google.com/maps/dir/?api=1&destination=${store.lat},${store.lng}`;\r\n\r\n  return (\r\n    <div \r\n      className={`store-card ${isSelected ? 'active' : ''}`}\r\n      onClick={onSelect}\r\n      data-id={store.id} // برای پیدا کردن کارت در اسکرول موبایل\r\n    >\r\n      <div className=\"store-card-header\">\r\n        <div>\r\n          <h4 className=\"store-name\">{store.name}</h4>\r\n          <span className=\"store-city\">{store.city}</span>\r\n        </div>\r\n        <div className=\"store-price\">{store.price} تومان</div>\r\n      </div>\r\n\r\n      <p className=\"store-desc\">{store.desc}</p>\r\n\r\n      {/* بخش آکاردئونی با CSS Animation */}\r\n      <div className=\"store-details-wrapper\">\r\n        <div className=\"store-details-content\">\r\n          <div className=\"action-buttons\">\r\n            {store.phone && (\r\n              <a href={`tel:${store.phone}`} className=\"btn btn-call\" onClick={(e) => e.stopPropagation()}>\r\n                <span>تماس</span>\r\n              </a>\r\n            )}\r\n            {store.whatsapp && (\r\n              <a href={`https://wa.me/${store.whatsapp}`} target=\"_blank\" className=\"btn btn-wa\" onClick={(e) => e.stopPropagation()}>\r\n                <span>واتساپ</span>\r\n              </a>\r\n            )}\r\n            <a href={googleMapUrl} target=\"_blank\" className=\"btn btn-route\" onClick={(e) => e.stopPropagation()}>\r\n              <span>مسیریابی</span>\r\n            </a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};"],"mappings":"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","names":["useState","useEffect","useRef","jsx","jsx","jsxs","useState","useRef","useEffect"]}

package/dist/styles.css

@@ -1,7 +1,5 @@
-
 @import "@neshan-maps-platform/mapbox-gl/dist/NeshanMapboxGl.css";
 
-
 .map-layout-root {
   display: flex;
   width: 100%;
@@ -51,6 +49,7 @@
   cursor: pointer;
   transition: all 0.2s ease;
   border-right: 4px solid transparent;
+  background: #fff;
 }
 
 .store-card:hover {
@@ -86,16 +85,16 @@
 .store-price {
   color: #059669;
   font-weight: 800;
-  font-size: 15px;
+  font-size: 14px;
   background: #ecfdf5;
   padding: 2px 8px;
   border-radius: 6px;
 }
 
 .store-desc {
-  font-size: 12.5px;
+  font-size: 12px;
   color: #4b5563;
-  line-height: 1.6;
+  line-height: 1.5;
   margin: 8px 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -132,7 +131,7 @@
   border-radius: 8px;
   text-align: center;
   text-decoration: none;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
   color: #fff;
   transition: transform 0.1s, opacity 0.2s;
@@ -181,7 +180,6 @@
   height: 36px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
   cursor: pointer;
-  transition: none;
 }
 
 .neshan-cluster-marker:hover {
@@ -193,7 +191,7 @@
   color: #2563eb;
   font-weight: 900;
   font-size: 16px;
-  pointer-events: none; /* جلوگیری از تداخل کلیک با عدد */
+  pointer-events: none;
 }
 
 
@@ -218,8 +216,10 @@
   padding: 0 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  pointer-events: none;
+  pointer-events: auto;
   z-index: 20;
+ 
+  align-items: flex-end; 
 }
 
 .is-mobile .mobile-slider::-webkit-scrollbar { display: none; }
@@ -233,6 +233,9 @@
   pointer-events: auto;
   scroll-snap-align: center;
   border: none;
+ 
+  height: auto; 
+  flex-shrink: 0;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mehdi-akbari-map",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A professional Map",
   "type": "module",
   "main": "./dist/index.js",