@aiaiai-pt/design-system 0.5.3 → 0.5.5

package/components/GeoSearch.svelte

@@ -0,0 +1,129 @@
+<!--
+  @component GeoSearch
+
+  Geocoding search input powered by Nominatim (OpenStreetMap).
+  Wraps Combobox with built-in address/place search and debounced API calls.
+  Emits lon/lat coordinates when a result is selected.
+  Consumes --combobox-* tokens from components.css.
+
+  @example Basic
+  <GeoSearch onlocation={(lon, lat) => console.log(lon, lat)} />
+
+  @example With label and bounding box bias
+  <GeoSearch
+    label="Search location"
+    placeholder="City, address, or place..."
+    viewbox={[-9.5, 38.5, -8.8, 39.0]}
+    onlocation={(lon, lat) => { mapCenter = [lon, lat]; mapZoom = 15; }}
+  />
+
+  @example Custom provider URL
+  <GeoSearch
+    providerUrl="https://my-nominatim.example.com/search"
+    onlocation={(lon, lat) => console.log(lon, lat)}
+  />
+-->
+<script>
+  import Combobox from './Combobox.svelte';
+
+  let {
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string} */
+    placeholder = 'Search address or place...',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string} */
+    size = 'md',
+    /** @type {string} — Nominatim-compatible search endpoint */
+    providerUrl = 'https://nominatim.openstreetmap.org/search',
+    /** @type {[number, number, number, number] | undefined} — [minLon, minLat, maxLon, maxLat] bias */
+    viewbox = undefined,
+    /** @type {((lon: number, lat: number, item: { label: string, value: string }) => void) | undefined} */
+    onlocation = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @type {import('./Combobox.svelte').ComboboxItem[]} */
+  let items = $state([]);
+  let loading = $state(false);
+  let value = $state('');
+  let debounceTimer = 0;
+
+  /** Nominatim rate limit: 1 req/sec. Debounce at 400ms. */
+  function handleSearch(query) {
+    clearTimeout(debounceTimer);
+    if (!query || query.length < 3) {
+      items = [];
+      return;
+    }
+    loading = true;
+    debounceTimer = setTimeout(() => fetchResults(query), 400);
+  }
+
+  async function fetchResults(query) {
+    try {
+      const params = new URLSearchParams({
+        q: query,
+        format: 'json',
+        limit: '6',
+        addressdetails: '1',
+      });
+      if (viewbox) {
+        params.set('viewbox', viewbox.join(','));
+        params.set('bounded', '0'); // bias, not restrict
+      }
+      const resp = await fetch(`${providerUrl}?${params}`, {
+        headers: { 'Accept': 'application/json' },
+      });
+      if (!resp.ok) {
+        items = [];
+        return;
+      }
+      /** @type {Array<{lat: string, lon: string, display_name: string, type: string, class: string}>} */
+      const results = await resp.json();
+      items = results.map((r) => ({
+        value: `${r.lon},${r.lat}`,
+        label: r.display_name,
+        description: r.type !== 'yes' ? r.type.replace(/_/g, ' ') : r.class.replace(/_/g, ' '),
+      }));
+    } catch {
+      items = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleChange(val) {
+    if (!val) return;
+    const [lonStr, latStr] = val.split(',');
+    const lon = parseFloat(lonStr);
+    const lat = parseFloat(latStr);
+    if (!Number.isNaN(lon) && !Number.isNaN(lat) && onlocation) {
+      const selectedItem = items.find((i) => i.value === val);
+      onlocation(lon, lat, selectedItem ?? { label: '', value: val });
+    }
+  }
+</script>
+
+<Combobox
+  {label}
+  {placeholder}
+  {disabled}
+  {error}
+  {help}
+  {size}
+  {items}
+  {loading}
+  bind:value
+  onsearch={handleSearch}
+  onchange={handleChange}
+  class={className}
+  {...rest}
+/>

package/components/GeoSearch.svelte.d.ts

@@ -0,0 +1,54 @@
+export default GeoSearch;
+type GeoSearch = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * GeoSearch
+ *
+ * Geocoding search input powered by Nominatim (OpenStreetMap).
+ * Wraps Combobox with built-in address/place search and debounced API calls.
+ * Emits lon/lat coordinates when a result is selected.
+ * Consumes --combobox-* tokens from components.css.
+ *
+ * @example Basic
+ * <GeoSearch onlocation={(lon, lat) => console.log(lon, lat)} />
+ *
+ * @example With label and bounding box bias
+ * <GeoSearch
+ *   label="Search location"
+ *   placeholder="City, address, or place..."
+ *   viewbox={[-9.5, 38.5, -8.8, 39.0]}
+ *   onlocation={(lon, lat) => { mapCenter = [lon, lat]; mapZoom = 15; }}
+ * />
+ *
+ * @example Custom provider URL
+ * <GeoSearch
+ *   providerUrl="https://my-nominatim.example.com/search"
+ *   onlocation={(lon, lat) => console.log(lon, lat)}
+ * />
+ */
+declare const GeoSearch: import("svelte").Component<{
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: any;
+    help?: any;
+    size?: string;
+    providerUrl?: string;
+    viewbox?: any;
+    onlocation?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    label?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: any;
+    help?: any;
+    size?: string;
+    providerUrl?: string;
+    viewbox?: any;
+    onlocation?: any;
+    class?: string;
+} & Record<string, any>;

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/components/index.js

@@ -96,6 +96,7 @@ export { default as MapPicker } from "./MapPicker.svelte";
 export { default as MapCluster } from "./MapCluster.svelte";
 export { default as MapHeatmap } from "./MapHeatmap.svelte";
 export { default as MapPopup } from "./MapPopup.svelte";
+export { default as GeoSearch } from "./GeoSearch.svelte";
 
 // Scheduling
 export { default as Calendar } from "./Calendar.svelte";

package/package.json

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