Refresh UI components and showcase; release updated framework packages

packages/ui/components/Map.wrn

@@ -14,9 +14,30 @@ component Map {
     description: string = ""
     items: unknown[] = []
     variant: string = "default"
+    provider: string = "openstreetmap"
+    apiKey: string = ""
+    query: string = ""
+    latitude: number = 12.9716
+    longitude: number = 77.5946
+    zoomLevel: number = 13
+    mapType: string = "roadmap"
+    imageSrc: string = ""
+    imageAlt: string = "Map background"
     class: string = ""
   }
 
+  state imageZoom: number = 1
+  state selectedLabel: string = ""
+  functions {
+    shared function mapUrl() {
+      if (provider === "google") { return "https://www.google.com/maps/embed/v1/place?key=" + encodeURIComponent(apiKey) + "&q=" + encodeURIComponent(query || latitude + "," + longitude) + "&zoom=" + Math.max(1, Math.min(21, zoomLevel)) + "&maptype=" + (mapType === "satellite" ? "satellite" : "roadmap") }
+      var span = 360 / Math.pow(2, Math.max(1, Math.min(18, zoomLevel)))
+      return "https://www.openstreetmap.org/export/embed.html?bbox=" + (longitude - span) + "," + (latitude - span / 2) + "," + (longitude + span) + "," + (latitude + span / 2) + "&layer=mapnik&marker=" + latitude + "," + longitude
+    }
+
+    client function changeZoom(direction) { imageZoom = Math.max(1, Math.min(3, imageZoom + direction * .25)); output.zoom({ level: imageZoom, direction: direction > 0 ? "in" : "out" }) }
+    client function chooseMarker(item) { selectedLabel = item.label || item.title || "Location"; output.markerClick(item); output.select(item) }
+  }
   view {
     <section
       data-ui-component="Map"
@@ -42,6 +63,10 @@ component Map {
         class="wrn-map__viewport"
         data-size='{size}'
       >
+        {#if !imageSrc}
+          {#if provider === "google" && !apiKey}<p class="wrn-map__selection">Add your Google Maps Embed API key to display this map.</p>{:else}<iframe title="{title || 'Location map'}" src="{mapUrl()}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen style="width:100%;height:100%;min-height:320px;border:0"></iframe>{/if}
+        {:else}<div class="wrn-map__canvas" style="transform:scale({imageZoom})">
+        {#if imageSrc}<img class="wrn-map__image" src="{imageSrc}" alt="{imageAlt}" />{/if}
         <div
           class="wrn-map__grid"
           style="background-image: linear-gradient(var(--wrn-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wrn-color-border) 1px, transparent 1px); background-size: 32px 32px;"
@@ -59,19 +84,21 @@ component Map {
               aria-label='{item.label || item.title || "Map marker"}'
               class="wrn-map__marker"
               style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
-              @click='output.markerClick(item); output.select(item)'
+              @click='chooseMarker(item)'
             >
               <span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
             </button>
           {/each}
         {/if}
 
+        </div>
+        {#if selectedLabel}<output class="wrn-map__selection">{selectedLabel}</output>{/if}
         <div class="wrn-map__controls">
           <button
             type="button"
             aria-label="Zoom in"
             class="wrn-map__control"
-            @click='output.zoom({ direction: "in" })'
+            @click='changeZoom(1)'
           >
             <span class="icon-[lucide--plus] wrn-map__control-icon" aria-hidden="true"></span>
           </button>
@@ -79,16 +106,22 @@ component Map {
             type="button"
             aria-label="Zoom out"
             class="wrn-map__control"
-            @click='output.zoom({ direction: "out" })'
+            @click='changeZoom(-1)'
           >
             <span class="icon-[lucide--minus] wrn-map__control-icon" aria-hidden="true"></span>
           </button>
-        </div>
+        </div>{/if}
       </div>
     </section>
   }
 
   style {
+    .wrn-map__canvas { position:absolute; inset:0; transition:transform 160ms ease; }
+    .wrn-map__image { width:100%; height:100%; object-fit:cover; }
+    .wrn-map__canvas:has(.wrn-map__image) .wrn-map__grid { display:none; }
+    .wrn-map__selection { position:absolute; inset-inline-start:1rem; bottom:1rem; padding:.5rem .75rem; border-radius:6px; background:var(--wrn-color-surface); color:var(--wrn-color-text); font-size:.875rem; }
+    .wrn-map__marker > span { width:1.1rem; height:1.1rem; }
+
     .wrn-map { overflow: hidden; border: 1px solid var(--wrn-color-border); border-radius: calc(var(--wrn-radius) * 1.5); background: var(--wrn-color-surface-raised); box-shadow: var(--wrn-shadow-1); }
     .wrn-map__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--wrn-color-border); }
     .wrn-map__title { color: var(--wrn-color-text); font-size: 1.125rem; font-weight: 700; }