zenit-sdk 0.0.5 → 0.0.7

package/dist/index.js

@@ -1519,6 +1519,278 @@ 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_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%;
+  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;
+}
+
+/* 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;
+}
+
+/* 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-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);
+}
+`;
+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") {
@@ -1546,92 +1818,65 @@ function safeJsonStringify(value) {
   }
   return String(value);
 }
-function renderPropertyValue(value) {
+function renderPopupValue(value) {
   if (value === null || value === void 0) {
-    return '<span class="prop-empty">\u2014</span>';
+    return '<span class="zenit-popup-empty">Sin datos</span>';
   }
   if (typeof value === "object") {
     const json = safeJsonStringify(value);
-    return `<pre class="prop-json">${escapeHtml(json)}</pre>`;
+    return `<pre class="zenit-popup-pre">${escapeHtml(json)}</pre>`;
   }
-  return `<span class="prop-text">${escapeHtml(String(value))}</span>`;
+  return `<span>${escapeHtml(String(value))}</span>`;
 }
-var POPUP_TITLE_KEYS = ["name", "title", "nombre", "label", "id"];
-var POPUP_CHIP_KEYS = /* @__PURE__ */ new Set(["churn", "color", "sector"]);
-function isChipValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+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 getSanitizedChipColor(value) {
-  if (typeof value !== "string") return null;
-  const trimmed = value.trim();
-  if (/^#([0-9a-fA-F]{3}){1,2}$/.test(trimmed)) {
-    return trimmed;
-  }
-  if (/^rgb\((\s*\d+\s*,){2}\s*\d+\s*\)$/.test(trimmed)) {
-    return trimmed;
-  }
-  if (/^rgba\((\s*\d+\s*,){3}\s*(0|1|0?\.\d+)\s*\)$/.test(trimmed)) {
-    return trimmed;
-  }
-  return null;
+function isDescriptionKey(key) {
+  const normalized = key.trim().toLowerCase();
+  return DESCRIPTION_KEYS.has(normalized);
 }
-function getPopupTitle(entries) {
-  for (const candidate of POPUP_TITLE_KEYS) {
-    const match = entries.find((entry) => entry.normalized === candidate);
-    if (!match || match.value === null || match.value === void 0) continue;
-    const value = String(match.value).trim();
-    if (!value) continue;
-    return { title: value, key: match.key };
-  }
-  return null;
+function formatLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
 }
-function renderProperties(properties) {
-  const description = extractDescriptionValue(properties);
-  const entries = Object.entries(properties).filter(([key]) => !DESCRIPTION_KEYS.has(key.toLowerCase())).map(([key, value]) => ({
-    key,
-    value,
-    normalized: key.trim().toLowerCase()
-  }));
-  if (!description && entries.length === 0) return "";
-  const titleEntry = getPopupTitle(entries);
-  const titleText = titleEntry?.title ?? "Detalle del elemento";
-  const chipEntries = entries.filter(
-    (entry) => POPUP_CHIP_KEYS.has(entry.normalized) && isChipValue(entry.value)
+function createPopupContent(properties) {
+  const entries = Object.entries(properties).filter(
+    ([key, value]) => shouldIncludePopupEntry(key, value)
   );
-  const listEntries = entries.filter((entry) => {
-    if (titleEntry && entry.key === titleEntry.key) return false;
-    if (chipEntries.find((chip) => chip.key === entry.key)) return false;
-    return true;
-  });
-  const descriptionHtml = description ? `<div class="popup-description">${escapeHtml(description)}</div>` : "";
-  const chipsHtml = chipEntries.length ? `<div class="popup-chip-row">${chipEntries.map((entry) => {
-    const label = escapeHtml(entry.key.replace(/_/g, " "));
-    const value = escapeHtml(String(entry.value));
-    const color = getSanitizedChipColor(entry.value);
-    const colorStyle = color ? ` style="--chip-color: ${color}"` : "";
-    return `<span class="popup-chip"${colorStyle}><span class="popup-chip-label">${label}</span><span class="popup-chip-value">${value}</span></span>`;
-  }).join("")}</div>` : "";
-  const rowsHtml = listEntries.map((entry) => {
-    const label = escapeHtml(entry.key.replace(/_/g, " "));
-    const valueHtml = renderPropertyValue(entry.value);
-    return `<div class="prop-key">${label}</div><div class="prop-value">${valueHtml}</div>`;
-  }).join("");
-  const listHtml = rowsHtml ? `<div class="prop-list">${rowsHtml}</div>` : "";
-  return `
-    <div class="feature-popup">
-      <div class="feature-popup-card">
-        <div class="feature-popup-header">
-          <p class="popup-eyebrow">Informaci\xF3n</p>
-          <h3 class="popup-title">${escapeHtml(titleText)}</h3>
-        </div>
-        <div class="feature-popup-body">
-          ${descriptionHtml}
-          ${chipsHtml}
-          ${listHtml}
-        </div>
+  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>
-    </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("");
+  return `<div class="zenit-popup-card">${rowsHtml}</div>`;
 }
 function withAlpha(color, alpha) {
   const trimmed = color.trim();
@@ -1701,7 +1946,7 @@ function getFeatureStyleOverrides(feature) {
 function buildFeaturePopupHtml(feature) {
   const properties = feature?.properties;
   if (!properties) return null;
-  const rendered = renderProperties(properties);
+  const rendered = createPopupContent(properties);
   return rendered ? rendered : null;
 }
 var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
@@ -1879,6 +2124,11 @@ var ZenitMap = (0, import_react.forwardRef)(({
     }
     return;
   }, []);
+  (0, import_react.useEffect)(() => {
+    if (featureInfoMode === "popup") {
+      ensurePopupStyles();
+    }
+  }, [featureInfoMode]);
   const layerStyleIndex = (0, import_react.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     (map?.mapLayers ?? []).forEach((entry) => {
@@ -2226,12 +2476,15 @@ var ZenitMap = (0, import_react.forwardRef)(({
       if (featureInfoMode === "popup") {
         const content = buildFeaturePopupHtml(feature);
         if (content) {
+          const { maxWidth, minWidth, maxHeight } = getPopupDimensions();
           layer.bindPopup(content, {
-            maxWidth: 420,
-            minWidth: 280,
-            className: "zenit-feature-popup-shell",
+            maxWidth,
+            minWidth,
+            maxHeight,
+            className: "zenit-leaflet-popup",
             autoPan: true,
             closeButton: true,
+            keepInView: true,
             offset: import_leaflet.default.point(0, -24)
           });
         }