zenit-sdk 0.0.6 → 0.0.8

package/dist/index.js

@@ -1403,7 +1403,7 @@ function normalizeBbox(input) {
 }
 
 // src/react/ZenitMap.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_react_leaflet = require("react-leaflet");
 var import_leaflet = __toESM(require("leaflet"));
 
@@ -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;
@@ -1518,6 +1536,459 @@ function getFeatureLayerId(feature) {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+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 };
+var ZENIT_LEAFLET_POPUP_STYLES = `
+/* ===== Zenit Leaflet Popup - Modern Professional Styling ===== */
+
+/* Main popup wrapper */
+.zenit-leaflet-popup .leaflet-popup-content-wrapper {
+  border-radius: 12px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  padding: 0;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+/* Content area with scroll support */
+.zenit-leaflet-popup .leaflet-popup-content {
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #374151;
+  min-width: 100%;
+  max-height: min(70vh, 480px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+/* Popup tip/arrow shadow */
+.zenit-leaflet-popup .leaflet-popup-tip-container {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.zenit-leaflet-popup .leaflet-popup-tip {
+  background: #ffffff;
+  box-shadow: none;
+}
+
+/* Close button styling */
+.zenit-leaflet-popup .leaflet-popup-close-button {
+  color: #9ca3af;
+  font-size: 18px;
+  font-weight: 400;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin: 8px 8px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+  z-index: 10;
+}
+
+.zenit-leaflet-popup .leaflet-popup-close-button:hover {
+  color: #374151;
+  background-color: #f3f4f6;
+}
+
+.zenit-leaflet-popup .leaflet-popup-close-button:active {
+  background-color: #e5e7eb;
+}
+
+/* Main card container */
+.zenit-popup-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  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;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.zenit-popup-row:first-child {
+  padding-top: 0;
+}
+
+.zenit-popup-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+/* Label styling - small, gray, uppercase */
+.zenit-popup-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 1.4;
+}
+
+/* Value styling - darker, readable */
+.zenit-popup-value {
+  font-size: 13px;
+  font-weight: 400;
+  color: #1f2937;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  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;
+  margin: 0 -16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.zenit-popup-row.zenit-popup-description:first-child {
+  margin-top: 0;
+  border-radius: 0;
+}
+
+.zenit-popup-row.zenit-popup-description .zenit-popup-value {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #374151;
+  max-height: 150px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* Preformatted text (JSON objects) */
+.zenit-popup-pre {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #4b5563;
+  background-color: #f9fafb;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+}
+
+/* Empty state styling */
+.zenit-popup-empty {
+  font-size: 13px;
+  color: #9ca3af;
+  font-style: italic;
+  text-align: center;
+  padding: 20px 0;
+}
+
+/* Webkit scrollbar styling */
+.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.4);
+  border-radius: 3px;
+}
+
+.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(107, 114, 128, 0.6);
+}
+
+/* Scrollbar for description field */
+.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar {
+  width: 4px;
+}
+
+.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.4);
+  border-radius: 2px;
+}
+
+/* ===== Responsive: Mobile (<640px) ===== */
+@media (max-width: 640px) {
+  .zenit-leaflet-popup .leaflet-popup-content-wrapper {
+    border-radius: 10px;
+  }
+
+  .zenit-leaflet-popup .leaflet-popup-close-button {
+    width: 26px;
+    height: 26px;
+    font-size: 16px;
+    margin: 6px 6px 0 0;
+  }
+
+  .zenit-popup-card {
+    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;
+  }
+
+  .zenit-popup-label {
+    font-size: 9px;
+  }
+
+  .zenit-popup-value {
+    font-size: 12px;
+  }
+
+  .zenit-popup-row.zenit-popup-description {
+    margin: 0 -12px;
+    padding: 10px 12px;
+  }
+
+  .zenit-popup-row.zenit-popup-description .zenit-popup-value {
+    font-size: 12px;
+    max-height: 120px;
+  }
+
+  .zenit-popup-pre {
+    font-size: 10px;
+    padding: 6px;
+  }
+
+  .zenit-popup-empty {
+    font-size: 12px;
+    padding: 16px 0;
+  }
+}
+
+/* ===== Map tooltip styling ===== */
+.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 {
+  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;
+  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" || typeof window.matchMedia !== "function") {
+    return DESKTOP_POPUP_DIMENSIONS;
+  }
+  return window.matchMedia("(max-width: 640px)").matches ? MOBILE_POPUP_DIMENSIONS : DESKTOP_POPUP_DIMENSIONS;
+}
+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 safeJsonStringify(value) {
+  try {
+    const json = JSON.stringify(value, null, 2);
+    if (json !== void 0) return json;
+  } catch {
+  }
+  return String(value);
+}
+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>`;
+  }
+  return `<span>${escapeHtml(String(value))}</span>`;
+}
+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 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 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>`;
+  }
+  const descriptionEntry = entries.find(([key]) => isDescriptionKey(key));
+  const otherEntries = entries.filter(([key]) => !isDescriptionKey(key));
+  let rowsHtml = "";
+  if (descriptionEntry) {
+    const [key, value] = descriptionEntry;
+    const label = escapeHtml(formatLabel(key));
+    const valueHtml = renderPopupValue(value);
+    rowsHtml += `
+      <div class="zenit-popup-row zenit-popup-description">
+        <div class="zenit-popup-label">${label}</div>
+        <div class="zenit-popup-value">${valueHtml}</div>
+      </div>
+    `;
+  }
+  rowsHtml += otherEntries.map(([key, value]) => {
+    const label = escapeHtml(formatLabel(key));
+    const valueHtml = renderPopupValue(value);
+    return `
+        <div class="zenit-popup-row">
+          <div class="zenit-popup-label">${label}</div>
+          <div class="zenit-popup-value">${valueHtml}</div>
+        </div>
+      `;
+  }).join("");
+  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();
   if (trimmed.startsWith("#")) {
@@ -1586,40 +2057,39 @@ function getFeatureStyleOverrides(feature) {
 function buildFeaturePopupHtml(feature) {
   const properties = feature?.properties;
   if (!properties) return null;
-  const layerName = properties.layerName ?? properties.layer_name ?? properties.name;
-  const descripcion = properties.descripcion ?? properties.description;
-  const reservedKeys = /* @__PURE__ */ new Set([
-    "_style",
-    "layerId",
-    "layer_id",
-    "__zenit_layerId",
-    "layerName",
-    "layer_name",
-    "name",
-    "descripcion",
-    "description"
-  ]);
-  const extraEntries = Object.entries(properties).filter(([key, value]) => {
-    if (reservedKeys.has(key)) return false;
-    return ["string", "number", "boolean"].includes(typeof value);
-  }).slice(0, 5);
-  if (!layerName && !descripcion && extraEntries.length === 0) return null;
-  const parts = [];
-  if (layerName) {
-    parts.push(`<div style="font-weight:600;margin-bottom:4px;">${escapeHtml(layerName)}</div>`);
-  }
-  if (descripcion) {
-    parts.push(`<div style="margin-bottom:6px;">${escapeHtml(descripcion)}</div>`);
-  }
-  if (extraEntries.length > 0) {
-    const rows = extraEntries.map(([key, value]) => {
-      const label = escapeHtml(key.replace(/_/g, " "));
-      const val = escapeHtml(String(value));
-      return `<div><strong>${label}:</strong> ${val}</div>`;
-    }).join("");
-    parts.push(`<div style="font-size:12px;line-height:1.4;">${rows}</div>`);
-  }
-  return `<div>${parts.join("")}</div>`;
+  const rendered = createPopupContent(properties);
+  return rendered ? rendered : null;
+}
+var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
+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 buildFeatureCollection(features) {
+  return {
+    type: "FeatureCollection",
+    features
+  };
+}
+function pickIntersectFeature(baseFeature, candidates) {
+  if (!Array.isArray(candidates) || candidates.length === 0) return null;
+  const baseId = baseFeature?.id;
+  if (baseId !== void 0 && baseId !== null) {
+    const matchById = candidates.find((candidate) => candidate?.id === baseId);
+    if (matchById) return matchById;
+  }
+  const matchWithDescription = candidates.find(
+    (candidate) => extractDescriptionValue(candidate?.properties)
+  );
+  return matchWithDescription ?? candidates[0];
 }
 function normalizeCenterTuple(center) {
   if (!center) return null;
@@ -1740,7 +2210,9 @@ var ZenitMap = (0, import_react.forwardRef)(({
   const [loadingMap, setLoadingMap] = (0, import_react.useState)(false);
   const [mapError, setMapError] = (0, import_react.useState)(null);
   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;
@@ -1764,6 +2236,36 @@ var ZenitMap = (0, import_react.forwardRef)(({
     }
     return;
   }, []);
+  (0, import_react.useEffect)(() => {
+    if (featureInfoMode === "popup") {
+      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) => {
@@ -2054,16 +2556,21 @@ var ZenitMap = (0, import_react.forwardRef)(({
     (targetMap, targetLayers) => {
       const baseZIndex = 400;
       targetLayers.forEach((layer) => {
-        const paneName = `zenit-layer-${layer.layerId}`;
-        const pane = targetMap.getPane(paneName) ?? targetMap.createPane(paneName);
         const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
-        pane.style.zIndex = String(baseZIndex + order);
+        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(baseZIndex + orderOffset);
+        pointPane.style.zIndex = String(baseZIndex + orderOffset + 100);
       });
     },
     []
   );
   const handleMapReady = (0, import_react.useCallback)(
     (instance) => {
+      setPanesReady(false);
       setMapInstance(instance);
       onMapReady?.(instance);
     },
@@ -2071,6 +2578,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
   );
   (0, import_react.useEffect)(() => {
     if (!mapInstance) {
+      setPanesReady(false);
       return;
     }
     if (orderedLayers.length === 0) {
@@ -2081,6 +2589,12 @@ var ZenitMap = (0, import_react.forwardRef)(({
       displayOrder: layer.displayOrder
     }));
     ensureLayerPanes(mapInstance, layerTargets);
+    const first = layerTargets[0];
+    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-fill`);
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME);
+    if (testPane && labelsPane) {
+      setPanesReady(true);
+    }
   }, [mapInstance, orderedLayers, ensureLayerPanes]);
   const overlayOnEachFeature = (0, import_react.useMemo)(() => {
     return (feature, layer) => {
@@ -2098,7 +2612,17 @@ var ZenitMap = (0, import_react.forwardRef)(({
       if (featureInfoMode === "popup") {
         const content = buildFeaturePopupHtml(feature);
         if (content) {
-          layer.bindPopup(content, { maxWidth: 320 });
+          const { maxWidth, minWidth, maxHeight } = getPopupDimensions();
+          layer.bindPopup(content, {
+            maxWidth,
+            minWidth,
+            maxHeight,
+            className: "zenit-leaflet-popup custom-leaflet-popup",
+            autoPan: true,
+            closeButton: true,
+            keepInView: true,
+            offset: import_leaflet.default.point(0, -24)
+          });
         }
       }
       if (isPointFeature && layer.bindTooltip) {
@@ -2109,7 +2633,38 @@ var ZenitMap = (0, import_react.forwardRef)(({
           className: "zenit-map-tooltip"
         });
       }
-      layer.on("click", () => onFeatureClick?.(feature, layerId));
+      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);
+      });
       layer.on("mouseover", () => {
         if (layer instanceof import_leaflet.default.Path && originalStyle) {
           layer.setStyle({
@@ -2133,7 +2688,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
         }
       });
     };
-  }, [featureInfoMode, onFeatureClick, onFeatureHover]);
+  }, [client, featureInfoMode, onFeatureClick, onFeatureHover]);
   const buildLayerStyle = (layerId, baseOpacity, feature, layerType) => {
     const style = resolveLayerStyle(layerId);
     const featureStyleOverrides = getFeatureStyleOverrides(feature);
@@ -2291,68 +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 paneName = `zenit-layer-${layerState.mapLayer.layerId}`;
-                const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_react_leaflet.GeoJSON,
-                  {
-                    data: layerState.data,
-                    pane: mapInstance?.getPane(paneName) ? paneName : void 0,
-                    style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
-                    pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
-                      radius: isMobile ? 8 : 6,
-                      ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
-                    }),
-                    onEachFeature: overlayOnEachFeature
-                  },
-                  layerState.mapLayer.layerId.toString()
-                );
-              }),
-              overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react_leaflet.GeoJSON,
-                {
-                  data: overlayGeojson,
-                  style: overlayStyleFunction,
-                  onEachFeature: overlayOnEachFeature
-                },
-                "zenit-overlay-geojson"
-              ),
-              labelMarkers.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
-                },
-                marker.key
-              ))
-            ]
-          },
-          String(mapId)
-        ) }),
+            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,
+                    {
+                      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 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: overlayGeojson,
+                      style: overlayStyleFunction,
+                      onEachFeature: overlayOnEachFeature
+                    },
+                    "zenit-overlay-geojson"
+                  )
+                ]
+              },
+              String(mapId)
+            )
+          }
+        ),
         showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
