@magicfeedback/popup-sdk 1.7.0 → 1.7.2

package/dist/react-native.js

@@ -446,6 +446,82 @@ var init_labels = __esm({
   }
 });
 
+// src/ui/reveal.ts
+function revealWhenPainted(root, reveal) {
+  const pending2 = Array.from(root.querySelectorAll("img")).filter((img) => !img.complete);
+  if (!pending2.length) {
+    reveal();
+    return;
+  }
+  let left = pending2.length;
+  const onSettled = () => {
+    left -= 1;
+    if (left <= 0) reveal();
+  };
+  pending2.forEach((img) => {
+    img.addEventListener("load", onSettled, { once: true });
+    img.addEventListener("error", onSettled, { once: true });
+  });
+}
+var REVEAL_TIMEOUT_MS;
+var init_reveal = __esm({
+  "src/ui/reveal.ts"() {
+    "use strict";
+    REVEAL_TIMEOUT_MS = 1200;
+  }
+});
+
+// src/ui/surveyPalette.ts
+function resolveSurveyPrimaryColor(style) {
+  for (const candidate of [style?.primaryColor, style?.buttonPrimaryColor]) {
+    const value = (candidate ?? "").trim();
+    if (HEX_COLOR.test(value)) return value;
+  }
+  return null;
+}
+function surveyPrimaryVars(color) {
+  return [
+    ["--mf-primary", color],
+    ["--mf-primary-hover", `color-mix(in srgb, ${color} 85%, black)`],
+    ["--mf-primary-light", `color-mix(in srgb, ${color} 15%, white)`],
+    ["--mf-primary-border", `color-mix(in srgb, ${color} 35%, transparent)`],
+    ["--mf-border-focus", color]
+  ];
+}
+function applySurveyPrimaryColor(el, style) {
+  const color = resolveSurveyPrimaryColor(style);
+  if (!color) return;
+  for (const [name, value] of surveyPrimaryVars(color)) {
+    el.style.setProperty(name, value);
+  }
+}
+var HEX_COLOR, PRIMARY_COLOR_JS;
+var init_surveyPalette = __esm({
+  "src/ui/surveyPalette.ts"() {
+    "use strict";
+    HEX_COLOR = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+    PRIMARY_COLOR_JS = `
+function ddResolveSurveyPrimaryColor(style){
+  var hex=/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+  var candidates=[style&&style.primaryColor, style&&style.buttonPrimaryColor];
+  for(var i=0;i<candidates.length;i++){
+    var value=(candidates[i]||'').trim();
+    if(hex.test(value)){ return value; }
+  }
+  return null;
+}
+function ddApplySurveyPrimaryColor(el, style){
+  var color=ddResolveSurveyPrimaryColor(style);
+  if(!color||!el){ return; }
+  el.style.setProperty('--mf-primary', color);
+  el.style.setProperty('--mf-primary-hover', 'color-mix(in srgb, '+color+' 85%, black)');
+  el.style.setProperty('--mf-primary-light', 'color-mix(in srgb, '+color+' 15%, white)');
+  el.style.setProperty('--mf-primary-border', 'color-mix(in srgb, '+color+' 35%, transparent)');
+  el.style.setProperty('--mf-border-focus', color);
+}`;
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
@@ -2338,6 +2414,8 @@ var init_logo = __esm({
 // src/ui/renderPopup.ts
 var renderPopup_exports = {};
 __export(renderPopup_exports, {
+  REVEAL_TIMEOUT_MS: () => REVEAL_TIMEOUT_MS,
+  SURVEY_ALIGNMENT_STYLE_ID: () => SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup: () => renderPopup
 });
 function ensureMagicFeedbackStyles(_popup) {
@@ -2348,6 +2426,17 @@ function ensureMagicFeedbackStyles(_popup) {
   style.textContent = style_default;
   document.head.appendChild(style);
 }
+function ensureSurveyAlignmentStyles() {
+  if (document.getElementById(SURVEY_ALIGNMENT_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SURVEY_ALIGNMENT_STYLE_ID;
+  style.textContent = `
+    .deepdots-popup .magicfeedback-container,
+    .deepdots-popup .magicfeedback-form,
+    .deepdots-popup .magicfeedback-div { padding-left: 0; padding-right: 0; }
+  `;
+  document.head.appendChild(style);
+}
 function ensureSpinnerStyles(_popup) {
   if (document.getElementById("deepdots-spinner-styles")) return;
   const style = document.createElement("style");
@@ -2600,6 +2689,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
   ensureMagicFeedbackStyles(popup);
+  ensureSurveyAlignmentStyles();
   ensureSpinnerStyles(popup);
   ensureResponsiveStyles(popup);
   ensureCustomCss(options?.surveyCss);
@@ -2658,7 +2748,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -2688,7 +2778,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -2715,7 +2805,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -2746,7 +2836,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -2848,14 +2938,35 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   container.innerHTML = "";
   container.appendChild(popup);
   container.style.display = "flex";
+  container.style.visibility = "hidden";
+  container.style.pointerEvents = "none";
   container.style.justifyContent = pos.justifyContent;
   container.style.alignItems = pos.alignItems;
   container.style.background = pos.background;
   if (pos.padding) container.style.padding = pos.padding;
+  let revealed = false;
+  let revealTimer = null;
+  function reveal() {
+    if (revealed) return;
+    revealed = true;
+    if (revealTimer !== null) {
+      clearTimeout(revealTimer);
+      revealTimer = null;
+    }
+    if (!container.contains(popup)) return;
+    container.style.visibility = "visible";
+    container.style.pointerEvents = "";
+  }
+  function revealWhenPainted2() {
+    if (revealed) return;
+    revealWhenPainted(popup, reveal);
+  }
+  revealTimer = setTimeout(reveal, REVEAL_TIMEOUT_MS);
   function setLoading(isLoading) {
     spinnerEl.style.display = isLoading ? "flex" : "none";
     if (!isLoading) {
       formHost.style.visibility = "visible";
+      revealWhenPainted2();
     }
     footer.style.display = isLoading ? "none" : "flex";
     backButton.disabled = isLoading;
@@ -2918,6 +3029,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         if (s.contentAlign) {
           main.style.justifyContent = s.contentAlign === "center" ? "center" : "flex-start";
         }
+        applySurveyPrimaryColor(popup, s);
         if (s.buttonPrimaryColor) {
           submitButton.style.background = s.buttonPrimaryColor;
           submitButton.style.border = "none";
@@ -2999,17 +3111,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     setLoading(false);
   }
 }
-var import_native;
+var import_native, SURVEY_ALIGNMENT_STYLE_ID;
 var init_renderPopup = __esm({
   "src/ui/renderPopup.ts"() {
     "use strict";
     init_tracking_manager();
     init_font();
     init_logo();
+    init_surveyPalette();
     init_logger();
     init_labels();
+    init_reveal();
     import_native = __toESM(require("@magicfeedback/native"));
     init_style();
+    init_reveal();
+    SURVEY_ALIGNMENT_STYLE_ID = "deepdots-survey-alignment";
   }
 });
 
@@ -3220,7 +3336,33 @@ init_tracking_manager();
 // src/ui/surveyHtml.ts
 init_font();
 init_labels();
+init_reveal();
+init_surveyPalette();
 init_style();
+var REVEAL_JS = `
+function ddCreateReveal(popup, onReveal, timeoutMs){
+  var revealed=false, timer=null;
+  function reveal(){
+    if(revealed){ return; }
+    revealed=true;
+    if(timer){ clearTimeout(timer); timer=null; }
+    onReveal();
+  }
+  function revealWhenPainted(){
+    if(revealed){ return; }
+    var imgs=popup.querySelectorAll('img'), pending=[];
+    for(var i=0;i<imgs.length;i++){ if(!imgs[i].complete){ pending.push(imgs[i]); } }
+    if(!pending.length){ reveal(); return; }
+    var left=pending.length;
+    function onSettled(){ left--; if(left<=0){ reveal(); } }
+    for(var j=0;j<pending.length;j++){
+      pending[j].addEventListener('load', onSettled);
+      pending[j].addEventListener('error', onSettled);
+    }
+  }
+  timer=setTimeout(reveal, timeoutMs);
+  return { reveal: reveal, whenPainted: revealWhenPainted };
+}`;
 var POSITION_MAP = {
   center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
   bottom: { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
@@ -3294,7 +3436,13 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+/* Apertura diferida: ni la tarjeta ni el velo se pintan hasta que el survey est\xE1 listo
+   (\`dd-ready\`). Si el fondo entrara antes, en RN se ver\xEDa el velo oscuro varios cientos de ms
+   antes que el contenido, que es la misma mala sensaci\xF3n que el spinner. */
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:transparent;padding:${bodyPadding};box-sizing:border-box}
+body.dd-ready{background:${bodyBg}}
+#dd-popup{visibility:hidden}
+body.dd-ready #dd-popup{visibility:visible}
 .deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};height:${cardHeight};max-height:${cardMaxHeight};box-sizing:border-box}
 .deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
 /* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
@@ -3328,6 +3476,13 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
+/* El margen lateral lo pone la tarjeta: el CSS del survey lo a\xF1ade otra vez en el contenedor, en
+   el formulario y en el bloque de cada pregunta, y eso deja el enunciado y las opciones m\xE1s
+   adentro que el logo, el t\xEDtulo y la barra de progreso. Solo el lateral; el vertical separa las
+   preguntas. Mismas reglas que en el popup DOM (renderPopup.ts). */
+.deepdots-popup .magicfeedback-container,
+.deepdots-popup .magicfeedback-form,
+.deepdots-popup .magicfeedback-div{padding-left:0;padding-right:0}
 #dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
@@ -3335,7 +3490,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .deepdots-success img{max-width:100%;height:auto;margin:0 auto 16px auto;display:block}
 .deepdots-success p{margin:0;font-size:16px;font-weight:600;line-height:1.4}
 .deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:4px;margin-top:auto;width:100%;padding-top:12px}
-.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
+.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
 /* Secundario como bot\xF3n de texto: sin borde ni fondo, para que el primario sea la \xFAnica CTA. */
 #dd-back{background:transparent;color:${textMuted};border:none}
 #dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
@@ -3560,9 +3715,23 @@ ${customCss}
     }
   }
 
+${PRIMARY_COLOR_JS}
+${REVEAL_JS}
+  // El popup se ense\xF1a cuando el survey est\xE1 pintado; \`ready\` deja al host abrir su propio
+  // Modal en ese momento en vez de montar un WebView en blanco.
+  var ddReveal=ddCreateReveal(popup, function(){
+    document.body.classList.add('dd-ready');
+    emitJSON('ready');
+  }, ${REVEAL_TIMEOUT_MS});
+
   function setLoading(isLoading){
     spinner.style.display=isLoading?'flex':'none';
-    if(!isLoading){ formHost.style.visibility='visible'; }
+    if(!isLoading){
+      formHost.style.visibility='visible';
+      // Fin de la carga, sea por survey cargado o por error. Entre p\xE1ginas es no-op: la
+      // revelaci\xF3n solo act\xFAa la primera vez.
+      ddReveal.whenPainted();
+    }
     footer.style.display=isLoading?'none':'flex';
     backBtn.disabled=isLoading; startBtn.disabled=isLoading; completeBtn.disabled=isLoading; submitBtn.disabled=isLoading;
     if(isLoading){ updateButtons(null); }
@@ -3605,6 +3774,10 @@ ${customCss}
             if(s.loadingBarColor){ progressBar.style.background=s.loadingBarColor; progressFollowUp.style.background=s.loadingBarColor; }
             if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
+            // El survey pinta sus controles con --mf-primary, que sale de primaryColor; si la
+            // integraci\xF3n solo configura el del bot\xF3n, el popup mezclar\xEDa el color de la marca
+            // con el gris azulado por defecto del paquete.
+            ddApplySurveyPrimaryColor(popup, s);
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
               startBtn.style.background=s.buttonPrimaryColor; startBtn.style.border='none'; startBtn.style.color='#fff';
@@ -3696,7 +3869,9 @@ ${customCss}
 }
 
 // src/platform/react-native-renderer.ts
+init_reveal();
 init_logger();
+var NATIVE_READY_GRACE_MS = 500;
 var ReactNativePopupRenderer = class {
   constructor(options = {}) {
     this.options = options;
@@ -3704,6 +3879,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = null;
     this.currentSurveyId = null;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.readyTimer = null;
   }
   init() {
   }
@@ -3712,6 +3889,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.armReadyFallback(surveyId);
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
     const html = buildSurveyHtml({
       surveyId,
@@ -3739,9 +3918,32 @@ var ReactNativePopupRenderer = class {
     }
   }
   hide() {
+    this.clearReadyFallback();
     this.options.onHide?.();
     this.currentSurveyId = null;
   }
+  /** Respaldo del aviso de listo por si el WebView no llega a ejecutar el HTML. */
+  armReadyFallback(surveyId) {
+    this.clearReadyFallback();
+    if (!this.options.onReady) return;
+    this.readyTimer = setTimeout(() => {
+      this.readyTimer = null;
+      this.emitReady(surveyId);
+    }, REVEAL_TIMEOUT_MS + NATIVE_READY_GRACE_MS);
+  }
+  clearReadyFallback() {
+    if (this.readyTimer !== null) {
+      clearTimeout(this.readyTimer);
+      this.readyTimer = null;
+    }
+  }
+  /** Idempotente: el WebView puede avisar a la vez que vence el respaldo. */
+  emitReady(surveyId) {
+    if (this.readyEmitted) return;
+    this.readyEmitted = true;
+    this.clearReadyFallback();
+    this.options.onReady?.({ surveyId });
+  }
   /**
    * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
    * eventos del SDK: primera interacción → `popup_clicked` (PARTIAL), completado →
@@ -3757,6 +3959,9 @@ var ReactNativePopupRenderer = class {
       name = raw;
     }
     switch (name) {
+      case "ready":
+        this.emitReady(surveyId);
+        break;
       case "loaded":
       case "before_submit":
       case "after_submit":
@@ -3784,6 +3989,33 @@ function createReactNativeRenderer() {
   return new ReactNativePopupRenderer();
 }
 
+// src/ui/preload.ts
+var defaultLoader = () => Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports));
+var pending = null;
+function preloadRenderPopup(loader = defaultLoader) {
+  if (pending) return pending;
+  try {
+    pending = loader().then(() => void 0).catch(() => {
+      pending = null;
+    });
+  } catch {
+    pending = null;
+    return Promise.resolve();
+  }
+  return pending;
+}
+function schedulePreloadRenderPopup(loader) {
+  const run = () => {
+    void preloadRenderPopup(loader);
+  };
+  const idle = globalThis.requestIdleCallback;
+  if (typeof idle === "function") {
+    idle(run, { timeout: 2e3 });
+    return;
+  }
+  setTimeout(run, 0);
+}
+
 // src/platform/renderer.ts
 var NoopPopupRenderer = class {
   show() {
@@ -3818,6 +4050,13 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
+  /**
+   * Descarga el chunk de `renderPopup` antes de que ningún trigger dispare, para que abrir el
+   * popup no empiece por esperar ~238 KB de JS.
+   */
+  preload() {
+    schedulePreloadRenderPopup();
+  }
   show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome, options) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
@@ -3832,6 +4071,8 @@ var BrowserPopupRenderer = class {
     this.visible = false;
     if (this.container) {
       this.container.style.display = "none";
+      this.container.style.visibility = "";
+      this.container.style.pointerEvents = "";
       this.container.innerHTML = "";
     }
   }
@@ -4580,6 +4821,75 @@ var CrashReporter = class {
   }
 };
 
+// src/core/popup-state-store.ts
+var POPUP_STATE_STORAGE_KEY = "deepdots.popups.state";
+var MAX_TRACKED_POPUP_ENTRIES = 200;
+function emptyState() {
+  return { lastShown: {}, progress: {} };
+}
+function isValidTimestamp(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function capEntries(entries, timestampOf) {
+  if (entries.length <= MAX_TRACKED_POPUP_ENTRIES) return entries;
+  return [...entries].sort((a, b) => timestampOf(b[1]) - timestampOf(a[1])).slice(0, MAX_TRACKED_POPUP_ENTRIES);
+}
+function readPopupState(storage) {
+  let raw = null;
+  try {
+    raw = storage.getItem(POPUP_STATE_STORAGE_KEY);
+  } catch {
+    return emptyState();
+  }
+  if (!raw) return emptyState();
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return emptyState();
+  }
+  if (typeof parsed !== "object" || parsed === null) return emptyState();
+  const source = parsed;
+  const state = emptyState();
+  if (typeof source.lastShown === "object" && source.lastShown !== null) {
+    const valid = Object.entries(source.lastShown).filter((entry) => isValidTimestamp(entry[1]));
+    capEntries(valid, (timestamp) => timestamp).forEach(([popupId, timestamp]) => {
+      state.lastShown[popupId] = timestamp;
+    });
+  }
+  if (typeof source.progress === "object" && source.progress !== null) {
+    const valid = Object.entries(source.progress).filter((entry) => {
+      const value = entry[1];
+      if (typeof value !== "object" || value === null) return false;
+      const candidate = value;
+      return POPUP_TRIGGER_CONDITION_STATUSES.includes(candidate.status) && isValidTimestamp(candidate.timestamp);
+    });
+    capEntries(valid, (entry) => entry.timestamp).forEach(([surveyId, entry]) => {
+      state.progress[surveyId] = { status: entry.status, timestamp: entry.timestamp };
+    });
+  }
+  return state;
+}
+function writePopupState(storage, state) {
+  const capped = emptyState();
+  capEntries(Object.entries(state.lastShown), (timestamp) => timestamp).forEach(([popupId, timestamp]) => {
+    capped.lastShown[popupId] = timestamp;
+  });
+  capEntries(Object.entries(state.progress), (entry) => entry.timestamp).forEach(([surveyId, entry]) => {
+    capped.progress[surveyId] = entry;
+  });
+  try {
+    storage.setItem(POPUP_STATE_STORAGE_KEY, JSON.stringify(capped));
+  } catch {
+  }
+}
+function clearPopupState(storage) {
+  try {
+    storage.removeItem(POPUP_STATE_STORAGE_KEY);
+  } catch {
+  }
+}
+
 // src/core/deepdots-popups.ts
 init_logger();
 
@@ -4670,6 +4980,10 @@ var DeepdotsPopups = class {
     this.popupDefinitions = [];
     this.popupsLoaded = false;
     this.pendingAutoLaunch = false;
+    // Estado que alimenta las reglas de redisplay. Copia de trabajo en memoria; la fuente
+    // duradera es el storage (`popup-state-store`), rehidratada en `init()` — sin eso, una
+    // recarga reiniciaba el cooldown y el popup volvía a salir. `answeredSurveys` se deriva
+    // de las entradas COMPLETED de `surveyProgress` (los dos los escribe `markSurveyAnswered`).
     this.answeredSurveys = /* @__PURE__ */ new Set();
     this.surveyProgress = /* @__PURE__ */ new Map();
     this.lastShown = /* @__PURE__ */ new Map();
@@ -4745,6 +5059,7 @@ var DeepdotsPopups = class {
     };
     const storage = config.storage ?? createDefaultStorage();
     this.storage = storage;
+    this.loadPopupState(storage);
     this.tracking = new TrackingManager({
       storage,
       clientUserId: this.config.userId,
@@ -4834,6 +5149,7 @@ var DeepdotsPopups = class {
       this.popupDefinitions = this.validatePopupDefinitions(defs);
       this.popupsLoaded = true;
       this.log("Popups loaded from API", this.popupDefinitions);
+      if (this.popupDefinitions.length) this.renderer.preload?.();
       this.configureTriggersFromDefinitions();
       this.processDeferredExitQueue();
       if (this.pendingAutoLaunch) {
@@ -5012,6 +5328,10 @@ var DeepdotsPopups = class {
     }) : null;
     this.analytics?.resetUserScope();
     this.messageGuard.reset();
+    this.lastShown.clear();
+    this.surveyProgress.clear();
+    this.answeredSurveys.clear();
+    clearPopupState(storage);
     this.log("tracking \xB7 user_change \xB7 user_id:", this.tracking.getUserId());
     this.openSession();
   }
@@ -5183,6 +5503,7 @@ var DeepdotsPopups = class {
     this.log("Showing popup (definition)", def);
     this.surveyToPopupId.set(def.surveyId, def.id);
     this.lastShown.set(def.id, Date.now());
+    this.persistPopupState();
     this.renderPopup(def.surveyId, def.productId, def.actions, def.style, def.title);
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
@@ -5316,7 +5637,7 @@ var DeepdotsPopups = class {
   processDeferredExitQueue() {
     const queue = this.getDeferredExitQueue();
     if (!queue.length) return;
-    const pending = [];
+    const pending2 = [];
     const now = Date.now();
     queue.forEach((item) => {
       const def = this.popupDefinitions.find((popup) => popup.id === item.id && popup.surveyId === item.surveyId);
@@ -5327,10 +5648,10 @@ var DeepdotsPopups = class {
         this.tryShowDeferredExitPopup(item);
         return;
       }
-      pending.push(item);
+      pending2.push(item);
       this.scheduleDeferredExitPopup(item);
     });
-    this.setDeferredExitQueue(pending);
+    this.setDeferredExitQueue(pending2);
   }
   scheduleDeferredExitPopup(item) {
     if (typeof window === "undefined") return;
@@ -5403,7 +5724,7 @@ var DeepdotsPopups = class {
   async fetchPopupsFromServer() {
     const apiKey = this.config?.apiKey;
     const baseUrl = this.baseUrl;
-    const userId = this.config?.userId;
+    const userId = this.tracking?.getUserId() ?? this.config?.userId;
     if (!apiKey || !baseUrl) {
       this.log("Missing apiKey or baseUrl. Skipping popups fetch.");
       return [];
@@ -5662,6 +5983,29 @@ var DeepdotsPopups = class {
       return;
     }
     this.surveyProgress.set(surveyId, { status, timestamp: Date.now() });
+    this.persistPopupState();
+  }
+  /**
+   * Rehidrata el estado de redisplay desde el storage. `answeredSurveys` se reconstruye
+   * desde las entradas COMPLETED: es exactamente lo que persiste `markSurveyAnswered`.
+   */
+  loadPopupState(storage) {
+    const state = readPopupState(storage);
+    Object.entries(state.lastShown).forEach(([popupId, timestamp]) => {
+      this.lastShown.set(popupId, timestamp);
+    });
+    Object.entries(state.progress).forEach(([surveyId, entry]) => {
+      this.surveyProgress.set(surveyId, { status: entry.status, timestamp: entry.timestamp });
+      if (entry.status === "COMPLETED") this.answeredSurveys.add(surveyId);
+    });
+  }
+  /** Vuelca el estado de redisplay al storage. Sin storage (o bloqueado) degrada a memoria. */
+  persistPopupState() {
+    if (!this.storage) return;
+    writePopupState(this.storage, {
+      lastShown: Object.fromEntries(this.lastShown),
+      progress: Object.fromEntries(this.surveyProgress)
+    });
   }
   isPopupDefinition(value) {
     if (typeof value !== "object" || value === null) return false;
@@ -5805,16 +6149,24 @@ function DeepdotsProvider({ config, children }) {
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DeepdotsContext.Provider, { value: sdk, children: [
     children,
-    survey ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: true, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_native_webview.WebView,
-      {
-        style: { flex: 1 },
-        originWhitelist: ["*"],
-        javaScriptEnabled: true,
-        source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
-        onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
-      }
-    ) }) }) : null
+    survey ? (
+      // El Modal se abre en cuanto hay popup, y es el HTML del WebView el que se revela solo
+      // cuando el survey está pintado (apertura diferida): con el Modal transparente, hasta ese
+      // momento no se ve nada, ni velo ni spinner. No se difiere el Modal con `onReady` porque
+      // React Native no monta los hijos de un Modal cerrado: el WebView no llegaría a cargar y
+      // el aviso no llegaría nunca. El host que quiera diferir su contenedor debe montar el
+      // WebView invisible (ver el ejemplo de `ReactNativePopupRenderer`).
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: true, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native_webview.WebView,
+        {
+          style: { flex: 1 },
+          originWhitelist: ["*"],
+          javaScriptEnabled: true,
+          source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
+          onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
+        }
+      ) }) })
+    ) : null
   ] });
 }
 //# sourceMappingURL=react-native.js.map