@unabridged/midwest 0.24.3 → 0.24.4

package/app/assets/javascript/midwest.js

@@ -3299,6 +3299,7 @@ class FormLiveSummary extends Controller {
     this.form?.addEventListener("midwest-autocomplete:change", this.render);
     this.form?.addEventListener("midwest-color-picker:update", this.render);
     this.form?.addEventListener("midwest-repeatable:change", this.render);
+    this.form?.addEventListener("midwest-address:geocode", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
@@ -3306,6 +3307,7 @@ class FormLiveSummary extends Controller {
     this.form?.removeEventListener("midwest-autocomplete:change", this.render);
     this.form?.removeEventListener("midwest-color-picker:update", this.render);
     this.form?.removeEventListener("midwest-repeatable:change", this.render);
+    this.form?.removeEventListener("midwest-address:geocode", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3323,7 +3325,7 @@ class FormLiveSummary extends Controller {
     }
     const dl = document.createElement("dl");
     dl.className = "midwest-form-live-summary-list";
-    fields.forEach(({ label, value, swatchColor }) => {
+    fields.forEach(({ label, value, swatchColor, details }) => {
       const dt = Object.assign(document.createElement("dt"), {
         className: "midwest-form-live-summary-term",
         textContent: label
@@ -3332,6 +3334,8 @@ class FormLiveSummary extends Controller {
       dd.className = "midwest-form-live-summary-definition";
       if (swatchColor !== void 0) {
         dd.append(this.buildSwatch(swatchColor), value || "\u2014");
+      } else if (details && Object.keys(details).length > 0) {
+        dd.append(this.buildGeocode(value || "\u2014", details));
       } else {
         dd.textContent = value || "\u2014";
       }
@@ -3359,6 +3363,8 @@ class FormLiveSummary extends Controller {
         return;
       if (element.closest(".midwest-repeatable"))
         return;
+      if (element.closest(".midwest-address"))
+        return;
       if (element instanceof HTMLInputElement) {
         if (SKIPPED_INPUT_TYPES.has(element.type))
           return;
@@ -3478,6 +3484,29 @@ class FormLiveSummary extends Controller {
         });
       });
     });
+    form.querySelectorAll(".midwest-address").forEach((addr) => {
+      if (this.element.contains(addr))
+        return;
+      const input = addr.querySelector('[data-midwest-address-target="input"]');
+      const latInput = addr.querySelector('[data-midwest-address-target="latInput"]');
+      const lngInput = addr.querySelector('[data-midwest-address-target="lngInput"]');
+      const placeIdInput = addr.querySelector('[data-midwest-address-target="placeIdInput"]');
+      const labelEl = addr.querySelector(".midwest-form-group__top label");
+      const label = labelEl?.textContent?.trim() || this.prettifyName((input?.name ?? latInput?.name?.replace(/_latitude$/, "") ?? "").replace(/\[.*\]$/, ""));
+      const value = input?.value?.trim() || "";
+      const details = {};
+      if (latInput?.value)
+        details["Latitude"] = latInput.value;
+      if (lngInput?.value)
+        details["Longitude"] = lngInput.value;
+      if (placeIdInput?.value)
+        details["Place ID"] = placeIdInput.value;
+      fields.push({
+        label,
+        value: value || "\u2014",
+        details: Object.keys(details).length > 0 ? details : void 0
+      });
+    });
     return fields;
   }
   // Builds a small inline colour swatch to display alongside a colour value.
@@ -3496,6 +3525,31 @@ class FormLiveSummary extends Controller {
     }
     return swatch;
   }
+  // Wraps an address value in a span that reveals a geocode detail popup on hover.
+  buildGeocode(value, details) {
+    const wrapper = document.createElement("span");
+    wrapper.className = "midwest-form-live-summary-geocode";
+    const text = document.createElement("span");
+    text.className = "midwest-form-live-summary-geocode-text";
+    text.textContent = value;
+    const popup = document.createElement("span");
+    popup.className = "midwest-form-live-summary-geocode-popup";
+    popup.setAttribute("aria-hidden", "true");
+    Object.entries(details).forEach(([key, val]) => {
+      const row = document.createElement("span");
+      row.className = "midwest-form-live-summary-geocode-row";
+      const keyEl = document.createElement("span");
+      keyEl.className = "midwest-form-live-summary-geocode-key";
+      keyEl.textContent = key;
+      const valEl = document.createElement("span");
+      valEl.className = "midwest-form-live-summary-geocode-val";
+      valEl.textContent = val;
+      row.append(keyEl, valEl);
+      popup.append(row);
+    });
+    wrapper.append(text, popup);
+    return wrapper;
+  }
   // Finds the label associated with a specific element via `for` attribute,
   // wrapping label, or falls back to a prettified version of the element name.
   labelFor(el) {
@@ -7060,14 +7114,14 @@ const FOCUSABLE = [
 ].join(", ");
 const GAP = 12;
 class Onboarding extends Controller {
-  static targets = ["step", "overlay", "card", "title", "body", "back", "next", "done", "arrow"];
+  static targets = ["step", "overlay", "card", "title", "body", "back", "next", "done", "arrow", "motion"];
   static values = {
-    autoOpen: { type: Boolean, default: false },
-    confirm: { type: String, default: "" }
+    autoOpen: { type: Boolean, default: false }
   };
   steps = [];
   index = 0;
   active = false;
+  justOpened = false;
   previousFocus = null;
   highlighted = null;
   connect() {
@@ -7097,6 +7151,7 @@ class Onboarding extends Controller {
     this.previousFocus = document.activeElement;
     this.overlayTarget.hidden = false;
     this.cardTarget.hidden = false;
+    this.justOpened = true;
     document.addEventListener("keydown", this.handleKeydown, true);
     window.addEventListener("resize", this.reposition);
     window.addEventListener("scroll", this.reposition, true);
@@ -7131,14 +7186,14 @@ class Onboarding extends Controller {
   cancel() {
     if (!this.active)
       return;
-    if (this.confirmValue && !window.confirm(this.confirmValue))
-      return;
     this.teardown();
     this.dispatch("cancel", { bubbles: true });
   }
   render(index) {
     this.index = index;
     const step = this.steps[index];
+    const replay = !this.justOpened;
+    this.justOpened = false;
     this.clearHighlight();
     this.titleTarget.textContent = step.title;
     this.renderBody(step);
@@ -7150,6 +7205,9 @@ class Onboarding extends Controller {
     } else {
       this.center();
     }
+    if (replay && this.hasMotionTarget) {
+      this.replayMotion(this.cardTarget.dataset.placement ?? "center");
+    }
     this.dispatch("show", { detail: { index, name: step.name }, bubbles: true });
     this.focusCard();
   }
@@ -7251,9 +7309,34 @@ class Onboarding extends Controller {
         this.cardTarget.focus();
     });
   }
+  // Re-triggers the midwest_motion @starting-style entry on step transitions.
+  // The initial show is handled by @starting-style firing when the card's
+  // `hidden` is removed; subsequent steps need an explicit re-trigger since the
+  // card stays in the DOM. Toggling `hidden` on the motion element triggers
+  // @starting-style again; the rAF ensures both DOM writes land in the same
+  // paint so there is no blank-card flash.
+  replayMotion(placement) {
+    const el = this.motionTarget;
+    const dir = { bottom: "up", top: "down", right: "left", left: "right" };
+    el.classList.remove("from-up", "from-down", "from-left", "from-right");
+    const from = dir[placement];
+    if (from)
+      el.classList.add(`from-${from}`);
+    el.hidden = true;
+    requestAnimationFrame(() => {
+      if (this.active)
+        el.hidden = false;
+    });
+  }
   teardown() {
     this.active = false;
     this.clearHighlight();
+    this.element.querySelectorAll("[popover]").forEach((el) => {
+      try {
+        el.hidePopover();
+      } catch {
+      }
+    });
     this.overlayTarget.hidden = true;
     this.cardTarget.hidden = true;
     document.removeEventListener("keydown", this.handleKeydown, true);
@@ -7892,6 +7975,885 @@ class Motion extends Controller {
   }
 }
 
+class PageTransition extends Controller {
+  static values = {
+    style: { type: String, default: "fade" },
+    duration: { type: String, default: "" },
+    easing: { type: String, default: "" }
+  };
+  injectedMeta = null;
+  connect() {
+    if (this.styleValue === "none")
+      return;
+    if (!document.querySelector('meta[name="view-transition"]')) {
+      const meta = document.createElement("meta");
+      meta.name = "view-transition";
+      meta.content = "same-origin";
+      document.head.appendChild(meta);
+      this.injectedMeta = meta;
+    }
+    document.documentElement.dataset.midwestPageTransition = this.styleValue;
+    if (this.durationValue) {
+      document.documentElement.style.setProperty("--page-transition-duration", this.durationValue);
+    }
+    if (this.easingValue) {
+      document.documentElement.style.setProperty("--page-transition-easing", this.easingValue);
+    }
+  }
+  disconnect() {
+    this.injectedMeta?.remove();
+    this.injectedMeta = null;
+    delete document.documentElement.dataset.midwestPageTransition;
+    document.documentElement.style.removeProperty("--page-transition-duration");
+    document.documentElement.style.removeProperty("--page-transition-easing");
+  }
+}
+
+let mapkitScriptPromise = null;
+let googleMapsScriptPromise = null;
+let leafletScriptPromise = null;
+function loadMapKitScript() {
+  if (window.mapkit)
+    return Promise.resolve();
+  if (mapkitScriptPromise)
+    return mapkitScriptPromise;
+  mapkitScriptPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";
+    script.crossOrigin = "anonymous";
+    script.addEventListener("load", () => resolve());
+    script.addEventListener("error", () => reject(new Error("Failed to load MapKit JS")));
+    document.head.appendChild(script);
+  });
+  return mapkitScriptPromise;
+}
+function loadLeafletScript() {
+  if (window.L)
+    return Promise.resolve();
+  if (leafletScriptPromise)
+    return leafletScriptPromise;
+  leafletScriptPromise = new Promise((resolve, reject) => {
+    if (!document.querySelector("link[data-midwest-leaflet]")) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
+      link.dataset.midwestLeaflet = "";
+      document.head.appendChild(link);
+    }
+    const script = document.createElement("script");
+    script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
+    script.addEventListener("load", () => resolve());
+    script.addEventListener("error", () => reject(new Error("Failed to load Leaflet")));
+    document.head.appendChild(script);
+  });
+  return leafletScriptPromise;
+}
+function loadGoogleMapsScript(apiKey) {
+  if (window.google?.maps)
+    return Promise.resolve();
+  if (googleMapsScriptPromise)
+    return googleMapsScriptPromise;
+  googleMapsScriptPromise = new Promise((resolve, reject) => {
+    window.__midwestGoogleMapsReady = resolve;
+    const script = document.createElement("script");
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(apiKey)}&callback=__midwestGoogleMapsReady&loading=async&libraries=places`;
+    script.addEventListener("error", () => reject(new Error("Failed to load Google Maps")));
+    document.head.appendChild(script);
+  });
+  return googleMapsScriptPromise;
+}
+
+const LEAFLET_TILES = {
+  MutedStandard: {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  },
+  Standard: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 19
+  },
+  Hybrid: {
+    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  },
+  Satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
+    maxZoom: 18
+  },
+  Dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  }
+};
+const GOOGLE_MUTED_STYLES = [
+  { elementType: "geometry", stylers: [{ color: "#f5f5f5" }] },
+  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+  { elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { elementType: "labels.text.stroke", stylers: [{ color: "#f5f5f5" }] },
+  { featureType: "administrative.land_parcel", elementType: "labels", stylers: [{ visibility: "off" }] },
+  { featureType: "poi", elementType: "geometry", stylers: [{ color: "#eeeeee" }] },
+  { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#e5e5e5" }] },
+  { featureType: "road", elementType: "geometry", stylers: [{ color: "#ffffff" }] },
+  { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#dadada" }] },
+  { featureType: "water", elementType: "geometry", stylers: [{ color: "#c9c9c9" }] }
+];
+const GOOGLE_DARK_STYLES = [
+  { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
+  { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
+  { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
+  { featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
+  { featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
+  { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#263c3f" }] },
+  { featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#6b9a76" }] },
+  { featureType: "road", elementType: "geometry", stylers: [{ color: "#38414e" }] },
+  { featureType: "road", elementType: "geometry.stroke", stylers: [{ color: "#212a37" }] },
+  { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#9ca5b3" }] },
+  { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#746855" }] },
+  { featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ color: "#1f2835" }] },
+  { featureType: "road.highway", elementType: "labels.text.fill", stylers: [{ color: "#f3d19c" }] },
+  { featureType: "transit", elementType: "geometry", stylers: [{ color: "#2f3948" }] },
+  { featureType: "transit.station", elementType: "labels.text.fill", stylers: [{ color: "#d59563" }] },
+  { featureType: "water", elementType: "geometry", stylers: [{ color: "#17263c" }] },
+  { featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#515c6d" }] },
+  { featureType: "water", elementType: "labels.text.stroke", stylers: [{ color: "#17263c" }] }
+];
+let Map$1 = class Map extends Controller {
+  static values = {
+    latitude: { type: Number, default: 37.334886 },
+    longitude: { type: Number, default: -122.008988 },
+    span: { type: Number, default: 0.1 },
+    mapType: { type: String, default: "MutedStandard" },
+    colorScheme: { type: String, default: "Auto" },
+    provider: { type: String, default: "" },
+    token: { type: String, default: "" },
+    tokenUrl: { type: String, default: "" },
+    apiKey: { type: String, default: "" },
+    zoom: { type: Number, default: -1 },
+    markers: { type: Array, default: [] },
+    showsUserLocation: { type: Boolean, default: false },
+    showsMapTypeControl: { type: Boolean, default: false },
+    showsZoomControl: { type: Boolean, default: true },
+    showsCompass: { type: String, default: "Adaptive" },
+    rotation: { type: Number, default: 0 }
+  };
+  mapInstance = null;
+  async connect() {
+    const provider = this.providerValue;
+    if (!provider)
+      return;
+    try {
+      if (provider === "mapkit") {
+        await loadMapKitScript();
+        this.initMapKit();
+        this.initMapKitMap();
+      } else if (provider === "google") {
+        await loadGoogleMapsScript(this.apiKeyValue);
+        this.initGoogleMap();
+      } else if (provider === "leaflet") {
+        await loadLeafletScript();
+        this.initLeafletMap();
+      }
+    } catch (err) {
+      console.error(`[midwest-map] Failed to initialise ${provider} map:`, err);
+    }
+  }
+  disconnect() {
+    if (this.mapInstance) {
+      if (this.providerValue === "mapkit")
+        this.mapInstance.destroy();
+      if (this.providerValue === "leaflet")
+        this.mapInstance.remove();
+      this.mapInstance = null;
+    }
+  }
+  tokenValueChanged() {
+    if (this.mapInstance && this.providerValue === "mapkit")
+      this.initMapKit();
+  }
+  // --- MapKit ---
+  initMapKit() {
+    const mk = window.mapkit;
+    const token = this.tokenValue;
+    const tokenUrl = this.tokenUrlValue;
+    mk.init({
+      authorizationCallback: (done) => {
+        if (token) {
+          done(token);
+        } else if (tokenUrl) {
+          fetch(tokenUrl).then((r) => r.text()).then(done).catch((err) => console.error("[midwest-map] Token fetch failed:", err));
+        }
+      },
+      language: document.documentElement.lang || "en"
+    });
+  }
+  initMapKitMap() {
+    const mk = window.mapkit;
+    const region = new mk.CoordinateRegion(
+      new mk.Coordinate(this.latitudeValue, this.longitudeValue),
+      new mk.CoordinateSpan(this.spanValue, this.spanValue)
+    );
+    const colorScheme = this.colorSchemeValue === "Auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? mk.Map.ColorSchemes.Dark : mk.Map.ColorSchemes.Light : mk.Map.ColorSchemes[this.colorSchemeValue];
+    this.mapInstance = new mk.Map(this.element, {
+      region,
+      mapType: mk.Map.MapTypes[this.mapTypeValue],
+      colorScheme,
+      showsUserLocation: this.showsUserLocationValue,
+      showsMapTypeControl: this.showsMapTypeControlValue,
+      showsZoomControl: this.showsZoomControlValue,
+      showsCompass: mk.FeatureVisibility[this.showsCompassValue],
+      rotation: this.rotationValue
+    });
+    this.addMapKitMarkers();
+    this.element.dataset.mapLoaded = "true";
+  }
+  addMapKitMarkers() {
+    const mk = window.mapkit;
+    if (!this.markersValue.length)
+      return;
+    const annotations = this.markersValue.map((m) => {
+      const opts = {};
+      if (m.title)
+        opts.title = m.title;
+      if (m.subtitle)
+        opts.subtitle = m.subtitle;
+      if (m.color)
+        opts.color = m.color;
+      if (m.glyphText)
+        opts.glyphText = m.glyphText;
+      return new mk.MarkerAnnotation(
+        new mk.Coordinate(m.latitude, m.longitude),
+        opts
+      );
+    });
+    this.mapInstance.addAnnotations(annotations);
+    const openIndex = this.markersValue.findIndex((m) => m.open);
+    if (openIndex >= 0) {
+      this.mapInstance.selectedAnnotation = annotations[openIndex];
+    }
+  }
+  // --- Google Maps ---
+  initGoogleMap() {
+    const g = window.google;
+    const zoom = this.zoomValue > 0 ? this.zoomValue : this.spanToZoom(this.spanValue);
+    const isDark = this.colorSchemeValue === "Dark" || this.colorSchemeValue === "Auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const mapTypeId = this.googleMapTypeId();
+    const opts = {
+      center: { lat: this.latitudeValue, lng: this.longitudeValue },
+      zoom,
+      mapTypeId,
+      disableDefaultUI: true,
+      zoomControl: this.showsZoomControlValue,
+      mapTypeControl: this.showsMapTypeControlValue,
+      fullscreenControl: false,
+      streetViewControl: false
+    };
+    const styles = this.googleMapStyles(isDark, mapTypeId);
+    if (styles)
+      opts.styles = styles;
+    this.mapInstance = new g.maps.Map(this.element, opts);
+    this.addGoogleMarkers();
+    this.element.dataset.mapLoaded = "true";
+  }
+  googleMapTypeId() {
+    const types = {
+      Standard: "roadmap",
+      Hybrid: "hybrid",
+      Satellite: "satellite",
+      MutedStandard: "roadmap"
+    };
+    return types[this.mapTypeValue] ?? "roadmap";
+  }
+  googleMapStyles(isDark, mapTypeId) {
+    if (mapTypeId !== "roadmap")
+      return null;
+    if (isDark)
+      return GOOGLE_DARK_STYLES;
+    if (this.mapTypeValue === "MutedStandard")
+      return GOOGLE_MUTED_STYLES;
+    return null;
+  }
+  addGoogleMarkers() {
+    const g = window.google;
+    if (!this.markersValue.length)
+      return;
+    this.markersValue.forEach((m) => {
+      const marker = new g.maps.Marker({
+        map: this.mapInstance,
+        position: { lat: m.latitude, lng: m.longitude },
+        title: m.title ?? ""
+      });
+      if (m.open && m.title) {
+        const content = m.subtitle ? `<strong>${m.title}</strong><br><span style="color:#777">${m.subtitle}</span>` : `<strong>${m.title}</strong>`;
+        const infoWindow = new g.maps.InfoWindow({ content });
+        infoWindow.open(this.mapInstance, marker);
+      }
+    });
+  }
+  // --- Leaflet ---
+  initLeafletMap() {
+    const L = window.L;
+    const zoom = this.zoomValue > 0 ? this.zoomValue : this.spanToZoom(this.spanValue);
+    const isDark = this.colorSchemeValue === "Dark" || this.colorSchemeValue === "Auto" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const tileKey = isDark ? "Dark" : this.mapTypeValue;
+    const tile = LEAFLET_TILES[tileKey] ?? LEAFLET_TILES.MutedStandard;
+    this.mapInstance = L.map(this.element, {
+      center: [this.latitudeValue, this.longitudeValue],
+      zoom,
+      zoomControl: this.showsZoomControlValue,
+      attributionControl: true
+    });
+    L.tileLayer(tile.url, {
+      attribution: tile.attribution,
+      maxZoom: tile.maxZoom ?? 19
+    }).addTo(this.mapInstance);
+    this.addLeafletMarkers();
+    this.element.dataset.mapLoaded = "true";
+  }
+  addLeafletMarkers() {
+    const L = window.L;
+    if (!this.markersValue.length)
+      return;
+    this.markersValue.forEach((m) => {
+      const icon = this.leafletMarkerIcon(m.color, m.glyphText);
+      const marker = L.marker([m.latitude, m.longitude], { icon }).addTo(this.mapInstance);
+      if (m.title) {
+        const content = m.subtitle ? `<strong>${m.title}</strong><br><span style="color:#777">${m.subtitle}</span>` : `<strong>${m.title}</strong>`;
+        marker.bindPopup(content);
+        if (m.open)
+          marker.openPopup();
+      }
+    });
+  }
+  // Returns a Leaflet icon — default blue when no color/glyph, otherwise a
+  // custom SVG pin rendered via divIcon.
+  leafletMarkerIcon(color, glyphText) {
+    const L = window.L;
+    if (!color && !glyphText)
+      return new L.Icon.Default();
+    const fill = color ?? "#2563eb";
+    const inner = glyphText ? `<text x="12" y="16" text-anchor="middle" font-size="9" font-family="system-ui,sans-serif" fill="white">${glyphText}</text>` : `<circle cx="12" cy="12" r="4" fill="rgba(255,255,255,0.9)"/>`;
+    const svg = [
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">',
+      `  <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24C24 5.373 18.627 0 12 0z" fill="${fill}"/>`,
+      `  ${inner}`,
+      "</svg>"
+    ].join("");
+    return L.divIcon({
+      html: svg,
+      className: "",
+      iconSize: [24, 36],
+      iconAnchor: [12, 36],
+      popupAnchor: [0, -36]
+    });
+  }
+  // Approximate MapKit coordinate span to a Web Mercator zoom level.
+  // CoordinateSpan 360° = zoom 0; halving span adds 1 zoom level.
+  spanToZoom(span) {
+    return Math.round(Math.log2(360 / span));
+  }
+};
+
+const DEBOUNCE_MS = 300;
+const GOOGLE_PREVIEW_STYLES = [
+  { elementType: "geometry", stylers: [{ color: "#f5f5f5" }] },
+  { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+  { elementType: "labels.text.fill", stylers: [{ color: "#616161" }] },
+  { elementType: "labels.text.stroke", stylers: [{ color: "#f5f5f5" }] },
+  { featureType: "road", elementType: "geometry", stylers: [{ color: "#ffffff" }] },
+  { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#dadada" }] },
+  { featureType: "water", elementType: "geometry", stylers: [{ color: "#c9c9c9" }] },
+  { featureType: "poi", elementType: "geometry", stylers: [{ color: "#eeeeee" }] }
+];
+class Address extends Controller {
+  static targets = [
+    "input",
+    "dropdown",
+    "suggestions",
+    "latInput",
+    "lngInput",
+    "placeIdInput",
+    "mapContainer"
+  ];
+  static values = {
+    provider: { type: String, default: "" },
+    mapProvider: { type: String, default: "" },
+    apiKey: { type: String, default: "" },
+    token: { type: String, default: "" },
+    tokenUrl: { type: String, default: "" },
+    countryCodes: { type: Array, default: [] },
+    showMap: { type: Boolean, default: false },
+    nominatimUrl: { type: String, default: "" }
+  };
+  searchTimer;
+  highlightedIndex = -1;
+  mapInstance = null;
+  mapMarker = null;
+  mkSearch = null;
+  autocompleteService = null;
+  placesService = null;
+  // ── Named handlers ────────────────────────────────────────────────────────
+  onToggle = (e) => {
+    const opened = e.newState === "open";
+    if (this.hasInputTarget) {
+      this.inputTarget.setAttribute("aria-expanded", String(opened));
+    }
+    if (!opened) {
+      this.highlightedIndex = -1;
+    }
+  };
+  onFocusOut = (e) => {
+    if (!this.element.contains(e.relatedTarget)) {
+      this.closeDropdown();
+    }
+  };
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  async connect() {
+    this.element.addEventListener("focusout", this.onFocusOut);
+    const provider = this.providerValue;
+    const mapProv = this.effectiveMapProvider();
+    if (!provider && !mapProv)
+      return;
+    try {
+      if (provider === "mapkit") {
+        await loadMapKitScript();
+        this.initMapKit();
+      } else if (provider === "google") {
+        await loadGoogleMapsScript(this.apiKeyValue);
+        this.initGoogle();
+      }
+      if (this.showMapValue && mapProv === "leaflet") {
+        await loadLeafletScript();
+      }
+    } catch (err) {
+      console.error("[midwest-address] Failed to initialise:", err);
+    }
+  }
+  disconnect() {
+    clearTimeout(this.searchTimer);
+    this.element.removeEventListener("focusout", this.onFocusOut);
+    if (this.mapInstance) {
+      const mapProv = this.effectiveMapProvider();
+      if (mapProv === "mapkit")
+        this.mapInstance.destroy();
+      if (mapProv === "leaflet")
+        this.mapInstance.remove();
+    }
+    this.mapInstance = null;
+  }
+  dropdownTargetConnected(el) {
+    el.addEventListener("toggle", this.onToggle);
+  }
+  dropdownTargetDisconnected(el) {
+    el.removeEventListener("toggle", this.onToggle);
+  }
+  // ── Public Stimulus actions ───────────────────────────────────────────────
+  search() {
+    this.clearGeocode();
+    const query = this.inputTarget.value.trim();
+    if (query.length < 2) {
+      this.closeDropdown();
+      return;
+    }
+    clearTimeout(this.searchTimer);
+    this.searchTimer = setTimeout(() => {
+      if (this.providerValue === "mapkit") {
+        this.searchMapKit(query);
+      } else if (this.providerValue === "google") {
+        this.searchGoogle(query);
+      } else if (this.providerValue === "nominatim") {
+        this.searchNominatim(query);
+      }
+    }, DEBOUNCE_MS);
+  }
+  navigate(event) {
+    const items = this.suggestionElements();
+    if (!items.length)
+      return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, items.length - 1);
+        this.applyHighlight(items);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+        this.applyHighlight(items);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.highlightedIndex >= 0)
+          items[this.highlightedIndex].dispatchEvent(new MouseEvent("mousedown"));
+        break;
+      case "Escape":
+        this.closeDropdown();
+        break;
+    }
+  }
+  // ── Provider init ─────────────────────────────────────────────────────────
+  initMapKit() {
+    const mk = window.mapkit;
+    const { tokenValue: token, tokenUrlValue: tokenUrl } = this;
+    mk.init({
+      authorizationCallback: (done) => {
+        if (token) {
+          done(token);
+        } else if (tokenUrl) {
+          fetch(tokenUrl).then((r) => r.text()).then(done).catch((err) => console.error("[midwest-address] Token fetch failed:", err));
+        }
+      },
+      language: document.documentElement.lang || "en"
+    });
+    this.mkSearch = new mk.Search({ getsUserLocation: false });
+  }
+  initGoogle() {
+    const g = window.google;
+    this.autocompleteService = new g.maps.places.AutocompleteService();
+    this.placesService = new g.maps.places.PlacesService(document.createElement("div"));
+  }
+  // ── Search ────────────────────────────────────────────────────────────────
+  searchMapKit(query) {
+    if (!this.mkSearch)
+      return;
+    this.mkSearch.autocomplete(query, (err, data) => {
+      if (err || !data?.results?.length) {
+        this.closeDropdown();
+        return;
+      }
+      const results = data.results.map((r) => ({
+        id: r.completionURL ?? r.displayLines?.join(", ") ?? "",
+        label: r.displayLines?.[0] ?? "",
+        secondary: r.displayLines?.[1] ?? "",
+        payload: r
+      }));
+      this.renderSuggestions(results);
+    });
+  }
+  searchGoogle(query) {
+    if (!this.autocompleteService)
+      return;
+    const request = { input: query };
+    if (this.countryCodesValue.length) {
+      request.componentRestrictions = { country: this.countryCodesValue };
+    }
+    this.autocompleteService.getPlacePredictions(
+      request,
+      (predictions, status) => {
+        const g = window.google;
+        if (status !== g.maps.places.PlacesServiceStatus.OK || !predictions?.length) {
+          this.closeDropdown();
+          return;
+        }
+        const results = predictions.map((p) => ({
+          id: p.place_id,
+          label: p.structured_formatting?.main_text ?? p.description,
+          secondary: p.structured_formatting?.secondary_text ?? "",
+          payload: p
+        }));
+        this.renderSuggestions(results);
+      }
+    );
+  }
+  // ── Suggestions UI ────────────────────────────────────────────────────────
+  renderSuggestions(results) {
+    if (!this.hasSuggestionsTarget)
+      return;
+    const list = this.suggestionsTarget;
+    list.innerHTML = "";
+    results.forEach((r, i) => {
+      const li = document.createElement("li");
+      li.className = "midwest-address__suggestion";
+      li.setAttribute("role", "option");
+      li.setAttribute("id", `${this.element.id || "addr"}-s${i}`);
+      li.dataset.index = String(i);
+      const main = document.createElement("span");
+      main.className = "midwest-address__suggestion-main";
+      main.textContent = r.label;
+      li.appendChild(main);
+      if (r.secondary) {
+        const sec = document.createElement("span");
+        sec.className = "midwest-address__suggestion-secondary";
+        sec.textContent = r.secondary;
+        li.appendChild(sec);
+      }
+      li.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        this.pickSuggestion(r);
+      });
+      list.appendChild(li);
+    });
+    this.openDropdown();
+    this.highlightedIndex = -1;
+  }
+  openDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
+    if (!this.dropdownTarget.matches(":popover-open"))
+      this.dropdownTarget.showPopover();
+  }
+  closeDropdown() {
+    if (this.hasDropdownTarget && this.dropdownTarget.matches(":popover-open")) {
+      this.dropdownTarget.hidePopover();
+    }
+    if (this.hasSuggestionsTarget)
+      this.suggestionsTarget.innerHTML = "";
+    this.highlightedIndex = -1;
+  }
+  suggestionElements() {
+    if (!this.hasSuggestionsTarget)
+      return [];
+    return Array.from(this.suggestionsTarget.querySelectorAll(".midwest-address__suggestion"));
+  }
+  applyHighlight(items) {
+    items.forEach((item, i) => {
+      const active = i === this.highlightedIndex;
+      item.classList.toggle("is-highlighted", active);
+      item.setAttribute("aria-selected", String(active));
+      if (active) {
+        this.inputTarget.setAttribute("aria-activedescendant", item.id);
+        item.scrollIntoView({ block: "nearest" });
+      }
+    });
+    if (this.highlightedIndex < 0) {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  // ── Pick a suggestion ─────────────────────────────────────────────────────
+  pickSuggestion(r) {
+    this.closeDropdown();
+    if (this.providerValue === "mapkit") {
+      this.pickMapKit(r);
+    } else if (this.providerValue === "google") {
+      this.pickGoogle(r);
+    } else if (this.providerValue === "nominatim") {
+      this.pickNominatim(r);
+    }
+  }
+  pickMapKit(r) {
+    if (!this.mkSearch)
+      return;
+    this.mkSearch.search(r.payload, (err, data) => {
+      if (err || !data?.places?.length)
+        return;
+      const place = data.places[0];
+      const coord = place.coordinate;
+      this.inputTarget.value = [r.label, r.secondary].filter(Boolean).join(", ");
+      this.fillGeocode(coord.latitude, coord.longitude, place.id ?? "");
+      this.updateMapPreview(coord.latitude, coord.longitude);
+    });
+  }
+  pickGoogle(r) {
+    if (!this.placesService || !r.id)
+      return;
+    const g = window.google;
+    this.placesService.getDetails(
+      { placeId: r.id, fields: ["geometry", "formatted_address", "place_id"] },
+      (place, status) => {
+        if (status !== g.maps.places.PlacesServiceStatus.OK || !place)
+          return;
+        const lat = place.geometry.location.lat();
+        const lng = place.geometry.location.lng();
+        this.inputTarget.value = place.formatted_address;
+        this.fillGeocode(lat, lng, place.place_id);
+        this.updateMapPreview(lat, lng);
+      }
+    );
+  }
+  // ── Geocode field management ──────────────────────────────────────────────
+  fillGeocode(lat, lng, placeId) {
+    if (this.hasLatInputTarget)
+      this.latInputTarget.value = String(lat);
+    if (this.hasLngInputTarget)
+      this.lngInputTarget.value = String(lng);
+    if (this.hasPlaceIdInputTarget)
+      this.placeIdInputTarget.value = placeId;
+    this.dispatch("geocode", { detail: { lat, lng, placeId } });
+  }
+  clearGeocode() {
+    if (this.hasLatInputTarget)
+      this.latInputTarget.value = "";
+    if (this.hasLngInputTarget)
+      this.lngInputTarget.value = "";
+    if (this.hasPlaceIdInputTarget)
+      this.placeIdInputTarget.value = "";
+  }
+  // ── Nominatim search (OpenStreetMap, no API key) ──────────────────────────
+  searchNominatim(query) {
+    const base = this.nominatimUrlValue || "https://nominatim.openstreetmap.org";
+    const url = `${base}/search?q=${encodeURIComponent(query)}&format=json&limit=5&addressdetails=1`;
+    fetch(url, { headers: { "Accept-Language": document.documentElement.lang || "en" } }).then((r) => r.json()).then((data) => {
+      if (!data?.length) {
+        this.closeDropdown();
+        return;
+      }
+      const results = data.map((r) => {
+        const parts = r.display_name.split(", ");
+        return {
+          id: String(r.place_id),
+          label: r.name || parts[0] || r.display_name,
+          secondary: parts.length > 1 ? parts.slice(1).join(", ") : "",
+          payload: r
+        };
+      });
+      this.renderSuggestions(results);
+    }).catch(() => this.closeDropdown());
+  }
+  pickNominatim(r) {
+    const place = r.payload;
+    const lat = parseFloat(place.lat);
+    const lng = parseFloat(place.lon);
+    this.inputTarget.value = place.display_name;
+    this.fillGeocode(lat, lng, `${place.osm_type}:${place.osm_id}`);
+    this.updateMapPreview(lat, lng);
+  }
+  // ── Map preview ───────────────────────────────────────────────────────────
+  // Returns the provider used for the map preview. `mapProviderValue` is set
+  // when the geocoder and map providers differ; falls back to `providerValue`
+  // so existing single-provider setups (mapkit/google) work without change.
+  effectiveMapProvider() {
+    return this.mapProviderValue || this.providerValue;
+  }
+  updateMapPreview(lat, lng) {
+    if (!this.hasMapContainerTarget || !this.showMapValue)
+      return;
+    this.mapContainerTarget.hidden = false;
+    const mapProv = this.effectiveMapProvider();
+    if (mapProv === "mapkit") {
+      this.updateMapKitPreview(lat, lng);
+    } else if (mapProv === "google") {
+      this.updateGooglePreview(lat, lng);
+    } else if (mapProv === "leaflet") {
+      this.updateLeafletPreview(lat, lng);
+    }
+  }
+  updateMapKitPreview(lat, lng) {
+    const mk = window.mapkit;
+    const coord = new mk.Coordinate(lat, lng);
+    if (!this.mapInstance) {
+      this.mapInstance = new mk.Map(this.mapContainerTarget, {
+        mapType: mk.Map.MapTypes.MutedStandard,
+        showsCompass: mk.FeatureVisibility.Hidden,
+        showsZoomControl: false,
+        showsMapTypeControl: false,
+        isScrollEnabled: false,
+        isZoomEnabled: false
+      });
+    }
+    this.mapInstance.setRegionAnimated(
+      new mk.CoordinateRegion(coord, new mk.CoordinateSpan(0.01, 0.01))
+    );
+    if (this.mapMarker)
+      this.mapInstance.removeAnnotation(this.mapMarker);
+    this.mapMarker = new mk.MarkerAnnotation(coord);
+    this.mapInstance.addAnnotation(this.mapMarker);
+  }
+  updateGooglePreview(lat, lng) {
+    const g = window.google;
+    const center = { lat, lng };
+    if (!this.mapInstance) {
+      this.mapInstance = new g.maps.Map(this.mapContainerTarget, {
+        center,
+        zoom: 15,
+        disableDefaultUI: true,
+        gestureHandling: "none",
+        styles: GOOGLE_PREVIEW_STYLES
+      });
+    } else {
+      this.mapInstance.setCenter(center);
+      this.mapInstance.setZoom(15);
+    }
+    if (this.mapMarker)
+      this.mapMarker.setMap(null);
+    this.mapMarker = new g.maps.Marker({ map: this.mapInstance, position: center });
+  }
+  updateLeafletPreview(lat, lng) {
+    const L = window.L;
+    if (!L)
+      return;
+    if (!this.mapInstance) {
+      this.mapInstance = L.map(this.mapContainerTarget, {
+        center: [lat, lng],
+        zoom: 15,
+        zoomControl: false,
+        attributionControl: false
+      });
+      L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
+        maxZoom: 19
+      }).addTo(this.mapInstance);
+    } else {
+      this.mapInstance.setView([lat, lng], 15);
+    }
+    if (this.mapMarker)
+      this.mapMarker.remove();
+    this.mapMarker = L.marker([lat, lng]).addTo(this.mapInstance);
+  }
+}
+
+class Popover extends Controller {
+  animating = false;
+  closeTimer = null;
+  connect() {
+    this.element.addEventListener("beforetoggle", this.onBeforeToggle);
+  }
+  disconnect() {
+    this.element.removeEventListener("beforetoggle", this.onBeforeToggle);
+    this.cleanUp();
+  }
+  onBeforeToggle = (event) => {
+    const toggle = event;
+    if (toggle.newState === "open") {
+      if (this.closeTimer) {
+        clearTimeout(this.closeTimer);
+        this.closeTimer = null;
+      }
+      this.element.classList.remove("is-closing");
+      this.animating = false;
+      return;
+    }
+    if (toggle.newState !== "closed")
+      return;
+    if (window.matchMedia("(width < 700px)").matches)
+      return;
+    if (!this.element.classList.contains("midwest-motion"))
+      return;
+    if (this.animating)
+      return;
+    event.preventDefault();
+    this.animating = true;
+    this.element.classList.add("is-closing");
+    this.closeTimer = setTimeout(() => {
+      this.closeTimer = null;
+      this.element.style.display = "none";
+      this.element.style.transition = "none";
+      this.element.hidePopover();
+      this.animating = false;
+      requestAnimationFrame(() => {
+        this.element.style.removeProperty("display");
+        this.element.style.removeProperty("transition");
+        this.element.classList.remove("is-closing");
+      });
+    }, this.exitDuration());
+  };
+  cleanUp() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+    this.element.classList.remove("is-closing");
+    this.element.style.removeProperty("transition");
+    this.animating = false;
+  }
+  exitDuration() {
+    const durations = getComputedStyle(this.element).transitionDuration.split(",").map((s) => {
+      const n = parseFloat(s);
+      return s.trim().endsWith("ms") ? n : n * 1e3;
+    });
+    return Math.max(0, ...durations);
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -7934,6 +8896,10 @@ function registerMidwestControllers(application) {
   application.register("midwest-panorama", Panorama);
   application.register("midwest-playlist", Playlist);
   application.register("midwest-motion", Motion);
+  application.register("midwest-page-transition", PageTransition);
+  application.register("midwest-map", Map$1);
+  application.register("midwest-address", Address);
+  application.register("midwest-popover", Popover);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };