zenit-sdk 0.0.7 → 0.0.8

package/dist/index.js

@@ -1470,6 +1470,7 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_CENTER = [0, 0];
 var DEFAULT_ZOOM = 3;
+var LABELS_PANE_NAME = "zenit-labels-pane";
 function computeBBoxFromGeojson(geojson) {
   if (!geojson) return null;
   if (!Array.isArray(geojson.features) || geojson.features.length === 0) return null;
@@ -1510,6 +1511,23 @@ function mergeBBoxes(bboxes) {
     { ...first }
   );
 }
+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;
@@ -1520,6 +1538,7 @@ function escapeHtml(value) {
 }
 var DESCRIPTION_KEYS = /* @__PURE__ */ new Set(["descripcion", "description"]);
 var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry"]);
+var POPUP_HEADER_KEYS = ["nombre", "name", "title", "titulo"];
 var POPUP_STYLE_ID = "zenit-leaflet-popup-styles";
 var DESKTOP_POPUP_DIMENSIONS = { maxWidth: 350, minWidth: 280, maxHeight: 480 };
 var MOBILE_POPUP_DIMENSIONS = { maxWidth: 280, minWidth: 240, maxHeight: 380 };
@@ -1546,6 +1565,7 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
   line-height: 1.5;
   color: #374151;
   min-width: 100%;
+  max-height: min(70vh, 480px);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
@@ -1596,6 +1616,20 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
   padding: 16px;
 }
 
+.zenit-popup-header {
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 4px;
+}
+
+.zenit-popup-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+}
+
 /* Individual row styling with subtle separator */
 .zenit-popup-row {
   display: flex;
@@ -1634,6 +1668,16 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
   line-height: 1.5;
 }
 
+.zenit-popup-link {
+  color: #2563eb;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.zenit-popup-link:hover {
+  color: #1d4ed8;
+}
+
 /* Special styling for description field */
 .zenit-popup-row.zenit-popup-description {
   background-color: #f9fafb;
@@ -1728,6 +1772,18 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
     padding: 12px;
   }
 
+  .zenit-leaflet-popup .leaflet-popup-content {
+    max-height: min(65vh, 380px);
+  }
+
+  .zenit-popup-header {
+    padding-bottom: 10px;
+  }
+
+  .zenit-popup-title {
+    font-size: 13px;
+  }
+
   .zenit-popup-row {
     padding: 8px 0;
   }
@@ -1776,6 +1832,17 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
 .zenit-map-tooltip::before {
   border-top-color: rgba(31, 41, 55, 0.95);
 }
+
+.polygon-label-tooltip {
+  z-index: 600 !important;
+}
+
+.zenit-map-shell.popup-open .zenit-label-marker,
+.zenit-map-shell.popup-open .polygon-label-tooltip,
+.zenit-map-shell.popup-open .click-for-detail-hint,
+.zenit-map-shell.popup-open .zenit-map-tooltip {
+  display: none !important;
+}
 `;
 function ensurePopupStyles() {
   if (typeof document === "undefined") return;
@@ -1822,6 +1889,31 @@ function renderPopupValue(value) {
   if (value === null || value === void 0) {
     return '<span class="zenit-popup-empty">Sin datos</span>';
   }
+  if (value instanceof Date) {
+    return `<span>${escapeHtml(value.toLocaleDateString("es-GT"))}</span>`;
+  }
+  if (typeof value === "number") {
+    return `<span>${escapeHtml(value.toLocaleString("es-GT"))}</span>`;
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    const isLikelyDate = /^\d{4}-\d{2}-\d{2}/.test(trimmed) || trimmed.includes("T");
+    if (isLikelyDate) {
+      const parsed = Date.parse(trimmed);
+      if (!Number.isNaN(parsed)) {
+        return `<span>${escapeHtml(new Date(parsed).toLocaleDateString("es-GT"))}</span>`;
+      }
+    }
+    try {
+      const parsedUrl = new URL(trimmed);
+      if (parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:") {
+        const safeHref = escapeHtml(parsedUrl.toString());
+        return `<a class="zenit-popup-link" href="${safeHref}" target="_blank" rel="noopener noreferrer">${safeHref}</a>`;
+      }
+    } catch {
+    }
+    return `<span>${escapeHtml(trimmed || value)}</span>`;
+  }
   if (typeof value === "object") {
     const json = safeJsonStringify(value);
     return `<pre class="zenit-popup-pre">${escapeHtml(json)}</pre>`;
@@ -1842,13 +1934,29 @@ function isDescriptionKey(key) {
   const normalized = key.trim().toLowerCase();
   return DESCRIPTION_KEYS.has(normalized);
 }
+function extractPopupHeader(properties) {
+  if (!properties) return null;
+  const entry = Object.entries(properties).find(
+    (candidate) => {
+      const [key, value] = candidate;
+      return POPUP_HEADER_KEYS.includes(key.trim().toLowerCase()) && typeof value === "string" && value.trim().length > 0;
+    }
+  );
+  if (!entry) return null;
+  return entry[1].trim();
+}
 function formatLabel(key) {
   return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
 }
 function createPopupContent(properties) {
-  const entries = Object.entries(properties).filter(
-    ([key, value]) => shouldIncludePopupEntry(key, value)
-  );
+  const headerText = extractPopupHeader(properties);
+  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;
+    }
+    return true;
+  });
   if (entries.length === 0) {
     return `<div class="zenit-popup-card"><div class="zenit-popup-empty">Sin datos disponibles</div></div>`;
   }
@@ -1876,7 +1984,10 @@ function createPopupContent(properties) {
         </div>
       `;
   }).join("");
