@flonkid/kyc 1.6.1 → 1.8.0

package/dist/index.js

@@ -1,12 +1,8 @@
 import { useRef, useMemo, useEffect } from 'react';
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx } from 'react/jsx-runtime';
 
 // src/shared/constants.ts
-var SDK_VERSION = "1.6.0";
+var SDK_VERSION = "1.8.0";
 var DEFAULT_WIDGET_URL = "https://widget.flonk.id";
 var DEFAULT_API_BASE = "https://api.flonk.id/v1";
 var WIDGET_EVENTS = {
@@ -17,43 +13,35 @@ var WIDGET_EVENTS = {
 };
 
 // src/shared/errors.ts
-var _FlonkError = class _FlonkError extends Error {
+var FlonkError = class extends Error {
   constructor(message, code, statusCode) {
     super(message);
-    __publicField(this, "code");
-    __publicField(this, "statusCode");
-    this.code = code, this.statusCode = statusCode;
+    this.code = code;
+    this.statusCode = statusCode;
     this.name = "FlonkError";
   }
 };
-__name(_FlonkError, "FlonkError");
-var FlonkError = _FlonkError;
-var _FlonkValidationError = class _FlonkValidationError extends FlonkError {
+var FlonkValidationError = class extends FlonkError {
   constructor(message) {
     super(message, "validation_error", 400);
     this.name = "FlonkValidationError";
   }
 };
-__name(_FlonkValidationError, "FlonkValidationError");
-var FlonkValidationError = _FlonkValidationError;
 
 // src/browser/utils.ts
 function getOrigin(url) {
   try {
     return new URL(url).origin;
   } catch {
-    return window.location.origin;
+    return "null";
   }
 }
-__name(getOrigin, "getOrigin");
 function isDesktop() {
   return window.innerWidth >= 1024 && !("ontouchstart" in window || navigator.maxTouchPoints > 0);
 }
-__name(isDesktop, "isDesktop");
 function setStyles(el, styles) {
   Object.assign(el.style, styles);
 }
-__name(setStyles, "setStyles");
 function createEl(tag, styles, attrs) {
   const el = document.createElement(tag);
   if (styles) setStyles(el, styles);
@@ -62,15 +50,13 @@ function createEl(tag, styles, attrs) {
   }
   return el;
 }
-__name(createEl, "createEl");
 function debounce(fn, ms) {
   let timer;
-  return (...args) => {
+  return ((...args) => {
     clearTimeout(timer);
     timer = setTimeout(() => fn(...args), ms);
-  };
+  });
 }
-__name(debounce, "debounce");
 function generateSecondaryColor(hex) {
   try {
     const h = hex.replace("#", "");
@@ -78,21 +64,33 @@ function generateSecondaryColor(hex) {
     const g = parseInt(h.substring(2, 4), 16);
     const b = parseInt(h.substring(4, 6), 16);
     const f = 0.6;
-    const toHex = /* @__PURE__ */ __name((n) => {
+    const toHex = (n) => {
       const s = n.toString(16);
       return s.length === 1 ? "0" + s : s;
-    }, "toHex");
+    };
     return "#" + toHex(Math.round(r + (255 - r) * f)) + toHex(Math.round(g + (255 - g) * f)) + toHex(Math.round(b + (255 - b) * f));
   } catch {
     return "#93c5fd";
   }
 }
-__name(generateSecondaryColor, "generateSecondaryColor");
+var DEFAULT_FETCH_TIMEOUT_MS = 2e4;
+async function fetchWithTimeout(url, init = {}, timeoutMs = DEFAULT_FETCH_TIMEOUT_MS) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    return await fetch(url, { ...init, signal: controller.signal });
+  } catch (err) {
+    if (err?.name === "AbortError") {
+      throw new Error(`Request timed out after ${timeoutMs}ms: ${url}`);
+    }
+    throw err;
+  } finally {
+    clearTimeout(timer);
+  }
+}
 async function fetchWidgetToken(pk, apiBase) {
-  const res = await fetch(`${apiBase}/public/widget-token`, {
-    headers: {
-      "x-kyc-pk": pk
-    },
+  const res = await fetchWithTimeout(`${apiBase}/public/widget-token`, {
+    headers: { "x-kyc-pk": pk },
     credentials: "include"
   });
   if (!res.ok) {
@@ -106,51 +104,66 @@ async function fetchWidgetToken(pk, apiBase) {
   }
   return res.json();
 }
-__name(fetchWidgetToken, "fetchWidgetToken");
-async function fetchDesignTokens(apiBase, opts) {
+var BRANDING_CACHE_TTL_MS = 5 * 60 * 1e3;
+var brandingCache = /* @__PURE__ */ new Map();
+function brandingCacheKey(opts) {
+  if (opts.pk) return `pk:${opts.pk}`;
+  if (opts.sessionId) return `sid:${opts.sessionId}`;
+  if (opts.clientId) return `cid:${opts.clientId}`;
+  return null;
+}
+async function requestDesignTokens(apiBase, opts) {
   const params = [];
   if (opts.sessionId) params.push(`sessionId=${encodeURIComponent(opts.sessionId)}`);
   else if (opts.clientId) params.push(`clientId=${encodeURIComponent(opts.clientId)}`);
   const url = `${apiBase}/public/design-tokens${params.length ? "?" + params.join("&") : ""}`;
-  try {
-    const res = await fetch(url, {
-      headers: opts.pk ? {
-        "x-kyc-pk": opts.pk
-      } : {},
-      credentials: "omit"
-    });
-    return res.ok ? res.json() : null;
-  } catch {
-    return null;
+  const res = await fetchWithTimeout(
+    url,
+    { headers: opts.pk ? { "x-kyc-pk": opts.pk } : {}, credentials: "omit" },
+    8e3
+  );
+  return res.ok ? res.json() : null;
+}
+async function fetchDesignTokens(apiBase, opts) {
+  const key = brandingCacheKey(opts);
+  if (!key) return null;
+  const now = Date.now();
+  const cached = brandingCache.get(key);
+  if (cached && cached.expiresAt > now) {
+    return cached.promise;
   }
+  const promise = requestDesignTokens(apiBase, opts).catch(() => null);
+  brandingCache.set(key, { promise, expiresAt: now + BRANDING_CACHE_TTL_MS });
+  promise.then((tokens) => {
+    if (tokens == null) brandingCache.delete(key);
+  });
+  return promise;
+}
+function preloadDesignTokens(apiBase, opts) {
+  return fetchDesignTokens(apiBase, opts);
 }
-__name(fetchDesignTokens, "fetchDesignTokens");
 function validateServerUrl(url) {
   if (url.startsWith("/")) return;
   try {
     const parsed = new URL(url);
     const isLocalhost = parsed.hostname === "localhost" || parsed.hostname === "127.0.0.1";
     if (parsed.protocol !== "https:" && !isLocalhost) {
-      throw new Error(`serverUrl must use HTTPS in production. Got: ${parsed.protocol}//. Use HTTPS ('https://api.myapp.com/...') or a relative path ('/api/...')`);
+      throw new Error(
+        `serverUrl must use HTTPS in production. Got: ${parsed.protocol}//. Use HTTPS ('https://api.myapp.com/...') or a relative path ('/api/...')`
+      );
     }
   } catch (e) {
     if (e.message.includes("serverUrl must use HTTPS")) throw e;
     throw new Error(`Invalid serverUrl: ${url}`);
   }
 }
-__name(validateServerUrl, "validateServerUrl");
 async function fetchSessionFromServer(serverUrl, clientMetadata, requestHeaders) {
   validateServerUrl(serverUrl);
-  const res = await fetch(serverUrl, {
+  const res = await fetchWithTimeout(serverUrl, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...requestHeaders
-    },
+    headers: { "Content-Type": "application/json", ...requestHeaders },
     credentials: "include",
-    body: JSON.stringify({
-      clientMetadata
-    })
+    body: JSON.stringify({ clientMetadata })
   });
   if (!res.ok) {
     let message = `Session request failed (${res.status})`;
@@ -164,9 +177,8 @@ async function fetchSessionFromServer(serverUrl, clientMetadata, requestHeaders)
   }
   return res.json();
 }
-__name(fetchSessionFromServer, "fetchSessionFromServer");
 async function fetchPublicSession(apiBase, sessionId, embedToken) {
-  const res = await fetch(`${apiBase}/public/session/${sessionId}`, {
+  const res = await fetchWithTimeout(`${apiBase}/public/session/${sessionId}`, {
     headers: {
       "Content-Type": "application/json",
       "Authorization": `Bearer ${embedToken}`
@@ -183,13 +195,10 @@ async function fetchPublicSession(apiBase, sessionId, embedToken) {
   }
   return res.json();
 }
-__name(fetchPublicSession, "fetchPublicSession");
 async function exchangeSessionForToken(apiBase, sessionId) {
-  const res = await fetch(`${apiBase}/public/session/${sessionId}/token`, {
+  const res = await fetchWithTimeout(`${apiBase}/public/session/${sessionId}/token`, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    }
+    headers: { "Content-Type": "application/json" }
   });
   if (!res.ok) {
     let message = `Token exchange failed (${res.status})`;
@@ -202,33 +211,36 @@ async function exchangeSessionForToken(apiBase, sessionId) {
   }
   return res.json();
 }
-__name(exchangeSessionForToken, "exchangeSessionForToken");
 
 // src/browser/iframe-manager.ts
 function createIframe(src) {
   const d = isDesktop();
-  const iframe = createEl("iframe", {
-    border: "0",
-    width: window.innerWidth + "px",
-    height: window.innerHeight + "px",
-    position: "fixed",
-    top: "0",
-    left: "0",
-    zIndex: "9999",
-    background: "transparent",
-    backgroundColor: "transparent",
-    opacity: "0",
-    visibility: "hidden",
-    borderRadius: d ? "0" : "",
-    boxShadow: d ? "none" : "",
-    colorScheme: "normal"
-  }, {
-    src,
-    allow: "camera;microphone;clipboard-read;clipboard-write",
-    sandbox: "allow-scripts allow-forms allow-same-origin allow-popups",
-    "aria-label": "KYC Verification",
-    allowtransparency: "true"
-  });
+  const iframe = createEl(
+    "iframe",
+    {
+      border: "0",
+      width: window.innerWidth + "px",
+      height: window.innerHeight + "px",
+      position: "fixed",
+      top: "0",
+      left: "0",
+      zIndex: "9999",
+      background: "transparent",
+      backgroundColor: "transparent",
+      opacity: "0",
+      visibility: "hidden",
+      borderRadius: d ? "0" : "",
+      boxShadow: d ? "none" : "",
+      colorScheme: "normal"
+    },
+    {
+      src,
+      allow: "camera;microphone;clipboard-read;clipboard-write",
+      sandbox: "allow-scripts allow-forms allow-same-origin allow-popups",
+      "aria-label": "KYC Verification",
+      allowtransparency: "true"
+    }
+  );
   try {
     iframe.style.setProperty("background", "transparent", "important");
     iframe.style.setProperty("background-color", "transparent", "important");
@@ -237,24 +249,21 @@ function createIframe(src) {
   }
   return iframe;
 }
-__name(createIframe, "createIframe");
 function adjustZIndex(loader, iframe) {
   if (!isDesktop()) return;
   const all = Array.from(document.querySelectorAll("*"));
-  const maxZ = Math.max(...all.map((el) => parseInt(getComputedStyle(el).zIndex) || 0).filter((z) => z < 999999));
+  const maxZ = Math.max(
+    ...all.map((el) => parseInt(getComputedStyle(el).zIndex) || 0).filter((z) => z < 999999)
+  );
   if (maxZ > 9998) {
     loader.style.zIndex = String(maxZ + 1);
     iframe.style.zIndex = String(maxZ + 2);
   }
 }
-__name(adjustZIndex, "adjustZIndex");
 function transitionLoaderToIframe(loader, iframe, onDone) {
   const d = isDesktop();
   const dur = d ? 300 : 500;
-  setStyles(iframe, {
-    opacity: "0",
-    visibility: "hidden"
-  });
+  setStyles(iframe, { opacity: "0", visibility: "hidden" });
   const card = loader.querySelector("div");
   if (card) {
     setStyles(card, {
@@ -272,28 +281,12 @@ function transitionLoaderToIframe(loader, iframe, onDone) {
     });
   }, dur);
 }
-__name(transitionLoaderToIframe, "transitionLoaderToIframe");
 
 // src/browser/loader.ts
 var LOADER_I18N = {
-  en: {
-    title: "Initializing...",
-    subtitle: "Loading KYC widget",
-    errorTitle: "Something went wrong",
-    close: "Close"
-  },
-  de: {
-    title: "Initialisierung...",
-    subtitle: "KYC-Widget wird geladen",
-    errorTitle: "Ein Fehler ist aufgetreten",
-    close: "Schlie\xDFen"
-  },
-  uk: {
-    title: "\u0406\u043D\u0456\u0446\u0456\u0430\u043B\u0456\u0437\u0430\u0446\u0456\u044F...",
-    subtitle: "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F KYC-\u0432\u0456\u0434\u0436\u0435\u0442\u0430",
-    errorTitle: "\u0429\u043E\u0441\u044C \u043F\u0456\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A",
-    close: "\u0417\u0430\u043A\u0440\u0438\u0442\u0438"
-  }
+  en: { title: "Initializing...", subtitle: "Loading KYC widget", errorTitle: "Something went wrong", close: "Close" },
+  de: { title: "Initialisierung...", subtitle: "KYC-Widget wird geladen", errorTitle: "Ein Fehler ist aufgetreten", close: "Schlie\xDFen" },
+  uk: { title: "\u0406\u043D\u0456\u0446\u0456\u0430\u043B\u0456\u0437\u0430\u0446\u0456\u044F...", subtitle: "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F KYC-\u0432\u0456\u0434\u0436\u0435\u0442\u0430", errorTitle: "\u0429\u043E\u0441\u044C \u043F\u0456\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A", close: "\u0417\u0430\u043A\u0440\u0438\u0442\u0438" }
 };
 var KEYFRAMES = `
 @keyframes kycspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@@ -301,11 +294,11 @@ var KEYFRAMES = `
 @keyframes kycprogress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(250%)}}
 `.trim();
 var styleInjected = false;
-var _Loader = class _Loader {
+var Loader = class {
   constructor() {
-    __publicField(this, "overlay", null);
-    __publicField(this, "cleanup", null);
-    __publicField(this, "origBodyStyles", null);
+    this.overlay = null;
+    this.cleanup = null;
+    this.origBodyStyles = null;
   }
   show(primaryColor, lang) {
     const color = primaryColor || "#15BA68";
@@ -384,64 +377,23 @@ var _Loader = class _Loader {
       "stroke-dasharray": "62.8",
       "stroke-dashoffset": "15.7"
     })) fg.setAttribute(k, v);
-    setStyles(fg, {
-      transformOrigin: "center",
-      animation: "kycdash 1.5s ease-in-out infinite"
-    });
+    setStyles(fg, { transformOrigin: "center", animation: "kycdash 1.5s ease-in-out infinite" });
     svg.append(bg, fg);
     wrap.appendChild(svg);
     const font = 'Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif';
-    const textBox = createEl("div", {
-      textAlign: "center"
-    });
-    const title = createEl("h3", {
-      fontFamily: font,
-      fontWeight: "600",
-      fontSize: "18px",
-      lineHeight: "1.3",
-      color: "#1F2937",
-      margin: "0 0 4px 0"
-    });
+    const textBox = createEl("div", { textAlign: "center" });
+    const title = createEl("h3", { fontFamily: font, fontWeight: "600", fontSize: "18px", lineHeight: "1.3", color: "#1F2937", margin: "0 0 4px 0" });
     title.textContent = strings.title;
-    const subtitle = createEl("p", {
-      fontFamily: font,
-      fontWeight: "400",
-      fontSize: "13px",
-      lineHeight: "1.4",
-      color: "rgba(31,41,55,0.7)",
-      margin: "0"
-    });
+    const subtitle = createEl("p", { fontFamily: font, fontWeight: "400", fontSize: "13px", lineHeight: "1.4", color: "rgba(31,41,55,0.7)", margin: "0" });
     subtitle.textContent = strings.subtitle;
     textBox.append(title, subtitle);
-    const track = createEl("div", {
-      width: "100%",
-      maxWidth: "240px",
-      height: "3px",
-      backgroundColor: color + "1A",
-      borderRadius: "2px",
-      overflow: "hidden"
-    });
-    const bar = createEl("div", {
-      width: "40%",
-      height: "100%",
-      backgroundColor: color,
-      borderRadius: "2px",
-      transform: "translateX(-100%)",
-      animation: "kycprogress 2000ms ease-in-out infinite"
-    });
+    const track = createEl("div", { width: "100%", maxWidth: "240px", height: "3px", backgroundColor: color + "1A", borderRadius: "2px", overflow: "hidden" });
+    const bar = createEl("div", { width: "40%", height: "100%", backgroundColor: color, borderRadius: "2px", transform: "translateX(-100%)", animation: "kycprogress 2000ms ease-in-out infinite" });
     track.appendChild(bar);
     card.append(wrap, textBox, track);
     overlay.appendChild(card);
-    this.origBodyStyles = {
-      overflow: document.body.style.overflow,
-      position: document.body.style.position
-    };
-    setStyles(document.body, {
-      overflow: "hidden",
-      position: "fixed",
-      width: "100%",
-      height: "100%"
-    });
+    this.origBodyStyles = { overflow: document.body.style.overflow, position: document.body.style.position };
+    setStyles(document.body, { overflow: "hidden", position: "fixed", width: "100%", height: "100%" });
     document.body.appendChild(overlay);
     let prevW = window.innerWidth;
     let prevH = window.innerHeight;
@@ -449,10 +401,7 @@ var _Loader = class _Loader {
       const w = window.innerWidth;
       const h = window.innerHeight;
       if (Math.abs(w - prevW) > 1 || Math.abs(h - prevH) > 1) {
-        setStyles(overlay, {
-          width: w + "px",
-          height: h + "px"
-        });
+        setStyles(overlay, { width: w + "px", height: h + "px" });
         prevW = w;
         prevH = h;
       }
@@ -462,11 +411,7 @@ var _Loader = class _Loader {
     this.cleanup = () => {
       window.removeEventListener("resize", onResize);
       if (this.origBodyStyles) {
-        setStyles(document.body, {
-          ...this.origBodyStyles,
-          width: "",
-          height: ""
-        });
+        setStyles(document.body, { ...this.origBodyStyles, width: "", height: "" });
       }
     };
     return overlay;
@@ -586,25 +531,20 @@ var _Loader = class _Loader {
     this.cleanup = null;
   }
 };
-__name(_Loader, "Loader");
-var Loader = _Loader;
 
 // src/browser/message-handler.ts
-var _MessageHandler = class _MessageHandler {
+var MessageHandler = class {
   constructor(iframeSrc, iframe, callbacks) {
-    __publicField(this, "iframeSrc");
-    __publicField(this, "iframe");
-    __publicField(this, "callbacks");
-    __publicField(this, "listener", null);
-    __publicField(this, "readyListener", null);
-    __publicField(this, "completionHandled", false);
     this.iframeSrc = iframeSrc;
     this.iframe = iframe;
     this.callbacks = callbacks;
+    this.listener = null;
+    this.readyListener = null;
+    this.completionHandled = false;
   }
   /**
-  * Start listening for postMessage events from the widget iframe.
-  */
+   * Start listening for postMessage events from the widget iframe.
+   */
   listen() {
     const origin = getOrigin(this.iframeSrc);
     this.listener = (e) => {
@@ -612,34 +552,33 @@ var _MessageHandler = class _MessageHandler {
       if (e.source !== this.iframe.contentWindow) return;
       const data = e.data || {};
       const type = data.type;
-      if (type === WIDGET_EVENTS.COMPLETE && this.callbacks.onSuccess) {
+      if (type === WIDGET_EVENTS.COMPLETE) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onSuccess(data.result);
-        setTimeout(() => this.iframe.remove(), 1e3);
-      } else if (type === WIDGET_EVENTS.CANCEL && this.callbacks.onCancel) {
+        this.callbacks.onSuccess?.(data.result);
+      } else if (type === WIDGET_EVENTS.CANCEL) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onCancel();
-        setTimeout(() => this.iframe.remove(), 500);
-      } else if (type === WIDGET_EVENTS.ERROR && this.callbacks.onError) {
+        this.callbacks.onCancel?.();
+      } else if (type === WIDGET_EVENTS.ERROR) {
         if (this.completionHandled) return;
         this.completionHandled = true;
-        this.callbacks.onError(data.error || "Unknown error");
-        setTimeout(() => this.iframe.remove(), 500);
-      } else if (type === WIDGET_EVENTS.READY && this.callbacks.onReady) {
-        this.callbacks.onReady();
+        this.callbacks.onError?.(data.error || "Unknown error");
+      } else if (type === WIDGET_EVENTS.READY) {
+        this.callbacks.onReady?.();
       }
     };
     window.addEventListener("message", this.listener);
   }
   /**
-  * Listen for the first READY event, then call the callback once.
-  */
+   * Listen for the first READY event, then call the callback once.
+   */
   onReadyOnce(callback) {
     const origin = getOrigin(this.iframeSrc);
     this.readyListener = (e) => {
-      if (e.origin !== origin || e.data?.type !== WIDGET_EVENTS.READY) return;
+      if (e.origin !== origin || e.source !== this.iframe.contentWindow || e.data?.type !== WIDGET_EVENTS.READY) {
+        return;
+      }
       window.removeEventListener("message", this.readyListener);
       this.readyListener = null;
       callback();
@@ -657,8 +596,6 @@ var _MessageHandler = class _MessageHandler {
     }
   }
 };
-__name(_MessageHandler, "MessageHandler");
-var MessageHandler = _MessageHandler;
 
 // src/browser/viewport.ts
 function getVV() {
@@ -670,14 +607,8 @@ function getVV() {
       offsetLeft: window.visualViewport.offsetLeft || 0
     };
   }
-  return {
-    width: window.innerWidth,
-    height: window.innerHeight,
-    offsetTop: 0,
-    offsetLeft: 0
-  };
+  return { width: window.innerWidth, height: window.innerHeight, offsetTop: 0, offsetLeft: 0 };
 }
-__name(getVV, "getVV");
 function ensureViewportMeta() {
   try {
     const meta = document.querySelector('meta[name="viewport"]');
@@ -695,42 +626,31 @@ function ensureViewportMeta() {
   } catch {
   }
 }
-__name(ensureViewportMeta, "ensureViewportMeta");
 function setupViewportSizing(overlay, iframe) {
   ensureViewportMeta();
   let baselineHeight = 0;
   let desktop = isDesktop();
   let rafId = null;
-  const initBaseline = /* @__PURE__ */ __name(() => {
+  const initBaseline = () => {
     const vv = getVV();
     baselineHeight = window.innerHeight || vv.height || document.documentElement.clientHeight || 0;
     desktop = isDesktop();
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
-  }, "initBaseline");
-  const applySize = /* @__PURE__ */ __name(() => {
+  };
+  const applySize = () => {
     try {
       const vv = getVV();
       const inner = window.innerHeight || vv.height;
       const kbThreshold = desktop ? 200 : 150;
       const isKeyboard = inner - vv.height > kbThreshold;
       const height = isKeyboard ? vv.height : baselineHeight || inner;
-      const dims = desktop ? {
-        top: "0",
-        left: "0",
-        width: window.innerWidth + "px",
-        height: window.innerHeight + "px"
-      } : {
-        top: vv.offsetTop + "px",
-        left: vv.offsetLeft + "px",
-        width: vv.width + "px",
-        height: height + "px"
-      };
+      const dims = desktop ? { top: "0", left: "0", width: window.innerWidth + "px", height: window.innerHeight + "px" } : { top: vv.offsetTop + "px", left: vv.offsetLeft + "px", width: vv.width + "px", height: height + "px" };
       if (overlay) setStyles(overlay, dims);
       if (iframe) setStyles(iframe, dims);
     } catch {
     }
-  }, "applySize");
+  };
   let prevW = window.innerWidth;
   let prevH = window.innerHeight;
   let prevX = 0;
@@ -739,7 +659,7 @@ function setupViewportSizing(overlay, iframe) {
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
   }, desktop ? 50 : 150);
-  const handleResize = /* @__PURE__ */ __name(() => {
+  const handleResize = () => {
     const vv = getVV();
     const w = vv.width;
     const h = vv.height;
@@ -758,12 +678,12 @@ function setupViewportSizing(overlay, iframe) {
     } else {
       debouncedApply();
     }
-  }, "handleResize");
-  const handleOrientation = /* @__PURE__ */ __name(() => {
+  };
+  const handleOrientation = () => {
     initBaseline();
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
-  }, "handleOrientation");
+  };
   initBaseline();
   applySize();
   window.addEventListener("resize", handleResize);
@@ -785,26 +705,58 @@ function setupViewportSizing(overlay, iframe) {
     }
   };
 }
-__name(setupViewportSizing, "setupViewportSizing");
 
 // src/browser/index.ts
-var _FlonkKYC = class _FlonkKYC {
+var FALLBACK_PRIMARY = "#15BA68";
+var EARLY_COLOR_BUDGET_MS = 800;
+var primaryFrom = (tokens) => tokens?.colors?.primary?.cannabis || FALLBACK_PRIMARY;
+async function showLoaderWithEarlyColor(tokensPromise, lang) {
+  const earlyTokens = await Promise.race([
+    tokensPromise,
+    new Promise((resolve) => setTimeout(() => resolve(null), EARLY_COLOR_BUDGET_MS))
+  ]);
+  const primaryColor = primaryFrom(earlyTokens);
+  const loader = new Loader();
+  loader.show(primaryColor, lang);
+  return { loader, primaryColor };
+}
+var FlonkKYC = class {
   constructor(options = {}) {
-    __publicField(this, "widgetUrl");
-    __publicField(this, "apiBase");
     this.widgetUrl = (options.widgetUrl || DEFAULT_WIDGET_URL).replace(/\/$/, "");
     this.apiBase = (options.apiBase || DEFAULT_API_BASE).replace(/\/$/, "");
   }
+  /**
+   * Warm the project's branding (colors) ahead of time so the widget paints the
+   * brand color on the first frame, with no branding round-trip at click time.
+   *
+   * Call it early — on page mount, route enter, or hover of the "verify" button
+   * — well before `init()`. The result is cached (module-level, 5-min TTL) and
+   * every subsequent `init()`/`open()` for the same key reads from it. Safe to
+   * call repeatedly; concurrent calls dedupe. Never throws.
+   *
+   * @example
+   * // in a layout effect, long before the user clicks "Verify"
+   * FlonkKYC.preloadBranding({ publishableKey: 'pk_live_...' });
+   */
+  static preloadBranding(opts) {
+    const apiBase = (opts.apiBase || DEFAULT_API_BASE).replace(/\/$/, "");
+    return preloadDesignTokens(apiBase, {
+      pk: opts.publishableKey,
+      sessionId: opts.sessionId
+    }).then(() => void 0);
+  }
   // ── Public API ───────────────────────────────────────
   /**
-  * Open the KYC verification widget.
-  *
-  * Flows (pick one):
-  *  1. `{ serverUrl, publishableKey }` — auto-create session via your backend (recommended).
-  *     `publishableKey` enables instant branded loader (~200-500ms faster).
-  *  2. `{ sessionId, embedToken }` — server-to-server with pre-created session
-  *  3. `{ publishableKey }` — client-side only (legacy)
-  */
+   * Open the KYC verification widget.
+   *
+   * Flows (pick one; add `publishableKey` to any for an instant branded loader):
+   *  1. `{ serverUrl }` — SDK auto-creates the session via your backend (recommended).
+   *  2. `{ sessionId, embedToken }` — you created the session; pass its credentials.
+   *  3. `{ sessionId }` — **deprecated**: exchanges the sessionId for an embedToken
+   *     via an extra round-trip. Prefer flow 2 by returning `embedToken` from your
+   *     backend alongside `sessionId`.
+   *  4. `{ publishableKey }` — client-only; SDK mints a short-lived widget token.
+   */
   async init(config) {
     if (!config) throw new FlonkValidationError("config is required");
     if (config.serverUrl) {
@@ -818,18 +770,17 @@ var _FlonkKYC = class _FlonkKYC {
     }
     const pk = config.publishableKey;
     if (!pk || !/^pk_/.test(pk)) {
-      throw new FlonkValidationError("Provide one of: serverUrl, sessionId + embedToken, or publishableKey (pk_*)");
+      throw new FlonkValidationError(
+        "Provide one of: serverUrl, sessionId + embedToken, or publishableKey (pk_*)"
+      );
     }
     return this.initWithPublishableKey(config);
   }
   /**
-  * Preview mode — no API calls, mock data.
-  */
+   * Preview mode — no API calls, mock data.
+   */
   preview(config = {}) {
-    const colors = config.colors || {
-      primaryColor: "#3b82f6",
-      secondaryColor: "#93c5fd"
-    };
+    const colors = config.colors || { primaryColor: "#3b82f6", secondaryColor: "#93c5fd" };
     return this.openWidget({
       mode: "preview",
       isPreview: "true",
@@ -847,20 +798,17 @@ var _FlonkKYC = class _FlonkKYC {
     });
   }
   /**
-  * Embed inline preview in a container (for dashboards).
-  */
+   * Embed inline preview in a container (for dashboards).
+   */
   embed(config) {
     if (!config?.container) throw new FlonkValidationError("container is required");
     const container = typeof config.container === "string" ? document.querySelector(config.container) : config.container;
     if (!container) throw new FlonkValidationError("Container element not found");
-    let colors = config.colors || {
-      primaryColor: "#3b82f6",
-      secondaryColor: "#93c5fd"
-    };
+    let colors = config.colors || { primaryColor: "#3b82f6", secondaryColor: "#93c5fd" };
     let device = config.device || "mobile";
     let scale = config.scale ?? 1;
     const lang = config.lang || "de";
-    const buildSrc = /* @__PURE__ */ __name((c, d) => {
+    const buildSrc = (c, d) => {
       const p = new URLSearchParams({
         mode: "preview",
         isPreview: "true",
@@ -871,11 +819,11 @@ var _FlonkKYC = class _FlonkKYC {
         lang
       });
       return `${this.widgetUrl}/?${p.toString()}`;
-    }, "buildSrc");
-    const applyScale = /* @__PURE__ */ __name(() => {
+    };
+    const applyScale = () => {
       iframe.style.transform = scale !== 1 ? `scale(${scale})` : "";
       iframe.style.transformOrigin = scale !== 1 ? "top left" : "";
-    }, "applyScale");
+    };
     const iframe = document.createElement("iframe");
     iframe.style.cssText = "border:none;width:100%;height:100%;display:block";
     iframe.src = buildSrc(colors, device);
@@ -887,10 +835,7 @@ var _FlonkKYC = class _FlonkKYC {
     return {
       iframe,
       setColors(newColors) {
-        colors = {
-          ...colors,
-          ...newColors
-        };
+        colors = { ...colors, ...newColors };
         if (newColors.primaryColor && !newColors.secondaryColor) {
           colors.secondaryColor = generateSecondaryColor(newColors.primaryColor);
         }
@@ -900,42 +845,34 @@ var _FlonkKYC = class _FlonkKYC {
         device = d;
         iframe.src = buildSrc(colors, device);
       },
-      getColors: /* @__PURE__ */ __name(() => ({
-        ...colors
-      }), "getColors"),
-      destroy: /* @__PURE__ */ __name(() => iframe.remove(), "destroy")
+      getColors: () => ({ ...colors }),
+      destroy: () => iframe.remove()
     };
   }
   // ── Private flows ────────────────────────────────────
   /**
-  * Flow 1: serverUrl — POST to client's backend, get sessionId + embedToken.
-  *
-  * When `publishableKey` is provided, design tokens are fetched in parallel
-  * with the session creation request. This shows the branded loader ~200-500ms
-  * faster because we don't have to wait for the session to be created first.
-  */
+   * Flow 1: serverUrl — POST to client's backend, get sessionId + embedToken.
+   *
+   * When `publishableKey` is provided, design tokens are fetched in parallel
+   * with the session creation request. This shows the branded loader ~200-500ms
+   * faster because we don't have to wait for the session to be created first.
+   */
   async initWithServerUrl(config) {
     const pk = config.publishableKey;
-    const designTokensPromise = pk ? fetchDesignTokens(this.apiBase, {
-      pk
-    }) : Promise.resolve(null);
-    const sessionPromise = fetchSessionFromServer(config.serverUrl, config.clientMetadata, config.requestHeaders);
-    const earlyTokens = await Promise.race([
-      designTokensPromise,
-      new Promise((resolve) => setTimeout(() => resolve(null), 800))
-    ]);
-    const primaryColor = earlyTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const designTokensPromise = pk ? fetchDesignTokens(this.apiBase, { pk }) : Promise.resolve(null);
+    const sessionPromise = fetchSessionFromServer(
+      config.serverUrl,
+      config.clientMetadata,
+      config.requestHeaders
+    );
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
       const [{ sessionId, embedToken }, designTokens] = await Promise.all([
         sessionPromise,
         designTokensPromise
       ]);
-      const finalTokens = designTokens ?? await fetchDesignTokens(this.apiBase, {
-        sessionId
-      });
-      const finalColor = finalTokens?.colors?.primary?.cannabis || "#15BA68";
+      const finalTokens = designTokens ?? await fetchDesignTokens(this.apiBase, { sessionId });
+      const finalColor = primaryFrom(finalTokens);
       if (finalColor !== primaryColor) loader.updateColor(finalColor);
       const sessionData = await fetchPublicSession(this.apiBase, sessionId, embedToken);
       const session = {
@@ -959,17 +896,24 @@ var _FlonkKYC = class _FlonkKYC {
     }
   }
   /**
-  * Flow 2: sessionId + embedToken — fetch session data, open widget.
-  */
+   * Flow 2: sessionId + embedToken — fetch session data, open widget.
+   */
   async initWithEmbedToken(config) {
-    const designTokens = await fetchDesignTokens(this.apiBase, {
-      sessionId: config.sessionId
-    });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const pk = config.publishableKey;
+    const designTokensPromise = pk ? fetchDesignTokens(this.apiBase, { pk }) : fetchDesignTokens(this.apiBase, { sessionId: config.sessionId });
+    const sessionPromise = fetchPublicSession(
+      this.apiBase,
+      config.sessionId,
+      config.embedToken
+    );
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const sessionData = await fetchPublicSession(this.apiBase, config.sessionId, config.embedToken);
+      const [sessionData, designTokens] = await Promise.all([
+        sessionPromise,
+        designTokensPromise
+      ]);
+      const finalColor = primaryFrom(designTokens);
+      if (finalColor !== primaryColor) loader.updateColor(finalColor);
       const session = {
         id: sessionData.id,
         allowManualUpload: sessionData.allowManualUpload ?? config.allowManualUpload ?? true,
@@ -991,17 +935,23 @@ var _FlonkKYC = class _FlonkKYC {
     }
   }
   /**
-  * Flow 3: sessionId only — exchange for embedToken, then init.
-  */
+   * Flow 3: sessionId only — exchange for embedToken, then init.
+   *
+   * @deprecated Prefer flow 2 (`sessionId` + `embedToken`). Return the
+   * `embedToken` from your backend together with the `sessionId` to skip this
+   * extra token-exchange round-trip.
+   */
   async initWithSession(config) {
-    const designTokens = await fetchDesignTokens(this.apiBase, {
+    const designTokensPromise = fetchDesignTokens(this.apiBase, {
       sessionId: config.sessionId
     });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const exchangePromise = exchangeSessionForToken(this.apiBase, config.sessionId);
+    const { loader } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const { embedToken, session } = await exchangeSessionForToken(this.apiBase, config.sessionId);
+      const [{ embedToken, session }, designTokens] = await Promise.all([
+        exchangePromise,
+        designTokensPromise
+      ]);
       return this.buildWidget(embedToken, session, config, loader, designTokens);
     } catch (err) {
       const msg = err.message || "Failed to initialize verification";
@@ -1011,18 +961,15 @@ var _FlonkKYC = class _FlonkKYC {
     }
   }
   /**
-  * Flow 4: publishableKey — fetch widget token, open widget.
-  */
+   * Flow 4: publishableKey — fetch widget token, open widget.
+   */
   async initWithPublishableKey(config) {
     const pk = config.publishableKey;
-    const designTokens = await fetchDesignTokens(this.apiBase, {
-      pk
-    });
-    const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
-    const loader = new Loader();
-    loader.show(primaryColor, config.lang);
+    const designTokensPromise = fetchDesignTokens(this.apiBase, { pk });
+    const widgetTokenPromise = fetchWidgetToken(pk, this.apiBase);
+    const { loader, primaryColor } = await showLoaderWithEarlyColor(designTokensPromise, config.lang);
     try {
-      const data = await fetchWidgetToken(pk, this.apiBase);
+      const data = await widgetTokenPromise;
       const params = {
         mode: "embedded",
         publishableKey: pk,
@@ -1077,7 +1024,7 @@ var _FlonkKYC = class _FlonkKYC {
     if (config.lang) params.lang = config.lang;
     if (config.overlayColor) params.overlayColor = config.overlayColor;
     return this.openWidget(params, {
-      primaryColor: designTokens?.colors?.primary?.cannabis || "#15BA68",
+      primaryColor: primaryFrom(designTokens),
       lang: config.lang,
       loader,
       onSuccess: config.onSuccess,
@@ -1088,10 +1035,12 @@ var _FlonkKYC = class _FlonkKYC {
     });
   }
   /**
-  * Core: create iframe, attach listeners, return WidgetInstance.
-  */
+   * Core: create iframe, attach listeners, return WidgetInstance.
+   */
   openWidget(params, opts) {
-    const filtered = Object.fromEntries(Object.entries(params).filter(([, v]) => v != null));
+    const filtered = Object.fromEntries(
+      Object.entries(params).filter(([, v]) => v != null)
+    );
     const search = new URLSearchParams(filtered);
     const src = `${this.widgetUrl}/?${search.toString()}`;
     const iframe = createIframe(src);
@@ -1105,7 +1054,7 @@ var _FlonkKYC = class _FlonkKYC {
     mountTarget.appendChild(iframe);
     const cleanupViewport = setupViewportSizing(loader.element, iframe);
     let cleaned = false;
-    const cleanupAll = /* @__PURE__ */ __name(() => {
+    const cleanupAll = () => {
       if (cleaned) return;
       cleaned = true;
       try {
@@ -1115,26 +1064,28 @@ var _FlonkKYC = class _FlonkKYC {
         if (iframe.parentNode) iframe.remove();
       } catch {
       }
-    }, "cleanupAll");
-    const afterCleanup = /* @__PURE__ */ __name((delayMs) => () => setTimeout(cleanupAll, delayMs), "afterCleanup");
+    };
+    const afterCleanup = (delayMs) => setTimeout(cleanupAll, delayMs);
     const handler = new MessageHandler(src, iframe, {
-      onSuccess: opts.onSuccess ? (r) => {
+      onSuccess: (r) => {
         opts.onSuccess?.(r);
-        afterCleanup(1e3)();
-      } : void 0,
-      onError: opts.onError ? (e) => {
+        afterCleanup(1e3);
+      },
+      onError: (e) => {
         opts.onError?.(e);
-        afterCleanup(500)();
-      } : void 0,
-      onCancel: opts.onCancel ? () => {
+        afterCleanup(500);
+      },
+      onCancel: () => {
         opts.onCancel?.();
-        afterCleanup(500)();
-      } : void 0,
+        afterCleanup(500);
+      },
       onReady: opts.onReady
     });
     handler.listen();
     handler.onReadyOnce(() => {
-      transitionLoaderToIframe(loader.element, iframe, () => loader.destroy());
+      if (loader.element) {
+        transitionLoaderToIframe(loader.element, iframe, () => loader.destroy());
+      }
     });
     return {
       iframe,
@@ -1142,31 +1093,34 @@ var _FlonkKYC = class _FlonkKYC {
     };
   }
 };
-__name(_FlonkKYC, "FlonkKYC");
-__publicField(_FlonkKYC, "version", SDK_VERSION);
-var FlonkKYC = _FlonkKYC;
-function FlonkKYCWidget({ widgetUrl, apiBase, autoOpen = true, publishableKey, serverUrl, sessionId, embedToken, clientMetadata, lang, overlayColor, allowManualUpload, requestHeaders, onSuccess, onError, onCancel, onReady }) {
+FlonkKYC.version = SDK_VERSION;
+function FlonkKYCWidget({
+  widgetUrl,
+  apiBase,
+  autoOpen = true,
+  publishableKey,
+  serverUrl,
+  sessionId,
+  embedToken,
+  clientMetadata,
+  lang,
+  overlayColor,
+  allowManualUpload,
+  requestHeaders,
+  onSuccess,
+  onError,
+  onCancel,
+  onReady
+}) {
   const mountRef = useRef(null);
   const widgetRef = useRef(null);
-  const callbacksRef = useRef({
-    onSuccess,
-    onError,
-    onCancel,
-    onReady
-  });
-  callbacksRef.current = {
-    onSuccess,
-    onError,
-    onCancel,
-    onReady
-  };
-  const sdk = useMemo(() => new FlonkKYC({
-    widgetUrl,
-    apiBase
-  }), [
-    widgetUrl,
-    apiBase
-  ]);
+  const callbacksRef = useRef({ onSuccess, onError, onCancel, onReady });
+  callbacksRef.current = { onSuccess, onError, onCancel, onReady };
+  const sdk = useMemo(() => new FlonkKYC({ widgetUrl, apiBase }), [widgetUrl, apiBase]);
+  useEffect(() => {
+    if (!publishableKey && !sessionId) return;
+    void FlonkKYC.preloadBranding({ publishableKey, sessionId, apiBase });
+  }, [publishableKey, sessionId, apiBase]);
   const generationRef = useRef(0);
   useEffect(() => {
     if (!autoOpen) return;
@@ -1182,10 +1136,10 @@ function FlonkKYCWidget({ widgetUrl, apiBase, autoOpen = true, publishableKey, s
       allowManualUpload,
       requestHeaders,
       mount: mountRef.current || void 0,
-      onSuccess: /* @__PURE__ */ __name((r) => callbacksRef.current.onSuccess?.(r), "onSuccess"),
-      onError: /* @__PURE__ */ __name((e) => callbacksRef.current.onError?.(e), "onError"),
-      onCancel: /* @__PURE__ */ __name(() => callbacksRef.current.onCancel?.(), "onCancel"),
-      onReady: /* @__PURE__ */ __name(() => callbacksRef.current.onReady?.(), "onReady")
+      onSuccess: (r) => callbacksRef.current.onSuccess?.(r),
+      onError: (e) => callbacksRef.current.onError?.(e),
+      onCancel: () => callbacksRef.current.onCancel?.(),
+      onReady: () => callbacksRef.current.onReady?.()
     };
     const timer = setTimeout(() => {
       if (generationRef.current !== thisGeneration) return;
@@ -1206,19 +1160,20 @@ function FlonkKYCWidget({ widgetUrl, apiBase, autoOpen = true, publishableKey, s
       widgetRef.current?.destroy();
       widgetRef.current = null;
     };
-  }, [
-    sdk,
-    publishableKey,
-    serverUrl,
-    sessionId,
-    autoOpen
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: mountRef
-  });
+  }, [sdk, publishableKey, serverUrl, sessionId, embedToken, lang, overlayColor, allowManualUpload, autoOpen]);
+  return /* @__PURE__ */ jsx("div", { ref: mountRef });
+}
+function FlonkKYCBrandingPreloader({
+  publishableKey,
+  sessionId,
+  apiBase
+}) {
+  useEffect(() => {
+    void FlonkKYC.preloadBranding({ publishableKey, sessionId, apiBase });
+  }, [publishableKey, sessionId, apiBase]);
+  return null;
 }
-__name(FlonkKYCWidget, "FlonkKYCWidget");
 
-export { FlonkError, FlonkKYC, FlonkKYCWidget, FlonkValidationError };
+export { FlonkError, FlonkKYC, FlonkKYCBrandingPreloader, FlonkKYCWidget, FlonkValidationError };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map