@magicfeedback/popup-sdk 1.14.0 → 1.16.0

package/dist/index.js

@@ -256,7 +256,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "An error occurred while submitting. Please try again or close the popup.",
+      errorLoad: "We couldn't load this survey."
     };
     ES = {
       accept: "Enviar",
@@ -270,7 +271,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Se produjo un error al enviar. Int\xE9ntalo de nuevo o cierra la ventana.",
+      errorLoad: "No se ha podido cargar la encuesta."
     };
     DA = {
       accept: "Send",
@@ -284,7 +286,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Der opstod en fejl under afsendelsen. Pr\xF8v igen, eller luk pop op-vinduet.",
+      errorLoad: "Unders\xF8gelsen kunne ikke indl\xE6ses."
     };
     NO = {
       accept: "Send",
@@ -298,7 +301,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Det oppstod en feil under innsendingen. Pr\xF8v igjen, eller lukk popupen.",
+      errorLoad: "Unders\xF8kelsen kunne ikke lastes inn."
     };
     SV = {
       accept: "Skicka",
@@ -312,7 +316,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Ett fel uppstod vid inskickningen. F\xF6rs\xF6k igen eller st\xE4ng popupen.",
+      errorLoad: "Enk\xE4ten kunde inte laddas."
     };
     FI = {
       accept: "L\xE4het\xE4",
@@ -326,7 +331,8 @@ var init_labels = __esm({
       closeAria: "Sulje ponnahdusikkuna",
       loadingAria: "Ladataan kysely\xE4",
       errorRequired: "Vastaa pakolliseen kysymykseen jatkaaksesi.",
-      errorSubmit: "L\xE4hetyksess\xE4 tapahtui virhe. Yrit\xE4 uudelleen tai sulje ponnahdusikkuna."
+      errorSubmit: "L\xE4hetyksess\xE4 tapahtui virhe. Yrit\xE4 uudelleen tai sulje ponnahdusikkuna.",
+      errorLoad: "Kysely\xE4 ei voitu ladata."
     };
     DE = {
       accept: "Senden",
@@ -340,7 +346,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Beim Senden ist ein Fehler aufgetreten. Versuche es erneut oder schlie\xDFe das Popup.",
+      errorLoad: "Die Umfrage konnte nicht geladen werden."
     };
     FR = {
       accept: "Envoyer",
@@ -354,7 +361,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Une erreur s'est produite lors de l'envoi. R\xE9essayez ou fermez la fen\xEAtre.",
+      errorLoad: "Impossible de charger l'enqu\xEAte."
     };
     PT = {
       accept: "Enviar",
@@ -368,7 +376,8 @@ var init_labels = __esm({
       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."
+      errorSubmit: "Ocorreu um erro ao enviar. Tente novamente ou feche a janela.",
+      errorLoad: "N\xE3o foi poss\xEDvel carregar o inqu\xE9rito."
     };
     AR = {
       accept: "\u0625\u0631\u0633\u0627\u0644",
@@ -382,7 +391,8 @@ var init_labels = __esm({
       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."
+      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.",
+      errorLoad: "\u062A\u0639\u0630\u0651\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0627\u0633\u062A\u0628\u064A\u0627\u0646."
     };
     BN = {
       accept: "\u09AA\u09BE\u09A0\u09BE\u09A8",
@@ -396,7 +406,8 @@ var init_labels = __esm({
       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"
+      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",
+      errorLoad: "\u09B8\u09AE\u09C0\u0995\u09CD\u09B7\u09BE\u099F\u09BF \u09B2\u09CB\u09A1 \u0995\u09B0\u09BE \u09AF\u09BE\u09AF\u09BC\u09A8\u09BF\u0964"
     };
     ZH_CN = {
       accept: "\u53D1\u9001",
@@ -410,7 +421,8 @@ var init_labels = __esm({
       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"
+      errorSubmit: "\u63D0\u4EA4\u65F6\u51FA\u9519\u3002\u8BF7\u91CD\u8BD5\u6216\u5173\u95ED\u5F39\u7A97\u3002",
+      errorLoad: "\u65E0\u6CD5\u52A0\u8F7D\u95EE\u5377\u3002"
     };
     LABELS = {
       en: EN,
@@ -5628,30 +5640,35 @@ __export(renderPopup_exports, {
   SURVEY_ALIGNMENT_STYLE_ID: () => SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup: () => renderPopup
 });
-function ensureMagicFeedbackStyles(_popup) {
-  const STYLE_ID = "magicfeedback-sdk-styles";
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  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 = `
+function ensureStyle(id, css, nonce) {
+  let el = document.getElementById(id);
+  if (el && nonce && el.getAttribute("nonce") !== nonce) {
+    el.remove();
+    el = null;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = id;
+    if (nonce) el.setAttribute("nonce", nonce);
+    el.textContent = css;
+    document.head.appendChild(el);
+  } else if (el.textContent !== css) {
+    el.textContent = css;
+  }
+  return el;
+}
+function ensureMagicFeedbackStyles(nonce) {
+  ensureStyle("magicfeedback-sdk-styles", style_default, nonce);
+}
+function ensureSurveyAlignmentStyles(nonce) {
+  ensureStyle(SURVEY_ALIGNMENT_STYLE_ID, `
     .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");
-  style.id = "deepdots-spinner-styles";
-  style.textContent = `
+  `, nonce);
+}
+function ensureSpinnerStyles(nonce) {
+  ensureStyle("deepdots-spinner-styles", `
     /* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra
        de progreso y descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas
        de la misma p\xE1gina sigue separando. */
@@ -5659,14 +5676,10 @@ function ensureSpinnerStyles(_popup) {
     @keyframes ddspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .mf-spinner { display:flex; justify-content:center; align-items:center; padding:8px 0; }
     .mf-spinner-circle { width:28px; height:28px; border:3px solid #e0e6ed; border-top-color:#1E293B; border-radius:50%; animation: ddspin 0.9s linear infinite; }
-  `;
-  document.head.appendChild(style);
-}
-function ensureResponsiveStyles(_popup) {
-  if (document.getElementById("deepdots-responsive-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-responsive-styles";
-  style.textContent = `
+  `, nonce);
+}
+function ensureResponsiveStyles(nonce) {
+  ensureStyle("deepdots-responsive-styles", `
     /* Responsive adjustments */
     @media (max-width: 640px) {
       .deepdots-popup {
@@ -5699,32 +5712,20 @@ function ensureResponsiveStyles(_popup) {
         overflow-y: auto !important;
       }
     }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureCustomCss(css) {
+function ensureCustomCss(css, nonce) {
   const STYLE_ID = "deepdots-custom-css";
-  const existing = document.getElementById(STYLE_ID);
   if (!css) {
-    existing?.remove();
+    document.getElementById(STYLE_ID)?.remove();
     return;
   }
-  const el = existing ?? document.createElement("style");
-  el.id = STYLE_ID;
-  if (el.textContent !== css) el.textContent = css;
-  document.head.appendChild(el);
+  document.head.appendChild(ensureStyle(STYLE_ID, css, nonce));
 }
-function ensureFontFace(family, url) {
+function ensureFontFace(family, url, nonce) {
   const css = buildFontFaceCss(family, url);
   if (!css) return;
-  const STYLE_ID = "deepdots-font-face";
-  let el = document.getElementById(STYLE_ID);
-  if (!el) {
-    el = document.createElement("style");
-    el.id = STYLE_ID;
-    document.head.appendChild(el);
-  }
-  if (el.textContent !== css) el.textContent = css;
+  ensureStyle("deepdots-font-face", css, nonce);
 }
 function hasFinePointer() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;
@@ -5734,6 +5735,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let stylesInjected = false;
   let pageDepth = 0;
   let onStartPage = false;
+  const cspNonce = options?.cspNonce?.trim() || void 0;
   let labels = getLabels(options?.language);
   let actionLabels = resolveActionLabels(actions, options?.language);
   let direction = directionFor(options?.language);
@@ -5785,7 +5787,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     popup.style.fontFamily = familyValue;
     popup.style.setProperty("--deepdots-font", familyValue);
     popup.classList.add("deepdots-has-font");
-    if (font.url) ensureFontFace(font.family, font.url);
+    if (font.url) ensureFontFace(font.family, font.url, cspNonce);
   }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
@@ -5834,10 +5836,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     closeBtn.style.color = theme.textPrimary;
     closeBtn.style.transform = "scale(1)";
   };
-  closeBtn.onclick = () => {
+  const closeFromChrome = () => {
     emit("popup_clicked", surveyId, { action: "close_icon" });
     onClose();
   };
+  closeBtn.onclick = closeFromChrome;
   closeBtn.style.flex = "0 0 auto";
   closeBtn.style.marginLeft = "auto";
   header.appendChild(closeBtn);
@@ -5901,11 +5904,11 @@ 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);
+  ensureMagicFeedbackStyles(cspNonce);
+  ensureSurveyAlignmentStyles(cspNonce);
+  ensureSpinnerStyles(cspNonce);
+  ensureResponsiveStyles(cspNonce);
+  ensureCustomCss(options?.surveyCss, cspNonce);
   const containerContent = document.createElement("div");
   containerContent.id = "dd-content";
   containerContent.className = "deepdots-popup-container-content";
@@ -5945,6 +5948,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   formWrapper.appendChild(spinnerEl);
   formWrapper.appendChild(formHost);
   main.appendChild(formWrapper);
+  const loadErrorEl = document.createElement("div");
+  loadErrorEl.id = "dd-load-error";
+  loadErrorEl.className = "deepdots-load-error";
+  loadErrorEl.setAttribute("role", "alert");
+  loadErrorEl.style.cssText = `display:none; width:100%; text-align:center; padding:24px 0; font-size:15px; color:${theme.textPrimary};`;
+  main.appendChild(loadErrorEl);
   main.appendChild(errorHint);
   const footer = document.createElement("div");
   footer.id = "dd-footer";
@@ -6060,6 +6069,13 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       justify-content: center;
       text-align: center;
     `;
+  const cancelButton = document.createElement("button");
+  cancelButton.id = "dd-cancel";
+  cancelButton.type = "button";
+  cancelButton.className = "dd-nav-btn";
+  cancelButton.textContent = actionLabels.decline;
+  cancelButton.style.cssText = submitButton.style.cssText;
+  cancelButton.onclick = closeFromChrome;
   submitButton.onclick = () => {
     if (!surveyCompletedEmitted) {
       emit("popup_clicked", surveyId, { action: "manual_send" });
@@ -6073,6 +6089,8 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     startButton.textContent = actionLabels.start;
     closeButton.textContent = actionLabels.complete;
     submitButton.textContent = actionLabels.accept;
+    cancelButton.textContent = actionLabels.decline;
+    loadErrorEl.textContent = labels.errorLoad;
     closeBtn.setAttribute("aria-label", labels.closeAria);
     spinnerEl.setAttribute("aria-label", labels.loadingAria);
     progressFollowUp.textContent = labels.followUp;
@@ -6083,10 +6101,12 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   startButton.style.display = "none";
   submitButton.style.display = "none";
   closeButton.style.display = "none";
+  cancelButton.style.display = "none";
   footer.appendChild(submitButton);
   footer.appendChild(backButton);
   footer.appendChild(closeButton);
   footer.appendChild(startButton);
+  footer.appendChild(cancelButton);
   containerContent.appendChild(main);
   footer.style.flex = "0 0 auto";
   containerContent.appendChild(footer);
@@ -6095,6 +6115,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     startButton.style.display = "none";
     submitButton.style.display = "none";
     closeButton.style.display = "none";
+    cancelButton.style.display = "none";
     backButton.style.width = "";
     startButton.style.width = "";
     submitButton.style.width = "";
@@ -6124,6 +6145,9 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       case "error":
         setLoading(false);
         break;
+      case "load_error":
+        cancelButton.style.display = "inline-flex";
+        break;
     }
   }
   function updateNavButtons() {
@@ -6145,6 +6169,20 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       img.style.cssText = "max-width:100%; height:auto; margin:0 auto 16px auto; display:block;";
     });
   }
+  let loadFailed = false;
+  function showLoadError(reason) {
+    sdkWarn("[Deepdots] survey failed to load:", reason);
+    if (loadFailed) return;
+    loadFailed = true;
+    progressEl.style.display = "none";
+    formWrapper.style.display = "none";
+    errorHint.style.display = "none";
+    loadErrorEl.textContent = labels.errorLoad;
+    loadErrorEl.style.display = "block";
+    setLoading(false);
+    updateButtons("load_error");
+    reveal();
+  }
   popup.appendChild(header);
   popup.appendChild(progressEl);
   popup.appendChild(containerContent);
@@ -6209,7 +6247,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   try {
     if (!import_native.default || typeof import_native.default.form !== "function") {
       sdkWarn("[MagicFeedback] form() no disponible. Fallback manual.");
-      setLoading(false);
+      showLoadError("form() not available");
       return;
     }
     import_native.default.init(
@@ -6235,7 +6273,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       // quitado el `inert`. La apertura va aparte (ver autofocusOnOpen).
       autofocus: "navigation"
     };
-    generateOptions.onLoadedEvent = ({ formData, lang }) => {
+    generateOptions.onLoadedEvent = ({ formData, lang, error }) => {
+      if (error) {
+        showLoadError(error);
+        return;
+      }
       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);
@@ -6334,11 +6376,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {
       sdkError("[MagicFeedback] Error generating form:", err);
-      setLoading(false);
+      showLoadError(err);
     });
   } catch (e) {
     sdkError("[MagicFeedback] Exception initializing form:", e);
-    setLoading(false);
+    showLoadError(e);
   }
 }
 var import_native, SURVEY_ALIGNMENT_STYLE_ID;
@@ -6674,12 +6716,14 @@ function buildSurveyHtml(opts) {
   const startLabel = jsonForScript(initActionLabels.start);
   const completeLabel = jsonForScript(initActionLabels.complete);
   const submitLabel = jsonForScript(initActionLabels.accept);
+  const cancelLabel = jsonForScript(initActionLabels.decline);
   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)
+    back: trimmedOrNull(opts.actions?.back?.label),
+    decline: trimmedOrNull(opts.actions?.decline?.label)
   });
   const initLangJson = jsonForScript(opts.language ?? "");
   const initDirection = directionFor(opts.language);
@@ -6741,6 +6785,7 @@ body.dd-ready #dd-popup{visibility:visible}
 #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. */
+.deepdots-load-error{display:none;width:100%;text-align:center;padding:24px 0;font-size:15px;color:${textPrimary}}
 .deepdots-success{display:none;width:100%;text-align:center;padding:24px 0;color:${textPrimary}}
 .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}
@@ -6748,7 +6793,7 @@ body.dd-ready #dd-popup{visibility:visible}
 .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}
+#dd-start,#dd-complete,#dd-submit,#dd-cancel{background:#1E293B;color:#fff;border:none}
 #dd-submit:disabled,#dd-start:disabled,#dd-back:disabled,#dd-complete:disabled{opacity:0.6;cursor:not-allowed}
 .mf-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
 .mf-spinner-circle{width:28px;height:28px;border:3px solid #e0e6ed;border-top-color:#1E293B;border-radius:50%;animation:ddspin 0.9s linear infinite}
@@ -6789,6 +6834,7 @@ ${customCss}
         <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-load-error" id="dd-load-error" role="alert"></div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></div>
     </div>
     <div class="deepdots-popup-footer" id="dd-footer">
@@ -6796,6 +6842,7 @@ ${customCss}
       <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>
+      <button type="button" class="dd-nav-btn" id="dd-cancel"></button>
     </div>
   </div>
 </div>
@@ -6818,6 +6865,8 @@ ${customCss}
   var startBtn=document.getElementById('dd-start');
   var completeBtn=document.getElementById('dd-complete');
   var submitBtn=document.getElementById('dd-submit');
+  var cancelBtn=document.getElementById('dd-cancel');
+  var loadErrorEl=document.getElementById('dd-load-error');
   var titleEl=document.getElementById('dd-title');
   var progressEl=document.getElementById('dd-progress');
   var progressLabel=document.getElementById('dd-progress-label');
@@ -6847,6 +6896,8 @@ ${customCss}
     startBtn.textContent=DD_ACTION_OVERRIDES.start||next.start;
     completeBtn.textContent=DD_ACTION_OVERRIDES.complete||next.complete;
     submitBtn.textContent=DD_ACTION_OVERRIDES.accept||next.accept;
+    cancelBtn.textContent=DD_ACTION_OVERRIDES.decline||next.decline;
+    loadErrorEl.textContent=next.errorLoad;
     if(closeEl){ closeEl.setAttribute('aria-label',next.closeAria); }
     if(spinner){ spinner.setAttribute('aria-label',next.loadingAria); }
     progressFollowUp.textContent=next.followUp;
@@ -6901,6 +6952,7 @@ ${customCss}
   startBtn.textContent=${startLabel};
   completeBtn.textContent=${completeLabel};
   submitBtn.textContent=${submitLabel};
+  cancelBtn.textContent=${cancelLabel};
 
   closeEl.onclick=function(){ emitJSON('popup_close'); };
   backBtn.onclick=function(){ if(window.DeepdotsForm && window.DeepdotsForm.back){ window.DeepdotsForm.back(); } };
@@ -6912,6 +6964,8 @@ ${customCss}
     }
   };
   completeBtn.onclick=function(){ emitJSON('popup_close'); };
+  // \xDAnica acci\xF3n del survey que no carga: cierra igual que la X.
+  cancelBtn.onclick=function(){ emitJSON('popup_close'); };
   var surveyCompletedEmitted=false;
   submitBtn.onclick=function(){
     if(surveyCompletedEmitted) return;
@@ -6953,6 +7007,7 @@ ${customCss}
     startBtn.style.display='none';
     submitBtn.style.display='none';
     completeBtn.style.display='none';
+    cancelBtn.style.display='none';
     backBtn.style.width='';
     startBtn.style.width='';
     submitBtn.style.width='';
@@ -6968,6 +7023,8 @@ ${customCss}
     } else if(state==='completed'){
       completeBtn.style.display='inline-flex';
       completeBtn.style.width='100%';
+    } else if(state==='load_error'){
+      cancelBtn.style.display='inline-flex';
     }
   }
 
@@ -7014,6 +7071,26 @@ ${REVEAL_JS}
   }
   setLoading(true);
 
+  // Survey que no ha cargado (406 de /info, sin red, bundle del CDN ca\xEDdo). Antes se emit\xEDa
+  // \`loaded\` y se pintaba un Send sobre un survey vac\xEDo. Espejo de KMP: aviso traducido, la X
+  // sigue, un \xFAnico Cancel, y se revela ya (manda \`ready\`): no hay nada m\xE1s que esperar.
+  // No es interacci\xF3n del usuario: el renderer no lo convierte en popup_clicked.
+  var ddLoadFailed=false;
+  function ddShowLoadError(name, reason){
+    if(ddLoadFailed){ return; }
+    ddLoadFailed=true;
+    var why=(reason && reason.message) ? reason.message : String(reason);
+    emitJSON(name, { message: why });
+    progressEl.style.display='none';
+    formWrapper.style.display='none';
+    errorHint.style.display='none';
+    loadErrorEl.textContent=DD_LABELS_ACTIVE.errorLoad;
+    loadErrorEl.style.display='block';
+    setLoading(false);
+    updateButtons('load_error');
+    ddReveal.reveal();
+  }
+
   var initialized=false;
   function initMF(){
     if(initialized || !window.magicfeedback) return initialized;
@@ -7037,6 +7114,7 @@ ${REVEAL_JS}
         // de native sin esta opci\xF3n la ignoran.
         autofocus:'navigation',
         onLoadedEvent:function(args){
+          if(args && args.error){ ddShowLoadError('error:load', args.error); return; }
           // 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).
@@ -7140,13 +7218,13 @@ ${REVEAL_JS}
           updateProgress({ progress:p&&p.progress, total:form.total, completed:false, followup:p&&p.followup });
           emitJSON('back', p);
         }
-      }).catch(function(e){ setLoading(false); emit('error:init'); });
-    }catch(e){ setLoading(false); emit('error:exception'); }
+      }).catch(function(e){ ddShowLoadError('error:init', e); });
+    }catch(e){ ddShowLoadError('error:exception', e); }
     return true;
   }
   var s=document.createElement('script'); s.src=${JSON.stringify(cdn)}; s.async=true;
   s.onload=function(){ initMF(); };
