@magicfeedback/popup-sdk 1.6.0 → 1.7.1

package/dist/react-native.js

@@ -178,6 +178,274 @@ var init_font = __esm({
   }
 });
 
+// src/i18n/labels.ts
+function resolveLocale(lang) {
+  if (typeof lang !== "string") return "en";
+  const normalized = lang.trim().toLowerCase().replace(/_/g, "-");
+  if (!normalized) return "en";
+  if (normalized === "zh" || normalized.startsWith("zh-")) return "zh-CN";
+  const primary = normalized.split("-")[0];
+  switch (primary) {
+    case "en":
+      return "en";
+    case "es":
+      return "es";
+    case "da":
+      return "da";
+    case "no":
+    case "nb":
+    case "nn":
+      return "no";
+    case "sv":
+      return "sv";
+    case "fi":
+      return "fi";
+    case "de":
+      return "de";
+    case "fr":
+      return "fr";
+    case "pt":
+      return "pt";
+    case "ar":
+      return "ar";
+    case "bn":
+      return "bn";
+    default:
+      return "en";
+  }
+}
+function isRtlLanguage(lang) {
+  return RTL_LOCALES.includes(resolveLocale(lang));
+}
+function directionFor(lang) {
+  return isRtlLanguage(lang) ? "rtl" : "ltr";
+}
+function getLabels(lang) {
+  return LABELS[resolveLocale(lang)];
+}
+function resolveActionLabels(actions, lang) {
+  const labels = getLabels(lang);
+  const pick = (value, fallback) => {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    return trimmed ? value : fallback;
+  };
+  return {
+    accept: pick(actions?.accept?.label, labels.accept),
+    decline: pick(actions?.decline?.label, labels.decline),
+    start: pick(actions?.start?.label, labels.start),
+    complete: pick(actions?.complete?.label, labels.complete),
+    back: pick(actions?.back?.label, labels.back)
+  };
+}
+var EN, ES, DA, NO, SV, FI, DE, FR, PT, AR, BN, ZH_CN, LABELS, RTL_LOCALES, RESOLVE_LOCALE_JS;
+var init_labels = __esm({
+  "src/i18n/labels.ts"() {
+    "use strict";
+    EN = {
+      accept: "Send",
+      decline: "Cancel",
+      start: "Start survey",
+      complete: "Complete survey",
+      back: "Back",
+      question: "Question",
+      of: "of",
+      followUp: "Follow-up",
+      closeAria: "Close popup",
+      loadingAria: "Loading survey",
+      errorRequired: "Please answer the required question to continue.",
+      errorSubmit: "An error occurred while submitting. Please try again or close the popup."
+    };
+    ES = {
+      accept: "Enviar",
+      decline: "Cancelar",
+      start: "Empezar encuesta",
+      complete: "Completar encuesta",
+      back: "Atr\xE1s",
+      question: "Pregunta",
+      of: "de",
+      followUp: "Seguimiento",
+      closeAria: "Cerrar ventana emergente",
+      loadingAria: "Cargando encuesta",
+      errorRequired: "Responde la pregunta obligatoria para continuar.",
+      errorSubmit: "Se produjo un error al enviar. Int\xE9ntalo de nuevo o cierra la ventana."
+    };
+    DA = {
+      accept: "Send",
+      decline: "Annuller",
+      start: "Start unders\xF8gelse",
+      complete: "Afslut unders\xF8gelse",
+      back: "Tilbage",
+      question: "Sp\xF8rgsm\xE5l",
+      of: "af",
+      followUp: "Opf\xF8lgning",
+      closeAria: "Luk pop op",
+      loadingAria: "Indl\xE6ser unders\xF8gelse",
+      errorRequired: "Besvar venligst det obligatoriske sp\xF8rgsm\xE5l for at forts\xE6tte.",
+      errorSubmit: "Der opstod en fejl under afsendelsen. Pr\xF8v igen, eller luk pop op-vinduet."
+    };
+    NO = {
+      accept: "Send",
+      decline: "Avbryt",
+      start: "Start unders\xF8kelse",
+      complete: "Fullf\xF8r unders\xF8kelse",
+      back: "Tilbake",
+      question: "Sp\xF8rsm\xE5l",
+      of: "av",
+      followUp: "Oppf\xF8lging",
+      closeAria: "Lukk popup",
+      loadingAria: "Laster unders\xF8kelse",
+      errorRequired: "Svar p\xE5 det obligatoriske sp\xF8rsm\xE5let for \xE5 fortsette.",
+      errorSubmit: "Det oppstod en feil under innsendingen. Pr\xF8v igjen, eller lukk popupen."
+    };
+    SV = {
+      accept: "Skicka",
+      decline: "Avbryt",
+      start: "Starta unders\xF6kning",
+      complete: "Slutf\xF6r unders\xF6kning",
+      back: "Tillbaka",
+      question: "Fr\xE5ga",
+      of: "av",
+      followUp: "Uppf\xF6ljning",
+      closeAria: "St\xE4ng popup",
+      loadingAria: "Laddar unders\xF6kning",
+      errorRequired: "Svara p\xE5 den obligatoriska fr\xE5gan f\xF6r att forts\xE4tta.",
+      errorSubmit: "Ett fel uppstod vid inskickningen. F\xF6rs\xF6k igen eller st\xE4ng popupen."
+    };
+    FI = {
+      accept: "L\xE4het\xE4",
+      decline: "Peruuta",
+      start: "Aloita kysely",
+      complete: "Viimeistele kysely",
+      back: "Takaisin",
+      question: "Kysymys",
+      of: "/",
+      followUp: "Jatkokysymys",
+      closeAria: "Sulje ponnahdusikkuna",
+      loadingAria: "Ladataan kysely\xE4",
+      errorRequired: "Vastaa pakolliseen kysymykseen jatkaaksesi.",
+      errorSubmit: "L\xE4hetyksess\xE4 tapahtui virhe. Yrit\xE4 uudelleen tai sulje ponnahdusikkuna."
+    };
+    DE = {
+      accept: "Senden",
+      decline: "Abbrechen",
+      start: "Umfrage starten",
+      complete: "Umfrage abschlie\xDFen",
+      back: "Zur\xFCck",
+      question: "Frage",
+      of: "von",
+      followUp: "Folgefrage",
+      closeAria: "Popup schlie\xDFen",
+      loadingAria: "Umfrage wird geladen",
+      errorRequired: "Bitte beantworte die Pflichtfrage, um fortzufahren.",
+      errorSubmit: "Beim Senden ist ein Fehler aufgetreten. Versuche es erneut oder schlie\xDFe das Popup."
+    };
+    FR = {
+      accept: "Envoyer",
+      decline: "Annuler",
+      start: "Commencer l'enqu\xEAte",
+      complete: "Terminer l'enqu\xEAte",
+      back: "Retour",
+      question: "Question",
+      of: "sur",
+      followUp: "Question compl\xE9mentaire",
+      closeAria: "Fermer la fen\xEAtre",
+      loadingAria: "Chargement de l'enqu\xEAte",
+      errorRequired: "Veuillez r\xE9pondre \xE0 la question obligatoire pour continuer.",
+      errorSubmit: "Une erreur s'est produite lors de l'envoi. R\xE9essayez ou fermez la fen\xEAtre."
+    };
+    PT = {
+      accept: "Enviar",
+      decline: "Cancelar",
+      start: "Iniciar question\xE1rio",
+      complete: "Concluir question\xE1rio",
+      back: "Voltar",
+      question: "Pergunta",
+      of: "de",
+      followUp: "Seguimento",
+      closeAria: "Fechar janela",
+      loadingAria: "A carregar question\xE1rio",
+      errorRequired: "Responda \xE0 pergunta obrigat\xF3ria para continuar.",
+      errorSubmit: "Ocorreu um erro ao enviar. Tente novamente ou feche a janela."
+    };
+    AR = {
+      accept: "\u0625\u0631\u0633\u0627\u0644",
+      decline: "\u0625\u0644\u063A\u0627\u0621",
+      start: "\u0627\u0628\u062F\u0623 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      complete: "\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      back: "\u0631\u062C\u0648\u0639",
+      question: "\u0633\u0624\u0627\u0644",
+      of: "\u0645\u0646",
+      followUp: "\u0633\u0624\u0627\u0644 \u0645\u062A\u0627\u0628\u0639\u0629",
+      closeAria: "\u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u0646\u0628\u062B\u0642\u0629",
+      loadingAria: "\u062C\u0627\u0631\u064D \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646",
+      errorRequired: "\u064A\u0631\u062C\u0649 \u0627\u0644\u0625\u062C\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u0644\u0644\u0645\u062A\u0627\u0628\u0639\u0629.",
+      errorSubmit: "\u062D\u062F\u062B \u062E\u0637\u0623 \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649 \u0623\u0648 \u0625\u063A\u0644\u0627\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629."
+    };
+    BN = {
+      accept: "\u09AA\u09BE\u09A0\u09BE\u09A8",
+      decline: "\u09AC\u09BE\u09A4\u09BF\u09B2",
+      start: "\u099C\u09B0\u09BF\u09AA \u09B6\u09C1\u09B0\u09C1 \u0995\u09B0\u09C1\u09A8",
+      complete: "\u099C\u09B0\u09BF\u09AA \u09B8\u09AE\u09CD\u09AA\u09C2\u09B0\u09CD\u09A3 \u0995\u09B0\u09C1\u09A8",
+      back: "\u09AA\u09BF\u099B\u09A8\u09C7",
+      question: "\u09AA\u09CD\u09B0\u09B6\u09CD\u09A8",
+      of: "/",
+      followUp: "\u09AB\u09B2\u09CB-\u0986\u09AA",
+      closeAria: "\u09AA\u09AA\u0986\u09AA \u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8",
+      loadingAria: "\u099C\u09B0\u09BF\u09AA \u09B2\u09CB\u09A1 \u09B9\u099A\u09CD\u099B\u09C7",
+      errorRequired: "\u099A\u09BE\u09B2\u09BF\u09AF\u09BC\u09C7 \u09AF\u09C7\u09A4\u09C7 \u0986\u09AC\u09B6\u09CD\u09AF\u0995 \u09AA\u09CD\u09B0\u09B6\u09CD\u09A8\u09C7\u09B0 \u0989\u09A4\u09CD\u09A4\u09B0 \u09A6\u09BF\u09A8\u0964",
+      errorSubmit: "\u099C\u09AE\u09BE \u09A6\u09C7\u0993\u09AF\u09BC\u09BE\u09B0 \u09B8\u09AE\u09AF\u09BC \u098F\u0995\u099F\u09BF \u09A4\u09CD\u09B0\u09C1\u099F\u09BF \u0998\u099F\u09C7\u099B\u09C7\u0964 \u0986\u09AC\u09BE\u09B0 \u099A\u09C7\u09B7\u09CD\u099F\u09BE \u0995\u09B0\u09C1\u09A8 \u09AC\u09BE \u09AA\u09AA\u0986\u09AA \u09AC\u09A8\u09CD\u09A7 \u0995\u09B0\u09C1\u09A8\u0964"
+    };
+    ZH_CN = {
+      accept: "\u53D1\u9001",
+      decline: "\u53D6\u6D88",
+      start: "\u5F00\u59CB\u95EE\u5377",
+      complete: "\u5B8C\u6210\u95EE\u5377",
+      back: "\u8FD4\u56DE",
+      question: "\u95EE\u9898",
+      of: "/",
+      followUp: "\u8FFD\u95EE",
+      closeAria: "\u5173\u95ED\u5F39\u7A97",
+      loadingAria: "\u6B63\u5728\u52A0\u8F7D\u95EE\u5377",
+      errorRequired: "\u8BF7\u56DE\u7B54\u5FC5\u7B54\u9898\u540E\u7EE7\u7EED\u3002",
+      errorSubmit: "\u63D0\u4EA4\u65F6\u51FA\u9519\u3002\u8BF7\u91CD\u8BD5\u6216\u5173\u95ED\u5F39\u7A97\u3002"
+    };
+    LABELS = {
+      en: EN,
+      es: ES,
+      da: DA,
+      no: NO,
+      sv: SV,
+      fi: FI,
+      de: DE,
+      fr: FR,
+      pt: PT,
+      ar: AR,
+      bn: BN,
+      "zh-CN": ZH_CN
+    };
+    RTL_LOCALES = ["ar"];
+    RESOLVE_LOCALE_JS = `function ddResolveLocale(lang){
+  if(typeof lang!=='string') return 'en';
+  var n=lang.trim().toLowerCase().replace(/_/g,'-');
+  if(!n) return 'en';
+  if(n==='zh'||n.indexOf('zh-')===0) return 'zh-CN';
+  var p=n.split('-')[0];
+  if(p==='en') return 'en';
+  if(p==='es') return 'es';
+  if(p==='da') return 'da';
+  if(p==='no'||p==='nb'||p==='nn') return 'no';
+  if(p==='sv') return 'sv';
+  if(p==='fi') return 'fi';
+  if(p==='de') return 'de';
+  if(p==='fr') return 'fr';
+  if(p==='pt') return 'pt';
+  if(p==='ar') return 'ar';
+  if(p==='bn') return 'bn';
+  return 'en';
+}`;
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
@@ -185,7 +453,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.8 \u2192 dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.22 \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
@@ -405,7 +673,7 @@ var init_style = __esm({
     font-weight: var(--mf-font-weight-bold);
     line-height: 1.3;
     margin: var(--mf-space-lg) 0 var(--mf-space-sm);
-    text-align: left;
+    text-align: start;
 }
 
 .magicfeedback-info-message h1, .magicfeedback-start-message h1 { font-size: var(--mf-font-size-xl); }
@@ -444,7 +712,7 @@ var init_style = __esm({
 .magicfeedback-start-message ul,
 .magicfeedback-start-message ol {
     margin: 0 0 var(--mf-space-md);
-    padding-left: var(--mf-space-xl);
+    padding-inline-start: var(--mf-space-xl);
     color: var(--mf-text-secondary);
     line-height: var(--mf-line-height);
 }
@@ -458,7 +726,7 @@ var init_style = __esm({
 .magicfeedback-start-message blockquote {
     margin: 0 0 var(--mf-space-md);
     padding: var(--mf-space-sm) var(--mf-space-md);
-    border-left: 3px solid var(--mf-primary-border);
+    border-inline-start: 3px solid var(--mf-primary-border);
     color: var(--mf-text-secondary);
     font-style: italic;
 }
@@ -547,7 +815,7 @@ var init_style = __esm({
     font-weight: var(--mf-font-weight-bold);
     color: var(--mf-text-primary);
     line-height: var(--mf-line-height);
-    text-align: left;
+    text-align: start;
     letter-spacing: -0.01em;
 }
 
@@ -623,7 +891,7 @@ var init_style = __esm({
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right var(--mf-space-md) center;
-    padding-right: var(--mf-space-xl);
+    padding-inline-end: var(--mf-space-xl);
 }
 
 /* Error State */
@@ -687,7 +955,7 @@ div.magicfeedback-radio {
 .magicfeedback-checkbox label,
 .magicfeedback-radio-container label {
     font-size: var(--mf-font-size-base);
-    text-align: left;
+    text-align: start;
     color: var(--mf-text-primary);
     cursor: pointer;
     margin: 0;
@@ -785,7 +1053,7 @@ div.magicfeedback-radio {
 }
 
 .magicfeedback-rating-placeholder-value:last-child {
-    text-align: right;
+    text-align: end;
 }
 
 /* Rating with Images */
@@ -868,7 +1136,7 @@ div.magicfeedback-radio {
 }
 
 .magicfeedback-rating-number-scale-label:last-child {
-    text-align: right;
+    text-align: end;
 }
 
 /* Column, no per-option text: each row is its own separated chip, so
@@ -1186,7 +1454,7 @@ div.magicfeedback-radio {
 }
 
 .magicfeedback-multi-question-matrix-label {
-    text-align: left;
+    text-align: start;
     font-size: var(--mf-font-size-base);
     color: var(--mf-text-primary);
 }
@@ -1221,7 +1489,7 @@ div.magicfeedback-radio {
 .magicfeedback-priority-list-item-label {
     flex: 1;
     font-size: var(--mf-font-size-base);
-    text-align: left;
+    text-align: start;
     color: var(--mf-text-primary);
     margin: 0;
 }
@@ -1313,7 +1581,7 @@ div.magicfeedback-radio {
 .magicfeedback-consent-container label {
     flex: 1;
     font-size: var(--mf-font-size-sm);
-    text-align: left;
+    text-align: start;
     color: var(--mf-text-secondary);
     line-height: var(--mf-line-height);
     cursor: pointer;
@@ -1465,7 +1733,7 @@ div.magicfeedback-radio {
 }
 
 .magicfeedback-modal-counter {
-    margin-right: auto;
+    margin-inline-end: auto;
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -1710,7 +1978,7 @@ div.magicfeedback-radio {
 .magicfeedback-modal-close {
     position: absolute;
     top: 8px;
-    right: 8px;
+    inset-inline-end: 8px;
     background: transparent;
     border: none;
     font-size: 20px;
@@ -1931,6 +2199,55 @@ div.magicfeedback-radio {
     display: block;
 }
 
+/* ========================================
+   RTL (Arabic)
+   ========================================
+   The SDK stamps dir="rtl" (and .magicfeedback-rtl) on the survey container
+   for right-to-left languages. Everything else in this stylesheet uses logical
+   properties (text-align: start, padding-inline-*, inset-inline-*), so it
+   mirrors on its own; only the handful of rules that cannot be expressed
+   logically live here.
+
+   Rules are scoped to [dir="rtl"] inside our own subtree so a host page that is
+   itself RTL, or one that embeds an Arabic survey in an LTR page, both render
+   correctly. */
+
+/* background-position has no logical form: move the select caret to the
+   left edge, opposite the padding that inset-inline-end already mirrored. */
+[dir="rtl"] select {
+    background-position: left var(--mf-space-md) center;
+}
+
+/* Emails, URLs, numbers, dates and phone numbers are latin/numeric content
+   even in an Arabic survey: keep their own direction LTR so punctuation
+   (@, ., +, /) lands where the user expects, but align them to the start of
+   the RTL line so they still read as part of the form. */
+[dir="rtl"] input[type="email"],
+[dir="rtl"] input[type="url"],
+[dir="rtl"] input[type="number"],
+[dir="rtl"] input[type="tel"],
+[dir="rtl"] input[type="date"],
+[dir="rtl"] input[type="time"] {
+    direction: ltr;
+    text-align: right;
+}
+
+/* Mirror of mf-slide-in: questions enter from the reading edge. */
+@keyframes mf-slide-in-rtl {
+    from {
+        opacity: 0;
+        transform: translateX(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+[dir="rtl"] .magicfeedback-div {
+    animation-name: mf-slide-in-rtl;
+}
+
 /* ========================================
    LOCAL \u2014 reglas del popup, no vienen del paquete
    ======================================== */
@@ -1989,12 +2306,14 @@ function insertPopupLogo(parent, anchor, style, id) {
   }
   switch (style.logoPosition) {
     case "left":
-      img.style.margin = "12px 16px 0 0";
-      img.style.marginLeft = "0";
+      img.style.margin = "12px 0 0 0";
+      img.style.setProperty("margin-inline-start", "0");
+      img.style.setProperty("margin-inline-end", "16px");
       break;
     case "right":
-      img.style.margin = "12px 0 0 16px";
-      img.style.marginLeft = "auto";
+      img.style.margin = "12px 0 0 0";
+      img.style.setProperty("margin-inline-start", "auto");
+      img.style.setProperty("margin-inline-end", "0");
       break;
     case "center":
       img.style.margin = "12px auto 0 auto";
@@ -2113,6 +2432,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let stylesInjected = false;
   let pageDepth = 0;
   let onStartPage = false;
+  let labels = getLabels(options?.language);
+  let actionLabels = resolveActionLabels(actions, options?.language);
+  let direction = directionFor(options?.language);
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
@@ -2139,6 +2461,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const popup = document.createElement("div");
   popup.id = "dd-popup";
   popup.className = "deepdots-popup";
+  popup.setAttribute("dir", direction);
   popup.style.cssText = `
       position: relative;
       display: flex;
@@ -2168,7 +2491,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const titleEl = document.createElement("h2");
   titleEl.id = "dd-title";
   titleEl.className = "deepdots-popup-title";
-  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
+  titleEl.style.cssText = `margin:0; font-size:17px; font-weight:600; line-height:1.3; color:${theme.textPrimary}; text-transform:none; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`;
   titleEl.hidden = true;
   const setTitle = (value) => {
     if (!value) return;
@@ -2180,7 +2503,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const closeBtn = document.createElement("button");
   closeBtn.id = "dd-close";
   closeBtn.type = "button";
-  closeBtn.setAttribute("aria-label", "Close popup");
+  closeBtn.setAttribute("aria-label", labels.closeAria);
   closeBtn.innerHTML = `
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
@@ -2239,7 +2562,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   progressLabel.appendChild(progressTotal);
   const progressFollowUp = document.createElement("span");
   progressFollowUp.id = "dd-progress-followup";
-  progressFollowUp.textContent = "Follow-up";
+  progressFollowUp.textContent = labels.followUp;
   progressFollowUp.style.cssText = "display:none; font-size:12px; font-weight:600; color:#fff; background:rgba(59,130,246,0.44); border-radius:999px; padding:2px 10px;";
   progressHead.appendChild(progressLabel);
   progressHead.appendChild(progressFollowUp);
@@ -2271,8 +2594,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       progressCurrent.textContent = `${Math.round(pct)}%`;
       progressTotal.textContent = "";
     } else {
-      progressCurrent.textContent = `Question ${label}`;
-      progressTotal.textContent = ` of ${total}`;
+      progressCurrent.textContent = `${labels.question} ${label}`;
+      progressTotal.textContent = ` ${labels.of} ${total}`;
     }
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
@@ -2309,7 +2632,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const spinnerEl = document.createElement("div");
   spinnerEl.className = "mf-spinner";
   spinnerEl.setAttribute("role", "status");
-  spinnerEl.setAttribute("aria-label", "Loading survey");
+  spinnerEl.setAttribute("aria-label", labels.loadingAria);
   spinnerEl.innerHTML = '<div class="mf-spinner-circle"></div>';
   spinnerEl.style.cssText = "position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);";
   const formDivId = `magicfeedback-form-${surveyId}`;
@@ -2328,7 +2651,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const backButton = document.createElement("button");
   backButton.id = "dd-back";
   backButton.className = "dd-nav-btn";
-  backButton.textContent = actions?.back ? actions.back.label : "Back";
+  backButton.textContent = actionLabels.back;
   backButton.style.cssText = `
       background: transparent;
       color: ${theme.textMuted};
@@ -2358,7 +2681,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const startButton = document.createElement("button");
   startButton.id = "dd-start";
   startButton.className = "dd-nav-btn";
-  startButton.textContent = actions?.start ? actions.start.label : "Start survey";
+  startButton.textContent = actionLabels.start;
   startButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -2385,7 +2708,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const closeButton = document.createElement("button");
   closeButton.id = "dd-complete";
   closeButton.className = "dd-nav-btn";
-  closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
+  closeButton.textContent = actionLabels.complete;
   closeButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -2416,7 +2739,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const submitButton = document.createElement("button");
   submitButton.id = "dd-submit";
   submitButton.className = "dd-nav-btn";
-  submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
+  submitButton.textContent = actionLabels.accept;
   submitButton.style.cssText = `
       background: #1E293B;
       color: #fff;
@@ -2440,6 +2763,19 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       formInstance?.send?.();
     }
   };
+  function applyLabels(lang) {
+    labels = getLabels(lang);
+    actionLabels = resolveActionLabels(actions, lang);
+    backButton.textContent = actionLabels.back;
+    startButton.textContent = actionLabels.start;
+    closeButton.textContent = actionLabels.complete;
+    submitButton.textContent = actionLabels.accept;
+    closeBtn.setAttribute("aria-label", labels.closeAria);
+    spinnerEl.setAttribute("aria-label", labels.loadingAria);
+    progressFollowUp.textContent = labels.followUp;
+    direction = directionFor(lang);
+    popup.setAttribute("dir", direction);
+  }
   backButton.style.display = "none";
   startButton.style.display = "none";
   submitButton.style.display = "none";
@@ -2560,6 +2896,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       addSuccessScreen: false
     };
     generateOptions.onLoadedEvent = ({ formData }) => {
+      const surveyLang = Array.isArray(formData?.lang) ? formData.lang.find((l) => typeof l === "string" && l.trim().length > 0) : void 0;
+      if (surveyLang) applyLabels(surveyLang);
       try {
       } catch {
       }
@@ -2620,13 +2958,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       if (errText) {
         setLoading(false);
         if (errText.toLowerCase().includes("no response")) {
-          errorHint.textContent = "Please answer the required question to continue.";
+          errorHint.textContent = labels.errorRequired;
           errorHint.style.display = "block";
           emit("popup_clicked", surveyId, { action: "validation_error_required" });
           updateNavButtons();
           return;
         }
-        errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
+        errorHint.textContent = labels.errorSubmit;
         errorHint.style.display = "block";
         emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
         return;
@@ -2669,6 +3007,7 @@ var init_renderPopup = __esm({
     init_font();
     init_logo();
     init_logger();
+    init_labels();
     import_native = __toESM(require("@magicfeedback/native"));
     init_style();
   }
@@ -2880,6 +3219,7 @@ init_tracking_manager();
 
 // src/ui/surveyHtml.ts
 init_font();
+init_labels();
 init_style();
 var POSITION_MAP = {
   center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
@@ -2893,9 +3233,13 @@ var POSITION_MAP = {
 function jsonForScript(value) {
   return JSON.stringify(value ?? null).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
+function trimmedOrNull(value) {
+  const trimmed = typeof value === "string" ? value.trim() : "";
+  return trimmed ? value : null;
+}
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.8";
+  const version = opts.version ?? "2.2.22";
   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);
@@ -2927,10 +3271,22 @@ function buildSurveyHtml(opts) {
   const titleJson = jsonForScript(opts.title ?? "");
   const customCss = (opts.surveyCss ?? "").replace(/<\/\s*style/gi, "<\\/style");
   const progressPref = opts.showProgressBar === void 0 ? "null" : String(opts.showProgressBar);
-  const backLabel = jsonForScript(opts.actions?.back?.label ?? "Back");
-  const startLabel = jsonForScript(opts.actions?.start?.label ?? "Start survey");
-  const completeLabel = jsonForScript(opts.actions?.complete?.label ?? "Complete survey");
-  const submitLabel = jsonForScript(opts.actions?.accept?.label ?? "Send");
+  const initLabels = getLabels(opts.language);
+  const initActionLabels = resolveActionLabels(opts.actions, opts.language);
+  const backLabel = jsonForScript(initActionLabels.back);
+  const startLabel = jsonForScript(initActionLabels.start);
+  const completeLabel = jsonForScript(initActionLabels.complete);
+  const submitLabel = jsonForScript(initActionLabels.accept);
+  const labelsTableJson = jsonForScript(LABELS);
+  const actionOverridesJson = jsonForScript({
+    accept: trimmedOrNull(opts.actions?.accept?.label),
+    start: trimmedOrNull(opts.actions?.start?.label),
+    complete: trimmedOrNull(opts.actions?.complete?.label),
+    back: trimmedOrNull(opts.actions?.back?.label)
+  });
+  const initLangJson = jsonForScript(opts.language ?? "");
+  const initDirection = directionFor(opts.language);
+  const rtlLocalesJson = jsonForScript(RTL_LOCALES);
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="${colorScheme}"/>
@@ -2943,8 +3299,8 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .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
    margin-bottom 40px), pensada para los enunciados y no para el t\xEDtulo de la cabecera. */
-#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-left:auto}
+#dd-title{margin:0;font-family:var(--deepdots-font,'Montserrat',inherit);font-size:17px;font-weight:600;line-height:1.3;color:${textPrimary};text-transform:none;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#dd-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:${textPrimary};padding:4px;flex:0 0 auto;margin-inline-start:auto}
 /* Progreso alineado con la cabecera: sin padding horizontal propio, lo marca la tarjeta.
    El vertical es el mismo arriba y abajo, y del mismo valor que el padding de la tarjeta. */
 .deepdots-progress{display:none;flex-direction:column;gap:8px;width:100%;flex:0 0 auto;padding:16px 0;box-sizing:border-box}
@@ -3001,10 +3357,10 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 ${customCss}
 </style>
 </head><body>
-<div class="${popupClass}" id="dd-popup">
+<div class="${popupClass}" id="dd-popup" dir="${initDirection}">
   <div class="deepdots-popup-header">
     <h2 id="dd-title" class="deepdots-popup-title" hidden></h2>
-    <button type="button" id="dd-close" aria-label="Close popup">
+    <button type="button" id="dd-close" aria-label="${initLabels.closeAria}">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5 5L19 19M5 19L19 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="butt"/>
       </svg>
@@ -3013,23 +3369,23 @@ ${customCss}
   <div class="deepdots-progress" id="dd-progress">
     <div class="deepdots-progress-head">
       <span id="dd-progress-label"><span id="dd-progress-current"></span><span id="dd-progress-total"></span></span>
-      <span id="dd-progress-followup">Follow-up</span>
+      <span id="dd-progress-followup">${initLabels.followUp}</span>
     </div>
     <div class="deepdots-progress-track"><div id="dd-progress-bar"></div></div>
   </div>
   <div class="deepdots-popup-container-content" id="dd-content">
     <div class="deepdots-popup-main" id="dd-main">
       <div id="dd-form-wrapper">
-        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="Loading survey"><div class="mf-spinner-circle"></div></div>
+        <div class="mf-spinner" id="dd-spinner" role="status" aria-label="${initLabels.loadingAria}"><div class="mf-spinner-circle"></div></div>
         <div id="mf"></div>
       </div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
     </div>
     <div class="deepdots-popup-footer" id="dd-footer">
-      <button type="button" class="dd-nav-btn" id="dd-submit">Send</button>
-      <button type="button" class="dd-nav-btn" id="dd-back">Back</button>
-      <button type="button" class="dd-nav-btn" id="dd-complete">Complete survey</button>
-      <button type="button" class="dd-nav-btn" id="dd-start">Start survey</button>
+      <button type="button" class="dd-nav-btn" id="dd-submit"></button>
+      <button type="button" class="dd-nav-btn" id="dd-back"></button>
+      <button type="button" class="dd-nav-btn" id="dd-complete"></button>
+      <button type="button" class="dd-nav-btn" id="dd-start"></button>
     </div>
   </div>
 </div>
@@ -3058,6 +3414,32 @@ ${customCss}
   var progressTotal=document.getElementById('dd-progress-total');
   var progressFollowUp=document.getElementById('dd-progress-followup');
   var progressBar=document.getElementById('dd-progress-bar');
+  var closeEl=document.getElementById('dd-close');
+
+  // --- i18n del chrome -------------------------------------------------------------------
+  // La tabla completa viaja embebida porque el idioma del survey (\`formData.lang[0]\`) solo se
+  // conoce ya dentro del WebView. \`ddResolveLocale\` es el espejo del \`resolveLocale\` de TS
+  // (paridad cubierta por test).
+  var DD_LABELS=${labelsTableJson};
+  var DD_ACTION_OVERRIDES=${actionOverridesJson};
+  ${RESOLVE_LOCALE_JS}
+  var DD_LABELS_ACTIVE=DD_LABELS[ddResolveLocale(${initLangJson})];
+  var DD_RTL=${rtlLocalesJson};
+  function ddIsRtl(lang){ return DD_RTL.indexOf(ddResolveLocale(lang))!==-1; }
+  function ddApplyLabels(lang){
+    var next=DD_LABELS[ddResolveLocale(lang)];
+    if(!next) return;
+    DD_LABELS_ACTIVE=next;
+    // El survey ya se ha volteado a s\xED mismo: el chrome tiene que acompa\xF1arlo.
+    popup.setAttribute('dir', ddIsRtl(lang) ? 'rtl' : 'ltr');
+    backBtn.textContent=DD_ACTION_OVERRIDES.back||next.back;
+    startBtn.textContent=DD_ACTION_OVERRIDES.start||next.start;
+    completeBtn.textContent=DD_ACTION_OVERRIDES.complete||next.complete;
+    submitBtn.textContent=DD_ACTION_OVERRIDES.accept||next.accept;
+    if(closeEl){ closeEl.setAttribute('aria-label',next.closeAria); }
+    if(spinner){ spinner.setAttribute('aria-label',next.loadingAria); }
+    progressFollowUp.textContent=next.followUp;
+  }
 
   function setTitle(t){
     if(!t) return;
@@ -3098,8 +3480,8 @@ ${customCss}
       progressCurrent.textContent=Math.round(pct)+'%';
       progressTotal.textContent='';
     } else {
-      progressCurrent.textContent='Question '+label;
-      progressTotal.textContent=' of '+total;
+      progressCurrent.textContent=DD_LABELS_ACTIVE.question+' '+label;
+      progressTotal.textContent=' '+DD_LABELS_ACTIVE.of+' '+total;
     }
     progressFollowUp.style.display=p&&p.followup?'inline-block':'none';
   }
@@ -3109,7 +3491,7 @@ ${customCss}
   completeBtn.textContent=${completeLabel};
   submitBtn.textContent=${submitLabel};
 
-  document.getElementById('dd-close').onclick=function(){ emitJSON('popup_close'); };
+  closeEl.onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
   startBtn.onclick=function(){
     if(window.DeepdotsForm && window.DeepdotsForm.startForm){
@@ -3204,6 +3586,14 @@ ${customCss}
         // fallback es un literal gen\xE9rico que ignora style.successMessage.
         addSuccessScreen:false,
         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;
+          if(langs && langs.length){
+            for(var li=0;li<langs.length;li++){
+              if(typeof langs[li]==='string' && langs[li].trim()){ ddApplyLabels(langs[li]); break; }
+            }
+          }
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
@@ -3230,8 +3620,10 @@ ${customCss}
               if(s.logoSize==='small'){ logoImg.style.maxHeight='30px'; }
               else if(s.logoSize==='medium'){ logoImg.style.maxHeight='50px'; }
               else if(s.logoSize==='large'){ logoImg.style.maxHeight='70px'; }
-              if(s.logoPosition==='left'){ logoImg.style.margin='12px 16px 0 0'; logoImg.style.marginLeft='0'; }
-              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 16px'; logoImg.style.marginLeft='auto'; }
+              // M\xE1rgenes l\xF3gicos: con un survey RTL el popup va con dir="rtl" y el logo
+              // tiene que acompa\xF1ar al chrome. En LTR el resultado es el mismo de antes.
+              if(s.logoPosition==='left'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','0'); logoImg.style.setProperty('margin-inline-end','16px'); }
+              else if(s.logoPosition==='right'){ logoImg.style.margin='12px 0 0 0'; logoImg.style.setProperty('margin-inline-start','auto'); logoImg.style.setProperty('margin-inline-end','0'); }
               else if(s.logoPosition==='center'){ logoImg.style.margin='12px auto 0 auto'; }
               // Encima de la barra de progreso, como hermano del header (espejo de ui/logo.ts en
               // web). Fuera de #dd-main, as\xED el logo no se va con el scroll del formulario.
@@ -3257,12 +3649,12 @@ ${customCss}
             setLoading(false);
             if(error.toLowerCase().indexOf('no response')!==-1){
               // La p\xE1gina no ha cambiado: el estado de navegaci\xF3n se queda como estaba.
-              errorHint.textContent='Please answer the required question to continue.';
+              errorHint.textContent=DD_LABELS_ACTIVE.errorRequired;
               errorHint.style.display='block';
               updateNavButtons();
               return;
             }
-            errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
+            errorHint.textContent=DD_LABELS_ACTIVE.errorSubmit;
             errorHint.style.display='block';
             return;
           }
@@ -3335,7 +3727,8 @@ var ReactNativePopupRenderer = class {
       chrome: renderChrome,
       title: options?.title,
       showProgressBar: options?.showProgressBar,
-      surveyCss: options?.surveyCss
+      surveyCss: options?.surveyCss,
+      language: options?.language
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -4187,6 +4580,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();
 
@@ -4277,6 +4739,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();
@@ -4352,6 +4818,7 @@ var DeepdotsPopups = class {
     };
     const storage = config.storage ?? createDefaultStorage();
     this.storage = storage;
+    this.loadPopupState(storage);
     this.tracking = new TrackingManager({
       storage,
       clientUserId: this.config.userId,
@@ -4619,6 +5086,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();
   }
@@ -4790,6 +5261,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 });
   }
@@ -5148,7 +5620,7 @@ var DeepdotsPopups = class {
         miniService,
         analyticsFeedbackSessionId,
         this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
       return;
     }
@@ -5168,7 +5640,7 @@ var DeepdotsPopups = class {
         sessionId,
         miniService,
         analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
       );
     });
   }
@@ -5269,6 +5741,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;