@magicfeedback/popup-sdk 1.8.4 → 1.9.0

package/dist/index.js

@@ -583,7 +583,9 @@ var init_style = __esm({
  *     repintar\xEDa su web.
  *  4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
  *     tambi\xE9n en el <input> del boolean).
- *  5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
+ *  5. Todo :hover va dentro de @media (hover: hover): en t\xE1ctil WebKit deja el hover pegado
+ *     en el \xFAltimo punto tocado y la opci\xF3n de la p\xE1gina siguiente parec\xEDa seleccionada.
+ *  6. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
  *     radio nativo).
  *
  * Las variables --mf-* se dejan en :root a prop\xF3sito: el modal del priority-list se portea a
@@ -821,9 +823,11 @@ var init_style = __esm({
     text-underline-offset: 2px;
 }
 
-.magicfeedback-info-message a:hover,
-.magicfeedback-start-message a:hover {
-    color: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-info-message a:hover,
+    .magicfeedback-start-message a:hover {
+        color: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-info-message ul,
@@ -1049,10 +1053,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-checkbox-container:hover,
-.magicfeedback-radio-container:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-checkbox-container:hover,
+    .magicfeedback-radio-container:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-checkbox-container:has(input:checked),
@@ -1119,9 +1125,11 @@ div.magicfeedback-radio {
     height: inherit;
 }
 
-.magicfeedback-boolean-option label:hover {
-    background-color: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-boolean-option label:hover {
+        background-color: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-boolean-option input[type="radio"]:checked + label {
@@ -1192,9 +1200,11 @@ div.magicfeedback-radio {
     border: 2px solid transparent;
 }
 
-.magicfeedback-rating-option-label-container img:hover {
-    transform: scale(1.1);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-rating-option-label-container img:hover {
+        transform: scale(1.1);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
@@ -1346,9 +1356,11 @@ div.magicfeedback-radio {
     font-size: 0.8rem;
 }
 
-.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1385,8 +1397,10 @@ div.magicfeedback-radio {
     font-size: var(--mf-font-size-sm);
 }
 
-.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
@@ -1419,9 +1433,11 @@ div.magicfeedback-radio {
     color: var(--mf-primary);
 }
 
-.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
-.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
-    background: var(--mf-primary-light);
+@media (hover: hover) {
+    .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
+    .magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
+        background: var(--mf-primary-light);
+    }
 }
 
 .magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
@@ -1475,10 +1491,12 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #fbbf24;
-    transform: scale(1.1);
+@media (hover: hover) {
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+    .magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+        color: #fbbf24;
+        transform: scale(1.1);
+    }
 }
 
 .magicfeedback-rating-star-selected {
@@ -1519,9 +1537,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-image-option-label-container:hover img {
-    border-color: var(--mf-primary);
-    box-shadow: var(--mf-shadow-md);
+@media (hover: hover) {
+    .magicfeedback-image-option-label-container:hover img {
+        border-color: var(--mf-primary);
+        box-shadow: var(--mf-shadow-md);
+    }
 }
 
 .magicfeedback-image-option-label-container input:checked + img {
@@ -1562,9 +1582,11 @@ div.magicfeedback-radio {
     background-color: var(--mf-bg-secondary);
 }
 
-.magicfeedback-multi-question-matrix-row-tr:hover {
-    background-color: var(--mf-bg-hover);
-    box-shadow: var(--mf-shadow-sm);
+@media (hover: hover) {
+    .magicfeedback-multi-question-matrix-row-tr:hover {
+        background-color: var(--mf-bg-hover);
+        box-shadow: var(--mf-shadow-sm);
+    }
 }
 
 .magicfeedback-multi-question-matrix-table td {
@@ -1600,9 +1622,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-priority-list-item:hover {
-    box-shadow: var(--mf-shadow-sm);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-priority-list-item:hover {
+        box-shadow: var(--mf-shadow-sm);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-priority-list-item-label {
@@ -1623,10 +1647,12 @@ div.magicfeedback-radio {
     user-select: none;
 }
 
-.magicfeedback-priority-list-arrow-up:hover,
-.magicfeedback-priority-list-arrow-down:hover {
-    color: var(--mf-primary);
-    transform: scale(1.2);
+@media (hover: hover) {
+    .magicfeedback-priority-list-arrow-up:hover,
+    .magicfeedback-priority-list-arrow-down:hover {
+        color: var(--mf-primary);
+        transform: scale(1.2);
+    }
 }
 
 /* ========================================
@@ -1733,10 +1759,12 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-submit:hover {
-    background-color: var(--mf-primary-hover);
-    box-shadow: var(--mf-shadow-lg);
-    transform: translateY(-2px);
+@media (hover: hover) {
+    .magicfeedback-submit:hover {
+        background-color: var(--mf-primary-hover);
+        box-shadow: var(--mf-shadow-lg);
+        transform: translateY(-2px);
+    }
 }
 
 .magicfeedback-submit:active {
@@ -1762,9 +1790,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-back:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-back:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
 }
 
 /* ========================================
@@ -1784,8 +1814,10 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-skip-container:hover {
-    color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-skip-container:hover {
+        color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-skip-container input[type="checkbox"] {
@@ -1926,9 +1958,11 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-sm);
 }
 
-.magicfeedback-button:hover {
-    background: var(--mf-bg-hover);
-    border-color: var(--mf-primary);
+@media (hover: hover) {
+    .magicfeedback-button:hover {
+        background: var(--mf-bg-hover);
+        border-color: var(--mf-primary);
+    }
 }
 
 .magicfeedback-button:active {
@@ -1942,8 +1976,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-button-primary:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-button-primary:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 .magicfeedback-button-primary:active {
@@ -1969,8 +2005,10 @@ div.magicfeedback-radio {
     box-shadow: var(--mf-shadow-md);
 }
 
-.magicfeedback-start-message-button:hover {
-    background: var(--mf-primary-hover);
+@media (hover: hover) {
+    .magicfeedback-start-message-button:hover {
+        background: var(--mf-primary-hover);
+    }
 }
 
 /* ========================================
@@ -2106,12 +2144,18 @@ div.magicfeedback-radio {
     color: #666;
 }
 
-.magicfeedback-modal-close:hover,
 .magicfeedback-modal-close:focus {
     color: #000;
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-modal-close:hover {
+        color: #000;
+        outline: none;
+    }
+}
+
 /* ========================================
    FILE / IMAGE UPLOAD
    ======================================== */
@@ -2155,9 +2199,11 @@ div.magicfeedback-radio {
     transition: var(--mf-transition);
 }
 
-.magicfeedback-upload-dropzone:hover {
-    border-color: var(--mf-primary);
-    background-color: var(--mf-bg-hover);
+@media (hover: hover) {
+    .magicfeedback-upload-dropzone:hover {
+        border-color: var(--mf-primary);
+        background-color: var(--mf-bg-hover);
+    }
 }
 
 .magicfeedback-upload-dropzone:focus-within {
@@ -2295,13 +2341,20 @@ div.magicfeedback-radio {
     transition: var(--mf-transition-fast);
 }
 
-.magicfeedback-upload-remove:hover,
 .magicfeedback-upload-remove:focus-visible {
     color: var(--mf-error);
     background-color: var(--mf-primary-light);
     outline: none;
 }
 
+@media (hover: hover) {
+    .magicfeedback-upload-remove:hover {
+        color: var(--mf-error);
+        background-color: var(--mf-primary-light);
+        outline: none;
+    }
+}
+
 .magicfeedback-upload-remove svg {
     width: 16px;
     height: 16px;
@@ -6816,8 +6869,10 @@ async function safeBodyText(res) {
 function createFeedbackSink(options) {
   let feedbackSessionId;
   let firstPostInFlight = null;
+  let generation = 0;
   const url = `${options.baseUrl}/sdk/feedback`;
   const post = async (body, final, sessionEnd = false) => {
+    const postGeneration = generation;
     const json = JSON.stringify(body);
     const small = json.length <= KEEPALIVE_MAX_BYTES;
     if (final) options.log?.("[DeepdotsAnalytics] final flush via fetch keepalive");
@@ -6847,9 +6902,25 @@ function createFeedbackSink(options) {
       );
       return;
     }
-    if (sessionEnd) return;
+    if (sessionEnd) {
+      let closedId = body.sessionId;
+      try {
+        const data = await res.json();
+        closedId = data?.sessionId ?? closedId;
+      } catch {
+      }
+      try {
+        if (closedId) options.onSessionClosed?.(closedId);
+      } catch {
+      }
+      return;
+    }
     try {
       const data = await res.json();
+      if (postGeneration !== generation) {
+        options.log?.("[DeepdotsAnalytics] sessionId of a closed session ignored:", data?.sessionId);
+        return;
+      }
       if (data?.sessionId && data.sessionId !== feedbackSessionId) {
         feedbackSessionId = data.sessionId;
         options.log?.("[DeepdotsAnalytics] feedbackSessionId cached:", feedbackSessionId);
@@ -6862,6 +6933,7 @@ function createFeedbackSink(options) {
     if (meta?.resetSession) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
       return;
     }
@@ -6876,6 +6948,7 @@ function createFeedbackSink(options) {
     if (sessionEnd) {
       feedbackSessionId = void 0;
       firstPostInFlight = null;
+      generation++;
       options.onSessionReset?.();
     } else if (!feedbackSessionId) {
       firstPostInFlight = sent.then(
@@ -6889,7 +6962,7 @@ function createFeedbackSink(options) {
 
 // src/tracking/navigation-observer.ts
 var UUID_PREFIX = /^[0-9a-f]{8}-[0-9a-f]{4}-/i;
-function normalizeScreen(href) {
+function screenPath(href) {
   let pathAndHash;
   try {
     const u = new URL(href, "http://deepdots.local");
@@ -6897,7 +6970,10 @@ function normalizeScreen(href) {
   } catch {
     pathAndHash = href;
   }
-  pathAndHash = pathAndHash.replace(/\?[^#]*/g, "");
+  return pathAndHash.replace(/\?[^#]*/g, "") || "/";
+}
+function normalizeScreen(href) {
+  const pathAndHash = screenPath(href);
   const collapsed = pathAndHash.split("/").map((seg) => /^[0-9]+$/.test(seg) || UUID_PREFIX.test(seg) ? ":id" : seg).join("/");
   return collapsed || "/";
 }
@@ -6905,6 +6981,7 @@ var NavigationObserver = class {
   constructor(options = {}) {
     this.listeners = /* @__PURE__ */ new Set();
     this.currentScreen = null;
+    this.currentPath = null;
     this.entryAt = 0;
     this.installed = false;
     this.domHandlers = [];
@@ -6916,20 +6993,23 @@ var NavigationObserver = class {
   /** Fija la pantalla inicial (sin emitir visita; su duración se cierra al salir). */
   begin(href) {
     this.currentScreen = normalizeScreen(href);
+    this.currentPath = screenPath(href);
     this.entryAt = this.now();
   }
   /** Navega a una pantalla nueva: cierra la anterior (emite visita) y abre la nueva. */
   visit(href) {
-    const next = normalizeScreen(href);
-    if (next === this.currentScreen) return;
+    const nextPath = screenPath(href);
+    if (this.currentScreen != null && nextPath === this.currentPath) return;
     this.closeCurrent();
-    this.currentScreen = next;
+    this.currentScreen = normalizeScreen(href);
+    this.currentPath = nextPath;
     this.entryAt = this.now();
   }
   /** Cierra la pantalla actual emitiendo su visita (p. ej. al cerrar la app/pestaña). */
   stop() {
     this.closeCurrent();
     this.currentScreen = null;
+    this.currentPath = null;
   }
   /**
    * Olvida la pantalla actual SIN emitir su visita. Para una sesión que el backend ya dio
@@ -6938,6 +7018,7 @@ var NavigationObserver = class {
    */
   discard() {
     this.currentScreen = null;
+    this.currentPath = null;
   }
   /**
    * Retoma el seguimiento en la pantalla actual tras un `stop()`, cuando se abre una sesión
@@ -6953,6 +7034,7 @@ var NavigationObserver = class {
     const exit = this.now();
     const visit = {
       screen: this.currentScreen,
+      path: this.currentPath ?? this.currentScreen,
       entry: this.entryAt,
       exit,
       durationSeconds: Math.max(0, Math.round((exit - this.entryAt) / 1e3))
@@ -7517,6 +7599,8 @@ var DeepdotsPopups = class {
     this.analytics = null;
     /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
     this.analyticsFeedbackSessionId = void 0;
+    /** `init({ onFeedbackSession })`: avisa al host al abrir y cerrar cada registro. */
+    this.onFeedbackSession = void 0;
     /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
     this.analyticsFlushTimer = void 0;
     /** Crash & error reporting (#14–17). Null hasta init(). */
@@ -7574,6 +7658,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
       debug: config.debug || false,
@@ -7607,7 +7692,9 @@ var DeepdotsPopups = class {
       log: (...a) => this.log(...a),
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
+        this.notifyFeedbackSession(id, "open");
       },
+      onSessionClosed: (id) => this.notifyFeedbackSession(id, "closed"),
       onSessionReset: () => {
         this.analyticsFeedbackSessionId = void 0;
       }
@@ -7645,7 +7732,9 @@ var DeepdotsPopups = class {
     this.geoWanted = this.geoEnabled && !!config.analytics;
     this.resolveGeo();
     this.navObserver = new NavigationObserver();
-    this.navObserver.onVisit((v) => this.track("deepdots_page_view", { screen: v.screen, duration_seconds: v.durationSeconds }));
+    this.navObserver.onVisit(
+      (v) => this.track("deepdots_page_view", { screen: v.screen, path: v.path, duration_seconds: v.durationSeconds })
+    );
     this.navObserver.install();
     this.engagement = new EngagementTracker();
     this.setupAnalyticsFlush();
@@ -7680,6 +7769,23 @@ var DeepdotsPopups = class {
   getSessionId() {
     return this.tracking?.getSessionId() ?? null;
   }
+  /**
+   * Id del registro de analytics abierto: el `sessionId` que devolvió `POST /sdk/feedback`,
+   * que la API guarda como `sdkSessionId` en el Feedback en que se convierte la sesión. No es
+   * `getSessionId()`. Null hasta que el backend acepta el primer lote y de nuevo al cerrar la
+   * sesión: para saber también qué registro se cerró, usa `init({ onFeedbackSession })`.
+   */
+  getFeedbackSessionId() {
+    return this.analyticsFeedbackSessionId ?? null;
+  }
+  /** Avisa al host del registro abierto o cerrado; un fallo del host no corta el envío. */
+  notifyFeedbackSession(sessionId, status) {
+    try {
+      this.onFeedbackSession?.({ sessionId, status });
+    } catch (error) {
+      this.log("analytics \xB7 onFeedbackSession threw:", error);
+    }
+  }
   /** Activa/desactiva el tracking (identidad + sesión + analytics). Kill-switch del contrato §7bis. */
   setTrackingEnabled(enabled) {
     if (!enabled) this.closeSession("tracking_disabled");