@magicfeedback/popup-sdk 1.1.4 → 1.1.5

package/dist/assets/assets/style.css

@@ -138,13 +138,22 @@
     padding: 0;
     font-weight: 900;
     color: #222;
-    font-family: 'Montserrat';
+    font-family: var(--deepdots-font, 'Montserrat');
     font-size: 18px;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 40px;
 }
 
+/* Los controles de formulario no heredan font-family por defecto: cuando hay
+   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
+.deepdots-popup.deepdots-has-font button,
+.deepdots-popup.deepdots-has-font input,
+.deepdots-popup.deepdots-has-font textarea,
+.deepdots-popup.deepdots-has-font select {
+    font-family: var(--deepdots-font, inherit);
+}
+
 .deepdots-popup h6 {
     margin-bottom: 1rem;
 }

package/dist/{chunk-6WTOQGET.mjs → chunk-7TOLYAFL.mjs}

@@ -129,6 +129,37 @@ var TrackingManager = class {
   }
 };
 
+// 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;}`;
+}
+
 export {
   __commonJS,
   __toESM,
@@ -136,6 +167,8 @@ export {
   createDefaultStorage,
   STORAGE_KEYS,
   buildSurveyIdentity,
-  TrackingManager
+  TrackingManager,
+  buildFontFamilyValue,
+  buildFontFaceCss
 };
-//# sourceMappingURL=chunk-6WTOQGET.mjs.map
+//# sourceMappingURL=chunk-7TOLYAFL.mjs.map

package/dist/chunk-7TOLYAFL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tracking/tracking-manager.ts","../src/ui/font.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"],"mappings":"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","names":[]}

package/dist/{chunk-IOAZQPZE.mjs → chunk-LSTKGFU7.mjs}

@@ -110,11 +110,44 @@ var TrackingManager = class {
   }
 };
 
+// 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;}`;
+}
+
 export {
   __require,
   createDefaultStorage,
   STORAGE_KEYS,
   buildSurveyIdentity,
-  TrackingManager
+  TrackingManager,
+  buildFontFamilyValue,
+  buildFontFaceCss
 };
-//# sourceMappingURL=chunk-IOAZQPZE.mjs.map
+//# sourceMappingURL=chunk-LSTKGFU7.mjs.map

package/dist/chunk-LSTKGFU7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tracking/tracking-manager.ts","../src/ui/font.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"],"mappings":";;;;;;;;AAoBO,IAAM,kBAAN,MAAiD;AAAA,EAAjD;AACL,SAAQ,MAAM,oBAAI,IAAoB;AAAA;AAAA,EACtC,QAAQ,KAA4B;AAClC,WAAO,KAAK,IAAI,IAAI,GAAG,IAAK,KAAK,IAAI,IAAI,GAAG,IAAe;AAAA,EAC7D;AAAA,EACA,QAAQ,KAAa,OAAqB;AACxC,SAAK,IAAI,IAAI,KAAK,KAAK;AAAA,EACzB;AAAA,EACA,WAAW,KAAmB;AAC5B,SAAK,IAAI,OAAO,GAAG;AAAA,EACrB;AACF;AAGO,SAAS,uBAAwC;AACtD,MAAI;AACF,QAAI,OAAO,WAAW,eAAe,OAAO,cAAc;AACxD,YAAM,KAAK,OAAO;AAClB,YAAM,QAAQ;AACd,SAAG,QAAQ,OAAO,GAAG;AACrB,SAAG,WAAW,KAAK;AACnB,aAAO;AAAA,QACL,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC;AAAA,QAC5B,SAAS,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,CAAC;AAAA,QAClC,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC;AAAA,MACpC;AAAA,IACF;AAAA,EACF,QAAQ;AAAA,EAER;AACA,SAAO,IAAI,gBAAgB;AAC7B;AAGO,IAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,mBAAmB;AACrB;AAaO,SAAS,oBACd,QACA,WACA,cAA6B,MAC7B,6BAA4C,MACe;AAC3D,QAAM,UAA4B,SAAS,CAAC,EAAE,KAAK,oBAAoB,OAAO,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC;AAC7F,QAAM,WAA6B,CAAC;AACpC,MAAI,UAAW,UAAS,KAAK,EAAE,KAAK,cAAc,OAAO,CAAC,SAAS,EAAE,CAAC;AACtE,MAAI,OAAQ,UAAS,KAAK,EAAE,KAAK,WAAW,OAAO,CAAC,MAAM,EAAE,CAAC;AAC7D,MAAI,YAAa,UAAS,KAAK,EAAE,KAAK,gBAAgB,OAAO,CAAC,WAAW,EAAE,CAAC;AAC5E,MAAI,2BAA4B,UAAS,KAAK,EAAE,KAAK,0CAA0C,OAAO,CAAC,0BAA0B,EAAE,CAAC;AACpI,SAAO,EAAE,SAAS,SAAS;AAC7B;AAcA,SAAS,cAAsB;AAC7B,QAAM,IAAK,OAAO,eAAe,cAAc,aAAa,CAAC;AAG7D,MAAI,EAAE,QAAQ,WAAY,QAAO,EAAE,OAAO,WAAW;AACrD,QAAM,QAAQ,IAAI,WAAW,EAAE;AAC/B,MAAI,EAAE,QAAQ,iBAAiB;AAC7B,MAAE,OAAO,gBAAgB,KAAK;AAAA,EAChC,OAAO;AACL,aAAS,IAAI,GAAG,IAAI,IAAI,IAAK,OAAM,CAAC,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAG;AAAA,EACxE;AACA,QAAM,CAAC,IAAK,MAAM,CAAC,IAAI,KAAQ;AAC/B,QAAM,CAAC,IAAK,MAAM,CAAC,IAAI,KAAQ;AAC/B,QAAM,MAAM,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AACpE,SAAO,GAAG,IAAI,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,IAC/D,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;AACxE;AAEO,IAAM,kBAAN,MAAsB;AAAA,EAW3B,YAAY,SAAiC;AAH7C;AAAA,SAAQ,YAA2B;AACnC,SAAQ,qBAAqB;AAG3B,SAAK,UAAU,QAAQ;AACvB,SAAK,eAAe,QAAQ;AAC5B,SAAK,MAAM,QAAQ,QAAQ,MAAM,KAAK,IAAI;AAC1C,SAAK,OAAO,QAAQ,QAAQ;AAC5B,SAAK,UAAU,QAAQ,WAAW;AAAA,EACpC;AAAA,EAEA,oBAA6B;AAC3B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,mBAAmB,SAAwB;AACzC,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA,EAGA,YAA2B;AACzB,QAAI,CAAC,KAAK,QAAS,QAAO;AAC1B,QAAI,KAAK,aAAc,QAAO,KAAK;AAEnC,UAAM,YAAY,KAAK,QAAQ,QAAQ,aAAa,MAAM;AAC1D,QAAI,UAAW,QAAO;AAEtB,UAAM,KAAK,KAAK,KAAK;AACrB,SAAK,QAAQ,QAAQ,aAAa,QAAQ,EAAE;AAC5C,SAAK,QAAQ,QAAQ,aAAa,WAAW,OAAO,KAAK,IAAI,CAAC,CAAC;AAC/D,SAAK,qBAAqB;AAC1B,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,eAA8B;AAC5B,QAAI,CAAC,KAAK,QAAS,QAAO;AAC1B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,aAAa,WAAgC;AAC3C,QAAI,CAAC,KAAK,QAAS;AACnB,SAAK,YAAY;AAAA,EACnB;AACF;;;AC1KA,IAAM,gBAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AACP;AAGO,SAAS,kBAAkB,KAAiC;AACjE,QAAM,QAAQ,IAAI,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;AAC5C,QAAM,MAAM,MAAM,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,YAAY;AAChE,SAAO,cAAc,GAAG;AAC1B;AAIA,SAAS,eAAe,QAAwB;AAC9C,SAAO,OAAO,QAAQ,qBAAqB,EAAE,EAAE,KAAK;AACtD;AAEA,SAAS,cAAc,KAAsB;AAG3C,MAAI,CAAC,oBAAoB,KAAK,GAAG,EAAG,QAAO;AAE3C,SAAO,CAAC,mBAAmB,KAAK,GAAG;AACrC;AAGO,SAAS,qBAAqB,QAAwB;AAC3D,QAAM,OAAO,eAAe,MAAM;AAClC,SAAO,IAAI,IAAI;AACjB;AAGO,SAAS,iBAAiB,QAAgB,KAAsB;AACrE,MAAI,CAAC,OAAO,CAAC,cAAc,GAAG,EAAG,QAAO;AACxC,QAAM,OAAO,eAAe,MAAM;AAClC,QAAM,MAAM,kBAAkB,GAAG;AACjC,QAAM,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,OAAO,QAAQ,GAAG;AAChE,SAAO,2BAA2B,IAAI,SAAS,GAAG;AACpD;","names":[]}

package/dist/index.d.mts

@@ -267,12 +267,21 @@ interface PopupActions {
     start?: PopupActionStart;
     back?: PopupActionDecline;
 }
+/** Fuente personalizable del popup + survey (viene de la API por popup) */
+interface PopupFont {
+    /** Nombre de la familia. Ej: "Inter" (nombre limpio, NO un stack). */
+    family: string;
+    /** Opcional: URL a un archivo de fuente (woff2/ttf/otf) para armar un @font-face. */
+    url?: string;
+}
 /** Configurable popup styles */
 interface PopupStyle {
     theme: 'light' | 'dark';
     position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     /** @deprecated Not used by the SDK; kept only for API compatibility */
     imageUrl?: string | null;
+    /** Fuente personalizada. Si falta, se mantiene el comportamiento actual. */
+    font?: PopupFont;
 }
 /** Segments/targeting rules for showing the popup */
 interface PopupSegments {
@@ -658,7 +667,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
@@ -684,6 +693,7 @@ interface BuildSurveyHtmlOptions {
     profile?: IdentityAnswer[];
     metadata?: IdentityAnswer[];
     version?: string;
+    font?: PopupFont;
 }
 declare function buildSurveyHtml(opts: BuildSurveyHtmlOptions): string;
 

package/dist/index.d.ts

@@ -267,12 +267,21 @@ interface PopupActions {
     start?: PopupActionStart;
     back?: PopupActionDecline;
 }
+/** Fuente personalizable del popup + survey (viene de la API por popup) */
+interface PopupFont {
+    /** Nombre de la familia. Ej: "Inter" (nombre limpio, NO un stack). */
+    family: string;
+    /** Opcional: URL a un archivo de fuente (woff2/ttf/otf) para armar un @font-face. */
+    url?: string;
+}
 /** Configurable popup styles */
 interface PopupStyle {
     theme: 'light' | 'dark';
     position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
     /** @deprecated Not used by the SDK; kept only for API compatibility */
     imageUrl?: string | null;
+    /** Fuente personalizada. Si falta, se mantiene el comportamiento actual. */
+    font?: PopupFont;
 }
 /** Segments/targeting rules for showing the popup */
 interface PopupSegments {
@@ -658,7 +667,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
@@ -684,6 +693,7 @@ interface BuildSurveyHtmlOptions {
     profile?: IdentityAnswer[];
     metadata?: IdentityAnswer[];
     version?: string;
+    font?: PopupFont;
 }
 declare function buildSurveyHtml(opts: BuildSurveyHtmlOptions): string;
 

package/dist/index.js

@@ -144,6 +144,43 @@ var init_tracking_manager = __esm({
   }
 });
 
+// src/ui/font.ts
+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;}`;
+}
+var FORMAT_BY_EXT;
+var init_font = __esm({
+  "src/ui/font.ts"() {
+    "use strict";
+    FORMAT_BY_EXT = {
+      woff2: "woff2",
+      woff: "woff",
+      ttf: "truetype",
+      otf: "opentype"
+    };
+  }
+});
+
 // node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
   "node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js"(exports, module2) {
@@ -2213,13 +2250,22 @@ var init_style = __esm({
     padding: 0;
     font-weight: 900;
     color: #222;
-    font-family: 'Montserrat';
+    font-family: var(--deepdots-font, 'Montserrat');
     font-size: 18px;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 40px;
 }
 
+/* Los controles de formulario no heredan font-family por defecto: cuando hay
+   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
+.deepdots-popup.deepdots-has-font button,
+.deepdots-popup.deepdots-has-font input,
+.deepdots-popup.deepdots-has-font textarea,
+.deepdots-popup.deepdots-has-font select {
+    font-family: var(--deepdots-font, inherit);
+}
+
 .deepdots-popup h6 {
     margin-bottom: 1rem;
 }
@@ -2992,6 +3038,18 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
+function ensureFontFace(family, url) {
+  const css = buildFontFaceCss(family, url);
+  if (!css) return;
+  const STYLE_ID = "deepdots-font-face";
+  let el = document.getElementById(STYLE_ID);
+  if (!el) {
+    el = document.createElement("style");
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  if (el.textContent !== css) el.textContent = css;
+}
 async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
@@ -3027,6 +3085,14 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       width: 90%;
       min-height: 200px;
     `;
+  const font = style?.font;
+  if (font?.family) {
+    const familyValue = buildFontFamilyValue(font.family);
+    popup.style.fontFamily = familyValue;
+    popup.style.setProperty("--deepdots-font", familyValue);
+    popup.classList.add("deepdots-has-font");
+    if (font.url) ensureFontFace(font.family, font.url);
+  }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
   header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
@@ -3448,6 +3514,7 @@ var init_renderPopup = __esm({
   "src/ui/renderPopup.ts"() {
     "use strict";
     init_tracking_manager();
+    init_font();
     import_native = __toESM(require_magicfeedback_sdk_browser());
     init_style();
   }
@@ -3664,6 +3731,7 @@ function resolveEnvironment(nodeEnv) {
 init_tracking_manager();
 
 // src/ui/surveyHtml.ts
+init_font();
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
   const version = opts.version ?? "2.2.4";
@@ -3672,10 +3740,12 @@ function buildSurveyHtml(opts) {
   const pid = JSON.stringify(opts.productId);
   const profileJson = JSON.stringify(opts.profile ?? []);
   const metaJson = JSON.stringify(opts.metadata ?? []);
+  const fontFaceCss = opts.font ? buildFontFaceCss(opts.font.family, opts.font.url) : "";
+  const fontFamilyValue = opts.font ? buildFontFamilyValue(opts.font.family) : "-apple-system,system-ui,sans-serif";
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <meta name="color-scheme" content="light"/>
-<style>html,body{margin:0;padding:0;background:transparent;font-family:-apple-system,system-ui,sans-serif}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
+<style>${fontFaceCss}html,body{margin:0;padding:0;background:transparent;font-family:${fontFamilyValue}}#mf{width:100%;box-sizing:border-box}#mf *{max-width:100%;box-sizing:border-box}</style>
 </head><body>
 <div id="mf"></div>
 <script>
@@ -3726,13 +3796,13 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, _style, sessionId, miniService, analyticsFeedbackSessionId) {
+  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
     const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
-    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata });
+    const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata, font: style?.font });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
     } else {