-  return `<div class="zenit-popup-card">${rowsHtml}</div>`;
+  const headerHtml = headerText ? `<div class="zenit-popup-header"><div class="zenit-popup-title">${escapeHtml(
+    headerText
+  )}</div></div>` : "";
+  return `<div class="zenit-popup-card">${headerHtml}${rowsHtml}</div>`;
 }
 function withAlpha(color, alpha) {
   const trimmed = color.trim();
@@ -2101,6 +2212,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
   const [mapInstance, setMapInstance] = (0, import_react.useState)(null);
   const [panesReady, setPanesReady] = (0, import_react.useState)(false);
   const [currentZoom, setCurrentZoom] = (0, import_react.useState)(initialZoom ?? DEFAULT_ZOOM);
+  const [isPopupOpen, setIsPopupOpen] = (0, import_react.useState)(false);
   const [isMobile, setIsMobile] = (0, import_react.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(max-width: 768px)").matches;
@@ -2129,6 +2241,31 @@ var ZenitMap = (0, import_react.forwardRef)(({
       ensurePopupStyles();
     }
   }, [featureInfoMode]);
+  (0, import_react.useEffect)(() => {
+    if (featureInfoMode !== "popup") {
+      setIsPopupOpen(false);
+    }
+  }, [featureInfoMode]);
+  (0, import_react.useEffect)(() => {
+    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]);
+  (0, import_react.useEffect)(() => {
+    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 = (0, import_react.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     (map?.mapLayers ?? []).forEach((entry) => {
@@ -2420,15 +2557,13 @@ var ZenitMap = (0, import_react.forwardRef)(({
       const baseZIndex = 400;
       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 labelPaneName = `zenit-layer-${layer.layerId}-labels`;
         const fillPane = targetMap.getPane(fillPaneName) ?? targetMap.createPane(fillPaneName);
         const pointPane = targetMap.getPane(pointPaneName) ?? targetMap.createPane(pointPaneName);
-        const labelPane = targetMap.getPane(labelPaneName) ?? targetMap.createPane(labelPaneName);
-        fillPane.style.zIndex = String(baseZIndex + order);
-        pointPane.style.zIndex = String(baseZIndex + order + 1e3);
-        labelPane.style.zIndex = String(baseZIndex + order + 2e3);
+        fillPane.style.zIndex = String(baseZIndex + orderOffset);
+        pointPane.style.zIndex = String(baseZIndex + orderOffset + 100);
       });
     },
     []
@@ -2455,8 +2590,9 @@ var ZenitMap = (0, import_react.forwardRef)(({
     }));
     ensureLayerPanes(mapInstance, layerTargets);
     const first = layerTargets[0];
-    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-labels`);
-    if (testPane) {
+    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-fill`);
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME);
+    if (testPane && labelsPane) {
       setPanesReady(true);
     }
   }, [mapInstance, orderedLayers, ensureLayerPanes]);
@@ -2481,7 +2617,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
             maxWidth,
             minWidth,
             maxHeight,
-            className: "zenit-leaflet-popup",
+            className: "zenit-leaflet-popup custom-leaflet-popup",
             autoPan: true,
             closeButton: true,
             keepInView: true,
@@ -2506,7 +2642,8 @@ var ZenitMap = (0, import_react.forwardRef)(({
               id: layerId,
               geometry: feature.geometry
             }).then((response) => {
-              const candidates = response.data?.features ?? [];
+              const geo = extractGeoJsonFeatureCollection(response);
+              const candidates = geo?.features ?? [];
               const resolved = pickIntersectFeature(feature, candidates);
               if (!resolved?.properties) return;
               const mergedProperties = {
@@ -2709,87 +2846,93 @@ var ZenitMap = (0, import_react.forwardRef)(({
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_react_leaflet.MapContainer,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
           {
-            center,
-            zoom,
-            style: { height: "100%", width: "100%" },
-            scrollWheelZoom: true,
-            zoomControl: false,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react_leaflet.TileLayer,
-                {
-                  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                  attribution: "\xA9 OpenStreetMap contributors"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_leaflet.ZoomControl, { position: "topright" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapInstanceBridge, { onReady: handleMapReady }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FitToBounds, { bbox: explicitZoomBBox ?? void 0 }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoFitToBounds, { bbox: autoZoomBBox ?? void 0, enabled: !explicitZoomBBox }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
-              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 labelPaneName = `zenit-layer-${layerState.mapLayer.layerId}-labels`;
-                const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
-                const data = layerState.data?.features ?? [];
-                const fillFeatures = data.filter(isNonPointGeometry);
-                const pointFeatures = data.filter(isPointGeometry);
-                const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
-                const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-                  fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.GeoJSON,
+            className: `zenit-map-shell${isPopupOpen ? " popup-open" : ""}`,
+            style: { flex: 1, position: "relative" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_react_leaflet.MapContainer,
+              {
+                center,
+                zoom,
+                style: { height: "100%", width: "100%" },
+                scrollWheelZoom: true,
+                zoomControl: false,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_leaflet.TileLayer,
                     {
-                      data: fillData,
-                      pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
-                      style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
-                      onEachFeature: overlayOnEachFeature
+                      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      attribution: "\xA9 OpenStreetMap contributors"
                     }
                   ),
-                  pointsData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_leaflet.ZoomControl, { position: "topright" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapInstanceBridge, { onReady: handleMapReady }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FitToBounds, { bbox: explicitZoomBBox ?? void 0 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoFitToBounds, { bbox: autoZoomBBox ?? void 0, enabled: !explicitZoomBBox }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
+                  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 data = layerState.data?.features ?? [];
+                    const fillFeatures = data.filter(isNonPointGeometry);
+                    const pointFeatures = data.filter(isPointGeometry);
+                    const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
+                    const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+                      fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_leaflet.GeoJSON,
+                        {
+                          data: fillData,
+                          pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
+                          style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
+                          onEachFeature: overlayOnEachFeature
+                        }
+                      ),
+                      pointsData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        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,
+                            ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
+                          }),
+                          onEachFeature: overlayOnEachFeature
+                        }
+                      ),
+                      panesReady && mapInstance?.getPane(LABELS_PANE_NAME) ? labelMarkers.filter(
+                        (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
+                      ).map((marker) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_leaflet.Marker,
+                        {
+                          position: marker.position,
+                          icon: buildLabelIcon(marker.label, marker.opacity, marker.color),
+                          interactive: false,
+                          pane: LABELS_PANE_NAME
+                        },
+                        marker.key
+                      )) : null
+                    ] }, layerState.mapLayer.layerId.toString());
+                  }),
+                  overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     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,
-                        ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
-                      }),
+                      data: overlayGeojson,
+                      style: overlayStyleFunction,
                       onEachFeature: overlayOnEachFeature
-                    }
-                  ),
-                  panesReady && mapInstance?.getPane(labelPaneName) ? labelMarkers.filter(
-                    (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
-                  ).map((marker) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.Marker,
-                    {
-                      position: marker.position,
-                      icon: buildLabelIcon(marker.label, marker.opacity, marker.color),
-                      interactive: false,
-                      pane: labelPaneName
                     },
-                    marker.key
-                  )) : null
-                ] }, layerState.mapLayer.layerId.toString());
-              }),
-              overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react_leaflet.GeoJSON,
-                {
-                  data: overlayGeojson,
-                  style: overlayStyleFunction,
-                  onEachFeature: overlayOnEachFeature
-                },
-                "zenit-overlay-geojson"
-              )
-            ]
-          },
-          String(mapId)
-        ) }),
+                    "zenit-overlay-geojson"
+                  )
+                ]
+              },
+              String(mapId)
+            )
+          }
+        ),
         showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {