zenit-sdk 0.0.9 → 0.1.1

package/dist/{chunk-PCTRVN4O.mjs → chunk-OOK4DBG5.mjs}

@@ -1,5 +1,5 @@
 // src/react/ZenitMap.tsx
-import React3, { useCallback as useCallback2, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useState as useState2, forwardRef } from "react";
+import React4, { useCallback as useCallback2, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo2, useState as useState2, forwardRef } from "react";
 import { MapContainer, Marker as Marker2, TileLayer, ZoomControl } from "react-leaflet";
 import L4 from "leaflet";
 
@@ -246,6 +246,7 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
 }
 
 // src/react/map/layer-geojson.tsx
+import { useEffect, useRef } from "react";
 import { GeoJSON } from "react-leaflet";
 import L from "leaflet";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -287,6 +288,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 = useRef(null);
+  const canCluster = typeof L.markerClusterGroup === "function";
+  useEffect(() => {
+    if (!mapInstance || !panesReady || !pointsData || !canCluster) return;
+    const markerClusterGroup = L.markerClusterGroup;
+    const clusterLayer = clusterLayerRef.current ?? markerClusterGroup();
+    clusterLayerRef.current = clusterLayer;
+    if (!mapInstance.hasLayer(clusterLayer)) {
+      mapInstance.addLayer(clusterLayer);
+    }
+    clusterLayer.clearLayers();
+    const geoJsonLayer = L.geoJSON(pointsData, {
+      pointToLayer: (feature, latlng) => L.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__ */ jsxs(Fragment, { children: [
     fillData && /* @__PURE__ */ jsx(
       GeoJSON,
@@ -301,7 +340,7 @@ var LayerGeoJson = ({
       },
       `fill-${layerId}`
     ),
-    pointsData && /* @__PURE__ */ jsx(
+    pointsData && !canCluster && /* @__PURE__ */ jsx(
       GeoJSON,
       {
         data: pointsData,
@@ -318,18 +357,18 @@ var LayerGeoJson = ({
 };
 
 // src/react/map/location-control.tsx
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
 import { Circle, Marker, useMap } from "react-leaflet";
 import L3 from "leaflet";
 
 // src/react/hooks/use-geolocation.ts
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
 function useGeolocation(options) {
   const [isTracking, setIsTracking] = useState(false);
   const [location, setLocation] = useState(null);
   const [error, setError] = useState(null);
-  const watchIdRef = useRef(null);
+  const watchIdRef = useRef2(null);
   const stopTracking = useCallback(() => {
     if (watchIdRef.current !== null && typeof navigator !== "undefined" && navigator.geolocation) {
       navigator.geolocation.clearWatch(watchIdRef.current);
@@ -371,7 +410,7 @@ function useGeolocation(options) {
     }
   }, [isTracking, startTracking, stopTracking]);
   const clearError = useCallback(() => setError(null), []);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       stopTracking();
     };
@@ -798,10 +837,10 @@ var LocateIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18",
 ] });
 var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
   const map = useMap();
-  const controlRef = useRef2(null);
-  const hasCenteredRef = useRef2(false);
+  const controlRef = useRef3(null);
+  const hasCenteredRef = useRef3(false);
   const { isTracking, location, error, toggleTracking, clearError } = useGeolocation();
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(LOCATION_STYLE_ID)) return;
     const styleTag = document.createElement("style");
@@ -809,7 +848,7 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
     styleTag.textContent = LOCATION_STYLES;
     document.head.appendChild(styleTag);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const control = L3.control({ position });
     control.onAdd = () => {
       const container = L3.DomUtil.create("div", "zenit-location-control");
@@ -823,7 +862,7 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
       controlRef.current = null;
     };
   }, [map, position]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!location || !isTracking) return;
     if (hasCenteredRef.current) return;
     hasCenteredRef.current = true;
@@ -870,7 +909,7 @@ var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
 };
 
 // src/react/map/map-handlers.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { useMap as useMap2 } from "react-leaflet";
 function computeBBoxFromGeojson(geojson) {
   if (!geojson || !Array.isArray(geojson.features)) return null;
@@ -918,9 +957,9 @@ var BBoxZoomHandler = ({
   enabled = true
 }) => {
   const map = useMap2();
-  const lastAppliedBBox = useRef3(null);
-  const lastUserInteracted = useRef3(false);
-  useEffect3(() => {
+  const lastAppliedBBox = useRef4(null);
+  const lastUserInteracted = useRef4(false);
+  useEffect4(() => {
     const handleInteraction = () => {
       lastUserInteracted.current = true;
     };
@@ -931,7 +970,7 @@ var BBoxZoomHandler = ({
       map.off("zoomstart", handleInteraction);
     };
   }, [map]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled) return;
     let resolvedBBox = bbox ?? null;
     if (!resolvedBBox && geojson) {
@@ -959,7 +998,7 @@ var BBoxZoomHandler = ({
 };
 var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
   const map = useMap2();
-  useEffect3(() => {
+  useEffect4(() => {
     const handleZoom = () => {
       onZoomChange(map.getZoom());
     };
@@ -973,7 +1012,7 @@ var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
 };
 var MapInstanceBridge = ({ onReady }) => {
   const map = useMap2();
-  useEffect3(() => {
+  useEffect4(() => {
     onReady(map);
   }, [map, onReady]);
   return null;
@@ -1108,7 +1147,7 @@ var ZenitMap = forwardRef(({
     return window.matchMedia("(max-width: 768px)").matches;
   });
   const normalizedLayers = useMemo2(() => normalizeMapLayers(map), [map]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = (e) => {
@@ -1126,17 +1165,17 @@ var ZenitMap = forwardRef(({
     }
     return;
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (featureInfoMode === "popup") {
       ensurePopupStyles();
     }
   }, [featureInfoMode]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (featureInfoMode !== "popup") {
       setIsPopupOpen(false);
     }
   }, [featureInfoMode]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!mapInstance) return;
     const popupPane = mapInstance.getPane("popupPane");
     if (popupPane) {
@@ -1145,7 +1184,7 @@ var ZenitMap = forwardRef(({
     const labelsPane = mapInstance.getPane(LABELS_PANE_NAME) ?? mapInstance.createPane(LABELS_PANE_NAME);
     labelsPane.style.zIndex = "600";
   }, [mapInstance]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!mapInstance) return;
     const handlePopupOpen = () => setIsPopupOpen(true);
     const handlePopupClose = () => setIsPopupOpen(false);
@@ -1214,7 +1253,7 @@ var ZenitMap = forwardRef(({
   const [mapOverrides, setMapOverrides] = useState2([]);
   const [controlOverrides, setControlOverrides] = useState2([]);
   const [uiOverrides, setUiOverrides] = useState2([]);
-  useEffect4(() => {
+  useEffect5(() => {
     let isMounted = true;
     setLoadingMap(true);
     setMapError(null);
@@ -1237,7 +1276,7 @@ var ZenitMap = forwardRef(({
       isMounted = false;
     };
   }, [client.maps, mapId, onError, onLoadingChange]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (normalizedLayers.length === 0) {
       setLayers([]);
       setBaseStates([]);
@@ -1268,7 +1307,7 @@ var ZenitMap = forwardRef(({
     setMapOverrides(initialOverrides);
     setUiOverrides([]);
   }, [normalizedLayers]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!layerControls) {
       setControlOverrides([]);
       return;
@@ -1280,7 +1319,7 @@ var ZenitMap = forwardRef(({
     }));
     setControlOverrides(overrides);
   }, [layerControls]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layerStates) {
       return;
     }
@@ -1290,12 +1329,12 @@ var ZenitMap = forwardRef(({
       onLayerStateChange?.(reset);
     }
   }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layerStates) {
       setEffectiveStates(layerStates);
     }
   }, [layerStates]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layerStates) {
       return;
     }
@@ -1308,11 +1347,11 @@ var ZenitMap = forwardRef(({
     setEffectiveStates(next);
     onLayerStateChange?.(next);
   }, [baseStates, controlOverrides, layerStates, mapOverrides, onLayerStateChange, uiOverrides]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!Array.isArray(layerControls) || layerControls.length > 0) return;
     setUiOverrides([]);
   }, [layerControls]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layerStates) {
       return;
     }
@@ -1382,7 +1421,7 @@ var ZenitMap = forwardRef(({
     return DEFAULT_CENTER;
   }, [initialCenter, map?.settings?.center]);
   const zoom = initialZoom ?? map?.settings?.zoom ?? DEFAULT_ZOOM;
-  useEffect4(() => {
+  useEffect5(() => {
     setCurrentZoom(zoom);
   }, [zoom]);
   const decoratedLayers = useMemo2(() => {
@@ -1466,7 +1505,7 @@ var ZenitMap = forwardRef(({
     },
     [onMapReady]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!mapInstance) {
       setPanesReady(false);
       return;
@@ -1714,7 +1753,7 @@ var ZenitMap = 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__ */ jsxs3(React3.Fragment, { children: [
+                    return /* @__PURE__ */ jsxs3(React4.Fragment, { children: [
                       layerState.data && /* @__PURE__ */ jsx3(
                         LayerGeoJson,
                         {
@@ -1871,7 +1910,7 @@ var ZenitMap = forwardRef(({
 ZenitMap.displayName = "ZenitMap";
 
 // src/react/ZenitLayerManager.tsx
-import React4, { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+import React5, { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
 
 // src/react/icons.tsx
 import { Eye, EyeOff, ChevronLeft, ChevronRight, Layers, Upload, X, ZoomIn } from "lucide-react";
@@ -1923,7 +1962,7 @@ var ZenitLayerManager = ({
   const [layers, setLayers] = useState3([]);
   const [activeTab, setActiveTab] = useState3("layers");
   const [panelVisible, setPanelVisible] = useState3(true);
-  const lastEmittedStatesRef = useRef5(null);
+  const lastEmittedStatesRef = useRef6(null);
   const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
   const baseStates = useMemo3(
     () => initLayerStates(
@@ -1964,7 +2003,7 @@ var ZenitLayerManager = ({
     });
     return index;
   }, [map, mapLayers]);
-  const resolveUserOpacity = React4.useCallback((state) => {
+  const resolveUserOpacity = React5.useCallback((state) => {
     if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
     if (typeof state.overrideOpacity === "string") {
       const parsed = Number.parseFloat(state.overrideOpacity);
@@ -1972,7 +2011,7 @@ var ZenitLayerManager = ({
     }
     return state.opacity ?? 1;
   }, []);
-  const resolveEffectiveOpacity = React4.useCallback(
+  const resolveEffectiveOpacity = React5.useCallback(
     (layerId, userOpacity) => {
       if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
         return userOpacity;
@@ -2002,7 +2041,7 @@ var ZenitLayerManager = ({
       };
     });
   }, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
-  useEffect5(() => {
+  useEffect6(() => {
     let cancelled = false;
     setLoadingMap(true);
     setMapError(null);
@@ -2034,12 +2073,12 @@ var ZenitLayerManager = ({
       cancelled = true;
     };
   }, [client.maps, mapId]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!showUploadTab && activeTab === "upload") {
       setActiveTab("layers");
     }
   }, [activeTab, showUploadTab]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isControlled) return;
     if (!onLayerStatesChange) return;
     const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
@@ -2057,7 +2096,7 @@ var ZenitLayerManager = ({
     mapZoom,
     onLayerStatesChange
   ]);
-  const updateLayerVisible = React4.useCallback(
+  const updateLayerVisible = React5.useCallback(
     (layerId, visible) => {
       if (!onLayerStatesChange) return;
       const next = effectiveStates.map(
@@ -2067,7 +2106,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange]
   );
-  const updateLayerOpacity = React4.useCallback(
+  const updateLayerOpacity = React5.useCallback(
     (layerId, opacity) => {
       if (!onLayerStatesChange) return;
       const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
@@ -2078,7 +2117,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
   );
-  const resolveFeatureCount = React4.useCallback(
+  const resolveFeatureCount = React5.useCallback(
     (layerId, layer) => {
       const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
       if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
@@ -2116,7 +2155,7 @@ var ZenitLayerManager = ({
       return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
     });
   }, [effectiveStates, layers, resolveFeatureCount]);
-  const resolveLayerStyle = React4.useCallback(
+  const resolveLayerStyle = React5.useCallback(
     (layerId) => {
       const layerKey = String(layerId);
       const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
@@ -2499,11 +2538,11 @@ var ZenitFeatureFilterPanel = ({
 };
 
 // src/react/ai/FloatingChatBox.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef8, useState as useState5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/react/hooks/use-chat.ts
-import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback as useCallback3, useRef as useRef7, useState as useState4 } from "react";
 
 // src/ai/chat.service.ts
 var DEFAULT_ERROR_MESSAGE = "No fue posible completar la solicitud al asistente.";
@@ -2663,7 +2702,7 @@ var useSendMessageStream = (config) => {
   const [streamingText, setStreamingText] = useState4("");
   const [completeResponse, setCompleteResponse] = useState4(null);
   const [error, setError] = useState4(null);
-  const requestIdRef = useRef6(0);
+  const requestIdRef = useRef7(0);
   const reset = useCallback3(() => {
     setIsStreaming(false);
     setStreamingText("");
@@ -2961,6 +3000,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",
@@ -3210,16 +3260,16 @@ var FloatingChatBox = ({
   const [errorMessage, setErrorMessage] = useState5(null);
   const [isFocused, setIsFocused] = useState5(false);
   const [isMobile, setIsMobile] = useState5(false);
-  const messagesEndRef = useRef7(null);
-  const messagesContainerRef = useRef7(null);
-  const chatBoxRef = useRef7(null);
+  const messagesEndRef = useRef8(null);
+  const messagesContainerRef = useRef8(null);
+  const chatBoxRef = useRef8(null);
   const chatConfig = useMemo4(() => {
     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;
-  useEffect6(() => {
+  useEffect7(() => {
     if (open && isMobile) {
       setExpanded(true);
     }
@@ -3229,7 +3279,7 @@ var FloatingChatBox = ({
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (open && messages.length === 0) {
       setMessages([
         {
@@ -3240,10 +3290,10 @@ var FloatingChatBox = ({
       ]);
     }
   }, [open, messages.length]);
-  useEffect6(() => {
+  useEffect7(() => {
     scrollToBottom();
   }, [messages, streamingText, scrollToBottom]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     if (isMobile && expanded) return;
     const handleClickOutside = (event) => {
@@ -3256,7 +3306,7 @@ var FloatingChatBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, isMobile, expanded]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 768px)");
     const updateMobile = () => setIsMobile(mediaQuery.matches);
@@ -3274,7 +3324,7 @@ var FloatingChatBox = ({
       }
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof document === "undefined") return;
     if (!open || !isMobile) return;
     document.body.style.overflow = "hidden";
@@ -3486,22 +3536,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;
@@ -3521,16 +3555,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__ */ jsxs6("header", { style: styles.header, children: [
             /* @__PURE__ */ jsx7("h3", { style: styles.title, children: "Asistente Zenit AI" }),
             /* @__PURE__ */ jsxs6("div", { style: styles.headerButtons, children: [
-              /* @__PURE__ */ jsx7(
+              !isMobile && /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -3722,4 +3760,4 @@ export {
   useSendMessageStream,
   FloatingChatBox
 };
-//# sourceMappingURL=chunk-PCTRVN4O.mjs.map
+//# sourceMappingURL=chunk-OOK4DBG5.mjs.map