@jotul/jotul-widgets 1.0.5 → 1.1.0

package/dist/components/ProductPageWidget.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import 'leaflet/dist/leaflet.css';
-import { useEffect, useMemo, useState } from 'react';
-import { icon } from 'leaflet';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { icon, latLng } from 'leaflet';
 import { MapContainer, Marker, TileLayer, Tooltip, useMap } from 'react-leaflet';
 import { DealerCardSkeleton } from './DealerCardSkeleton';
 import { DealerList } from './product-page/DealerList';
@@ -11,8 +12,25 @@ import { StatusBanner } from './product-page/StatusBanner';
 import { ArrowRightIcon } from '../icons/ArrowRightIcon';
 import dealerPin from '../images/dealer-pin.svg';
 import dealerPinExclusive from '../images/dealer-pin-exclusive.svg';
-import { R10 } from '../constants';
-const OSM_SMOOTH_TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
+import { MARKER_CLUSTER_LINK_KM, MARKER_CLUSTER_MIN_GROUP, partitionDealersForMarkerClusterPlugin, } from '../utils/dealerMapClustering';
+import { loadLeafletMarkerCluster } from '../utils/loadLeafletMarkerCluster';
+import { markerClusterCountIconHtml } from '../utils/markerClusterIconHtml';
+import { JOTUL_BRAND_PRIMARY_HEX, R10 } from '../constants';
+const OSM_MINIMAL_TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
+function mapPointsBoundsKey(points, defaultCenter) {
+    const body = points.length === 0
+        ? ''
+        : [...points]
+            .sort((a, b) => a.latitude !== b.latitude
+            ? a.latitude - b.latitude
+            : a.longitude !== b.longitude
+                ? a.longitude - b.longitude
+                : a.dealerName.localeCompare(b.dealerName))
+            .map((p) => `${p.dealerName}\t${p.latitude}\t${p.longitude}`)
+            .join('\n');
+    const dc = defaultCenter != null ? `${defaultCenter[0]},${defaultCenter[1]}` : '';
+    return `${body}|${dc}`;
+}
 function readNumber(value) {
     if (typeof value === 'number' && Number.isFinite(value))
         return value;
@@ -66,7 +84,7 @@ function createDealerPinIcon(isExclusive, active) {
         className: 'jwi-map-pin',
     });
 }
