@magicfeedback/popup-sdk 1.7.1 → 1.7.2

package/dist/index.js

@@ -466,6 +466,82 @@ var init_labels = __esm({
   }
 });
 
+// src/ui/reveal.ts
+function revealWhenPainted(root, reveal) {
+  const pending2 = Array.from(root.querySelectorAll("img")).filter((img) => !img.complete);
+  if (!pending2.length) {
+    reveal();
+    return;
+  }
+  let left = pending2.length;
+  const onSettled = () => {
+    left -= 1;
+    if (left <= 0) reveal();
+  };
+  pending2.forEach((img) => {
+    img.addEventListener("load", onSettled, { once: true });
+    img.addEventListener("error", onSettled, { once: true });
+  });
+}
+var REVEAL_TIMEOUT_MS;
+var init_reveal = __esm({
+  "src/ui/reveal.ts"() {
+    "use strict";
+    REVEAL_TIMEOUT_MS = 1200;
+  }
+});
+
+// src/ui/surveyPalette.ts
+function resolveSurveyPrimaryColor(style) {
+  for (const candidate of [style?.primaryColor, style?.buttonPrimaryColor]) {
+    const value = (candidate ?? "").trim();
+    if (HEX_COLOR.test(value)) return value;
+  }
+  return null;
+}
+function surveyPrimaryVars(color) {
+  return [
+    ["--mf-primary", color],
+    ["--mf-primary-hover", `color-mix(in srgb, ${color} 85%, black)`],
+    ["--mf-primary-light", `color-mix(in srgb, ${color} 15%, white)`],
+    ["--mf-primary-border", `color-mix(in srgb, ${color} 35%, transparent)`],
+    ["--mf-border-focus", color]
+  ];
+}
+function applySurveyPrimaryColor(el, style) {
+  const color = resolveSurveyPrimaryColor(style);
+  if (!color) return;
+  for (const [name, value] of surveyPrimaryVars(color)) {
+    el.style.setProperty(name, value);
+  }
+}
+var HEX_COLOR, PRIMARY_COLOR_JS;
+var init_surveyPalette = __esm({
+  "src/ui/surveyPalette.ts"() {
+    "use strict";
+    HEX_COLOR = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+    PRIMARY_COLOR_JS = `
+function ddResolveSurveyPrimaryColor(style){
+  var hex=/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+  var candidates=[style&&style.primaryColor, style&&style.buttonPrimaryColor];
+  for(var i=0;i<candidates.length;i++){
+    var value=(candidates[i]||'').trim();
+    if(hex.test(value)){ return value; }
+  }
+  return null;
+}
+function ddApplySurveyPrimaryColor(el, style){
+  var color=ddResolveSurveyPrimaryColor(style);
+  if(!color||!el){ return; }
+  el.style.setProperty('--mf-primary', color);
+  el.style.setProperty('--mf-primary-hover', 'color-mix(in srgb, '+color+' 85%, black)');
+  el.style.setProperty('--mf-primary-light', 'color-mix(in srgb, '+color+' 15%, white)');
+  el.style.setProperty('--mf-primary-border', 'color-mix(in srgb, '+color+' 35%, transparent)');
+  el.style.setProperty('--mf-border-focus', color);
+}`;
+  }
+});
+
 // src/assets/style.css
 var style_default;
 var init_style = __esm({
@@ -4755,6 +4831,8 @@ var require_magicfeedback_sdk_browser = __commonJS({
 // src/ui/renderPopup.ts
 var renderPopup_exports = {};
 __export(renderPopup_exports, {
+  REVEAL_TIMEOUT_MS: () => REVEAL_TIMEOUT_MS,
+  SURVEY_ALIGNMENT_STYLE_ID: () => SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup: () => renderPopup
 });
 function ensureMagicFeedbackStyles(_popup) {
@@ -4765,6 +4843,17 @@ function ensureMagicFeedbackStyles(_popup) {
   style.textContent = style_default;
   document.head.appendChild(style);
 }
+function ensureSurveyAlignmentStyles() {
+  if (document.getElementById(SURVEY_ALIGNMENT_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SURVEY_ALIGNMENT_STYLE_ID;
+  style.textContent = `
+    .deepdots-popup .magicfeedback-container,
+    .deepdots-popup .magicfeedback-form,
+    .deepdots-popup .magicfeedback-div { padding-left: 0; padding-right: 0; }
+  `;
+  document.head.appendChild(style);
+}
 function ensureSpinnerStyles(_popup) {
   if (document.getElementById("deepdots-spinner-styles")) return;
   const style = document.createElement("style");
@@ -5017,6 +5106,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
   ensureMagicFeedbackStyles(popup);
+  ensureSurveyAlignmentStyles();
   ensureSpinnerStyles(popup);
   ensureResponsiveStyles(popup);
   ensureCustomCss(options?.surveyCss);
@@ -5075,7 +5165,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -5105,7 +5195,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -5132,7 +5222,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -5163,7 +5253,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       border: none;
       min-height: 44px;
       padding: 12px 24px;
-      border-radius: 6px;
+      border-radius: 999px; /* p\xEDldora, como el Button de Material3 en KMP */
       cursor: pointer;
       font-size: 15px;
       font-weight: 600;
@@ -5265,14 +5355,35 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   container.innerHTML = "";
   container.appendChild(popup);
   container.style.display = "flex";
+  container.style.visibility = "hidden";
+  container.style.pointerEvents = "none";
   container.style.justifyContent = pos.justifyContent;
   container.style.alignItems = pos.alignItems;
   container.style.background = pos.background;
   if (pos.padding) container.style.padding = pos.padding;
+  let revealed = false;
+  let revealTimer = null;
+  function reveal() {
+    if (revealed) return;
+    revealed = true;
+    if (revealTimer !== null) {
+      clearTimeout(revealTimer);
+      revealTimer = null;
+    }
+    if (!container.contains(popup)) return;
+    container.style.visibility = "visible";
+    container.style.pointerEvents = "";
+  }
+  function revealWhenPainted2() {
+    if (revealed) return;
+    revealWhenPainted(popup, reveal);
+  }
+  revealTimer = setTimeout(reveal, REVEAL_TIMEOUT_MS);
   function setLoading(isLoading) {
     spinnerEl.style.display = isLoading ? "flex" : "none";
     if (!isLoading) {
       formHost.style.visibility = "visible";
+      revealWhenPainted2();
     }
     footer.style.display = isLoading ? "none" : "flex";
     backButton.disabled = isLoading;
@@ -5335,6 +5446,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         if (s.contentAlign) {
           main.style.justifyContent = s.contentAlign === "center" ? "center" : "flex-start";
         }
+        applySurveyPrimaryColor(popup, s);
         if (s.buttonPrimaryColor) {
           submitButton.style.background = s.buttonPrimaryColor;
           submitButton.style.border = "none";
@@ -5416,17 +5528,21 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     setLoading(false);
   }
 }
-var import_native;
+var import_native, SURVEY_ALIGNMENT_STYLE_ID;
 var init_renderPopup = __esm({
   "src/ui/renderPopup.ts"() {
     "use strict";
     init_tracking_manager();
     init_font();
     init_logo();
+    init_surveyPalette();
     init_logger();
     init_labels();
+    init_reveal();
     import_native = __toESM(require_magicfeedback_sdk_browser());
     init_style();
+    init_reveal();
+    SURVEY_ALIGNMENT_STYLE_ID = "deepdots-survey-alignment";
   }
 });
 
@@ -5442,8 +5558,10 @@ __export(index_exports, {
   MAX_TRACKED_MESSAGES: () => MAX_TRACKED_MESSAGES,
   MESSAGE_CHANNELS: () => MESSAGE_CHANNELS,
   MessageGuard: () => MessageGuard,
+  NATIVE_READY_GRACE_MS: () => NATIVE_READY_GRACE_MS,
   NoopPopupRenderer: () => NoopPopupRenderer,
   POPUP_TRIGGER_CONDITION_STATUSES: () => POPUP_TRIGGER_CONDITION_STATUSES,
+  REVEAL_TIMEOUT_MS: () => REVEAL_TIMEOUT_MS,
   RTL_LOCALES: () => RTL_LOCALES,
   ReactNativePopupRenderer: () => ReactNativePopupRenderer,
   SUPPORTED_LANGUAGES: () => SUPPORTED_LANGUAGES,
@@ -5658,7 +5776,33 @@ init_tracking_manager();
 // src/ui/surveyHtml.ts
 init_font();
 init_labels();
+init_reveal();
+init_surveyPalette();
 init_style();
+var REVEAL_JS = `
+function ddCreateReveal(popup, onReveal, timeoutMs){
+  var revealed=false, timer=null;
+  function reveal(){
+    if(revealed){ return; }
+    revealed=true;
+    if(timer){ clearTimeout(timer); timer=null; }
+    onReveal();
+  }
+  function revealWhenPainted(){
+    if(revealed){ return; }
+    var imgs=popup.querySelectorAll('img'), pending=[];
+    for(var i=0;i<imgs.length;i++){ if(!imgs[i].complete){ pending.push(imgs[i]); } }
+    if(!pending.length){ reveal(); return; }
+    var left=pending.length;
+    function onSettled(){ left--; if(left<=0){ reveal(); } }
+    for(var j=0;j<pending.length;j++){
+      pending[j].addEventListener('load', onSettled);
+      pending[j].addEventListener('error', onSettled);
+    }
+  }
+  timer=setTimeout(reveal, timeoutMs);
+  return { reveal: reveal, whenPainted: revealWhenPainted };
+}`;
 var POSITION_MAP = {
   center: { justifyContent: "center", alignItems: "center", padding: "0", background: "rgba(0,0,0,0.5)" },
   bottom: { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
@@ -5732,7 +5876,13 @@ function buildSurveyHtml(opts) {
 ${style_default}
 ${fontFaceCss}
 html,body{margin:0;padding:0;height:100%;font-family:${fontFamilyValue}}
-body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:${bodyBg};padding:${bodyPadding};box-sizing:border-box}
+/* Apertura diferida: ni la tarjeta ni el velo se pintan hasta que el survey est\xE1 listo
+   (\`dd-ready\`). Si el fondo entrara antes, en RN se ver\xEDa el velo oscuro varios cientos de ms
+   antes que el contenido, que es la misma mala sensaci\xF3n que el spinner. */
+body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${pos.alignItems};background:transparent;padding:${bodyPadding};box-sizing:border-box}
+body.dd-ready{background:${bodyBg}}
+#dd-popup{visibility:hidden}
+body.dd-ready #dd-popup{visibility:visible}
 .deepdots-popup{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:${cardBg};color-scheme:${colorScheme};border-radius:${cardRadius};padding:24px;box-shadow:${cardShadow};max-width:${cardMaxWidth};width:${cardWidth};min-height:${cardMinHeight};height:${cardHeight};max-height:${cardMaxHeight};box-sizing:border-box}
 .deepdots-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex:0 0 auto}
 /* Neutraliza la regla \`.deepdots-popup h2\` del CSS del survey (uppercase, centrado y
@@ -5766,6 +5916,13 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 #dd-form-wrapper{width:100%;flex:1 1 auto}
 #mf{width:100%;box-sizing:border-box;visibility:hidden}
 .deepdots-popup-main *{max-width:100%;box-sizing:border-box}
+/* El margen lateral lo pone la tarjeta: el CSS del survey lo a\xF1ade otra vez en el contenedor, en
+   el formulario y en el bloque de cada pregunta, y eso deja el enunciado y las opciones m\xE1s
+   adentro que el logo, el t\xEDtulo y la barra de progreso. Solo el lateral; el vertical separa las
+   preguntas. Mismas reglas que en el popup DOM (renderPopup.ts). */
+.deepdots-popup .magicfeedback-container,
+.deepdots-popup .magicfeedback-form,
+.deepdots-popup .magicfeedback-div{padding-left:0;padding-right:0}
 #dd-logo{max-height:40px;max-width:100%;object-fit:contain;display:block;margin:12px 0 0 0}
 .deepdots-error-hint{display:none;margin:12px 0 0 0;padding:10px 12px;border-radius:6px;background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;font-size:13px}
 /* Pantalla final: el HTML del editor de la plataforma (imagen + texto), centrado. */
@@ -5773,7 +5930,7 @@ body{display:${bodyDisplay};justify-content:${pos.justifyContent};align-items:${
 .deepdots-success img{max-width:100%;height:auto;margin:0 auto 16px auto;display:block}
 .deepdots-success p{margin:0;font-size:16px;font-weight:600;line-height:1.4}
 .deepdots-popup-footer{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:4px;margin-top:auto;width:100%;padding-top:12px}
-.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
+.dd-nav-btn{display:none;border:none;min-height:44px;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:15px;font-weight:600;align-items:center;justify-content:center;text-align:center}
 /* Secundario como bot\xF3n de texto: sin borde ni fondo, para que el primario sea la \xFAnica CTA. */
 #dd-back{background:transparent;color:${textMuted};border:none}
 #dd-start,#dd-complete,#dd-submit{background:#1E293B;color:#fff;border:none}
@@ -5998,9 +6155,23 @@ ${customCss}
     }
   }
 
+${PRIMARY_COLOR_JS}
+${REVEAL_JS}
+  // El popup se ense\xF1a cuando el survey est\xE1 pintado; \`ready\` deja al host abrir su propio
+  // Modal en ese momento en vez de montar un WebView en blanco.
+  var ddReveal=ddCreateReveal(popup, function(){
+    document.body.classList.add('dd-ready');
+    emitJSON('ready');
+  }, ${REVEAL_TIMEOUT_MS});
+
   function setLoading(isLoading){
     spinner.style.display=isLoading?'flex':'none';
-    if(!isLoading){ formHost.style.visibility='visible'; }
+    if(!isLoading){
+      formHost.style.visibility='visible';
+      // Fin de la carga, sea por survey cargado o por error. Entre p\xE1ginas es no-op: la
+      // revelaci\xF3n solo act\xFAa la primera vez.
+      ddReveal.whenPainted();
+    }
     footer.style.display=isLoading?'none':'flex';
     backBtn.disabled=isLoading; startBtn.disabled=isLoading; completeBtn.disabled=isLoading; submitBtn.disabled=isLoading;
     if(isLoading){ updateButtons(null); }
@@ -6043,6 +6214,10 @@ ${customCss}
             if(s.loadingBarColor){ progressBar.style.background=s.loadingBarColor; progressFollowUp.style.background=s.loadingBarColor; }
             if(chromeOn && s.boxBackgroundColor){ popup.style.background=s.boxBackgroundColor; }
             if(s.contentAlign){ main.style.justifyContent = s.contentAlign==='center' ? 'center' : 'flex-start'; }
+            // El survey pinta sus controles con --mf-primary, que sale de primaryColor; si la
+            // integraci\xF3n solo configura el del bot\xF3n, el popup mezclar\xEDa el color de la marca
+            // con el gris azulado por defecto del paquete.
+            ddApplySurveyPrimaryColor(popup, s);
             if(s.buttonPrimaryColor){
               submitBtn.style.background=s.buttonPrimaryColor; submitBtn.style.border='none'; submitBtn.style.color='#fff';
               startBtn.style.background=s.buttonPrimaryColor; startBtn.style.border='none'; startBtn.style.color='#fff';
@@ -6134,7 +6309,9 @@ ${customCss}
 }
 
 // src/platform/react-native-renderer.ts
+init_reveal();
 init_logger();
+var NATIVE_READY_GRACE_MS = 500;
 var ReactNativePopupRenderer = class {
   constructor(options = {}) {
     this.options = options;
@@ -6142,6 +6319,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = null;
     this.currentSurveyId = null;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.readyTimer = null;
   }
   init() {
   }
@@ -6150,6 +6329,8 @@ var ReactNativePopupRenderer = class {
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
+    this.readyEmitted = false;
+    this.armReadyFallback(surveyId);
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
     const html = buildSurveyHtml({
       surveyId,
@@ -6177,9 +6358,32 @@ var ReactNativePopupRenderer = class {
     }
   }
   hide() {
+    this.clearReadyFallback();
     this.options.onHide?.();
     this.currentSurveyId = null;
   }
+  /** Respaldo del aviso de listo por si el WebView no llega a ejecutar el HTML. */
+  armReadyFallback(surveyId) {
+    this.clearReadyFallback();
+    if (!this.options.onReady) return;
+    this.readyTimer = setTimeout(() => {
+      this.readyTimer = null;
+      this.emitReady(surveyId);
+    }, REVEAL_TIMEOUT_MS + NATIVE_READY_GRACE_MS);
+  }
+  clearReadyFallback() {
+    if (this.readyTimer !== null) {
+      clearTimeout(this.readyTimer);
+      this.readyTimer = null;
+    }
+  }
+  /** Idempotente: el WebView puede avisar a la vez que vence el respaldo. */
+  emitReady(surveyId) {
+    if (this.readyEmitted) return;
+    this.readyEmitted = true;
+    this.clearReadyFallback();
+    this.options.onReady?.({ surveyId });
+  }
   /**
    * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
    * eventos del SDK: primera interacción → `popup_clicked` (PARTIAL), completado →
@@ -6195,6 +6399,9 @@ var ReactNativePopupRenderer = class {
       name = raw;
     }
     switch (name) {
+      case "ready":
+        this.emitReady(surveyId);
+        break;
       case "loaded":
       case "before_submit":
       case "after_submit":
@@ -6222,6 +6429,33 @@ function createReactNativeRenderer() {
   return new ReactNativePopupRenderer();
 }
 
+// src/ui/preload.ts
+var defaultLoader = () => Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports));
+var pending = null;
+function preloadRenderPopup(loader = defaultLoader) {
+  if (pending) return pending;
+  try {
+    pending = loader().then(() => void 0).catch(() => {
+      pending = null;
+    });
+  } catch {
+    pending = null;
+    return Promise.resolve();
+  }
+  return pending;
+}
+function schedulePreloadRenderPopup(loader) {
+  const run = () => {
+    void preloadRenderPopup(loader);
+  };
+  const idle = globalThis.requestIdleCallback;
+  if (typeof idle === "function") {
+    idle(run, { timeout: 2e3 });
+    return;
+  }
+  setTimeout(run, 0);
+}
+
 // src/platform/renderer.ts
 var NoopPopupRenderer = class {
   show() {
@@ -6256,6 +6490,13 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
+  /**
+   * Descarga el chunk de `renderPopup` antes de que ningún trigger dispare, para que abrir el
+   * popup no empiece por esperar ~238 KB de JS.
+   */
+  preload() {
+    schedulePreloadRenderPopup();
+  }
   show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId, _renderChrome, options) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
@@ -6270,6 +6511,8 @@ var BrowserPopupRenderer = class {
     this.visible = false;
     if (this.container) {
       this.container.style.display = "none";
+      this.container.style.visibility = "";
+      this.container.style.pointerEvents = "";
       this.container.innerHTML = "";
     }
   }
@@ -7346,6 +7589,7 @@ var DeepdotsPopups = class {
       this.popupDefinitions = this.validatePopupDefinitions(defs);
       this.popupsLoaded = true;
       this.log("Popups loaded from API", this.popupDefinitions);
+      if (this.popupDefinitions.length) this.renderer.preload?.();
       this.configureTriggersFromDefinitions();
       this.processDeferredExitQueue();
       if (this.pendingAutoLaunch) {
@@ -7833,7 +8077,7 @@ var DeepdotsPopups = class {
   processDeferredExitQueue() {
     const queue = this.getDeferredExitQueue();
     if (!queue.length) return;
-    const pending = [];
+    const pending2 = [];
     const now = Date.now();
     queue.forEach((item) => {
       const def = this.popupDefinitions.find((popup) => popup.id === item.id && popup.surveyId === item.surveyId);
@@ -7844,10 +8088,10 @@ var DeepdotsPopups = class {
         this.tryShowDeferredExitPopup(item);
         return;
       }
-      pending.push(item);
+      pending2.push(item);
       this.scheduleDeferredExitPopup(item);
     });
-    this.setDeferredExitQueue(pending);
+    this.setDeferredExitQueue(pending2);
   }
   scheduleDeferredExitPopup(item) {
     if (typeof window === "undefined") return;
@@ -7920,7 +8164,7 @@ var DeepdotsPopups = class {
   async fetchPopupsFromServer() {
     const apiKey = this.config?.apiKey;
     const baseUrl = this.baseUrl;
-    const userId = this.config?.userId;
+    const userId = this.tracking?.getUserId() ?? this.config?.userId;
     if (!apiKey || !baseUrl) {
       this.log("Missing apiKey or baseUrl. Skipping popups fetch.");
       return [];
@@ -8273,6 +8517,7 @@ var DeepdotsPopups = class {
 
 // src/index.ts
 init_tracking_manager();
+init_reveal();
 init_labels();
 
 // src/react-native/setup.ts