@aiaiai-pt/design-system 0.5.4 → 0.5.5

package/components/MapCluster.svelte

@@ -39,6 +39,37 @@
   /** @type {HTMLElement | undefined} */
   let container = $state();
 
+  // Hoisted references for reactive effects
+  /** @type {import('ol/Map.js').default | undefined} */
+  let _map = $state();
+  /** @type {any} — VectorSource */
+  let _vectorSource = $state();
+  /** @type {any} — Feature constructor */
+  let _Feature;
+  /** @type {any} — Point constructor */
+  let _Point;
+
+  // Reactive: animate to new center/zoom when props change
+  $effect(() => {
+    if (!_map) return;
+    const view = _map.getView();
+    if (!view) return;
+    const targetCenter = fromLonLat(center);
+    view.animate({ center: targetCenter, zoom, duration: 300 });
+  });
+
+  // Reactive: update markers when props change
+  $effect(() => {
+    if (!_vectorSource || !_Feature || !_Point) return;
+    const features = markers.map(m => {
+      const f = new _Feature({ geometry: new _Point(fromLonLat([m.lon, m.lat])) });
+      f.set('markerData', m);
+      return f;
+    });
+    _vectorSource.clear();
+    _vectorSource.addFeatures(features);
+  });
+
   $effect(() => {
     if (!container) return;
 
@@ -86,6 +117,11 @@
       const vectorSource = new VectorSource({ features });
       const clusterSource = new Cluster({ distance, source: vectorSource });
 
+      // Store refs for reactive effects
+      _vectorSource = vectorSource;
+      _Feature = Feature;
+      _Point = Point;
+
       const clusterLayer = new VectorLayer({
         source: clusterSource,
         style: (feature) => {
@@ -133,6 +169,7 @@
           zoom,
         }),
       });
+      _map = map;
 
       // Hover: show tooltip
       map.on('pointermove', (evt) => {

package/package.json

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