-function FitMapBounds({ points, defaultCenter, }) {
+function FitMapBounds({ boundsKey, points, defaultCenter, }) {
     const map = useMap();
     useEffect(() => {
         const all = points.map((p) => [p.latitude, p.longitude]);
@@ -75,11 +93,13 @@ function FitMapBounds({ points, defaultCenter, }) {
         if (all.length === 0)
             return;
         if (all.length === 1) {
-            map.setView(all[0], 12, { animate: true });
+            map.setView(all[0], 12, { animate: false });
             return;
         }
-        map.fitBounds(all, { padding: [30, 30], animate: true, maxZoom: 14 });
-    }, [defaultCenter, map, points]);
+        // No animation — must complete before FocusActiveDealer centers the selected pin (see FindDealerDrawerWidget).
+        map.fitBounds(all, { padding: [50, 50], animate: false, maxZoom: 19 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- boundsKey encodes points + defaultCenter; avoid refit on array identity churn
+    }, [boundsKey, map]);
     return null;
 }
 function FocusActiveDealer({ point }) {
@@ -87,20 +107,143 @@ function FocusActiveDealer({ point }) {
     useEffect(() => {
         if (point == null)
             return;
-        map.setView([point.latitude, point.longitude], Math.max(map.getZoom(), 13), {
-            animate: true,
-        });
+        const target = latLng(point.latitude, point.longitude);
+        map.setView(target, Math.max(map.getZoom(), 13), { animate: true });
     }, [map, point]);
     return null;
 }
-export function ProductPageWidget({ t, buttonStyling, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onClosePopup, }) {
+function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel, activeDealerName, onSelectDealer, onUnavailable, }) {
+    const map = useMap();
+    const markersByDealerRef = useRef(new Map());
+    const pointsRef = useRef(points);
+    const activeNameRef = useRef(activeDealerName);
+    const onSelectRef = useRef(onSelectDealer);
+    const onUnavailableRef = useRef(onUnavailable);
+    pointsRef.current = points;
+    activeNameRef.current = activeDealerName;
+    onSelectRef.current = onSelectDealer;
+    onUnavailableRef.current = onUnavailable;
+    function applyPinsForSelection() {
+        const active = activeNameRef.current;
+        for (const p of pointsRef.current) {
+            const marker = markersByDealerRef.current.get(p.dealerName);
+            if (marker != null) {
+                marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName));
+            }
+        }
+    }
+    useEffect(() => {
+        applyPinsForSelection();
+    }, [activeDealerName]);
+    useEffect(() => {
+        let disposed = false;
+        markersByDealerRef.current.clear();
+        let clusterGroup = null;
+        let plainGroup = null;
+        async function mountClusters() {
+            try {
+                const leafletModule = await import('leaflet');
+                if (disposed)
+                    return;
+                const { clustered, standalone } = partitionDealersForMarkerClusterPlugin(pointsRef.current, {
+                    linkKm: MARKER_CLUSTER_LINK_KM,
+                    minGroupSize: MARKER_CLUSTER_MIN_GROUP,
+                });
+                const leafletMaybeDefault = leafletModule;
+                const leaf = (leafletMaybeDefault.default ??
+                    leafletMaybeDefault);
+                if (typeof leaf.featureGroup !== 'function') {
+                    onUnavailableRef.current?.();
+                    return;
+                }
+                function makeMarker(point) {
+                    const marker = leaf.marker([point.latitude, point.longitude], {
+                        icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName),
+                    });
+                    marker.on('click', () => {
+                        onSelectRef.current?.({
+                            dealerName: point.dealerName,
+                            latitude: point.latitude,
+                            longitude: point.longitude,
+                        });
+                    });
+                    marker.bindTooltip(point.dealerName);
+                    markersByDealerRef.current.set(point.dealerName, marker);
+                    return marker;
+                }
+                if (standalone.length > 0) {
+                    plainGroup = leaf.featureGroup();
+                    for (const point of standalone) {
+                        plainGroup.addLayer(makeMarker(point));
+                    }
+                    plainGroup.addTo(map);
+                }
+                if (clustered.length > 0) {
+                    await loadLeafletMarkerCluster(leaf);
+                    if (disposed)
+                        return;
+                    if (typeof leaf.markerClusterGroup !== 'function') {
+                        onUnavailableRef.current?.();
+                        return;
+                    }
+                    clusterGroup = leaf.markerClusterGroup({
+                        showCoverageOnHover: false,
+                        spiderfyOnMaxZoom: true,
+                        spiderLegPolylineOptions: {
+                            weight: 1.75,
+                            color: clusterBrandFill,
+                            opacity: 0.38,
+                        },
+                        iconCreateFunction: (cluster) => {
+                            const n = cluster.getChildCount();
+                            return leaf.divIcon({
+                                html: markerClusterCountIconHtml(n, clusterBrandFill, clusterBrandLabel),
+                                className: '',
+                                iconSize: leaf.point(40, 40),
+                            });
+                        },
+                        maxClusterRadius: (zoom) => zoom <= 6 ? 140 : zoom <= 8 ? 125 : zoom <= 10 ? 100 : zoom <= 11 ? 72 : 45,
+                        disableClusteringAtZoom: 12,
+                        chunkedLoading: true,
+                    });
+                    for (const point of clustered) {
+                        clusterGroup.addLayer(makeMarker(point));
+                    }
+                    clusterGroup.addTo(map);
+                }
+                applyPinsForSelection();
+            }
+            catch {
+                onUnavailableRef.current?.();
+            }
+        }
+        void mountClusters();
+        return () => {
+            disposed = true;
+            if (clusterGroup != null) {
+                clusterGroup.clearLayers();
+                clusterGroup.removeFrom(map);
+            }
+            if (plainGroup != null) {
+                plainGroup.clearLayers();
+                plainGroup.removeFrom(map);
+            }
+            markersByDealerRef.current.clear();
+        };
+    }, [map, pointsBoundsKey, clusterThemeKey]);
+    return null;
+}
+export function ProductPageWidget({ t, buttonStyling, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClosePopup, }) {
     const dealers = (searchResult?.dealers ?? []);
-    const total = searchResult?.total ?? dealers.length;
+    const mapDealers = (mapSearchResult?.dealers ?? dealers);
+    const total = dealers.length;
     const inquiryFormOpen = inquiryValues != null;
     const [viewMode, setViewMode] = useState('list');
     const [activeDealerName, setActiveDealerName] = useState(null);
     const [mobileMapExpanded, setMobileMapExpanded] = useState(false);
     const [isMobileViewport, setIsMobileViewport] = useState(false);
+    const [visibleDealerCount, setVisibleDealerCount] = useState(10);
+    const [clusterUnavailable, setClusterUnavailable] = useState(false);
     useEffect(() => {
         if (viewMode !== 'map') {
             setMobileMapExpanded(false);
@@ -124,7 +267,23 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
         media.addEventListener('change', update);
         return () => media.removeEventListener('change', update);
     }, []);
-    const mapPoints = useMemo(() => dealers.map((dealer) => getDealerMapPoint(dealer)).filter((v) => v != null), [dealers]);
+    useEffect(() => {
+        setVisibleDealerCount(10);
+    }, [dealers]);
+    const visibleDealers = useMemo(() => dealers.slice(0, Math.max(10, visibleDealerCount)), [dealers, visibleDealerCount]);
+    useEffect(() => {
+        if (activeDealerName == null)
+            return;
+        const activeIndex = dealers.findIndex((dealer) => getDealerName(dealer) === activeDealerName);
+        if (activeIndex < 0 || activeIndex < visibleDealerCount)
+            return;
+        const nextCount = Math.ceil((activeIndex + 1) / 10) * 10;
+        setVisibleDealerCount(nextCount);
+    }, [activeDealerName, dealers, visibleDealerCount]);
+    const mapPoints = useMemo(() => mapDealers.map((dealer) => getDealerMapPoint(dealer)).filter((v) => v != null), [mapDealers]);
+    useEffect(() => {
+        setClusterUnavailable(false);
+    }, [mapPoints]);
     const defaultCenter = useMemo(() => {
         const first = mapPoints[0];
         if (first != null)
@@ -135,22 +294,45 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
             return null;
         return [latitude, longitude];
     }, [mapPoints, searchResult?.origin?.latitude, searchResult?.origin?.longitude]);
+    const mapBoundsKey = useMemo(() => mapPointsBoundsKey(mapPoints, defaultCenter), [mapPoints, defaultCenter]);
     useEffect(() => {
         setActiveDealerName(dealers.length > 0 ? getDealerName(dealers[0]) : null);
     }, [dealers]);
     const activeMapPoint = useMemo(() => mapPoints.find((p) => p.dealerName === activeDealerName) ?? null, [activeDealerName, mapPoints]);
+    const mapClusterTheme = useMemo(() => {
+        const fill = buttonStyling?.backgroundColor?.trim() || JOTUL_BRAND_PRIMARY_HEX;
+        const label = buttonStyling?.textColor?.trim() || '#ffffff';
+        return {
+            fill,
+            label,
+            key: `${fill}\0${label}`,
+        };
+    }, [buttonStyling?.backgroundColor, buttonStyling?.textColor]);
     const listMapPills = (_jsxs("div", { className: "jwi-inline-flex jwi-items-center jwi-gap-1 jwi-rounded-full jwi-p-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('list'), className: `jwi-cursor-pointer jwi-rounded-full jwi-px-4 jwi-py-1.5 jwi-text-sm jwi-font-medium ${viewMode === 'list'
                     ? 'jwi-bg-[#f0f0f0] jwi-text-[#000000]'
                     : 'jwi-bg-transparent jwi-text-[#555555]'}`, children: t.listView }), _jsx("button", { type: "button", onClick: () => setViewMode('map'), className: `jwi-cursor-pointer jwi-rounded-full jwi-px-4 jwi-py-1.5 jwi-text-sm jwi-font-medium ${viewMode === 'map'
                     ? 'jwi-bg-[#f0f0f0] jwi-text-[#000000]'
                     : 'jwi-bg-transparent jwi-text-[#555555]'}`, children: t.mapView })] }));
-    const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 10, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_SMOOTH_TILE_URL }), _jsx(FitMapBounds, { points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), mapPoints.map((point) => {
-                const isActive = activeDealerName === point.dealerName;
-                return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive), eventHandlers: {
-                        click: () => setActiveDealerName(point.dealerName),
-                    }, children: _jsx(Tooltip, { children: point.dealerName }) }, `${point.dealerName}-${point.latitude}-${point.longitude}`));
-            })] }));
+    const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label, activeDealerName: activeDealerName, onUnavailable: () => setClusterUnavailable(true), onSelectDealer: (dealer) => {
+                    setActiveDealerName(dealer.dealerName);
+                    onMapDealerSelect?.(dealer);
+                } }), clusterUnavailable &&
+                mapPoints.map((point) => {
+                    const isActive = activeDealerName === point.dealerName;
+                    return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive), eventHandlers: {
+                            click: () => {
+                                setActiveDealerName(point.dealerName);
+                                onMapDealerSelect?.({
+                                    dealerName: point.dealerName,
+                                    latitude: point.latitude,
+                                    longitude: point.longitude,
+                                });
+                            },
+                        }, children: _jsx(Tooltip, { children: point.dealerName }) }, `${point.dealerName}-${point.latitude}-${point.longitude}`));
+                })] }));
     const showInquiryInMapPopup = inquiryFormOpen && searchResult?.ok && viewMode === 'map';
+    const canShowMore = visibleDealerCount < dealers.length;
+    const showMoreButton = canShowMore ? (_jsx("button", { type: "button", onClick: () => setVisibleDealerCount((count) => Math.min(count + 10, dealers.length)), className: "jwi-mt-3 jwi-inline-flex jwi-w-full jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-3 jwi-py-2 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: "Show more" })) : null;
     const handleDealerFocus = (dealerName) => {
         setActiveDealerName(dealerName);
     };
@@ -164,5 +346,5 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
     if (inquiryFormOpen && searchResult?.ok && viewMode !== 'map') {
         return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col jwi-gap-3", children: _jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange }) }));
     }
-    return (_jsxs(_Fragment, { children: [viewMode === 'list' && (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && viewMode === 'list' && (_jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry }))] })), searchResult?.ok && viewMode === 'map' && (_jsxs(_Fragment, { children: [!isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-flex jwi-items-center jwi-justify-center jwi-bg-black/45 jwi-p-4", onClick: () => setViewMode('list'), children: _jsxs("div", { className: `jwi-relative jwi-flex jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] jwi-scale-100 jwi-flex-col jwi-overflow-hidden ${R10} jwi-bg-white jwi-shadow-[0_20px_60px_rgba(0,0,0,0.25)] jwi-transition-all md:jwi-flex-row`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-absolute jwi-right-3 jwi-top-3 jwi-z-[1200] jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111] jwi-shadow-[0_2px_8px_rgba(0,0,0,0.12)]", "aria-label": t.closeMap, children: "\u00D7" }), _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", children: _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), _jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: true, autoScrollToActive: true, maxHeightClassName: "jwi-max-h-none", headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })] })) }) }), _jsx("div", { className: "jwi-relative jwi-h-[45%] jwi-w-full md:jwi-h-full md:jwi-w-[52%]", children: mapCanvas })] }) })), isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-bg-white", children: _jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111]", "aria-label": t.closeMap, children: "\u00D7" }) }), _jsx("div", { className: "jwi-min-h-0 jwi-flex-1 jwi-overflow-y-auto jwi-bg-white jwi-p-4 jwi-pb-24", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), _jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, maxHeightClassName: "jwi-max-h-none", autoScrollToActive: true, enableInternalScroll: false, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })] })) }), !showInquiryInMapPopup && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded((open) => !open), className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-20 jwi-flex jwi-h-14 jwi-items-center jwi-justify-center jwi-gap-2 jwi-rounded-t-[16px] jwi-border-t jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111] jwi-shadow-[0_-6px_20px_rgba(0,0,0,0.12)]", children: [t.openMap, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(-90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] })), mobileMapExpanded && !showInquiryInMapPopup && (_jsxs("div", { className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-30 jwi-h-[78vh] jwi-overflow-hidden jwi-rounded-t-[16px] jwi-bg-white jwi-shadow-[0_-12px_36px_rgba(0,0,0,0.22)]", children: [_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(false), className: "jwi-flex jwi-h-12 jwi-w-full jwi-items-center jwi-justify-center jwi-gap-2 jwi-border-b jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111]", children: [t.closeMapMobile, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] }), _jsx("div", { className: "jwi-h-[calc(78vh-48px)] jwi-w-full", children: mapCanvas })] }))] }) }))] }))] }));
+    return (_jsxs(_Fragment, { children: [viewMode === 'list' && (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && viewMode === 'list' && (_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry })), showMoreButton] })), searchResult?.ok && viewMode === 'map' && (_jsxs(_Fragment, { children: [!isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-flex jwi-items-center jwi-justify-center jwi-bg-black/45 jwi-p-4", onClick: () => setViewMode('list'), children: _jsxs("div", { className: `jwi-relative jwi-flex jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] jwi-scale-100 jwi-flex-col jwi-overflow-hidden ${R10} jwi-bg-white jwi-shadow-[0_20px_60px_rgba(0,0,0,0.25)] jwi-transition-all md:jwi-flex-row`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-absolute jwi-right-3 jwi-top-3 jwi-z-[1200] jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111] jwi-shadow-[0_2px_8px_rgba(0,0,0,0.12)]", "aria-label": t.closeMap, children: "\u00D7" }), _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", children: _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), isSearching ? (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-h-full jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: true, autoScrollToActive: true, maxHeightClassName: "jwi-max-h-none", headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus }), showMoreButton] }))] })) }) }), _jsx("div", { className: "jwi-relative jwi-h-[45%] jwi-w-full md:jwi-h-full md:jwi-w-[52%]", children: mapCanvas })] }) })), isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-bg-white", children: _jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111]", "aria-label": t.closeMap, children: "\u00D7" }) }), _jsx("div", { className: "jwi-min-h-0 jwi-flex-1 jwi-overflow-y-auto jwi-bg-white jwi-p-4 jwi-pb-24", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), isSearching ? (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, maxHeightClassName: "jwi-max-h-none", autoScrollToActive: true, enableInternalScroll: false, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus }), showMoreButton] }))] })) }), !showInquiryInMapPopup && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded((open) => !open), className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-20 jwi-flex jwi-h-14 jwi-items-center jwi-justify-center jwi-gap-2 jwi-rounded-t-[16px] jwi-border-t jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111] jwi-shadow-[0_-6px_20px_rgba(0,0,0,0.12)]", children: [t.openMap, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(-90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] })), mobileMapExpanded && !showInquiryInMapPopup && (_jsxs("div", { className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-30 jwi-h-[78vh] jwi-overflow-hidden jwi-rounded-t-[16px] jwi-bg-white jwi-shadow-[0_-12px_36px_rgba(0,0,0,0.22)]", children: [_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(false), className: "jwi-flex jwi-h-12 jwi-w-full jwi-items-center jwi-justify-center jwi-gap-2 jwi-border-b jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111]", children: [t.closeMapMobile, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] }), _jsx("div", { className: "jwi-h-[calc(78vh-48px)] jwi-w-full", children: mapCanvas })] }))] }) }))] }))] }));
 }

package/dist/constants.d.ts

@@ -1,3 +1,7 @@
+/** Primary Jotul brand red (CTAs, active list border, map clusters). */
+export declare const JOTUL_BRAND_PRIMARY_HEX = "#ef2b18";
+/** Slightly darker red for hover / cluster ring. */
+export declare const JOTUL_BRAND_PRIMARY_DARK_HEX = "#d92817";
 /** 10px radius for widget chrome (matches design spec). */
 export declare const R10 = "jwi-rounded-[10px]";
 export declare const FIND_DEALER_BUTTON_CLASS = "jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-[10px] jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]";

package/dist/constants.js

@@ -1,3 +1,7 @@
+/** Primary Jotul brand red (CTAs, active list border, map clusters). */
+export const JOTUL_BRAND_PRIMARY_HEX = '#ef2b18';
+/** Slightly darker red for hover / cluster ring. */
+export const JOTUL_BRAND_PRIMARY_DARK_HEX = '#d92817';
 /** 10px radius for widget chrome (matches design spec). */
 export const R10 = 'jwi-rounded-[10px]';
 export const FIND_DEALER_BUTTON_CLASS = `jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center ${R10} jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]`;

package/dist/images/dealer-pin.svg

@@ -3,9 +3,14 @@
   <defs>
     <style>
       .cls-1 {
-        fill: #ef2b18;
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #e20000;
       }
     </style>
   </defs>
-  <path class="cls-1" d="M8,0C3.58,0,0,3.58,0,8s8,12,8,12c0,0,8-7.58,8-12S12.42,0,8,0ZM7.91,11.35c-1.8,0-3.26-1.46-3.26-3.26s1.46-3.26,3.26-3.26,3.26,1.46,3.26,3.26-1.46,3.26-3.26,3.26Z"/>
-</svg>
+  <path class="cls-2" d="M8,0C3.58,0,0,3.58,0,8s8,12,8,12c0,0,8-7.58,8-12S12.42,0,8,0Z"/>
+  <path class="cls-1" d="M9.2,8.46c-.05.33-.16.44-.63.97-.41.45-.33.93-.33.93-1.06-.45-1.26-1.57-1.26-1.57-.32.53-.09,1.25-.09,1.25-.25-.15-.72-.33-1.01-.49-.46-.25-.48-.52-.48-.52-.18.52.04.93.04.93,0,0-1.04-.34-.91-1.41.11-.91.85-1.33.85-1.33,0,0-.07.77.55,1.04,0,0-.06-.79.34-1.43.49-.77,1.26-1,1.6-1.03,0,0-.34.28-.28.84.06.47.29.66.26,1.26,0,0,.44-.17.65-.71.18-.46.08-.92.08-.92,0,0,.97.19,1.38.93.27.48.28,1.05.28,1.05.59-.27.49-1.04.49-1.04,0,0,.74.42.85,1.33.14,1.07-.9,1.39-.9,1.39,0,0,.24-.42.06-.93,0,0-.24.65-1.53.93,0,0,.43-.71.01-1.5Z"/>
+</svg>

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-export type JotulWidgetType = 'productPage' | 'dealerFinder' | 'warrantyForm';
+export type JotulWidgetType = 'productPage' | 'findDealerDrawer' | 'dealerFinder' | 'warrantyForm';
 export type WidgetAuthClientResponse = {
     apiVersion?: string;
     ok: boolean;
@@ -44,7 +44,7 @@ export type CheckWidgetAuthorizationOptions = {
     market?: string;
     brands?: string[];
 };
-/** CSS values for primary CTA buttons (find dealer, send inquiry, etc.). */
+/** CSS values for primary CTAs; also used for map cluster bubbles (`backgroundColor` fill, `textColor` on the count). */
 export type JotulWidgetButtonStyling = {
     borderRadius?: string;
     backgroundColor?: string;
@@ -53,7 +53,7 @@ export type JotulWidgetButtonStyling = {
 export type JotulWidgetStyling = {
     button?: JotulWidgetButtonStyling;
 };
-export type ProductPageTriggerRenderProps = {
+export type WidgetTriggerRenderProps = {
     onOpen: () => void;
     isLoading: boolean;
     label: string;
@@ -72,11 +72,17 @@ export type JotulWidgetProps = {
     brands?: string[];
     styling?: JotulWidgetStyling;
     /**
-     * Optional custom trigger for `productPage` widgets.
+     * Optional custom trigger for widgets with an open action (`productPage`, `findDealerDrawer`).
      * - Pass a ReactNode for simple custom markup.
      * - Pass a render function to fully control button behavior and bind `onOpen`.
      */
-    productPageTrigger?: ReactNode | ((props: ProductPageTriggerRenderProps) => ReactNode);
+    trigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
+    /** @deprecated Use `trigger` instead. */
+    productPageTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
+    /**
+     * @deprecated Use `trigger` instead.
+     */
+    findDealerDrawerTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
 };
 export type DealerRecord = Record<string, unknown>;
 export type InquiryFormValues = {

package/dist/utils/cssColor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Best-effort rgba() for inline map cluster styles. Hex #rgb / #rrggbb supported.
+ * Other values (e.g. `rgb()`, named colors) are returned unchanged (alpha ignored).
+ */
+export declare function cssColorWithAlpha(color: string, alpha: number): string;

package/dist/utils/cssColor.js

@@ -0,0 +1,31 @@
+/**
+ * Parse #rgb / #rrggbb to channels. Returns null if not a hex color.
+ */
+function parseHexRgb(value) {
+    if (!value.startsWith('#'))
+        return null;
+    let hex = value.slice(1);
+    if (hex.length === 3) {
+        hex = hex
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    if (hex.length !== 6)
+        return null;
+    const num = Number.parseInt(hex, 16);
+    if (!Number.isFinite(num))
+        return null;
+    return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
+}
+/**
+ * Best-effort rgba() for inline map cluster styles. Hex #rgb / #rrggbb supported.
+ * Other values (e.g. `rgb()`, named colors) are returned unchanged (alpha ignored).
+ */
+export function cssColorWithAlpha(color, alpha) {
+    const rgb = parseHexRgb(color.trim());
+    if (rgb != null) {
+        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+    }
+    return color.trim();
+}

package/dist/utils/dealerMapClustering.d.ts

@@ -0,0 +1,28 @@
+/** Max distance between two dealers to treat them as in the same “pile” when grouping. */
+export declare const MARKER_CLUSTER_LINK_KM = 0.5;
+/**
+ * Connected-component minimum size before leaflet.markercluster may own those pins. `1` keeps every
+ * dealer in the plugin so low zoom uses normal pixel-distance clusters; higher values defer sparse
+ * groups to plain markers (fewer bubbles, more individual pins at country scale).
+ */
+export declare const MARKER_CLUSTER_MIN_GROUP = 1;
+export type MapClusterPoint = {
+    latitude: number;
+    longitude: number;
+    dealerName: string;
+};
+/** Great-circle distance in kilometres. */
+export declare function dealerPairDistanceKm(a: MapClusterPoint, b: MapClusterPoint): number;
+/**
+ * Split pins between the cluster plugin and plain `featureGroup`. With
+ * {@link MARKER_CLUSTER_MIN_GROUP} set to `1`, all points are returned in {@link clustered} and the
+ * plugin handles zoom-based merging; raising the minimum leaves small geographic components as
+ * standalone pins.
+ */
+export declare function partitionDealersForMarkerClusterPlugin<P extends MapClusterPoint>(points: P[], opts: {
+    linkKm: number;
+    minGroupSize: number;
+}): {
+    clustered: P[];
+    standalone: P[];
+};

package/dist/utils/dealerMapClustering.js

@@ -0,0 +1,71 @@
+/** Max distance between two dealers to treat them as in the same “pile” when grouping. */
+export const MARKER_CLUSTER_LINK_KM = 0.5;
+/**
+ * Connected-component minimum size before leaflet.markercluster may own those pins. `1` keeps every
+ * dealer in the plugin so low zoom uses normal pixel-distance clusters; higher values defer sparse
+ * groups to plain markers (fewer bubbles, more individual pins at country scale).
+ */
+export const MARKER_CLUSTER_MIN_GROUP = 1;
+/** Great-circle distance in kilometres. */
+export function dealerPairDistanceKm(a, b) {
+    const R = 6371;
+    const dLat = ((b.latitude - a.latitude) * Math.PI) / 180;
+    const dLon = ((b.longitude - a.longitude) * Math.PI) / 180;
+    const lat1 = (a.latitude * Math.PI) / 180;
+    const lat2 = (b.latitude * Math.PI) / 180;
+    const sinDLat = Math.sin(dLat / 2);
+    const sinDLon = Math.sin(dLon / 2);
+    const h = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon;
+    return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+/**
+ * Split pins between the cluster plugin and plain `featureGroup`. With
+ * {@link MARKER_CLUSTER_MIN_GROUP} set to `1`, all points are returned in {@link clustered} and the
+ * plugin handles zoom-based merging; raising the minimum leaves small geographic components as
+ * standalone pins.
+ */
+export function partitionDealersForMarkerClusterPlugin(points, opts) {
+    const { linkKm, minGroupSize } = opts;
+    if (points.length === 0)
+        return { clustered: [], standalone: [] };
+    const n = points.length;
+    const adj = Array.from({ length: n }, () => []);
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+            if (dealerPairDistanceKm(points[i], points[j]) <= linkKm) {
+                adj[i].push(j);
+                adj[j].push(i);
+            }
+        }
+    }
+    const clusteredIdx = new Set();
+    const standaloneIdx = new Set();
+    const seen = new Array(n).fill(false);
+    for (let start = 0; start < n; start++) {
+        if (seen[start])
+            continue;
+        const stack = [start];
+        const component = [];
+        seen[start] = true;
+        while (stack.length > 0) {
+            const u = stack.pop();
+            component.push(u);
+            for (const v of adj[u]) {
+                if (!seen[v]) {
+                    seen[v] = true;
+                    stack.push(v);
+                }
+            }
+        }
+        const target = component.length >= minGroupSize ? clusteredIdx : standaloneIdx;
+        for (const idx of component)
+            target.add(idx);
+    }
+    const clustered = [...clusteredIdx]
+        .sort((a, b) => a - b)
+        .map((idx) => points[idx]);
+    const standalone = [...standaloneIdx]
+        .sort((a, b) => a - b)
+        .map((idx) => points[idx]);
+    return { clustered, standalone };
+}

package/dist/utils/loadLeafletMarkerCluster.d.ts

@@ -0,0 +1,5 @@
+/**
+ * leaflet.markercluster's build expects a global `L`. ESM `import('leaflet')` does not set `globalThis.L`,
+ * so temporarily assign the loaded namespace during the side-effect import.
+ */
+export declare function loadLeafletMarkerCluster(leaf: Record<string, unknown>): Promise<void>;

package/dist/utils/loadLeafletMarkerCluster.js

@@ -0,0 +1,20 @@
+/**
+ * leaflet.markercluster's build expects a global `L`. ESM `import('leaflet')` does not set `globalThis.L`,
+ * so temporarily assign the loaded namespace during the side-effect import.
+ */
+export async function loadLeafletMarkerCluster(leaf) {
+    const g = globalThis;
+    const saved = g.L;
+    g.L = leaf;
+    try {
+        await import('leaflet.markercluster');
+    }
+    finally {
+        if (saved === undefined) {
+            Reflect.deleteProperty(g, 'L');
+        }
+        else {
+            g.L = saved;
+        }
+    }
+}

package/dist/utils/markerClusterIconHtml.d.ts

@@ -0,0 +1,2 @@
+/** HTML for leaflet.markercluster count bubble; colors come from `styling.button` (background + text). */
+export declare function markerClusterCountIconHtml(childCount: number, brandFillCss: string, brandLabelCss: string): string;

package/dist/utils/markerClusterIconHtml.js

@@ -0,0 +1,7 @@
+import { cssColorWithAlpha } from './cssColor';
+/** HTML for leaflet.markercluster count bubble; colors come from `styling.button` (background + text). */
+export function markerClusterCountIconHtml(childCount, brandFillCss, brandLabelCss) {
+    const outer = cssColorWithAlpha(brandFillCss, 0.38);
+    const inner = cssColorWithAlpha(brandFillCss, 0.92);
+    return `<div style="width:40px;height:40px;background-clip:padding-box;border-radius:20px;background-color:${outer};box-shadow:0 2px 10px rgba(17,17,17,.12)"><div style="width:30px;height:30px;margin:5px;text-align:center;border-radius:15px;font:600 12px system-ui,-apple-system,'Segoe UI',sans-serif;background-color:${inner};color:${brandLabelCss}"><span style="line-height:30px;display:inline-block;width:100%">${childCount}</span></div></div>`;
+}

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { DealerRecord, InquiryFormValues, JotulWidgetType } from './types';
+import type { DealerRecord, DealerSearchResponse, InquiryFormValues, JotulWidgetType } from './types';
 import type { WidgetStrings } from './i18n/widgetStrings';
 export declare const VALID_WIDGET_TYPES: JotulWidgetType[];
 export declare function isWidgetType(value: string | undefined): value is JotulWidgetType;
@@ -6,6 +6,8 @@ export declare function asText(value: unknown): string | null;
 export declare function formatDistance(dealer: DealerRecord): string | null;
 export declare function getDealerKey(dealer: DealerRecord, index: number): string;
 export declare function getDealerName(dealer: DealerRecord, unknownLabel: string): string;
+/** True when the tapped map pin matches a dealer already in the current successful search payload. */
+export declare function isDealerInSearchResult(dealerLabel: string, searchResult: DealerSearchResponse | null, unknownDealerLabel: string): boolean;
 export declare function getDealerAddressLines(dealer: DealerRecord): string[];
 export declare function createInquiryFormValues(productName: string | undefined, dealerName: string): InquiryFormValues;
 export declare function isValidEmail(value: string): boolean;