@@ -3630,9 +4210,19 @@ var FloatingChatBox = ({
   getAccessToken,
   onActionClick,
   onOpenChange,
-  hideButton
+  hideButton,
+  open: openProp
 }) => {
-  const [open, setOpen] = (0, import_react4.useState)(false);
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (0, import_react4.useCallback)((value) => {
+    const newValue = typeof value === "function" ? value(open) : value;
+    if (!isControlled) {
+      setInternalOpen(newValue);
+    }
+    onOpenChange?.(newValue);
+  }, [isControlled, open, onOpenChange]);
   const [expanded, setExpanded] = (0, import_react4.useState)(false);
   const [messages, setMessages] = (0, import_react4.useState)([]);
   const [inputValue, setInputValue] = (0, import_react4.useState)("");
@@ -3649,9 +4239,6 @@ var FloatingChatBox = ({
   }, [accessToken, baseUrl, getAccessToken]);
   const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
   const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
-  (0, import_react4.useEffect)(() => {
-    onOpenChange?.(open);
-  }, [open, onOpenChange]);
   (0, import_react4.useEffect)(() => {
     if (open && isMobile) {
       setExpanded(true);
@@ -3804,6 +4391,13 @@ var FloatingChatBox = ({
       ] }, index)) })
     ] });
   };
+  const handleActionClick = (0, import_react4.useCallback)((action) => {
+    if (isStreaming) return;
+    setOpen(false);
+    requestAnimationFrame(() => {
+      onActionClick?.(action);
+    });
+  }, [isStreaming, setOpen, onActionClick]);
   const renderActions = (response) => {
     if (!response?.suggestedActions?.length) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.actionsSection, children: [
@@ -3817,7 +4411,7 @@ var FloatingChatBox = ({
             opacity: isStreaming ? 0.5 : 1,
             cursor: isStreaming ? "not-allowed" : "pointer"
           },
-          onClick: () => !isStreaming && onActionClick?.(action),
+          onClick: () => handleActionClick(action),
           disabled: isStreaming,
           onMouseEnter: (e) => {
             if (!isStreaming) {