@magicfeedback/popup-sdk 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -9,7 +9,7 @@ import {
   sdkWarn,
   setLogger,
   style_default
-} from "./chunk-XFA2Y6CK.mjs";
+} from "./chunk-AN7JIVWB.mjs";
 
 // src/types/index.ts
 var POPUP_TRIGGER_CONDITION_STATUSES = [
@@ -209,14 +209,17 @@ var POSITION_MAP = {
   "top-right": { justifyContent: "flex-end", alignItems: "flex-start", padding: "16px", background: "transparent" },
   "top-left": { justifyContent: "flex-start", alignItems: "flex-start", padding: "16px", background: "transparent" }
 };
+function jsonForScript(value) {
+  return JSON.stringify(value ?? null).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.4";
+  const version = opts.version ?? "2.2.8";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
-  const sid = JSON.stringify(opts.surveyId);
-  const pid = JSON.stringify(opts.productId);
-  const profileJson = JSON.stringify(opts.profile ?? []);
-  const metaJson = JSON.stringify(opts.metadata ?? []);
+  const sid = jsonForScript(opts.surveyId);
+  const pid = jsonForScript(opts.productId);
+  const profileJson = jsonForScript(opts.profile ?? []);
+  const metaJson = jsonForScript(opts.metadata ?? []);
   const fontFaceCss = opts.font ? buildFontFaceCss(opts.font.family, opts.font.url) : "";
   const fontFamilyValue = opts.font ? buildFontFamilyValue(opts.font.family) : "-apple-system,system-ui,sans-serif";
   const popupClass = opts.font?.family ? "deepdots-popup deepdots-has-font" : "deepdots-popup";
@@ -224,6 +227,8 @@ function buildSurveyHtml(opts) {
   const popupBg = isDark ? "#1e1e1e" : "#fff";
   const colorScheme = isDark ? "dark" : "light";
   const textPrimary = isDark ? "#f0f0f0" : "#111";
+  const textMuted = isDark ? "#9ca3af" : "#6b7280";
+  const trackBg = isDark ? "#3f3f46" : "#e5e7eb";
   const pos = POSITION_MAP[opts.position ?? "center"] ?? POSITION_MAP.center;
   const chrome = opts.chrome !== false;
   const bodyBg = chrome ? pos.background : "transparent";
@@ -235,10 +240,16 @@ function buildSurveyHtml(opts) {
   const cardMaxWidth = chrome ? "600px" : "none";
   const cardWidth = chrome ? "90%" : "100%";
   const cardMinHeight = chrome ? "200px" : "0";
-  const backLabel = JSON.stringify(opts.actions?.back?.label ?? "Back");
-  const startLabel = JSON.stringify(opts.actions?.start?.label ?? "Start survey");
-  const completeLabel = JSON.stringify(opts.actions?.complete?.label ?? "Complete survey");
-  const submitLabel = JSON.stringify(opts.actions?.accept?.label ?? "Send");
+  const cardHeight = chrome ? "auto" : "100%";
+  const cardMaxHeight = chrome ? "90vh" : "100%";
+  const mobileCard = chrome ? `.deepdots-popup{width:calc(100% - 24px);max-width:calc(100% - 24px);border-radius:12px;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) 16px}` : `.deepdots-popup{width:100%;max-width:100%;border-radius:0;padding:16px}`;
+  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");
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="${colorScheme}"/>
@@ -247,56 +258,97 @@ ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
 body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
-.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};box-sizing:border-box}
-.deepdots-popup-header{display:flex;justify-content:flex-end;align-items:center;width:100%}
-#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}
-.deepdots-popup-container-content{display:flex;flex-direction:column;padding:0 20px 12px 20px;max-height:80vh;overflow:hidden;box-sizing:border-box}
-.deepdots-popup-main{display:flex;flex-direction:column;width:100%;max-height:80vh;overflow-y:auto;overflow-x:hidden;position:relative}
+.deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};height:${cardHeight};max-height:${cardMaxHeight};box-sizing:border-box}
+.deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
+/* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
+   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}
+/* 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}
+.deepdots-progress-head{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:8px}
+#dd-progress-label{font-size:13px;line-height:1.2}
+/* "Question 1" en negrita y "of 3" en regular gris, como el mockup. */
+#dd-progress-current{font-weight:700;color:${textPrimary}}
+#dd-progress-total{font-weight:400;color:${textMuted}}
+#dd-progress-followup{display:none;font-size:12px;font-weight:600;color:#fff;background:rgba(59,130,246,0.44);border-radius:999px;padding:2px 10px}
+.deepdots-progress-track{width:100%;height:4px;border-radius:999px;background:${trackBg};overflow:hidden}
+#dd-progress-bar{height:100%;width:0%;background:#22C55E;border-radius:999px;transition:width 450ms ease}
+/* El popup es una columna: solo el bloque de preguntas hace scroll, para que el footer
+   con las acciones quede siempre visible en el borde inferior (antes viv\xEDa dentro del
+   \xE1rea scrollable y hab\xEDa que bajar hasta el final para ver "Send"). */
+/* Sin sangrado extra: el contenido se alinea con el t\xEDtulo y con la barra de progreso (antes
+   sumaba 20px a los lados sobre el padding de la tarjeta y quedaba m\xE1s adentro que la cabecera). */
+/* Sin barra de progreso, este padding-top es el que separa la cabecera de la pregunta. Con
+   barra, el JS lo pone a 0 y el hueco lo aporta el padding inferior del bloque de progreso,
+   de modo que el espacio por arriba y por abajo de la barra es id\xE9ntico. */
+.deepdots-popup-container-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:16px 0 0 0;overflow:hidden;box-sizing:border-box}
+/* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra y
+   descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas sigue separando. */
+.deepdots-popup .magicfeedback-questions .magicfeedback-div:first-child .magicfeedback-label{margin-top:0}
+.deepdots-popup-main{display:flex;flex-direction:column;width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative}
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
-#dd-logo{max-height:40px;max-width:100%;object-fit:contain}
+#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}
-.deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;width:100%;padding-top:16px}
-.dd-nav-btn{display:none;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:14px;box-shadow:0 2px 4px rgba(0,0,0,0.1);align-items:center;justify-content:center;text-align:center}
-#dd-back{background:transparent;color:#333;border:1px solid #999}
+/* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
+.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}
+.deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:4px;margin-top:auto;width:100%;padding-top:12px}
+.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
+/* 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-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}
 @keyframes ddspin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 @media (max-width:640px){
-  .deepdots-popup{width:calc(100% - 24px);max-width:calc(100% - 24px);border-radius:12px}
-  .deepdots-popup-footer{flex-direction:column-reverse;gap:12px}
+  ${mobileCard}
+  /* Apilados: la acci\xF3n principal (Send/Start/Complete) arriba y Back debajo. El orden del
+     DOM ya es ese, as\xED que \`column\` (no \`column-reverse\`) es lo que lo respeta. */
+  .deepdots-popup-footer{flex-direction:column;gap:4px}
   .dd-nav-btn{width:100%}
   .magicfeedback-checkbox-container,.magicfeedback-radio-container{margin:4px 0;padding:4px 8px}
   .magicfeedback-checkbox label,.magicfeedback-radio-container label{font-size:15px}
   .deepdots-popup input[type="radio"]{margin:6px 0 6px 8px}
   .deepdots-popup input[type="checkbox"]{width:16px;height:16px}
 }
