@magicfeedback/popup-sdk 1.1.4 → 1.1.6

package/dist/index.js

@@ -144,6 +144,64 @@ 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"
+    };
+  }
+});
+
+// src/util/logger.ts
+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);
+}
+var active;
+var init_logger = __esm({
+  "src/util/logger.ts"() {
+    "use strict";
+    active = console;
+  }
+});
+
 // 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 +2271,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 +3059,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 +3106,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%;";
@@ -3293,7 +3380,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let formInstance = null;
   try {
     if (!import_native.default || typeof import_native.default.form !== "function") {
-      console.warn("[MagicFeedback] form() no disponible. Fallback manual.");
+      sdkWarn("[MagicFeedback] form() no disponible. Fallback manual.");
       setLoading(false);
       return;
     }
@@ -3380,7 +3467,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
           }
         }
         if (s.startMessage && s.startMessage !== "") {
-          console.log(s.startMessage);
+          sdkLog(s.startMessage);
           updateButtons("start");
         } else {
           updateButtons("in_progress_first");
@@ -3435,11 +3522,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       }
     };
     formInstance.generate(formDivId, generateOptions).catch((err) => {
-      console.error("[MagicFeedback] Error generating form:", err);
+      sdkError("[MagicFeedback] Error generating form:", err);
       setLoading(false);
     });
   } catch (e) {
-    console.error("[MagicFeedback] Exception initializing form:", e);
+    sdkError("[MagicFeedback] Exception initializing form:", e);
     setLoading(false);
   }
 }
@@ -3448,6 +3535,8 @@ var init_renderPopup = __esm({
   "src/ui/renderPopup.ts"() {
     "use strict";
     init_tracking_manager();
+    init_font();
+    init_logger();
     import_native = __toESM(require_magicfeedback_sdk_browser());
     init_style();
   }
@@ -3664,6 +3753,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 +3762,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>
@@ -3716,6 +3808,7 @@ function buildSurveyHtml(opts) {
 }
 
 // src/platform/react-native-renderer.ts
+init_logger();
 var ReactNativePopupRenderer = class {
   constructor(options = {}) {
     this.options = options;
@@ -3726,17 +3819,17 @@ 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 {
-      console.warn(
+      sdkWarn(
         "[Deepdots] ReactNativePopupRenderer sin onShow: pasa { onShow } a new ReactNativePopupRenderer({...}) para montar el WebView del survey."
       );
     }
@@ -3853,12 +3946,13 @@ function createDefaultRenderer() {
 init_tracking_manager();
 
 // src/analytics/analytics-manager.ts
-var dryRunSink = (payload) => {
-  console.log(
+function createDryRunSink(log = console.log) {
+  return (payload) => log(
     "[DeepdotsAnalytics] (dry-run \xB7 NO enviado \xB7 sin init.analytics) POST /sdk/feedback \u2192",
     JSON.stringify(payload, null, 2)
   );
-};
+}
+var dryRunSink = createDryRunSink();
 var AnalyticsManager = class {
   constructor(options = {}) {
     this.events = [];
@@ -4374,7 +4468,7 @@ var CrashReporter = class {
   }
   /** Instala los handlers globales de errores no capturados (no-op sin `window`). */
   install() {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || typeof window.addEventListener !== "function") return;
     window.addEventListener("error", (e) => {
       if (!this.isEnabled()) return;
       this.captureUnhandled(e.error ?? e.message ?? "error");
@@ -4398,6 +4492,9 @@ var CrashReporter = class {
   }
 };
 
+// src/core/deepdots-popups.ts
+init_logger();
+
 // src/analytics/messaging.ts
 function buildMessageParams(stage, o) {
   const p = {
@@ -4426,6 +4523,8 @@ var DeepdotsPopups = class {
     this.triggers = [];
     this.initialized = false;
     this.renderer = createDefaultRenderer();
+    /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
+    this.logger = console;
     this.popupContainer = null;
     // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
@@ -4461,6 +4560,8 @@ var DeepdotsPopups = class {
   }
   /** Initialize the SDK with configuration */
   init(config) {
+    this.logger = config.logger ?? console;
+    setLogger(this.logger);
     if (this.initialized) {
       this.log("SDK already initialized");
       return;
@@ -4500,7 +4601,7 @@ var DeepdotsPopups = class {
       onSessionId: (id) => {
         this.analyticsFeedbackSessionId = id;
       }
-    }) : void 0;
+    }) : createDryRunSink((...a) => this.logger.log(...a));
     const device = config.device ?? collectDeviceInfo(config.appVersion);
     this.analytics = new AnalyticsManager({
       sink: analyticsSink,
@@ -5209,7 +5310,8 @@ var DeepdotsPopups = class {
         try {
           listener(event);
         } catch (error) {
-          console.error("Error in event listener:", error);
+          if (this.logger.error) this.logger.error("Error in event listener:", error);
+          else this.logger.log("Error in event listener:", error);
         }
       });
     }
@@ -5217,7 +5319,7 @@ var DeepdotsPopups = class {
   /** Log debug messages */
   log(...args) {
     if (this.config?.debug) {
-      console.log("[DeepdotsPopups]", ...args);
+      this.logger.log("[DeepdotsPopups]", ...args);
     }
   }
   /** External debug method for triggers */