@aiaiai-pt/design-system 0.26.0 → 0.28.0

package/components/MapCluster.svelte

@@ -310,7 +310,14 @@
         if (!data) return;
         if (popup) {
           selected = data;
-          if (coords) _popupOverlay?.setPosition(coords);
+          if (coords) {
+            _popupOverlay?.setPosition(coords);
+            // Fly TO the clicked marker: animate the view so the marker (and its
+            // anchored popup) is centred — a clear "the map moved to what I
+            // tapped" gesture, not a subtle edge-nudge. The small ficha-resumo
+            // card opens above the now-centred marker and stays in view.
+            map?.getView().animate({ center: coords, duration: 400 });
+          }
         } else {
           onclick?.(data);
         }
@@ -330,25 +337,31 @@
               (/** @type {any} */ (feature.getGeometry()))?.getCoordinates(),
             );
           } else if (clustered?.length > 1) {
-            // A cluster of (near-)IDENTICAL coordinates can never split by
-            // zooming (stacked reports at one point are common in civic
-            // data) — open the first item instead of zoom-looping forever.
+            // A cluster ALWAYS expands first — zoom in toward it so the citizen
+            // picks an individual marker; only a SINGLE marker opens a popup.
+            // The lone exception is a genuinely STACKED pile (near-identical
+            // coords — stacked reports at one point are common in civic data)
+            // that can't split by zooming: once we're already at max zoom and
+            // it's still piled, fall back to opening the first item so it stays
+            // reachable instead of zoom-looping forever.
+            const view = map?.getView();
+            const currentZoom = view?.getZoom() ?? zoom;
+            const maxZoom = view?.getMaxZoom?.() ?? 19;
             const coords = clustered.map((f) => f.getGeometry()?.getCoordinates()).filter(Boolean);
             const lons = coords.map((c) => c[0]);
             const lats = coords.map((c) => c[1]);
             const spread = Math.max(...lons) - Math.min(...lons) + (Math.max(...lats) - Math.min(...lats));
-            if (spread < 1) { // metres in web-mercator units — a stacked pile
+            const stacked = spread < 1; // metres in web-mercator units
+            if (stacked && currentZoom >= maxZoom - 0.5) {
               selectMarker(
                 clustered[0].get('markerData'),
                 (/** @type {any} */ (feature.getGeometry()))?.getCoordinates(),
               );
               return;
             }
-            const view = map?.getView();
-            const currentZoom = view?.getZoom() ?? zoom;
             view?.animate({
               center: feature.getGeometry()?.getCoordinates(),
-              zoom: currentZoom + 2,
+              zoom: Math.min(currentZoom + 2, maxZoom),
               duration: 300,
             });
           }

package/components/MapPicker.svelte

@@ -139,6 +139,23 @@
 
   const boundaryRings = $derived(boundaryToRings(boundary));
 
+  // Recentre when `center` arrives or changes after mount. Consumers commonly
+  // resolve the centre asynchronously (after a boundary/config fetch), and the
+  // map-init effect reads `center` only PAST an `await`, so it is not tracked
+  // as a dependency there — without this the late centre is silently dropped
+  // and the map sits on its initial view (e.g. [0,0]). Skips once the user has
+  // placed a pin (`value`) so a late centre never yanks the map out from under
+  // a selection, and skips the [0,0] "unset" sentinel.
+  $effect(() => {
+    const c = center;
+    const map = _map;
+    if (!map || value) return;
+    if (!Array.isArray(c) || c.length !== 2) return;
+    if (c[0] === 0 && c[1] === 0) return;
+    const view = map.getView();
+    if (view) view.setCenter(fromLonLat(/** @type {[number, number]} */ (c)));
+  });
+
   /** @param {[number, number]} coords */
   function checkBoundary(coords) {
     if (!boundaryRings.length || !onoutofbounds) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",