zenit-sdk 0.0.9 → 0.1.1

package/dist/react/index.js

@@ -58,7 +58,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/ZenitMap.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_leaflet4 = require("react-leaflet");
 var import_leaflet4 = __toESM(require("leaflet"));
 
@@ -293,6 +293,7 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
 }
 
 // src/react/map/layer-geojson.tsx
+var import_react = require("react");
 var import_react_leaflet = require("react-leaflet");
 var import_leaflet = __toESM(require("leaflet"));
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -334,6 +335,44 @@ var LayerGeoJson = ({
   const pointFeatures = features.filter(isPointGeometry);
   const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
   const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
+  const clusterLayerRef = (0, import_react.useRef)(null);
+  const canCluster = typeof import_leaflet.default.markerClusterGroup === "function";
+  (0, import_react.useEffect)(() => {
+    if (!mapInstance || !panesReady || !pointsData || !canCluster) return;
+    const markerClusterGroup = import_leaflet.default.markerClusterGroup;
+    const clusterLayer = clusterLayerRef.current ?? markerClusterGroup();
+    clusterLayerRef.current = clusterLayer;
+    if (!mapInstance.hasLayer(clusterLayer)) {
+      mapInstance.addLayer(clusterLayer);
+    }
+    clusterLayer.clearLayers();
+    const geoJsonLayer = import_leaflet.default.geoJSON(pointsData, {
+      pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
+        radius: isMobile ? 8 : 6,
+        pane: mapInstance.getPane(pointsPaneName) ? pointsPaneName : void 0,
+        ...styleFn(feature, layerType, baseOpacity)
+      }),
+      onEachFeature
+    });
+    clusterLayer.addLayer(geoJsonLayer);
+    return () => {
+      clusterLayer.clearLayers();
+      if (mapInstance.hasLayer(clusterLayer)) {
+        mapInstance.removeLayer(clusterLayer);
+      }
+    };
+  }, [
+    baseOpacity,
+    canCluster,
+    isMobile,
+    layerType,
+    mapInstance,
+    onEachFeature,
+    panesReady,
+    pointsData,
+    pointsPaneName,
+    styleFn
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_leaflet.GeoJSON,
@@ -348,7 +387,7 @@ var LayerGeoJson = ({
       },
       `fill-${layerId}`
     ),
-    pointsData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    pointsData && !canCluster && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_leaflet.GeoJSON,
       {
         data: pointsData,
@@ -365,26 +404,26 @@ var LayerGeoJson = ({
 };
 
 // src/react/map/location-control.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 var import_react_leaflet2 = require("react-leaflet");
 var import_leaflet3 = __toESM(require("leaflet"));
 
 // src/react/hooks/use-geolocation.ts
-var import_react = require("react");
+var import_react2 = require("react");
 function useGeolocation(options) {
-  const [isTracking, setIsTracking] = (0, import_react.useState)(false);
-  const [location, setLocation] = (0, import_react.useState)(null);
-  const [error, setError] = (0, import_react.useState)(null);
-  const watchIdRef = (0, import_react.useRef)(null);
-  const stopTracking = (0, import_react.useCallback)(() => {
+  const [isTracking, setIsTracking] = (0, import_react2.useState)(false);
+  const [location, setLocation] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const watchIdRef = (0, import_react2.useRef)(null);
+  const stopTracking = (0, import_react2.useCallback)(() => {
     if (watchIdRef.current !== null && typeof navigator !== "undefined" && navigator.geolocation) {
       navigator.geolocation.clearWatch(watchIdRef.current);
     }
     watchIdRef.current = null;
     setIsTracking(false);
   }, []);
-  const startTracking = (0, import_react.useCallback)(() => {
+  const startTracking = (0, import_react2.useCallback)(() => {
     if (typeof navigator === "undefined" || !navigator.geolocation) {
       setError({ code: 0, message: "La geolocalizaci\xF3n no est\xE1 disponible en este navegador." });
       return;
@@ -410,15 +449,15 @@ function useGeolocation(options) {
       }
     );
   }, [options?.enableHighAccuracy, options?.maximumAge, options?.timeout, stopTracking]);
-  const toggleTracking = (0, import_react.useCallback)(() => {
+  const toggleTracking = (0, import_react2.useCallback)(() => {
     if (isTracking) {
       stopTracking();
     } else {
       startTracking();
     }
   }, [isTracking, startTracking, stopTracking]);
-  const clearError = (0, import_react.useCallback)(() => setError(null), []);
-  (0, import_react.useEffect)(() => {
+  const clearError = (0, import_react2.useCallback)(() => setError(null), []);
+  (0, import_react2.useEffect)(() => {
     return () => {
       stopTracking();
     };
@@ -845,10 +884,10 @@ var LocateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { wi
 ] });
 var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
   const map = (0, import_react_leaflet2.useMap)();
-  const controlRef = (0, import_react2.useRef)(null);
-  const hasCenteredRef = (0, import_react2.useRef)(false);
+  const controlRef = (0, import_react3.useRef)(null);
+  const hasCenteredRef = (0, import_react3.useRef)(false);
   const { isTracking, location, error, toggleTracking, clearError } = useGeolocation();
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(LOCATION_STYLE_ID)) return;
     const styleTag = document.createElement("style");
@@ -856,7 +895,7 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
     styleTag.textContent = LOCATION_STYLES;
     document.head.appendChild(styleTag);
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const control = import_leaflet3.default.control({ position });
     control.onAdd = () => {
       const container = import_leaflet3.default.DomUtil.create("div", "zenit-location-control");
@@ -870,13 +909,13 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
       controlRef.current = null;
     };
   }, [map, position]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!location || !isTracking) return;
     if (hasCenteredRef.current) return;
     hasCenteredRef.current = true;
     map.flyTo([location.lat, location.lon], zoom, { animate: true });
   }, [isTracking, location, map, zoom]);
-  const markerIcon = (0, import_react2.useMemo)(() => createLocationIcon(), []);
+  const markerIcon = (0, import_react3.useMemo)(() => createLocationIcon(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     controlRef.current && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
@@ -917,7 +956,7 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
 };
 
 // src/react/map/map-handlers.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_leaflet3 = require("react-leaflet");
 function computeBBoxFromGeojson(geojson) {
   if (!geojson || !Array.isArray(geojson.features)) return null;
@@ -965,9 +1004,9 @@ var BBoxZoomHandler = ({
   enabled = true
 }) => {
   const map = (0, import_react_leaflet3.useMap)();
-  const lastAppliedBBox = (0, import_react3.useRef)(null);
-  const lastUserInteracted = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const lastAppliedBBox = (0, import_react4.useRef)(null);
+  const lastUserInteracted = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     const handleInteraction = () => {
       lastUserInteracted.current = true;
     };
@@ -978,7 +1017,7 @@ var BBoxZoomHandler = ({
       map.off("zoomstart", handleInteraction);
     };
   }, [map]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enabled) return;
     let resolvedBBox = bbox ?? null;
     if (!resolvedBBox && geojson) {
@@ -1006,7 +1045,7 @@ var BBoxZoomHandler = ({
 };
 var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
   const map = (0, import_react_leaflet3.useMap)();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleZoom = () => {
       onZoomChange(map.getZoom());
     };
@@ -1020,7 +1059,7 @@ var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
 };
 var MapInstanceBridge = ({ onReady }) => {
   const map = (0, import_react_leaflet3.useMap)();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     onReady(map);
   }, [map, onReady]);
   return null;
@@ -1116,7 +1155,7 @@ function normalizeCenterTuple(center) {
   }
   return null;
 }
-var ZenitMap = (0, import_react4.forwardRef)(({
+var ZenitMap = (0, import_react5.forwardRef)(({
   client,
   mapId,
   height = "500px",
@@ -1141,21 +1180,21 @@ var ZenitMap = (0, import_react4.forwardRef)(({
   onZoomChange,
   onMapReady
 }, ref) => {
-  const [map, setMap] = (0, import_react4.useState)(null);
-  const [layers, setLayers] = (0, import_react4.useState)([]);
-  const [effectiveStates, setEffectiveStates] = (0, import_react4.useState)([]);
-  const [loadingMap, setLoadingMap] = (0, import_react4.useState)(false);
-  const [mapError, setMapError] = (0, import_react4.useState)(null);
-  const [mapInstance, setMapInstance] = (0, import_react4.useState)(null);
-  const [panesReady, setPanesReady] = (0, import_react4.useState)(false);
-  const [currentZoom, setCurrentZoom] = (0, import_react4.useState)(initialZoom ?? DEFAULT_ZOOM);
-  const [isPopupOpen, setIsPopupOpen] = (0, import_react4.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react4.useState)(() => {
+  const [map, setMap] = (0, import_react5.useState)(null);
+  const [layers, setLayers] = (0, import_react5.useState)([]);
+  const [effectiveStates, setEffectiveStates] = (0, import_react5.useState)([]);
+  const [loadingMap, setLoadingMap] = (0, import_react5.useState)(false);
+  const [mapError, setMapError] = (0, import_react5.useState)(null);
+  const [mapInstance, setMapInstance] = (0, import_react5.useState)(null);
+  const [panesReady, setPanesReady] = (0, import_react5.useState)(false);
+  const [currentZoom, setCurrentZoom] = (0, import_react5.useState)(initialZoom ?? DEFAULT_ZOOM);
+  const [isPopupOpen, setIsPopupOpen] = (0, import_react5.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react5.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(max-width: 768px)").matches;
   });
-  const normalizedLayers = (0, import_react4.useMemo)(() => normalizeMapLayers(map), [map]);
-  (0, import_react4.useEffect)(() => {
+  const normalizedLayers = (0, import_react5.useMemo)(() => normalizeMapLayers(map), [map]);
+  (0, import_react5.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = (e) => {
@@ -1173,17 +1212,17 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     }
     return;
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (featureInfoMode === "popup") {
       ensurePopupStyles();
     }
   }, [featureInfoMode]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (featureInfoMode !== "popup") {
       setIsPopupOpen(false);
     }
   }, [featureInfoMode]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!mapInstance) return;
     const popupPane = mapInstance.getPane("popupPane");
     if (popupPane) {
@@ -1192,7 +1231,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     const labelsPane = mapInstance.getPane(LABELS_PANE_NAME) ?? mapInstance.createPane(LABELS_PANE_NAME);
     labelsPane.style.zIndex = "600";
   }, [mapInstance]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!mapInstance) return;
     const handlePopupOpen = () => setIsPopupOpen(true);
     const handlePopupClose = () => setIsPopupOpen(false);
@@ -1203,7 +1242,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       mapInstance.off("popupclose", handlePopupClose);
     };
   }, [mapInstance]);
-  const layerStyleIndex = (0, import_react4.useMemo)(() => {
+  const layerStyleIndex = (0, import_react5.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     (map?.mapLayers ?? []).forEach((entry) => {
       const layerStyle = entry.layer?.style ?? entry.mapLayer?.layer?.style ?? entry.style ?? null;
@@ -1214,7 +1253,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     });
     return index;
   }, [map]);
-  const labelKeyIndex = (0, import_react4.useMemo)(() => {
+  const labelKeyIndex = (0, import_react5.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       const label = entry.layer?.label ?? entry.mapLayer?.label ?? entry.mapLayer.layerConfig?.label;
@@ -1224,7 +1263,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     });
     return index;
   }, [normalizedLayers]);
-  const layerMetaIndex = (0, import_react4.useMemo)(() => {
+  const layerMetaIndex = (0, import_react5.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       index.set(String(entry.layerId), {
@@ -1234,7 +1273,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     });
     return index;
   }, [normalizedLayers]);
-  const overlayStyleFunction = (0, import_react4.useMemo)(() => {
+  const overlayStyleFunction = (0, import_react5.useMemo)(() => {
     return (feature) => {
       const featureLayerId = getFeatureLayerId(feature);
       const featureStyleOverrides = getFeatureStyleOverrides(feature);
@@ -1253,15 +1292,15 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       return defaultOptions;
     };
   }, [layerStyleIndex, mapLayers, overlayStyle]);
-  const overlayStyleFn = (0, import_react4.useCallback)(
+  const overlayStyleFn = (0, import_react5.useCallback)(
     (feature, _layerType, _baseOpacity) => overlayStyleFunction(feature),
     [overlayStyleFunction]
   );
-  const [baseStates, setBaseStates] = (0, import_react4.useState)([]);
-  const [mapOverrides, setMapOverrides] = (0, import_react4.useState)([]);
-  const [controlOverrides, setControlOverrides] = (0, import_react4.useState)([]);
-  const [uiOverrides, setUiOverrides] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
+  const [baseStates, setBaseStates] = (0, import_react5.useState)([]);
+  const [mapOverrides, setMapOverrides] = (0, import_react5.useState)([]);
+  const [controlOverrides, setControlOverrides] = (0, import_react5.useState)([]);
+  const [uiOverrides, setUiOverrides] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
     let isMounted = true;
     setLoadingMap(true);
     setMapError(null);
@@ -1284,7 +1323,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       isMounted = false;
     };
   }, [client.maps, mapId, onError, onLoadingChange]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (normalizedLayers.length === 0) {
       setLayers([]);
       setBaseStates([]);
@@ -1315,7 +1354,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     setMapOverrides(initialOverrides);
     setUiOverrides([]);
   }, [normalizedLayers]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!layerControls) {
       setControlOverrides([]);
       return;
@@ -1327,7 +1366,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     }));
     setControlOverrides(overrides);
   }, [layerControls]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1337,12 +1376,12 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       onLayerStateChange?.(reset);
     }
   }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (layerStates) {
       setEffectiveStates(layerStates);
     }
   }, [layerStates]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1355,11 +1394,11 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     setEffectiveStates(next);
     onLayerStateChange?.(next);
   }, [baseStates, controlOverrides, layerStates, mapOverrides, onLayerStateChange, uiOverrides]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!Array.isArray(layerControls) || layerControls.length > 0) return;
     setUiOverrides([]);
   }, [layerControls]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1379,7 +1418,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       return [...filtered, nextEntry];
     });
   };
-  const updateOpacityFromUi = (0, import_react4.useCallback)(
+  const updateOpacityFromUi = (0, import_react5.useCallback)(
     (layerId, uiOpacity) => {
       const meta = layerMetaIndex.get(String(layerId));
       const baseOpacity = clampOpacity3(uiOpacity);
@@ -1418,7 +1457,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     },
     [currentZoom, effectiveStates, layerMetaIndex, layerStates, onLayerStateChange]
   );
-  const center = (0, import_react4.useMemo)(() => {
+  const center = (0, import_react5.useMemo)(() => {
     if (initialCenter) {
       return initialCenter;
     }
@@ -1429,30 +1468,30 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     return DEFAULT_CENTER;
   }, [initialCenter, map?.settings?.center]);
   const zoom = initialZoom ?? map?.settings?.zoom ?? DEFAULT_ZOOM;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setCurrentZoom(zoom);
   }, [zoom]);
-  const decoratedLayers = (0, import_react4.useMemo)(() => {
+  const decoratedLayers = (0, import_react5.useMemo)(() => {
     return layers.map((layer) => ({
       ...layer,
       effective: effectiveStates.find((state) => state.layerId === layer.mapLayer.layerId),
       data: layerGeojson?.[layer.mapLayer.layerId] ?? layerGeojson?.[String(layer.mapLayer.layerId)] ?? null
     }));
   }, [effectiveStates, layerGeojson, layers]);
-  const orderedLayers = (0, import_react4.useMemo)(() => {
+  const orderedLayers = (0, import_react5.useMemo)(() => {
     return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => a.displayOrder - b.displayOrder);
   }, [decoratedLayers]);
-  const autoZoomGeojson = (0, import_react4.useMemo)(
+  const autoZoomGeojson = (0, import_react5.useMemo)(
     () => orderedLayers.map((layer) => layer.data).filter((collection) => !!collection),
     [orderedLayers]
   );
-  const resolveLayerStyle = (0, import_react4.useCallback)(
+  const resolveLayerStyle = (0, import_react5.useCallback)(
     (layerId) => {
       return getStyleByLayerId(layerId, mapLayers) ?? layerStyleIndex.get(String(layerId)) ?? null;
     },
     [layerStyleIndex, mapLayers]
   );
-  const labelMarkers = (0, import_react4.useMemo)(() => {
+  const labelMarkers = (0, import_react5.useMemo)(() => {
     const markers = [];
     decoratedLayers.forEach((layerState) => {
       if (!layerState.effective?.visible) return;
@@ -1489,7 +1528,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     });
     return markers;
   }, [currentZoom, decoratedLayers, labelKeyIndex, layerMetaIndex, resolveLayerStyle]);
-  const ensureLayerPanes = (0, import_react4.useCallback)(
+  const ensureLayerPanes = (0, import_react5.useCallback)(
     (targetMap, targetLayers) => {
       const baseZIndex = 400;
       targetLayers.forEach((layer) => {
@@ -1505,7 +1544,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     },
     []
   );
-  const handleMapReady = (0, import_react4.useCallback)(
+  const handleMapReady = (0, import_react5.useCallback)(
     (instance) => {
       setPanesReady(false);
       setMapInstance(instance);
@@ -1513,7 +1552,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
     },
     [onMapReady]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!mapInstance) {
       setPanesReady(false);
       return;
@@ -1533,7 +1572,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       setPanesReady(true);
     }
   }, [mapInstance, orderedLayers, ensureLayerPanes]);
-  const overlayOnEachFeature = (0, import_react4.useMemo)(() => {
+  const overlayOnEachFeature = (0, import_react5.useMemo)(() => {
     return (feature, layer) => {
       const layerId = getFeatureLayerId(feature) ?? void 0;
       const geometryType = feature?.geometry?.type;
@@ -1644,7 +1683,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
       return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
     };
   };
-  (0, import_react4.useImperativeHandle)(ref, () => ({
+  (0, import_react5.useImperativeHandle)(ref, () => ({
     setLayerOpacity: (layerId, opacity) => {
       upsertUiOverride(layerId, { overrideOpacity: opacity });
     },
@@ -1761,7 +1800,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
                     const pointsPaneName = `zenit-layer-${layerState.mapLayer.layerId}-points`;
                     const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
                     const labelKey = labelKeyIndex.get(String(layerState.mapLayer.layerId));
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react4.default.Fragment, { children: [
+                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.default.Fragment, { children: [
                       layerState.data && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         LayerGeoJson,
                         {
@@ -1918,7 +1957,7 @@ var ZenitMap = (0, import_react4.forwardRef)(({
 ZenitMap.displayName = "ZenitMap";
 
 // src/react/ZenitLayerManager.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/react/icons.tsx
 var import_lucide_react = require("lucide-react");
@@ -1964,15 +2003,15 @@ var ZenitLayerManager = ({
   layerFeatureCounts,
   mapLayers
 }) => {
-  const [map, setMap] = (0, import_react5.useState)(null);
-  const [loadingMap, setLoadingMap] = (0, import_react5.useState)(false);
-  const [mapError, setMapError] = (0, import_react5.useState)(null);
-  const [layers, setLayers] = (0, import_react5.useState)([]);
-  const [activeTab, setActiveTab] = (0, import_react5.useState)("layers");
-  const [panelVisible, setPanelVisible] = (0, import_react5.useState)(true);
-  const lastEmittedStatesRef = (0, import_react5.useRef)(null);
+  const [map, setMap] = (0, import_react6.useState)(null);
+  const [loadingMap, setLoadingMap] = (0, import_react6.useState)(false);
+  const [mapError, setMapError] = (0, import_react6.useState)(null);
+  const [layers, setLayers] = (0, import_react6.useState)([]);
+  const [activeTab, setActiveTab] = (0, import_react6.useState)("layers");
+  const [panelVisible, setPanelVisible] = (0, import_react6.useState)(true);
+  const lastEmittedStatesRef = (0, import_react6.useRef)(null);
   const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
-  const baseStates = (0, import_react5.useMemo)(
+  const baseStates = (0, import_react6.useMemo)(
     () => initLayerStates(
       layers.map((entry) => ({
         ...entry.mapLayer,
@@ -1983,7 +2022,7 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const overrideStates = (0, import_react5.useMemo)(
+  const overrideStates = (0, import_react6.useMemo)(
     () => layers.map(
       (entry) => ({
         layerId: entry.mapLayer.layerId,
@@ -1993,11 +2032,11 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const effectiveStates = (0, import_react5.useMemo)(
+  const effectiveStates = (0, import_react6.useMemo)(
     () => layerStates ?? applyLayerOverrides(baseStates, overrideStates),
     [baseStates, layerStates, overrideStates]
   );
-  const layerMetaIndex = (0, import_react5.useMemo)(() => {
+  const layerMetaIndex = (0, import_react6.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     mapLayers?.forEach((entry) => {
       const key = String(entry.layerId);
@@ -2011,7 +2050,7 @@ var ZenitLayerManager = ({
     });
     return index;
   }, [map, mapLayers]);
-  const resolveUserOpacity = import_react5.default.useCallback((state) => {
+  const resolveUserOpacity = import_react6.default.useCallback((state) => {
     if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
     if (typeof state.overrideOpacity === "string") {
       const parsed = Number.parseFloat(state.overrideOpacity);
@@ -2019,7 +2058,7 @@ var ZenitLayerManager = ({
     }
     return state.opacity ?? 1;
   }, []);
-  const resolveEffectiveOpacity = import_react5.default.useCallback(
+  const resolveEffectiveOpacity = import_react6.default.useCallback(
     (layerId, userOpacity) => {
       if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
         return userOpacity;
@@ -2035,7 +2074,7 @@ var ZenitLayerManager = ({
     },
     [autoOpacityConfig, autoOpacityOnZoom, layerMetaIndex, mapZoom]
   );
-  const effectiveStatesWithZoom = (0, import_react5.useMemo)(() => {
+  const effectiveStatesWithZoom = (0, import_react6.useMemo)(() => {
     if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
       return effectiveStates;
     }
@@ -2049,7 +2088,7 @@ var ZenitLayerManager = ({
       };
     });
   }, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let cancelled = false;
     setLoadingMap(true);
     setMapError(null);
@@ -2081,12 +2120,12 @@ var ZenitLayerManager = ({
       cancelled = true;
     };
   }, [client.maps, mapId]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!showUploadTab && activeTab === "upload") {
       setActiveTab("layers");
     }
   }, [activeTab, showUploadTab]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isControlled) return;
     if (!onLayerStatesChange) return;
     const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
@@ -2104,7 +2143,7 @@ var ZenitLayerManager = ({
     mapZoom,
     onLayerStatesChange
   ]);
-  const updateLayerVisible = import_react5.default.useCallback(
+  const updateLayerVisible = import_react6.default.useCallback(
     (layerId, visible) => {
       if (!onLayerStatesChange) return;
       const next = effectiveStates.map(
@@ -2114,7 +2153,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange]
   );
-  const updateLayerOpacity = import_react5.default.useCallback(
+  const updateLayerOpacity = import_react6.default.useCallback(
     (layerId, opacity) => {
       if (!onLayerStatesChange) return;
       const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
@@ -2125,7 +2164,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
   );
-  const resolveFeatureCount = import_react5.default.useCallback(
+  const resolveFeatureCount = import_react6.default.useCallback(
     (layerId, layer) => {
       const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
       if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
@@ -2134,7 +2173,7 @@ var ZenitLayerManager = ({
     },
     [layerFeatureCounts]
   );
-  const decoratedLayers = (0, import_react5.useMemo)(() => {
+  const decoratedLayers = (0, import_react6.useMemo)(() => {
     return layers.map((entry) => ({
       ...entry,
       effective: effectiveStates.find((state) => state.layerId === entry.mapLayer.layerId),
@@ -2163,7 +2202,7 @@ var ZenitLayerManager = ({
       return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
     });
   }, [effectiveStates, layers, resolveFeatureCount]);
-  const resolveLayerStyle = import_react5.default.useCallback(
+  const resolveLayerStyle = import_react6.default.useCallback(
     (layerId) => {
       const layerKey = String(layerId);
       const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
@@ -2546,11 +2585,11 @@ var ZenitFeatureFilterPanel = ({
 };
 
 // src/react/ai/FloatingChatBox.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/react/hooks/use-chat.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/ai/chat.service.ts
 var DEFAULT_ERROR_MESSAGE = "No fue posible completar la solicitud al asistente.";
@@ -2682,9 +2721,9 @@ var sendMessageStream = async (mapId, request, callbacks = {}, options, config)
 
 // src/react/hooks/use-chat.ts
 var useSendMessage = (config) => {
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const send = (0, import_react6.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const send = (0, import_react7.useCallback)(
     async (mapId, request, options) => {
       setIsLoading(true);
       setError(null);
@@ -2702,18 +2741,18 @@ var useSendMessage = (config) => {
   return { sendMessage: send, isLoading, error };
 };
 var useSendMessageStream = (config) => {
-  const [isStreaming, setIsStreaming] = (0, import_react6.useState)(false);
-  const [streamingText, setStreamingText] = (0, import_react6.useState)("");
-  const [completeResponse, setCompleteResponse] = (0, import_react6.useState)(null);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const requestIdRef = (0, import_react6.useRef)(0);
-  const reset = (0, import_react6.useCallback)(() => {
+  const [isStreaming, setIsStreaming] = (0, import_react7.useState)(false);
+  const [streamingText, setStreamingText] = (0, import_react7.useState)("");
+  const [completeResponse, setCompleteResponse] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const requestIdRef = (0, import_react7.useRef)(0);
+  const reset = (0, import_react7.useCallback)(() => {
     setIsStreaming(false);
     setStreamingText("");
     setCompleteResponse(null);
     setError(null);
   }, []);
-  const send = (0, import_react6.useCallback)(
+  const send = (0, import_react7.useCallback)(
     async (mapId, request, options) => {
       const requestId = requestIdRef.current + 1;
       requestIdRef.current = requestId;
@@ -3004,6 +3043,17 @@ var styles = {
     width: 480,
     height: 640
   },
+  panelMobileFullscreen: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    borderRadius: 0,
+    margin: 0
+  },
   // Header with green gradient
   header: {
     padding: "14px 16px",
@@ -3237,42 +3287,42 @@ var FloatingChatBox = ({
   open: openProp
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react7.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(false);
   const open = isControlled ? openProp : internalOpen;
-  const setOpen = (0, import_react7.useCallback)((value) => {
+  const setOpen = (0, import_react8.useCallback)((value) => {
     const newValue = typeof value === "function" ? value(open) : value;
     if (!isControlled) {
       setInternalOpen(newValue);
     }
     onOpenChange?.(newValue);
   }, [isControlled, open, onOpenChange]);
-  const [expanded, setExpanded] = (0, import_react7.useState)(false);
-  const [messages, setMessages] = (0, import_react7.useState)([]);
-  const [inputValue, setInputValue] = (0, import_react7.useState)("");
-  const [conversationId, setConversationId] = (0, import_react7.useState)();
-  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react7.useState)(false);
-  const messagesEndRef = (0, import_react7.useRef)(null);
-  const messagesContainerRef = (0, import_react7.useRef)(null);
-  const chatBoxRef = (0, import_react7.useRef)(null);
-  const chatConfig = (0, import_react7.useMemo)(() => {
+  const [expanded, setExpanded] = (0, import_react8.useState)(false);
+  const [messages, setMessages] = (0, import_react8.useState)([]);
+  const [inputValue, setInputValue] = (0, import_react8.useState)("");
+  const [conversationId, setConversationId] = (0, import_react8.useState)();
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)(null);
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react8.useState)(false);
+  const messagesEndRef = (0, import_react8.useRef)(null);
+  const messagesContainerRef = (0, import_react8.useRef)(null);
+  const chatBoxRef = (0, import_react8.useRef)(null);
+  const chatConfig = (0, import_react8.useMemo)(() => {
     if (!baseUrl) return void 0;
     return { baseUrl, accessToken, getAccessToken };
   }, [accessToken, baseUrl, getAccessToken]);
   const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
   const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (open && isMobile) {
       setExpanded(true);
     }
   }, [open, isMobile]);
-  const scrollToBottom = (0, import_react7.useCallback)(() => {
+  const scrollToBottom = (0, import_react8.useCallback)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (open && messages.length === 0) {
       setMessages([
         {
@@ -3283,10 +3333,10 @@ var FloatingChatBox = ({
       ]);
     }
   }, [open, messages.length]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     scrollToBottom();
   }, [messages, streamingText, scrollToBottom]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!open) return;
     if (isMobile && expanded) return;
     const handleClickOutside = (event) => {
@@ -3299,7 +3349,7 @@ var FloatingChatBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, isMobile, expanded]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 768px)");
     const updateMobile = () => setIsMobile(mediaQuery.matches);
@@ -3317,7 +3367,7 @@ var FloatingChatBox = ({
       }
     };
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof document === "undefined") return;
     if (!open || !isMobile) return;
     document.body.style.overflow = "hidden";
@@ -3325,10 +3375,10 @@ var FloatingChatBox = ({
       document.body.style.overflow = "";
     };
   }, [open, isMobile]);
-  const addMessage = (0, import_react7.useCallback)((message) => {
+  const addMessage = (0, import_react8.useCallback)((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
-  const handleSend = (0, import_react7.useCallback)(async () => {
+  const handleSend = (0, import_react8.useCallback)(async () => {
     if (!mapId) {
       setErrorMessage("Selecciona un mapa para usar el asistente.");
       return;
@@ -3381,7 +3431,7 @@ var FloatingChatBox = ({
     sendMessage2,
     userId
   ]);
-  const handleKeyDown = (0, import_react7.useCallback)(
+  const handleKeyDown = (0, import_react8.useCallback)(
     (event) => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
@@ -3392,7 +3442,7 @@ var FloatingChatBox = ({
     },
     [canSend, handleSend]
   );
-  const handleFollowUpClick = (0, import_react7.useCallback)((question) => {
+  const handleFollowUpClick = (0, import_react8.useCallback)((question) => {
     setInputValue(question);
   }, []);
   const renderMetadata = (response) => {
@@ -3414,7 +3464,7 @@ var FloatingChatBox = ({
       ] }, index)) })
     ] });
   };
-  const handleActionClick = (0, import_react7.useCallback)((action) => {
+  const handleActionClick = (0, import_react8.useCallback)((action) => {
     if (isStreaming) return;
     setOpen(false);
     requestAnimationFrame(() => {
@@ -3529,22 +3579,6 @@ var FloatingChatBox = ({
           box-sizing: border-box;
         }
         @media (max-width: 768px) {
-          .zenit-chat-panel.zenit-chat-panel--fullscreen {
-            position: fixed !important;
-            left: 0 !important;
-            right: 0 !important;
-            top: 4rem !important;
-            bottom: 0 !important;
-            width: 100% !important;
-            max-width: 100% !important;
-            height: auto !important;
-            border-radius: 0 !important;
-            display: flex !important;
-            flex-direction: column !important;
-            overflow: hidden !important;
-            z-index: 100000 !important;
-            padding-top: env(safe-area-inset-top);
-          }
           .zenit-chat-panel.zenit-chat-panel--fullscreen .zenit-ai-body {
             flex: 1;
             min-height: 0;
@@ -3564,16 +3598,20 @@ var FloatingChatBox = ({
       "div",
       {
         ref: chatBoxRef,
-        className: `zenit-chat-panel${expanded ? " zenit-chat-panel--expanded" : ""}${isMobile ? " zenit-chat-panel--fullscreen" : ""}`,
-        style: {
-          ...styles.panel,
-          ...expanded ? styles.panelExpanded : styles.panelNormal
-        },
+        className: `zenit-chat-panel${expanded && !isMobile ? " zenit-chat-panel--expanded" : ""}${isMobile ? " zenit-chat-panel--fullscreen" : ""}`,
+        style: (() => {
+          const desktopStyle = expanded ? styles.panelExpanded : styles.panelNormal;
+          const mobileStyle = styles.panelMobileFullscreen;
+          return {
+            ...styles.panel,
+            ...isMobile ? mobileStyle : desktopStyle
+          };
+        })(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { style: styles.header, children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: styles.title, children: "Asistente Zenit AI" }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.headerButtons, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              !isMobile && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",