zenit-sdk 0.1.5 → 0.1.6

package/dist/chunk-J2YWF2TS.mjs

@@ -0,0 +1,4830 @@
+// src/react/ZenitMap.tsx
+import React4, { useCallback as useCallback2, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo3, useRef as useRef5, useState as useState2, forwardRef } from "react";
+import { MapContainer, Marker as Marker2, TileLayer, ZoomControl } from "react-leaflet";
+import L4 from "leaflet";
+
+// src/maps/helpers.ts
+function toNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return void 0;
+}
+function clampOpacity(value) {
+  if (!Number.isFinite(value ?? NaN)) {
+    return 1;
+  }
+  return Math.min(1, Math.max(0, value ?? 1));
+}
+function resolveLayerId(mapLayer) {
+  if (mapLayer.layerId !== void 0 && mapLayer.layerId !== null) {
+    return mapLayer.layerId;
+  }
+  const embedded = mapLayer.layer;
+  return embedded?.id;
+}
+function extractMapDto(map) {
+  if (map && typeof map === "object" && "data" in map) {
+    const data = map.data;
+    return data ?? null;
+  }
+  if (map && typeof map === "object") {
+    return map;
+  }
+  return null;
+}
+function normalizeMapCenter(map) {
+  const center = map.settings?.center;
+  if (Array.isArray(center) && center.length >= 2) {
+    const [lon, lat] = center;
+    return {
+      ...map,
+      settings: {
+        ...map.settings,
+        center: { lon, lat }
+      }
+    };
+  }
+  return map;
+}
+function normalizeMapLayers(mapOrResponse) {
+  const map = extractMapDto(mapOrResponse);
+  if (!map?.mapLayers) {
+    return [];
+  }
+  const normalized = [];
+  map.mapLayers.forEach((mapLayer, index) => {
+    const layerId = resolveLayerId(mapLayer);
+    if (layerId === void 0) {
+      return;
+    }
+    const embeddedLayer = mapLayer.layer;
+    const visible = mapLayer.isVisible !== false;
+    const opacity = clampOpacity(toNumber(mapLayer.opacity) ?? 1);
+    const layerType = embeddedLayer?.layerType ?? mapLayer.layerType;
+    const geometryType = embeddedLayer?.geometryType ?? mapLayer.geometryType;
+    const layerName = embeddedLayer?.name ?? mapLayer.name;
+    const orderCandidate = toNumber(mapLayer.displayOrder) ?? toNumber(mapLayer.order) ?? toNumber(embeddedLayer?.displayOrder) ?? index;
+    normalized.push({
+      layerId,
+      displayOrder: orderCandidate ?? index,
+      isVisible: visible,
+      opacity,
+      layer: embeddedLayer,
+      layerType,
+      geometryType,
+      layerName,
+      mapLayer
+    });
+  });
+  return normalized.sort((a, b) => a.displayOrder - b.displayOrder);
+}
+function computeBBoxFromFeature(feature) {
+  if (!feature || typeof feature !== "object") return null;
+  const geometry = feature.geometry;
+  if (!geometry || !("coordinates" in geometry)) return null;
+  const coords = [];
+  const collect = (candidate) => {
+    if (!Array.isArray(candidate)) return;
+    if (candidate.length === 2 && typeof candidate[0] === "number" && typeof candidate[1] === "number") {
+      coords.push([candidate[0], candidate[1]]);
+      return;
+    }
+    candidate.forEach((entry) => collect(entry));
+  };
+  collect(geometry.coordinates);
+  if (coords.length === 0) return null;
+  const [firstLon, firstLat] = coords[0];
+  const bbox = { minLon: firstLon, minLat: firstLat, maxLon: firstLon, maxLat: firstLat };
+  coords.forEach(([lon, lat]) => {
+    bbox.minLon = Math.min(bbox.minLon, lon);
+    bbox.minLat = Math.min(bbox.minLat, lat);
+    bbox.maxLon = Math.max(bbox.maxLon, lon);
+    bbox.maxLat = Math.max(bbox.maxLat, lat);
+  });
+  return bbox;
+}
+function centroidFromBBox(bbox) {
+  return [(bbox.minLat + bbox.maxLat) / 2, (bbox.minLon + bbox.maxLon) / 2];
+}
+function applyFilteredGeoJSONStrategy(options) {
+  const layerControls = options.normalizedLayers.map((entry) => ({
+    layerId: entry.layerId,
+    visible: entry.isVisible,
+    opacity: entry.opacity
+  }));
+  return {
+    overlay: options.filteredGeojson,
+    metadata: options.metadata,
+    layerControls
+  };
+}
+
+// src/engine/LayerStateEngine.ts
+function clampOpacity2(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Math.min(1, Math.max(0, value));
+  }
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return Math.min(1, Math.max(0, parsed));
+    }
+  }
+  return 1;
+}
+var resolveBaseVisibility = (_layer) => false;
+function resolveBaseOpacity(layer) {
+  if ("opacity" in layer) {
+    return clampOpacity2(layer.opacity);
+  }
+  return 1;
+}
+function toEffectiveState(base, override) {
+  const overrideVisible = override?.overrideVisible ?? void 0;
+  const overrideOpacity = override?.overrideOpacity ?? void 0;
+  const opacitySource = overrideOpacity !== void 0 && overrideOpacity !== null ? overrideOpacity : base.baseOpacity;
+  return {
+    layerId: base.layerId,
+    baseVisible: base.baseVisible,
+    baseOpacity: base.baseOpacity,
+    overrideVisible,
+    overrideOpacity,
+    visible: overrideVisible ?? base.baseVisible,
+    opacity: clampOpacity2(opacitySource)
+  };
+}
+function initLayerStates(mapLayers) {
+  const bases = mapLayers.filter((layer) => layer.layerId !== void 0).map((layer) => ({
+    layerId: layer.layerId,
+    baseVisible: resolveBaseVisibility(layer),
+    baseOpacity: resolveBaseOpacity(layer)
+  }));
+  return bases.map((base) => toEffectiveState(base));
+}
+function applyLayerOverrides(states, overrides) {
+  const overrideMap = /* @__PURE__ */ new Map();
+  overrides.forEach((entry) => overrideMap.set(entry.layerId, entry));
+  return states.map((state) => {
+    const nextOverride = overrideMap.get(state.layerId);
+    const mergedOverrideVisible = nextOverride && "overrideVisible" in nextOverride && nextOverride.overrideVisible !== void 0 ? nextOverride.overrideVisible : state.overrideVisible;
+    const mergedOverrideOpacity = nextOverride && "overrideOpacity" in nextOverride && nextOverride.overrideOpacity !== void 0 ? nextOverride.overrideOpacity : state.overrideOpacity;
+    return toEffectiveState(state, {
+      layerId: state.layerId,
+      overrideVisible: mergedOverrideVisible ?? void 0,
+      overrideOpacity: mergedOverrideOpacity ?? void 0
+    });
+  });
+}
+function resetOverrides(states) {
+  return states.map((state) => toEffectiveState(state));
+}
+
+// src/react/layerStyleHelpers.ts
+function resolveLayerAccent(style) {
+  if (!style) return null;
+  return style.fillColor ?? style.color ?? null;
+}
+function getLayerColor(style, fallback = "#94a3b8") {
+  return resolveLayerAccent(style) ?? fallback;
+}
+function getStyleByLayerId(layerId, mapLayers) {
+  if (!mapLayers) return null;
+  const match = mapLayers.find((ml) => String(ml.layerId) === String(layerId));
+  return match?.style ?? null;
+}
+function getAccentByLayerId(layerId, mapLayers) {
+  const style = getStyleByLayerId(layerId, mapLayers);
+  return resolveLayerAccent(style);
+}
+
+// src/react/zoomOpacity.ts
+var DEFAULT_OPTIONS = {
+  minZoom: 11,
+  maxZoom: 15,
+  minFactor: 0.3,
+  maxFactor: 1,
+  minOpacity: 0.1,
+  maxOpacity: 0.92
+};
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampOpacity3(value) {
+  return clampNumber(value, 0, 1);
+}
+function isPolygonLayer(layerType, geometryType) {
+  const candidate = (layerType ?? geometryType ?? "").toLowerCase();
+  return candidate === "polygon" || candidate === "multipolygon";
+}
+function getZoomOpacityFactor(zoom, options) {
+  const settings = { ...DEFAULT_OPTIONS, ...options };
+  const { minZoom, maxZoom, minFactor, maxFactor } = settings;
+  if (maxZoom <= minZoom) return clampNumber(maxFactor, minFactor, maxFactor);
+  const t = clampNumber((zoom - minZoom) / (maxZoom - minZoom), 0, 1);
+  const factor = maxFactor + (minFactor - maxFactor) * t;
+  return clampNumber(factor, minFactor, maxFactor);
+}
+function getLayerZoomOpacityFactor(zoom, layerType, geometryType, options) {
+  if (!isPolygonLayer(layerType, geometryType)) return 1;
+  return getZoomOpacityFactor(zoom, options);
+}
+function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, options) {
+  if (!isPolygonLayer(layerType, geometryType)) {
+    return clampOpacity3(baseOpacity);
+  }
+  const settings = { ...DEFAULT_OPTIONS, ...options };
+  const factor = getZoomOpacityFactor(zoom, options);
+  const effective = clampOpacity3(baseOpacity) * factor;
+  return clampNumber(effective, settings.minOpacity, settings.maxOpacity);
+}
+
+// src/react/map/layer-geojson.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { GeoJSON } from "react-leaflet";
+import L from "leaflet";
+
+// src/react/map/geojson-sanitize.ts
+var warnedKeys = /* @__PURE__ */ new Set();
+function isFiniteNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value === "string") return Number.isFinite(Number(value));
+  return false;
+}
+function isValidLonLat(lon, lat) {
+  const lonN = typeof lon === "string" ? Number(lon) : lon;
+  const latN = typeof lat === "string" ? Number(lat) : lat;
+  if (!isFiniteNumber(lonN) || !isFiniteNumber(latN)) return false;
+  if (typeof lonN !== "number" || typeof latN !== "number") return false;
+  return lonN >= -180 && lonN <= 180 && latN >= -90 && latN <= 90;
+}
+function asFeatureCollection(input) {
+  const raw = input && typeof input === "object" && "data" in input ? input.data : input;
+  if (!raw || typeof raw !== "object") {
+    return { type: "FeatureCollection", features: [] };
+  }
+  if (raw.type === "FeatureCollection") {
+    const collection = raw;
+    const features = Array.isArray(collection.features) ? collection.features : [];
+    return { ...collection, features };
+  }
+  if (raw.type === "Feature") {
+    return {
+      type: "FeatureCollection",
+      features: [raw]
+    };
+  }
+  return { type: "FeatureCollection", features: [] };
+}
+function sanitizeFeature(feature) {
+  if (!feature || typeof feature !== "object") return null;
+  const geometry = feature.geometry;
+  if (!geometry || typeof geometry !== "object") return null;
+  const geometryType = geometry.type;
+  const coordinates = geometry.coordinates;
+  if (geometryType === "Point") {
+    if (!Array.isArray(coordinates) || coordinates.length < 2) return null;
+    return isValidLonLat(coordinates[0], coordinates[1]) ? feature : null;
+  }
+  if (geometryType === "MultiPoint") {
+    if (!Array.isArray(coordinates)) return null;
+    const validCoordinates = coordinates.filter((coordinate) => {
+      if (!Array.isArray(coordinate) || coordinate.length < 2) return false;
+      return isValidLonLat(coordinate[0], coordinate[1]);
+    });
+    if (validCoordinates.length === 0) return null;
+    if (validCoordinates.length === coordinates.length) {
+      return feature;
+    }
+    return {
+      ...feature,
+      geometry: {
+        ...geometry,
+        coordinates: validCoordinates
+      }
+    };
+  }
+  if (geometryType === "LineString" || geometryType === "Polygon" || geometryType === "MultiPolygon" || geometryType === "MultiLineString") {
+    return Array.isArray(coordinates) && coordinates.length > 0 ? feature : null;
+  }
+  return feature;
+}
+function logSanitizeStats(stats, debugKey) {
+  if (process.env.NODE_ENV === "production") return;
+  if (stats.droppedFeatures === 0 && stats.droppedPointsFromMultiPoint === 0) return;
+  const resolvedKey = debugKey ?? "__default__";
+  if (warnedKeys.has(resolvedKey)) return;
+  warnedKeys.add(resolvedKey);
+  console.warn("[zenit-sdk] GeoJSON sanitization dropped invalid geometries.", {
+    layerId: debugKey,
+    ...stats
+  });
+}
+function sanitizeGeoJson(input, debugKey) {
+  const featureCollection = asFeatureCollection(input);
+  const safeFeatures = [];
+  const stats = {
+    droppedFeatures: 0,
+    droppedPointsFromMultiPoint: 0
+  };
+  const rawFeatures = Array.isArray(featureCollection.features) ? featureCollection.features : [];
+  rawFeatures.forEach((rawFeature) => {
+    const feature = rawFeature;
+    const geometryType = feature?.geometry?.type;
+    const originalCoords = feature?.geometry?.coordinates;
+    const sanitized = sanitizeFeature(feature);
+    if (!sanitized) {
+      stats.droppedFeatures += 1;
+      if (geometryType === "MultiPoint" && Array.isArray(originalCoords)) {
+        stats.droppedPointsFromMultiPoint += originalCoords.length;
+      }
+      return;
+    }
+    if (geometryType === "MultiPoint" && Array.isArray(originalCoords)) {
+      const safeCoords = sanitized.geometry?.coordinates;
+      const safeCount = Array.isArray(safeCoords) ? safeCoords.length : 0;
+      stats.droppedPointsFromMultiPoint += Math.max(0, originalCoords.length - safeCount);
+    }
+    safeFeatures.push(sanitized);
+  });
+  logSanitizeStats(stats, debugKey);
+  return {
+    ...featureCollection,
+    type: "FeatureCollection",
+    features: safeFeatures
+  };
+}
+
+// src/react/map/layer-geojson.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
+var DEV_MODE = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+function normalizeBboxFromData(data) {
+  const bboxCandidate = data.bbox;
+  if (!Array.isArray(bboxCandidate) || bboxCandidate.length < 4) return null;
+  const [minLon, minLat, maxLon, maxLat] = bboxCandidate;
+  const values = [minLon, minLat, maxLon, maxLat].map((value) => Number(value));
+  if (values.every((value) => Number.isFinite(value))) {
+    return values;
+  }
+  return null;
+}
+function buildIdsSample(features) {
+  return features.slice(0, 10).map((feature) => {
+    const typedFeature = feature;
+    if (typedFeature.id !== void 0 && typedFeature.id !== null) {
+      return String(typedFeature.id);
+    }
+    const featureId = typedFeature.properties?.featureId;
+    return featureId !== void 0 && featureId !== null ? String(featureId) : "";
+  }).join(",");
+}
+function getGeometryType(feature) {
+  const t = feature?.geometry?.type;
+  return typeof t === "string" ? t : null;
+}
+function isPointGeometry(feature) {
+  const geometryType = getGeometryType(feature);
+  return geometryType !== null && POINT_GEOMETRY_TYPES.has(geometryType);
+}
+function isNonPointGeometry(feature) {
+  const geometryType = getGeometryType(feature);
+  return geometryType !== null && !POINT_GEOMETRY_TYPES.has(geometryType);
+}
+function isValidLatLng(latlng) {
+  const candidate = latlng;
+  return Boolean(
+    candidate && Number.isFinite(candidate.lat) && Number.isFinite(candidate.lng)
+  );
+}
+function createInvisibleFallbackMarker(latlng) {
+  return L.circleMarker(latlng ?? [0, 0], {
+    radius: 0,
+    opacity: 0,
+    fillOpacity: 0,
+    interactive: false
+  });
+}
+function createInvisibleFallbackClusterMarker(latlng) {
+  return L.marker(latlng ?? [0, 0], {
+    opacity: 0,
+    interactive: false
+  });
+}
+function ensurePaneName(mapInstance, paneName, fallbackPaneName) {
+  if (!mapInstance) return fallbackPaneName;
+  const existingPane = mapInstance.getPane(paneName) ?? mapInstance.createPane(paneName);
+  if (!existingPane && DEV_MODE) {
+    console.warn("[LayerGeoJson] pane unavailable, using fallback", { paneName, fallbackPaneName });
+  }
+  return mapInstance.getPane(paneName) ? paneName : fallbackPaneName;
+}
+function createPointDivIcon(style, isMobile) {
+  const size = isMobile ? 18 : 14;
+  const backgroundColor = style.fillColor ?? style.color ?? "#3388ff";
+  const borderColor = style.color ?? style.fillColor ?? "#3388ff";
+  return L.divIcon({
+    className: "zenit-point-marker",
+    html: `<div style="width:${size}px;height:${size}px;border-radius:50%;background:${backgroundColor};border:2px solid ${borderColor};"></div>`,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2]
+  });
+}
+function buildFeatureCollection(features) {
+  return {
+    type: "FeatureCollection",
+    features
+  };
+}
+var LayerGeoJson = ({
+  layerId,
+  data,
+  baseOpacity,
+  isMobile,
+  panesReady,
+  mapInstance,
+  fillPaneName,
+  pointsPaneName,
+  layerType,
+  styleFn,
+  onEachFeature,
+  onPolygonLabel
+}) => {
+  const safeData = useMemo(() => sanitizeGeoJson(data, String(layerId)), [data, layerId]);
+  const features = useMemo(() => safeData.features ?? [], [safeData]);
+  const fillFeatures = useMemo(() => features.filter(isNonPointGeometry), [features]);
+  const pointFeatures = useMemo(() => features.filter(isPointGeometry), [features]);
+  const dataVersionRef = useRef(0);
+  const prevSignatureRef = useRef("");
+  const firstId = features.length > 0 ? String(features[0]?.id ?? "") : "";
+  const lastId = features.length > 0 ? String(features[features.length - 1]?.id ?? "") : "";
+  const bbox = normalizeBboxFromData(safeData);
+  const idsSample = buildIdsSample(features);
+  const signature = bbox ? `${layerId}|${features.length}|${firstId}|${lastId}|${idsSample}|${bbox[0]}|${bbox[1]}|${bbox[2]}|${bbox[3]}` : `${layerId}|${features.length}|${firstId}|${lastId}|${idsSample}`;
+  const signatureToken = signature.replace(/[^a-zA-Z0-9_-]/g, "_");
+  if (prevSignatureRef.current !== signature) {
+    dataVersionRef.current += 1;
+    prevSignatureRef.current = signature;
+  }
+  const fillData = useMemo(() => fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null, [fillFeatures]);
+  const pointsData = useMemo(() => pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null, [pointFeatures]);
+  const clusterLayerRef = useRef(null);
+  const canCluster = typeof L.markerClusterGroup === "function";
+  const resolvedFillPane = useMemo(
+    () => ensurePaneName(mapInstance, fillPaneName, "overlayPane"),
+    [fillPaneName, mapInstance]
+  );
+  const resolvedPointsPane = useMemo(
+    () => ensurePaneName(mapInstance, pointsPaneName, "markerPane"),
+    [mapInstance, pointsPaneName]
+  );
+  useEffect(() => {
+    if (!mapInstance || !panesReady || !pointsData || !canCluster) return;
+    const markerClusterGroup = L.markerClusterGroup;
+    const clusterPaneName = resolvedPointsPane;
+    const clusterLayer = clusterLayerRef.current ?? markerClusterGroup({ pane: clusterPaneName, clusterPane: clusterPaneName });
+    clusterLayerRef.current = clusterLayer;
+    if (!mapInstance.hasLayer(clusterLayer)) {
+      mapInstance.addLayer(clusterLayer);
+    }
+    clusterLayer.clearLayers();
+    const geoJsonLayer = L.geoJSON(pointsData, {
+      pointToLayer: (feature, latlng) => {
+        if (!isValidLatLng(latlng)) {
+          return createInvisibleFallbackClusterMarker();
+        }
+        const style = styleFn(feature, layerType, baseOpacity);
+        return L.marker(latlng, {
+          icon: createPointDivIcon(style, isMobile),
+          pane: clusterPaneName,
+          interactive: true
+        });
+      },
+      onEachFeature
+    });
+    clusterLayer.addLayer(geoJsonLayer);
+    return () => {
+      clusterLayer.clearLayers();
+      if (mapInstance.hasLayer(clusterLayer)) {
+        mapInstance.removeLayer(clusterLayer);
+      }
+    };
+  }, [
+    baseOpacity,
+    canCluster,
+    isMobile,
+    layerType,
+    mapInstance,
+    onEachFeature,
+    panesReady,
+    pointsData,
+    resolvedPointsPane,
+    styleFn
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fillData && /* @__PURE__ */ jsx(
+      GeoJSON,
+      {
+        data: fillData,
+        pane: resolvedFillPane,
+        style: (feature) => styleFn(feature, layerType, baseOpacity),
+        onEachFeature: (feature, layer) => {
+          onEachFeature(feature, layer);
+          onPolygonLabel?.(feature, layer);
+        }
+      },
+      `fill-${layerId}-${signatureToken}-v${dataVersionRef.current}`
+    ),
+    pointsData && !canCluster && /* @__PURE__ */ jsx(
+      GeoJSON,
+      {
+        data: pointsData,
+        pane: resolvedPointsPane,
+        pointToLayer: (feature, latlng) => {
+          if (!isValidLatLng(latlng)) {
+            return createInvisibleFallbackMarker();
+          }
+          return L.circleMarker(latlng, {
+            radius: isMobile ? 8 : 6,
+            ...styleFn(feature, layerType, baseOpacity)
+          });
+        },
+        onEachFeature
+      },
+      `points-${layerId}-${signatureToken}-v${dataVersionRef.current}`
+    )
+  ] });
+};
+
+// src/react/map/location-control.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, 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 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 = useRef2(null);
+  const stopTracking = useCallback(() => {
+    if (watchIdRef.current !== null && typeof navigator !== "undefined" && navigator.geolocation) {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+    watchIdRef.current = null;
+    setIsTracking(false);
+  }, []);
+  const startTracking = useCallback(() => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) {
+      setError({ code: 0, message: "La geolocalizaci\xF3n no est\xE1 disponible en este navegador." });
+      return;
+    }
+    setError(null);
+    watchIdRef.current = navigator.geolocation.watchPosition(
+      (position) => {
+        setLocation({
+          lat: position.coords.latitude,
+          lon: position.coords.longitude,
+          accuracy: position.coords.accuracy
+        });
+        setIsTracking(true);
+      },
+      (err) => {
+        setError({ code: err.code, message: err.message });
+        stopTracking();
+      },
+      {
+        enableHighAccuracy: options?.enableHighAccuracy ?? true,
+        timeout: options?.timeout ?? 12e3,
+        maximumAge: options?.maximumAge ?? 0
+      }
+    );
+  }, [options?.enableHighAccuracy, options?.maximumAge, options?.timeout, stopTracking]);
+  const toggleTracking = useCallback(() => {
+    if (isTracking) {
+      stopTracking();
+    } else {
+      startTracking();
+    }
+  }, [isTracking, startTracking, stopTracking]);
+  const clearError = useCallback(() => setError(null), []);
+  useEffect2(() => {
+    return () => {
+      stopTracking();
+    };
+  }, [stopTracking]);
+  return {
+    isTracking,
+    location,
+    error,
+    startTracking,
+    stopTracking,
+    toggleTracking,
+    clearError
+  };
+}
+
+// src/react/map/map-utils.ts
+import L2 from "leaflet";
+var POPUP_STYLE_ID = "zenit-leaflet-popup-styles";
+var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry", "_private"]);
+var POPUP_TITLE_KEYS = ["id", "nombre", "name", "title", "titulo", "cluster"];
+var POPUP_BADGE_KEYS = ["tipo", "type", "category", "categoria", "estado", "status"];
+var POPUP_DESCRIPTION_KEYS = ["descripcion", "description", "desc"];
+var CURRENCY_KEYWORDS = [
+  "capital",
+  "monto",
+  "precio",
+  "costo",
+  "valor",
+  "ingreso",
+  "egreso",
+  "saldo",
+  "subtotal",
+  "venta",
+  "compra"
+];
+var DESKTOP_POPUP_DIMENSIONS = { maxWidth: 360, minWidth: 280, maxHeight: 520 };
+var MOBILE_POPUP_DIMENSIONS = { maxWidth: 300, minWidth: 240, maxHeight: 420 };
+var ZENIT_LEAFLET_POPUP_STYLES = `
+.custom-leaflet-popup .leaflet-popup-content-wrapper {
+  border-radius: 12px;
+  padding: 0;
+  background: #ffffff;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.custom-leaflet-popup .leaflet-popup-content {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: #0f172a;
+  max-height: min(70vh, 520px);
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
+}
+
+.custom-leaflet-popup .leaflet-popup-close-button {
+  color: #64748b;
+  font-size: 16px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.custom-leaflet-popup .leaflet-popup-close-button:hover {
+  color: #0f172a;
+  background: rgba(148, 163, 184, 0.2);
+}
+
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 999px;
+}
+
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@media (max-width: 640px) {
+  .custom-leaflet-popup .leaflet-popup-content {
+    font-size: 12px;
+    padding: 10px 12px;
+    max-height: min(65vh, 420px);
+  }
+
+  .custom-leaflet-popup .leaflet-popup-close-button {
+    font-size: 14px;
+    padding: 4px 6px;
+  }
+}
+
+.zenit-map-tooltip {
+  background-color: rgba(31, 41, 55, 0.95);
+  border: none;
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 6px 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.zenit-map-tooltip::before {
+  border-top-color: rgba(31, 41, 55, 0.95);
+}
+
+.polygon-label-tooltip {
+  background: rgba(15, 23, 42, 0.92);
+  border: none;
+  border-radius: 6px;
+  color: #f8fafc;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 4px 8px;
+}
+`;
+function clampNumber2(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampOpacity4(value) {
+  return clampNumber2(value, 0, 1);
+}
+function ensurePopupStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(POPUP_STYLE_ID)) return;
+  const styleTag = document.createElement("style");
+  styleTag.id = POPUP_STYLE_ID;
+  styleTag.textContent = ZENIT_LEAFLET_POPUP_STYLES;
+  document.head.appendChild(styleTag);
+}
+function getPopupDimensions() {
+  if (typeof window === "undefined") {
+    return DESKTOP_POPUP_DIMENSIONS;
+  }
+  const isSmallWidth = window.innerWidth < 640;
+  const isShortHeight = window.innerHeight < 768;
+  const base = isSmallWidth ? MOBILE_POPUP_DIMENSIONS : DESKTOP_POPUP_DIMENSIONS;
+  const maxHeight = isShortHeight ? Math.min(base.maxHeight, 360) : base.maxHeight;
+  return { ...base, maxHeight };
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function formatLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
+}
+function isHexColor(value) {
+  return /^#([0-9A-F]{3}){1,2}$/i.test(value.trim());
+}
+function isCurrencyField(key) {
+  const normalized = key.trim().toLowerCase();
+  return CURRENCY_KEYWORDS.some((keyword) => normalized.includes(keyword));
+}
+function formatCurrency(value) {
+  return new Intl.NumberFormat("es-GT", { style: "currency", currency: "GTQ" }).format(value);
+}
+function getBadgeForProperty(key, value) {
+  if (value === null || value === void 0) return null;
+  const normalizedKey = key.trim().toLowerCase();
+  const normalizedValue = String(value).trim().toLowerCase();
+  const byType = {
+    mora: { label: "Mora", bg: "#fee2e2", color: "#b91c1c", border: "#fecaca" },
+    castigo: { label: "Castigo", bg: "#ffedd5", color: "#c2410c", border: "#fed7aa" },
+    colocacion: { label: "Colocaci\xF3n", bg: "#dbeafe", color: "#1d4ed8", border: "#bfdbfe" },
+    sano: { label: "Sano", bg: "#dcfce7", color: "#15803d", border: "#bbf7d0" }
+  };
+  const byStatus = {
+    activo: { label: "Activo", bg: "#dcfce7", color: "#15803d", border: "#bbf7d0" },
+    inactivo: { label: "Inactivo", bg: "#fef9c3", color: "#a16207", border: "#fde68a" },
+    pendiente: { label: "Pendiente", bg: "#fef9c3", color: "#a16207", border: "#fde68a" },
+    cancelado: { label: "Cancelado", bg: "#fee2e2", color: "#b91c1c", border: "#fecaca" },
+    rechazado: { label: "Rechazado", bg: "#fee2e2", color: "#b91c1c", border: "#fecaca" }
+  };
+  if (["tipo", "type", "category", "categoria"].includes(normalizedKey)) {
+    return byType[normalizedValue] ?? {
+      label: String(value),
+      bg: "#e0e7ff",
+      color: "#4338ca",
+      border: "#c7d2fe"
+    };
+  }
+  if (["estado", "status"].includes(normalizedKey)) {
+    return byStatus[normalizedValue] ?? {
+      label: String(value),
+      bg: "#f1f5f9",
+      color: "#475569",
+      border: "#cbd5e1"
+    };
+  }
+  return null;
+}
+function findHeaderProperties(properties) {
+  const entries = Object.entries(properties);
+  const titleEntry = entries.find(
+    ([key, value]) => POPUP_TITLE_KEYS.includes(key.trim().toLowerCase()) && String(value ?? "").trim().length > 0
+  );
+  const badgeEntry = entries.find(
+    ([key, value]) => POPUP_BADGE_KEYS.includes(key.trim().toLowerCase()) && String(value ?? "").trim().length > 0
+  );
+  const descriptionEntry = entries.find(
+    ([key, value]) => POPUP_DESCRIPTION_KEYS.includes(key.trim().toLowerCase()) && String(value ?? "").trim().length > 0
+  );
+  return {
+    title: titleEntry ? { key: titleEntry[0], value: String(titleEntry[1]).trim() } : void 0,
+    badge: badgeEntry ? { key: badgeEntry[0], value: badgeEntry[1] } : void 0,
+    description: descriptionEntry ? { key: descriptionEntry[0], value: String(descriptionEntry[1]).trim() } : void 0
+  };
+}
+function renderPopupValue(value) {
+  if (value === null || value === void 0) return '<span style="color:#94a3b8;">Sin datos</span>';
+  if (value instanceof Date) {
+    return escapeHtml(value.toLocaleDateString("es-GT"));
+  }
+  if (typeof value === "number") {
+    return escapeHtml(value.toLocaleString("es-GT"));
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return '<span style="color:#94a3b8;">Sin datos</span>';
+    return escapeHtml(trimmed);
+  }
+  if (typeof value === "object") {
+    try {
+      return `<pre style="margin:0; white-space:pre-wrap; font-size:11px; background:#f8fafc; border:1px solid #e2e8f0; padding:6px 8px; border-radius:6px;">${escapeHtml(
+        JSON.stringify(value, null, 2)
+      )}</pre>`;
+    } catch {
+      return escapeHtml(String(value));
+    }
+  }
+  return escapeHtml(String(value));
+}
+function extractPopupHeader(properties) {
+  const header = findHeaderProperties(properties);
+  return header.title?.value ?? null;
+}
+function shouldIncludePopupEntry(key, value) {
+  if (!key) return false;
+  const normalized = key.trim().toLowerCase();
+  if (!normalized) return false;
+  if (normalized.startsWith("_")) return false;
+  if (POPUP_EXCLUDED_KEYS.has(normalized)) return false;
+  if (value === null || value === void 0) return false;
+  if (typeof value === "string" && !value.trim()) return false;
+  return true;
+}
+function createPopupContent(properties) {
+  const header = findHeaderProperties(properties);
+  const headerText = header.title?.value ?? extractPopupHeader(properties);
+  const usedKeys = new Set([header.title?.key, header.badge?.key, header.description?.key].filter(Boolean));
+  const badge = header.badge ? getBadgeForProperty(header.badge.key, header.badge.value) : null;
+  const colorValue = properties.color;
+  const colorBar = typeof colorValue === "string" && isHexColor(colorValue) ? `<div style="height:6px; border-radius:8px; margin:-2px -2px 10px; background:linear-gradient(90deg, ${colorValue}, rgba(255,255,255,0.95));"></div>` : "";
+  const entries = Object.entries(properties).filter(([key, value]) => {
+    if (!shouldIncludePopupEntry(key, value)) return false;
+    if (usedKeys.has(key)) return false;
+    return true;
+  });
+  if (entries.length === 0) {
+    return '<div style="padding:8px 0; color:#64748b; text-align:center;">Sin datos disponibles</div>';
+  }
+  const headerHtml = headerText || badge ? `<div style="display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:8px;">
+          <div style="font-weight:700; font-size:14px; color:#0f172a;">${escapeHtml(headerText ?? "Detalle")}</div>
+          ${badge ? `<span style="display:inline-flex; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:${badge.bg}; color:${badge.color}; border:1px solid ${badge.border}; white-space:nowrap;">${escapeHtml(
+    badge.label
+  )}</span>` : ""}
+        </div>` : "";
+  const descriptionHtml = header.description ? `<div style="margin-bottom:10px; padding:8px 10px; background:#f8fafc; border-left:3px solid #38bdf8; border-radius:6px; color:#334155; font-size:12px;">${escapeHtml(
+    header.description.value
+  )}</div>` : "";
+  const rowsHtml = entries.map(([key, value]) => {
+    const label = escapeHtml(formatLabel(key));
+    const normalizedKey = key.trim().toLowerCase();
+    let valueHtml = renderPopupValue(value);
+    if (typeof value === "number") {
+      valueHtml = isCurrencyField(normalizedKey) ? `<span style="color:#15803d; font-weight:700;">${escapeHtml(formatCurrency(value))}</span>` : `<span style="color:#0369a1; font-weight:600;">${escapeHtml(value.toLocaleString("es-GT"))}</span>`;
+    }
+    return `
+        <div style="display:grid; grid-template-columns:minmax(90px, 35%) 1fr; gap:8px; padding:6px 0; border-bottom:1px solid #e2e8f0;">
+          <div style="font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#64748b;">${label}</div>
+          <div style="font-size:13px; color:#0f172a; word-break:break-word;">${valueHtml}</div>
+        </div>
+      `;
+  }).join("");
+  return `<div>${colorBar}${headerHtml}${descriptionHtml}${rowsHtml}</div>`;
+}
+function isPolygonType(layerType, geometryType) {
+  const candidate = (layerType ?? geometryType ?? "").toLowerCase();
+  return candidate === "polygon" || candidate === "multipolygon";
+}
+function calculateZoomBasedOpacity(zoom, baseOpacity, layerType, geometryType) {
+  if (!isPolygonType(layerType, geometryType)) return clampOpacity4(baseOpacity);
+  const minZoom = 11;
+  const maxZoom = 15;
+  const minFactor = 0.5;
+  if (maxZoom <= minZoom) return clampOpacity4(baseOpacity * minFactor);
+  const t = clampNumber2((zoom - minZoom) / (maxZoom - minZoom), 0, 1);
+  const factor = 1 - (1 - minFactor) * t;
+  return clampOpacity4(baseOpacity * factor);
+}
+function layerStyleToLeaflet(options) {
+  const { baseOpacity, zoom, layerStyle, geometryType, layerType, properties } = options;
+  const sanitizedOpacity = clampOpacity4(baseOpacity);
+  const zoomOpacity = calculateZoomBasedOpacity(zoom, sanitizedOpacity, layerType, geometryType);
+  const badgeForType = getBadgeForProperty("type", properties?.type ?? properties?.tipo ?? properties?.category ?? properties?.categoria);
+  const badgeForStatus = getBadgeForProperty("status", properties?.status ?? properties?.estado);
+  const featureColor = (typeof properties?.color === "string" && properties.color.trim().length > 0 ? properties.color : void 0) ?? badgeForType?.color ?? badgeForStatus?.color;
+  const styleFillOpacity = typeof layerStyle?.fillOpacity === "number" ? clampOpacity4(layerStyle.fillOpacity) : 0.65;
+  const fallbackColor = "#2563eb";
+  const resolvedColor = featureColor ?? layerStyle?.color ?? layerStyle?.fillColor ?? fallbackColor;
+  const resolvedFillColor = featureColor ?? layerStyle?.fillColor ?? layerStyle?.color ?? fallbackColor;
+  return {
+    color: resolvedColor,
+    weight: layerStyle?.weight ?? 2,
+    fillColor: resolvedFillColor,
+    opacity: clampOpacity4(Math.max(0.35, zoomOpacity * 0.9)),
+    fillOpacity: clampOpacity4(zoomOpacity * styleFillOpacity)
+  };
+}
+function getRgbFromColor(color) {
+  const trimmed = color.trim();
+  if (trimmed.startsWith("#")) {
+    const hex = trimmed.replace("#", "");
+    const expanded = hex.length === 3 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
+    if (expanded.length === 6) {
+      const r = parseInt(expanded.slice(0, 2), 16);
+      const g = parseInt(expanded.slice(2, 4), 16);
+      const b = parseInt(expanded.slice(4, 6), 16);
+      return { r, g, b };
+    }
+  }
+  const rgbMatch = trimmed.match(/rgba?\(([^)]+)\)/i);
+  if (rgbMatch) {
+    const [r, g, b] = rgbMatch[1].split(",").map((value) => parseFloat(value.trim())).slice(0, 3);
+    if ([r, g, b].every((value) => Number.isFinite(value))) {
+      return { r, g, b };
+    }
+  }
+  return null;
+}
+function getLabelTextStyles(color) {
+  const rgb = getRgbFromColor(color);
+  if (!rgb) {
+    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.6)" };
+  }
+  const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+  if (luminance > 0.6) {
+    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.7)" };
+  }
+  return { color: "#ffffff", shadow: "0 1px 2px rgba(0, 0, 0, 0.4)" };
+}
+function withAlpha(color, alpha) {
+  const trimmed = color.trim();
+  if (trimmed.startsWith("#")) {
+    const hex = trimmed.replace("#", "");
+    const expanded = hex.length === 3 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
+    if (expanded.length === 6) {
+      const r = parseInt(expanded.slice(0, 2), 16);
+      const g = parseInt(expanded.slice(2, 4), 16);
+      const b = parseInt(expanded.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+  }
+  if (trimmed.startsWith("rgb(")) {
+    const inner = trimmed.slice(4, -1);
+    return `rgba(${inner}, ${alpha})`;
+  }
+  if (trimmed.startsWith("rgba(")) {
+    const inner = trimmed.slice(5, -1).split(",").slice(0, 3).map((value) => value.trim());
+    return `rgba(${inner.join(", ")}, ${alpha})`;
+  }
+  return color;
+}
+function createCustomIcon(label, opacity, color) {
+  const size = 60;
+  const innerSize = 44;
+  const textStyles = getLabelTextStyles(color);
+  const safeLabel = escapeHtml(label);
+  const clampedOpacity = Math.min(1, Math.max(0.92, opacity));
+  const innerBackground = withAlpha(color, 0.9);
+  return L2.divIcon({
+    className: "zenit-label-marker",
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    html: `
+      <div
+        title="${safeLabel}"
+        style="
+          width:${size}px;
+          height:${size}px;
+          border-radius:9999px;
+          background:rgba(255, 255, 255, 0.95);
+          border:3px solid rgba(255, 255, 255, 1);
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          opacity:${clampedOpacity};
+          box-shadow:0 2px 6px rgba(0, 0, 0, 0.25);
+          pointer-events:none;
+        "
+      >
+        <div
+          style="
+            width:${innerSize}px;
+            height:${innerSize}px;
+            border-radius:9999px;
+            background:${innerBackground};
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            box-shadow:inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+          "
+        >
+          <span
+            style="
+              color:${textStyles.color};
+              font-size:20px;
+              font-weight:800;
+              text-shadow:${textStyles.shadow};
+            "
+          >
+            ${safeLabel}
+          </span>
+        </div>
+      </div>
+    `
+  });
+}
+function createLocationIcon() {
+  return L2.divIcon({
+    className: "zenit-location-marker",
+    iconSize: [18, 18],
+    iconAnchor: [9, 9],
+    html: `
+      <div style="width:18px;height:18px;border-radius:9999px;background:#2563eb;border:2px solid #fff;box-shadow:0 0 0 4px rgba(37, 99, 235, 0.25);"></div>
+    `
+  });
+}
+
+// src/react/map/location-control.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LOCATION_STYLE_ID = "zenit-location-control-styles";
+var LOCATION_STYLES = `
+.zenit-location-control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.zenit-location-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: none;
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.zenit-location-button.zenit-location-button--tracking {
+  animation: zenitLocationPulse 1.8s infinite;
+}
+
+.zenit-location-button:hover {
+  background: #f8fafc;
+}
+
+.zenit-location-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
+}
+
+.zenit-location-error {
+  background: rgba(15, 23, 42, 0.92);
+  color: #f8fafc;
+  border-radius: 10px;
+  padding: 8px 10px;
+  font-size: 12px;
+  max-width: 200px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
+}
+
+@keyframes zenitLocationPulse {
+  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
+  70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+}
+`;
+var LocateIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "2", x2: "12", y2: "5" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "12", y2: "22" }),
+  /* @__PURE__ */ jsx2("line", { x1: "2", y1: "12", x2: "5", y2: "12" }),
+  /* @__PURE__ */ jsx2("line", { x1: "19", y1: "12", x2: "22", y2: "12" })
+] });
+var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
+  const map = useMap();
+  const controlRef = useRef3(null);
+  const hasCenteredRef = useRef3(false);
+  const { isTracking, location, error, toggleTracking, clearError } = useGeolocation();
+  useEffect3(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(LOCATION_STYLE_ID)) return;
+    const styleTag = document.createElement("style");
+    styleTag.id = LOCATION_STYLE_ID;
+    styleTag.textContent = LOCATION_STYLES;
+    document.head.appendChild(styleTag);
+  }, []);
+  useEffect3(() => {
+    const control = L3.control({ position });
+    control.onAdd = () => {
+      const container = L3.DomUtil.create("div", "zenit-location-control");
+      L3.DomEvent.disableClickPropagation(container);
+      controlRef.current = container;
+      return container;
+    };
+    control.addTo(map);
+    return () => {
+      control.remove();
+      controlRef.current = null;
+    };
+  }, [map, position]);
+  useEffect3(() => {
+    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 = useMemo2(() => createLocationIcon(), []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    controlRef.current && createPortal(
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            className: `zenit-location-button${isTracking ? " zenit-location-button--tracking" : ""}`,
+            onClick: () => {
+              if (error) {
+                clearError();
+              }
+              toggleTracking();
+            },
+            "aria-label": isTracking ? "Detener ubicaci\xF3n" : "Mostrar mi ubicaci\xF3n",
+            children: [
+              /* @__PURE__ */ jsx2(LocateIcon, {}),
+              error && /* @__PURE__ */ jsx2("span", { className: "zenit-location-badge", children: "!" })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx2("div", { className: "zenit-location-error", children: error.message || "No se pudo acceder a tu ubicaci\xF3n." })
+      ] }),
+      controlRef.current
+    ),
+    location && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(Marker, { position: [location.lat, location.lon], icon: markerIcon }),
+      /* @__PURE__ */ jsx2(
+        Circle,
+        {
+          center: [location.lat, location.lon],
+          radius: location.accuracy,
+          pathOptions: { color: "#2563eb", fillColor: "#2563eb", fillOpacity: 0.15 }
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/react/map/map-handlers.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useMap as useMap2 } from "react-leaflet";
+var MapInvalidator = ({ trigger }) => {
+  const map = useMap2();
+  const lastTrigger = useRef4(void 0);
+  useEffect4(() => {
+    if (lastTrigger.current === trigger) return;
+    lastTrigger.current = trigger;
+    requestAnimationFrame(() => {
+      map.invalidateSize();
+    });
+  }, [map, trigger]);
+  return null;
+};
+function computeBBoxFromGeojson(geojson) {
+  if (!geojson || !Array.isArray(geojson.features)) return null;
+  const coords = [];
+  const collect = (candidate) => {
+    if (!Array.isArray(candidate)) return;
+    if (candidate.length === 2 && typeof candidate[0] === "number" && typeof candidate[1] === "number" && Number.isFinite(candidate[0]) && Number.isFinite(candidate[1])) {
+      coords.push([candidate[0], candidate[1]]);
+      return;
+    }
+    candidate.forEach((item) => collect(item));
+  };
+  geojson.features.forEach((feature) => {
+    collect(feature.geometry?.coordinates);
+  });
+  if (coords.length === 0) return null;
+  const [firstLon, firstLat] = coords[0];
+  const bbox = { minLon: firstLon, minLat: firstLat, maxLon: firstLon, maxLat: firstLat };
+  coords.forEach(([lon, lat]) => {
+    bbox.minLon = Math.min(bbox.minLon, lon);
+    bbox.minLat = Math.min(bbox.minLat, lat);
+    bbox.maxLon = Math.max(bbox.maxLon, lon);
+    bbox.maxLat = Math.max(bbox.maxLat, lat);
+  });
+  return bbox;
+}
+function mergeBBoxes(bboxes) {
+  const valid = bboxes.filter((bbox) => !!bbox);
+  if (valid.length === 0) return null;
+  const first = valid[0];
+  return valid.slice(1).reduce(
+    (acc, bbox) => ({
+      minLon: Math.min(acc.minLon, bbox.minLon),
+      minLat: Math.min(acc.minLat, bbox.minLat),
+      maxLon: Math.max(acc.maxLon, bbox.maxLon),
+      maxLat: Math.max(acc.maxLat, bbox.maxLat)
+    }),
+    { ...first }
+  );
+}
+var BBoxZoomHandler = ({
+  bbox,
+  geojson,
+  autoGeojson = [],
+  enabled = true
+}) => {
+  const map = useMap2();
+  const lastAppliedBBox = useRef4(null);
+  const lastUserInteracted = useRef4(false);
+  useEffect4(() => {
+    const handleInteraction = () => {
+      lastUserInteracted.current = true;
+    };
+    map.on("dragstart", handleInteraction);
+    map.on("zoomstart", handleInteraction);
+    return () => {
+      map.off("dragstart", handleInteraction);
+      map.off("zoomstart", handleInteraction);
+    };
+  }, [map]);
+  useEffect4(() => {
+    if (!enabled) return;
+    let resolvedBBox = bbox ?? null;
+    if (!resolvedBBox && geojson) {
+      resolvedBBox = computeBBoxFromGeojson(geojson);
+    }
+    if (!resolvedBBox && autoGeojson.length > 0) {
+      const bboxes = autoGeojson.map((collection) => computeBBoxFromGeojson(collection));
+      resolvedBBox = mergeBBoxes(bboxes);
+    }
+    if (!resolvedBBox) return;
+    const serialized = JSON.stringify(resolvedBBox);
+    if (lastAppliedBBox.current === serialized) return;
+    if (lastUserInteracted.current && !bbox && !geojson) {
+      lastUserInteracted.current = false;
+      return;
+    }
+    const bounds = [
+      [resolvedBBox.minLat, resolvedBBox.minLon],
+      [resolvedBBox.maxLat, resolvedBBox.maxLon]
+    ];
+    map.fitBounds(bounds, { padding: [12, 12] });
+    lastAppliedBBox.current = serialized;
+  }, [autoGeojson, bbox, enabled, geojson, map]);
+  return null;
+};
+var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
+  const map = useMap2();
+  useEffect4(() => {
+    const handleZoom = () => {
+      onZoomChange(map.getZoom());
+    };
+    map.on("zoomend", handleZoom);
+    handleZoom();
+    return () => {
+      map.off("zoomend", handleZoom);
+    };
+  }, [map, onZoomChange]);
+  return null;
+};
+var MapInstanceBridge = ({ onReady }) => {
+  const map = useMap2();
+  useEffect4(() => {
+    onReady(map);
+  }, [map, onReady]);
+  return null;
+};
+
+// src/react/ZenitMap.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_CENTER = [0, 0];
+var DEFAULT_ZOOM = 3;
+var LABELS_PANE_NAME = "zenit-labels-pane";
+var DEV_MODE2 = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function isGeoJsonFeatureCollection(value) {
+  if (!isRecord(value)) return false;
+  const features = value.features;
+  if (!Array.isArray(features)) return false;
+  const type = value.type;
+  return type === void 0 || type === "FeatureCollection";
+}
+function extractGeoJsonFeatureCollection(value) {
+  if (isRecord(value) && "data" in value) {
+    const data = value.data;
+    return isGeoJsonFeatureCollection(data) ? data : null;
+  }
+  return isGeoJsonFeatureCollection(value) ? value : null;
+}
+function getFeatureLayerId(feature) {
+  const layerId = feature?.properties?.__zenit_layerId ?? feature?.properties?.layerId ?? feature?.properties?.layer_id;
+  if (layerId === void 0 || layerId === null) return null;
+  return layerId;
+}
+var DESCRIPTION_KEYS = /* @__PURE__ */ new Set(["descripcion", "description"]);
+var POINT_GEOMETRY_TYPES2 = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
+var POLYGON_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Polygon", "MultiPolygon"]);
+function normalizeDescriptionValue(value) {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return null;
+}
+function extractDescriptionValue(properties) {
+  if (!properties) return null;
+  const matches = Object.entries(properties).find(
+    ([key]) => DESCRIPTION_KEYS.has(key.toLowerCase())
+  );
+  if (!matches) return null;
+  return normalizeDescriptionValue(matches[1]);
+}
+function normalizeLayerId(value) {
+  if (value === null || value === void 0) return null;
+  const normalized = String(value).trim();
+  return normalized ? normalized : null;
+}
+function isLayerIdMatch(a, b) {
+  const normalizedA = normalizeLayerId(a);
+  const normalizedB = normalizeLayerId(b);
+  return normalizedA !== null && normalizedB !== null && normalizedA === normalizedB;
+}
+function getClickIntent(params) {
+  const geometryType = params.feature?.geometry?.type;
+  if (geometryType && POINT_GEOMETRY_TYPES2.has(geometryType)) return "point";
+  if (params.leafletLayer instanceof L4.Marker) return "point";
+  if (geometryType && POLYGON_GEOMETRY_TYPES.has(geometryType)) return "polygon";
+  if (params.leafletLayer instanceof L4.Path) return "polygon";
+  return "unknown";
+}
+function candidateLayerId(candidate) {
+  return getFeatureLayerId(candidate);
+}
+function isCandidateGeometryType(candidate, allowedTypes) {
+  const geometryType = candidate?.geometry?.type;
+  return Boolean(geometryType && allowedTypes.has(geometryType));
+}
+function getFeatureStyleOverrides(feature) {
+  const candidate = feature?.properties?._style;
+  if (!candidate || typeof candidate !== "object" || Array.isArray(candidate)) return null;
+  const styleCandidate = candidate;
+  return {
+    color: styleCandidate.color,
+    weight: styleCandidate.weight,
+    fillColor: styleCandidate.fillColor,
+    fillOpacity: styleCandidate.fillOpacity
+  };
+}
+function buildFeaturePopupHtml(feature) {
+  const properties = feature?.properties;
+  if (!properties) return null;
+  const rendered = createPopupContent(properties);
+  return rendered ? rendered : null;
+}
+function pickIntersectFeature(params) {
+  const { baseFeature, candidates, expectedLayerId, clickIntent } = params;
+  if (!Array.isArray(candidates) || candidates.length === 0) return null;
+  const pickByGeometry = (pool, intent) => {
+    const preferredTypes = intent === "point" ? POINT_GEOMETRY_TYPES2 : intent === "polygon" ? POLYGON_GEOMETRY_TYPES : null;
+    if (!preferredTypes) return null;
+    const found = pool.find((candidate) => isCandidateGeometryType(candidate, preferredTypes));
+    if (!found) return null;
+    return { feature: found, reason: `geometry:${intent}` };
+  };
+  const getResult = (feature, reason) => ({
+    feature,
+    selectedIdx: candidates.findIndex((candidate) => candidate === feature),
+    reason
+  });
+  const sameLayer = candidates.filter(
+    (candidate) => isLayerIdMatch(candidateLayerId(candidate), expectedLayerId)
+  );
+  const geometryFromSameLayer = pickByGeometry(sameLayer, clickIntent);
+  if (geometryFromSameLayer?.feature) {
+    return getResult(geometryFromSameLayer.feature, `sameLayer>${geometryFromSameLayer.reason}`);
+  }
+  if (sameLayer.length > 0) {
+    const sameLayerWithDescription = sameLayer.find(
+      (candidate) => extractDescriptionValue(candidate?.properties)
+    );
+    if (sameLayerWithDescription) {
+      return getResult(sameLayerWithDescription, "sameLayer>description");
+    }
+  }
+  const geometryFallback = pickByGeometry(candidates, clickIntent);
+  if (geometryFallback?.feature) {
+    return getResult(geometryFallback.feature, `anyLayer>${geometryFallback.reason}`);
+  }
+  const baseId = baseFeature?.id;
+  if (baseId !== void 0 && baseId !== null) {
+    const matchById = candidates.find((candidate) => candidate?.id === baseId);
+    if (matchById) return getResult(matchById, "fallback>baseId");
+  }
+  const matchWithDescription = candidates.find(
+    (candidate) => extractDescriptionValue(candidate?.properties)
+  );
+  if (matchWithDescription) return getResult(matchWithDescription, "fallback>description");
+  return getResult(candidates[0], "fallback>first");
+}
+function normalizeCenterTuple(center) {
+  if (!center) return null;
+  if (Array.isArray(center) && center.length >= 2) {
+    const lat = center[0];
+    const lon = center[1];
+    if (typeof lat === "number" && typeof lon === "number") return [lat, lon];
+    return null;
+  }
+  const maybeObj = center;
+  if (typeof maybeObj.lat === "number" && typeof maybeObj.lon === "number") {
+    return [maybeObj.lat, maybeObj.lon];
+  }
+  return null;
+}
+var ZenitMap = forwardRef(({
+  client,
+  mapId,
+  height = "500px",
+  width = "100%",
+  initialZoom,
+  initialCenter,
+  showLayerPanel = true,
+  overlayGeojson,
+  overlayStyle,
+  layerControls,
+  layerStates,
+  layerGeojson,
+  onLayerStateChange,
+  onError,
+  onLoadingChange,
+  onFeatureClick,
+  onFeatureHover,
+  featureInfoMode = "popup",
+  mapLayers,
+  zoomToBbox,
+  zoomToGeojson,
+  onZoomChange,
+  onMapReady
+}, ref) => {
+  const [map, setMap] = useState2(null);
+  const [layers, setLayers] = useState2([]);
+  const [effectiveStates, setEffectiveStates] = useState2([]);
+  const [loadingMap, setLoadingMap] = useState2(false);
+  const [mapError, setMapError] = useState2(null);
+  const [mapInstance, setMapInstance] = useState2(null);
+  const [layerGeojsonOverrides, setLayerGeojsonOverrides] = useState2({});
+  const originalGeojsonByLayerIdRef = useRef5({});
+  const [panesReady, setPanesReady] = useState2(false);
+  const [currentZoom, setCurrentZoom] = useState2(initialZoom ?? DEFAULT_ZOOM);
+  const [isPopupOpen, setIsPopupOpen] = useState2(false);
+  const [isMobile, setIsMobile] = useState2(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(max-width: 768px)").matches;
+  });
+  const normalizedLayers = useMemo3(() => normalizeMapLayers(map), [map]);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(max-width: 768px)");
+    const onChange = (e) => {
+      setIsMobile(e.matches);
+    };
+    setIsMobile(mql.matches);
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    }
+    const legacy = mql;
+    if (typeof legacy.addListener === "function") {
+      legacy.addListener(onChange);
+      return () => legacy.removeListener(onChange);
+    }
+    return;
+  }, []);
+  useEffect5(() => {
+    if (featureInfoMode === "popup") {
+      ensurePopupStyles();
+    }
+  }, [featureInfoMode]);
+  useEffect5(() => {
+    if (featureInfoMode !== "popup") {
+      setIsPopupOpen(false);
+    }
+  }, [featureInfoMode]);
+  useEffect5(() => {
+    if (!mapInstance) return;
+    const popupPane = mapInstance.getPane("popupPane");
+    if (popupPane) {
+      popupPane.style.zIndex = "800";
+    }
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME) ?? mapInstance.createPane(LABELS_PANE_NAME);
+    labelsPane.style.zIndex = "600";
+  }, [mapInstance]);
+  useEffect5(() => {
+    if (!mapInstance) return;
+    const handlePopupOpen = () => setIsPopupOpen(true);
+    const handlePopupClose = () => setIsPopupOpen(false);
+    mapInstance.on("popupopen", handlePopupOpen);
+    mapInstance.on("popupclose", handlePopupClose);
+    return () => {
+      mapInstance.off("popupopen", handlePopupOpen);
+      mapInstance.off("popupclose", handlePopupClose);
+    };
+  }, [mapInstance]);
+  const layerStyleIndex = useMemo3(() => {
+    const index = /* @__PURE__ */ new Map();
+    (map?.mapLayers ?? []).forEach((entry) => {
+      const layerStyle = entry.layer?.style ?? entry.mapLayer?.layer?.style ?? entry.style ?? null;
+      const layerId = entry.layerId ?? entry.mapLayer?.layerId ?? entry.mapLayer?.layer?.id ?? entry.layer?.id;
+      if (layerId !== void 0 && layerId !== null && layerStyle) {
+        index.set(String(layerId), layerStyle);
+      }
+    });
+    return index;
+  }, [map]);
+  const labelKeyIndex = useMemo3(() => {
+    const index = /* @__PURE__ */ new Map();
+    normalizedLayers.forEach((entry) => {
+      const label = entry.layer?.label ?? entry.mapLayer?.label ?? entry.mapLayer.layerConfig?.label;
+      if (typeof label === "string" && label.trim().length > 0) {
+        index.set(String(entry.layerId), label);
+      }
+    });
+    return index;
+  }, [normalizedLayers]);
+  const layerMetaIndex = useMemo3(() => {
+    const index = /* @__PURE__ */ new Map();
+    normalizedLayers.forEach((entry) => {
+      index.set(String(entry.layerId), {
+        layerType: typeof entry.layer?.layerType === "string" ? entry.layer.layerType : typeof entry.mapLayer.layerType === "string" ? entry.mapLayer.layerType : void 0,
+        geometryType: typeof entry.layer?.geometryType === "string" ? entry.layer.geometryType : typeof entry.mapLayer.layerConfig?.geometryType === "string" ? entry.mapLayer.layerConfig.geometryType : void 0
+      });
+    });
+    return index;
+  }, [normalizedLayers]);
+  const overlayStyleFunction = useMemo3(() => {
+    return (feature) => {
+      const featureLayerId = getFeatureLayerId(feature);
+      const featureStyleOverrides = getFeatureStyleOverrides(feature);
+      let style = null;
+      if (featureLayerId !== null) {
+        style = getStyleByLayerId(featureLayerId, mapLayers) ?? layerStyleIndex.get(String(featureLayerId)) ?? null;
+      }
+      const resolvedStyle = featureStyleOverrides ? { ...style ?? {}, ...featureStyleOverrides } : style;
+      const defaultOptions = {
+        color: resolvedStyle?.color ?? resolvedStyle?.fillColor ?? "#2563eb",
+        weight: resolvedStyle?.weight ?? 2,
+        fillColor: resolvedStyle?.fillColor ?? resolvedStyle?.color ?? "#2563eb",
+        fillOpacity: resolvedStyle?.fillOpacity ?? 0.15,
+        ...overlayStyle ?? {}
+      };
+      return defaultOptions;
+    };
+  }, [layerStyleIndex, mapLayers, overlayStyle]);
+  const overlayStyleFn = useCallback2(
+    (feature, _layerType, _baseOpacity) => overlayStyleFunction(feature),
+    [overlayStyleFunction]
+  );
+  const [baseStates, setBaseStates] = useState2([]);
+  const [mapOverrides, setMapOverrides] = useState2([]);
+  const [controlOverrides, setControlOverrides] = useState2([]);
+  const [uiOverrides, setUiOverrides] = useState2([]);
+  useEffect5(() => {
+    let isMounted = true;
+    setLoadingMap(true);
+    setMapError(null);
+    onLoadingChange?.("map", true);
+    client.maps.getMap(mapId, true).then((mapResponse) => {
+      if (!isMounted) return;
+      const extracted = extractMapDto(mapResponse);
+      const resolved = extracted ? normalizeMapCenter(extracted) : null;
+      setMap(resolved);
+    }).catch((err) => {
+      if (!isMounted) return;
+      setMapError(err instanceof Error ? err.message : "No se pudo obtener el mapa");
+      onError?.(err, "map");
+    }).finally(() => {
+      if (!isMounted) return;
+      setLoadingMap(false);
+      onLoadingChange?.("map", false);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [client.maps, mapId, onError, onLoadingChange]);
+  useEffect5(() => {
+    if (normalizedLayers.length === 0) {
+      setLayers([]);
+      setBaseStates([]);
+      setMapOverrides([]);
+      setUiOverrides([]);
+      return;
+    }
+    const nextLayers = normalizedLayers.map((entry) => ({
+      mapLayer: { ...entry.mapLayer, layerId: entry.layerId },
+      layer: entry.layer,
+      displayOrder: entry.displayOrder
+    }));
+    const base = initLayerStates(
+      normalizedLayers.map((entry) => ({
+        ...entry.mapLayer,
+        layerId: entry.layerId,
+        opacity: entry.opacity,
+        isVisible: entry.isVisible
+      }))
+    );
+    const initialOverrides = normalizedLayers.map((entry) => ({
+      layerId: entry.layerId,
+      overrideVisible: entry.isVisible,
+      overrideOpacity: entry.opacity
+    }));
+    setLayers(nextLayers);
+    setBaseStates(base);
+    setMapOverrides(initialOverrides);
+    setUiOverrides([]);
+  }, [normalizedLayers]);
+  useEffect5(() => {
+    if (!layerControls) {
+      setControlOverrides([]);
+      return;
+    }
+    const overrides = layerControls.map((entry) => ({
+      layerId: entry.layerId,
+      overrideVisible: entry.visible,
+      overrideOpacity: entry.opacity
+    }));
+    setControlOverrides(overrides);
+  }, [layerControls]);
+  useEffect5(() => {
+    if (layerStates) {
+      return;
+    }
+    if (Array.isArray(layerControls) && layerControls.length === 0 && effectiveStates.length > 0) {
+      const reset = resetOverrides(baseStates);
+      setEffectiveStates(reset);
+      onLayerStateChange?.(reset);
+    }
+  }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
+  useEffect5(() => {
+    if (layerStates) {
+      setEffectiveStates(layerStates);
+    }
+  }, [layerStates]);
+  useEffect5(() => {
+    if (layerStates) {
+      return;
+    }
+    if (mapOverrides.length === 0 && controlOverrides.length === 0 && uiOverrides.length === 0) {
+      setEffectiveStates(baseStates);
+      return;
+    }
+    const combined = [...mapOverrides, ...controlOverrides, ...uiOverrides];
+    const next = applyLayerOverrides(baseStates, combined);
+    setEffectiveStates(next);
+    onLayerStateChange?.(next);
+  }, [baseStates, controlOverrides, layerStates, mapOverrides, onLayerStateChange, uiOverrides]);
+  useEffect5(() => {
+    if (!Array.isArray(layerControls) || layerControls.length > 0) return;
+    setUiOverrides([]);
+  }, [layerControls]);
+  useEffect5(() => {
+    if (layerStates) {
+      return;
+    }
+    if (!Array.isArray(layerControls) && effectiveStates.length > 0 && baseStates.length > 0) {
+      const next = resetOverrides(baseStates);
+      setEffectiveStates(next);
+      onLayerStateChange?.(next);
+    }
+  }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
+  const upsertUiOverride = (layerId, patch) => {
+    setUiOverrides((prev) => {
+      const filtered = prev.filter((entry) => entry.layerId !== layerId);
+      const nextEntry = {
+        layerId,
+        ...patch
+      };
+      return [...filtered, nextEntry];
+    });
+  };
+  const updateOpacityFromUi = useCallback2(
+    (layerId, uiOpacity) => {
+      const meta = layerMetaIndex.get(String(layerId));
+      const baseOpacity = clampOpacity3(uiOpacity);
+      const effectiveOpacity = calculateZoomBasedOpacity(
+        currentZoom,
+        baseOpacity,
+        meta?.layerType,
+        meta?.geometryType
+      );
+      if (layerStates && onLayerStateChange) {
+        const next = effectiveStates.map(
+          (state) => state.layerId === layerId ? {
+            ...state,
+            baseOpacity,
+            opacity: effectiveOpacity,
+            overrideOpacity: uiOpacity
+          } : state
+        );
+        onLayerStateChange(next);
+        return;
+      }
+      setBaseStates(
+        (prev) => prev.map((state) => state.layerId === layerId ? { ...state, baseOpacity } : state)
+      );
+      setUiOverrides((prev) => {
+        const existing = prev.find((entry) => entry.layerId === layerId);
+        const filtered = prev.filter((entry) => entry.layerId !== layerId);
+        if (existing && existing.overrideVisible !== void 0) {
+          return [
+            ...filtered,
+            { layerId, overrideVisible: existing.overrideVisible }
+          ];
+        }
+        return filtered;
+      });
+    },
+    [currentZoom, effectiveStates, layerMetaIndex, layerStates, onLayerStateChange]
+  );
+  const center = useMemo3(() => {
+    if (initialCenter) {
+      return initialCenter;
+    }
+    const normalized = normalizeCenterTuple(map?.settings?.center);
+    if (normalized) {
+      return normalized;
+    }
+    return DEFAULT_CENTER;
+  }, [initialCenter, map?.settings?.center]);
+  const zoom = initialZoom ?? map?.settings?.zoom ?? DEFAULT_ZOOM;
+  useEffect5(() => {
+    setCurrentZoom(zoom);
+  }, [zoom]);
+  useEffect5(() => {
+    if (!layerGeojson) return;
+    layers.forEach((layer) => {
+      const layerKey = String(layer.mapLayer.layerId);
+      const incoming = layerGeojson[layer.mapLayer.layerId] ?? layerGeojson[layerKey] ?? null;
+      if (incoming && !originalGeojsonByLayerIdRef.current[layerKey]) {
+        originalGeojsonByLayerIdRef.current[layerKey] = incoming;
+      }
+    });
+  }, [layerGeojson, layers]);
+  const decoratedLayers = useMemo3(() => {
+    return layers.map((layer) => {
+      const layerKey = String(layer.mapLayer.layerId);
+      const override = layerGeojsonOverrides[layerKey];
+      return {
+        ...layer,
+        effective: effectiveStates.find((state) => state.layerId === layer.mapLayer.layerId),
+        data: override ?? layerGeojson?.[layer.mapLayer.layerId] ?? layerGeojson?.[layerKey] ?? null
+      };
+    });
+  }, [effectiveStates, layerGeojson, layerGeojsonOverrides, layers]);
+  const orderedLayers = useMemo3(() => {
+    return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => a.displayOrder - b.displayOrder);
+  }, [decoratedLayers]);
+  const autoZoomGeojson = useMemo3(
+    () => orderedLayers.map((layer) => layer.data).filter((collection) => !!collection),
+    [orderedLayers]
+  );
+  const resolveLayerStyle = useCallback2(
+    (layerId) => {
+      return getStyleByLayerId(layerId, mapLayers) ?? layerStyleIndex.get(String(layerId)) ?? null;
+    },
+    [layerStyleIndex, mapLayers]
+  );
+  const labelMarkers = useMemo3(() => {
+    const markers = [];
+    decoratedLayers.forEach((layerState) => {
+      if (!layerState.effective?.visible) return;
+      const labelKey = labelKeyIndex.get(String(layerState.mapLayer.layerId));
+      if (!labelKey) return;
+      const data = layerState.data;
+      if (!data) return;
+      const resolvedStyle = resolveLayerStyle(layerState.mapLayer.layerId);
+      const layerColor = resolvedStyle?.fillColor ?? resolvedStyle?.color ?? "rgba(37, 99, 235, 1)";
+      const meta = layerMetaIndex.get(String(layerState.mapLayer.layerId));
+      const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
+      const opacity = calculateZoomBasedOpacity(
+        currentZoom,
+        baseOpacity,
+        meta?.layerType,
+        meta?.geometryType
+      );
+      data.features.forEach((feature, index) => {
+        const properties = feature.properties;
+        const value = properties?.[labelKey];
+        if (value === void 0 || value === null || value === "") return;
+        const bbox = computeBBoxFromFeature(feature);
+        if (!bbox) return;
+        const [lat, lng] = centroidFromBBox(bbox);
+        markers.push({
+          key: `${layerState.mapLayer.layerId}-label-${index}`,
+          position: [lat, lng],
+          label: String(value),
+          opacity,
+          layerId: layerState.mapLayer.layerId,
+          color: layerColor
+        });
+      });
+    });
+    return markers;
+  }, [currentZoom, decoratedLayers, labelKeyIndex, layerMetaIndex, resolveLayerStyle]);
+  const ensureLayerPanes = useCallback2(
+    (targetMap, targetLayers) => {
+      const fillBaseZIndex = 400;
+      const pointsBaseZIndex = 700;
+      targetLayers.forEach((layer) => {
+        const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
+        const orderOffset = Math.max(0, Math.min(order, 150));
+        const fillPaneName = `zenit-layer-${layer.layerId}-fill`;
+        const pointPaneName = `zenit-layer-${layer.layerId}-points`;
+        const fillPane = targetMap.getPane(fillPaneName) ?? targetMap.createPane(fillPaneName);
+        const pointPane = targetMap.getPane(pointPaneName) ?? targetMap.createPane(pointPaneName);
+        fillPane.style.zIndex = String(fillBaseZIndex + orderOffset);
+        pointPane.style.zIndex = String(pointsBaseZIndex + orderOffset);
+      });
+    },
+    []
+  );
+  const handleMapReady = useCallback2(
+    (instance) => {
+      setPanesReady(false);
+      setMapInstance(instance);
+      onMapReady?.(instance);
+    },
+    [onMapReady]
+  );
+  useEffect5(() => {
+    if (!mapInstance) {
+      setPanesReady(false);
+      return;
+    }
+    if (orderedLayers.length === 0 && !overlayGeojson) {
+      return;
+    }
+    const layerTargets = orderedLayers.map((layer) => ({
+      layerId: layer.mapLayer.layerId,
+      displayOrder: layer.displayOrder
+    }));
+    if (overlayGeojson) {
+      layerTargets.push({ layerId: "overlay-geojson", displayOrder: 999 });
+    }
+    ensureLayerPanes(mapInstance, layerTargets);
+    const first = layerTargets[0];
+    const testPane = first ? mapInstance.getPane(`zenit-layer-${first.layerId}-fill`) : null;
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME);
+    if (testPane && labelsPane) {
+      setPanesReady(true);
+    }
+  }, [mapInstance, orderedLayers, overlayGeojson, ensureLayerPanes]);
+  const overlayOnEachFeature = useCallback2((feature, layer) => {
+    const layerId = getFeatureLayerId(feature) ?? void 0;
+    const geometryType = feature?.geometry?.type;
+    const clickIntent = getClickIntent({ feature, leafletLayer: layer });
+    const isPointFeature = clickIntent === "point";
+    const originalStyle = layer instanceof L4.Path ? {
+      color: layer.options.color,
+      weight: layer.options.weight,
+      fillColor: layer.options.fillColor,
+      opacity: layer.options.opacity,
+      fillOpacity: layer.options.fillOpacity
+    } : null;
+    const originalRadius = layer instanceof L4.CircleMarker ? layer.getRadius() : null;
+    if (featureInfoMode === "popup") {
+      const content = buildFeaturePopupHtml(feature);
+      if (content) {
+        const { maxWidth, minWidth, maxHeight } = getPopupDimensions();
+        layer.bindPopup(content, {
+          maxWidth,
+          minWidth,
+          maxHeight,
+          className: "custom-leaflet-popup",
+          autoClose: true,
+          closeOnClick: true,
+          autoPan: true,
+          closeButton: true,
+          keepInView: true,
+          autoPanPadding: [50, 50]
+        });
+      }
+    }
+    if (isPointFeature && layer.bindTooltip) {
+      layer.bindTooltip("Click para ver detalle", {
+        sticky: true,
+        direction: "top",
+        opacity: 0.9,
+        className: "zenit-map-tooltip"
+      });
+    }
+    layer.on("click", () => {
+      if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
+        if (DEV_MODE2) {
+          console.debug("[ZenitMap] click/intersect:start", {
+            expectedLayerId: layerId,
+            geometryType,
+            clickIntent,
+            leafletLayerType: layer?.constructor?.name,
+            pane: layer?.options?.pane
+          });
+        }
+        const trackedFeature = feature;
+        if (!trackedFeature.__zenit_popup_loaded) {
+          trackedFeature.__zenit_popup_loaded = true;
+          client.layers.getLayerGeoJsonIntersect({
+            id: layerId,
+            geometry: feature.geometry
+          }).then((response) => {
+            const geo = extractGeoJsonFeatureCollection(response);
+            const candidates = geo?.features ?? [];
+            const selection = pickIntersectFeature({
+              baseFeature: feature,
+              candidates,
+              expectedLayerId: layerId,
+              clickIntent
+            });
+            const resolved = selection?.feature;
+            if (DEV_MODE2) {
+              console.debug("[ZenitMap] click/intersect:result", {
+                expectedLayerId: layerId,
+                clickIntent,
+                candidatesCount: candidates.length,
+                candidates: candidates.map((candidate, idx) => ({
+                  idx,
+                  geomType: candidate?.geometry?.type,
+                  candidateLayerId: candidateLayerId(candidate),
+                  hasDescription: Boolean(extractDescriptionValue(candidate?.properties))
+                })),
+                selectedIdx: selection?.selectedIdx ?? -1,
+                selectionRule: selection?.reason ?? "none"
+              });
+            }
+            if (!resolved?.properties) return;
+            const mergedProperties = {
+              ...trackedFeature.properties ?? {},
+              ...resolved.properties
+            };
+            trackedFeature.properties = mergedProperties;
+            const updatedHtml = buildFeaturePopupHtml({
+              ...feature,
+              properties: mergedProperties
+            });
+            if (updatedHtml && layer.setPopupContent) {
+              layer.setPopupContent(updatedHtml);
+            }
+          }).catch(() => {
+            trackedFeature.__zenit_popup_loaded = false;
+          });
+        }
+      }
+      onFeatureClick?.(feature, layerId);
+    });
+    layer.on("mouseover", () => {
+      if (layer instanceof L4.Path && originalStyle) {
+        layer.setStyle({
+          ...originalStyle,
+          weight: (originalStyle.weight ?? 2) + 1,
+          opacity: Math.min(1, (originalStyle.opacity ?? 1) + 0.2),
+          fillOpacity: Math.min(1, (originalStyle.fillOpacity ?? 0.8) + 0.1)
+        });
+      }
+      if (layer instanceof L4.CircleMarker && typeof originalRadius === "number") {
+        layer.setRadius(originalRadius + 1);
+      }
+      onFeatureHover?.(feature, layerId);
+    });
+    layer.on("mouseout", () => {
+      if (layer instanceof L4.Path && originalStyle) {
+        layer.setStyle(originalStyle);
+      }
+      if (layer instanceof L4.CircleMarker && typeof originalRadius === "number") {
+        layer.setRadius(originalRadius);
+      }
+    });
+  }, [client, featureInfoMode, onFeatureClick, onFeatureHover]);
+  const buildLayerStyle = useCallback2((layerId, baseOpacity, feature, layerType) => {
+    const style = resolveLayerStyle(layerId);
+    const featureStyleOverrides = getFeatureStyleOverrides(feature);
+    const resolvedStyle = featureStyleOverrides ? { ...style ?? {}, ...featureStyleOverrides } : style;
+    const geometryType = feature?.geometry?.type;
+    const resolvedLayerType = layerType ?? geometryType;
+    return layerStyleToLeaflet({
+      baseOpacity,
+      zoom: currentZoom,
+      layerStyle: resolvedStyle,
+      geometryType,
+      layerType: resolvedLayerType,
+      properties: feature?.properties ?? void 0
+    });
+  }, [currentZoom, resolveLayerStyle]);
+  const makeStyleFnForLayer = useCallback2((layerId) => {
+    return (feature, layerType, baseOpacity) => {
+      return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
+    };
+  }, [buildLayerStyle]);
+  useImperativeHandle(ref, () => ({
+    setLayerOpacity: (layerId, opacity) => {
+      upsertUiOverride(layerId, { overrideOpacity: opacity });
+    },
+    setLayerVisibility: (layerId, visible) => {
+      upsertUiOverride(layerId, { overrideVisible: visible });
+    },
+    fitBounds: (bbox, options) => {
+      if (!mapInstance) return;
+      if (typeof bbox.minLat !== "number" || typeof bbox.minLon !== "number" || typeof bbox.maxLat !== "number" || typeof bbox.maxLon !== "number" || !Number.isFinite(bbox.minLat) || !Number.isFinite(bbox.minLon) || !Number.isFinite(bbox.maxLat) || !Number.isFinite(bbox.maxLon)) {
+        console.warn("[ZenitMap.fitBounds] Invalid bbox: missing or non-finite coordinates", bbox);
+        return;
+      }
+      const bounds = [
+        [bbox.minLat, bbox.minLon],
+        [bbox.maxLat, bbox.maxLon]
+      ];
+      const fitOptions = {
+        padding: options?.padding ?? [12, 12],
+        animate: options?.animate ?? true
+      };
+      mapInstance.fitBounds(bounds, fitOptions);
+    },
+    fitToBbox: (bbox, padding) => {
+      if (!mapInstance) return;
+      if (typeof bbox.minLat !== "number" || typeof bbox.minLon !== "number" || typeof bbox.maxLat !== "number" || typeof bbox.maxLon !== "number" || !Number.isFinite(bbox.minLat) || !Number.isFinite(bbox.minLon) || !Number.isFinite(bbox.maxLat) || !Number.isFinite(bbox.maxLon)) {
+        console.warn("[ZenitMap.fitToBbox] Invalid bbox", bbox);
+        return;
+      }
+      const resolvedPadding = padding ?? (isMobile ? 40 : 24);
+      const bounds = L4.latLngBounds([bbox.minLat, bbox.minLon], [bbox.maxLat, bbox.maxLon]);
+      mapInstance.fitBounds(bounds, { padding: [resolvedPadding, resolvedPadding], animate: true });
+    },
+    fitToGeoJson: (fc, padding) => {
+      if (!mapInstance) return;
+      if (!fc?.features?.length) return;
+      const bounds = L4.geoJSON(fc).getBounds();
+      if (!bounds.isValid()) return;
+      const resolvedPadding = padding ?? (isMobile ? 40 : 24);
+      mapInstance.fitBounds(bounds, { padding: [resolvedPadding, resolvedPadding], animate: true });
+    },
+    setView: (coordinates, zoom2) => {
+      if (!mapInstance) return;
+      mapInstance.setView([coordinates.lat, coordinates.lon], zoom2 ?? mapInstance.getZoom(), {
+        animate: true
+      });
+    },
+    getLayerSnapshot: () => {
+      return effectiveStates.map((state) => ({
+        layerId: state.layerId,
+        visible: state.visible,
+        opacity: state.opacity
+      }));
+    },
+    restoreLayerSnapshot: (snapshot) => {
+      const overrides = snapshot.map((s) => ({
+        layerId: s.layerId,
+        overrideVisible: s.visible,
+        overrideOpacity: s.opacity
+      }));
+      setUiOverrides(overrides);
+    },
+    highlightFeature: (layerId, featureId) => {
+      upsertUiOverride(layerId, { overrideVisible: true, overrideOpacity: 1 });
+    },
+    updateLayerGeoJson: (layerId, featureCollection) => {
+      const layerKey = String(layerId);
+      setLayerGeojsonOverrides((prev) => ({ ...prev, [layerKey]: featureCollection }));
+    },
+    restoreLayerGeoJson: (layerId) => {
+      const layerKey = String(layerId);
+      const original = originalGeojsonByLayerIdRef.current[layerKey];
+      setLayerGeojsonOverrides((prev) => {
+        const next = { ...prev };
+        if (original) {
+          next[layerKey] = original;
+        } else {
+          delete next[layerKey];
+        }
+        return next;
+      });
+    },
+    getMapInstance: () => mapInstance
+  }), [effectiveStates, isMobile, mapInstance]);
+  if (loadingMap) {
+    return /* @__PURE__ */ jsx3("div", { style: { padding: 16, height, width }, children: "Cargando mapa..." });
+  }
+  if (mapError) {
+    return /* @__PURE__ */ jsxs3("div", { style: { padding: 16, height, width, color: "red" }, children: [
+      "Error al cargar mapa: ",
+      mapError
+    ] });
+  }
+  if (!map) {
+    return null;
+  }
+  const handleZoomChange = (zoomValue) => {
+    setCurrentZoom(zoomValue);
+    onZoomChange?.(zoomValue);
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        height,
+        width,
+        border: "1px solid #e2e8f0",
+        borderRadius: 4,
+        overflow: "hidden",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `zenit-map-shell${isPopupOpen ? " popup-open" : ""}`,
+            style: { flex: 1, position: "relative" },
+            children: /* @__PURE__ */ jsxs3(
+              MapContainer,
+              {
+                center,
+                zoom,
+                style: { height: "100%", width: "100%" },
+                scrollWheelZoom: true,
+                zoomControl: false,
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    TileLayer,
+                    {
+                      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      attribution: "\xA9 OpenStreetMap contributors"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(ZoomControl, { position: "topright" }),
+                  /* @__PURE__ */ jsx3(MapInstanceBridge, { onReady: handleMapReady }),
+                  /* @__PURE__ */ jsx3(MapInvalidator, { trigger: mapId }),
+                  /* @__PURE__ */ jsx3(
+                    BBoxZoomHandler,
+                    {
+                      bbox: zoomToBbox ?? void 0,
+                      geojson: zoomToGeojson ?? void 0,
+                      autoGeojson: autoZoomGeojson
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
+                  /* @__PURE__ */ jsx3(LocationControl, {}),
+                  orderedLayers.map((layerState) => {
+                    const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
+                    const fillPaneName = `zenit-layer-${layerState.mapLayer.layerId}-fill`;
+                    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(React4.Fragment, { children: [
+                      layerState.data && panesReady && /* @__PURE__ */ jsx3(
+                        LayerGeoJson,
+                        {
+                          layerId: layerState.mapLayer.layerId,
+                          data: layerState.data,
+                          baseOpacity,
+                          isMobile,
+                          panesReady,
+                          mapInstance,
+                          fillPaneName,
+                          pointsPaneName,
+                          layerType,
+                          styleFn: makeStyleFnForLayer(layerState.mapLayer.layerId),
+                          onEachFeature: overlayOnEachFeature,
+                          onPolygonLabel: labelKey ? (feature, layer) => {
+                            const geometryType = feature?.geometry?.type;
+                            if (geometryType !== "Polygon" && geometryType !== "MultiPolygon") return;
+                            const properties = feature?.properties;
+                            const value = properties?.[labelKey];
+                            if (!value || !layer.bindTooltip) return;
+                            layer.bindTooltip(String(value), {
+                              sticky: true,
+                              direction: "center",
+                              opacity: 0.9,
+                              className: "polygon-label-tooltip"
+                            });
+                          } : void 0
+                        }
+                      ),
+                      panesReady && mapInstance?.getPane(LABELS_PANE_NAME) ? labelMarkers.filter(
+                        (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
+                      ).map((marker) => /* @__PURE__ */ jsx3(
+                        Marker2,
+                        {
+                          position: marker.position,
+                          icon: createCustomIcon(marker.label, marker.opacity, marker.color),
+                          interactive: false,
+                          pane: LABELS_PANE_NAME
+                        },
+                        marker.key
+                      )) : null
+                    ] }, layerState.mapLayer.layerId.toString());
+                  }),
+                  overlayGeojson && panesReady && /* @__PURE__ */ jsx3(
+                    LayerGeoJson,
+                    {
+                      layerId: "overlay-geojson",
+                      data: overlayGeojson,
+                      baseOpacity: 1,
+                      isMobile,
+                      panesReady,
+                      mapInstance,
+                      fillPaneName: "zenit-overlay-fill",
+                      pointsPaneName: "zenit-overlay-points",
+                      styleFn: overlayStyleFn,
+                      onEachFeature: overlayOnEachFeature
+                    }
+                  )
+                ]
+              },
+              String(mapId)
+            )
+          }
+        ),
+        showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              width: 260,
+              borderLeft: "1px solid #e2e8f0",
+              padding: "12px 16px",
+              background: "#fafafa",
+              fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+              fontSize: 14,
+              overflowY: "auto"
+            },
+            children: [
+              overlayGeojson && panesReady && /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    border: "1px solid #bfdbfe",
+                    background: "#eff6ff",
+                    color: "#1e40af",
+                    padding: "8px 10px",
+                    borderRadius: 8,
+                    marginBottom: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Overlay activo" }),
+                    /* @__PURE__ */ jsxs3("div", { style: { fontSize: 13 }, children: [
+                      "GeoJSON externo con ",
+                      (overlayGeojson.features?.length ?? 0).toLocaleString(),
+                      " elementos."
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Capas" }),
+              decoratedLayers.map((layerState) => /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 10, marginBottom: 10 },
+                  children: [
+                    /* @__PURE__ */ jsxs3("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsx3(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: layerState.effective?.visible ?? false,
+                          onChange: (e) => {
+                            const visible = e.target.checked;
+                            upsertUiOverride(layerState.mapLayer.layerId, { overrideVisible: visible });
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3("span", { children: layerState.layer?.name ?? `Capa ${layerState.mapLayer.layerId}` })
+                    ] }),
+                    /* @__PURE__ */ jsxs3("div", { style: { marginTop: 8 }, children: [
+                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
+                        /* @__PURE__ */ jsx3("span", { style: { color: "#4a5568" }, children: "Opacidad" }),
+                        /* @__PURE__ */ jsxs3("span", { children: [
+                          Math.round((layerState.effective?.opacity ?? 1) * 100),
+                          "%"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx3(
+                        "input",
+                        {
+                          type: "range",
+                          min: 0,
+                          max: 1,
+                          step: 0.05,
+                          value: layerState.effective?.opacity ?? 1,
+                          onChange: (e) => {
+                            const value = Number(e.target.value);
+                            updateOpacityFromUi(layerState.mapLayer.layerId, value);
+                          },
+                          style: { width: "100%" }
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                layerState.mapLayer.layerId.toString()
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+ZenitMap.displayName = "ZenitMap";
+
+// src/react/ZenitLayerManager.tsx
+import React6, { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef6, useState as useState3 } from "react";
+
+// src/react/icons.tsx
+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 jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FLOAT_TOLERANCE = 1e-3;
+function areEffectiveStatesEqual(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every((state, index) => {
+    const other = b[index];
+    if (!other) return false;
+    const opacityDiff = Math.abs((state.opacity ?? 1) - (other.opacity ?? 1));
+    return String(state.layerId) === String(other.layerId) && (state.visible ?? false) === (other.visible ?? false) && opacityDiff <= FLOAT_TOLERANCE;
+  });
+}
+function getLayerColor2(style) {
+  if (!style) return "#94a3b8";
+  return style.fillColor ?? style.color ?? "#94a3b8";
+}
+function resolveDisplayOrder(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return 0;
+}
+var ZenitLayerManager = ({
+  client,
+  mapId,
+  side = "right",
+  className,
+  style,
+  height,
+  layerStates,
+  onLayerStatesChange,
+  mapZoom,
+  autoOpacityOnZoom = false,
+  autoOpacityConfig,
+  showUploadTab = true,
+  showLayerVisibilityIcon = true,
+  layerFeatureCounts,
+  mapLayers,
+  onApplyLayerFilter,
+  onClearLayerFilter
+}) => {
+  const [map, setMap] = useState3(null);
+  const [loadingMap, setLoadingMap] = useState3(false);
+  const [mapError, setMapError] = useState3(null);
+  const [layers, setLayers] = useState3([]);
+  const [activeTab, setActiveTab] = useState3("layers");
+  const [panelVisible, setPanelVisible] = useState3(true);
+  const [selectedFilterLayerId, setSelectedFilterLayerId] = useState3("");
+  const [selectedFilterField, setSelectedFilterField] = useState3("");
+  const [selectedFilterValue, setSelectedFilterValue] = useState3("");
+  const [catalogByLayerField, setCatalogByLayerField] = useState3({});
+  const [loadingCatalog, setLoadingCatalog] = useState3(false);
+  const [applyingFilter, setApplyingFilter] = useState3(false);
+  const [filterError, setFilterError] = useState3(null);
+  const [appliedFilter, setAppliedFilter] = useState3(null);
+  const catalogAbortRef = useRef6(null);
+  const lastEmittedStatesRef = useRef6(null);
+  const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
+  const baseStates = useMemo4(
+    () => initLayerStates(
+      layers.map((entry) => ({
+        ...entry.mapLayer,
+        layerId: entry.mapLayer.layerId,
+        isVisible: entry.visible,
+        opacity: entry.opacity
+      }))
+    ),
+    [layers]
+  );
+  const overrideStates = useMemo4(
+    () => layers.map(
+      (entry) => ({
+        layerId: entry.mapLayer.layerId,
+        overrideVisible: entry.visible,
+        overrideOpacity: entry.opacity
+      })
+    ),
+    [layers]
+  );
+  const effectiveStates = useMemo4(
+    () => layerStates ?? applyLayerOverrides(baseStates, overrideStates),
+    [baseStates, layerStates, overrideStates]
+  );
+  const layerMetaIndex = useMemo4(() => {
+    const index = /* @__PURE__ */ new Map();
+    mapLayers?.forEach((entry) => {
+      const key = String(entry.layerId);
+      index.set(key, { layerType: entry.layerType ?? void 0, geometryType: entry.geometryType ?? void 0 });
+    });
+    map?.mapLayers?.forEach((entry) => {
+      const key = String(entry.layerId);
+      if (!index.has(key)) {
+        index.set(key, { layerType: entry.layerType ?? void 0, geometryType: entry.geometryType ?? void 0 });
+      }
+    });
+    return index;
+  }, [map, mapLayers]);
+  const resolveUserOpacity = React6.useCallback((state) => {
+    if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
+    if (typeof state.overrideOpacity === "string") {
+      const parsed = Number.parseFloat(state.overrideOpacity);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    return state.opacity ?? 1;
+  }, []);
+  const resolveEffectiveOpacity = React6.useCallback(
+    (layerId, userOpacity) => {
+      if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
+        return userOpacity;
+      }
+      const meta = layerMetaIndex.get(String(layerId));
+      return getEffectiveLayerOpacity(
+        userOpacity,
+        mapZoom,
+        meta?.layerType,
+        meta?.geometryType,
+        autoOpacityConfig
+      );
+    },
+    [autoOpacityConfig, autoOpacityOnZoom, layerMetaIndex, mapZoom]
+  );
+  const effectiveStatesWithZoom = useMemo4(() => {
+    if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
+      return effectiveStates;
+    }
+    return effectiveStates.map((state) => {
+      const userOpacity = resolveUserOpacity(state);
+      const adjustedOpacity = resolveEffectiveOpacity(state.layerId, userOpacity);
+      return {
+        ...state,
+        opacity: adjustedOpacity,
+        overrideOpacity: userOpacity
+      };
+    });
+  }, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
+  useEffect6(() => {
+    let cancelled = false;
+    setLoadingMap(true);
+    setMapError(null);
+    setLayers([]);
+    client.maps.getMap(mapId, true).then((mapResponse) => {
+      if (cancelled) return;
+      const extractedMap = extractMapDto(mapResponse);
+      const resolvedMap = extractedMap ? normalizeMapCenter(extractedMap) : null;
+      setMap(resolvedMap);
+      const normalizedLayers = normalizeMapLayers(resolvedMap);
+      setLayers(
+        normalizedLayers.map((entry, index) => ({
+          mapLayer: { ...entry.mapLayer, layerId: entry.layerId },
+          layer: entry.layer,
+          visible: entry.isVisible,
+          opacity: entry.opacity,
+          displayOrder: entry.displayOrder,
+          initialIndex: index
+        }))
+      );
+    }).catch((err) => {
+      if (cancelled) return;
+      const message = err instanceof Error ? err.message : "No se pudo cargar el mapa";
+      setMapError(message);
+    }).finally(() => {
+      if (!cancelled) setLoadingMap(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client.maps, mapId]);
+  useEffect6(() => {
+    if (!showUploadTab && activeTab === "upload") {
+      setActiveTab("layers");
+    }
+  }, [activeTab, showUploadTab]);
+  useEffect6(() => {
+    if (isControlled) return;
+    if (!onLayerStatesChange) return;
+    const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
+    const previous = lastEmittedStatesRef.current;
+    if (previous && areEffectiveStatesEqual(previous, emitStates)) {
+      return;
+    }
+    lastEmittedStatesRef.current = emitStates;
+    onLayerStatesChange(emitStates);
+  }, [
+    autoOpacityOnZoom,
+    effectiveStates,
+    effectiveStatesWithZoom,
+    isControlled,
+    mapZoom,
+    onLayerStatesChange
+  ]);
+  const updateLayerVisible = React6.useCallback(
+    (layerId, visible) => {
+      if (!onLayerStatesChange) return;
+      const next = effectiveStates.map(
+        (state) => state.layerId === layerId ? { ...state, visible, overrideVisible: visible } : state
+      );
+      onLayerStatesChange(next);
+    },
+    [effectiveStates, onLayerStatesChange]
+  );
+  const updateLayerOpacity = React6.useCallback(
+    (layerId, opacity) => {
+      if (!onLayerStatesChange) return;
+      const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
+      const next = effectiveStates.map(
+        (state) => state.layerId === layerId ? { ...state, opacity: adjustedOpacity, overrideOpacity: opacity } : state
+      );
+      onLayerStatesChange(next);
+    },
+    [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
+  );
+  const resolveFeatureCount = React6.useCallback(
+    (layerId, layer) => {
+      const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
+      if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
+      const featureCount = layer?.featuresCount ?? layer?.featureCount ?? layer?.totalFeatures;
+      return typeof featureCount === "number" ? featureCount : null;
+    },
+    [layerFeatureCounts]
+  );
+  const decoratedLayers = useMemo4(() => {
+    return layers.map((entry) => ({
+      ...entry,
+      effective: effectiveStates.find((state) => state.layerId === entry.mapLayer.layerId),
+      featureCount: resolveFeatureCount(entry.mapLayer.layerId, entry.layer),
+      layerName: entry.layer?.name ?? entry.mapLayer.name ?? `Capa ${entry.mapLayer.layerId}`
+    })).sort((a, b) => {
+      const aOrder = resolveDisplayOrder(
+        a.displayOrder ?? a.mapLayer.displayOrder ?? a.mapLayer.order
+      );
+      const bOrder = resolveDisplayOrder(
+        b.displayOrder ?? b.mapLayer.displayOrder ?? b.mapLayer.order
+      );
+      const aHasOrder = a.displayOrder ?? a.mapLayer.displayOrder ?? a.mapLayer.order ?? null;
+      const bHasOrder = b.displayOrder ?? b.mapLayer.displayOrder ?? b.mapLayer.order ?? null;
+      if (aHasOrder !== null && bHasOrder !== null) {
+        const orderCompare = aOrder - bOrder;
+        if (orderCompare !== 0) return orderCompare;
+      }
+      const aInitial = a.initialIndex ?? 0;
+      const bInitial = b.initialIndex ?? 0;
+      if (aInitial !== bInitial) return aInitial - bInitial;
+      const aName = a.layerName ?? String(a.mapLayer.layerId);
+      const bName = b.layerName ?? String(b.mapLayer.layerId);
+      const nameCompare = aName.localeCompare(bName, void 0, { sensitivity: "base" });
+      if (nameCompare !== 0) return nameCompare;
+      return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
+    });
+  }, [effectiveStates, layers, resolveFeatureCount]);
+  const hasPrefilters = useMemo4(() => {
+    const candidates = [...mapLayers ?? [], ...map?.mapLayers ?? []];
+    return candidates.some((layer) => {
+      const record = layer;
+      const applied = record.appliedFilters ?? record.prefilters ?? record.initialFilters ?? record.filters ?? (record.layerConfig?.appliedFilters ?? record.layerConfig?.prefilters);
+      return !!applied && typeof applied === "object" && Object.keys(applied).length > 0;
+    });
+  }, [map?.mapLayers, mapLayers]);
+  const filterableLayers = useMemo4(() => {
+    return decoratedLayers.filter((entry) => {
+      const prefilters = entry.mapLayer.layerConfig?.prefilters;
+      return !!prefilters && Object.keys(prefilters).length > 0;
+    });
+  }, [decoratedLayers]);
+  const selectedFilterLayer = useMemo4(
+    () => filterableLayers.find((layer) => String(layer.mapLayer.layerId) === selectedFilterLayerId) ?? null,
+    [filterableLayers, selectedFilterLayerId]
+  );
+  const filterFields = useMemo4(() => {
+    const prefilters = selectedFilterLayer?.mapLayer.layerConfig?.prefilters;
+    return prefilters ? Object.keys(prefilters) : [];
+  }, [selectedFilterLayer]);
+  const activeCatalogKey = selectedFilterLayer ? `${selectedFilterLayer.mapLayer.layerId}:${selectedFilterField}` : null;
+  const activeCatalogValues = activeCatalogKey ? catalogByLayerField[activeCatalogKey] ?? [] : [];
+  const extractCatalogValues = React6.useCallback((catalogData, field) => {
+    const values = /* @__PURE__ */ new Set();
+    const pushValue = (value) => {
+      if (value === null || value === void 0) return;
+      const normalized = String(value).trim();
+      if (normalized) values.add(normalized);
+    };
+    if (catalogData && typeof catalogData === "object") {
+      const maybeRecord = catalogData;
+      const directField = maybeRecord[field];
+      if (Array.isArray(directField)) {
+        directField.forEach(pushValue);
+      }
+      const items = maybeRecord.items;
+      if (Array.isArray(items)) {
+        items.forEach((item) => {
+          if (!item || typeof item !== "object") return;
+          const row = item;
+          const rowField = row.field;
+          if (String(rowField ?? "").toUpperCase() === field.toUpperCase() && Array.isArray(row.values)) {
+            row.values.forEach(pushValue);
+          }
+        });
+      }
+      const features = maybeRecord.features;
+      if (Array.isArray(features)) {
+        features.forEach((feature) => {
+          if (!feature || typeof feature !== "object") return;
+          const properties = feature.properties;
+          if (properties && field in properties) {
+            pushValue(properties[field]);
+          }
+        });
+      }
+    }
+    return [...values].sort((a, b) => a.localeCompare(b, void 0, { sensitivity: "base" }));
+  }, []);
+  useEffect6(() => {
+    if (!filterableLayers.length) {
+      setSelectedFilterLayerId("");
+      return;
+    }
+    if (!selectedFilterLayerId || !filterableLayers.some((layer) => String(layer.mapLayer.layerId) === selectedFilterLayerId)) {
+      setSelectedFilterLayerId(String(filterableLayers[0].mapLayer.layerId));
+    }
+  }, [filterableLayers, selectedFilterLayerId]);
+  useEffect6(() => {
+    if (!filterFields.length) {
+      setSelectedFilterField("");
+      return;
+    }
+    if (!selectedFilterField || !filterFields.includes(selectedFilterField)) {
+      setSelectedFilterField(filterFields[0]);
+      setSelectedFilterValue("");
+    }
+  }, [filterFields, selectedFilterField]);
+  useEffect6(() => {
+    if (hasPrefilters && activeTab === "filters") {
+      setActiveTab("layers");
+    }
+  }, [activeTab, hasPrefilters]);
+  useEffect6(() => {
+    if (activeTab !== "filters") return;
+    if (!selectedFilterLayer || !selectedFilterField || !activeCatalogKey) return;
+    if (catalogByLayerField[activeCatalogKey]) return;
+    catalogAbortRef.current?.abort();
+    const controller = new AbortController();
+    catalogAbortRef.current = controller;
+    setLoadingCatalog(true);
+    setFilterError(null);
+    client.layers.getLayerFeaturesCatalog(selectedFilterLayer.mapLayer.layerId).then((response) => {
+      if (controller.signal.aborted) return;
+      const values = extractCatalogValues(response.data, selectedFilterField);
+      setCatalogByLayerField((prev) => ({ ...prev, [activeCatalogKey]: values }));
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      const message = error instanceof Error ? error.message : "No se pudo cargar el cat\xE1logo";
+      setFilterError(message);
+    }).finally(() => {
+      if (!controller.signal.aborted) setLoadingCatalog(false);
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [activeCatalogKey, activeTab, catalogByLayerField, client.layers, extractCatalogValues, selectedFilterField, selectedFilterLayer]);
+  const handleApplyFilter = React6.useCallback(async () => {
+    if (!selectedFilterLayer || !selectedFilterField || !selectedFilterValue || !onApplyLayerFilter) return;
+    setApplyingFilter(true);
+    setFilterError(null);
+    try {
+      await onApplyLayerFilter({
+        layerId: selectedFilterLayer.mapLayer.layerId,
+        field: selectedFilterField,
+        value: selectedFilterValue
+      });
+      setAppliedFilter({
+        layerId: selectedFilterLayer.mapLayer.layerId,
+        field: selectedFilterField,
+        value: selectedFilterValue
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "No se pudo aplicar el filtro";
+      setFilterError(message);
+    } finally {
+      setApplyingFilter(false);
+    }
+  }, [onApplyLayerFilter, selectedFilterField, selectedFilterLayer, selectedFilterValue]);
+  const handleClearFilter = React6.useCallback(async () => {
+    if (!selectedFilterLayer) return;
+    setApplyingFilter(true);
+    setFilterError(null);
+    try {
+      await onClearLayerFilter?.({ layerId: selectedFilterLayer.mapLayer.layerId, field: selectedFilterField || void 0 });
+      setSelectedFilterValue("");
+      setAppliedFilter(null);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "No se pudo limpiar el filtro";
+      setFilterError(message);
+    } finally {
+      setApplyingFilter(false);
+    }
+  }, [onClearLayerFilter, selectedFilterField, selectedFilterLayer]);
+  const resolveLayerStyle = React6.useCallback(
+    (layerId) => {
+      const layerKey = String(layerId);
+      const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
+      if (fromProp) return fromProp;
+      const fromMapDto = map?.mapLayers?.find((entry) => String(entry.layerId) === layerKey);
+      if (fromMapDto?.layer) {
+        const layer = fromMapDto.layer;
+        if (layer.style) return layer.style;
+      }
+      return void 0;
+    },
+    [map, mapLayers]
+  );
+  const panelStyle = {
+    width: 360,
+    borderLeft: side === "right" ? "1px solid #e2e8f0" : void 0,
+    borderRight: side === "left" ? "1px solid #e2e8f0" : void 0,
+    background: "#f1f5f9",
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: 14,
+    boxSizing: "border-box",
+    height: height ?? "100%",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 12px 28px rgba(15, 23, 42, 0.08)",
+    ...style,
+    ...height ? { height } : {}
+  };
+  if (loadingMap) {
+    return /* @__PURE__ */ jsx5("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
+  }
+  if (mapError) {
+    return /* @__PURE__ */ jsxs5("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
+      "Error al cargar mapa: ",
+      mapError
+    ] });
+  }
+  if (!map) {
+    return null;
+  }
+  const headerStyle = {
+    padding: "14px 16px",
+    borderBottom: "1px solid #e2e8f0",
+    background: "#fff",
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
+  };
+  const renderLayerCards = () => {
+    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;
+      const userOpacity = layerState.effective ? resolveUserOpacity(layerState.effective) : 1;
+      const featureCount = layerState.featureCount;
+      const layerColor = getLayerColor2(resolveLayerStyle(layerId));
+      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__ */ jsxs5(
+        "div",
+        {
+          className: `zlm-card${muted ? " is-muted" : ""}`,
+          style: {
+            border: "1px solid #e2e8f0",
+            borderRadius: 12,
+            padding: 12,
+            background: "#fff",
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+            width: "100%"
+          },
+          children: [
+            /* @__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: {
+                      width: 14,
+                      height: 14,
+                      borderRadius: "50%",
+                      backgroundColor: layerColor,
+                      border: "2px solid #e2e8f0",
+                      flexShrink: 0,
+                      marginTop: 4
+                    },
+                    title: "Color de la capa"
+                  }
+                ),
+                showLayerVisibilityIcon && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: `zlm-icon-button${visible ? " is-active" : ""}`,
+                    onClick: () => isControlled ? updateLayerVisible(layerId, !visible) : setLayers(
+                      (prev) => prev.map(
+                        (entry) => entry.mapLayer.layerId === layerId ? { ...entry, visible: !visible } : entry
+                      )
+                    ),
+                    "aria-label": visible ? "Ocultar capa" : "Mostrar capa",
+                    children: visible ? /* @__PURE__ */ jsx5(Eye, { size: 16 }) : /* @__PURE__ */ jsx5(EyeOff, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs5("div", { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      className: "zlm-layer-name",
+                      style: {
+                        fontWeight: 700,
+                        display: "-webkit-box",
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                        overflowWrap: "anywhere",
+                        lineHeight: 1.2,
+                        color: muted ? "#64748b" : "#0f172a"
+                      },
+                      title: layerName,
+                      children: layerName
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs5("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
+                    "ID ",
+                    layerId
+                  ] })
+                ] })
+              ] }),
+              /* @__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__ */ 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__ */ jsx5(
+                "input",
+                {
+                  className: "zlm-range",
+                  type: "range",
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  value: userOpacity,
+                  style: {
+                    width: "100%",
+                    accentColor: layerColor,
+                    background: sliderBackground,
+                    height: 6,
+                    borderRadius: 999
+                  },
+                  onChange: (e) => {
+                    const value = Number(e.target.value);
+                    if (isControlled) {
+                      updateLayerOpacity(layerId, value);
+                      return;
+                    }
+                    setLayers(
+                      (prev) => prev.map(
+                        (entry) => entry.mapLayer.layerId === layerId ? { ...entry, opacity: value } : entry
+                      )
+                    );
+                  },
+                  "aria-label": `Opacidad de la capa ${layerName}`
+                }
+              )
+            ] }) })
+          ]
+        },
+        layerId.toString()
+      );
+    }) });
+  };
+  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);
+          }
+          .zenit-layer-manager .zlm-card.is-muted {
+            opacity: 0.7;
+          }
+          .zenit-layer-manager .zlm-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            margin-top: 6px;
+            padding: 2px 8px;
+            border-radius: 999px;
+            background: #f1f5f9;
+            color: #475569;
+            font-size: 11px;
+            font-weight: 600;
+          }
+          .zenit-layer-manager .zlm-icon-button {
+            border: 1px solid #e2e8f0;
+            background: #f8fafc;
+            color: #475569;
+            border-radius: 8px;
+            width: 34px;
+            height: 34px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.15s ease;
+          }
+          .zenit-layer-manager .zlm-icon-button.is-active {
+            background: #0f172a;
+            color: #fff;
+            border-color: #0f172a;
+          }
+          .zenit-layer-manager .zlm-icon-button:hover {
+            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
+          }
+          .zenit-layer-manager .zlm-icon-button:focus-visible {
+            outline: 2px solid #60a5fa;
+            outline-offset: 2px;
+          }
+          .zenit-layer-manager .zlm-range {
+            width: 100%;
+            accent-color: #0f172a;
+          }
+          .zenit-layer-manager .zlm-tab {
+            flex: 1;
+            padding: 8px 12px;
+            border: none;
+            background: transparent;
+            color: #475569;
+            font-weight: 600;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            font-size: 13px;
+          }
+          .zenit-layer-manager .zlm-tab.is-active {
+            background: #fff;
+            color: #0f172a;
+            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+            border-radius: 10px;
+          }
+          .zenit-layer-manager .zlm-tab:focus-visible {
+            outline: 2px solid #60a5fa;
+            outline-offset: 2px;
+          }
+          .zenit-layer-manager .zlm-panel-toggle {
+            border: 1px solid #e2e8f0;
+            background: #fff;
+            color: #0f172a;
+            border-radius: 10px;
+            padding: 6px 10px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.15s ease;
+          }
+          .zenit-layer-manager .zlm-panel-toggle:hover {
+            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
+          }
+          .zenit-layer-manager .zlm-panel-toggle:focus-visible {
+            outline: 2px solid #60a5fa;
+            outline-offset: 2px;
+          }
+        ` }),
+    /* @__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__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            onClick: () => setPanelVisible((prev) => !prev),
+            className: "zlm-panel-toggle",
+            "aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
+            children: [
+              panelVisible ? /* @__PURE__ */ jsx5(Eye, { size: 16 }) : /* @__PURE__ */ jsx5(EyeOff, { size: 16 }),
+              panelVisible ? "Ocultar" : "Mostrar"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: 6,
+            marginTop: 12,
+            padding: 4,
+            border: "1px solid #e2e8f0",
+            borderRadius: 12,
+            background: "#f1f5f9"
+          },
+          children: [
+            /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
+                onClick: () => setActiveTab("layers"),
+                children: [
+                  /* @__PURE__ */ jsx5(Layers, { size: 16 }),
+                  "Capas"
+                ]
+              }
+            ),
+            showUploadTab && /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
+                onClick: () => setActiveTab("upload"),
+                children: [
+                  /* @__PURE__ */ jsx5(Upload, { size: 16 }),
+                  "Subir"
+                ]
+              }
+            ),
+            !hasPrefilters && /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: `zlm-tab${activeTab === "filters" ? " is-active" : ""}`,
+                onClick: () => setActiveTab("filters"),
+                children: [
+                  /* @__PURE__ */ jsx5(Layers, { size: 16 }),
+                  "Filtros"
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    panelVisible && /* @__PURE__ */ jsxs5("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
+      hasPrefilters && /* @__PURE__ */ jsx5("div", { className: "zlm-badge", style: { marginBottom: 10 }, children: "Este mapa ya incluye filtros preaplicados" }),
+      activeTab === "layers" && renderLayerCards(),
+      !hasPrefilters && 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__ */ 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__ */ jsxs5("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
+          "Campo",
+          /* @__PURE__ */ jsx5(
+            ZenitSelect,
+            {
+              ariaLabel: "Seleccionar campo de filtrado",
+              value: selectedFilterField,
+              onValueChange: (nextField) => {
+                setSelectedFilterField(nextField);
+                setSelectedFilterValue("");
+              },
+              options: filterFields.map((field) => ({ value: field, label: field }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
+          "Valor",
+          /* @__PURE__ */ jsx5(
+            ZenitSelect,
+            {
+              ariaLabel: "Seleccionar valor de filtrado",
+              value: selectedFilterValue,
+              placeholder: "Seleccionar\u2026",
+              onValueChange: (nextValue) => setSelectedFilterValue(nextValue),
+              disabled: loadingCatalog || activeCatalogValues.length === 0,
+              options: activeCatalogValues.map((catalogValue) => ({
+                value: catalogValue,
+                label: catalogValue
+              }))
+            }
+          )
+        ] }),
+        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__ */ jsxs5("div", { className: "zlm-filter-actions", style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "zlm-panel-toggle",
+              disabled: !selectedFilterValue || applyingFilter || !onApplyLayerFilter,
+              onClick: handleApplyFilter,
+              children: applyingFilter ? "Aplicando\u2026" : "Aplicar"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "zlm-panel-toggle",
+              disabled: applyingFilter,
+              onClick: handleClearFilter,
+              children: "Limpiar"
+            }
+          )
+        ] })
+      ] }) }),
+      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 jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ZenitFeatureFilterPanel = ({
+  title = "Filtros",
+  description,
+  className,
+  style,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      className,
+      style: {
+        border: "1px solid #e2e8f0",
+        borderRadius: 12,
+        padding: 16,
+        background: "#fff",
+        fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        ...style
+      },
+      children: [
+        /* @__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__ */ jsx6("div", { children })
+      ]
+    }
+  );
+};
+
+// src/react/ai/FloatingChatBox.tsx
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef8, useState as useState5 } from "react";
+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";
+
+// src/ai/chat.service.ts
+var DEFAULT_ERROR_MESSAGE = "No fue posible completar la solicitud al asistente.";
+var normalizeBaseUrl = (baseUrl) => baseUrl.replace(/\/$/, "");
+var resolveBaseUrl = (config, options) => {
+  const baseUrl = options?.baseUrl ?? config?.baseUrl;
+  if (!baseUrl) {
+    throw new Error("baseUrl es requerido para usar el chat de Zenit AI.");
+  }
+  return normalizeBaseUrl(baseUrl);
+};
+var resolveAccessToken = async (config, options) => {
+  if (options?.accessToken) return options.accessToken;
+  if (config?.accessToken) return config.accessToken;
+  if (options?.getAccessToken) return await options.getAccessToken();
+  if (config?.getAccessToken) return await config.getAccessToken();
+  return void 0;
+};
+var buildAuthHeaders = (token) => {
+  if (!token) return {};
+  return { Authorization: `Bearer ${token}` };
+};
+var parseError = async (response) => {
+  try {
+    const contentType = response.headers.get("content-type") ?? "";
+    if (contentType.includes("application/json")) {
+      const payload = await response.json();
+      const message = payload?.message ?? DEFAULT_ERROR_MESSAGE;
+      return new Error(message);
+    }
+    const text = await response.text();
+    return new Error(text || DEFAULT_ERROR_MESSAGE);
+  } catch (error) {
+    return error instanceof Error ? error : new Error(DEFAULT_ERROR_MESSAGE);
+  }
+};
+var sendMessage = async (mapId, request, options, config) => {
+  const baseUrl = resolveBaseUrl(config, options);
+  const token = await resolveAccessToken(config, options);
+  const response = await fetch(`${baseUrl}/ai/maps/chat/${mapId}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...buildAuthHeaders(token)
+    },
+    body: JSON.stringify(request),
+    signal: options?.signal
+  });
+  if (!response.ok) {
+    throw await parseError(response);
+  }
+  return await response.json();
+};
+var mergeResponse = (previous, chunk, aggregatedAnswer) => ({
+  ...previous ?? chunk,
+  ...chunk,
+  answer: aggregatedAnswer
+});
+var resolveAggregatedAnswer = (current, incoming) => {
+  if (!incoming) return current;
+  if (incoming.startsWith(current)) return incoming;
+  return current + incoming;
+};
+var sendMessageStream = async (mapId, request, callbacks = {}, options, config) => {
+  const baseUrl = resolveBaseUrl(config, options);
+  const token = await resolveAccessToken(config, options);
+  const response = await fetch(`${baseUrl}/ai/maps/chat/${mapId}/stream`, {
+    method: "POST",
+    headers: {
+      Accept: "text/event-stream",
+      "Content-Type": "application/json",
+      ...buildAuthHeaders(token)
+    },
+    body: JSON.stringify(request),
+    signal: options?.signal
+  });
+  if (!response.ok) {
+    const error = await parseError(response);
+    callbacks.onError?.(error);
+    throw error;
+  }
+  const reader = response.body?.getReader();
+  if (!reader) {
+    const error = new Error("No se pudo iniciar el streaming de Zenit AI.");
+    callbacks.onError?.(error);
+    throw error;
+  }
+  const decoder = new TextDecoder("utf-8");
+  let buffer = "";
+  let aggregated = "";
+  let latestResponse = null;
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split(/\r?\n/);
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith("event:")) continue;
+        if (!trimmed.startsWith("data:")) continue;
+        const payload = trimmed.replace(/^data:\s*/, "");
+        if (!payload || payload === "[DONE]") continue;
+        try {
+          const parsed = JSON.parse(payload);
+          aggregated = resolveAggregatedAnswer(aggregated, parsed.answer ?? "");
+          latestResponse = mergeResponse(latestResponse, parsed, aggregated);
+          if (latestResponse) {
+            callbacks.onChunk?.(latestResponse, aggregated);
+          }
+        } catch (error) {
+          callbacks.onError?.(error);
+        }
+      }
+    }
+  } catch (error) {
+    callbacks.onError?.(error);
+    throw error;
+  }
+  if (!latestResponse) {
+    const error = new Error(DEFAULT_ERROR_MESSAGE);
+    callbacks.onError?.(error);
+    throw error;
+  }
+  callbacks.onComplete?.(latestResponse);
+  return latestResponse;
+};
+var createChatService = (config) => ({
+  sendMessage: (mapId, request, options) => sendMessage(mapId, request, options, config),
+  sendMessageStream: (mapId, request, callbacks, options) => sendMessageStream(mapId, request, callbacks, options, config)
+});
+
+// src/react/hooks/use-chat.ts
+var useSendMessage = (config) => {
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const send = useCallback3(
+    async (mapId, request, options) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await sendMessage(mapId, request, options, config);
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [config]
+  );
+  return { sendMessage: send, isLoading, error };
+};
+var useSendMessageStream = (config) => {
+  const [isStreaming, setIsStreaming] = useState4(false);
+  const [streamingText, setStreamingText] = useState4("");
+  const [completeResponse, setCompleteResponse] = useState4(null);
+  const [error, setError] = useState4(null);
+  const requestIdRef = useRef7(0);
+  const reset = useCallback3(() => {
+    setIsStreaming(false);
+    setStreamingText("");
+    setCompleteResponse(null);
+    setError(null);
+  }, []);
+  const send = useCallback3(
+    async (mapId, request, options) => {
+      const requestId = requestIdRef.current + 1;
+      requestIdRef.current = requestId;
+      setIsStreaming(true);
+      setStreamingText("");
+      setCompleteResponse(null);
+      setError(null);
+      try {
+        const response = await sendMessageStream(
+          mapId,
+          request,
+          {
+            onChunk: (_chunk, aggregated) => {
+              if (requestIdRef.current !== requestId) return;
+              setStreamingText(aggregated);
+            },
+            onError: (err) => {
+              if (requestIdRef.current !== requestId) return;
+              setError(err);
+            },
+            onComplete: (finalResponse) => {
+              if (requestIdRef.current !== requestId) return;
+              setCompleteResponse(finalResponse);
+            }
+          },
+          options,
+          config
+        );
+        return response;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        if (requestIdRef.current === requestId) {
+          setIsStreaming(false);
+        }
+      }
+    },
+    [config]
+  );
+  return {
+    sendMessage: send,
+    isStreaming,
+    streamingText,
+    completeResponse,
+    error,
+    reset
+  };
+};
+
+// src/react/components/MarkdownRenderer.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function normalizeAssistantMarkdown(text) {
+  if (!text || typeof text !== "string") return "";
+  let normalized = text;
+  normalized = normalized.replace(/\r\n/g, "\n");
+  normalized = normalized.replace(/^\s*#{1,6}\s*$/gm, "");
+  normalized = normalized.replace(/\n{3,}/g, "\n\n");
+  normalized = normalized.split("\n").map((line) => line.trimEnd()).join("\n");
+  normalized = normalized.trim();
+  return normalized;
+}
+var MarkdownRenderer = ({ content, className }) => {
+  const normalizedContent = normalizeAssistantMarkdown(content);
+  if (!normalizedContent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx7(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        // Headings with proper spacing
+        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__ */ jsx7("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
+        // Lists with proper indentation
+        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__ */ jsx7(
+              "code",
+              {
+                style: {
+                  backgroundColor: "rgba(0, 0, 0, 0.08)",
+                  padding: "0.15em 0.4em",
+                  borderRadius: "4px",
+                  fontSize: "0.9em",
+                  fontFamily: "monospace"
+                },
+                ...props,
+                children
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx7(
+            "code",
+            {
+              style: {
+                display: "block",
+                backgroundColor: "rgba(0, 0, 0, 0.08)",
+                padding: "0.75em",
+                borderRadius: "6px",
+                fontSize: "0.9em",
+                fontFamily: "monospace",
+                overflowX: "auto",
+                marginTop: "0.5em",
+                marginBottom: "0.5em"
+              },
+              ...props,
+              children
+            }
+          );
+        },
+        // Pre (code block wrapper)
+        pre: ({ children, ...props }) => /* @__PURE__ */ jsx7("pre", { style: { margin: 0 }, ...props, children }),
+        // Blockquotes
+        blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx7(
+          "blockquote",
+          {
+            style: {
+              borderLeft: "4px solid rgba(0, 0, 0, 0.2)",
+              paddingLeft: "1em",
+              marginLeft: 0,
+              marginTop: "0.5em",
+              marginBottom: "0.5em",
+              color: "rgba(0, 0, 0, 0.7)"
+            },
+            ...props,
+            children
+          }
+        ),
+        // Strong/bold
+        strong: ({ children, ...props }) => /* @__PURE__ */ jsx7("strong", { style: { fontWeight: 600 }, ...props, children }),
+        // Emphasis/italic
+        em: ({ children, ...props }) => /* @__PURE__ */ jsx7("em", { style: { fontStyle: "italic" }, ...props, children }),
+        // Horizontal rule
+        hr: (props) => /* @__PURE__ */ jsx7(
+          "hr",
+          {
+            style: {
+              border: "none",
+              borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+              marginTop: "1em",
+              marginBottom: "1em"
+            },
+            ...props
+          }
+        ),
+        // Tables (GFM)
+        table: ({ children, ...props }) => /* @__PURE__ */ jsx7("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx7(
+          "table",
+          {
+            style: {
+              borderCollapse: "collapse",
+              width: "100%",
+              fontSize: "0.9em"
+            },
+            ...props,
+            children
+          }
+        ) }),
+        th: ({ children, ...props }) => /* @__PURE__ */ jsx7(
+          "th",
+          {
+            style: {
+              border: "1px solid rgba(0, 0, 0, 0.2)",
+              padding: "0.5em",
+              backgroundColor: "rgba(0, 0, 0, 0.05)",
+              fontWeight: 600,
+              textAlign: "left"
+            },
+            ...props,
+            children
+          }
+        ),
+        td: ({ children, ...props }) => /* @__PURE__ */ jsx7(
+          "td",
+          {
+            style: {
+              border: "1px solid rgba(0, 0, 0, 0.2)",
+              padding: "0.5em"
+            },
+            ...props,
+            children
+          }
+        )
+      },
+      children: normalizedContent
+    }
+  ) });
+};
+
+// src/react/ai/FloatingChatBox.tsx
+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__ */ 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__ */ 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__ */ 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__ */ 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: {
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  // Floating button (closed state - wide with text, open state - circular with X)
+  floatingButton: {
+    position: "fixed",
+    bottom: 16,
+    right: 16,
+    borderRadius: "999px",
+    border: "none",
+    cursor: "pointer",
+    background: "linear-gradient(135deg, #10b981, #059669)",
+    color: "#fff",
+    boxShadow: "0 12px 28px rgba(16, 185, 129, 0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 14,
+    fontWeight: 600,
+    zIndex: 99999,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  floatingButtonClosed: {
+    padding: "12px 20px",
+    gap: 8
+  },
+  floatingButtonOpen: {
+    width: 52,
+    height: 52,
+    padding: 0
+  },
+  floatingButtonMobile: {
+    width: 52,
+    height: 52,
+    padding: 0
+  },
+  // Panel (expandable)
+  panel: {
+    position: "fixed",
+    bottom: 80,
+    right: 16,
+    background: "#fff",
+    borderRadius: 16,
+    boxShadow: "0 20px 60px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.05)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 99999,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  panelNormal: {
+    width: 360,
+    height: 520
+  },
+  panelExpanded: {
+    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",
+    background: "linear-gradient(135deg, #10b981, #059669)",
+    color: "#fff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  title: {
+    margin: 0,
+    fontSize: 15,
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
+  },
+  headerButtons: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  headerButton: {
+    border: "none",
+    background: "rgba(255, 255, 255, 0.15)",
+    color: "#fff",
+    width: 30,
+    height: 30,
+    borderRadius: 8,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background 0.2s"
+  },
+  // Messages area
+  messages: {
+    flex: 1,
+    padding: "16px",
+    overflowY: "auto",
+    background: "#f8fafc",
+    display: "flex",
+    flexDirection: "column",
+    gap: 16
+  },
+  // Message bubbles
+  messageWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  messageBubble: {
+    maxWidth: "85%",
+    padding: "10px 12px",
+    borderRadius: 16,
+    lineHeight: 1.5,
+    fontSize: 13,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  },
+  userMessage: {
+    alignSelf: "flex-end",
+    background: "linear-gradient(135deg, #10b981, #059669)",
+    color: "#fff",
+    borderBottomRightRadius: 4
+  },
+  assistantMessage: {
+    alignSelf: "flex-start",
+    background: "#e2e8f0",
+    color: "#0f172a",
+    borderBottomLeftRadius: 4
+  },
+  // Streaming cursor
+  cursor: {
+    display: "inline-block",
+    width: 2,
+    height: 16,
+    background: "#0f172a",
+    marginLeft: 2,
+    animation: "zenitBlink 1s infinite",
+    verticalAlign: "text-bottom"
+  },
+  thinkingText: {
+    fontStyle: "italic",
+    opacity: 0.7,
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  typingIndicator: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  typingDot: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    backgroundColor: "#059669",
+    animation: "typingDotBounce 1.4s infinite ease-in-out"
+  },
+  // Metadata section (Referenced Layers)
+  metadataSection: {
+    marginTop: 12,
+    padding: "10px 12px",
+    background: "rgba(255, 255, 255, 0.5)",
+    borderRadius: 10,
+    fontSize: 12
+  },
+  metadataTitle: {
+    fontWeight: 600,
+    color: "#059669",
+    marginBottom: 6,
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  metadataList: {
+    margin: 0,
+    paddingLeft: 18,
+    color: "#475569"
+  },
+  metadataItem: {
+    marginBottom: 2
+  },
+  // Suggested actions
+  actionsSection: {
+    marginTop: 12
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: "#64748b",
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  actionsGrid: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6
+  },
+  actionButton: {
+    border: "1px solid #d1fae5",
+    background: "#d1fae5",
+    color: "#065f46",
+    borderRadius: 999,
+    padding: "6px 12px",
+    fontSize: 12,
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.2s"
+  },
+  // Follow-up questions
+  followUpButton: {
+    border: "1px solid #cbd5e1",
+    background: "#fff",
+    color: "#475569",
+    borderRadius: 10,
+    padding: "8px 12px",
+    fontSize: 12,
+    fontWeight: 500,
+    cursor: "pointer",
+    textAlign: "left",
+    width: "100%",
+    transition: "all 0.2s"
+  },
+  // Input area
+  inputWrapper: {
+    borderTop: "1px solid #e2e8f0",
+    padding: "10px 14px",
+    display: "flex",
+    gap: 10,
+    alignItems: "flex-end",
+    background: "#fff"
+  },
+  textarea: {
+    flex: 1,
+    resize: "none",
+    borderRadius: 12,
+    border: "1.5px solid #cbd5e1",
+    padding: "8px 10px",
+    fontSize: 13,
+    fontFamily: "inherit",
+    lineHeight: 1.4,
+    transition: "border-color 0.2s"
+  },
+  textareaFocus: {
+    borderColor: "#10b981",
+    outline: "none"
+  },
+  sendButton: {
+    borderRadius: 12,
+    border: "none",
+    padding: "8px 12px",
+    background: "linear-gradient(135deg, #10b981, #059669)",
+    color: "#fff",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "opacity 0.2s, transform 0.2s",
+    minWidth: 40,
+    height: 40
+  },
+  // Status messages
+  statusNote: {
+    padding: "0 16px 14px",
+    fontSize: 12,
+    color: "#64748b",
+    textAlign: "center"
+  },
+  errorText: {
+    padding: "0 16px 14px",
+    fontSize: 12,
+    color: "#dc2626",
+    textAlign: "center"
+  }
+};
+var FloatingChatBox = ({
+  mapId,
+  filteredLayerIds,
+  filters,
+  userId,
+  baseUrl,
+  accessToken,
+  getAccessToken,
+  onActionClick,
+  onOpenChange,
+  hideButton,
+  open: openProp
+}) => {
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = useState5(false);
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = useCallback4((value) => {
+    const newValue = typeof value === "function" ? value(open) : value;
+    if (!isControlled) {
+      setInternalOpen(newValue);
+    }
+    onOpenChange?.(newValue);
+  }, [isControlled, open, onOpenChange]);
+  const [expanded, setExpanded] = useState5(false);
+  const [messages, setMessages] = useState5([]);
+  const [inputValue, setInputValue] = useState5("");
+  const [conversationId, setConversationId] = useState5();
+  const [errorMessage, setErrorMessage] = useState5(null);
+  const [isFocused, setIsFocused] = useState5(false);
+  const [isMobile, setIsMobile] = useState5(false);
+  const messagesEndRef = useRef8(null);
+  const messagesContainerRef = useRef8(null);
+  const chatBoxRef = useRef8(null);
+  const chatConfig = useMemo5(() => {
+    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;
+  useEffect7(() => {
+    if (open && isMobile) {
+      setExpanded(true);
+    }
+  }, [open, isMobile]);
+  const scrollToBottom = useCallback4(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
+  useEffect7(() => {
+    if (open && messages.length === 0) {
+      setMessages([
+        {
+          id: "welcome",
+          role: "assistant",
+          content: "Hola, soy el asistente de IA de ZENIT. Estoy aqu\xED para ayudarte a analizar tu mapa y responder tus preguntas sobre las capas y datos. \xBFEn qu\xE9 puedo ayudarte hoy?"
+        }
+      ]);
+    }
+  }, [open, messages.length]);
+  useEffect7(() => {
+    scrollToBottom();
+  }, [messages, streamingText, scrollToBottom]);
+  useEffect7(() => {
+    if (!open) return;
+    if (isMobile && expanded) return;
+    const handleClickOutside = (event) => {
+      if (chatBoxRef.current && !chatBoxRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, isMobile, expanded]);
+  useEffect7(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const updateMobile = () => setIsMobile(mediaQuery.matches);
+    updateMobile();
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", updateMobile);
+    } else {
+      mediaQuery.addListener(updateMobile);
+    }
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", updateMobile);
+      } else {
+        mediaQuery.removeListener(updateMobile);
+      }
+    };
+  }, []);
+  useEffect7(() => {
+    if (typeof document === "undefined") return;
+    if (!open || !isMobile) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open, isMobile]);
+  const addMessage = useCallback4((message) => {
+    setMessages((prev) => [...prev, message]);
+  }, []);
+  const handleSend = useCallback4(async () => {
+    if (!mapId) {
+      setErrorMessage("Selecciona un mapa para usar el asistente.");
+      return;
+    }
+    if (!baseUrl) {
+      setErrorMessage("Configura la baseUrl del SDK para usar Zenit AI.");
+      return;
+    }
+    if (!inputValue.trim()) return;
+    const messageText = inputValue.trim();
+    setInputValue("");
+    setErrorMessage(null);
+    addMessage({
+      id: `user-${Date.now()}`,
+      role: "user",
+      content: messageText
+    });
+    const request = {
+      message: messageText,
+      conversationId,
+      filteredLayerIds,
+      filters,
+      userId
+    };
+    try {
+      const response = await sendMessage2(mapId, request);
+      setConversationId(response.conversationId ?? conversationId);
+      addMessage({
+        id: `assistant-${Date.now()}`,
+        role: "assistant",
+        content: response.answer,
+        response
+      });
+    } catch (error) {
+      setErrorMessage("Ocurri\xF3 un error al generar la respuesta.");
+      addMessage({
+        id: `error-${Date.now()}`,
+        role: "assistant",
+        content: "\u274C Ocurri\xF3 un error al generar la respuesta."
+      });
+    }
+  }, [
+    addMessage,
+    baseUrl,
+    conversationId,
+    filteredLayerIds,
+    filters,
+    inputValue,
+    mapId,
+    sendMessage2,
+    userId
+  ]);
+  const handleKeyDown = useCallback4(
+    (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        if (canSend) {
+          void handleSend();
+        }
+      }
+    },
+    [canSend, handleSend]
+  );
+  const handleFollowUpClick = useCallback4((question) => {
+    setInputValue(question);
+  }, []);
+  const renderMetadata = (response) => {
+    if (!response?.metadata) return null;
+    const referencedLayers = response.metadata.referencedLayers;
+    if (!referencedLayers || referencedLayers.length === 0) return null;
+    return /* @__PURE__ */ jsxs7("div", { style: styles.metadataSection, children: [
+      /* @__PURE__ */ jsxs7("div", { style: styles.metadataTitle, children: [
+        /* @__PURE__ */ jsx8(LayersIcon, {}),
+        "Capas Analizadas"
+      ] }),
+      /* @__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,
+        " ",
+        layer.featureCount === 1 ? "elemento" : "elementos",
+        ")"
+      ] }, index)) })
+    ] });
+  };
+  const handleActionClick = useCallback4((action) => {
+    if (isStreaming) return;
+    setOpen(false);
+    requestAnimationFrame(() => {
+      onActionClick?.(action);
+    });
+  }, [isStreaming, setOpen, onActionClick]);
+  const renderActions = (response) => {
+    if (!response?.suggestedActions?.length) return null;
+    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",
+          style: {
+            ...styles.actionButton,
+            opacity: isStreaming ? 0.5 : 1,
+            cursor: isStreaming ? "not-allowed" : "pointer"
+          },
+          onClick: () => handleActionClick(action),
+          disabled: isStreaming,
+          onMouseEnter: (e) => {
+            if (!isStreaming) {
+              e.currentTarget.style.background = "#a7f3d0";
+              e.currentTarget.style.borderColor = "#a7f3d0";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!isStreaming) {
+              e.currentTarget.style.background = "#d1fae5";
+              e.currentTarget.style.borderColor = "#d1fae5";
+            }
+          },
+          children: action.label ?? action.action ?? "Acci\xF3n"
+        },
+        `${action.label ?? action.action ?? "action"}-${index}`
+      )) })
+    ] });
+  };
+  const renderFollowUps = (response) => {
+    if (!response?.followUpQuestions?.length) return null;
+    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",
+          style: {
+            ...styles.followUpButton,
+            opacity: isStreaming ? 0.5 : 1,
+            cursor: isStreaming ? "not-allowed" : "pointer"
+          },
+          onClick: () => !isStreaming && handleFollowUpClick(question),
+          disabled: isStreaming,
+          onMouseEnter: (e) => {
+            if (!isStreaming) {
+              e.currentTarget.style.background = "#f8fafc";
+              e.currentTarget.style.borderColor = "#10b981";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!isStreaming) {
+              e.currentTarget.style.background = "#fff";
+              e.currentTarget.style.borderColor = "#cbd5e1";
+            }
+          },
+          children: question
+        },
+        `followup-${index}`
+      )) })
+    ] });
+  };
+  const chatContent = /* @__PURE__ */ jsxs7("div", { style: styles.root, children: [
+    /* @__PURE__ */ jsx8("style", { children: `
+        @keyframes zenitBlink {
+          0%, 49% { opacity: 1; }
+          50%, 100% { opacity: 0; }
+        }
+        @keyframes zenitPulse {
+          0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+          70% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
+          100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+        }
+        @keyframes typingDotBounce {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-8px); }
+        }
+        .zenit-typing-dot:nth-child(1) { animation-delay: 0s; }
+        .zenit-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .zenit-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        .zenit-ai-button:not(.open) {
+          animation: zenitPulse 2.5s infinite;
+        }
+        .zenit-ai-button:hover {
+          transform: scale(1.05);
+        }
+        .zenit-ai-button:active {
+          transform: scale(0.95);
+        }
+        .zenit-send-button:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .zenit-send-button:not(:disabled):hover {
+          opacity: 0.9;
+          transform: translateY(-1px);
+        }
+        .zenit-send-button:not(:disabled):active {
+          transform: translateY(0);
+        }
+        .zenit-chat-panel {
+          box-sizing: border-box;
+        }
+        @media (max-width: 768px) {
+          .zenit-chat-panel.zenit-chat-panel--fullscreen .zenit-ai-body {
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+          }
+          .zenit-chat-panel.zenit-chat-panel--fullscreen .zenit-ai-input-area {
+            flex-shrink: 0;
+            padding-bottom: max(14px, env(safe-area-inset-bottom));
+          }
+          .zenit-ai-button.zenit-ai-button--hidden-mobile {
+            display: none !important;
+          }
+        }
+      ` }),
+    open && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: chatBoxRef,
+        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__ */ 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",
+                  style: styles.headerButton,
+                  onClick: () => setExpanded(!expanded),
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.25)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
+                  },
+                  "aria-label": expanded ? "Contraer" : "Expandir",
+                  children: expanded ? /* @__PURE__ */ jsx8(CollapseIcon, {}) : /* @__PURE__ */ jsx8(ExpandIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  style: styles.headerButton,
+                  onClick: () => setOpen(false),
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.25)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
+                  },
+                  "aria-label": "Cerrar",
+                  children: /* @__PURE__ */ jsx8(CloseIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__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__ */ jsxs7(
+                  "div",
+                  {
+                    style: {
+                      ...styles.messageBubble,
+                      ...message.role === "user" ? styles.userMessage : styles.assistantMessage
+                    },
+                    children: [
+                      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)
+                    ]
+                  }
+                )
+              },
+              message.id
+            )),
+            isStreaming && /* @__PURE__ */ jsx8(
+              "div",
+              {
+                style: {
+                  ...styles.messageWrapper,
+                  alignItems: "flex-start"
+                },
+                children: /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    style: {
+                      ...styles.messageBubble,
+                      ...styles.assistantMessage
+                    },
+                    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__ */ jsx8("div", { ref: messagesEndRef })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
+            /* @__PURE__ */ jsx8(
+              "textarea",
+              {
+                style: {
+                  ...styles.textarea,
+                  ...isFocused ? styles.textareaFocus : {}
+                },
+                rows: 2,
+                value: inputValue,
+                onChange: (event) => setInputValue(event.target.value),
+                onKeyDown: handleKeyDown,
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                placeholder: !mapId ? "Selecciona un mapa para comenzar" : isStreaming ? "Esperando respuesta..." : "Escribe tu pregunta...",
+                disabled: !mapId || !baseUrl || isStreaming
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "zenit-send-button",
+                style: styles.sendButton,
+                onClick: () => void handleSend(),
+                disabled: !canSend,
+                "aria-label": "Enviar mensaje",
+                children: /* @__PURE__ */ jsx8(SendIcon, {})
+              }
+            )
+          ] }),
+          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__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: `zenit-ai-button ${open ? "open" : ""}${open && isMobile ? " zenit-ai-button--hidden-mobile" : ""}`,
+        style: {
+          ...styles.floatingButton,
+          ...open ? styles.floatingButtonOpen : isMobile ? styles.floatingButtonMobile : styles.floatingButtonClosed,
+          zIndex: open ? 100001 : 99999
+        },
+        onClick: () => setOpen((prev) => !prev),
+        "aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
+        children: open ? /* @__PURE__ */ jsx8(CloseIcon, {}) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(ChatIcon, {}),
+          !isMobile && /* @__PURE__ */ jsx8("span", { children: "Asistente IA" })
+        ] })
+      }
+    )
+  ] });
+  if (typeof document !== "undefined") {
+    return createPortal3(chatContent, document.body);
+  }
+  return chatContent;
+};
+
+export {
+  extractMapDto,
+  normalizeMapCenter,
+  normalizeMapLayers,
+  computeBBoxFromFeature,
+  centroidFromBBox,
+  applyFilteredGeoJSONStrategy,
+  initLayerStates,
+  applyLayerOverrides,
+  resetOverrides,
+  sendMessage,
+  sendMessageStream,
+  createChatService,
+  resolveLayerAccent,
+  getLayerColor,
+  getStyleByLayerId,
+  getAccentByLayerId,
+  clampNumber,
+  clampOpacity3 as clampOpacity,
+  isPolygonLayer,
+  getZoomOpacityFactor,
+  getLayerZoomOpacityFactor,
+  getEffectiveLayerOpacity,
+  ZenitMap,
+  Eye,
+  EyeOff,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Layers,
+  Upload,
+  X,
+  ZoomIn,
+  ZenitSelect,
+  ZenitLayerManager,
+  ZenitFeatureFilterPanel,
+  useSendMessage,
+  useSendMessageStream,
+  FloatingChatBox
+};
+//# sourceMappingURL=chunk-J2YWF2TS.mjs.map