@magicfeedback/popup-sdk 1.9.0 → 1.11.0

package/dist/react-native.js

@@ -552,7 +552,7 @@ var init_style = __esm({
     style_default = `/**
  * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
  *
- * Copia de @magicfeedback/native@2.2.22 \u2192 dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.31 \u2192 dist/styles/magicfeedback-default.css
  * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
  *
  *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
@@ -1536,6 +1536,9 @@ div.magicfeedback-radio {
     width: 100%;
     overflow-x: auto;
     border-radius: var(--mf-radius-md);
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
 }
 
 .magicfeedback-multi-question-matrix-table {
@@ -1587,6 +1590,296 @@ div.magicfeedback-radio {
     accent-color: var(--mf-primary);
 }
 
+.magicfeedback-multi-question-matrix-question {
+    min-width: 200px;
+    padding: 10px;
+}
+
+/* the column header names the option in a table; the per-cell label is for
+   screen readers until the rows stack */
+.magicfeedback-multi-question-matrix-option-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+/* narrow container: every row becomes its own question with the options
+   stacked underneath, instead of a table cut off at the side */
+@container (max-width: 599px) {
+    .magicfeedback-multi-question-matrix-table,
+    .magicfeedback-multi-question-matrix-table tbody,
+    .magicfeedback-multi-question-matrix-table tr,
+    .magicfeedback-multi-question-matrix-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .magicfeedback-multi-question-matrix-table thead {
+        display: none;
+    }
+
+    .magicfeedback-multi-question-matrix-row-tr,
+    .magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+        margin-bottom: var(--mf-space-lg);
+        background: transparent;
+        box-shadow: none;
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-row-tr:hover {
+            margin-bottom: var(--mf-space-lg);
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-question {
+        min-width: 0;
+        padding: 0 0 var(--mf-space-sm);
+        text-align: start;
+    }
+
+    .magicfeedback-multi-question-matrix-question .magicfeedback-multi-question-matrix-label {
+        font-weight: 600;
+    }
+
+    .magicfeedback-multi-question-matrix-table td.magicfeedback-multi-question-matrix-option {
+        display: flex;
+        align-items: center;
+        gap: var(--mf-space-sm);
+        margin-bottom: var(--mf-space-sm);
+        padding: 0 var(--mf-space-md);
+        text-align: start;
+        background: var(--mf-bg-secondary);
+        border: 2px solid var(--mf-border);
+        border-radius: var(--mf-radius-md);
+        cursor: pointer;
+        transition: var(--mf-transition-fast);
+    }
+
+    @media (hover: hover) {
+        .magicfeedback-multi-question-matrix-option:hover {
+            border-color: var(--mf-primary-border);
+        }
+    }
+
+    .magicfeedback-multi-question-matrix-option:has(input:checked) {
+        border-color: var(--mf-primary);
+        background: var(--mf-primary-light);
+    }
+
+    .magicfeedback-multi-question-matrix-table .magicfeedback-multi-question-matrix-option input[type="radio"] {
+        flex-shrink: 0;
+    }
+
+    /* the whole card is the click target */
+    .magicfeedback-multi-question-matrix-option-label {
+        position: static;
+        flex: 1;
+        width: auto;
+        height: auto;
+        padding: var(--mf-space-md) 0;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+        font-size: var(--mf-font-size-base);
+        color: var(--mf-text-primary);
+        cursor: pointer;
+    }
+}
+
+/* ========================================
+   MAXDIFF (BEST\u2013WORST)
+   ======================================== */
+.magicfeedback-max-diff {
+    /* "least" gets its own hue, apart from the brand color "most" uses; dark
+       enough to read as header text and to hold the white center dot */
+    --mf-max-diff-worst: #b45309;
+    width: 100%;
+}
+
+.magicfeedback-max-diff-container {
+    width: 100%;
+    /* the layout follows the space the survey gets (a pop-in, a sidebar),
+       not the size of the window */
+    container-type: inline-size;
+}
+
+.magicfeedback-max-diff-progress {
+    display: flex;
+    align-items: center;
+    gap: var(--mf-space-md);
+    margin-bottom: var(--mf-space-lg);
+}
+
+.magicfeedback-max-diff-progress-label {
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--mf-text-secondary);
+}
+
+.magicfeedback-max-diff-progress-track {
+    flex: 1;
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-border);
+}
+
+.magicfeedback-max-diff-progress-fill {
+    display: block;
+    height: 100%;
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.magicfeedback-max-diff-head,
+.magicfeedback-max-diff-head-spacer {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-head {
+    width: 11rem;
+    padding: 0 var(--mf-space-sm) var(--mf-space-sm);
+    font-size: 0.8125rem;
+    font-weight: var(--mf-font-weight-extrabold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+.magicfeedback-max-diff-head-best {
+    color: var(--mf-primary);
+}
+
+.magicfeedback-max-diff-head-worst {
+    color: var(--mf-max-diff-worst);
+}
+
+.magicfeedback-max-diff-head-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.magicfeedback-max-diff-row {
+    transition: background-color 0.15s ease;
+}
+
+.magicfeedback-max-diff-row > * {
+    border-bottom: 1px solid var(--mf-border);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-best:checked) {
+    background-color: color-mix(in srgb, var(--mf-primary) 8%, transparent);
+}
+
+.magicfeedback-max-diff-row:has(.magicfeedback-max-diff-worst:checked) {
+    background-color: color-mix(in srgb, var(--mf-max-diff-worst) 8%, transparent);
+}
+
+.magicfeedback-max-diff-item {
+    padding: var(--mf-space-md) var(--mf-space-sm);
+    font-size: 1.0625rem;
+    font-weight: var(--mf-font-weight-semibold);
+    line-height: 1.4;
+    text-align: center;
+    color: var(--mf-text-primary);
+}
+
+.magicfeedback-max-diff-row:has(input:checked) .magicfeedback-max-diff-item {
+    font-weight: var(--mf-font-weight-extrabold);
+}
+
+.magicfeedback-max-diff-cell {
+    padding: 0;
+}
+
+/* the whole cell is the click target */
+.magicfeedback-max-diff-pick {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 64px;
+    cursor: pointer;
+}
+
+.magicfeedback-max-diff-input {
+    appearance: none;
+    -webkit-appearance: none;
+    flex-shrink: 0;
+    width: 26px;
+    height: 26px;
+    margin: 0;
+    border: 2px solid color-mix(in srgb, var(--mf-text-secondary) 80%, white);
+    border-radius: var(--mf-radius-full);
+    background: var(--mf-bg-secondary);
+    cursor: pointer;
+    transition: var(--mf-transition-fast);
+}
+
+@media (hover: hover) {
+    .magicfeedback-max-diff-pick:hover .magicfeedback-max-diff-input {
+        transform: scale(1.08);
+    }
+}
+
+.magicfeedback-max-diff-best:checked {
+    border-color: var(--mf-primary);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-primary) 4.5px);
+}
+
+.magicfeedback-max-diff-worst:checked {
+    border-color: var(--mf-max-diff-worst);
+    background: radial-gradient(circle, #FFFFFF 0 4px, var(--mf-max-diff-worst) 4.5px);
+}
+
+.magicfeedback-max-diff-input:focus-visible {
+    outline: 3px solid var(--mf-primary-border);
+    outline-offset: 3px;
+}
+
+/* narrow container: same table, slimmer pick columns and the header icon
+   stacked over its label */
+@container (max-width: 599px) {
+    .magicfeedback-max-diff-head {
+        width: 4.75rem;
+        padding-inline: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .magicfeedback-max-diff-head-label {
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .magicfeedback-max-diff-item {
+        padding-inline: 4px;
+        font-size: var(--mf-font-size-base);
+    }
+
+    .magicfeedback-max-diff-pick {
+        min-height: 68px;
+    }
+
+    .magicfeedback-max-diff-input {
+        width: 28px;
+        height: 28px;
+    }
+}
+
 /* ========================================
    PRIORITY LIST
    ======================================== */
@@ -1777,6 +2070,15 @@ div.magicfeedback-radio {
     }
 }
 
+/* hidden on the first page; keep the submit button on the right */
+.magicfeedback-back[hidden] {
+    display: none;
+}
+
+.magicfeedback-action-container .magicfeedback-submit {
+    margin-left: auto;
+}
+
 /* ========================================
    SKIP & COUNTER
    ======================================== */
@@ -2592,6 +2894,9 @@ function ensureFontFace(family, url) {
   }
   if (el.textContent !== css) el.textContent = css;
 }
+function hasFinePointer() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;
+}
 async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, options) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
@@ -3022,6 +3327,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   if (pos.padding) container.style.padding = pos.padding;
   let revealed = false;
   let revealTimer = null;
+  let surveyLoaded = false;
+  let openFocusDone = false;
+  function autofocusOnOpen() {
+    if (openFocusDone || !revealed || !surveyLoaded) return;
+    openFocusDone = true;
+    if (hasFinePointer()) formInstance?.focusFirstQuestion?.();
+  }
   function reveal() {
     if (revealed) return;
     revealed = true;
@@ -3032,6 +3344,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     if (!container.contains(popup)) return;
     container.style.visibility = "visible";
     container.style.pointerEvents = "";
+    autofocusOnOpen();
   }
   function revealWhenPainted2() {
     if (revealed) return;
@@ -3081,10 +3394,18 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       // La pantalla final la pinta el popup: `renderSuccess` de @magicfeedback/native usa
       // textContent, así que el mensaje de la plataforma (HTML con imagen) no se vería, y
       // su fallback es un literal genérico que ignora `style.successMessage`.
-      addSuccessScreen: false
+      addSuccessScreen: false,
+      // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
+      // dispositivo) y, si el survey no lo tiene, la API sirve el idioma por defecto.
+      lang: options?.language,
+      // Foco en la primera pregunta de escribir tras Start, Siguiente o Atrás. Native lo
+      // aplica después de afterSubmitEvent/onBackEvent, cuando `setLoading(false)` ya ha
+      // quitado el `inert`. La apertura va aparte (ver autofocusOnOpen).
+      autofocus: "navigation"
     };
-    generateOptions.onLoadedEvent = ({ formData }) => {
-      const surveyLang = Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0;
+    generateOptions.onLoadedEvent = ({ formData, lang }) => {
+      const shownLang = typeof lang === "string" && lang.trim().length > 0 ? lang : void 0;
+      const surveyLang = shownLang ?? (Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0);
       if (surveyLang) applyLabels(surveyLang);
       try {
       } catch {
@@ -3135,12 +3456,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         updateButtons("in_progress_first");
       }
       updateProgress({ progress: formInstance.progress, total: formInstance.total });
-      emit("popup_clicked", surveyId, { action: "loaded" });
       setLoading(false);
+      if (!surveyLoaded) {
+        surveyLoaded = true;
+        autofocusOnOpen();
+      }
     };
     generateOptions.beforeSubmitEvent = () => {
       setLoading(true);
-      emit("popup_clicked", surveyId, { action: "before_submit" });
     };
     generateOptions.afterSubmitEvent = ({ error, completed, total, progress, followup }) => {
       const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
@@ -3149,13 +3472,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         if (errText.toLowerCase().includes("no response")) {
           errorHint.textContent = labels.errorRequired;
           errorHint.style.display = "block";
-          emit("popup_clicked", surveyId, { action: "validation_error_required" });
           updateNavButtons();
           return;
         }
         errorHint.textContent = labels.errorSubmit;
         errorHint.style.display = "block";
-        emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
+        sdkWarn("[Deepdots] survey submit error:", errText);
         return;
       }
       errorHint.style.display = "none";
@@ -3174,7 +3496,6 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       updateProgress({ progress, total, followup });
     };
     generateOptions.onBackEvent = ({ progress, error, followup }) => {
-      emit("popup_clicked", surveyId, { action: "back" });
       if (!error) pageDepth = Math.max(0, pageDepth - 1);
       updateNavButtons();
       updateProgress({ progress, total: formInstance.total, followup });
@@ -3460,7 +3781,7 @@ function trimmedOrNull(value) {
 }
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.22";
+  const version = opts.version ?? "2.2.31";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -3798,11 +4119,25 @@ ${customCss}
 ${PRIMARY_COLOR_JS}
 ${BUSY_JS}
 ${REVEAL_JS}
+  // Foco en la primera pregunta si es de escribir. Al navegar lo pone @magicfeedback/native
+  // (autofocus:'navigation'); la apertura la decide el popup, que es quien sabe cu\xE1ndo se revela.
+  // Necesita el popup revelado y el survey cargado, que llegan en cualquier orden, y solo con
+  // rat\xF3n o trackpad: en t\xE1ctil sacar\xEDa el teclado sin que el usuario haya tocado nada.
+  var ddRevealed=false, ddSurveyLoaded=false, ddOpenFocusDone=false;
+  function ddAutofocusOnOpen(){
+    if(ddOpenFocusDone || !ddRevealed || !ddSurveyLoaded){ return; }
+    ddOpenFocusDone=true;
+    var fine=typeof window.matchMedia==='function' && window.matchMedia('(pointer: fine)').matches;
+    var f=window.DeepdotsForm;
+    if(fine && f && typeof f.focusFirstQuestion==='function'){ f.focusFirstQuestion(); }
+  }
   // 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');
+    ddRevealed=true;
+    ddAutofocusOnOpen();
   }, ${REVEAL_TIMEOUT_MS});
 
   function setLoading(isLoading){
@@ -3840,10 +4175,18 @@ ${REVEAL_JS}
         // textContent, as\xED que el mensaje de la plataforma (HTML con imagen) no se ver\xEDa, y su
         // fallback es un literal gen\xE9rico que ignora style.successMessage.
         addSuccessScreen:false,
+        // Surveys multi-idioma: native pide a la API este idioma (el del init o el del
+        // dispositivo); si el survey no lo tiene, la API sirve el idioma por defecto.
+        lang:${initLangJson}||undefined,
+        // Foco en la primera pregunta de escribir tras Start, Siguiente o Atr\xE1s. Las versiones
+        // de native sin esta opci\xF3n la ignoran.
+        autofocus:'navigation',
         onLoadedEvent:function(args){
-          // Idioma del survey: manda sobre el del init para que el chrome no se quede en
-          // ingl\xE9s delante de un survey traducido.
-          var langs=args && args.formData ? args.formData.lang : null;
+          // Idioma en el que native muestra el survey: manda sobre el del init para que el
+          // chrome no se quede en ingl\xE9s delante de un survey traducido. Native < 2.3 no lo
+          // env\xEDa: entonces el primero de formData.lang (el idioma por defecto).
+          var shown=args && typeof args.lang==='string' && args.lang.trim() ? args.lang : null;
+          var langs=shown ? [shown] : (args && args.formData ? args.formData.lang : null);
           if(langs && langs.length){
             for(var li=0;li<langs.length;li++){
               if(typeof langs[li]==='string' && langs[li].trim()){ ddApplyLabels(langs[li]); break; }
@@ -3897,6 +4240,8 @@ ${REVEAL_JS}
           updateProgress({ progress:form.progress, total:form.total, completed:false, followup:false });
           emitJSON('loaded');
           setLoading(false);
+          // La primera carga es la apertura; las siguientes (tras Start) las enfoca native.
+          if(!ddSurveyLoaded){ ddSurveyLoaded=true; ddAutofocusOnOpen(); }
         },
         beforeSubmitEvent:function(){
           setLoading(true);
@@ -4049,6 +4394,7 @@ var ReactNativePopupRenderer = class {
         this.emitReady(surveyId);
         break;
       case "loaded":
+        break;
       case "before_submit":
       case "after_submit":
       case "back":
@@ -4427,7 +4773,7 @@ async function safeBodyText(res) {
   }
 }
 function createFeedbackSink(options) {
-  let feedbackSessionId;
+  let feedbackSessionId = options.initialSessionId || void 0;
   let firstPostInFlight = null;
   let generation = 0;
   const url = `${options.baseUrl}/sdk/feedback`;
@@ -4520,6 +4866,50 @@ function createFeedbackSink(options) {
   };
 }
 
+// src/analytics/suspended-session.ts
+var SUSPENDED_SESSION_KEY = "deepdots.analytics.suspended";
+function getSessionStorage() {
+  try {
+    return typeof window !== "undefined" && window.sessionStorage ? window.sessionStorage : null;
+  } catch {
+    return null;
+  }
+}
+function writeSuspendedSession(storage, session) {
+  try {
+    storage.setItem(SUSPENDED_SESSION_KEY, JSON.stringify(session));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function clearSuspendedSession(storage) {
+  try {
+    storage.removeItem(SUSPENDED_SESSION_KEY);
+  } catch {
+  }
+}
+function takeSuspendedSession(storage, match, now, windowMs) {
+  let raw = null;
+  try {
+    raw = storage.getItem(SUSPENDED_SESSION_KEY);
+  } catch {
+    return null;
+  }
+  if (!raw) return null;
+  clearSuspendedSession(storage);
+  try {
+    const s = JSON.parse(raw);
+    if (typeof s.sessionId !== "string" || !s.sessionId) return null;
+    if (typeof s.at !== "number" || now - s.at < 0 || now - s.at > windowMs) return null;
+    if (s.integration !== match.integration) return null;
+    if ((s.userId ?? null) !== match.userId) return null;
+    return { sessionId: s.sessionId, integration: s.integration, userId: s.userId ?? null, at: s.at };
+  } catch {
+    return null;
+  }
+}
+
 // src/tracking/navigation-observer.ts
 var UUID_PREFIX = /^[0-9a-f]{8}-[0-9a-f]{4}-/i;
 function screenPath(href) {
@@ -5118,8 +5508,10 @@ var ANALYTICS_HEARTBEAT_MS = 5 * 6e4;
 var ANALYTICS_SESSION_TIMEOUT_MS = 30 * 6e4;
 var ANALYTICS_SERVER_IDLE_MS = 60 * 6e4;
 var ANALYTICS_SESSION_DISCARD_MS = ANALYTICS_SERVER_IDLE_MS - 10 * 6e4;
+var ANALYTICS_RESUME_WINDOW_MS = 6e4;
 var RESERVED_EVENT_PREFIX = "deepdots_";
 var CUSTOM_EVENT_PREFIX = "deepdots_event_";
+var MAX_PENDING_TRIGGERS = 20;
 var DeepdotsPopups = class {
   constructor() {
     this.config = null;
@@ -5133,6 +5525,14 @@ var DeepdotsPopups = class {
     // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
     this.popupsLoaded = false;
+    /**
+     * `true` mientras el `GET /sdk/{apiKey}/popups` de `init()` está en vuelo. En esa ventana los
+     * disparos del host (`triggerEvent`, `triggerSurvey`) no tienen contra qué evaluarse, así que
+     * se guardan en `pendingTriggers` y se reproducen al cargar. Click, scroll, time y exit no
+     * hacen falta: son listeners que `autoLaunch` instala ya con las definiciones cargadas.
+     */
+    this.awaitingPopups = false;
+    this.pendingTriggers = [];
     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
@@ -5187,6 +5587,13 @@ var DeepdotsPopups = class {
     this.lastEngagementAt = 0;
     /** Cuándo se ocultó la pestaña por última vez (ms epoch); null si está visible. */
     this.hiddenAt = null;
+    /**
+     * Sesión suspendida por un `pagehide` (ms epoch y `deepdots_user_id`); null si no hay.
+     * `openSession` la reanuda si sigue a tiempo (ver ANALYTICS_RESUME_WINDOW_MS).
+     */
+    this.suspended = null;
+    /** Integración de analytics del init: la sesión suspendida solo la hereda la misma. */
+    this.analyticsIntegration = void 0;
     /**
      * Idioma resuelto en init() (explícito > navigator.language > Intl). Única fuente de
      * verdad para el context de analytics Y para la segmentación por idioma de los popups.
@@ -5246,10 +5653,17 @@ var DeepdotsPopups = class {
       }
     }
     this.log("tracking \xB7 user_id:", this.tracking.getUserId(), "\xB7 new_user:", this.tracking.isNewUser(), "\xB7 enabled:", this.tracking.isTrackingEnabled());
+    this.analyticsIntegration = config.analytics?.integration;
+    const resumable = this.readResumableSession();
+    if (resumable) {
+      this.analyticsFeedbackSessionId = resumable.sessionId;
+      this.suspended = { at: resumable.at, userId: resumable.userId };
+    }
     const analyticsSink = config.analytics ? createFeedbackSink({
       baseUrl: this.baseUrl,
       keys: config.analytics,
       log: (...a) => this.log(...a),
+      initialSessionId: resumable?.sessionId,
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
         this.notifyFeedbackSession(id, "open");
@@ -5299,6 +5713,9 @@ var DeepdotsPopups = class {
     this.engagement = new EngagementTracker();
     this.setupAnalyticsFlush();
     this.openSession();
+    if (resumable && this.analyticsFeedbackSessionId === resumable.sessionId) {
+      this.notifyFeedbackSession(resumable.sessionId, "open");
+    }
     const pendingCrashes = this.crashReporter.drainPendingCrashes();
     if (this.tracking?.isTrackingEnabled()) {
       for (const rec of pendingCrashes) {
@@ -5309,8 +5726,10 @@ var DeepdotsPopups = class {
     this.log("SDK initialized", this.config);
     if (this.renderer.init) this.renderer.init();
     this.setupPopupContainer();
+    this.awaitingPopups = Boolean(this.config.apiKey && this.baseUrl);
     this.fetchPopupsFromServer().then((defs) => {
-      this.popupDefinitions = this.validatePopupDefinitions(defs);
+      if (!defs) this.dropPendingTriggers();
+      this.popupDefinitions = this.validatePopupDefinitions(defs ?? []);
       this.popupsLoaded = true;
       this.log("Popups loaded from API", this.popupDefinitions);
       if (this.popupDefinitions.length) this.renderer.preload?.();
@@ -5319,6 +5738,7 @@ var DeepdotsPopups = class {
       if (this.pendingAutoLaunch) {
         this.startTriggers();
       }
+      this.replayPendingTriggers();
     });
   }
   /** User id actual (generado por el SDK o provisto por el cliente). Null si tracking off. */
@@ -5547,9 +5967,15 @@ var DeepdotsPopups = class {
   openSession() {
     if (this.sessionOpen) return;
     if (!this.tracking?.isTrackingEnabled()) return;
+    const suspendedMs = this.takeSuspendedSession();
     this.sessionOpen = true;
     this.lastEngagementAt = Date.now();
-    this.track("deepdots_session_start", {});
+    if (suspendedMs === null) {
+      this.track("deepdots_session_start", {});
+    } else {
+      this.track("deepdots_session_resume", { suspended_ms: suspendedMs });
+      this.log("tracking \xB7 session resumed after", suspendedMs, "ms:", this.analyticsFeedbackSessionId);
+    }
     this.navObserver?.restart();
     if (this.isDocumentVisible()) this.engagement?.resume();
   }
@@ -5614,6 +6040,75 @@ var DeepdotsPopups = class {
     }
     this.openSession();
   }
+  /**
+   * `pagehide` en web: SUSPENDE la sesión en vez de cerrarla, porque el navegador lo lanza
+   * igual al recargar que al cerrar la pestaña. Vuelca lo pendiente (page_view de la
+   * pantalla, mini-services, engagement) con un `deepdots_session_suspend` y SIN
+   * `completed`, y deja el registro en `sessionStorage` (ver `suspended-session.ts`):
+   *  - si la página vuelve a cargar en esta pestaña, `init()` sigue en el mismo registro;
+   *  - si la pestaña se cerró, el backend lo cierra a los pocos minutos sin otro lote.
+   *
+   * Devuelve false cuando no se puede suspender — aún no se conoce el registro (el primer
+   * POST sigue en vuelo) o no hay `sessionStorage` — y entonces el caller cierra como antes.
+   */
+  suspendSession() {
+    if (!this.sessionOpen || !this.tracking?.isTrackingEnabled()) return false;
+    const sessionId = this.analyticsFeedbackSessionId;
+    const integration = this.analyticsIntegration;
+    const storage = getSessionStorage();
+    if (!sessionId || !integration || !storage) return false;
+    const at = Date.now();
+    const userId = this.tracking.getUserId();
+    if (!writeSuspendedSession(storage, { sessionId, integration, userId, at })) return false;
+    this.sessionOpen = false;
+    this.suspended = { at, userId };
+    this.navObserver?.stop();
+    this.navStarted = false;
+    this.analytics?.exitAllMiniServices();
+    this.flushEngagement();
+    this.engagement?.pause();
+    this.track("deepdots_session_suspend", { reason: "page_hide" });
+    this.flushAnalytics({ final: true });
+    this.log("tracking \xB7 session suspended:", sessionId);
+    return true;
+  }
+  /**
+   * Recoge la sesión que dejó suspendida la carga anterior de esta pestaña (ver
+   * `suspendSession`). Solo con analytics configurado y el tracking activo: sin ellos no hay
+   * registro en el que seguir.
+   */
+  readResumableSession() {
+    const integration = this.analyticsIntegration;
+    const storage = getSessionStorage();
+    if (!integration || !storage || !this.tracking?.isTrackingEnabled()) return null;
+    return takeSuspendedSession(
+      storage,
+      { integration, userId: this.tracking.getUserId() },
+      Date.now(),
+      ANALYTICS_RESUME_WINDOW_MS
+    );
+  }
+  /**
+   * Consume la sesión suspendida al abrir: los ms que estuvo suspendida si se puede seguir en
+   * ella (mismo usuario, dentro de ANALYTICS_RESUME_WINDOW_MS); null si no había o ya no toca.
+   * En ese caso se olvida su registro sin enviar nada: lo cierra el backend, y la sesión que
+   * se abre ahora va a uno nuevo.
+   */
+  takeSuspendedSession() {
+    const suspended = this.suspended;
+    if (!suspended) return null;
+    this.suspended = null;
+    const storage = getSessionStorage();
+    if (storage) clearSuspendedSession(storage);
+    const suspendedMs = Math.max(0, Date.now() - suspended.at);
+    if (this.analyticsFeedbackSessionId && suspendedMs <= ANALYTICS_RESUME_WINDOW_MS && suspended.userId === (this.tracking?.getUserId() ?? null)) {
+      return suspendedMs;
+    }
+    this.analytics?.discardSession(this.analyticsIdentity());
+    this.analyticsFeedbackSessionId = void 0;
+    this.tracking?.setSessionId(null);
+    return null;
+  }
   /** Olvida la sesión abierta sin enviar nada (ver onDocumentVisible). */
   discardSession() {
     this.sessionOpen = false;
@@ -5662,7 +6157,7 @@ var DeepdotsPopups = class {
     if (typeof document === "undefined" || typeof window === "undefined") return;
     window.addEventListener("pagehide", () => {
       clearInterval(this.analyticsFlushTimer);
-      this.closeSession("page_hide");
+      if (!this.suspendSession()) this.closeSession("page_hide");
     });
     window.addEventListener("pageshow", (event) => {
       if (!event.persisted) return;
@@ -5730,6 +6225,7 @@ var DeepdotsPopups = class {
   }
   /** Lógica para evaluar condiciones antes de mostrar una encuesta */
   triggerSurvey(surveyId, popupId) {
+    if (this.bufferIfAwaitingPopups({ kind: "survey", surveyId, popupId })) return;
     const def = this.findPopupDefinition(surveyId, popupId);
     if (!def) {
       this.debug("No popup definition for trigger", { surveyId, popupId });
@@ -5751,6 +6247,10 @@ var DeepdotsPopups = class {
       this.debug("Ignoring empty event trigger name");
       return;
     }
+    if (this.bufferIfAwaitingPopups({ kind: "event", name: normalized })) return;
+    this.evaluateEvent(normalized);
+  }
+  evaluateEvent(normalized) {
     const candidates = this.popupDefinitions.filter((def) => {
       return def.triggers.some((trigger) => {
         const triggerValue = String(trigger.value ?? "").trim();
@@ -5768,6 +6268,40 @@ var DeepdotsPopups = class {
     }
     this.showDefinition(matched);
   }
+  /**
+   * Guarda `trigger` si las definiciones aún no han llegado. Devuelve `true` si lo guardó (el
+   * llamador no debe evaluarlo ahora) y `false` si no hay carga en vuelo (se evalúa ya, como
+   * siempre: tras cargar, tras un fallo o sin apiKey).
+   */
+  bufferIfAwaitingPopups(trigger) {
+    if (!this.awaitingPopups) return false;
+    if (this.pendingTriggers.length >= MAX_PENDING_TRIGGERS) {
+      const dropped = this.pendingTriggers.shift();
+      this.debug("Pending trigger buffer full; dropped oldest", dropped);
+    }
+    this.pendingTriggers.push(trigger);
+    this.debug("Popups not loaded yet; trigger buffered", trigger);
+    return true;
+  }
+  /** La carga falló: sin definiciones no hay nada que reproducir, se descarta todo. */
+  dropPendingTriggers() {
+    const dropped = this.pendingTriggers.length;
+    this.awaitingPopups = false;
+    this.pendingTriggers = [];
+    if (dropped > 0) this.debug("Popups failed to load; dropped pending triggers", dropped);
+  }
+  /** Reproduce en orden por la evaluación normal (segmentos, cooldowns y condiciones de AHORA). */
+  replayPendingTriggers() {
+    this.awaitingPopups = false;
+    const replay = this.pendingTriggers;
+    this.pendingTriggers = [];
+    if (!replay.length) return;
+    this.debug("Replaying triggers received before popups loaded", replay.length);
+    replay.forEach((trigger) => {
+      if (trigger.kind === "event") this.evaluateEvent(trigger.name);
+      else this.triggerSurvey(trigger.surveyId, trigger.popupId);
+    });
+  }
   showDefinition(def) {
     this.log("Showing popup (definition)", def);
     this.surveyToPopupId.set(def.surveyId, def.id);
@@ -6038,7 +6572,7 @@ var DeepdotsPopups = class {
     } catch {
     }
   }
-  /** Fetch al servidor para obtener popups */
+  /** Fetch al servidor para obtener popups. `null` si la carga falló (red, no-2xx, payload inválido). */
   async fetchPopupsFromServer() {
     const apiKey = this.config?.apiKey;
     const baseUrl = this.baseUrl;
@@ -6054,19 +6588,19 @@ var DeepdotsPopups = class {
       const response = await fetch(endpoint);
       if (!response.ok) {
         this.log("Failed to fetch popups", response.status, response.statusText);
-        return [];
+        return null;
       }
       const raw = await response.text();
       const parsed = JSON.parse(raw);
       if (!Array.isArray(parsed)) {
         this.log("Unexpected popups payload", parsed);
-        return [];
+        return null;
       }
       this.debug("Fetched popups payload", parsed);
       return parsed;
     } catch (error) {
       this.log("Error fetching popups", error);
-      return [];
+      return null;
     }
   }
   /** Envía los atributos de contact a la API (`POST /sdk/popups/contact`). */
@@ -6490,6 +7024,7 @@ function DeepdotsProvider({ config, children }) {
           style: { flex: 1 },
           originWhitelist: ["*"],
           javaScriptEnabled: true,
+          keyboardDisplayRequiresUserAction: false,
           source: { html: survey.html, baseUrl: "https://sdk.deepdots.com/" },
           onMessage: (e) => rendererRef.current?.handleMessage(e.nativeEvent.data)
         }