@aiaiai-pt/design-system 0.5.6 → 0.5.7

package/components/GeoSearch.svelte

@@ -1,25 +1,23 @@
 <!--
   @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.
+  Bidirectional geocoding input powered by Nominatim (OpenStreetMap).
+  Forward: type address → get coordinates.
+  Reverse: set `coords` prop → shows resolved address.
   Consumes --combobox-* tokens from components.css.
 
-  @example Basic
+  @example Forward geocoding
   <GeoSearch onlocation={(lon, lat) => console.log(lon, lat)} />
 
-  @example With label and bounding box bias
+  @example Bidirectional (MapPicker sets coords on click → address shows)
   <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; }}
+    bind:coords={pickedCoords}
+    onlocation={(lon, lat) => { mapCenter = [lon, lat]; }}
   />
 
-  @example Custom provider URL
+  @example With viewbox bias
   <GeoSearch
-    providerUrl="https://my-nominatim.example.com/search"
+    viewbox={[-9.5, 38.5, -8.8, 39.0]}
     onlocation={(lon, lat) => console.log(lon, lat)}
   />
 -->
@@ -45,6 +43,8 @@
     viewbox = undefined,
     /** @type {((lon: number, lat: number, item: { label: string, value: string }) => void) | undefined} */
     onlocation = undefined,
+    /** @type {[number, number] | undefined} — set externally to reverse-geocode and show address */
+    coords = $bindable(undefined),
     /** @type {string} */
     class: className = '',
     ...rest
@@ -55,6 +55,36 @@
   let loading = $state(false);
   let value = $state('');
   let debounceTimer = 0;
