feat(map): add server-side h3 clustering and hover highlight

- Add useClusteredNodes composable for fetching clustered nodes
- Update CatalogMap to support server-side clustering mode
- Add bounds-change event for fetching clusters on map move/zoom
- Add hover event to HubCard for marker highlighting
- Update hubs/map page to use new clustering system

app/pages/catalog/hubs/map.vue

@@ -20,6 +20,7 @@
             selectable
             :is-selected="selectedItemId === hub.uuid"
             @select="selectItem(hub)"
+            @hover="(hovered) => onHubHover(hub.uuid, hovered)"
           />
         </template>
       </CatalogMapSidebar>
@@ -28,14 +29,19 @@
     <CatalogMap
       ref="mapRef"
       map-id="hubs-fullscreen-map"
-      :items="itemsWithCoords"
+      :clustered-points="clusteredNodes"
+      use-server-clustering
+      :hovered-item-id="hoveredItemId"
       point-color="#10b981"
       @select-item="onMapSelectItem"
+      @bounds-change="onBoundsChange"
     />
   </NuxtLayout>
 </template>
 
 <script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
 definePageMeta({
   layout: false
 })
@@ -48,14 +54,16 @@ const {
   selectedFilter,
   filters,
   isLoading,
-  itemsWithCoords,
   init
 } = useCatalogHubs()
 
 await init()
 
+const { clusteredNodes, fetchClusters } = useClusteredNodes()
+
 const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
 const selectedItemId = ref<string | null>(null)
+const hoveredItemId = ref<string | null>(null)
 
 const selectItem = (item: any) => {
   selectedItemId.value = item.uuid
@@ -67,4 +75,12 @@ const selectItem = (item: any) => {
 const onMapSelectItem = (uuid: string) => {
   selectedItemId.value = uuid
 }
+
+const onHubHover = (uuid: string | undefined | null, hovered: boolean) => {
+  hoveredItemId.value = hovered && uuid ? uuid : null
+}
+
+const onBoundsChange = (bounds: MapBounds) => {
+  fetchClusters(bounds)
+}
 </script>