+${customCss}
 </style>
 </head><body>
 <div class="${popupClass}" id="dd-popup">
   <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">
-      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <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>
     </button>
   </div>
-  <div class="deepdots-popup-container-content">
+  <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>
+    </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 id="mf"></div>
       </div>
       <div class="deepdots-error-hint" id="dd-error" role="alert" aria-live="polite"></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>
-      </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>
     </div>
   </div>
 </div>
@@ -309,6 +361,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 
   var popup=document.getElementById('dd-popup');
   var main=document.getElementById('dd-main');
+  var content=document.getElementById('dd-content');
   var footer=document.getElementById('dd-footer');
   var spinner=document.getElementById('dd-spinner');
   var formHost=document.getElementById('mf');
@@ -317,6 +370,58 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
   var startBtn=document.getElementById('dd-start');
   var completeBtn=document.getElementById('dd-complete');
   var submitBtn=document.getElementById('dd-submit');
+  var titleEl=document.getElementById('dd-title');
+  var progressEl=document.getElementById('dd-progress');
+  var progressLabel=document.getElementById('dd-progress-label');
+  var progressCurrent=document.getElementById('dd-progress-current');
+  var progressTotal=document.getElementById('dd-progress-total');
+  var progressFollowUp=document.getElementById('dd-progress-followup');
+  var progressBar=document.getElementById('dd-progress-bar');
+
+  function setTitle(t){
+    if(!t) return;
+    titleEl.textContent=t;
+    titleEl.hidden=false;
+  }
+  setTitle(${titleJson});
+
+  // Estado de la barra de progreso. \`progressPref\` null = manda la plataforma (style).
+  var progressPref=${progressPref};
+  var progressEnabled=progressPref===true;
+  var progressShowUnit=true;
+  var progressUnit='fraction';
+  var onStartPage=false;
+
+  function updateProgress(p){
+    var total=p&&typeof p.total==='number'?p.total:0;
+    var progress=p&&typeof p.progress==='number'?p.progress:0;
+    // Solo tiene sentido con m\xE1s de una p\xE1gina, fuera de la pantalla de inicio y sin completar.
+    if(!progressEnabled||onStartPage||p&&p.completed||total<=1){
+      progressEl.style.display='none';
+      // Sin barra, el hueco cabecera\u2192pregunta lo pone el contenido.
+      content.style.paddingTop='16px';
+      return;
+    }
+    progressEl.style.display='flex';
+    // Con barra, el hueco inferior ya lo pone el bloque de progreso: no duplicarlo.
+    content.style.paddingTop='0';
+    // Espejo de LineProgressQuestion (MagicSurvey): la barra usa el valor real (las follow-up
+    // suman +0.5 y avanzan media casilla) y la etiqueta redondea hacia abajo, porque una
+    // follow-up es un paso DENTRO de la misma pregunta, no la siguiente.
+    var current=Math.min(total,Math.max(1,progress+1));
+    var pct=Math.min(100,Math.max(0,(current/total)*100));
+    progressBar.style.width=pct+'%';
+    var label=Math.min(total,Math.max(1,Math.floor(progress)+1));
+    progressLabel.style.display=progressShowUnit?'block':'none';
+    if(progressUnit==='percentage'){
+      progressCurrent.textContent=Math.round(pct)+'%';
+      progressTotal.textContent='';
+    } else {
+      progressCurrent.textContent='Question '+label;
+      progressTotal.textContent=' of '+total;
+    }
+    progressFollowUp.style.display=p&&p.followup?'inline-block':'none';
+  }
 
   backBtn.textContent=${backLabel};
   startBtn.textContent=${startLabel};
