@m4l/gclick 0.30.0-beta-pkg-787-ajustes-mf-51.0 → 0.31.0

package/components/AddressLocation/AddressLocation.d.ts

@@ -3,6 +3,10 @@ import { AddressLocationProps } from './types';
  * Compound component combining async address search with an embedded GpsMap.
  * Manages its own isolated MapProvider — consumers do not need to provide one.
  * The map is fully configurable via mapProps (all GpsMap props except style).
+ * With reverseEndPoint the pin is draggable: on drop, a single reverse-geocoding request
+ * resolves the address under the pin and it becomes the value.
+ * The Google Maps key comes from the environment context by default; a consumer can
+ * override it through mapProviderConfig.googleMapsApiKey.
  */
 export declare function AddressLocation({ mapProviderConfig, storeId: storeIdProp, ...innerProps }: AddressLocationProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddressLocation.d.ts.map

package/components/AddressLocation/AddressLocation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressLocation.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/AddressLocation.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAA6B,oBAAoB,EAA6B,MAAM,SAAS,CAAC;AAmD1G;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,GAAG,UAAU,EACd,EAAE,oBAAoB,oDAgBtB"}
+{"version":3,"file":"AddressLocation.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/AddressLocation.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAEV,oBAAoB,EAGrB,MAAM,SAAS,CAAC;AA6FjB;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,GAAG,UAAU,EACd,EAAE,oBAAoB,oDAiBtB"}

package/components/AddressLocation/AddressLocation.js

@@ -1,68 +1,100 @@
-import { jsx as e, jsxs as f } from "@emotion/react/jsx-runtime";
-import { useRef as M } from "react";
-import { AutocompleteAsync as h, Icon as L } from "@m4l/components";
-import { TravelMapOutlined as S, TravelLocationOutlined as I } from "@m4l/icons";
-import { GpsMap as y } from "../maps/components/GpsMap/GpsMap.js";
-import { MapProvider as T } from "../maps/components/GpsMap/contexts/MapContext/MapContext.js";
-import { useAddressLocationState as b } from "./hooks/useAddressLocationState.js";
-import { useAddressLocationSearch as v } from "./hooks/useAddressLocationSearch.js";
-import { AddressLocationRootStyled as V, AddressLocationMapToggleStyled as x, AddressLocationMapWrapperStyled as R } from "./slots/AddressLocationSlots.js";
-function j({
+import { jsx as e, jsxs as T } from "@emotion/react/jsx-runtime";
+import { useRef as K, useMemo as b } from "react";
+import { useEnvironment as x } from "@m4l/core";
+import { AutocompleteAsync as E, Icon as V } from "@m4l/components";
+import { TravelMapOutlined as C, TravelLocationOutlined as H } from "@m4l/icons";
+import { GpsMap as j } from "../maps/components/GpsMap/GpsMap.js";
+import { MapProvider as G } from "../maps/components/GpsMap/contexts/MapContext/MapContext.js";
+import { useAddressLocationState as O } from "./hooks/useAddressLocationState.js";
+import { useAddressLocationSearch as w } from "./hooks/useAddressLocationSearch.js";
+import { useAddressLocationPinDrag as F } from "./hooks/useAddressLocationPinDrag.js";
+import { AddressLocationPinDragContext as P } from "./contexts/AddressLocationPinDragContext.js";
+import { AddressLocationRootStyled as W, AddressLocationMapToggleStyled as Z, AddressLocationMapWrapperStyled as $ } from "./slots/AddressLocationSlots.js";
+function k({
   mapHeight: o,
-  defaultMapVisible: r = !1,
-  mapProps: s,
-  value: t,
-  onChange: a,
-  disabled: i,
-  detailEndPoint: l,
-  ...p
+  defaultMapVisible: s = !1,
+  mapProps: a,
+  value: r,
+  onChange: t,
+  disabled: n,
+  detailEndPoint: A,
+  reverseEndPoint: u,
+  reverseParms: M,
+  ...d
 }) {
-  const { isMapVisible: n, setIsMapVisible: c, mapCenter: m, mapHeightResolved: g } = b({ value: t, defaultMapVisible: r, mapHeight: o }), { handleChange: u } = v({ onChange: a, detailEndPoint: l }), d = { isMapVisible: n, mapHeight: g };
-  return /* @__PURE__ */ f(V, { children: [
+  const { responseToCamelCase: l, isRemote: p } = d, {
+    draggable: m,
+    isDraggingRef: h,
+    centerKeepZoomRef: L,
+    onDragStart: c,
+    onDragEnd: g
+  } = F({
+    reverseEndPoint: u,
+    reverseParms: M,
+    onChange: t,
+    disabled: n,
+    responseToCamelCase: l,
+    isRemote: p
+  }), { isMapVisible: i, setIsMapVisible: S, mapCenter: v, mapHeightResolved: y } = O({
+    value: r,
+    defaultMapVisible: s,
+    mapHeight: o,
+    isDraggingRef: h,
+    centerKeepZoomRef: L
+  }), { handleChange: D } = w({
+    onChange: t,
+    detailEndPoint: A,
+    responseToCamelCase: l,
+    isRemote: p
+  }), f = { isMapVisible: i, mapHeight: y }, I = b(
+    () => ({ draggable: m, onDragStart: c, onDragEnd: g }),
+    [m, c, g]
+  );
+  return /* @__PURE__ */ T(W, { children: [
     /* @__PURE__ */ e(
-      h,
+      E,
       {
         resultField: "data.items",
-        startAdornment: /* @__PURE__ */ e(L, { src: /* @__PURE__ */ e(I, {}) }),
-        value: t ?? null,
-        disabled: i,
-        onChange: u,
+        startAdornment: /* @__PURE__ */ e(V, { src: /* @__PURE__ */ e(H, {}) }),
+        value: r ?? null,
+        disabled: n,
+        onChange: D,
         endAdornment: /* @__PURE__ */ e(
-          x,
+          Z,
           {
-            ownerState: d,
-            isToggled: n,
-            onToggle: () => c((A) => !A),
-            disabled: i,
-            icon: /* @__PURE__ */ e(S, {}),
+            ownerState: f,
+            isToggled: i,
+            onToggle: () => S((R) => !R),
+            disabled: n,
+            icon: /* @__PURE__ */ e(C, {}),
             "aria-label": "toggle map"
           }
         ),
-        ...p
+        ...d
       }
     ),
-    n && /* @__PURE__ */ e(R, { ownerState: d, children: /* @__PURE__ */ e(y, { center: m, ...s }) })
+    i && /* @__PURE__ */ e($, { ownerState: f, children: /* @__PURE__ */ e(P.Provider, { value: I, children: /* @__PURE__ */ e(j, { center: v, ...a }) }) })
   ] });
 }
-function W({
+function re({
   mapProviderConfig: o,
-  storeId: r,
-  ...s
+  storeId: s,
+  ...a
 }) {
-  const t = M(
+  const { googleMapsApiKey: r } = x(), t = K(
     `address-location-${Math.random().toString(36).slice(2, 9)}`
   ).current;
   return /* @__PURE__ */ e(
-    T,
+    G,
     {
-      storeId: r ?? t,
-      googleMapsApiKey: o?.googleMapsApiKey,
+      storeId: s ?? t,
+      googleMapsApiKey: o?.googleMapsApiKey ?? r,
       googleMapVersion: o?.googleMapVersion,
       storeDevtoolsEnabled: o?.storeDevtoolsEnabled ?? !1,
-      children: /* @__PURE__ */ e(j, { ...s })
+      children: /* @__PURE__ */ e(k, { ...a })
     }
   );
 }
 export {
-  W as AddressLocation
+  re as AddressLocation
 };

package/components/AddressLocation/AddressLocation.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressLocation.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/AddressLocation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,qBA8BnC,CAAC"}
+{"version":3,"file":"AddressLocation.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/AddressLocation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,qBAgCnC,CAAC"}

package/components/AddressLocation/AddressLocation.styles.js

@@ -1,5 +1,5 @@
-import { MIN_MAP_HEIGHT as t, DEFAULT_MAP_HEIGHT as o } from "./constants.js";
-const a = {
+import { MIN_MAP_HEIGHT as t, DEFAULT_MAP_HEIGHT as a } from "./constants.js";
+const r = {
   /** Root flex container for the AddressLocation compound component. */
   root: () => ({
     display: "flex",
@@ -19,17 +19,19 @@ const a = {
       }
     }
   }),
-  /** Map panel wrapper — applies the Figma border, radius, and dynamic height. */
+  /**
+   * Map panel wrapper — applies the radius and dynamic height. It has no border by design:
+   * a fixed light border (from the original Figma) looked like a bright ring in dark mode.
+   */
   mapWrapper: ({ ownerState: i }) => ({
-    border: "2px solid #f1f5f9",
     borderRadius: 12,
     overflow: "hidden",
     width: "100%",
     flexShrink: 0,
-    height: i?.mapHeight ?? o,
+    height: i?.mapHeight ?? a,
     minHeight: t
   })
 };
 export {
-  a as addressLocationStyles
+  r as addressLocationStyles
 };

package/components/AddressLocation/constants.d.ts

@@ -8,6 +8,11 @@ export declare const ADDRESS_LOCATION_SEARCH_LIMIT = 5;
 export declare const ADDRESS_LOCATION_PIN_LAYER_ID = "address-location-pin";
 /** Default zoom level applied when the map centers on a selected address. */
 export declare const ADDRESS_LOCATION_DEFAULT_ZOOM = 16;
+/**
+ * Stable feature id for the address pin. The id never follows the selected item so the
+ * Leaflet Marker stays mounted across value changes — a remount mid-drag would cut the drag.
+ */
+export declare const ADDRESS_LOCATION_PIN_FEATURE_ID = "address-location-pin-feature";
 /** MUI component key for theming and slot identification. */
 export declare const ADDRESS_LOCATION_KEY_COMPONENT: "M4LAddressLocation";
 //# sourceMappingURL=constants.d.ts.map

package/components/AddressLocation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/constants.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0DAA0D;AAC1D,eAAO,MAAM,6BAA6B,IAAI,CAAC;AAE/C,8EAA8E;AAC9E,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,6EAA6E;AAC7E,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAEhD,6DAA6D;AAC7D,eAAO,MAAM,8BAA8B,EAAG,oBAA6B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/constants.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0DAA0D;AAC1D,eAAO,MAAM,6BAA6B,IAAI,CAAC;AAE/C,8EAA8E;AAC9E,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,6EAA6E;AAC7E,eAAO,MAAM,6BAA6B,KAAK,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAE9E,6DAA6D;AAC7D,eAAO,MAAM,8BAA8B,EAAG,oBAA6B,CAAC"}

package/components/AddressLocation/constants.js

@@ -1,7 +1,8 @@
-const _ = 250, A = 325, o = "address-location-pin", E = 16, O = "M4LAddressLocation";
+const _ = 250, A = 325, o = "address-location-pin", E = 16, s = "address-location-pin-feature", D = "M4LAddressLocation";
 export {
   E as ADDRESS_LOCATION_DEFAULT_ZOOM,
-  O as ADDRESS_LOCATION_KEY_COMPONENT,
+  D as ADDRESS_LOCATION_KEY_COMPONENT,
+  s as ADDRESS_LOCATION_PIN_FEATURE_ID,
   o as ADDRESS_LOCATION_PIN_LAYER_ID,
   A as DEFAULT_MAP_HEIGHT,
   _ as MIN_MAP_HEIGHT

package/components/AddressLocation/contexts/AddressLocationPinDragContext.d.ts

@@ -0,0 +1,12 @@
+import { AddressLocationPinDragHandlers } from '../types';
+/**
+ * Default handlers: pin not draggable and no-op callbacks, so AddressLocationPinRender
+ * keeps working when rendered without a provider (e.g. isolated unit tests).
+ */
+export declare const ADDRESS_LOCATION_PIN_DRAG_DEFAULT: AddressLocationPinDragHandlers;
+/**
+ * Carries the pin drag handlers from AddressLocation down to the pin marker.
+ * The marker is rendered by the map store (renderFeature), so it cannot receive props directly.
+ */
+export declare const AddressLocationPinDragContext: import('react').Context<AddressLocationPinDragHandlers>;
+//# sourceMappingURL=AddressLocationPinDragContext.d.ts.map

package/components/AddressLocation/contexts/AddressLocationPinDragContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressLocationPinDragContext.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/contexts/AddressLocationPinDragContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,iCAAiC,EAAE,8BAI/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,6BAA6B,yDAEzC,CAAC"}

package/components/AddressLocation/contexts/AddressLocationPinDragContext.js

@@ -0,0 +1,13 @@
+import { createContext as o } from "react";
+const r = {
+  draggable: !1,
+  onDragStart: () => {
+  },
+  onDragEnd: () => Promise.resolve(!0)
+}, e = o(
+  r
+);
+export {
+  r as ADDRESS_LOCATION_PIN_DRAG_DEFAULT,
+  e as AddressLocationPinDragContext
+};

package/components/AddressLocation/hooks/useAddressLocationMap.d.ts

@@ -1,3 +1,9 @@
-/** Manages the address pin layer inside GpsMap and centers the map on selection. */
-export declare function useAddressLocationMap(selectedItem: unknown | null | undefined): void;
+import { AddressLocationDragFlags } from '../types';
+/**
+ * Manages the address pin layer inside GpsMap and centers the map on every value change.
+ * While the pin is being dragged the store is left untouched (Leaflet owns the marker
+ * position); a value change that comes from a drop recenters on the pin keeping the
+ * current zoom, while a selection also applies the default zoom.
+ */
+export declare function useAddressLocationMap(selectedItem: unknown | null | undefined, { isDraggingRef, centerKeepZoomRef }?: AddressLocationDragFlags): void;
 //# sourceMappingURL=useAddressLocationMap.d.ts.map

package/components/AddressLocation/hooks/useAddressLocationMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAddressLocationMap.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationMap.ts"],"names":[],"mappings":"AAUA,oFAAoF;AACpF,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,QAkEzC"}
+{"version":3,"file":"useAddressLocationMap.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationMap.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,EACxC,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAE,wBAA6B,QAiFpE"}

package/components/AddressLocation/hooks/useAddressLocationMap.js

@@ -1,49 +1,53 @@
-import { useRef as u, useEffect as f } from "react";
-import { useModuleDictionary as m } from "@m4l/core";
-import { useMapStore as p } from "../../maps/components/GpsMap/hooks/useMapStore/index.js";
-import { AddressLocationPinRender as l } from "../subcomponents/AddressLocationPinRender.js";
-import { ADDRESS_LOCATION_PIN_LAYER_ID as t, ADDRESS_LOCATION_DEFAULT_ZOOM as L } from "../constants.js";
-import { ADDRESS_LOCATION_DICCTIONARY as A } from "../dictionary.js";
-function E(o) {
-  const e = p((r) => r.mapActions), { getLabel: s } = m(), a = u(!1), c = u(s);
-  c.current = s, f(() => (a.current || (e.addLayer({
-    layerId: t,
+import { useRef as A, useEffect as m } from "react";
+import { useModuleDictionary as L } from "@m4l/core";
+import { useMapStore as d } from "../../maps/components/GpsMap/hooks/useMapStore/index.js";
+import { AddressLocationPinRender as p } from "../subcomponents/AddressLocationPinRender.js";
+import { ADDRESS_LOCATION_PIN_LAYER_ID as o, ADDRESS_LOCATION_PIN_FEATURE_ID as _, ADDRESS_LOCATION_DEFAULT_ZOOM as D } from "../constants.js";
+import { ADDRESS_LOCATION_DICCTIONARY as y } from "../dictionary.js";
+function R(a, { isDraggingRef: s, centerKeepZoomRef: r } = {}) {
+  const e = d((i) => i.mapActions), { getLabel: u } = L(), n = A(!1), c = A(u);
+  c.current = u, m(() => (n.current || (e.addLayer({
+    layerId: o,
     // Layer title shown in the GpsMap Layers panel, resolved from the dictionary.
-    name: c.current(A.LABEL_PIN_LAYER),
+    name: c.current(y.LABEL_PIN_LAYER),
     autoFocus: !1,
-    renderFeature: l
-  }), a.current = !0), () => {
-    e.removeLayer(t), a.current = !1;
-  }), [e]), f(() => {
-    if (!o) {
-      e.setDataLayer(t, {
+    renderFeature: p
+  }), n.current = !0), () => {
+    e.removeLayer(o), n.current = !1;
+  }), [e]), m(() => {
+    if (s?.current)
+      return;
+    const i = r?.current ?? !1;
+    if (r && (r.current = !1), !a) {
+      e.setDataLayer(o, {
         object: { type: "FeatureCollection", features: [] }
       });
       return;
     }
-    const r = o;
-    if (!r.coordinates)
+    const t = a;
+    if (!t.coordinates)
       return;
-    const { lat: n, lng: i } = r.coordinates;
-    e.setDataLayer(t, {
+    const { lat: f, lng: l } = t.coordinates;
+    e.setDataLayer(o, {
       object: {
         type: "FeatureCollection",
         features: [
           {
             type: "Feature",
-            id: r.id ?? `${n},${i}`,
+            // Stable id: the item id is kept in properties so the Marker is never remounted.
+            id: _,
             // GeoJSON uses [longitude, latitude] order
-            geometry: { type: "Point", coordinates: [i, n] },
-            properties: { label: r.label }
+            geometry: { type: "Point", coordinates: [l, f] },
+            properties: { label: t.label, itemId: t.id }
           }
         ]
       }
     }), e.moveToPoint(
-      { lat: n, lng: i },
-      { zoom: L }
+      { lat: f, lng: l },
+      i ? {} : { zoom: D }
     );
-  }, [o, e]);
+  }, [a, e, s, r]);
 }
 export {
-  E as useAddressLocationMap
+  R as useAddressLocationMap
 };

package/components/AddressLocation/hooks/useAddressLocationPinDrag.d.ts

@@ -0,0 +1,10 @@
+import { UseAddressLocationPinDragProps, UseAddressLocationPinDragReturn } from '../types';
+/**
+ * Owns the pin drag lifecycle: a single reverse-geocoding request when the pin is dropped.
+ * Nothing is requested while the pin moves (the developer chose one request per drop to
+ * keep backend traffic minimal). The value handed to onChange is always the backend
+ * location as-is — the frontend never builds or adjusts coordinates.
+ * Must be called inside MapProvider.
+ */
+export declare function useAddressLocationPinDrag({ reverseEndPoint, reverseParms, onChange, disabled, responseToCamelCase, isRemote, }: UseAddressLocationPinDragProps): UseAddressLocationPinDragReturn;
+//# sourceMappingURL=useAddressLocationPinDrag.d.ts.map

package/components/AddressLocation/hooks/useAddressLocationPinDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAddressLocationPinDrag.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationPinDrag.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,8BAA8B,EAC9B,+BAA+B,EAChC,MAAM,UAAU,CAAC;AAOlB;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,mBAAmB,EACnB,QAAe,GAChB,EAAE,8BAA8B,GAAG,+BAA+B,CAyGlE"}

package/components/AddressLocation/hooks/useAddressLocationPinDrag.js

@@ -0,0 +1,63 @@
+import { useRef as n, useCallback as u, useEffect as k } from "react";
+import { useNetwork as h } from "@m4l/core";
+function x({
+  reverseEndPoint: e,
+  reverseParms: a,
+  onChange: l,
+  disabled: d,
+  responseToCamelCase: s,
+  isRemote: f = !0
+}) {
+  const { networkOperation: i } = h(), c = n(!1), g = n(!1), b = n(l);
+  b.current = l;
+  const p = n(a);
+  p.current = a;
+  const t = n(null), m = !!e && !d, R = u(
+    async (o) => {
+      if (!e)
+        return null;
+      t.current?.abort();
+      const r = new AbortController();
+      t.current = r;
+      try {
+        const D = await i({
+          method: "GET",
+          endPoint: e,
+          isRemote: f,
+          responseToCamelCase: s,
+          parms: { lat: o.lat, lng: o.lng, ...p.current },
+          signal: r.signal
+        });
+        return r.signal.aborted ? null : D.data?.location ?? null;
+      } catch {
+        return null;
+      } finally {
+        t.current === r && (t.current = null);
+      }
+    },
+    [i, e, f, s]
+  ), w = u(() => {
+    c.current = !0;
+  }, []), y = u(
+    async (o) => {
+      const r = await R(o);
+      return c.current = !1, r ? (g.current = !0, b.current?.(r), !0) : !1;
+    },
+    [R]
+  );
+  return k(
+    () => () => {
+      t.current?.abort();
+    },
+    []
+  ), {
+    draggable: m,
+    isDraggingRef: c,
+    centerKeepZoomRef: g,
+    onDragStart: w,
+    onDragEnd: y
+  };
+}
+export {
+  x as useAddressLocationPinDrag
+};

package/components/AddressLocation/hooks/useAddressLocationSearch.d.ts

@@ -4,7 +4,7 @@ import { UseAddressLocationSearchProps } from '../types';
  * When detailEndPoint is provided, requests location detail (coordinates) via useNetwork before calling onChange.
  * Must be called inside MapProvider.
  */
-export declare function useAddressLocationSearch({ onChange, detailEndPoint }: UseAddressLocationSearchProps): {
+export declare function useAddressLocationSearch({ onChange, detailEndPoint, responseToCamelCase, isRemote, }: UseAddressLocationSearchProps): {
     handleChange: (_event: unknown, newValue: unknown | unknown[] | null) => Promise<void>;
 };
 //# sourceMappingURL=useAddressLocationSearch.d.ts.map

package/components/AddressLocation/hooks/useAddressLocationSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAddressLocationSearch.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationSearch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,6BAA6B;2BAKjF,OAAO,YAAY,OAAO,GAAG,OAAO,EAAE,GAAG,IAAI;EA+B/D"}
+{"version":3,"file":"useAddressLocationSearch.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationSearch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,cAAc,EACd,mBAAmB,EACnB,QAAe,GAChB,EAAE,6BAA6B;2BAKb,OAAO,YAAY,OAAO,GAAG,OAAO,EAAE,GAAG,IAAI;EAiC/D"}

package/components/AddressLocation/hooks/useAddressLocationSearch.js

@@ -1,33 +1,39 @@
-import { useCallback as a } from "react";
-import { useNetwork as i } from "@m4l/core";
-function f({ onChange: r, detailEndPoint: e }) {
-  const { networkOperation: o } = i();
-  return { handleChange: a(
-    async (u, s) => {
-      const t = Array.isArray(s) ? null : s;
-      if (!t || !e) {
-        r?.(t);
+import { useCallback as u } from "react";
+import { useNetwork as d } from "@m4l/core";
+function h({
+  onChange: t,
+  detailEndPoint: o,
+  responseToCamelCase: c,
+  isRemote: e = !0
+}) {
+  const { networkOperation: n } = d();
+  return { handleChange: u(
+    async (m, s) => {
+      const r = Array.isArray(s) ? null : s;
+      if (!r || !o) {
+        t?.(r);
         return;
       }
-      const c = t.id;
-      if (!c) {
-        r?.(t);
+      const a = r.id;
+      if (!a) {
+        t?.(r);
         return;
       }
       try {
-        const n = await o({
+        const i = await n({
           method: "GET",
-          endPoint: `${e}/${encodeURIComponent(c)}`,
-          isRemote: !0
+          endPoint: `${o}/${encodeURIComponent(a)}`,
+          isRemote: e,
+          responseToCamelCase: c
         });
-        r?.(n.data?.location ?? t);
+        t?.(i.data?.location ?? r);
       } catch {
-        r?.(t);
+        t?.(r);
       }
     },
-    [r, e, o]
+    [t, o, n, e, c]
   ) };
 }
 export {
-  f as useAddressLocationSearch
+  h as useAddressLocationSearch
 };

package/components/AddressLocation/hooks/useAddressLocationState.d.ts

@@ -4,5 +4,5 @@ import { UseAddressLocationStateProps, UseAddressLocationStateReturn } from '../
  * Also wires the pin layer lifecycle via useAddressLocationMap.
  * Must be called inside MapProvider.
  */
-export declare function useAddressLocationState({ value, defaultMapVisible, mapHeight, }: UseAddressLocationStateProps): UseAddressLocationStateReturn;
+export declare function useAddressLocationState({ value, defaultMapVisible, mapHeight, isDraggingRef, centerKeepZoomRef, }: UseAddressLocationStateProps): UseAddressLocationStateReturn;
 //# sourceMappingURL=useAddressLocationState.d.ts.map

package/components/AddressLocation/hooks/useAddressLocationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAddressLocationState.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,UAAU,CAAC;AAElB;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,iBAAyB,EACzB,SAAS,GACV,EAAE,4BAA4B,GAAG,6BAA6B,CAa9D"}
+{"version":3,"file":"useAddressLocationState.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/hooks/useAddressLocationState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,UAAU,CAAC;AAElB;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,iBAAyB,EACzB,SAAS,EACT,aAAa,EACb,iBAAiB,GAClB,EAAE,4BAA4B,GAAG,6BAA6B,CAa9D"}

package/components/AddressLocation/hooks/useAddressLocationState.js

@@ -1,16 +1,18 @@
-import { useState as d } from "react";
-import { DEFAULT_MAP_HEIGHT as c, MIN_MAP_HEIGHT as m } from "../constants.js";
-import { useAddressLocationMap as p } from "./useAddressLocationMap.js";
-function A({
+import { useState as m } from "react";
+import { DEFAULT_MAP_HEIGHT as p, MIN_MAP_HEIGHT as l } from "../constants.js";
+import { useAddressLocationMap as M } from "./useAddressLocationMap.js";
+function u({
   value: t,
   defaultMapVisible: e = !1,
-  mapHeight: s
+  mapHeight: s,
+  isDraggingRef: i,
+  centerKeepZoomRef: a
 }) {
-  const [i, a] = d(e);
-  p(t);
-  const o = t, n = o?.coordinates?.lat !== void 0 && o?.coordinates?.lng !== void 0 ? [o.coordinates.lat, o.coordinates.lng] : void 0, r = Math.max(s ?? c, m);
-  return { isMapVisible: i, setIsMapVisible: a, mapCenter: n, mapHeightResolved: r };
+  const [n, r] = m(e);
+  M(t, { isDraggingRef: i, centerKeepZoomRef: a });
+  const o = t, d = o?.coordinates?.lat !== void 0 && o?.coordinates?.lng !== void 0 ? [o.coordinates.lat, o.coordinates.lng] : void 0, c = Math.max(s ?? p, l);
+  return { isMapVisible: n, setIsMapVisible: r, mapCenter: d, mapHeightResolved: c };
 }
 export {
-  A as useAddressLocationState
+  u as useAddressLocationState
 };

package/components/AddressLocation/subcomponents/AddressLocationPinRender.d.ts

@@ -2,6 +2,7 @@ import { ComponentRenderPropFeature } from '../../maps/components/GpsMap/context
 /**
  * Renders the selected address pin inside GpsMap using a custom drop-pin SVG marker.
  * Used as renderFeature for the ADDRESS_LOCATION_PIN_LAYER_ID layer.
+ * When the drag context enables it, the pin is draggable and reports drag events.
  */
 export declare const AddressLocationPinRender: ComponentRenderPropFeature;
 //# sourceMappingURL=AddressLocationPinRender.d.ts.map

package/components/AddressLocation/subcomponents/AddressLocationPinRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressLocationPinRender.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/subcomponents/AddressLocationPinRender.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,kDAAkD,CAAC;AAG1D;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,0BAoDtC,CAAC"}
+{"version":3,"file":"AddressLocationPinRender.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/AddressLocation/subcomponents/AddressLocationPinRender.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,kDAAkD,CAAC;AAU1D;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,0BAuFtC,CAAC"}

package/components/AddressLocation/subcomponents/AddressLocationPinRender.js

@@ -1,30 +1,48 @@
-import { jsx as a } from "@emotion/react/jsx-runtime";
-import { Marker as m } from "react-leaflet";
-import { shallow as f } from "zustand/shallow";
-import { useMapStore as p } from "../../maps/components/GpsMap/hooks/useMapStore/index.js";
-import { useAddressLocationMarkerIcon as d } from "../hooks/useAddressLocationMarkerIcon.js";
-const h = ({
-  id: t,
-  layerId: n
+import { jsx as v } from "@emotion/react/jsx-runtime";
+import { useContext as j, useRef as A, useMemo as p } from "react";
+import { Marker as h } from "react-leaflet";
+import { shallow as x } from "zustand/shallow";
+import { useMapStore as C } from "../../maps/components/GpsMap/hooks/useMapStore/index.js";
+import { useAddressLocationMarkerIcon as M } from "../hooks/useAddressLocationMarkerIcon.js";
+import { AddressLocationPinDragContext as P } from "../contexts/AddressLocationPinDragContext.js";
+function k(n) {
+  const { lat: s, lng: a } = n.target.getLatLng();
+  return { lat: s, lng: a };
+}
+const N = ({
+  id: n,
+  layerId: s
 }) => {
-  const e = p((c) => {
-    const o = c.hashLayers[n]?.geoJsonObject;
-    return o && o.object.type === "FeatureCollection" ? o.object.features.find((l) => l.id === t) ?? null : null;
-  }, f), i = d();
-  if (!e || e.geometry?.type !== "Point")
-    return null;
-  const { coordinates: r } = e.geometry;
-  if (!Array.isArray(r) || !Number.isFinite(r[0]) || !Number.isFinite(r[1]))
-    return null;
-  const [s, u] = r;
-  return /* @__PURE__ */ a(
-    m,
+  const a = C((t) => {
+    const o = t.hashLayers[s]?.geoJsonObject;
+    return o && o.object.type === "FeatureCollection" ? o.object.features.find((f) => f.id === n) ?? null : null;
+  }, x), L = M(), { draggable: y, onDragStart: u, onDragEnd: d } = j(P), e = A(null), b = p(
+    () => ({
+      /** Remembers where the drag began and notifies the drag hook. */
+      dragstart: (t) => {
+        e.current = t.target.getLatLng(), u();
+      },
+      /** Reports the drop position; snaps the marker back when the drop is rejected. */
+      dragend: async (t) => {
+        const o = t.target;
+        !await d(k(t)) && e.current && o.setLatLng(e.current), e.current = null;
+      }
+    }),
+    [u, d]
+  ), l = a?.geometry, r = l?.type === "Point" ? l.coordinates : void 0, g = Array.isArray(r) && Number.isFinite(r[0]) && Number.isFinite(r[1]), i = g ? r[0] : void 0, c = g ? r[1] : void 0, m = p(
+    () => c !== void 0 && i !== void 0 ? [c, i] : null,
+    [c, i]
+  );
+  return m ? /* @__PURE__ */ v(
+    h,
     {
-      position: [u, s],
-      icon: i
+      position: m,
+      icon: L,
+      draggable: y,
+      eventHandlers: b
     }
-  );
+  ) : null;
 };
 export {
-  h as AddressLocationPinRender
+  N as AddressLocationPinRender
 };

package/components/AddressLocation/types.d.ts

@@ -8,7 +8,10 @@ import { AddressLocationSlots } from './slots/AddressLocationEnum';
  * Separated to keep map infrastructure config distinct from UX config.
  */
 export interface AddressLocationMapProviderConfig {
-    /** Google Maps API key (required only when using Google tile sources). */
+    /**
+     * Google Maps API key override. When omitted, the key from the environment context
+     * (useEnvironment().googleMapsApiKey) is used, so consumers normally do not set it.
+     */
     googleMapsApiKey?: string;
     /** Google Maps API version. Defaults to 'weekly'. */
     googleMapVersion?: string;
@@ -53,15 +56,72 @@ export interface AddressLocationProps<T = unknown> extends Omit<AutocompleteAsyn
     storeId?: string;
     /** Endpoint to fetch location detail (coordinates) after the user selects a suggestion. */
     detailEndPoint?: string;
+    /**
+     * Reverse-geocoding endpoint (coordinates → location). When provided, the map pin becomes
+     * draggable: nothing is requested while it moves; on drop, a single request resolves the
+     * address and onChange receives the location returned by the backend. Without it the pin
+     * stays static.
+     */
+    reverseEndPoint?: string;
+    /** Extra query params sent with every reverse request (e.g. geocoder, lang). Consumer-owned. */
+    reverseParms?: Record<string, string | number>;
 }
 /** Props for the inner layout component — all AddressLocation props except mapProviderConfig and storeId. */
 export type AddressLocationInnerProps = Omit<AddressLocationProps, 'mapProviderConfig' | 'storeId'>;
+/** Geographic point as used by the pin drag flow. */
+export interface AddressLocationLatLng {
+    lat: number;
+    lng: number;
+}
+/**
+ * Drag flags shared between the drag hook and the map hook.
+ * Refs (not state) so reading them inside effects never triggers re-renders.
+ */
+export interface AddressLocationDragFlags {
+    /** True from dragstart until the drop's reverse request settles — the store must not touch the pin. */
+    isDraggingRef?: React.MutableRefObject<boolean>;
+    /**
+     * Set once when a value change comes from a drop, so the map recenters on the pin
+     * keeping the current zoom instead of jumping to the selection zoom.
+     */
+    centerKeepZoomRef?: React.MutableRefObject<boolean>;
+}
 /** Input props for useAddressLocationState. */
-export interface UseAddressLocationStateProps {
+export interface UseAddressLocationStateProps extends AddressLocationDragFlags {
     value?: unknown | null;
     defaultMapVisible?: boolean;
     mapHeight?: number;
 }
+/** Handlers the pin marker uses to report drag events (provided through context). */
+export interface AddressLocationPinDragHandlers {
+    /** Whether the pin can be dragged at all. */
+    draggable: boolean;
+    /** Called when the user starts dragging the pin. */
+    onDragStart: () => void;
+    /** Called when the pin is dropped. Resolves false when the marker must snap back. */
+    onDragEnd: (latLng: AddressLocationLatLng) => Promise<boolean>;
+}
+/**
+ * Network options shared by the detail and reverse requests. They mirror the same-named
+ * AutocompleteAsync props so every request of the component targets the backend the same
+ * way (host selection and response casing) as the search itself.
+ */
+export interface AddressLocationRequestOptions {
+    /** Convert the response keys to camelCase, as AutocompleteAsync does for the search. */
+    responseToCamelCase?: boolean;
+    /** Use the remote API host (default true), as AutocompleteAsync does for the search. */
+    isRemote?: boolean;
+}
+/** Input props for useAddressLocationPinDrag. */
+export interface UseAddressLocationPinDragProps extends AddressLocationRequestOptions {
+    reverseEndPoint?: string;
+    reverseParms?: Record<string, string | number>;
+    onChange?: AddressLocationProps['onChange'];
+    disabled?: boolean;
+}
+/** Return value of useAddressLocationPinDrag. */
+export interface UseAddressLocationPinDragReturn extends AddressLocationPinDragHandlers, Required<AddressLocationDragFlags> {
+}
 /** Return value of useAddressLocationState. */
 export interface UseAddressLocationStateReturn {
     isMapVisible: boolean;
@@ -72,7 +132,7 @@ export interface UseAddressLocationStateReturn {
     mapHeightResolved: number;
 }
 /** Input props for useAddressLocationSearch. */
-export interface UseAddressLocationSearchProps {
+export interface UseAddressLocationSearchProps extends AddressLocationRequestOptions {
     onChange?: AddressLocationProps['onChange'];
     detailEndPoint?: string;
 }

package/components/AddressLocation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,wBAAwB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAEzE,2DAA2D;AAC3D,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,CACxD,wBAAwB,EACxB,OAAO,8BAA8B,EACrC,KAAK,CACN,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAC/C,SAAQ,IAAI,CACV,sBAAsB,CAAC,CAAC,CAAC,EACvB,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,gBAAgB,GAChB,aAAa,CAChB;IACD,qDAAqD;IACrD,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,gCAAgC,CAAC;IACrD,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,6GAA6G;AAC7G,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAC;AAIpG,+CAA+C;AAC/C,MAAM,WAAW,4BAA4B;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+CAA+C;AAC/C,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,mEAAmE;IACnE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IACxC,sDAAsD;IACtD,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,gDAAgD;AAChD,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/AddressLocation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,4DAA4D;IAC5D,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,wBAAwB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAEzE,2DAA2D;AAC3D,MAAM,MAAM,qBAAqB,GAAG,sBAAsB,CACxD,wBAAwB,EACxB,OAAO,8BAA8B,EACrC,KAAK,CACN,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,OAAO,CAC/C,SAAQ,IAAI,CACV,sBAAsB,CAAC,CAAC,CAAC,EACvB,OAAO,GACP,UAAU,GACV,UAAU,GACV,cAAc,GACd,gBAAgB,GAChB,aAAa,CAChB;IACD,qDAAqD;IACrD,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,gCAAgC,CAAC;IACrD,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gGAAgG;IAChG,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAChD;AAED,6GAA6G;AAC7G,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,GAAG,SAAS,CAAC,CAAC;AAIpG,qDAAqD;AACrD,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC,uGAAuG;IACvG,aAAa,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACrD;AAED,+CAA+C;AAC/C,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qFAAqF;AACrF,MAAM,WAAW,8BAA8B;IAC7C,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,qFAAqF;IACrF,SAAS,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAChE;AAED;;;;GAIG;AACH,MAAM,WAAW,6BAA6B;IAC5C,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iDAAiD;AACjD,MAAM,WAAW,8BAA+B,SAAQ,6BAA6B;IACnF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iDAAiD;AACjD,MAAM,WAAW,+BACf,SAAQ,8BAA8B,EAAE,QAAQ,CAAC,wBAAwB,CAAC;CAAG;AAE/E,+CAA+C;AAC/C,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,mEAAmE;IACnE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IACxC,sDAAsD;IACtD,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,gDAAgD;AAChD,MAAM,WAAW,6BAA8B,SAAQ,6BAA6B;IAClF,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

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

@@ -1,6 +1,6 @@
 import { MapProps } from '../../types';
 /**
- * Render the base-map source selected in the map store.
+ * Render the selected base-map source with the live theme and tile reserve preference.
  */
 export declare function TileLayers({ tileReserveFactor, }: Pick<MapProps, 'tileReserveFactor'>): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TileLayers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TileLayers.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/TileLayers.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,iBAA+C,GAChD,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,oDA8BrC"}
+{"version":3,"file":"TileLayers.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/TileLayers.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,iBAA+C,GAChD,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAAmB,CAAC,oDA8BrC"}

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

@@ -1,39 +1,34 @@
-import { jsxs as n, jsx as t } from "@emotion/react/jsx-runtime";
-import m, { useEffect as a } from "react";
-import { useMap as f } from "react-leaflet";
-import { useLocalStorageWithListener as p } from "@m4l/core";
-import { KEY_LOCAL_STORAGE_THEME_SETTINGS as E, defaultThemeSettings as T } from "@m4l/graphics";
+import { jsxs as m, jsx as o } from "@emotion/react/jsx-runtime";
+import n, { useEffect as a } from "react";
+import { useMap as p } from "react-leaflet";
+import { useMapThemeMode as f } from "./hooks/useMapThemeMode.js";
 import { DEFAULT_TILE_RESERVE_FACTOR as c } from "../../external/tileReserve/constants.js";
 import { TileLayerOthers as l } from "./subcomponents/TileLayerOthers/TileLayerOthers.js";
 import { TileLayerGoogle as u } from "./subcomponents/TileLayerGoogle/TileLayerGoogle.js";
-function C({
-  tileReserveFactor: o = c
+function g({
+  tileReserveFactor: t = c
 }) {
-  const e = f(), [i] = p(
-    E,
-    T,
-    { useBroadcastChannel: !0 }
-  );
+  const e = p(), i = f();
   return a(() => {
     const s = () => {
       e.invalidateSize();
-    }, r = new ResizeObserver((L) => {
+    }, r = new ResizeObserver((T) => {
       s();
     });
     return r.observe(e.getContainer()), () => {
       r.unobserve(e.getContainer());
     };
-  }, [e]), /* @__PURE__ */ n(m.Fragment, { children: [
-    /* @__PURE__ */ t(l, {}),
-    /* @__PURE__ */ t(
+  }, [e]), /* @__PURE__ */ m(n.Fragment, { children: [
+    /* @__PURE__ */ o(l, {}),
+    /* @__PURE__ */ o(
       u,
       {
-        mode: i.themeMode,
-        tileReserveFactor: o
+        mode: i,
+        tileReserveFactor: t
       }
     )
   ] });
 }
 export {
-  C as TileLayers
+  g as TileLayers
 };

package/components/maps/components/GpsMap/subcomponents/TileLayers/hooks/useMapThemeMode.d.ts

@@ -0,0 +1,9 @@
+import { ThemeUserMode } from '@m4l/styles';
+/**
+ * Resolves the theme mode (light/dark) the map tiles must follow.
+ * Prefers the live theme settings store when a ThemeSettingsProvider is mounted — this is
+ * what the Storybook toolbar and the host settings panel update — and falls back to the
+ * persisted localStorage value, which is the only signal available outside that provider.
+ */
+export declare function useMapThemeMode(): ThemeUserMode;
+//# sourceMappingURL=useMapThemeMode.d.ts.map

package/components/maps/components/GpsMap/subcomponents/TileLayers/hooks/useMapThemeMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMapThemeMode.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../packages/gclick/src/components/maps/components/GpsMap/subcomponents/TileLayers/hooks/useMapThemeMode.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,aAAa,CAe/C"}

package/components/maps/components/GpsMap/subcomponents/TileLayers/hooks/useMapThemeMode.js

@@ -0,0 +1,19 @@
+import { useContext as o, useSyncExternalStore as s } from "react";
+import { useLocalStorageWithListener as r } from "@m4l/core";
+import { ThemeSettingsContext as n, KEY_LOCAL_STORAGE_THEME_SETTINGS as m, defaultThemeSettings as i } from "@m4l/graphics";
+const S = () => () => {
+};
+function T() {
+  const e = o(n), [t] = r(
+    m,
+    i,
+    { useBroadcastChannel: !0 }
+  );
+  return s(
+    e ? e.subscribe : S,
+    () => e?.getState().themeUserSettings.themeMode
+  ) ?? t.themeMode;
+}
+export {
+  T as useMapThemeMode
+};

package/helpers/resolveDeviceIcon/resolveDeviceIcon.js

@@ -1,14 +1,14 @@
-import { createElement as s } from "react";
-import { s as i } from "../../_virtual/server.browser.js";
-import { getIconNameById as m } from "@m4l/icons/svg-registry";
-import { Image as I } from "@m4l/components";
+import { createElement as i } from "react";
+import { renderToStaticMarkup as m } from "react-dom/server";
+import { getIconNameById as I } from "@m4l/icons/svg-registry";
+import { Image as s } from "@m4l/components";
 import { DEVICE_ICON_SIZE as C, DEVICE_BACKEND_ICON_PREFIX as n, DEVICE_ICON_ID_PREFIX as a, DEVICE_ICON_VARIANT_SUFFIX as E } from "./constants.js";
 import { DEVICE_FALLBACK_ICON_COMPONENT as p, getDeviceIconComponentByName as _ } from "./deviceIconComponents.js";
 const c = /* @__PURE__ */ new WeakMap();
 function f(t) {
   const e = t.startsWith(n) ? t.slice(n.length) : t;
   return _(
-    m(
+    I(
       `${a}${e}${E}`
     )
   );
@@ -18,16 +18,16 @@ function l(t) {
   return (e ? f(e) : void 0) ?? p;
 }
 function u(t) {
-  const e = l(t), r = c.get(e);
-  if (r)
-    return r;
-  const o = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
-    i.renderToStaticMarkup(s(e))
+  const e = l(t), o = c.get(e);
+  if (o)
+    return o;
+  const r = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+    m(i(e))
   )}`;
-  return c.set(e, o), o;
+  return c.set(e, r), r;
 }
 function d(t, e = C) {
-  return s(I, {
+  return i(s, {
     src: u(t),
     width: e,
     height: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/gclick",
-  "version": "0.30.0-beta-pkg-787-ajustes-mf-51.0",
+  "version": "0.31.0",
   "publishConfig": {
     "access": "public"
   },

package/_virtual/react-dom-server-legacy.browser.development.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/_virtual/react-dom-server-legacy.browser.production.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};

package/_virtual/react-dom-server.browser.development.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/_virtual/react-dom-server.browser.production.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};

package/_virtual/server.browser.js

@@ -1,5 +0,0 @@
-import { __require as r } from "../node_modules/react-dom/server.browser.js";
-var s = r();
-export {
-  s
-};

package/_virtual/server.browser2.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};