zenit-sdk 0.1.3 → 0.1.4

package/dist/{chunk-URDEEWUZ.mjs → chunk-R5WJ7K2D.mjs}

@@ -2006,13 +2006,366 @@ var ZenitMap = forwardRef(({
 ZenitMap.displayName = "ZenitMap";
 
 // src/react/ZenitLayerManager.tsx
-import React5, { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
+import React6, { 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";
+import { Eye, EyeOff, ChevronDown, ChevronLeft, ChevronRight, Layers, Upload, X, ZoomIn } from "lucide-react";
+
+// src/react/ui/ZenitSelect.tsx
+import React5 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_SAFE_MENU_Z_INDEX = 4e3;
+function readCssMenuZIndex() {
+  if (typeof document === "undefined") return null;
+  const rootStyles = getComputedStyle(document.documentElement);
+  const configuredValue = rootStyles.getPropertyValue("--zenit-select-z-index").trim() || rootStyles.getPropertyValue("--zenit-overlay-z-index").trim();
+  if (!configuredValue) return null;
+  const parsed = Number.parseInt(configuredValue, 10);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function shouldUseNativeSelect() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+  const hasCoarsePointer = typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : false;
+  return hasCoarsePointer || navigator.maxTouchPoints > 0;
+}
+var ZenitSelect = ({
+  id,
+  value,
+  placeholder = "Seleccionar\u2026",
+  options,
+  onValueChange,
+  disabled = false,
+  className,
+  menuZIndex,
+  maxMenuHeight = 384,
+  ariaLabel,
+  useNativeOnMobile = true
+}) => {
+  const rootRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const lastTouchTsRef = React5.useRef(0);
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [menuPosition, setMenuPosition] = React5.useState({ top: 0, left: 0, width: 0 });
+  const selectedOption = React5.useMemo(
+    () => options.find((option) => option.value === value),
+    [options, value]
+  );
+  const effectiveMenuZIndex = React5.useMemo(
+    () => menuZIndex ?? readCssMenuZIndex() ?? DEFAULT_SAFE_MENU_Z_INDEX,
+    [menuZIndex]
+  );
+  const useNative = React5.useMemo(
+    () => useNativeOnMobile && shouldUseNativeSelect(),
+    [useNativeOnMobile]
+  );
+  const updateMenuPosition = React5.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const viewportPadding = 8;
+    const minWidth = 200;
+    const width = Math.max(rect.width, minWidth);
+    const maxLeft = window.innerWidth - width - viewportPadding;
+    const nextLeft = Math.max(viewportPadding, Math.min(rect.left, maxLeft));
+    const nextTop = rect.bottom + 4;
+    setMenuPosition({ top: nextTop, left: nextLeft, width });
+  }, []);
+  const getEffectiveMaxHeight = React5.useCallback(() => {
+    const available = Math.max(160, window.innerHeight - menuPosition.top - 12);
+    return Math.min(maxMenuHeight, available);
+  }, [maxMenuHeight, menuPosition.top]);
+  React5.useEffect(() => {
+    if (!isOpen) return;
+    updateMenuPosition();
+    const isEventInsideSelect = (targetNode) => Boolean(rootRef.current?.contains(targetNode) || menuRef.current?.contains(targetNode));
+    const handleOutsideTouchStart = (event) => {
+      lastTouchTsRef.current = Date.now();
+      const targetNode = event.target;
+      if (isEventInsideSelect(targetNode)) return;
+      setIsOpen(false);
+    };
+    const handleOutsideMouseDown = (event) => {
+      if (Date.now() - lastTouchTsRef.current < 500) return;
+      const targetNode = event.target;
+      if (isEventInsideSelect(targetNode)) return;
+      setIsOpen(false);
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    const handleWindowChanges = () => updateMenuPosition();
+    document.addEventListener("touchstart", handleOutsideTouchStart, { capture: true });
+    document.addEventListener("mousedown", handleOutsideMouseDown, true);
+    document.addEventListener("keydown", handleEscape);
+    window.addEventListener("resize", handleWindowChanges);
+    window.addEventListener("scroll", handleWindowChanges, true);
+    return () => {
+      document.removeEventListener("touchstart", handleOutsideTouchStart, true);
+      document.removeEventListener("mousedown", handleOutsideMouseDown, true);
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("resize", handleWindowChanges);
+      window.removeEventListener("scroll", handleWindowChanges, true);
+    };
+  }, [isOpen, updateMenuPosition]);
+  const handleTriggerDown = (event) => {
+    if (event.type === "touchstart") {
+      lastTouchTsRef.current = Date.now();
+    }
+    if (event.type === "mousedown" && Date.now() - lastTouchTsRef.current < 500) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    if (!isOpen) updateMenuPosition();
+    setIsOpen((prev) => !prev);
+  };
+  const handleTriggerClick = (event) => {
+    if (event.detail !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    if (!isOpen) updateMenuPosition();
+    setIsOpen((prev) => !prev);
+  };
+  const selectValue = (nextValue, isDisabled) => {
+    if (isDisabled) return;
+    onValueChange?.(nextValue);
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  if (useNative) {
+    return /* @__PURE__ */ jsxs4("div", { ref: rootRef, className: [className, "zenit-select-root"].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx4("style", { children: `
+            .zenit-select-native {
+              width: 100%;
+              min-height: 40px;
+              height: 40px;
+              border: 1px solid #cbd5e1;
+              border-radius: 6px;
+              background: #ffffff;
+              color: #0f172a;
+              padding: 0 12px;
+              font-size: 14px;
+              line-height: 1.25;
+              cursor: pointer;
+              transition: border-color 0.15s ease, box-shadow 0.15s ease;
+              appearance: none;
+              -webkit-appearance: none;
+            }
+            .zenit-select-native:disabled {
+              opacity: 0.6;
+              cursor: not-allowed;
+            }
+            .zenit-select-native:focus-visible {
+              outline: none;
+              border-color: #60a5fa;
+              box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
+            }
+
+            @media (max-width: 640px) {
+              .zenit-select-native {
+                min-height: 38px;
+                height: 38px;
+              }
+            }
+          ` }),
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          id,
+          className: "zenit-select-native",
+          value: value ?? "",
+          "aria-label": ariaLabel,
+          disabled,
+          onChange: (event) => {
+            onValueChange?.(event.target.value);
+          },
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx4("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { ref: rootRef, className: [className, "zenit-select-root"].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx4("style", { children: `
+          .zenit-select-trigger {
+            width: 100%;
+            min-height: 40px;
+            height: 40px;
+            border: 1px solid #cbd5e1;
+            border-radius: 6px;
+            background: #ffffff;
+            color: #0f172a;
+            display: inline-flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+            padding: 0 12px;
+            font-size: 14px;
+            line-height: 1.25;
+            cursor: pointer;
+            text-align: left;
+            transition: border-color 0.15s ease, box-shadow 0.15s ease;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
+          }
+          .zenit-select-trigger.is-disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+          }
+          .zenit-select-trigger:focus-visible {
+            outline: none;
+            border-color: #60a5fa;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
+          }
+          .zenit-select-label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .zenit-select-label.is-placeholder {
+            color: #64748b;
+          }
+          .zenit-select-chevron {
+            opacity: 0.5;
+            flex-shrink: 0;
+          }
+
+          /* Contenedor: aqu\xED debe GANAR el scroll en m\xF3vil */
+          .zenit-select-content {
+            position: fixed;
+            border: 1px solid #cbd5e1;
+            border-radius: 6px;
+            background: #ffffff;
+            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
+            overflow-y: auto;
+            padding: 4px;
+            pointer-events: auto;
+
+            /* Lo importante: permitir pan vertical dentro del men\xFA */
+            touch-action: pan-y;
+            overscroll-behavior: contain;
+            -webkit-overflow-scrolling: touch;
+          }
+
+          /* Items NO son button: evitamos que WebView \u201Csecuestr\xE9\u201D el gesto */
+          .zenit-select-item {
+            width: 100%;
+            border-radius: 4px;
+            text-align: left;
+            color: #0f172a;
+            font-size: 14px;
+            min-height: 34px;
+            padding: 8px 10px;
+            cursor: pointer;
+            -webkit-tap-highlight-color: transparent;
+            user-select: none;
+          }
+          .zenit-select-item:hover {
+            background: #f1f5f9;
+          }
+          .zenit-select-item.is-selected {
+            background: #e2e8f0;
+            font-weight: 600;
+          }
+          .zenit-select-item.is-disabled {
+            color: #94a3b8;
+            cursor: not-allowed;
+          }
+          .zenit-select-item:focus-visible {
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
+          }
+
+          @media (max-width: 640px) {
+            .zenit-select-trigger {
+              height: 38px;
+              min-height: 38px;
+            }
+            .zenit-select-content {
+              max-width: calc(100vw - 16px);
+            }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        id,
+        ref: triggerRef,
+        type: "button",
+        className: `zenit-select-trigger${disabled ? " is-disabled" : ""}`,
+        onTouchStart: handleTriggerDown,
+        onMouseDown: handleTriggerDown,
+        onClick: handleTriggerClick,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-label": ariaLabel,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: `zenit-select-label${selectedOption ? "" : " is-placeholder"}`, children: selectedOption?.label ?? placeholder }),
+          /* @__PURE__ */ jsx4(ChevronDown, { className: "zenit-select-chevron", size: 16, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    isOpen && typeof document !== "undefined" && createPortal2(
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ref: menuRef,
+          className: "zenit-select-content",
+          role: "listbox",
+          style: {
+            top: menuPosition.top,
+            left: menuPosition.left,
+            width: menuPosition.width,
+            zIndex: effectiveMenuZIndex,
+            maxHeight: getEffectiveMaxHeight()
+          },
+          children: options.map((option) => {
+            const isSelected = option.value === value;
+            return /* @__PURE__ */ jsx4(
+              "div",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                tabIndex: option.disabled ? -1 : 0,
+                className: `zenit-select-item${isSelected ? " is-selected" : ""}${option.disabled ? " is-disabled" : ""}`,
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  if (option.disabled) return;
+                  selectValue(option.value, option.disabled);
+                },
+                onKeyDown: (event) => {
+                  if (option.disabled) return;
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    selectValue(option.value, option.disabled);
+                  }
+                },
+                children: option.label
+              },
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
 
 // src/react/ZenitLayerManager.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FLOAT_TOLERANCE = 1e-3;
 function areEffectiveStatesEqual(a, b) {
   if (a.length !== b.length) return false;
@@ -2110,7 +2463,7 @@ var ZenitLayerManager = ({
     });
     return index;
   }, [map, mapLayers]);
-  const resolveUserOpacity = React5.useCallback((state) => {
+  const resolveUserOpacity = React6.useCallback((state) => {
     if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
     if (typeof state.overrideOpacity === "string") {
       const parsed = Number.parseFloat(state.overrideOpacity);
@@ -2118,7 +2471,7 @@ var ZenitLayerManager = ({
     }
     return state.opacity ?? 1;
   }, []);
-  const resolveEffectiveOpacity = React5.useCallback(
+  const resolveEffectiveOpacity = React6.useCallback(
     (layerId, userOpacity) => {
       if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
         return userOpacity;
@@ -2203,7 +2556,7 @@ var ZenitLayerManager = ({
     mapZoom,
     onLayerStatesChange
   ]);
-  const updateLayerVisible = React5.useCallback(
+  const updateLayerVisible = React6.useCallback(
     (layerId, visible) => {
       if (!onLayerStatesChange) return;
       const next = effectiveStates.map(
@@ -2213,7 +2566,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange]
   );
-  const updateLayerOpacity = React5.useCallback(
+  const updateLayerOpacity = React6.useCallback(
     (layerId, opacity) => {
       if (!onLayerStatesChange) return;
       const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
@@ -2224,7 +2577,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
   );
-  const resolveFeatureCount = React5.useCallback(
+  const resolveFeatureCount = React6.useCallback(
     (layerId, layer) => {
       const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
       if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
@@ -2278,7 +2631,7 @@ var ZenitLayerManager = ({
   }, [selectedFilterLayer]);
   const activeCatalogKey = selectedFilterLayer ? `${selectedFilterLayer.mapLayer.layerId}:${selectedFilterField}` : null;
   const activeCatalogValues = activeCatalogKey ? catalogByLayerField[activeCatalogKey] ?? [] : [];
-  const extractCatalogValues = React5.useCallback((catalogData, field) => {
+  const extractCatalogValues = React6.useCallback((catalogData, field) => {
     const values = /* @__PURE__ */ new Set();
     const pushValue = (value) => {
       if (value === null || value === void 0) return;
@@ -2358,7 +2711,7 @@ var ZenitLayerManager = ({
       controller.abort();
     };
   }, [activeCatalogKey, activeTab, catalogByLayerField, client.layers, extractCatalogValues, selectedFilterField, selectedFilterLayer]);
-  const handleApplyFilter = React5.useCallback(async () => {
+  const handleApplyFilter = React6.useCallback(async () => {
     if (!selectedFilterLayer || !selectedFilterField || !selectedFilterValue || !onApplyLayerFilter) return;
     setApplyingFilter(true);
     setFilterError(null);
@@ -2380,7 +2733,7 @@ var ZenitLayerManager = ({
       setApplyingFilter(false);
     }
   }, [onApplyLayerFilter, selectedFilterField, selectedFilterLayer, selectedFilterValue]);
-  const handleClearFilter = React5.useCallback(async () => {
+  const handleClearFilter = React6.useCallback(async () => {
     if (!selectedFilterLayer) return;
     setApplyingFilter(true);
     setFilterError(null);
@@ -2395,7 +2748,7 @@ var ZenitLayerManager = ({
       setApplyingFilter(false);
     }
   }, [onClearLayerFilter, selectedFilterField, selectedFilterLayer]);
-  const resolveLayerStyle = React5.useCallback(
+  const resolveLayerStyle = React6.useCallback(
     (layerId) => {
       const layerKey = String(layerId);
       const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
@@ -2425,10 +2778,10 @@ var ZenitLayerManager = ({
     ...height ? { height } : {}
   };
   if (loadingMap) {
-    return /* @__PURE__ */ jsx4("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
+    return /* @__PURE__ */ jsx5("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
   }
   if (mapError) {
-    return /* @__PURE__ */ jsxs4("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
+    return /* @__PURE__ */ jsxs5("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
       "Error al cargar mapa: ",
       mapError
     ] });
@@ -2446,7 +2799,7 @@ var ZenitLayerManager = ({
     boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
   };
   const renderLayerCards = () => {
-    return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
+    return /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
       const layerId = layerState.mapLayer.layerId;
       const layerName = layerState.layerName ?? `Capa ${layerId}`;
       const visible = layerState.effective?.visible ?? false;
@@ -2456,7 +2809,7 @@ var ZenitLayerManager = ({
       const muted = !visible;
       const opacityPercent = Math.round(userOpacity * 100);
       const sliderBackground = `linear-gradient(to right, ${layerColor} 0%, ${layerColor} ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`;
-      return /* @__PURE__ */ jsxs4(
+      return /* @__PURE__ */ jsxs5(
         "div",
         {
           className: `zlm-card${muted ? " is-muted" : ""}`,
@@ -2471,9 +2824,9 @@ var ZenitLayerManager = ({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx5(
                   "div",
                   {
                     style: {
@@ -2488,7 +2841,7 @@ var ZenitLayerManager = ({
                     title: "Color de la capa"
                   }
                 ),
-                showLayerVisibilityIcon && /* @__PURE__ */ jsx4(
+                showLayerVisibilityIcon && /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
@@ -2499,11 +2852,11 @@ var ZenitLayerManager = ({
                       )
                     ),
                     "aria-label": visible ? "Ocultar capa" : "Mostrar capa",
-                    children: visible ? /* @__PURE__ */ jsx4(Eye, { size: 16 }) : /* @__PURE__ */ jsx4(EyeOff, { size: 16 })
+                    children: visible ? /* @__PURE__ */ jsx5(Eye, { size: 16 }) : /* @__PURE__ */ jsx5(EyeOff, { size: 16 })
                   }
                 ),
-                /* @__PURE__ */ jsxs4("div", { style: { minWidth: 0, flex: 1 }, children: [
-                  /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx5(
                     "div",
                     {
                       className: "zlm-layer-name",
@@ -2521,26 +2874,26 @@ var ZenitLayerManager = ({
                       children: layerName
                     }
                   ),
-                  /* @__PURE__ */ jsxs4("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
+                  /* @__PURE__ */ jsxs5("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
                     "ID ",
                     layerId
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx4("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ jsxs4("span", { className: "zlm-badge", children: [
+              /* @__PURE__ */ jsx5("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ jsxs5("span", { className: "zlm-badge", children: [
                 featureCount.toLocaleString(),
                 " features"
               ] }) })
             ] }),
-            /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ jsxs4("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
-                /* @__PURE__ */ jsx4("span", { children: "Opacidad" }),
-                /* @__PURE__ */ jsxs4("span", { children: [
+            /* @__PURE__ */ jsx5("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ jsxs5("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
+                /* @__PURE__ */ jsx5("span", { children: "Opacidad" }),
+                /* @__PURE__ */ jsxs5("span", { children: [
                   opacityPercent,
                   "%"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   className: "zlm-range",
@@ -2578,8 +2931,8 @@ var ZenitLayerManager = ({
       );
     }) });
   };
-  return /* @__PURE__ */ jsxs4("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
-    /* @__PURE__ */ jsx4("style", { children: `
+  return /* @__PURE__ */ jsxs5("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
+    /* @__PURE__ */ jsx5("style", { children: `
           .zenit-layer-manager .zlm-card {
             transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
             box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
@@ -2674,16 +3027,16 @@ var ZenitLayerManager = ({
             outline-offset: 2px;
           }
         ` }),
-    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx4("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
-          /* @__PURE__ */ jsxs4("div", { style: { color: "#64748b", fontSize: 12 }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
+          /* @__PURE__ */ jsxs5("div", { style: { color: "#64748b", fontSize: 12 }, children: [
             "Mapa #",
             map.id
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -2691,13 +3044,13 @@ var ZenitLayerManager = ({
             className: "zlm-panel-toggle",
             "aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
             children: [
-              panelVisible ? /* @__PURE__ */ jsx4(Eye, { size: 16 }) : /* @__PURE__ */ jsx4(EyeOff, { size: 16 }),
+              panelVisible ? /* @__PURE__ */ jsx5(Eye, { size: 16 }) : /* @__PURE__ */ jsx5(EyeOff, { size: 16 }),
               panelVisible ? "Ocultar" : "Mostrar"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs5(
         "div",
         {
           style: {
@@ -2710,38 +3063,38 @@ var ZenitLayerManager = ({
             background: "#f1f5f9"
           },
           children: [
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("layers"),
                 children: [
-                  /* @__PURE__ */ jsx4(Layers, { size: 16 }),
+                  /* @__PURE__ */ jsx5(Layers, { size: 16 }),
                   "Capas"
                 ]
               }
             ),
-            showUploadTab && /* @__PURE__ */ jsxs4(
+            showUploadTab && /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("upload"),
                 children: [
-                  /* @__PURE__ */ jsx4(Upload, { size: 16 }),
+                  /* @__PURE__ */ jsx5(Upload, { size: 16 }),
                   "Subir"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "filters" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("filters"),
                 children: [
-                  /* @__PURE__ */ jsx4(Layers, { size: 16 }),
+                  /* @__PURE__ */ jsx5(Layers, { size: 16 }),
                   "Filtros"
                 ]
               }
@@ -2750,49 +3103,67 @@ var ZenitLayerManager = ({
         }
       )
     ] }),
-    panelVisible && /* @__PURE__ */ jsxs4("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
+    panelVisible && /* @__PURE__ */ jsxs5("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
       activeTab === "layers" && renderLayerCards(),
-      activeTab === "filters" && /* @__PURE__ */ jsx4("div", { className: "zlm-filter-panel", style: { display: "flex", flexDirection: "column", gap: 10, background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 12 }, children: !filterableLayers.length ? /* @__PURE__ */ jsx4("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        filterableLayers.length > 1 && /* @__PURE__ */ jsxs4("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
+      activeTab === "filters" && /* @__PURE__ */ jsx5("div", { className: "zlm-filter-panel", style: { display: "flex", flexDirection: "column", gap: 12, background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 12 }, children: !filterableLayers.length ? /* @__PURE__ */ jsx5("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        filterableLayers.length > 1 && /* @__PURE__ */ jsxs5("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
           "Capa",
-          /* @__PURE__ */ jsx4("select", { className: "zlm-filter-select", value: selectedFilterLayerId, onChange: (e) => setSelectedFilterLayerId(e.target.value), children: filterableLayers.map((layer) => /* @__PURE__ */ jsx4("option", { value: String(layer.mapLayer.layerId), children: layer.layerName ?? `Capa ${layer.mapLayer.layerId}` }, String(layer.mapLayer.layerId))) })
+          /* @__PURE__ */ jsx5(
+            ZenitSelect,
+            {
+              ariaLabel: "Seleccionar capa para filtrar",
+              value: selectedFilterLayerId,
+              onValueChange: setSelectedFilterLayerId,
+              options: filterableLayers.map((layer) => ({
+                value: String(layer.mapLayer.layerId),
+                label: layer.layerName ?? `Capa ${layer.mapLayer.layerId}`
+              }))
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs4("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
+        /* @__PURE__ */ jsxs5("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
           "Campo",
-          /* @__PURE__ */ jsx4("select", { className: "zlm-filter-select", value: selectedFilterField, onChange: (e) => {
-            setSelectedFilterField(e.target.value);
-            setSelectedFilterValue("");
-          }, children: filterFields.map((field) => /* @__PURE__ */ jsx4("option", { value: field, children: field }, field)) })
+          /* @__PURE__ */ jsx5(
+            ZenitSelect,
+            {
+              ariaLabel: "Seleccionar campo de filtrado",
+              value: selectedFilterField,
+              onValueChange: (nextField) => {
+                setSelectedFilterField(nextField);
+                setSelectedFilterValue("");
+              },
+              options: filterFields.map((field) => ({ value: field, label: field }))
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs4("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
+        /* @__PURE__ */ jsxs5("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
           "Valor",
-          /* @__PURE__ */ jsxs4(
-            "select",
+          /* @__PURE__ */ jsx5(
+            ZenitSelect,
             {
-              className: "zlm-filter-select",
+              ariaLabel: "Seleccionar valor de filtrado",
               value: selectedFilterValue,
-              onChange: (e) => {
-                const value = e.target.value;
-                setSelectedFilterValue(value);
-              },
-              children: [
-                /* @__PURE__ */ jsx4("option", { value: "", children: "Seleccionar\u2026" }),
-                activeCatalogValues.map((value) => /* @__PURE__ */ jsx4("option", { value, children: value }, value))
-              ]
+              placeholder: "Seleccionar\u2026",
+              onValueChange: (nextValue) => setSelectedFilterValue(nextValue),
+              disabled: loadingCatalog || activeCatalogValues.length === 0,
+              options: activeCatalogValues.map((catalogValue) => ({
+                value: catalogValue,
+                label: catalogValue
+              }))
             }
           )
         ] }),
-        loadingCatalog && /* @__PURE__ */ jsx4("div", { style: { color: "#64748b", fontSize: 12 }, children: "Cargando cat\xE1logo\u2026" }),
-        !loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */ jsx4("div", { style: { color: "#64748b", fontSize: 12 }, children: "No hay cat\xE1logo disponible para este filtro." }),
-        filterError && /* @__PURE__ */ jsx4("div", { style: { color: "#b91c1c", fontSize: 12 }, children: filterError }),
-        appliedFilter && /* @__PURE__ */ jsxs4("div", { className: "zlm-badge", style: { alignSelf: "flex-start" }, children: [
+        loadingCatalog && /* @__PURE__ */ jsx5("div", { style: { color: "#64748b", fontSize: 12 }, children: "Cargando cat\xE1logo\u2026" }),
+        !loadingCatalog && selectedFilterField && activeCatalogValues.length === 0 && /* @__PURE__ */ jsx5("div", { style: { color: "#64748b", fontSize: 12 }, children: "No hay cat\xE1logo disponible para este filtro." }),
+        filterError && /* @__PURE__ */ jsx5("div", { style: { color: "#b91c1c", fontSize: 12 }, children: filterError }),
+        appliedFilter && /* @__PURE__ */ jsxs5("div", { className: "zlm-badge", style: { alignSelf: "flex-start" }, children: [
           "Activo: ",
           appliedFilter.field,
           " = ",
           appliedFilter.value
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "zlm-filter-actions", style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("div", { className: "zlm-filter-actions", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -2802,7 +3173,7 @@ var ZenitLayerManager = ({
               children: applyingFilter ? "Aplicando\u2026" : "Aplicar"
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -2814,13 +3185,13 @@ var ZenitLayerManager = ({
           )
         ] })
       ] }) }),
-      showUploadTab && activeTab === "upload" && /* @__PURE__ */ jsx4("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
+      showUploadTab && activeTab === "upload" && /* @__PURE__ */ jsx5("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
     ] })
   ] });
 };
 
 // src/react/ZenitFeatureFilterPanel.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ZenitFeatureFilterPanel = ({
   title = "Filtros",
   description,
@@ -2828,7 +3199,7 @@ var ZenitFeatureFilterPanel = ({
   style,
   children
 }) => {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       className,
@@ -2841,11 +3212,11 @@ var ZenitFeatureFilterPanel = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxs5("header", { style: { marginBottom: 12 }, children: [
-          /* @__PURE__ */ jsx5("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
-          description && /* @__PURE__ */ jsx5("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
+        /* @__PURE__ */ jsxs6("header", { style: { marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsx6("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
+          description && /* @__PURE__ */ jsx6("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
         ] }),
-        /* @__PURE__ */ jsx5("div", { children })
+        /* @__PURE__ */ jsx6("div", { children })
       ]
     }
   );
@@ -2853,7 +3224,7 @@ var ZenitFeatureFilterPanel = ({
 
 // src/react/ai/FloatingChatBox.tsx
 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";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/react/hooks/use-chat.ts
 import { useCallback as useCallback3, useRef as useRef7, useState as useState4 } from "react";
@@ -3077,7 +3448,7 @@ var useSendMessageStream = (config) => {
 // src/react/components/MarkdownRenderer.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function normalizeAssistantMarkdown(text) {
   if (!text || typeof text !== "string") return "";
   let normalized = text;
@@ -3093,28 +3464,28 @@ var MarkdownRenderer = ({ content, className }) => {
   if (!normalizedContent) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx7(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
       components: {
         // Headings with proper spacing
-        h1: ({ children, ...props }) => /* @__PURE__ */ jsx6("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
-        h2: ({ children, ...props }) => /* @__PURE__ */ jsx6("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
-        h3: ({ children, ...props }) => /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
-        h4: ({ children, ...props }) => /* @__PURE__ */ jsx6("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
-        h5: ({ children, ...props }) => /* @__PURE__ */ jsx6("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
-        h6: ({ children, ...props }) => /* @__PURE__ */ jsx6("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h1: ({ children, ...props }) => /* @__PURE__ */ jsx7("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
+        h2: ({ children, ...props }) => /* @__PURE__ */ jsx7("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
+        h3: ({ children, ...props }) => /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
+        h4: ({ children, ...props }) => /* @__PURE__ */ jsx7("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
+        h5: ({ children, ...props }) => /* @__PURE__ */ jsx7("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h6: ({ children, ...props }) => /* @__PURE__ */ jsx7("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
         // Paragraphs with comfortable line height
-        p: ({ children, ...props }) => /* @__PURE__ */ jsx6("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
+        p: ({ children, ...props }) => /* @__PURE__ */ jsx7("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
         // Lists with proper indentation
-        ul: ({ children, ...props }) => /* @__PURE__ */ jsx6("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        ol: ({ children, ...props }) => /* @__PURE__ */ jsx6("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        li: ({ children, ...props }) => /* @__PURE__ */ jsx6("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
+        ul: ({ children, ...props }) => /* @__PURE__ */ jsx7("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        ol: ({ children, ...props }) => /* @__PURE__ */ jsx7("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        li: ({ children, ...props }) => /* @__PURE__ */ jsx7("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
         // Code blocks
         code: ({ inline, children, ...props }) => {
           if (inline) {
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx7(
               "code",
               {
                 style: {
@@ -3129,7 +3500,7 @@ var MarkdownRenderer = ({ content, className }) => {
               }
             );
           }
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             "code",
             {
               style: {
@@ -3149,9 +3520,9 @@ var MarkdownRenderer = ({ content, className }) => {
           );
         },
         // Pre (code block wrapper)
-        pre: ({ children, ...props }) => /* @__PURE__ */ jsx6("pre", { style: { margin: 0 }, ...props, children }),
+        pre: ({ children, ...props }) => /* @__PURE__ */ jsx7("pre", { style: { margin: 0 }, ...props, children }),
         // Blockquotes
-        blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx6(
+        blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx7(
           "blockquote",
           {
             style: {
@@ -3167,11 +3538,11 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Strong/bold
-        strong: ({ children, ...props }) => /* @__PURE__ */ jsx6("strong", { style: { fontWeight: 600 }, ...props, children }),
+        strong: ({ children, ...props }) => /* @__PURE__ */ jsx7("strong", { style: { fontWeight: 600 }, ...props, children }),
         // Emphasis/italic
-        em: ({ children, ...props }) => /* @__PURE__ */ jsx6("em", { style: { fontStyle: "italic" }, ...props, children }),
+        em: ({ children, ...props }) => /* @__PURE__ */ jsx7("em", { style: { fontStyle: "italic" }, ...props, children }),
         // Horizontal rule
-        hr: (props) => /* @__PURE__ */ jsx6(
+        hr: (props) => /* @__PURE__ */ jsx7(
           "hr",
           {
             style: {
@@ -3184,7 +3555,7 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Tables (GFM)
-        table: ({ children, ...props }) => /* @__PURE__ */ jsx6("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx6(
+        table: ({ children, ...props }) => /* @__PURE__ */ jsx7("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx7(
           "table",
           {
             style: {
@@ -3196,7 +3567,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ) }),
-        th: ({ children, ...props }) => /* @__PURE__ */ jsx6(
+        th: ({ children, ...props }) => /* @__PURE__ */ jsx7(
           "th",
           {
             style: {
@@ -3210,7 +3581,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ),
-        td: ({ children, ...props }) => /* @__PURE__ */ jsx6(
+        td: ({ children, ...props }) => /* @__PURE__ */ jsx7(
           "td",
           {
             style: {
@@ -3228,32 +3599,32 @@ var MarkdownRenderer = ({ content, className }) => {
 };
 
 // src/react/ai/FloatingChatBox.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var ChatIcon = () => /* @__PURE__ */ jsx7("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
-var CloseIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var ChatIcon = () => /* @__PURE__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx7("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ jsx7("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var ExpandIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx8("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx8("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ jsx8("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var CollapseIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx7("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ jsx7("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ jsx7("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var CollapseIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ jsx8("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ jsx8("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ jsx8("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var SendIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx7("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-  /* @__PURE__ */ jsx7("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+var SendIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
 ] });
-var LayersIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx7("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-  /* @__PURE__ */ jsx7("polyline", { points: "2 17 12 22 22 17" }),
-  /* @__PURE__ */ jsx7("polyline", { points: "2 12 12 17 22 12" })
+var LayersIcon = () => /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx8("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsx8("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsx8("polyline", { points: "2 12 12 17 22 12" })
 ] });
 var styles = {
   root: {
@@ -3720,13 +4091,13 @@ var FloatingChatBox = ({
     if (!response?.metadata) return null;
     const referencedLayers = response.metadata.referencedLayers;
     if (!referencedLayers || referencedLayers.length === 0) return null;
-    return /* @__PURE__ */ jsxs6("div", { style: styles.metadataSection, children: [
-      /* @__PURE__ */ jsxs6("div", { style: styles.metadataTitle, children: [
-        /* @__PURE__ */ jsx7(LayersIcon, {}),
+    return /* @__PURE__ */ jsxs7("div", { style: styles.metadataSection, children: [
+      /* @__PURE__ */ jsxs7("div", { style: styles.metadataTitle, children: [
+        /* @__PURE__ */ jsx8(LayersIcon, {}),
         "Capas Analizadas"
       ] }),
-      /* @__PURE__ */ jsx7("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ jsxs6("li", { style: styles.metadataItem, children: [
-        /* @__PURE__ */ jsx7("strong", { children: layer.layerName }),
+      /* @__PURE__ */ jsx8("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ jsxs7("li", { style: styles.metadataItem, children: [
+        /* @__PURE__ */ jsx8("strong", { children: layer.layerName }),
         " (",
         layer.featureCount,
         " ",
@@ -3744,9 +4115,9 @@ var FloatingChatBox = ({
   }, [isStreaming, setOpen, onActionClick]);
   const renderActions = (response) => {
     if (!response?.suggestedActions?.length) return null;
-    return /* @__PURE__ */ jsxs6("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ jsx7("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
-      /* @__PURE__ */ jsx7("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs7("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ jsx8("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
+      /* @__PURE__ */ jsx8("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -3777,9 +4148,9 @@ var FloatingChatBox = ({
   };
   const renderFollowUps = (response) => {
     if (!response?.followUpQuestions?.length) return null;
-    return /* @__PURE__ */ jsxs6("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ jsx7("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
-      /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs7("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ jsx8("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -3808,8 +4179,8 @@ var FloatingChatBox = ({
       )) })
     ] });
   };
-  const chatContent = /* @__PURE__ */ jsxs6("div", { style: styles.root, children: [
-    /* @__PURE__ */ jsx7("style", { children: `
+  const chatContent = /* @__PURE__ */ jsxs7("div", { style: styles.root, children: [
+    /* @__PURE__ */ jsx8("style", { children: `
         @keyframes zenitBlink {
           0%, 49% { opacity: 1; }
           50%, 100% { opacity: 0; }
@@ -3865,7 +4236,7 @@ var FloatingChatBox = ({
           }
         }
       ` }),
-    open && /* @__PURE__ */ jsxs6(
+    open && /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: chatBoxRef,
@@ -3879,10 +4250,10 @@ var FloatingChatBox = ({
           };
         })(),
         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: [
-              !isMobile && /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs7("header", { style: styles.header, children: [
+            /* @__PURE__ */ jsx8("h3", { style: styles.title, children: "Asistente Zenit AI" }),
+            /* @__PURE__ */ jsxs7("div", { style: styles.headerButtons, children: [
+              !isMobile && /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -3895,10 +4266,10 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": expanded ? "Contraer" : "Expandir",
-                  children: expanded ? /* @__PURE__ */ jsx7(CollapseIcon, {}) : /* @__PURE__ */ jsx7(ExpandIcon, {})
+                  children: expanded ? /* @__PURE__ */ jsx8(CollapseIcon, {}) : /* @__PURE__ */ jsx8(ExpandIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -3911,20 +4282,20 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": "Cerrar",
-                  children: /* @__PURE__ */ jsx7(CloseIcon, {})
+                  children: /* @__PURE__ */ jsx8(CloseIcon, {})
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs6("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
-            messages.map((message) => /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs7("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
+            messages.map((message) => /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: message.role === "user" ? "flex-end" : "flex-start"
                 },
-                children: /* @__PURE__ */ jsxs6(
+                children: /* @__PURE__ */ jsxs7(
                   "div",
                   {
                     style: {
@@ -3932,7 +4303,7 @@ var FloatingChatBox = ({
                       ...message.role === "user" ? styles.userMessage : styles.assistantMessage
                     },
                     children: [
-                      message.role === "assistant" ? /* @__PURE__ */ jsx7(MarkdownRenderer, { content: message.content }) : message.content,
+                      message.role === "assistant" ? /* @__PURE__ */ jsx8(MarkdownRenderer, { content: message.content }) : message.content,
                       message.role === "assistant" && renderMetadata(message.response),
                       message.role === "assistant" && renderActions(message.response),
                       message.role === "assistant" && renderFollowUps(message.response)
@@ -3942,39 +4313,39 @@ var FloatingChatBox = ({
               },
               message.id
             )),
-            isStreaming && /* @__PURE__ */ jsx7(
+            isStreaming && /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: "flex-start"
                 },
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx8(
                   "div",
                   {
                     style: {
                       ...styles.messageBubble,
                       ...styles.assistantMessage
                     },
-                    children: streamingText ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
-                      /* @__PURE__ */ jsx7(MarkdownRenderer, { content: streamingText }),
-                      /* @__PURE__ */ jsx7("span", { style: styles.cursor })
-                    ] }) : /* @__PURE__ */ jsxs6("div", { style: styles.thinkingText, children: [
-                      /* @__PURE__ */ jsx7("span", { children: "Pensando" }),
-                      /* @__PURE__ */ jsxs6("div", { style: styles.typingIndicator, children: [
-                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot })
+                    children: streamingText ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+                      /* @__PURE__ */ jsx8(MarkdownRenderer, { content: streamingText }),
+                      /* @__PURE__ */ jsx8("span", { style: styles.cursor })
+                    ] }) : /* @__PURE__ */ jsxs7("div", { style: styles.thinkingText, children: [
+                      /* @__PURE__ */ jsx8("span", { children: "Pensando" }),
+                      /* @__PURE__ */ jsxs7("div", { style: styles.typingIndicator, children: [
+                        /* @__PURE__ */ jsx8("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ jsx8("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ jsx8("div", { className: "zenit-typing-dot", style: styles.typingDot })
                       ] })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
+            /* @__PURE__ */ jsx8("div", { ref: messagesEndRef })
           ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs7("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
+            /* @__PURE__ */ jsx8(
               "textarea",
               {
                 style: {
@@ -3991,7 +4362,7 @@ var FloatingChatBox = ({
                 disabled: !mapId || !baseUrl || isStreaming
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -4000,18 +4371,18 @@ var FloatingChatBox = ({
                 onClick: () => void handleSend(),
                 disabled: !canSend,
                 "aria-label": "Enviar mensaje",
-                children: /* @__PURE__ */ jsx7(SendIcon, {})
+                children: /* @__PURE__ */ jsx8(SendIcon, {})
               }
             )
           ] }),
-          errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.errorText, children: errorMessage }),
-          isStreaming && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
-          !mapId && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
-          !baseUrl && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
+          errorMessage && /* @__PURE__ */ jsx8("div", { style: styles.errorText, children: errorMessage }),
+          isStreaming && !errorMessage && /* @__PURE__ */ jsx8("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
+          !mapId && !errorMessage && /* @__PURE__ */ jsx8("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
+          !baseUrl && !errorMessage && /* @__PURE__ */ jsx8("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
         ]
       }
     ),
-    !(hideButton && !open) && /* @__PURE__ */ jsx7(
+    !(hideButton && !open) && /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -4023,15 +4394,15 @@ var FloatingChatBox = ({
         },
         onClick: () => setOpen((prev) => !prev),
         "aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
-        children: open ? /* @__PURE__ */ jsx7(CloseIcon, {}) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          /* @__PURE__ */ jsx7(ChatIcon, {}),
-          !isMobile && /* @__PURE__ */ jsx7("span", { children: "Asistente IA" })
+        children: open ? /* @__PURE__ */ jsx8(CloseIcon, {}) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(ChatIcon, {}),
+          !isMobile && /* @__PURE__ */ jsx8("span", { children: "Asistente IA" })
         ] })
       }
     )
   ] });
   if (typeof document !== "undefined") {
-    return createPortal2(chatContent, document.body);
+    return createPortal3(chatContent, document.body);
   }
   return chatContent;
 };
@@ -4062,16 +4433,18 @@ export {
   ZenitMap,
   Eye,
   EyeOff,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   Layers,
   Upload,
   X,
   ZoomIn,
+  ZenitSelect,
   ZenitLayerManager,
   ZenitFeatureFilterPanel,
   useSendMessage,
   useSendMessageStream,
   FloatingChatBox
 };
-//# sourceMappingURL=chunk-URDEEWUZ.mjs.map
+//# sourceMappingURL=chunk-R5WJ7K2D.mjs.map