@@ -325,7 +430,13 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 
   document.getElementById('dd-close').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){ window.DeepdotsForm.startForm(); } };
+  startBtn.onclick=function(){
+    if(window.DeepdotsForm && window.DeepdotsForm.startForm){
+      window.DeepdotsForm.startForm();
+      onStartPage=false;
+      updateProgress({ progress:window.DeepdotsForm.progress, total:window.DeepdotsForm.total, completed:false, followup:false });
+    }
+  };
   completeBtn.onclick=function(){ emitJSON('popup_close'); };
   var surveyCompletedEmitted=false;
   submitBtn.onclick=function(){
@@ -333,6 +444,36 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
     if(window.DeepdotsForm && window.DeepdotsForm.send){ window.DeepdotsForm.send(); }
   };
 
+  // Mensaje final configurado en la plataforma (\`style.successMessage\`). Se guarda al cargar
+  // y se pinta al completar. Va por innerHTML porque es HTML del editor de la plataforma
+  // (imagen + texto), igual que ya hace \`renderStartMessage\` con el mensaje de inicio.
+  var successMessageHtml='';
+  function showSuccessScreen(){
+    progressEl.style.display='none';
+    var wrapper=document.getElementById('dd-form-wrapper');
+    if(wrapper){ wrapper.style.display='none'; }
+    var done=document.getElementById('dd-success');
+    if(!done){
+      done=document.createElement('div');
+      done.id='dd-success';
+      done.className='deepdots-success';
+      main.insertBefore(done, errorHint);
+    }
+    done.innerHTML=successMessageHtml || '<p>Thank you for your feedback!</p>';
+    done.style.display='block';
+  }
+
+  // Profundidad de navegaci\xF3n DENTRO del survey: +1 por p\xE1gina avanzada, -1 al volver.
+  // Sustituye a la condici\xF3n \`total>1 && progress>0 && progress<total\`, que escond\xEDa el
+  // Back siempre que la siguiente pantalla era una follow-up din\xE1mica: las follow-up no
+  // entran en el grafo (suman +0.5 al progress y no tocan el total), as\xED que un survey de
+  // una pregunta con follow-up tiene total=1 y nunca cumpl\xEDa \`total>1\`.
+  var pageDepth=0;
+
+  function updateNavButtons(){
+    updateButtons(pageDepth>0?'in_progress_next':'in_progress_first');
+  }
+
   function updateButtons(state){
     backBtn.style.display='none';
     startBtn.style.display='none';
@@ -377,10 +518,20 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
       form.generate('mf', {
         addButton:false,
         getMetaData:true,
+        // La pantalla final la pinta el popup: renderSuccess de @magicfeedback/native usa
+        // 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,
         onLoadedEvent:function(args){
           var s=args && args.formData ? args.formData.style : null;
           if(s && !stylesInjected){
             stylesInjected=true;
+            if(s.successMessage){ successMessageHtml=s.successMessage; }
+            // La barra de progreso la decide el host (init) y, si no se pronuncia, la plataforma.
+            if(progressPref===null){ progressEnabled=s.showProgressBar===true; }
+            if(s.showProgressUnit!==undefined){ progressShowUnit=s.showProgressUnit!==false; }
+            if(s.progressUnit){ progressUnit=s.progressUnit; }
+            if(s.loadingBarColor){ progressBar.style.background=s.loadingBarColor; progressFollowUp.style.background=s.loadingBarColor; }
             if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
             if(s.buttonPrimaryColor){
@@ -389,7 +540,8 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
               completeBtn.style.background=s.buttonPrimaryColor; completeBtn.style.border='none'; completeBtn.style.color='#fff';
             }
             if(s.buttonSecondaryColor){
-              backBtn.style.background='#fff'; backBtn.style.color=s.buttonSecondaryColor; backBtn.style.border='1px solid '+s.buttonSecondaryColor;
+              // Bot\xF3n de texto: solo ti\xF1e la etiqueta, sin recuperar fondo ni borde.
+              backBtn.style.background='transparent'; backBtn.style.color=s.buttonSecondaryColor; backBtn.style.border='none';
             }
             if(s.logo && !document.getElementById('dd-logo')){
               var logoImg=document.createElement('img');
@@ -397,16 +549,20 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
               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='0 16px 20px 0'; logoImg.style.display='block'; logoImg.style.marginLeft='0'; }
-              else if(s.logoPosition==='right'){ logoImg.style.margin='0 0 20px 16px'; logoImg.style.display='block'; logoImg.style.marginLeft='auto'; }
-              else if(s.logoPosition==='center'){ logoImg.style.margin='0 auto 20px auto'; logoImg.style.display='block'; }
-              main.insertBefore(logoImg, document.getElementById('dd-form-wrapper'));
+              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'; }
+              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.
+              popup.insertBefore(logoImg, progressEl);
             }
-            if(s.startMessage && s.startMessage!==''){ updateButtons('start'); }
+            if(s.startMessage && s.startMessage!==''){ onStartPage=true; updateButtons('start'); }
             else { updateButtons('in_progress_first'); }
           } else {
             updateButtons('in_progress_first');
           }
+          // El total solo se conoce una vez montado el form; sin \xE9l no hay barra que pintar.
+          updateProgress({ progress:form.progress, total:form.total, completed:false, followup:false });
           emitJSON('loaded');
           setLoading(false);
         },
@@ -419,9 +575,10 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
           if(error){
             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.style.display='block';
-              updateButtons('in_progress_next');
+              updateNavButtons();
               return;
             }
             errorHint.textContent='An error occurred while submitting. Please try again or close the popup.';
@@ -432,17 +589,23 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
           setLoading(false);
           if(p && p.completed){
             surveyCompletedEmitted=true;
+            showSuccessScreen();
             updateButtons('completed');
+            updateProgress(p);
             emitJSON('survey_completed', p);
             return;
           }
-          if(p && p.total>1 && p.progress>0 && p.progress<p.total){ updateButtons('in_progress_next'); }
-          else { updateButtons('in_progress_first'); }
+          pageDepth++;
+          updateNavButtons();
+          updateProgress(p);
           emitJSON('after_submit', p);
         },
         onBackEvent:function(p){
-          if(p && p.progress===0){ updateButtons('in_progress_first'); }
-          else { updateButtons('in_progress_next'); }
+          // Con error ("No page found") no hubo navegaci\xF3n: la profundidad no se toca.
+          if(!(p&&p.error)){ pageDepth=Math.max(0,pageDepth-1); }
+          updateNavButtons();
+          // onBackEvent no trae \`total\`: se lee del form, que es su due\xF1o.
+          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'); });
@@ -470,7 +633,7 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, renderChrome) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, renderChrome, options) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
@@ -487,7 +650,10 @@ var ReactNativePopupRenderer = class {
       position: style?.position,
       actions,
       // renderChrome:false (init) → HTML sin tarjeta/overlay: el host lo envuelve en su Modal.
-      chrome: renderChrome
+      chrome: renderChrome,
+      title: options?.title,
+      showProgressBar: options?.showProgressBar,
+      surveyCss: options?.surveyCss
     });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -527,7 +693,6 @@ var ReactNativePopupRenderer = class {
         break;
       case "survey_completed":
         this.emitFn("survey_completed", surveyId);
-        this.onCloseFn?.();
         break;
       case "popup_close":
         this.onCloseFn?.();
@@ -578,14 +743,14 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome, options) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
-    void import("./renderPopup-TCKR5Z3P.mjs").then(({ renderPopup }) => {
-      renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId);
+    void import("./renderPopup-M6MKTDEH.mjs").then(({ renderPopup }) => {
+      renderPopup(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId, options);
     });
   }
   hide() {
@@ -1434,6 +1599,10 @@ var DeepdotsPopups = class {
     this.env = "production";
     /** Si el SDK pinta el "modal" del popup (RN). Default true; false = el host lo envuelve. */
     this.renderChrome = true;
+    /** Barra de progreso. undefined = la decide la plataforma (style.showProgressBar). */
+    this.showProgressBar = void 0;
+    /** CSS del host inyectado al final de los estilos del popup. */
+    this.surveyCss = void 0;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -1485,6 +1654,8 @@ var DeepdotsPopups = class {
     this.baseUrl = env.apiBaseUrl;
     this.env = config.nodeEnv || "production";
     this.renderChrome = config.renderChrome ?? true;
+    this.showProgressBar = config.showProgressBar;
+    this.surveyCss = config.surveyCss;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -1930,7 +2101,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.renderPopup(def.surveyId, def.productId, def.actions, def.style);
+    this.renderPopup(def.surveyId, def.productId, def.actions, def.style, def.title);
     this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
   }
   shouldShow(def, pathUrl, skipPathCheck = false) {
@@ -2268,7 +2439,7 @@ var DeepdotsPopups = class {
     document.body.appendChild(this.popupContainer);
   }
   /** Render the popup UI */
-  renderPopup(surveyId, productId, actions, style) {
+  renderPopup(surveyId, productId, actions, style, title) {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
     const sessionId = this.tracking?.getSessionId() ?? void 0;
     const miniService = this.analytics?.getMiniService() ?? void 0;
@@ -2287,13 +2458,14 @@ var DeepdotsPopups = class {
         sessionId,
         miniService,
         analyticsFeedbackSessionId,
-        this.renderChrome
+        this.renderChrome,
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
       );
       return;
     }
     if (!this.popupContainer) return;
     const container = this.popupContainer;
-    void import("./renderPopup-TCKR5Z3P.mjs").then(({ renderPopup }) => {
+    void import("./renderPopup-M6MKTDEH.mjs").then(({ renderPopup }) => {
       renderPopup(
         container,
         surveyId,
@@ -2306,7 +2478,8 @@ var DeepdotsPopups = class {
         style,
         sessionId,
         miniService,
-        analyticsFeedbackSessionId
+        analyticsFeedbackSessionId,
+        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss }
       );
     });
   }