zenit-sdk 0.1.4 → 0.1.6

package/dist/index.js

@@ -1595,8 +1595,122 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
 var import_react = require("react");
 var import_react_leaflet = require("react-leaflet");
 var import_leaflet = __toESM(require("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
 var import_jsx_runtime = require("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;
@@ -1629,6 +1743,45 @@ 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 import_leaflet.default.circleMarker(latlng ?? [0, 0], {
+    radius: 0,
+    opacity: 0,
+    fillOpacity: 0,
+    interactive: false
+  });
+}
+function createInvisibleFallbackClusterMarker(latlng) {
+  return import_leaflet.default.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 import_leaflet.default.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",
@@ -1649,14 +1802,15 @@ var LayerGeoJson = ({
   onEachFeature,
   onPolygonLabel
 }) => {
-  const features = data.features ?? [];
-  const fillFeatures = features.filter(isNonPointGeometry);
-  const pointFeatures = features.filter(isPointGeometry);
+  const safeData = (0, import_react.useMemo)(() => sanitizeGeoJson(data, String(layerId)), [data, layerId]);
+  const features = (0, import_react.useMemo)(() => safeData.features ?? [], [safeData]);
+  const fillFeatures = (0, import_react.useMemo)(() => features.filter(isNonPointGeometry), [features]);
+  const pointFeatures = (0, import_react.useMemo)(() => features.filter(isPointGeometry), [features]);
   const dataVersionRef = (0, import_react.useRef)(0);
   const prevSignatureRef = (0, import_react.useRef)("");
   const firstId = features.length > 0 ? String(features[0]?.id ?? "") : "";
   const lastId = features.length > 0 ? String(features[features.length - 1]?.id ?? "") : "";
-  const bbox = normalizeBboxFromData(data);
+  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, "_");
@@ -1664,25 +1818,40 @@ var LayerGeoJson = ({
     dataVersionRef.current += 1;
     prevSignatureRef.current = signature;
   }
-  const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
-  const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
+  const fillData = (0, import_react.useMemo)(() => fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null, [fillFeatures]);
+  const pointsData = (0, import_react.useMemo)(() => pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null, [pointFeatures]);
   const clusterLayerRef = (0, import_react.useRef)(null);
   const canCluster = typeof import_leaflet.default.markerClusterGroup === "function";
+  const resolvedFillPane = (0, import_react.useMemo)(
+    () => ensurePaneName(mapInstance, fillPaneName, "overlayPane"),
+    [fillPaneName, mapInstance]
+  );
+  const resolvedPointsPane = (0, import_react.useMemo)(
+    () => ensurePaneName(mapInstance, pointsPaneName, "markerPane"),
+    [mapInstance, pointsPaneName]
+  );
   (0, import_react.useEffect)(() => {
     if (!mapInstance || !panesReady || !pointsData || !canCluster) return;
     const markerClusterGroup = import_leaflet.default.markerClusterGroup;
-    const clusterLayer = clusterLayerRef.current ?? 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 = import_leaflet.default.geoJSON(pointsData, {
-      pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
-        radius: isMobile ? 8 : 6,
-        pane: mapInstance.getPane(pointsPaneName) ? pointsPaneName : void 0,
-        ...styleFn(feature, layerType, baseOpacity)
-      }),
+      pointToLayer: (feature, latlng) => {
+        if (!isValidLatLng(latlng)) {
+          return createInvisibleFallbackClusterMarker();
+        }
+        const style = styleFn(feature, layerType, baseOpacity);
+        return import_leaflet.default.marker(latlng, {
+          icon: createPointDivIcon(style, isMobile),
+          pane: clusterPaneName,
+          interactive: true
+        });
+      },
       onEachFeature
     });
     clusterLayer.addLayer(geoJsonLayer);
@@ -1701,7 +1870,7 @@ var LayerGeoJson = ({
     onEachFeature,
     panesReady,
     pointsData,
-    pointsPaneName,
+    resolvedPointsPane,
     styleFn
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -1709,7 +1878,7 @@ var LayerGeoJson = ({
       import_react_leaflet.GeoJSON,
       {
         data: fillData,
-        pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
+        pane: resolvedFillPane,
         style: (feature) => styleFn(feature, layerType, baseOpacity),
         onEachFeature: (feature, layer) => {
           onEachFeature(feature, layer);
@@ -1722,11 +1891,16 @@ var LayerGeoJson = ({
       import_react_leaflet.GeoJSON,
       {
         data: pointsData,
-        pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
-        pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
-          radius: isMobile ? 8 : 6,
-          ...styleFn(feature, layerType, baseOpacity)
-        }),
+        pane: resolvedPointsPane,
+        pointToLayer: (feature, latlng) => {
+          if (!isValidLatLng(latlng)) {
+            return createInvisibleFallbackMarker();
+          }
+          return import_leaflet.default.circleMarker(latlng, {
+            radius: isMobile ? 8 : 6,
+            ...styleFn(feature, layerType, baseOpacity)
+          });
+        },
         onEachFeature
       },
       `points-${layerId}-${signatureToken}-v${dataVersionRef.current}`
@@ -1808,7 +1982,22 @@ function useGeolocation(options) {
 var import_leaflet2 = __toESM(require("leaflet"));
 var POPUP_STYLE_ID = "zenit-leaflet-popup-styles";
 var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry", "_private"]);
-var POPUP_HEADER_KEYS = ["nombre", "name", "title", "titulo"];
+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 = `
@@ -1926,6 +2115,68 @@ function escapeHtml(value) {
 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) {
@@ -1951,12 +2202,8 @@ function renderPopupValue(value) {
   return escapeHtml(String(value));
 }
 function extractPopupHeader(properties) {
-  const entry = Object.entries(properties).find(([key, value]) => {
-    if (typeof value !== "string") return false;
-    const normalized = key.trim().toLowerCase();
-    return POPUP_HEADER_KEYS.includes(normalized) && value.trim().length > 0;
-  });
-  return entry ? entry[1].trim() : null;
+  const header = findHeaderProperties(properties);
+  return header.title?.value ?? null;
 }
 function shouldIncludePopupEntry(key, value) {
   if (!key) return false;
@@ -1969,21 +2216,36 @@ function shouldIncludePopupEntry(key, value) {
   return true;
 }
 function createPopupContent(properties) {
-  const headerText = extractPopupHeader(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 (headerText && POPUP_HEADER_KEYS.includes(key.trim().toLowerCase())) 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 ? `<div style="font-weight:700; font-size:14px; margin-bottom:8px; color:#0f172a;">${escapeHtml(
-    headerText
+  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 valueHtml = renderPopupValue(value);
+    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>
@@ -1991,7 +2253,7 @@ function createPopupContent(properties) {
         </div>
       `;
   }).join("");
-  return `<div>${headerHtml}${rowsHtml}</div>`;
+  return `<div>${colorBar}${headerHtml}${descriptionHtml}${rowsHtml}</div>`;
 }
 function isPolygonType(layerType, geometryType) {
   const candidate = (layerType ?? geometryType ?? "").toLowerCase();
@@ -2001,21 +2263,27 @@ function calculateZoomBasedOpacity(zoom, baseOpacity, layerType, geometryType) {
   if (!isPolygonType(layerType, geometryType)) return clampOpacity4(baseOpacity);
   const minZoom = 11;
   const maxZoom = 15;
-  const minFactor = 0.3;
+  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 } = options;
+  const { baseOpacity, zoom, layerStyle, geometryType, layerType, properties } = options;
   const sanitizedOpacity = clampOpacity4(baseOpacity);
   const zoomOpacity = calculateZoomBasedOpacity(zoom, sanitizedOpacity, layerType, geometryType);
-  const styleFillOpacity = typeof layerStyle?.fillOpacity === "number" ? clampOpacity4(layerStyle.fillOpacity) : 0.8;
+  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: layerStyle?.color ?? layerStyle?.fillColor ?? "#2563eb",
+    color: resolvedColor,
     weight: layerStyle?.weight ?? 2,
-    fillColor: layerStyle?.fillColor ?? layerStyle?.color ?? "#2563eb",
+    fillColor: resolvedFillColor,
     opacity: clampOpacity4(Math.max(0.35, zoomOpacity * 0.9)),
     fillOpacity: clampOpacity4(zoomOpacity * styleFillOpacity)
   };
@@ -2413,6 +2681,7 @@ var import_jsx_runtime3 = require("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;
 }
@@ -2436,6 +2705,8 @@ function getFeatureLayerId(feature) {
   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") {
@@ -2455,6 +2726,31 @@ function extractDescriptionValue(properties) {
   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 import_leaflet4.default.Marker) return "point";
+  if (geometryType && POLYGON_GEOMETRY_TYPES.has(geometryType)) return "polygon";
+  if (params.leafletLayer instanceof import_leaflet4.default.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;
@@ -2472,17 +2768,50 @@ function buildFeaturePopupHtml(feature) {
   const rendered = createPopupContent(properties);
   return rendered ? rendered : null;
 }
-function pickIntersectFeature(baseFeature, candidates) {
+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 matchById;
+    if (matchById) return getResult(matchById, "fallback>baseId");
   }
   const matchWithDescription = candidates.find(
     (candidate) => extractDescriptionValue(candidate?.properties)
   );
-  return matchWithDescription ?? candidates[0];
+  if (matchWithDescription) return getResult(matchWithDescription, "fallback>description");
+  return getResult(candidates[0], "fallback>first");
 }
 function normalizeCenterTuple(center) {
   if (!center) return null;
@@ -2889,7 +3218,8 @@ var ZenitMap = (0, import_react5.forwardRef)(({
   }, [currentZoom, decoratedLayers, labelKeyIndex, layerMetaIndex, resolveLayerStyle]);
   const ensureLayerPanes = (0, import_react5.useCallback)(
     (targetMap, targetLayers) => {
-      const baseZIndex = 400;
+      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));
@@ -2897,8 +3227,8 @@ var ZenitMap = (0, import_react5.forwardRef)(({
         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(baseZIndex + orderOffset);
-        pointPane.style.zIndex = String(baseZIndex + orderOffset + 100);
+        fillPane.style.zIndex = String(fillBaseZIndex + orderOffset);
+        pointPane.style.zIndex = String(pointsBaseZIndex + orderOffset);
       });
     },
     []
@@ -2916,114 +3246,149 @@ var ZenitMap = (0, import_react5.forwardRef)(({
       setPanesReady(false);
       return;
     }
-    if (orderedLayers.length === 0) {
+    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 = mapInstance.getPane(`zenit-layer-${first.layerId}-fill`);
+    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, ensureLayerPanes]);
-  const overlayOnEachFeature = (0, import_react5.useMemo)(() => {
-    return (feature, layer) => {
-      const layerId = getFeatureLayerId(feature) ?? void 0;
-      const geometryType = feature?.geometry?.type;
-      const isPointFeature = geometryType === "Point" || geometryType === "MultiPoint" || layer instanceof import_leaflet4.default.CircleMarker;
-      const originalStyle = layer instanceof import_leaflet4.default.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 import_leaflet4.default.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",
-            autoPan: true,
-            closeButton: true,
-            keepInView: true
-          });
-        }
-      }
-      if (isPointFeature && layer.bindTooltip) {
-        layer.bindTooltip("Click para ver detalle", {
-          sticky: true,
-          direction: "top",
-          opacity: 0.9,
-          className: "zenit-map-tooltip"
+  }, [mapInstance, orderedLayers, overlayGeojson, ensureLayerPanes]);
+  const overlayOnEachFeature = (0, import_react5.useCallback)((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 import_leaflet4.default.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 import_leaflet4.default.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]
         });
       }
-      layer.on("click", () => {
-        if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
-          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 resolved = pickIntersectFeature(feature, candidates);
-              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);
+    }
+    if (isPointFeature && layer.bindTooltip) {
+      layer.bindTooltip("Click para ver detalle", {
+        sticky: true,
+        direction: "top",
+        opacity: 0.9,
+        className: "zenit-map-tooltip"
       });
-      layer.on("mouseover", () => {
-        if (layer instanceof import_leaflet4.default.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)
+    }
+    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
           });
         }
-        if (layer instanceof import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
-          layer.setRadius(originalRadius + 1);
-        }
-        onFeatureHover?.(feature, layerId);
-      });
-      layer.on("mouseout", () => {
-        if (layer instanceof import_leaflet4.default.Path && originalStyle) {
-          layer.setStyle(originalStyle);
-        }
-        if (layer instanceof import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
-          layer.setRadius(originalRadius);
+        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 import_leaflet4.default.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 import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
+        layer.setRadius(originalRadius + 1);
+      }
+      onFeatureHover?.(feature, layerId);
+    });
+    layer.on("mouseout", () => {
+      if (layer instanceof import_leaflet4.default.Path && originalStyle) {
+        layer.setStyle(originalStyle);
+      }
+      if (layer instanceof import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
+        layer.setRadius(originalRadius);
+      }
+    });
   }, [client, featureInfoMode, onFeatureClick, onFeatureHover]);
-  const buildLayerStyle = (layerId, baseOpacity, feature, layerType) => {
+  const buildLayerStyle = (0, import_react5.useCallback)((layerId, baseOpacity, feature, layerType) => {
     const style = resolveLayerStyle(layerId);
     const featureStyleOverrides = getFeatureStyleOverrides(feature);
     const resolvedStyle = featureStyleOverrides ? { ...style ?? {}, ...featureStyleOverrides } : style;
@@ -3034,14 +3399,15 @@ var ZenitMap = (0, import_react5.forwardRef)(({
       zoom: currentZoom,
       layerStyle: resolvedStyle,
       geometryType,
-      layerType: resolvedLayerType
+      layerType: resolvedLayerType,
+      properties: feature?.properties ?? void 0
     });
-  };
-  const makeStyleFnForLayer = (layerId) => {
+  }, [currentZoom, resolveLayerStyle]);
+  const makeStyleFnForLayer = (0, import_react5.useCallback)((layerId) => {
     return (feature, layerType, baseOpacity) => {
       return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
     };
-  };
+  }, [buildLayerStyle]);
   (0, import_react5.useImperativeHandle)(ref, () => ({
     setLayerOpacity: (layerId, opacity) => {
       upsertUiOverride(layerId, { overrideOpacity: opacity });
@@ -3196,7 +3562,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
                     const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
                     const labelKey = labelKeyIndex.get(String(layerState.mapLayer.layerId));
                     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.default.Fragment, { children: [
-                      layerState.data && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      layerState.data && panesReady && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         LayerGeoJson,
                         {
                           layerId: layerState.mapLayer.layerId,
@@ -3239,7 +3605,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
                       )) : null
                     ] }, layerState.mapLayer.layerId.toString());
                   }),
-                  overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  overlayGeojson && panesReady && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     LayerGeoJson,
                     {
                       layerId: "overlay-geojson",
@@ -3273,7 +3639,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
               overflowY: "auto"
             },
             children: [
-              overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              overlayGeojson && panesReady && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   style: {
@@ -3961,6 +4327,14 @@ var ZenitLayerManager = ({
       return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
     });
   }, [effectiveStates, layers, resolveFeatureCount]);
+  const hasPrefilters = (0, import_react7.useMemo)(() => {
+    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 = (0, import_react7.useMemo)(() => {
     return decoratedLayers.filter((entry) => {
       const prefilters = entry.mapLayer.layerConfig?.prefilters;
@@ -4033,6 +4407,11 @@ var ZenitLayerManager = ({
       setSelectedFilterValue("");
     }
   }, [filterFields, selectedFilterField]);
+  (0, import_react7.useEffect)(() => {
+    if (hasPrefilters && activeTab === "filters") {
+      setActiveTab("layers");
+    }
+  }, [activeTab, hasPrefilters]);
   (0, import_react7.useEffect)(() => {
     if (activeTab !== "filters") return;
     if (!selectedFilterLayer || !selectedFilterField || !activeCatalogKey) return;
@@ -4433,7 +4812,7 @@ var ZenitLayerManager = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            !hasPrefilters && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "button",
               {
                 type: "button",
@@ -4450,8 +4829,9 @@ var ZenitLayerManager = ({
       )
     ] }),
     panelVisible && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
+      hasPrefilters && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "zlm-badge", style: { marginBottom: 10 }, children: "Este mapa ya incluye filtros preaplicados" }),
       activeTab === "layers" && renderLayerCards(),
-      activeTab === "filters" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      !hasPrefilters && activeTab === "filters" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         filterableLayers.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
           "Capa",
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(