+  let lastReversed = '';
+
+  // Reverse geocode when coords change (map click or initial load)
+  $effect(() => {
+    if (!coords) return;
+    const key = `${coords[0]},${coords[1]}`;
+    if (key === lastReversed) return;
+    lastReversed = key;
+    reverseGeocode(coords[0], coords[1]);
+  });
+
+  async function reverseGeocode(lon, lat) {
+    loading = true;
+    try {
+      const base = providerUrl.replace('/search', '/reverse');
+      const resp = await fetch(`${base}?lon=${lon}&lat=${lat}&format=json`, {
+        headers: { 'Accept': 'application/json' },
+      });
+      if (!resp.ok) return;
+      const result = await resp.json();
+      if (result.display_name) {
+        value = `${lon},${lat}`;
+        items = [{ value: `${lon},${lat}`, label: result.display_name, description: result.type?.replace(/_/g, ' ') ?? '' }];
+      }
+    } catch {
+      // Reverse geocoding failed — leave search bar as-is
+    } finally {
+      loading = false;
+    }
+  }
 
   /** Nominatim rate limit: 1 req/sec. Debounce at 400ms. */
   function handleSearch(query) {

package/components/MapPicker.svelte

@@ -4,11 +4,15 @@
   Interactive map for selecting a point or drawing a polygon.
   OpenLayers with configurable tiles and Draw interaction.
   Draw sketch styled with DS tokens (not OL blue default).
+  Built-in GeoSearch (Nominatim) for address lookup + pan.
   Consumes --map-* tokens from components.css.
 
-  @example Point selection
+  @example Point selection with search
   <MapPicker mode="point" onchange={(coords) => console.log(coords)} />
 
+  @example Without search
+  <MapPicker mode="point" search={false} onchange={(coords) => console.log(coords)} />
+
   @example Polygon drawing
   <MapPicker mode="polygon" onchange={(coords) => console.log(coords)} />
 -->
@@ -19,6 +23,7 @@
 <script>
   import { fromLonLat, toLonLat } from 'ol/proj.js';
   import { createTileLayer, createMapStyles, watchTheme, renderMapError } from './map-utils.js';
+  import GeoSearch from './GeoSearch.svelte';
 
   let {
     /** @type {'point' | 'polygon'} */
@@ -37,6 +42,12 @@
     error = undefined,
     /** @type {boolean} */
     disabled = false,
+    /** @type {boolean} — show GeoSearch bar above map */
+    search = true,
+    /** @type {string} — Nominatim-compatible search endpoint */
+    searchProviderUrl = undefined,
+    /** @type {[number, number, number, number] | undefined} — viewbox bias for search */
+    searchViewbox = undefined,
     /** @type {import('./map-utils.js').TileSourceConfig} */
     tileSource = { type: 'osm' },
     /** @type {((coords: [number, number] | number[][]) => void) | undefined} */
@@ -57,6 +68,45 @@
 
   /** @type {HTMLElement | undefined} */
   let container = $state();
+  /** @type {import('ol/Map.js').default | undefined} */
+  let _map = $state();
+  /** @type {any} — VectorSource for placing markers via search */
+  let _vectorSource;
+  /** @type {any} */
+  let _Feature;
+  /** @type {any} */
+  let _Point;
+
+  // Bidirectional coords for GeoSearch: search → map, map click → reverse geocode
+  let searchCoords = $state(/** @type {[number, number] | undefined} */ (undefined));
+  let initialReverseDone = false;
+
+  // Set searchCoords from initial value (triggers reverse geocode in GeoSearch)
+  $effect(() => {
+    if (!initialReverseDone && value) {
+      searchCoords = /** @type {[number, number]} */ ([...value]);
+      initialReverseDone = true;
+    }
+  });
+
+  function handleGeoLocation(lon, lat) {
+    if (!_map) return;
+    const view = _map.getView();
+    if (view) view.animate({ center: fromLonLat([lon, lat]), zoom: 16, duration: 400 });
+
+    // In point mode, also place a marker and emit the value
+    if (mode === 'point' && _vectorSource && _Feature && _Point) {
+      _vectorSource.clear();
+      _vectorSource.addFeature(new _Feature({ geometry: new _Point(fromLonLat([lon, lat])) }));
+      value = [lon, lat];
+      onchange?.([lon, lat]);
+    }
+  }
+
+  /** Called by MapPicker when user clicks to place a point — triggers reverse geocoding */
+  function handleMapPointPlaced(lon, lat) {
+    searchCoords = [lon, lat];
+  }
 
   $effect(() => {
     if (!container || disabled) return;
@@ -95,6 +145,9 @@
       if (disposed) return;
 
       const vectorSource = new VectorSource();
+      _vectorSource = vectorSource;
+      _Feature = Feature;
+      _Point = Point;
 
       if (value && mode === 'point') {
         vectorSource.addFeature(new Feature({ geometry: new Point(fromLonLat(value)) }));
@@ -133,6 +186,7 @@
           const coords = /** @type {import('ol/geom/Point.js').default} */ (geom).getCoordinates();
           const wgs84 = /** @type {[number, number]} */ (toLonLat(coords));
           value = wgs84;
+          handleMapPointPlaced(wgs84[0], wgs84[1]);
           onchange?.(wgs84);
         } else {
           const coords = /** @type {import('ol/geom/Polygon.js').default} */ (geom).getCoordinates()[0];
@@ -145,14 +199,14 @@
 
       map = new OlMap({
         target: container,
-        layers: [tileLayer, vectorLayer],
-        view: new View({
+        layers: [tileLayer, vectorLayer],        view: new View({
           center: initialCenter,
           zoom,
         }),
       });
 
       map.addInteraction(drawInteraction);
+      _map = map;
 
       disposeTheme = watchTheme(() => {
         styles.refresh();
@@ -173,6 +227,17 @@
     <label class="map-picker-label" for={pickerId}>{label}</label>
   {/if}
 
+  {#if search && !disabled}
+    <GeoSearch
+      placeholder="Search address or place..."
+      providerUrl={searchProviderUrl}
+      viewbox={searchViewbox}
+      onlocation={handleGeoLocation}
+      bind:coords={searchCoords}
+      size="sm"
+    />
+  {/if}
+
   <div
     bind:this={container}
     id={pickerId}

package/package.json

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