@m4l/gclick 0.34.0 → 0.35.0

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/TileLayerGoogle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileLayerGoogle.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/TileLayerGoogle.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAwClD;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,QA+MrE"}
+{"version":3,"file":"TileLayerGoogle.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/TileLayerGoogle.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAwClD;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,QAgPrE"}

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/TileLayerGoogle.js

@@ -1,74 +1,81 @@
-import i, { useEffect as T } from "react";
-import { useMap as F } from "react-leaflet";
-import { ensureGoogleMutantRegistered as _ } from "../../../../external/googleMutant/index.js";
-import b from "leaflet";
-import { useMapStore as U } from "../../../../hooks/useMapStore/index.js";
-import { deepShallow as x } from "@m4l/components";
-import { DARK_STYLES as I } from "./darkStyles.js";
-import { loadGoogleMapsLibrary as K } from "./googleMapsLoader.js";
-import { createReservedTileLayer as h } from "../../../../external/tileReserve/ReservedTileLayer.js";
-import { DEFAULT_TILE_RESERVE_FACTOR as V } from "../../../../external/tileReserve/constants.js";
-const Z = [], A = (S) => S === "dark" ? I : Z;
-function J(S) {
-  const l = F(), { mode: g, tileReserveFactor: L = V } = S, G = i.useRef(null), r = i.useRef(null), M = i.useRef(L);
-  M.current = L;
-  const R = i.useRef(null), p = i.useRef(A(g));
-  p.current = A(g);
-  const { sourceId: c, layer: t, trafficLayer: o, transitLayer: a, bicyclingLayer: n, googleApiKey: v, googleMapVersion: E } = U(
+import t, { useEffect as S } from "react";
+import { useMap as K } from "react-leaflet";
+import { ensureGoogleMutantRegistered as V } from "../../../../external/googleMutant/index.js";
+import _ from "leaflet";
+import { useMapStore as Z } from "../../../../hooks/useMapStore/index.js";
+import { deepShallow as k } from "@m4l/components";
+import { DARK_STYLES as C } from "./darkStyles.js";
+import { subscribeGoogleMapsFailure as D, loadGoogleMapsLibrary as j } from "./googleMapsLoader.js";
+import { createReservedTileLayer as Y } from "../../../../external/tileReserve/ReservedTileLayer.js";
+import { DEFAULT_TILE_RESERVE_FACTOR as J } from "../../../../external/tileReserve/constants.js";
+const P = [], h = (M) => M === "dark" ? C : P;
+function te(M) {
+  const s = K(), { mode: g, tileReserveFactor: p = J } = M, [I, U] = t.useState(!1), [w, v] = t.useState(!1), A = t.useRef(null), r = t.useRef(null), b = t.useRef(p);
+  b.current = p;
+  const G = t.useRef(null), L = t.useRef(h(g));
+  L.current = h(g);
+  const { sourceId: c, layer: o, trafficLayer: n, transitLayer: l, bicyclingLayer: i, googleApiKey: R, googleMapVersion: E } = Z(
     (e) => {
-      const y = e.mapSources.find((m) => m.id === e.currentMapSourceLayer.mapSourceId) || e.mapSources[0], s = y.layers.find((m) => m.id === e.currentMapSourceLayer.mapSourceLayerId) || y.layers[0];
+      const a = e.mapSources.find((y) => y.id === e.currentMapSourceLayer.mapSourceId) || e.mapSources[0], u = a.layers.find((y) => y.id === e.currentMapSourceLayer.mapSourceLayerId) || a.layers[0];
       return {
-        sourceId: y.id,
-        layer: s,
-        trafficLayer: s?.roadSelectedOptions?.trafficLayer || !1,
-        transitLayer: s?.roadSelectedOptions?.transitLayer || !1,
-        bicyclingLayer: s?.roadSelectedOptions?.bicyclingLayer || !1,
+        sourceId: a.id,
+        layer: u,
+        trafficLayer: u?.roadSelectedOptions?.trafficLayer || !1,
+        transitLayer: u?.roadSelectedOptions?.transitLayer || !1,
+        bicyclingLayer: u?.roadSelectedOptions?.bicyclingLayer || !1,
         googleApiKey: e.googleMapsApiKey,
         googleMapVersion: e.googleMapVersion
       };
     },
-    x
-  ), u = o || a || n || g === "dark", d = i.useRef({ trafficLayer: o, transitLayer: a, bicyclingLayer: n }), f = i.useRef({ trafficLayer: o, transitLayer: a, bicyclingLayer: n });
-  return f.current = { trafficLayer: o, transitLayer: a, bicyclingLayer: n }, T(() => {
+    k
+  ), d = (n || l || i || g === "dark") && !!R && !I, F = !d || g === "light" && !w, m = t.useRef({ trafficLayer: n, transitLayer: l, bicyclingLayer: i }), f = t.useRef({ trafficLayer: n, transitLayer: l, bicyclingLayer: i });
+  return f.current = { trafficLayer: n, transitLayer: l, bicyclingLayer: i }, S(() => {
     let e;
     if (c === "google")
-      return u || (e = h(
-        t.urlTemplate,
-        t.options,
-        M.current
-      ), t.getTileUrl && (e.getTileUrl = t.getTileUrl), l.addLayer(e), G.current = e, t.options && t.options.maxZoom && l.setMaxZoom(t.options.maxZoom)), () => {
-        e && (l.removeLayer(e), G.current = null);
+      return F && (e = Y(
+        o.urlTemplate,
+        o.options,
+        b.current
+      ), o.getTileUrl && (e.getTileUrl = o.getTileUrl), s.addLayer(e), A.current = e, o.options && o.options.maxZoom && s.setMaxZoom(o.options.maxZoom)), () => {
+        e && (s.removeLayer(e), A.current = null);
       };
-  }, [c, t.urlTemplate, t.options, t.getTileUrl, l, u]), T(() => {
-    if (c !== "google" || !u || !v)
+  }, [c, o.urlTemplate, o.options, o.getTileUrl, s, F]), S(() => {
+    if (c !== "google" || !d || !R)
       return;
-    let e = null, y = !1;
-    return _().then(() => K({
-      apiKey: v,
+    let e = null, a = !1;
+    const u = () => {
+      e && (s.removeLayer(e), e = null, r.current = null), G.current = null;
+    }, y = (T) => {
+      a || (a = !0, u(), v(!1), U(!0), console.error("[GpsMap] Google Maps JavaScript API unavailable; using base tiles.", T));
+    }, x = D(y);
+    return V().then(() => j({
+      apiKey: R,
       version: E
     })).then(() => {
-      if (y)
+      if (a)
         return;
-      const s = b.gridLayer.googleMutant, m = b.GridLayer.GoogleMutant;
-      typeof s != "function" || typeof m != "function" || (e = s({
+      const T = _.gridLayer.googleMutant, B = _.GridLayer.GoogleMutant;
+      if (typeof T != "function" || typeof B != "function")
+        throw new Error("GoogleMutant runtime registration is incomplete.");
+      e = T({
         maxZoom: 22,
-        type: t.type,
-        styles: p.current
+        type: o.type,
+        styles: L.current
         // ...layer.options,
-      }), e.setTileReserveFactor(M.current), e.on("spawned", (O) => {
-        R.current = O.mapObject, O.mapObject.setOptions({ styles: p.current });
-      }), r.current = e, f.current.trafficLayer && e.addGoogleLayer("TrafficLayer"), f.current.transitLayer && e.addGoogleLayer("TransitLayer"), f.current.bicyclingLayer && e.addGoogleLayer("BicyclingLayer"), d.current = { ...f.current }, l.addLayer(e));
-    }), () => {
-      y = !0, e && (l.removeLayer(e), r.current = null), R.current = null;
+      }), e.setTileReserveFactor(b.current), e.on("spawned", (O) => {
+        a || (G.current = O.mapObject, O.mapObject.setOptions({ styles: L.current }), v(!0));
+      }), r.current = e, f.current.trafficLayer && e.addGoogleLayer("TrafficLayer"), f.current.transitLayer && e.addGoogleLayer("TransitLayer"), f.current.bicyclingLayer && e.addGoogleLayer("BicyclingLayer"), m.current = { ...f.current }, s.addLayer(e);
+    }).catch(y), () => {
+      a = !0, x(), u(), v(!1);
     };
-  }, [l, t.type, c, v, E, u]), T(() => {
-    G.current?.setTileReserveFactor(L), r.current?.setTileReserveFactor(L);
-  }, [L]), T(() => {
-    c !== "google" || !u || !R.current || g === "light" || (R.current.setOptions({ styles: p.current }), r.current && (r.current.options.styles = p.current));
-  }, [c, u, g]), i.useEffect(() => {
-    c === "google" && r.current && (o !== d.current.trafficLayer && (o ? r.current.addGoogleLayer("TrafficLayer") : o === !1 && r.current.removeGoogleLayer("TrafficLayer")), a !== d.current.transitLayer && (a ? r.current.addGoogleLayer("TransitLayer") : a === !1 && r.current.removeGoogleLayer("TransitLayer")), n !== d.current.bicyclingLayer && (n ? r.current.addGoogleLayer("BicyclingLayer") : n === !1 && r.current.removeGoogleLayer("BicyclingLayer")), d.current = { ...f.current });
-  }, [o, a, n]), null;
+  }, [s, o.type, c, R, E, d]), S(() => {
+    A.current?.setTileReserveFactor(p), r.current?.setTileReserveFactor(p);
+  }, [p]), S(() => {
+    c !== "google" || !d || !G.current || (G.current.setOptions({ styles: L.current }), r.current && (r.current.options.styles = L.current));
+  }, [c, d, g]), t.useEffect(() => {
+    c === "google" && r.current && (n !== m.current.trafficLayer && (n ? r.current.addGoogleLayer("TrafficLayer") : n === !1 && r.current.removeGoogleLayer("TrafficLayer")), l !== m.current.transitLayer && (l ? r.current.addGoogleLayer("TransitLayer") : l === !1 && r.current.removeGoogleLayer("TransitLayer")), i !== m.current.bicyclingLayer && (i ? r.current.addGoogleLayer("BicyclingLayer") : i === !1 && r.current.removeGoogleLayer("BicyclingLayer")), m.current = { ...f.current });
+  }, [n, l, i]), null;
 }
 export {
-  J as TileLayerGoogle
+  te as TileLayerGoogle
 };

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/googleMapsLoader.d.ts

@@ -5,6 +5,9 @@ type GoogleMapsLoaderOptions = {
 type GoogleMapsLoaderState = {
     pendingPromise: Promise<void> | null;
     pendingOptions: GoogleMapsLoaderOptions | null;
+    authenticationError?: Error;
+    failureListeners?: Set<(error: Error) => void>;
+    authenticationHandlerInstalled?: boolean;
 };
 declare const GCLICK_GOOGLE_MAPS_LOADER_STATE_PROPERTY: "__m4lGoogleMapsLoaderState__";
 declare global {
@@ -12,6 +15,8 @@ declare global {
         [GCLICK_GOOGLE_MAPS_LOADER_STATE_PROPERTY]?: GoogleMapsLoaderState;
     }
 }
+/** Subscribe maps in every bundle to Google's documented page-wide authentication failure. */
+export declare function subscribeGoogleMapsFailure(listener: (error: Error) => void): () => void;
 /**
  * Return whether the Google Maps JavaScript runtime is already available on the page.
  */

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/googleMapsLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"googleMapsLoader.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/googleMapsLoader.ts"],"names":[],"mappings":"AAEA,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,cAAc,EAAE,uBAAuB,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,wCAAwC,EAAG,8BAAuC,CAAC;AAEzF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,CAAC,wCAAwC,CAAC,CAAC,EACzC,qBAAqB,CAAC;KACzB;CACF;AAsCD;;GAEG;AACH,wBAAgB,0BAA0B,YAOzC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,uBAAuB,iBA+BrE"}
+{"version":3,"file":"googleMapsLoader.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/googleMapsLoader.ts"],"names":[],"mappings":"AAEA,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,cAAc,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC/C,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,gBAAgB,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC;IAC/C,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C,CAAC;AAEF,QAAA,MAAM,wCAAwC,EAAG,8BAAuC,CAAC;AAEzF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,CAAC,wCAAwC,CAAC,CAAC,EACzC,qBAAqB,CAAC;KACzB;CACF;AAoED,8FAA8F;AAC9F,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,cAO1E;AAED;;GAEG;AACH,wBAAgB,0BAA0B,YAQzC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,uBAAuB,iBAsCrE"}

package/components/maps/components/GpsMap/subcomponents/TileLayers/subcomponents/TileLayerGoogle/googleMapsLoader.js

@@ -1,38 +1,71 @@
-import { Loader as s } from "@googlemaps/js-api-loader";
-const o = "__m4lGoogleMapsLoaderState__";
-function r() {
+import { Loader as d } from "@googlemaps/js-api-loader";
+const s = "__m4lGoogleMapsLoaderState__";
+function l() {
   return typeof window > "u" ? null : window;
 }
-function a() {
-  const e = r();
-  return e ? (e[o] ??= {
+function u(r, e) {
+  try {
+    r(e);
+  } catch (n) {
+    console.error("[GpsMap] Google Maps failure listener failed.", n);
+  }
+}
+function i() {
+  const r = l();
+  if (!r)
+    return null;
+  r[s] ??= {
     pendingPromise: null,
     pendingOptions: null
-  }, e[o]) : null;
+  };
+  const e = r[s];
+  if (e.failureListeners ??= /* @__PURE__ */ new Set(), !e.authenticationHandlerInstalled) {
+    const n = r.gm_authFailure;
+    r.gm_authFailure = () => {
+      if (!e.authenticationError) {
+        const o = new Error(
+          "Google Maps authentication failed. Reload the page before retrying the JavaScript API."
+        );
+        e.authenticationError = o, e.failureListeners?.forEach((t) => u(t, o));
+      }
+      n?.call(r);
+    }, e.authenticationHandlerInstalled = !0;
+  }
+  return e;
 }
-function p() {
-  const e = r();
-  return e ? !!e.google?.maps?.Map : !1;
+function p(r) {
+  const e = i();
+  return e?.failureListeners?.add(r), e?.authenticationError && u(r, e.authenticationError), () => {
+    e?.failureListeners?.delete(r);
+  };
 }
-function l(e) {
-  if (p())
-    return Promise.resolve();
-  const n = a();
-  if (!n)
+function c() {
+  const r = l();
+  return r ? !i()?.authenticationError && typeof r.google?.maps?.Map == "function" : !1;
+}
+function h(r) {
+  const e = i();
+  if (!e)
     return Promise.reject(new Error("Google Maps can only load in a browser window."));
-  if (n.pendingPromise)
-    return n.pendingPromise;
-  n.pendingOptions ??= e;
-  const i = new s({
-    apiKey: n.pendingOptions.apiKey,
-    version: n.pendingOptions.version
-  });
-  return n.pendingPromise = i.importLibrary("maps").then(() => {
+  if (e.authenticationError)
+    return Promise.reject(e.authenticationError);
+  if (c())
+    return Promise.resolve();
+  if (e.pendingPromise)
+    return e.pendingPromise;
+  const n = e.pendingOptions ??= r;
+  let o;
+  return e.pendingPromise = new Promise((t, a) => {
+    o = p(a), new d({
+      apiKey: n.apiKey,
+      version: n.version
+    }).importLibrary("maps").then(() => t(), a);
   }).catch((t) => {
-    throw n.pendingPromise = null, n.pendingOptions = null, t;
-  }), n.pendingPromise;
+    throw e.pendingPromise = null, e.pendingOptions = null, t;
+  }).finally(() => o?.()), e.pendingPromise;
 }
 export {
-  p as hasLoadedGoogleMapsRuntime,
-  l as loadGoogleMapsLibrary
+  c as hasLoadedGoogleMapsRuntime,
+  h as loadGoogleMapsLibrary,
+  p as subscribeGoogleMapsFailure
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/gclick",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "publishConfig": {
     "access": "public"
   },
@@ -59,8 +59,8 @@
     "@mui/material": "5.16.7",
     "immer": "9.0.21",
     "react-hook-form": "7.71.1",
-    "leaflet.markercluster": "1.5.3",
     "@googlemaps/js-api-loader": "1.16.10",
+    "leaflet.markercluster": "1.5.3",
     "yup": "0.32.11"
   }
 }