@flonkid/kyc 1.5.1 → 1.6.1

package/dist/index.js

@@ -1,8 +1,12 @@
 import { useRef, useMemo, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+
+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);
 
 // src/shared/constants.ts
-var SDK_VERSION = "1.5.1";
+var SDK_VERSION = "1.6.0";
 var DEFAULT_WIDGET_URL = "https://widget.flonk.id";
 var DEFAULT_API_BASE = "https://api.flonk.id/v1";
 var WIDGET_EVENTS = {
@@ -13,20 +17,25 @@ var WIDGET_EVENTS = {
 };
 
 // src/shared/errors.ts
-var FlonkError = class extends Error {
+var _FlonkError = class _FlonkError extends Error {
   constructor(message, code, statusCode) {
     super(message);
-    this.code = code;
-    this.statusCode = statusCode;
+    __publicField(this, "code");
+    __publicField(this, "statusCode");
+    this.code = code, this.statusCode = statusCode;
     this.name = "FlonkError";
   }
 };
-var FlonkValidationError = class extends FlonkError {
+__name(_FlonkError, "FlonkError");
+var FlonkError = _FlonkError;
+var _FlonkValidationError = class _FlonkValidationError 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) {
@@ -36,12 +45,15 @@ function getOrigin(url) {
     return window.location.origin;
   }
 }
+__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);
@@ -50,13 +62,15 @@ 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("#", "");
@@ -64,18 +78,21 @@ 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 = (n) => {
+    const toHex = /* @__PURE__ */ __name((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");
 async function fetchWidgetToken(pk, apiBase) {
   const res = await fetch(`${apiBase}/public/widget-token`, {
-    headers: { "x-kyc-pk": pk },
+    headers: {
+      "x-kyc-pk": pk
+    },
     credentials: "include"
   });
   if (!res.ok) {
@@ -89,6 +106,7 @@ async function fetchWidgetToken(pk, apiBase) {
   }
   return res.json();
 }
+__name(fetchWidgetToken, "fetchWidgetToken");
 async function fetchDesignTokens(apiBase, opts) {
   const params = [];
   if (opts.sessionId) params.push(`sessionId=${encodeURIComponent(opts.sessionId)}`);
@@ -96,7 +114,9 @@ async function fetchDesignTokens(apiBase, opts) {
   const url = `${apiBase}/public/design-tokens${params.length ? "?" + params.join("&") : ""}`;
   try {
     const res = await fetch(url, {
-      headers: opts.pk ? { "x-kyc-pk": opts.pk } : {},
+      headers: opts.pk ? {
+        "x-kyc-pk": opts.pk
+      } : {},
       credentials: "omit"
     });
     return res.ok ? res.json() : null;
@@ -104,28 +124,33 @@ async function fetchDesignTokens(apiBase, opts) {
     return null;
   }
 }
+__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, {
     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})`;
@@ -139,6 +164,7 @@ 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}`, {
     headers: {
@@ -157,10 +183,13 @@ 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`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" }
+    headers: {
+      "Content-Type": "application/json"
+    }
   });
   if (!res.ok) {
     let message = `Token exchange failed (${res.status})`;
@@ -173,36 +202,33 @@ 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");
@@ -211,21 +237,24 @@ 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, {
@@ -243,12 +272,28 @@ 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)}}
@@ -256,11 +301,11 @@ var KEYFRAMES = `
 @keyframes kycprogress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(250%)}}
 `.trim();
 var styleInjected = false;
-var Loader = class {
+var _Loader = class _Loader {
   constructor() {
-    this.overlay = null;
-    this.cleanup = null;
-    this.origBodyStyles = null;
+    __publicField(this, "overlay", null);
+    __publicField(this, "cleanup", null);
+    __publicField(this, "origBodyStyles", null);
   }
   show(primaryColor, lang) {
     const color = primaryColor || "#15BA68";
@@ -339,23 +384,64 @@ var Loader = class {
       "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;
@@ -363,7 +449,10 @@ var Loader = class {
       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;
       }
@@ -373,7 +462,11 @@ var Loader = class {
     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;
@@ -381,6 +474,18 @@ var Loader = class {
   get element() {
     return this.overlay;
   }
+  updateColor(primaryColor) {
+    if (!this.overlay) return;
+    const color = primaryColor || "#15BA68";
+    const bgCircle = this.overlay.querySelector("circle:first-child");
+    const fgCircle = this.overlay.querySelector("circle:last-child");
+    const bar = this.overlay.querySelector('[style*="kycprogress"]');
+    if (bgCircle) bgCircle.setAttribute("stroke", color + "33");
+    if (fgCircle) fgCircle.setAttribute("stroke", color);
+    if (bar) bar.style.backgroundColor = color;
+    const track = bar?.parentElement;
+    if (track) track.style.backgroundColor = color + "1A";
+  }
   showError(message, lang) {
     if (!this.overlay) return;
     const strings = LOADER_I18N[lang || ""] || LOADER_I18N.en;
@@ -481,20 +586,25 @@ var Loader = class {
     this.cleanup = null;
   }
 };
+__name(_Loader, "Loader");
+var Loader = _Loader;
 
 // src/browser/message-handler.ts
-var MessageHandler = class {
+var _MessageHandler = class _MessageHandler {
   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) => {
@@ -524,8 +634,8 @@ var MessageHandler = class {
     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) => {
@@ -547,6 +657,8 @@ var MessageHandler = class {
     }
   }
 };
+__name(_MessageHandler, "MessageHandler");
+var MessageHandler = _MessageHandler;
 
 // src/browser/viewport.ts
 function getVV() {
@@ -558,8 +670,14 @@ 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"]');
@@ -577,31 +695,42 @@ function ensureViewportMeta() {
   } catch {
   }
 }
+__name(ensureViewportMeta, "ensureViewportMeta");
 function setupViewportSizing(overlay, iframe) {
   ensureViewportMeta();
   let baselineHeight = 0;
   let desktop = isDesktop();
   let rafId = null;
-  const initBaseline = () => {
+  const initBaseline = /* @__PURE__ */ __name(() => {
     const vv = getVV();
     baselineHeight = window.innerHeight || vv.height || document.documentElement.clientHeight || 0;
     desktop = isDesktop();
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
-  };
-  const applySize = () => {
+  }, "initBaseline");
+  const applySize = /* @__PURE__ */ __name(() => {
     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;
@@ -610,7 +739,7 @@ function setupViewportSizing(overlay, iframe) {
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
   }, desktop ? 50 : 150);
-  const handleResize = () => {
+  const handleResize = /* @__PURE__ */ __name(() => {
     const vv = getVV();
     const w = vv.width;
     const h = vv.height;
@@ -629,12 +758,12 @@ function setupViewportSizing(overlay, iframe) {
     } else {
       debouncedApply();
     }
-  };
-  const handleOrientation = () => {
+  }, "handleResize");
+  const handleOrientation = /* @__PURE__ */ __name(() => {
     initBaseline();
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(applySize);
-  };
+  }, "handleOrientation");
   initBaseline();
   applySize();
   window.addEventListener("resize", handleResize);
@@ -656,22 +785,26 @@ function setupViewportSizing(overlay, iframe) {
     }
   };
 }
+__name(setupViewportSizing, "setupViewportSizing");
 
 // src/browser/index.ts
-var FlonkKYC = class {
+var _FlonkKYC = class _FlonkKYC {
   constructor(options = {}) {
+    __publicField(this, "widgetUrl");
+    __publicField(this, "apiBase");
     this.widgetUrl = (options.widgetUrl || DEFAULT_WIDGET_URL).replace(/\/$/, "");
     this.apiBase = (options.apiBase || DEFAULT_API_BASE).replace(/\/$/, "");
   }
   // ── Public API ───────────────────────────────────────
   /**
-   * Open the KYC verification widget.
-   *
-   * Flows (pick one):
-   *  1. `{ serverUrl }` — auto-create session via your backend (recommended)
-   *  2. `{ sessionId, embedToken }` — server-to-server with pre-created session
-   *  3. `{ publishableKey }` — client-side only
-   */
+  * 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)
+  */
   async init(config) {
     if (!config) throw new FlonkValidationError("config is required");
     if (config.serverUrl) {
@@ -685,17 +818,18 @@ var FlonkKYC = class {
     }
     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",
@@ -713,17 +847,20 @@ var FlonkKYC = class {
     });
   }
   /**
-   * 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 = (c, d) => {
+    const buildSrc = /* @__PURE__ */ __name((c, d) => {
       const p = new URLSearchParams({
         mode: "preview",
         isPreview: "true",
@@ -734,11 +871,11 @@ var FlonkKYC = class {
         lang
       });
       return `${this.widgetUrl}/?${p.toString()}`;
-    };
-    const applyScale = () => {
+    }, "buildSrc");
+    const applyScale = /* @__PURE__ */ __name(() => {
       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);
@@ -750,7 +887,10 @@ var FlonkKYC = class {
     return {
       iframe,
       setColors(newColors) {
-        colors = { ...colors, ...newColors };
+        colors = {
+          ...colors,
+          ...newColors
+        };
         if (newColors.primaryColor && !newColors.secondaryColor) {
           colors.secondaryColor = generateSecondaryColor(newColors.primaryColor);
         }
@@ -760,39 +900,67 @@ var FlonkKYC = class {
         device = d;
         iframe.src = buildSrc(colors, device);
       },
-      getColors: () => ({ ...colors }),
-      destroy: () => iframe.remove()
+      getColors: /* @__PURE__ */ __name(() => ({
+        ...colors
+      }), "getColors"),
+      destroy: /* @__PURE__ */ __name(() => iframe.remove(), "destroy")
     };
   }
   // ── Private flows ────────────────────────────────────
   /**
-   * Flow 1: serverUrl — POST to client's backend, get sessionId + embedToken.
-   */
-  /**
-   * POST to serverUrl to get sessionId + embedToken, then same path as embed token flow.
-   * No loader here — avoids wrong brand color before design tokens exist; initWithEmbedToken
-   * fetches tokens first, then shows loader with project primary color.
-   */
+  * 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);
     try {
-      const { sessionId, embedToken } = await fetchSessionFromServer(
-        config.serverUrl,
-        config.clientMetadata,
-        config.requestHeaders
-      );
-      return this.initWithEmbedToken({ ...config, sessionId, embedToken });
+      const [{ sessionId, embedToken }, designTokens] = await Promise.all([
+        sessionPromise,
+        designTokensPromise
+      ]);
+      const finalTokens = designTokens ?? await fetchDesignTokens(this.apiBase, {
+        sessionId
+      });
+      const finalColor = finalTokens?.colors?.primary?.cannabis || "#15BA68";
+      if (finalColor !== primaryColor) loader.updateColor(finalColor);
+      const sessionData = await fetchPublicSession(this.apiBase, sessionId, embedToken);
+      const session = {
+        id: sessionData.id,
+        allowManualUpload: sessionData.allowManualUpload ?? config.allowManualUpload ?? true,
+        clientMetadata: sessionData.clientMetadata || config.clientMetadata,
+        qrCodeUrl: sessionData.qrCodeUrl,
+        testMode: sessionData.testMode || false,
+        poaEnabled: sessionData.poaEnabled || false,
+        poaRequired: sessionData.poaRequired || false,
+        mlAutoCaptureEnabled: sessionData.mlAutoCaptureEnabled || false,
+        mlCropEnabled: sessionData.mlCropEnabled ?? true,
+        mlVerifyEnabled: sessionData.mlVerifyEnabled || false
+      };
+      return this.buildWidget(embedToken, session, config, loader, finalTokens);
     } catch (err) {
       const msg = err.message || "Failed to create session";
-      const loader = new Loader();
-      loader.show("#15BA68", config.lang);
       loader.showError(msg, config.lang);
       config.onError?.(msg);
       throw err;
     }
   }
   /**
-   * 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
@@ -801,11 +969,7 @@ var FlonkKYC = class {
     const loader = new Loader();
     loader.show(primaryColor, config.lang);
     try {
-      const sessionData = await fetchPublicSession(
-        this.apiBase,
-        config.sessionId,
-        config.embedToken
-      );
+      const sessionData = await fetchPublicSession(this.apiBase, config.sessionId, config.embedToken);
       const session = {
         id: sessionData.id,
         allowManualUpload: sessionData.allowManualUpload ?? config.allowManualUpload ?? true,
@@ -813,7 +977,10 @@ var FlonkKYC = class {
         qrCodeUrl: sessionData.qrCodeUrl,
         testMode: sessionData.testMode || false,
         poaEnabled: sessionData.poaEnabled || false,
-        poaRequired: sessionData.poaRequired || false
+        poaRequired: sessionData.poaRequired || false,
+        mlAutoCaptureEnabled: sessionData.mlAutoCaptureEnabled || false,
+        mlCropEnabled: sessionData.mlCropEnabled ?? true,
+        mlVerifyEnabled: sessionData.mlVerifyEnabled || false
       };
       return this.buildWidget(config.embedToken, session, config, loader, designTokens);
     } catch (err) {
@@ -824,8 +991,8 @@ var FlonkKYC = class {
     }
   }
   /**
-   * Flow 3: sessionId only — exchange for embedToken, then init.
-   */
+  * Flow 3: sessionId only — exchange for embedToken, then init.
+  */
   async initWithSession(config) {
     const designTokens = await fetchDesignTokens(this.apiBase, {
       sessionId: config.sessionId
@@ -834,10 +1001,7 @@ var FlonkKYC = class {
     const loader = new Loader();
     loader.show(primaryColor, config.lang);
     try {
-      const { embedToken, session } = await exchangeSessionForToken(
-        this.apiBase,
-        config.sessionId
-      );
+      const { embedToken, session } = await exchangeSessionForToken(this.apiBase, config.sessionId);
       return this.buildWidget(embedToken, session, config, loader, designTokens);
     } catch (err) {
       const msg = err.message || "Failed to initialize verification";
@@ -847,11 +1011,13 @@ var FlonkKYC = class {
     }
   }
   /**
-   * 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 designTokens = await fetchDesignTokens(this.apiBase, {
+      pk
+    });
     const primaryColor = designTokens?.colors?.primary?.cannabis || "#15BA68";
     const loader = new Loader();
     loader.show(primaryColor, config.lang);
@@ -896,6 +1062,9 @@ var FlonkKYC = class {
     if (session.testMode) params.testMode = "true";
     if (session.poaEnabled) params.poaEnabled = "true";
     if (session.poaRequired) params.poaRequired = "true";
+    if (session.mlAutoCaptureEnabled) params.mlAutoCaptureEnabled = "true";
+    if (session.mlCropEnabled !== false) params.mlCropEnabled = "true";
+    if (session.mlVerifyEnabled) params.mlVerifyEnabled = "true";
     if (designTokens?.colors) {
       params.designTokens = JSON.stringify(designTokens);
     }
@@ -919,12 +1088,10 @@ var FlonkKYC = class {
     });
   }
   /**
-   * 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);
@@ -938,7 +1105,7 @@ var FlonkKYC = class {
     mountTarget.appendChild(iframe);
     const cleanupViewport = setupViewportSizing(loader.element, iframe);
     let cleaned = false;
-    const cleanupAll = () => {
+    const cleanupAll = /* @__PURE__ */ __name(() => {
       if (cleaned) return;
       cleaned = true;
       try {
@@ -948,8 +1115,8 @@ var FlonkKYC = class {
         if (iframe.parentNode) iframe.remove();
       } catch {
       }
-    };
-    const afterCleanup = (delayMs) => () => setTimeout(cleanupAll, delayMs);
+    }, "cleanupAll");
+    const afterCleanup = /* @__PURE__ */ __name((delayMs) => () => setTimeout(cleanupAll, delayMs), "afterCleanup");
     const handler = new MessageHandler(src, iframe, {
       onSuccess: opts.onSuccess ? (r) => {
         opts.onSuccess?.(r);
@@ -975,30 +1142,31 @@ var FlonkKYC = class {
     };
   }
 };
-FlonkKYC.version = SDK_VERSION;
-function FlonkKYCWidget({
-  widgetUrl,
-  apiBase,
-  autoOpen = true,
-  publishableKey,
-  serverUrl,
-  sessionId,
-  embedToken,
-  clientMetadata,
-  lang,
-  overlayColor,
-  allowManualUpload,
-  requestHeaders,
-  onSuccess,
-  onError,
-  onCancel,
-  onReady
-}) {
+__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 }) {
   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
+  ]);
   const generationRef = useRef(0);
   useEffect(() => {
     if (!autoOpen) return;
@@ -1014,10 +1182,10 @@ function FlonkKYCWidget({
       allowManualUpload,
       requestHeaders,
       mount: mountRef.current || void 0,
-      onSuccess: (r) => callbacksRef.current.onSuccess?.(r),
-      onError: (e) => callbacksRef.current.onError?.(e),
-      onCancel: () => callbacksRef.current.onCancel?.(),
-      onReady: () => callbacksRef.current.onReady?.()
+      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")
     };
     const timer = setTimeout(() => {
       if (generationRef.current !== thisGeneration) return;
@@ -1038,9 +1206,18 @@ function FlonkKYCWidget({
       widgetRef.current?.destroy();
       widgetRef.current = null;
     };
-  }, [sdk, publishableKey, serverUrl, sessionId, autoOpen]);
-  return /* @__PURE__ */ jsx("div", { ref: mountRef });
+  }, [
+    sdk,
+    publishableKey,
+    serverUrl,
+    sessionId,
+    autoOpen
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: mountRef
+  });
 }
+__name(FlonkKYCWidget, "FlonkKYCWidget");
 
 export { FlonkError, FlonkKYC, FlonkKYCWidget, FlonkValidationError };
 //# sourceMappingURL=index.js.map