@magicfeedback/popup-sdk 1.1.8 → 1.3.0

package/dist/chunk-XFA2Y6CK.mjs

@@ -0,0 +1,197 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/tracking/tracking-manager.ts
+var InMemoryStorage = class {
+  constructor() {
+    this.map = /* @__PURE__ */ new Map();
+  }
+  getItem(key) {
+    return this.map.has(key) ? this.map.get(key) : null;
+  }
+  setItem(key, value) {
+    this.map.set(key, value);
+  }
+  removeItem(key) {
+    this.map.delete(key);
+  }
+};
+function createDefaultStorage() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      const ls = window.localStorage;
+      const probe = "__deepdots_probe__";
+      ls.setItem(probe, "1");
+      ls.removeItem(probe);
+      return {
+        getItem: (k) => ls.getItem(k),
+        setItem: (k, v) => ls.setItem(k, v),
+        removeItem: (k) => ls.removeItem(k)
+      };
+    }
+  } catch {
+  }
+  return new InMemoryStorage();
+}
+var STORAGE_KEYS = {
+  userId: "deepdots.user_id",
+  firstSeen: "deepdots.user.first_seen",
+  contactAttributes: "deepdots.contact.attributes"
+};
+function buildSurveyIdentity(userId, sessionId, miniService = null, analyticsFeedbackSessionId = null) {
+  const profile = userId ? [{ key: "external-user-id", value: [userId] }] : [];
+  const metadata = [];
+  if (sessionId) metadata.push({ key: "session_id", value: [sessionId] });
+  if (userId) metadata.push({ key: "user_id", value: [userId] });
+  if (miniService) metadata.push({ key: "mini_service", value: [miniService] });
+  if (analyticsFeedbackSessionId) metadata.push({ key: "deepdots_analytics_feedback_session_id", value: [analyticsFeedbackSessionId] });
+  return { profile, metadata };
+}
+function defaultUuid() {
+  const g = typeof globalThis !== "undefined" ? globalThis : {};
+  if (g.crypto?.randomUUID) return g.crypto.randomUUID();
+  const bytes = new Uint8Array(16);
+  if (g.crypto?.getRandomValues) {
+    g.crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
+  }
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"));
+  return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
+}
+var TrackingManager = class {
+  constructor(options) {
+    /** session_id cacheado, provisto por el backend (no se genera ni se persiste). */
+    this.sessionId = null;
+    this.userWasJustCreated = false;
+    this.storage = options.storage;
+    this.clientUserId = options.clientUserId;
+    this.now = options.now ?? (() => Date.now());
+    this.uuid = options.uuid ?? defaultUuid;
+    this.enabled = options.enabled ?? true;
+  }
+  isTrackingEnabled() {
+    return this.enabled;
+  }
+  setTrackingEnabled(enabled) {
+    this.enabled = enabled;
+  }
+  /** Resuelve el user_id según la regla: cliente > persistido > generar+persistir. */
+  getUserId() {
+    if (!this.enabled) return null;
+    if (this.clientUserId) return this.clientUserId;
+    const persisted = this.storage.getItem(STORAGE_KEYS.userId);
+    if (persisted) return persisted;
+    const id = this.uuid();
+    this.storage.setItem(STORAGE_KEYS.userId, id);
+    this.storage.setItem(STORAGE_KEYS.firstSeen, String(this.now()));
+    this.userWasJustCreated = true;
+    return id;
+  }
+  /** `true` solo en la primera sesión tras crear el user_id propio del SDK. */
+  isNewUser() {
+    return this.userWasJustCreated;
+  }
+  /** session_id actual provisto por el backend, o null si aún no llegó. */
+  getSessionId() {
+    if (!this.enabled) return null;
+    return this.sessionId;
+  }
+  /** Cachea el session_id devuelto por el backend (respuesta de POST /sdk/popups). */
+  setSessionId(sessionId) {
+    if (!this.enabled) return;
+    this.sessionId = sessionId;
+  }
+};
+
+// src/ui/font.ts
+var FORMAT_BY_EXT = {
+  woff2: "woff2",
+  woff: "woff",
+  ttf: "truetype",
+  otf: "opentype"
+};
+function fontFormatFromUrl(url) {
+  const clean = url.split("?")[0].split("#")[0];
+  const ext = clean.slice(clean.lastIndexOf(".") + 1).toLowerCase();
+  return FORMAT_BY_EXT[ext];
+}
+function sanitizeFamily(family) {
+  return family.replace(/[^A-Za-z0-9 ._-]/g, "").trim();
+}
+function isSafeFontUrl(url) {
+  if (!/^(https?:|data:)/i.test(url)) return false;
+  return !/[\x00-\x20"<>\\]/.test(url);
+}
+function buildFontFamilyValue(family) {
+  const safe = sanitizeFamily(family);
+  return `"${safe}", -apple-system, system-ui, sans-serif`;
+}
+function buildFontFaceCss(family, url) {
+  if (!url || !isSafeFontUrl(url)) return "";
+  const safe = sanitizeFamily(family);
+  const fmt = fontFormatFromUrl(url);
+  const src = fmt ? `url("${url}") format("${fmt}")` : `url("${url}")`;
+  return `@font-face{font-family:"${safe}";src:${src};font-display:swap;}`;
+}
+
+// src/assets/style.css
+var style_default = '.magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase "magicfeedback-radio"\n   tambi\xE9n en el <input> de cada opci\xF3n (rating), y sin el tag este selector lo capturaba\n   tambi\xE9n, rompiendo su tama\xF1o (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type="checkbox"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, \'Montserrat\');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type="date"],\n.deepdots-popup input[type="text"],\n.deepdots-popup input[type="number"],\n.deepdots-popup input[type="email"],\n.deepdots-popup input[type="password"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n.deepdots-popup input[type="radio"] {\n    padding: 20px;\n    margin: 10px 0 10px 15px;\n    width: 40px;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}';
+
+// src/util/logger.ts
+var active = console;
+function setLogger(logger) {
+  active = logger ?? console;
+}
+function sdkLog(...args) {
+  active.log(...args);
+}
+function sdkWarn(...args) {
+  (active.warn ?? active.log)(...args);
+}
+function sdkError(...args) {
+  (active.error ?? active.log)(...args);
+}
+
+export {
+  __commonJS,
+  __toESM,
+  InMemoryStorage,
+  createDefaultStorage,
+  STORAGE_KEYS,
+  buildSurveyIdentity,
+  TrackingManager,
+  buildFontFamilyValue,
+  buildFontFaceCss,
+  style_default,
+  setLogger,
+  sdkLog,
+  sdkWarn,
+  sdkError
+};
+//# sourceMappingURL=chunk-XFA2Y6CK.mjs.map

package/dist/chunk-XFA2Y6CK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tracking/tracking-manager.ts","../src/ui/font.ts","../src/assets/style.css","../src/util/logger.ts"],"sourcesContent":["/**\n * Identidad + sesión para el tracking de navegación (Fase 1).\n * Implementa el \"Contrato común Web+KMP\".\n *\n * Modelo: el SDK gestiona el `user_id` (persistente). El `session_id` es propiedad\n * del BACKEND: llega en la respuesta de `POST /sdk/popups` y se cachea; el backend\n * cose sesiones por `user_id` + ventana. El SDK NO genera ni expira sesiones.\n *\n * Sin dependencias de DOM: recibe el storage y (opcionalmente) el reloj y el\n * generador de uuid por inyección. El binding a `localStorage` vive en `createDefaultStorage`.\n */\n\n/** Store clave/valor mínimo (espejo conceptual del `KeyValueStorage` de KMP). */\nexport interface KeyValueStorage {\n  getItem(key: string): string | null;\n  setItem(key: string, value: string): void;\n  removeItem(key: string): void;\n}\n\n/** Impl en memoria — usada en tests y como fallback sin `localStorage`. */\nexport class InMemoryStorage implements KeyValueStorage {\n  private map = new Map<string, string>();\n  getItem(key: string): string | null {\n    return this.map.has(key) ? (this.map.get(key) as string) : null;\n  }\n  setItem(key: string, value: string): void {\n    this.map.set(key, value);\n  }\n  removeItem(key: string): void {\n    this.map.delete(key);\n  }\n}\n\n/** Storage por defecto en Web: `localStorage` si está disponible, si no in-memory. */\nexport function createDefaultStorage(): KeyValueStorage {\n  try {\n    if (typeof window !== 'undefined' && window.localStorage) {\n      const ls = window.localStorage;\n      const probe = '__deepdots_probe__';\n      ls.setItem(probe, '1');\n      ls.removeItem(probe);\n      return {\n        getItem: (k) => ls.getItem(k),\n        setItem: (k, v) => ls.setItem(k, v),\n        removeItem: (k) => ls.removeItem(k),\n      };\n    }\n  } catch {\n    // cae a in-memory\n  }\n  return new InMemoryStorage();\n}\n\n/** Claves de storage — namespace `deepdots.*`. Solo identidad (la sesión no se persiste). */\nexport const STORAGE_KEYS = {\n  userId: 'deepdots.user_id',\n  firstSeen: 'deepdots.user.first_seen',\n  contactAttributes: 'deepdots.contact.attributes',\n} as const;\n\n/** Par clave/valor con el formato `NativeAnswer` que espera `@magicfeedback/native`. */\nexport interface IdentityAnswer {\n  key: string;\n  value: string[];\n}\n\n/**\n * Construye el `profile` y el `metadata` de identidad para inyectar en el survey\n * (`magicfeedback.form(appId, publicKey, profile, metadata)`), según el contrato §5.\n * `session_id` solo se incluye si el backend ya lo proveyó.\n */\nexport function buildSurveyIdentity(\n  userId: string | null,\n  sessionId: string | null,\n  miniService: string | null = null,\n  analyticsFeedbackSessionId: string | null = null,\n): { profile: IdentityAnswer[]; metadata: IdentityAnswer[] } {\n  const profile: IdentityAnswer[] = userId ? [{ key: 'external-user-id', value: [userId] }] : [];\n  const metadata: IdentityAnswer[] = [];\n  if (sessionId) metadata.push({ key: 'session_id', value: [sessionId] });\n  if (userId) metadata.push({ key: 'user_id', value: [userId] });\n  if (miniService) metadata.push({ key: 'mini_service', value: [miniService] });\n  if (analyticsFeedbackSessionId) metadata.push({ key: 'deepdots_analytics_feedback_session_id', value: [analyticsFeedbackSessionId] });\n  return { profile, metadata };\n}\n\nexport interface TrackingManagerOptions {\n  storage: KeyValueStorage;\n  /** Id provisto por el cliente; si existe se usa y NO se persiste. */\n  clientUserId?: string;\n  /** Reloj inyectable (default `Date.now`). */\n  now?: () => number;\n  /** Generador de uuid inyectable (default uuid v4). */\n  uuid?: () => string;\n  /** Estado inicial del tracking (default `true`). */\n  enabled?: boolean;\n}\n\nfunction defaultUuid(): string {\n  const g = (typeof globalThis !== 'undefined' ? globalThis : {}) as {\n    crypto?: { randomUUID?: () => string; getRandomValues?: (a: Uint8Array) => Uint8Array };\n  };\n  if (g.crypto?.randomUUID) return g.crypto.randomUUID();\n  const bytes = new Uint8Array(16);\n  if (g.crypto?.getRandomValues) {\n    g.crypto.getRandomValues(bytes);\n  } else {\n    for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);\n  }\n  bytes[6] = (bytes[6] & 0x0f) | 0x40;\n  bytes[8] = (bytes[8] & 0x3f) | 0x80;\n  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'));\n  return `${hex.slice(0, 4).join('')}-${hex.slice(4, 6).join('')}-${hex\n    .slice(6, 8)\n    .join('')}-${hex.slice(8, 10).join('')}-${hex.slice(10, 16).join('')}`;\n}\n\nexport class TrackingManager {\n  private storage: KeyValueStorage;\n  private clientUserId?: string;\n  private now: () => number;\n  private uuid: () => string;\n  private enabled: boolean;\n\n  /** session_id cacheado, provisto por el backend (no se genera ni se persiste). */\n  private sessionId: string | null = null;\n  private userWasJustCreated = false;\n\n  constructor(options: TrackingManagerOptions) {\n    this.storage = options.storage;\n    this.clientUserId = options.clientUserId;\n    this.now = options.now ?? (() => Date.now());\n    this.uuid = options.uuid ?? defaultUuid;\n    this.enabled = options.enabled ?? true;\n  }\n\n  isTrackingEnabled(): boolean {\n    return this.enabled;\n  }\n\n  setTrackingEnabled(enabled: boolean): void {\n    this.enabled = enabled;\n  }\n\n  /** Resuelve el user_id según la regla: cliente > persistido > generar+persistir. */\n  getUserId(): string | null {\n    if (!this.enabled) return null;\n    if (this.clientUserId) return this.clientUserId;\n\n    const persisted = this.storage.getItem(STORAGE_KEYS.userId);\n    if (persisted) return persisted;\n\n    const id = this.uuid();\n    this.storage.setItem(STORAGE_KEYS.userId, id);\n    this.storage.setItem(STORAGE_KEYS.firstSeen, String(this.now()));\n    this.userWasJustCreated = true;\n    return id;\n  }\n\n  /** `true` solo en la primera sesión tras crear el user_id propio del SDK. */\n  isNewUser(): boolean {\n    return this.userWasJustCreated;\n  }\n\n  /** session_id actual provisto por el backend, o null si aún no llegó. */\n  getSessionId(): string | null {\n    if (!this.enabled) return null;\n    return this.sessionId;\n  }\n\n  /** Cachea el session_id devuelto por el backend (respuesta de POST /sdk/popups). */\n  setSessionId(sessionId: string | null): void {\n    if (!this.enabled) return;\n    this.sessionId = sessionId;\n  }\n}\n","/**\n * Helpers puros (sin DOM) para la fuente personalizable del popup/survey.\n * Espejo exacto en KMP: `ui/Font.kt`. Cualquier cambio aquí se replica allí.\n */\n\nconst FORMAT_BY_EXT: Record<string, string> = {\n  woff2: 'woff2',\n  woff: 'woff',\n  ttf: 'truetype',\n  otf: 'opentype',\n};\n\n/** Deriva el `format()` del `@font-face` a partir de la extensión de la URL. */\nexport function fontFormatFromUrl(url: string): string | undefined {\n  const clean = url.split('?')[0].split('#')[0];\n  const ext = clean.slice(clean.lastIndexOf('.') + 1).toLowerCase();\n  return FORMAT_BY_EXT[ext];\n}\n\n// family/url provienen de la API y se interpolan en CSS y en el <style> del HTML del WebView.\n// Saneamos para evitar romper el string/rule (CSS injection) o cerrar </style> (script injection).\nfunction sanitizeFamily(family: string): string {\n  return family.replace(/[^A-Za-z0-9 ._-]/g, '').trim();\n}\n\nfunction isSafeFontUrl(url: string): boolean {\n  // Solo http(s)/data y sin caracteres que rompan url(\"...\") o el <style>:\n  // comillas, <>, backslash, y cualquier whitespace o carácter de control.\n  if (!/^(https?:|data:)/i.test(url)) return false;\n  // eslint-disable-next-line no-control-regex\n  return !/[\\x00-\\x20\"<>\\\\]/.test(url);\n}\n\n/** Valor a aplicar en `font-family`: nombre custom + fallback de sistema. */\nexport function buildFontFamilyValue(family: string): string {\n  const safe = sanitizeFamily(family);\n  return `\"${safe}\", -apple-system, system-ui, sans-serif`;\n}\n\n/** CSS del `@font-face`. Devuelve \"\" si no hay url (o no es segura). */\nexport function buildFontFaceCss(family: string, url?: string): string {\n  if (!url || !isSafeFontUrl(url)) return '';\n  const safe = sanitizeFamily(family);\n  const fmt = fontFormatFromUrl(url);\n  const src = fmt ? `url(\"${url}\") format(\"${fmt}\")` : `url(\"${url}\")`;\n  return `@font-face{font-family:\"${safe}\";src:${src};font-display:swap;}`;\n}\n",".magicfeedback-container {\n    width: 100%;\n}\n\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message,\n.magicfeedback-container{\n    animation-duration: 0.5s;\n    animation-name: animate-fade;\n    animation-delay: 0.25s;\n    animation-fill-mode: backwards;\n\n    font-style: normal;\n    text-align: justify;\n    font-weight: 400;\n    font-size: 1.2rem;\n    color: #475569;\n    line-height: 1.5;\n}\n\n@keyframes animate-fade {\n    0% { opacity: 0; }\n    100% { opacity: 1; }\n}\n\n.magicfeedback-form {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n}\n.magicfeedback-questions {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    width: 100%;\n}\n\n.magicfeedback-div {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    margin-bottom: 10px;\n    width: 100%;\n}\n\n.magicfeedback-label {\n    margin-bottom: 25px;\n    margin-top: 20px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 1.2rem;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n\n}\n\n.magicfeedback-checkbox {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    width: 100%;\n}\n\n.magicfeedback-checkbox-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin-bottom: 5px;\n    margin-top: 5px;\n}\n\n/* Cualificado con `div`: @magicfeedback/native reutiliza la clase \"magicfeedback-radio\"\n   también en el <input> de cada opción (rating), y sin el tag este selector lo capturaba\n   también, rompiendo su tamaño (el input pasaba a display:flex; width:100%). */\ndiv.magicfeedback-radio {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n    margin-right: 5px;\n    padding: 5px;\n    box-sizing: border-box;\n}\n\n.magicfeedback-checkbox-container,\n.magicfeedback-radio-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 5px 0;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.deepdots-popup input::-webkit-outer-spin-button,\n.deepdots-popup input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n}\n\n.magicfeedback-checkbox input[type=\"checkbox\"] {\n    margin-right: 5px;\n    margin-left: 5px;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n\n.magicfeedback-checkbox label,\n.magicfeedback-radio-container label {\n    margin-left: 5px;\n    font-weight: 400;\n    font-family: inherit;\n    font-size: 16px;\n    color: #212529;\n    text-align: start;\n    width: 100%;\n}\n\n.deepdots-popup p {\n    margin-bottom: 0px;\n    font-size: 12px;\n}\n\n.deepdots-popup h2 {\n    line-height: 1.66;\n    margin: 0;\n    padding: 0;\n    font-weight: 900;\n    color: #222;\n    font-family: var(--deepdots-font, 'Montserrat');\n    font-size: 18px;\n    text-transform: uppercase;\n    text-align: center;\n    margin-bottom: 40px;\n}\n\n/* Los controles de formulario no heredan font-family por defecto: cuando hay\n   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */\n.deepdots-popup.deepdots-has-font button,\n.deepdots-popup.deepdots-has-font input,\n.deepdots-popup.deepdots-has-font textarea,\n.deepdots-popup.deepdots-has-font select {\n    font-family: var(--deepdots-font, inherit);\n}\n\n.deepdots-popup h6 {\n    margin-bottom: 1rem;\n}\n\n.deepdots-popup input[type=\"date\"],\n.deepdots-popup input[type=\"text\"],\n.deepdots-popup input[type=\"number\"],\n.deepdots-popup input[type=\"email\"],\n.deepdots-popup input[type=\"password\"],\n.deepdots-popup textarea,\n.deepdots-popup select {\n    box-sizing: border-box;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100%;\n    border: 2px solid #ccc; /* Default border color - you can customize this */\n    border-radius: 5px;\n    font-size: 18px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    min-height: 50px;\n    font-family: inherit;\n    -webkit-appearance: none;\n}\n\n.deepdots-popup select {\n    background-image: linear-gradient(45deg, transparent 50%, gray 50%),\n    linear-gradient(135deg, gray 50%, transparent 50%),\n    linear-gradient(to right, #ccc, #ccc);\n    background-position: calc(100% - 20px) calc(1em + 2px),\n    calc(100% - 15px) calc(1em + 2px),\n    calc(100% - 2.5em) 0.5em;\n    background-size: 5px 5px,\n    5px 5px,\n    1px 1.5em;\n    background-repeat: no-repeat;\n}\n\n.magicfeedback-boolean-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-boolean-container label {\n    margin-left: 10px;\n    font-weight: 400;\n    font-size: 16px;\n    width: 100%;\n    padding-top: 5px;\n}\n\n.magicfeedback-boolean-option {\n    margin-right: 10px;\n    margin-left: 10px;\n    width: 100%;\n    height: 38px;\n    border-radius: 8px;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid #ced4da !important;\n}\n\n.magicfeedback-boolean-option label {\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: inherit;\n}\n\n.magicfeedback-boolean-option input[type=radio] + label:hover {\n    color: #007bff;\n}\n\n.magicfeedback-boolean-option input[type=radio]:checked + label {\n    color: #007bff;\n    background-color: #cadff8;\n}\n\n.deepdots-popup input[type=\"radio\"] {\n    padding: 20px;\n    margin: 10px 0 10px 15px;\n    width: 40px;\n    background-color: #fff;\n    box-shadow: none;\n}\n\n/* Style for focused input/select */\n.deepdots-popup input:focus, .deepdots-popup select:focus {\n    border-color: #4CAF50; /* Highlight color when focused - you can customize this */\n}\n\n/* Style for invalid input (example: validation error) */\n.deepdots-popup input.error, .deepdots-popup select.error {\n    border-color: #ff3333; /* Red color for error state - you can customize this */\n}\n\n.magicfeedback-action-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    width: 100%;\n}\n\n.magicfeedback-action-container .magicfeedback-submit {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: #1E293B;\n    color: white;\n}\n\n.magicfeedback-action-container .magicfeedback-back {\n    cursor: pointer;\n    padding: 10px;\n    margin: 10px 0;\n    width: 100px;\n    border: 0;\n    border-radius: 8px;\n    font-size: 16px;\n    outline: none;\n    transition: border-color 0.3s ease;\n    background-color: transparent;\n    color: #212529;\n}\n\n\n\n/* Rating styles */\n.magicfeedback-rating {\n    width: 100%;\n}\n\n.magicfeedback-rating-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n    flex-wrap: wrap;\n    align-items: center;\n\n    margin: 15px 5px;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-placeholder-value,\n.magicfeedback-rating-placeholder{\n    text-align: center;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n}\n\n.magicfeedback-rating-option {\n    margin: 0 0.5rem;\n    padding: 0;\n}\n\n@media (max-width: 1024px) {\n    .magicfeedback-rating-option {\n        margin: 10px 0;\n        padding: 0;\n        width: 20%;\n        display: flex;\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-placeholder-value {\n        font-size: 0.75rem;\n        margin-bottom: 1px;\n    }\n    .magicfeedback-rating-placeholder{\n        justify-content: center;\n    }\n\n    .magicfeedback-rating-container {\n        flex-wrap: wrap;\n        justify-content: flex-start;\n    }\n}\n\n\n.magicfeedback-rating-option-label-container {\n    display: flex;\n    flex-direction: column;\n}\n\n\n.magicfeedback-rating-option-label-container label {\n    display: inline-block;\n    text-align: center;\n    margin-bottom: 0;\n    font-weight: 600;\n    font-size: 18px;\n    color: #475569;\n}\n\n.magicfeedback-rating-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n/* IMAGE STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + img {\n    cursor: pointer;\n    height: 48px;\n    width: 48px;\n}\n\n/* LABEL STYLES */\n.magicfeedback-rating-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n/* CHECKED STYLES */\n.magicfeedback-rating-option-label-container input[type=radio]:checked + img {\n    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;\n    border-radius: 50%;\n}\n\n.magicfeedback-rating-number {\n    width: 100%;\n}\n.magicfeedback-rating-container,\n.magicfeedback-rating-number-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    margin: 15px 0;\n    padding: 0;\n\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa\n   el 100% de la primera línea y los boxes bajan a la siguiente */\n.magicfeedback-rating-number-container--with-placeholder {\n    flex-wrap: wrap;\n    align-items: flex-start;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {\n    width: 100%;\n    margin-bottom: 8px;\n}\n\n.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {\n    width: auto;\n    flex: 1;\n}\n\n.magicfeedback-rating-number-option {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    width: 100%;\n}\n\n.magicfeedback-rating-number-option-row{\n    max-width: 100% !important;\n}\n\n.magicfeedback-rating-number-top-placeholder,\n.magicfeedback-rating-number-bottom-placeholder{\n    text-align: center !important;\n    align-content: center;\n    justify-content: center;\n    text-wrap: wrap;\n\n    font-size: 15px;\n    color: #475569;\n\n    width: 100%;\n    margin: auto;\n}\n\n@media (min-width: 650px) {\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {\n        margin-left: 0;\n        width: calc(100% - 10px);\n    }\n\n    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,\n    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {\n        margin-right: 0;\n        width: calc(100% - 10px);\n    }\n}\n\n\n.magicfeedback-rating-number-option-label-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n.magicfeedback-rating-number-option-label-container label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0 10px;\n    font-weight: 600;\n    font-size: 14px;\n    color: #475569;\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    min-height: 50px;\n    text-align: center;\n    padding: 0;\n    border-radius: 4px;\n    border: 1px solid #ced4da;\n    background-color: rgba(246, 246, 246, 0.3);\n    transition: background-color 0.15s ease-in-out;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label {\n    cursor: pointer;\n}\n\n.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,\n.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {\n    color: #007bff;\n    border: 1px solid #007bff;\n    background-color: rgba(86, 168, 253, 0.29);\n}\n\n.magicfeedback-rating-number-container-column{\n    align-items: flex-start !important;\n}\n\n@media (max-width: 650px) {\n    .magicfeedback-rating-number-container-ltr {\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    .magicfeedback-rating-number-container-rtl {\n        justify-content: center;\n        flex-wrap: wrap-reverse;\n    }\n\n    .magicfeedback-rating-number-option {\n        max-width: 100%;\n        height: 55px;\n        margin: 5px 0;\n    }\n}\n\n.magicfeedback-rating-star {\n    width: 100%;\n}\n\n.magicfeedback-rating-star-container {\n    display: flex !important;\n    flex-direction: row !important;\n    justify-content: center !important;\n    align-items: center !important;\n    flex-wrap: wrap;\n    margin: 15px 5px;\n    padding: 0;\n    list-style: none;\n    font-size: 1.5rem;\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star {\n    float: right;\n    width: 1em;\n    overflow: hidden;\n    white-space: nowrap;\n    cursor: pointer;\n    font-size: 30px;\n    color: #ccc;\n    margin: 0 10px;\n}\n\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,\n.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {\n    color: #deb217 !important;\n}\n\n.magicfeedback-rating-star-selected {\n    color: #ffc700 !important;\n}\n\n\n/* Style for multiple choice image */\n.magicfeedback-image-option-label-container:hover {\n    cursor: pointer;\n    border: 0 !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio]:checked + img,\n.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {\n    border: 1px solid #007bff !important;\n    box-shadow: 0 0 3px #007bff !important;\n}\n\n.magicfeedback-image-option-label-container input[type=radio] + img,\n.magicfeedback-image-option-label-container input[type=checkbox] + img {\n    border: 1px solid transparent !important;\n}\n\n.magicfeedback-image-option-label-container{\n    margin: 10px !important;\n    height: calc(100% - 20px) !important;\n    width: calc(100% - 20px) !important;\n}\n\n.magicfeedback-multiple-choice-image-option {\n    display: flex;\n    height: auto !important;\n    box-shadow: 0 0 3px #ccc;\n}\n\n.magicfeedback-multiple-choice-image-label {\n    font-size: 1rem;\n}\n\n.magicfeedback-consent-container {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    margin: 10px 0;\n    width: 100%;\n}\n\n.magicfeedback-consent-container label {\n    margin-left: 10px;\n}\n\n.magicfeedback-start-message-container {\n    /* ... add your start message container styles here ... */\n}\n\n.magicfeedback-success-message,\n.magicfeedback-info-message,\n.magicfeedback-start-message {\n    margin: 35px 5px;\n}\n\n.magicfeedback-success-message p,\n.magicfeedback-info-message p,\n.magicfeedback-start-message p {\n    font-style: normal;\n    text-align: start;\n    font-weight: 400;\n    font-size: 16px;\n    color: #475569;\n    line-height: 1.5;\n}\n\n.magicfeedback-success-message img,\n.magicfeedback-info-message img,\n.magicfeedback-start-message img {\n    width: 400px;\n    max-width: 80%;\n    height: auto;\n    margin: 10px auto;\n}\n\n.magicfeedback-counter,\n.magicfeedback-point-system-total {\n    margin: 10px 0 0 0 !important;\n    display: flex !important;\n    justify-content: right !important;\n    align-items: center !important;\n    width: 100%;\n}\n\n.magicfeedback-skip-container {\n    background-color: transparent !important;\n    border: 0 !important;\n    color: #999999FF !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    cursor: pointer !important;\n    font-size: 0.5em !important;\n    font-weight: 400 !important;\n    box-shadow: 0 0 0 !important;\n\n    &:hover {\n        color: #0066ff;\n    }\n}\n\n.magicfeedback-skip-container input[type=checkbox] {\n    border-color: #999999FF !important;\n    border: 0 !important;\n    cursor: pointer !important;\n\n}\n\n.magicfeedback-multi-question-matrix,\n.magicfeedback-point-system,\n.magicfeedback-priority-list {\n    width: 100% !important;\n}\n\n.magicfeedback-multi-question-matrix-container,\n.magicfeedback-point-system-container,\n.magicfeedback-priority-list-container {\n    width: 100% !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-point-system-list,\n.magicfeedback-priority-list-list,\n.magicfeedback-multi-question-matrix-table {\n    width: 100% !important;\n    padding: 0 !important;\n    overflow-x: auto;\n}\n\n.magicfeedback-multi-question-matrix {\n    position: relative !important;\n}\n\n.magicfeedback-multi-question-matrix-container {\n    overflow: auto !important;\n    padding-bottom: 10px;\n}\n\n.magicfeedback-multi-question-matrix-label{\n    text-align: left !important;\n}\n.magicfeedback-priority-list-item {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0 10px 10px;\n\n    border: 1px solid #ced4da;\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-point-system-item {\n    height: 45px;\n    margin: 5px 0 !important;\n}\n\n.magicfeedback-point-system-item label,\n.magicfeedback-priority-list-item-label {\n    font-family: inherit;\n    font-size: 18px !important;\n    color: #212529;\n    text-align: start;\n    word-wrap: break-word;\n    white-space: normal;\n    padding: 0 10px 0 0;\n}\n\n.magicfeedback-point-system-input-container {\n    padding: 0 10px 0 0;\n    border-radius: 5px;\n    font-size: 14px;\n    border: 1px solid #ced4da;\n    height: 42px;\n    margin: auto 0;\n}\n\n.magicfeedback-multi-question-matrix-table thead {\n    margin-bottom: 20px;\n}\n\n.magicfeedback-multi-question-matrix-table th{\n    text-align: center;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    padding: 0  10px !important;\n}\n\n.magicfeedback-multi-question-matrix-table th,\n.magicfeedback-multi-question-matrix-table td label,\n.magicfeedback-priority-list-arrow-up,\n.magicfeedback-priority-list-arrow-down {\n    font-style: normal !important;\n    font-weight: 400 !important;\n    font-size: 1rem !important;\n    color: #475569 !important;\n    cursor: pointer !important;\n    margin: 0 !important;\n    line-height: inherit;\n}\n\n.magicfeedback-multi-question-matrix-table tr {\n    align-items: center;\n    margin: 5px 0;\n}\n\n.magicfeedback-multi-question-matrix-row-tr{\n    border-radius: 5px;\n    margin: 10px 0 !important;\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {\n    background-color: #f1f6f6; /* Light gray background for odd rows */\n}\n\n.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {\n    background-color: #ffffff; /* White background for even rows */\n}\n\n.magicfeedback-multi-question-matrix-row-label {\n    text-align: left !important;\n}\n\n.magicfeedback-point-system-item span {\n    color: #475569 !important;\n}\n\n.magicfeedback-point-system-item input {\n    padding: 0;\n    margin: 0 !important;\n    width: auto !important;\n    min-width: 100px !important;\n    height: auto !important;\n    min-height: 42px;\n    cursor: pointer;\n    font-size: 14px;\n    text-align: center !important;\n}\n\n.magicfeedback-multi-question-matrix-table input {\n    margin: auto !important;\n    padding: 20px !important;\n    width: 100% !important;\n    height: 15px;\n    border: 1px solid #ced4da;\n    cursor: pointer;\n}\n\n.magicfeedback-image{\n    max-height: 400px !important;\n    height: auto !important;\n    max-width: 100% !important;\n    margin: 10px auto !important;\n}\n\n.magicfeedback-error{\n    margin-top: 5px;\n}","import type { DeepdotsLogger } from '../types';\n\n/**\n * Logger de módulo compartido: el core lo fija en init() con el logger inyectado\n * por el host (o `console` por defecto), y los módulos que no reciben `this`\n * (renderPopup, renderers) enrutan por aquí. `warn`/`error` caen a `log` si el\n * logger del host no los provee (solo `log` es obligatorio en DeepdotsLogger).\n */\nlet active: DeepdotsLogger = console;\n\nexport function setLogger(logger: DeepdotsLogger | undefined): void {\n  active = logger ?? console;\n}\n\nexport function sdkLog(...args: unknown[]): void {\n  active.log(...args);\n}\n\nexport function sdkWarn(...args: unknown[]): void {\n  (active.warn ?? active.log)(...args);\n}\n\nexport function sdkError(...args: unknown[]): void {\n  (active.error ?? active.log)(...args);\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -98,6 +98,12 @@ interface AnalyticsFlushMeta {
      * un transporte que sobreviva al unload (sendBeacon) y no puede esperar respuestas.
      */
     final?: boolean;
+    /**
+     * `true` cuando este es el ÚLTIMO lote de la sesión (cierre de página, app a background,
+     * cambio de usuario, tracking desactivado). El sink lo envía con `completed:true` y olvida
+     * el `sessionId`, para que el lote siguiente abra un registro nuevo.
+     */
+    sessionEnd?: boolean;
 }
 /**
  * Envío del lote. Si devuelve una promesa que **rechaza**, el manager re-encola los
@@ -110,8 +116,11 @@ type AnalyticsSink = (payload: AnalyticsEnvelope, meta?: AnalyticsFlushMeta) =>
  * Mapeo del envelope de analytics → body de `POST /sdk/feedback`.
  *
  * La analítica se envía como un Feedback del modelo del Surveys SDK, agrupado por una
- * INTEGRACIÓN creada en la plataforma. Se manda en streaming con `completed:false` y
- * `finished:false` (nunca se "cierra"); el backend cose por `sessionId` + `user_id`.
+ * INTEGRACIÓN creada en la plataforma. Se manda en streaming con `completed:false`; el
+ * backend cose por `sessionId` + `user_id`. El ÚLTIMO lote de una sesión (cierre de página,
+ * app a background, cambio de usuario) va con `completed:true`: cierra el registro y el
+ * siguiente lote omite el `sessionId` viejo para que el backend abra uno nuevo.
+ * `feedback.finished` se queda siempre en `false` (no es la señal de cierre acordada).
  *
  * Encoding:
  *  - todo va en `feedback.metadata`: contexto (user_id, session_id, platform…) + eventos
@@ -147,7 +156,15 @@ interface AnalyticsFeedbackBody {
     /** sessionId devuelto por el primer POST; permite que el backend agrupe todos los eventos en un solo registro. */
     sessionId?: string;
 }
-declare function buildAnalyticsFeedbackBody(envelope: AnalyticsEnvelope, keys: AnalyticsKeys, feedbackSessionId?: string): AnalyticsFeedbackBody;
+interface BuildBodyOptions {
+    /**
+     * `true` en el último lote de la sesión → `completed:true` (cierra el registro en backend).
+     * El body SÍ lleva el `sessionId` actual (es el registro que se cierra); es el lote
+     * SIGUIENTE el que lo omite.
+     */
+    sessionEnd?: boolean;
+}
+declare function buildAnalyticsFeedbackBody(envelope: AnalyticsEnvelope, keys: AnalyticsKeys, feedbackSessionId?: string, options?: BuildBodyOptions): AnalyticsFeedbackBody;
 interface FeedbackSinkOptions {
     /** Base URL del backend (api(.|-dev.)deepdots.com) ya resuelta por el entorno. */
     baseUrl: string;
@@ -164,6 +181,8 @@ interface FeedbackSinkOptions {
     sendBeaconImpl?: (url: string, body: Blob | string) => boolean;
     /** Callback invocado cuando el backend devuelve un nuevo sessionId (primer POST). */
     onSessionId?: (id: string) => void;
+    /** Callback invocado al cerrar la sesión (`completed:true`): el sessionId cacheado se olvida. */
+    onSessionReset?: () => void;
 }
 /**
  * Sink real: transforma el envelope y hace `POST {baseUrl}/sdk/feedback`.
@@ -276,6 +295,16 @@ interface DeepdotsEvent {
  * Event listener callback
  */
 type EventListener = (event: DeepdotsEvent) => void;
+/**
+ * Motivo del `deepdots_session_end` (último lote de la sesión, enviado con `completed:true`):
+ *  - `page_hide`: la página web se cierra o se navega fuera (`pagehide`).
+ *  - `background`: la app pasa a background (RN/nativo). Única señal disponible en móvil:
+ *    el kill de la app por el usuario o el SO NO produce ningún callback.
+ *  - `user_change`: `setUserId()` o un `init()` con otro `userId` (login/logout del host).
+ *  - `tracking_disabled`: `setTrackingEnabled(false)` (consentimiento revocado).
+ *  - `manual`: `endSession()` llamado por el host.
+ */
+type SessionEndReason = 'page_hide' | 'background' | 'user_change' | 'tracking_disabled' | 'manual';
 /** Trigger type used by remote popup definitions */
 type PopupTriggerType = 'time_on_page' | 'scroll' | 'exit' | 'click' | 'event';
 type PopupTriggerConditionStatus = 'SHOWED' | 'PARTIAL' | 'COMPLETED';
@@ -498,13 +527,16 @@ declare class CrashReporter {
  * el funnel se correlaciona por `message_id` y se agrupa por `message_title`.
  */
 type MessageStage = 'delivered' | 'clicked' | 'converted';
+/** Canales válidos. Un mensaje tiene UN canal: se valida en runtime porque el host puede no ser TS. */
+declare const MESSAGE_CHANNELS: readonly ["push", "in_app"];
+type MessageChannel = (typeof MESSAGE_CHANNELS)[number];
 interface TrackMessageOptions {
     /** Identificador del mensaje/notificación — correlaciona el funnel delivered→clicked→converted. */
     id: string;
     /** Título del mensaje — dimensión de agrupación de #18–22. */
     title: string;
     /** Canal de entrega. */
-    channel: 'push' | 'in_app';
+    channel: MessageChannel;
     /** Nombre de la campaña (opcional). */
     campaign?: string;
     /** Valor de conversión (opcional, típico en `stage: 'converted'`). */
@@ -515,6 +547,38 @@ interface TrackMessageOptions {
 }
 /** Construye los params del evento `deepdots_message` (omite opcionales ausentes). */
 declare function buildMessageParams(stage: MessageStage, o: TrackMessageOptions): Record<string, unknown>;
+/** Techo de `message_id` vigilados por sesión; los más antiguos se evictan (memoria acotada). */
+declare const MAX_TRACKED_MESSAGES = 500;
+type MessageRejectionReason = 'invalid_channel' | 'duplicate_stage' | 'channel_conflict';
+type MessageGuardVerdict = {
+    emit: true;
+} | {
+    emit: false;
+    reason: MessageRejectionReason;
+    detail: string;
+};
+/**
+ * Protege el funnel de Messaging de las formas imposibles que el host puede producir por error
+ * (visto en producción: CTR > 100% por falta de `delivered` + el mismo `message_id` reportado en
+ * dos canales). Tres reglas, todas dentro de la sesión (se reinicia en cada `init()`):
+ *
+ *  1. `channel` fuera de `MESSAGE_CHANNELS` → se descarta el evento.
+ *  2. Un `(message_id, stage)` ya emitido → se emite una sola vez.
+ *  3. Un `message_id` ya visto en un canal → se descartan los eventos de otro canal.
+ *
+ * Los eventos rechazados NO mutan el estado: un rechazo nunca "consume" el stage bueno.
+ * Lo que el SDK no puede arreglar es la ausencia de `delivered`: eso lo instrumenta el host.
+ */
+declare class MessageGuard {
+    private maxTrackedMessages;
+    /** message_id → canal fijado + stages ya emitidos. El orden de inserción marca la eviction. */
+    private seen;
+    constructor(maxTrackedMessages?: number);
+    evaluate(stage: MessageStage, options: TrackMessageOptions): MessageGuardVerdict;
+    /** Olvida todo lo vigilado (nueva sesión). */
+    reset(): void;
+    private remember;
+}
 
 /**
  * Main class for managing survey popups
@@ -548,14 +612,24 @@ declare class DeepdotsPopups {
     private analyticsFlushTimer;
     /** Crash & error reporting (#14–17). Null hasta init(). */
     private crashReporter;
+    /** Protecciones del funnel de Messaging (#18–22). Vigencia de sesión: se reinicia en init(). */
+    private messageGuard;
     /** Observador de navegación (Fase 2): emite page_view por el canal de analytics. */
     private navObserver;
     /** Tiempo activo (engagement time, #8). */
     private engagement;
     /** Atributos internos del usuario identificado → POST /sdk/popups/contact. Null si no hay userId. */
     private contact;
+    /** Storage resuelto en init() (inyectado por el host o localStorage). Reusado al cambiar de usuario. */
+    private storage;
     /** Marca si ya se inició la navegación manual (setScreen) — para RN sin History API. */
     private navStarted;
+    /**
+     * `true` entre `session_start` y `session_end`. Hace idempotente tanto la apertura como
+     * el cierre (p. ej. `visibilitychange` + `pagehide` seguidos) y permite abrir una sesión
+     * nueva al volver a foreground o al conceder el consentimiento más tarde.
+     */
+    private sessionOpen;
     /**
      * Idioma resuelto en init() (explícito > navigator.language > Intl). Única fuente de
      * verdad para el context de analytics Y para la segmentación por idioma de los popups.
@@ -599,20 +673,55 @@ declare class DeepdotsPopups {
     trackFindabilityFriction(frictionTopic: string, params?: Record<string, unknown>): void;
     /** Funnel: un paso del embudo, correlacionado por `taskId`. El backend reconstruye conversión/drop-off/tiempo. */
     trackFunnelStep(funnel: string, step: string, taskId: string, params?: Record<string, unknown>): void;
-    /** Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app). No-op si tracking off. */
+    /**
+     * Messaging (#18–22): registra una etapa del funnel de una notificación (push/in-app).
+     * No-op si tracking off. El evento se descarta (con warning) si el `channel` no es válido,
+     * si ese `(message_id, stage)` ya se emitió en la sesión, o si el `message_id` ya se reportó
+     * en otro canal — ver `MessageGuard`.
+     */
     trackMessage(stage: MessageStage, options: TrackMessageOptions): void;
     /**
      * Navegación MANUAL (entornos sin History API, p. ej. React Native con React Navigation).
      * El host la llama en cada cambio de pantalla; emite `page_view` al salir de la anterior.
      */
     setScreen(name: string): void;
-    /** App a foreground (RN: AppState 'active'): reanuda el engagement time. */
+    /** App a foreground (RN: AppState 'active'): reanuda el engagement time y abre sesión nueva. */
     onForeground(): void;
     /**
-     * App a background (RN: AppState 'background'): cierra pantalla actual (page_view),
-     * mini-service (mini_service_exit), emite engagement y hace flush del lote.
+     * App a background (RN: AppState 'background'): FIN DE SESIÓN. Cierra pantalla actual
+     * (page_view), mini-services (mini_service_exit), emite engagement + `session_end` y
+     * envía el último lote con `completed:true`.
+     *
+     * Es la única señal disponible en móvil: el kill de la app (swipe) NO da callback.
      */
     onBackground(): void;
+    /**
+     * Cierre EXPLÍCITO de la sesión por parte del host (logout, fin de flujo…): emite
+     * `session_end` y envía el último lote con `completed:true`.
+     */
+    endSession(): void;
+    /**
+     * Cambio de usuario (login / logout / cambio de cuenta). Cierra la sesión del usuario
+     * anterior (`session_end` con `reason: 'user_change'` + `completed:true`), cambia la
+     * identidad y abre una sesión nueva. Sin `userId` vuelve al id anónimo del SDK.
+     *
+     * Equivale a llamar a `init()` otra vez con otro `userId`.
+     */
+    setUserId(userId?: string): void;
+    /**
+     * Cierra la sesión actual: vuelca todo lo que quedaba abierto y envía el último lote
+     * marcado con `completed:true`, para que el backend cierre el registro. El `sessionId`
+     * cacheado se olvida → el lote siguiente abre un registro nuevo.
+     *
+     * Idempotente: dos cierres seguidos (p. ej. `visibilitychange` + `pagehide`) no duplican
+     * el `session_end`.
+     */
+    private closeSession;
+    /**
+     * Abre sesión (`session_start`) si no hay una abierta y el tracking está activo. Idempotente:
+     * se llama en init(), al volver a foreground y al conceder el consentimiento.
+     */
+    private openSession;
     /** Payload que se ENVIARÍA al endpoint de analytics (no envía ni vacía el buffer). */
     previewAnalytics(): AnalyticsEnvelope;
     /**
@@ -622,6 +731,7 @@ declare class DeepdotsPopups {
      */
     flushAnalytics(options?: {
         final?: boolean;
+        sessionEnd?: boolean;
     }): void;
     /** Emite un evento `user_engagement` con el tiempo activo acumulado (#8). */
     private flushEngagement;
@@ -737,7 +847,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a
@@ -748,10 +858,13 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
 }
 
 /**
- * Construye un HTML autocontenido que renderiza el survey de `@magicfeedback/native`
- * dentro de un WebView (React Native). Carga el bundle desde CDN, crea el form con la
- * identidad inyectada (`profile`/`metadata`) y reenvía los eventos del survey al host
- * vía el puente de react-native-webview: `window.ReactNativeWebView.postMessage`.
+ * Construye un HTML autocontenido que renderiza el popup (chrome + survey de
+ * `@magicfeedback/native`) dentro de un WebView (React Native). Es el equivalente RN de
+ * `renderPopup.ts` (DOM real, solo navegador): mismo header con botón cerrar, spinner,
+ * footer con back/start/send, gate "Start survey" y colores/logo desde `formData.style`.
+ * Carga el bundle del survey desde CDN, crea el form con la identidad inyectada
+ * (`profile`/`metadata`) y reenvía los eventos al host vía el puente de
+ * react-native-webview: `window.ReactNativeWebView.postMessage`.
  *
  * Mensajes emitidos (JSON `{name, payload}`): `loaded`, `before_submit`, `after_submit`,
  * `survey_completed`, `back`, `popup_close`.
@@ -764,6 +877,9 @@ interface BuildSurveyHtmlOptions {
     metadata?: IdentityAnswer[];
     version?: string;
     font?: PopupFont;
+    theme?: 'light' | 'dark';
+    position?: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
+    actions?: PopupActions;
 }
 declare function buildSurveyHtml(opts: BuildSurveyHtmlOptions): string;
 
@@ -815,4 +931,4 @@ declare function collectRnDevice(d: DeviceInfoLike): DeviceInfo;
  */
 declare function setupReactNative(sdk: DeepdotsPopups, config: DeepdotsInitParams, deps?: ReactNativeSetupDeps): () => void;
 
-export { type AnalyticsFeedbackBody, type AnalyticsKeys, type AppStateLike, BrowserPopupRenderer, type ContactAttributeValue, type ContactAttributes, type ContactBody, ContactManager, type CrashRecord, CrashReporter, type CrashSeverity, type DeepdotsConfig, type DeepdotsEvent, type DeepdotsEventType, type DeepdotsInitParams, type DeepdotsLogger, DeepdotsPopups, type DeviceInfo, type DeviceInfoLike, type DeviceSnapshot, type EventListener, type FeedbackKV, InMemoryStorage, type KeyValueStorage, type MessageStage, type MmkvLike, NoopPopupRenderer, POPUP_TRIGGER_CONDITION_STATUSES, type PopupDefinition, type PopupRenderer, type PopupTrigger, type PopupTriggerCondition, type PopupTriggerConditionStatus, type ReactNativeErrorUtils, ReactNativePopupRenderer, type ReactNativeRendererOptions, type ReactNativeSetupDeps, type ReactNativeSurveyPayload, type ReportErrorOptions, type TrackMessageOptions, type TriggerConfig, buildAnalyticsFeedbackBody, buildMessageParams, buildSurveyHtml, collectRnDevice, crashRecordToParams, createDefaultRenderer, createFeedbackSink, mmkvStorage, setupReactNative };
+export { type AnalyticsFeedbackBody, type AnalyticsKeys, type AppStateLike, BrowserPopupRenderer, type BuildBodyOptions, type ContactAttributeValue, type ContactAttributes, type ContactBody, ContactManager, type CrashRecord, CrashReporter, type CrashSeverity, type DeepdotsConfig, type DeepdotsEvent, type DeepdotsEventType, type DeepdotsInitParams, type DeepdotsLogger, DeepdotsPopups, type DeviceInfo, type DeviceInfoLike, type DeviceSnapshot, type EventListener, type FeedbackKV, InMemoryStorage, type KeyValueStorage, MAX_TRACKED_MESSAGES, MESSAGE_CHANNELS, type MessageChannel, MessageGuard, type MessageGuardVerdict, type MessageRejectionReason, type MessageStage, type MmkvLike, NoopPopupRenderer, POPUP_TRIGGER_CONDITION_STATUSES, type PopupDefinition, type PopupRenderer, type PopupTrigger, type PopupTriggerCondition, type PopupTriggerConditionStatus, type ReactNativeErrorUtils, ReactNativePopupRenderer, type ReactNativeRendererOptions, type ReactNativeSetupDeps, type ReactNativeSurveyPayload, type ReportErrorOptions, type SessionEndReason, type TrackMessageOptions, type TriggerConfig, buildAnalyticsFeedbackBody, buildMessageParams, buildSurveyHtml, collectRnDevice, crashRecordToParams, createDefaultRenderer, createFeedbackSink, mmkvStorage, setupReactNative };