-  s.onerror=function(){ setLoading(false); emit('error:load'); };
+  s.onerror=function(){ ddShowLoadError('error:load', 'survey script failed to load'); };
   document.head.appendChild(s);
   var tries=0, t=setInterval(function(){ if(initMF()||++tries>40){ clearInterval(t); } },150);
 })();
@@ -7265,6 +7343,7 @@ var ReactNativePopupRenderer = class {
         this.onCloseFn?.();
         break;
       default:
+        if (typeof name === "string" && name.startsWith("error:")) this.emitReady(surveyId);
         break;
     }
   }
@@ -8393,8 +8472,6 @@ var DeepdotsPopups = class {
     this.renderer = createDefaultRenderer();
     /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
     this.logger = console;
-    this.popupContainer = null;
-    // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
     this.popupsLoaded = false;
     /**
@@ -8425,6 +8502,7 @@ var DeepdotsPopups = class {
     this.showProgressBar = void 0;
     /** CSS del host inyectado al final de los estilos del popup. */
     this.surveyCss = void 0;
+    this.cspNonce = void 0;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -8497,6 +8575,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.cspNonce = config.cspNonce;
     this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
@@ -8597,7 +8676,6 @@ var DeepdotsPopups = class {
     this.initialized = true;
     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) => {
       if (!defs) this.dropPendingTriggers();
@@ -9568,27 +9646,6 @@ var DeepdotsPopups = class {
       listeners.delete(listener);
     }
   }
-  /** Setup popup container element */
-  setupPopupContainer() {
-    if (typeof document === "undefined") {
-      return;
-    }
-    this.popupContainer = document.createElement("div");
-    this.popupContainer.id = "deepdots-popup-container";
-    this.popupContainer.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: none;
-          z-index: 999999;
-          background: rgba(0, 0, 0, 0.5);
-          justify-content: center;
-          align-items: center;
-        `;
-    document.body.appendChild(this.popupContainer);
-  }
   /** Render the popup UI */
   renderPopup(surveyId, productId, actions, style, title) {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
@@ -9596,54 +9653,25 @@ var DeepdotsPopups = class {
     const miniService = this.analytics?.getMiniService() ?? void 0;
     const analyticsFeedbackSessionId = this.analyticsFeedbackSessionId;
     this.log("tracking \xB7 survey identity \u2192", { userId: userId ?? null, sessionId: sessionId ?? null, miniService: miniService ?? null, analyticsFeedbackSessionId: analyticsFeedbackSessionId ?? null });
-    if (this.renderer) {
-      this.renderer.show(
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-      return;
-    }
-    if (!this.popupContainer) return;
-    const container = this.popupContainer;
-    void Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports)).then(({ renderPopup: renderPopup2 }) => {
-      renderPopup2(
-        container,
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-    });
+    this.renderer.show(
+      surveyId,
+      productId,
+      actions,
+      (type, id, payload) => this.emitEvent(type, id, payload),
+      () => this.hidePopup(),
+      this.env,
+      userId,
+      style,
+      sessionId,
+      miniService,
+      analyticsFeedbackSessionId,
+      this.renderChrome,
+      { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language, cspNonce: this.cspNonce }
+    );
   }
   /** Hide the popup */
   hidePopup() {
-    if (this.renderer) {
-      this.renderer.hide();
-      return;
-    }
-    if (this.popupContainer) {
-      this.popupContainer.style.display = "none";
-      this.popupContainer.innerHTML = "";
-    }
+    this.renderer.hide();
   }
   /** Emit an event */
   emitEvent(type, surveyId, data) {