@flonkid/kyc 1.4.0

package/dist/index.js

@@ -0,0 +1,993 @@
+import { useRef, useMemo, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/shared/constants.ts
+var SDK_VERSION = "1.4.0";
+var DEFAULT_WIDGET_URL = "https://widget.flonk.id";
+var DEFAULT_API_BASE = "https://api.flonk.id/v1";
+var WIDGET_EVENTS = {
+  READY: "KYC_WIDGET_READY",
+  COMPLETE: "KYC_COMPLETE",
+  CANCEL: "KYC_CANCEL",
+  ERROR: "KYC_ERROR"
+};
+
+// src/shared/errors.ts
+var FlonkError = class extends Error {
+  constructor(message, code, statusCode) {
+    super(message);
+    this.code = code;
+    this.statusCode = statusCode;
+    this.name = "FlonkError";
+  }
+};
+var FlonkValidationError = class extends FlonkError {
+  constructor(message) {
+    super(message, "validation_error", 400);
+    this.name = "FlonkValidationError";
+  }
+};
+
+// src/browser/utils.ts
+function getOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return window.location.origin;
+  }
+}
+function isDesktop() {
+  return window.innerWidth >= 1024 && !("ontouchstart" in window || navigator.maxTouchPoints > 0);
+}
+function setStyles(el, styles) {
+  Object.assign(el.style, styles);
+}
+function createEl(tag, styles, attrs) {
+  const el = document.createElement(tag);
+  if (styles) setStyles(el, styles);
+  if (attrs) {
+    for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  }
+  return el;
+}
+function debounce(fn, ms) {
+  let timer;
+  return ((...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  });
+}
+function generateSecondaryColor(hex) {
+  try {
+    const h = hex.replace("#", "");
+    const r = parseInt(h.substring(0, 2), 16);
+    const g = parseInt(h.substring(2, 4), 16);
+    const b = parseInt(h.substring(4, 6), 16);
+    const f = 0.6;
+    const toHex = (n) => {
+      const s = n.toString(16);
+      return s.length === 1 ? "0" + s : s;
+    };
+    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";
+  }
+}
+async function fetchWidgetToken(pk, apiBase) {
+  const res = await fetch(`${apiBase}/public/widget-token`, {
+    headers: { "x-kyc-pk": pk },
+    credentials: "include"
+  });
+  if (!res.ok) throw new Error(`Widget token request failed: ${res.status}`);
+  return res.json();
+}
+async function fetchDesignTokens(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;
+  }
+}
+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/...')`
+      );
+    }
+  } catch (e) {
+    if (e.message.includes("serverUrl must use HTTPS")) throw e;
+    throw new Error(`Invalid serverUrl: ${url}`);
+  }
+}
+async function fetchSessionFromServer(serverUrl, clientMetadata) {
+  validateServerUrl(serverUrl);
+  const res = await fetch(serverUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ clientMetadata })
+  });
+  if (!res.ok) throw new Error(`Server session request failed: ${res.status}`);
+  return res.json();
+}
+async function fetchPublicSession(apiBase, sessionId, embedToken) {
+  const res = await fetch(`${apiBase}/public/session/${sessionId}`, {
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${embedToken}`
+    }
+  });
+  if (!res.ok) throw new Error(`Failed to fetch session: ${res.status}`);
+  return res.json();
+}
+async function exchangeSessionForToken(apiBase, sessionId) {
+  const res = await fetch(`${apiBase}/public/session/${sessionId}/token`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" }
+  });
+  if (!res.ok) throw new Error(`Token exchange failed: ${res.status}`);
+  return res.json();
+}
+
+// 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"
+    }
+  );
+  try {
+    iframe.style.setProperty("background", "transparent", "important");
+    iframe.style.setProperty("background-color", "transparent", "important");
+    iframe.style.setProperty("color-scheme", "normal", "important");
+  } catch {
+  }
+  return iframe;
+}
+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)
+  );
+  if (maxZ > 9998) {
+    loader.style.zIndex = String(maxZ + 1);
+    iframe.style.zIndex = String(maxZ + 2);
+  }
+}
+function transitionLoaderToIframe(loader, iframe, onDone) {
+  const d = isDesktop();
+  const dur = d ? 300 : 500;
+  setStyles(iframe, { opacity: "0", visibility: "hidden" });
+  const card = loader.querySelector("div");
+  if (card) {
+    setStyles(card, {
+      transform: d ? "translateY(-10px) scale(0.98)" : "translateY(-15px) scale(0.96)",
+      opacity: "0"
+    });
+  }
+  loader.style.opacity = "0";
+  setTimeout(() => {
+    onDone();
+    setStyles(iframe, {
+      transition: d ? "opacity 300ms cubic-bezier(0.4,0,0.2,1),visibility 0ms" : "opacity 400ms ease-out,visibility 0ms",
+      opacity: "1",
+      visibility: "visible"
+    });
+  }, dur);
+}
+
+// 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" }
+};
+var KEYFRAMES = `
+@keyframes kycspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
+@keyframes kycdash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+@keyframes kycprogress{0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(250%)}}
+`.trim();
+var styleInjected = false;
+var Loader = class {
+  constructor() {
+    this.overlay = null;
+    this.cleanup = null;
+    this.origBodyStyles = null;
+  }
+  show(primaryColor, lang) {
+    const color = primaryColor || "#15BA68";
+    const strings = LOADER_I18N[lang || ""] || LOADER_I18N.en;
+    const d = isDesktop();
+    if (!styleInjected) {
+      const style = document.createElement("style");
+      style.textContent = KEYFRAMES;
+      document.head.appendChild(style);
+      styleInjected = true;
+    }
+    const overlay = createEl("div", {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0",
+      width: window.innerWidth + "px",
+      height: window.innerHeight + "px",
+      background: d ? "rgba(0,0,0,0.05)" : "transparent",
+      backdropFilter: d ? "blur(2px)" : "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: "9998",
+      transition: "opacity 600ms ease-out,transform 400ms ease-out",
+      opacity: "1",
+      overflow: "hidden",
+      margin: "0",
+      padding: "0"
+    });
+    const card = createEl("div", {
+      width: d ? "min(400px, 35vw)" : "min(360px, 85vw)",
+      backgroundColor: "#FFF",
+      borderRadius: d ? "32px" : "24px",
+      boxShadow: d ? "0 20px 64px rgba(17,17,17,0.12),0 4px 16px rgba(17,17,17,0.08)" : "0 8px 32px rgba(17,17,17,0.08)",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: d ? "48px 36px" : "36px 24px",
+      gap: d ? "24px" : "20px",
+      transition: "transform 400ms ease-out,opacity 400ms ease-out"
+    });
+    const wrap = createEl("div", {
+      width: "48px",
+      height: "48px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    });
+    const NS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("width", "48");
+    svg.setAttribute("height", "48");
+    svg.setAttribute("viewBox", "0 0 48 48");
+    svg.style.animation = "kycspin 1.2s cubic-bezier(0.4,0,0.6,1) infinite";
+    const bg = document.createElementNS(NS, "circle");
+    for (const [k, v] of Object.entries({
+      cx: "24",
+      cy: "24",
+      r: "20",
+      "stroke-width": "3",
+      fill: "none",
+      stroke: color + "33"
+    })) bg.setAttribute(k, v);
+    const fg = document.createElementNS(NS, "circle");
+    for (const [k, v] of Object.entries({
+      cx: "24",
+      cy: "24",
+      r: "20",
+      "stroke-width": "3",
+      fill: "none",
+      stroke: color,
+      "stroke-linecap": "round",
+      "stroke-dasharray": "62.8",
+      "stroke-dashoffset": "15.7"
+    })) fg.setAttribute(k, v);
+    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" });
+    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" });
+    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" });
+    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%" });
+    document.body.appendChild(overlay);
+    let prevW = window.innerWidth;
+    let prevH = window.innerHeight;
+    const onResize = debounce(() => {
+      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" });
+        prevW = w;
+        prevH = h;
+      }
+    }, d ? 50 : 150);
+    window.addEventListener("resize", onResize);
+    this.overlay = overlay;
+    this.cleanup = () => {
+      window.removeEventListener("resize", onResize);
+      if (this.origBodyStyles) {
+        setStyles(document.body, { ...this.origBodyStyles, width: "", height: "" });
+      }
+    };
+    return overlay;
+  }
+  get element() {
+    return this.overlay;
+  }
+  showError(message, lang) {
+    if (!this.overlay) return;
+    const strings = LOADER_I18N[lang || ""] || LOADER_I18N.en;
+    const card = this.overlay.querySelector("div");
+    if (!card) return;
+    card.innerHTML = "";
+    const font = 'Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif';
+    const iconWrap = createEl("div", {
+      width: "48px",
+      height: "48px",
+      borderRadius: "50%",
+      backgroundColor: "rgba(239, 68, 68, 0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    });
+    const NS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("width", "24");
+    svg.setAttribute("height", "24");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "#ef4444");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    const line1 = document.createElementNS(NS, "line");
+    line1.setAttribute("x1", "18");
+    line1.setAttribute("y1", "6");
+    line1.setAttribute("x2", "6");
+    line1.setAttribute("y2", "18");
+    const line2 = document.createElementNS(NS, "line");
+    line2.setAttribute("x1", "6");
+    line2.setAttribute("y1", "6");
+    line2.setAttribute("x2", "18");
+    line2.setAttribute("y2", "18");
+    svg.append(line1, line2);
+    iconWrap.appendChild(svg);
+    const title = createEl("h3", {
+      fontFamily: font,
+      fontWeight: "600",
+      fontSize: "18px",
+      lineHeight: "1.3",
+      color: "#1F2937",
+      margin: "0",
+      textAlign: "center"
+    });
+    title.textContent = strings.errorTitle;
+    const msg = createEl("p", {
+      fontFamily: font,
+      fontWeight: "400",
+      fontSize: "13px",
+      lineHeight: "1.5",
+      color: "rgba(31,41,55,0.7)",
+      margin: "0",
+      textAlign: "center",
+      wordBreak: "break-word",
+      maxWidth: "300px"
+    });
+    msg.textContent = message;
+    const btn = createEl("button", {
+      fontFamily: font,
+      fontWeight: "600",
+      fontSize: "14px",
+      padding: "10px 32px",
+      borderRadius: "12px",
+      border: "none",
+      backgroundColor: "#1F2937",
+      color: "#fff",
+      cursor: "pointer",
+      transition: "opacity 150ms"
+    });
+    btn.textContent = strings.close;
+    btn.onmouseenter = () => {
+      btn.style.opacity = "0.85";
+    };
+    btn.onmouseleave = () => {
+      btn.style.opacity = "1";
+    };
+    btn.onclick = () => this.destroy();
+    card.append(iconWrap, title, msg, btn);
+  }
+  fadeOut() {
+    if (!this.overlay) return;
+    const d = isDesktop();
+    const card = this.overlay.querySelector("div");
+    if (card) {
+      setStyles(card, {
+        transform: d ? "translateY(-10px) scale(0.98)" : "translateY(-15px) scale(0.96)",
+        opacity: "0"
+      });
+    }
+    this.overlay.style.opacity = "0";
+  }
+  destroy() {
+    this.cleanup?.();
+    if (this.overlay?.parentNode) this.overlay.remove();
+    this.overlay = null;
+    this.cleanup = null;
+  }
+};
+
+// src/browser/message-handler.ts
+var MessageHandler = class {
+  constructor(iframeSrc, iframe, callbacks) {
+    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.
+   */
+  listen() {
+    const origin = getOrigin(this.iframeSrc);
+    this.listener = (e) => {
+      if (e.origin !== origin) return;
+      if (e.source !== this.iframe.contentWindow) return;
+      const data = e.data || {};
+      const type = data.type;
+      if (type === WIDGET_EVENTS.COMPLETE && this.callbacks.onSuccess) {
+        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) {
+        if (this.completionHandled) return;
+        this.completionHandled = true;
+        this.callbacks.onCancel();
+        setTimeout(() => this.iframe.remove(), 500);
+      } else if (type === WIDGET_EVENTS.ERROR && this.callbacks.onError) {
+        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();
+      }
+    };
+    window.addEventListener("message", this.listener);
+  }
+  /**
+   * 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;
+      window.removeEventListener("message", this.readyListener);
+      this.readyListener = null;
+      callback();
+    };
+    window.addEventListener("message", this.readyListener);
+  }
+  destroy() {
+    if (this.listener) {
+      window.removeEventListener("message", this.listener);
+      this.listener = null;
+    }
+    if (this.readyListener) {
+      window.removeEventListener("message", this.readyListener);
+      this.readyListener = null;
+    }
+  }
+};
+
+// src/browser/viewport.ts
+function getVV() {
+  if (window.visualViewport) {
+    return {
+      width: window.visualViewport.width,
+      height: window.visualViewport.height,
+      offsetTop: window.visualViewport.offsetTop || 0,
+      offsetLeft: window.visualViewport.offsetLeft || 0
+    };
+  }
+  return { width: window.innerWidth, height: window.innerHeight, offsetTop: 0, offsetLeft: 0 };
+}
+function ensureViewportMeta() {
+  try {
+    const meta = document.querySelector('meta[name="viewport"]');
+    if (!meta) {
+      const m = document.createElement("meta");
+      m.setAttribute("name", "viewport");
+      m.setAttribute("content", "width=device-width, initial-scale=1.0, viewport-fit=cover");
+      document.head.appendChild(m);
+    } else {
+      const c = meta.getAttribute("content") || "";
+      if (!c.includes("viewport-fit=cover")) {
+        meta.setAttribute("content", c + ", viewport-fit=cover");
+      }
+    }
+  } catch {
+  }
+}
+function setupViewportSizing(overlay, iframe) {
+  ensureViewportMeta();
+  let baselineHeight = 0;
+  let desktop = isDesktop();
+  let rafId = null;
+  const initBaseline = () => {
+    const vv = getVV();
+    baselineHeight = window.innerHeight || vv.height || document.documentElement.clientHeight || 0;
+    desktop = isDesktop();
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(applySize);
+  };
+  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" };
+      if (overlay) setStyles(overlay, dims);
+      if (iframe) setStyles(iframe, dims);
+    } catch {
+    }
+  };
+  let prevW = window.innerWidth;
+  let prevH = window.innerHeight;
+  let prevX = 0;
+  let prevY = 0;
+  const debouncedApply = debounce(() => {
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(applySize);
+  }, desktop ? 50 : 150);
+  const handleResize = () => {
+    const vv = getVV();
+    const w = vv.width;
+    const h = vv.height;
+    const x = vv.offsetLeft;
+    const y = vv.offsetTop;
+    const changed = Math.abs(w - prevW) > 1 || Math.abs(h - prevH) > 1 || Math.abs(x - prevX) > 1 || Math.abs(y - prevY) > 1;
+    if (!changed) return;
+    if (Math.abs(h - prevH) > 1) initBaseline();
+    prevW = w;
+    prevH = h;
+    prevX = x;
+    prevY = y;
+    if (desktop) {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(applySize);
+    } else {
+      debouncedApply();
+    }
+  };
+  const handleOrientation = () => {
+    initBaseline();
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(applySize);
+  };
+  initBaseline();
+  applySize();
+  window.addEventListener("resize", handleResize);
+  window.addEventListener("orientationchange", handleOrientation);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener("resize", handleResize);
+    window.visualViewport.addEventListener("scroll", handleResize);
+  }
+  return () => {
+    try {
+      if (rafId) cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("orientationchange", handleOrientation);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleResize);
+        window.visualViewport.removeEventListener("scroll", handleResize);
+      }
+    } catch {
+    }
+  };
+}
+
+// src/browser/index.ts
+var FlonkKYC = class {
+  constructor(options = {}) {
+    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
+   */
+  async init(config) {
+    if (!config) throw new FlonkValidationError("config is required");
+    if (config.serverUrl) {
+      return this.initWithServerUrl(config);
+    }
+    if (config.sessionId && config.embedToken) {
+      return this.initWithEmbedToken(config);
+    }
+    if (config.sessionId) {
+      return this.initWithSession(config);
+    }
+    const pk = config.publishableKey;
+    if (!pk || !/^pk_/.test(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(config = {}) {
+    const colors = config.colors || { primaryColor: "#3b82f6", secondaryColor: "#93c5fd" };
+    return this.openWidget({
+      mode: "preview",
+      isPreview: "true",
+      previewColors: JSON.stringify(colors),
+      allowManualUpload: "true",
+      documentType: config.documentType || "id_card",
+      lang: config.lang || "de",
+      overlayColor: config.overlayColor
+    }, {
+      primaryColor: colors.primaryColor || "#3b82f6",
+      lang: config.lang,
+      onSuccess: config.onSuccess,
+      onError: config.onError,
+      onCancel: config.onCancel
+    });
+  }
+  /**
+   * 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 device = config.device || "mobile";
+    let scale = config.scale ?? 1;
+    const lang = config.lang || "de";
+    const buildSrc = (c, d) => {
+      const p = new URLSearchParams({
+        mode: "preview",
+        isPreview: "true",
+        previewColors: JSON.stringify(c),
+        allowManualUpload: "true",
+        documentType: config.documentType || "id_card",
+        device: d,
+        lang
+      });
+      return `${this.widgetUrl}/?${p.toString()}`;
+    };
+    const applyScale = () => {
+      iframe.style.transform = scale !== 1 ? `scale(${scale})` : "";
+      iframe.style.transformOrigin = scale !== 1 ? "top left" : "";
+    };
+    const iframe = document.createElement("iframe");
+    iframe.style.cssText = "border:none;width:100%;height:100%;display:block";
+    iframe.src = buildSrc(colors, device);
+    iframe.title = "KYC Widget Preview";
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+    applyScale();
+    container.innerHTML = "";
+    container.appendChild(iframe);
+    return {
+      iframe,
+      setColors(newColors) {
+        colors = { ...colors, ...newColors };
+        if (newColors.primaryColor && !newColors.secondaryColor) {
+          colors.secondaryColor = generateSecondaryColor(newColors.primaryColor);
+        }
+        iframe.src = buildSrc(colors, device);
+      },
+      setDevice(d) {
+        device = d;
+        iframe.src = buildSrc(colors, device);
+      },
+      getColors: () => ({ ...colors }),
+      destroy: () => iframe.remove()
+    };
+  }
+  // ── Private flows ────────────────────────────────────
+  /**
+   * Flow 1: serverUrl — POST to client's backend, get sessionId + embedToken.
+   */
+  async initWithServerUrl(config) {
+    const { sessionId, embedToken } = await fetchSessionFromServer(
+      config.serverUrl,
+      config.clientMetadata
+    );
+    return this.initWithEmbedToken({ ...config, sessionId, embedToken });
+  }
+  /**
+   * 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);
+    try {
+      const sessionData = await fetchPublicSession(
+        this.apiBase,
+        config.sessionId,
+        config.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
+      };
+      return this.buildWidget(config.embedToken, session, config, loader, designTokens);
+    } catch (err) {
+      const msg = err.message || "Failed to initialize verification";
+      loader.showError(msg, config.lang);
+      config.onError?.(msg);
+      throw err;
+    }
+  }
+  /**
+   * Flow 3: sessionId only — exchange for embedToken, then init.
+   */
+  async initWithSession(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);
+    try {
+      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";
+      loader.showError(msg, config.lang);
+      config.onError?.(msg);
+      throw err;
+    }
+  }
+  /**
+   * 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);
+    try {
+      const data = await fetchWidgetToken(pk, this.apiBase);
+      const params = {
+        mode: "embedded",
+        publishableKey: pk,
+        allowManualUpload: String(data.allowManualUpload !== false)
+      };
+      if (data.token) params.token = data.token;
+      if (config.clientMetadata) {
+        params.clientMetadata = JSON.stringify(config.clientMetadata);
+      }
+      if (config.lang) params.lang = config.lang;
+      if (config.overlayColor) params.overlayColor = config.overlayColor;
+      return this.openWidget(params, {
+        primaryColor,
+        lang: config.lang,
+        loader,
+        onSuccess: config.onSuccess,
+        onError: config.onError,
+        onCancel: config.onCancel,
+        onReady: config.onReady,
+        mount: config.mount
+      });
+    } catch (err) {
+      const msg = err.message || "Failed to initialize verification";
+      loader.showError(msg, config.lang);
+      config.onError?.(msg);
+      throw err;
+    }
+  }
+  // ── Core widget builder ──────────────────────────────
+  buildWidget(token, session, config, loader, designTokens) {
+    const params = {
+      mode: "embedded",
+      sessionId: config.sessionId || session.id,
+      token,
+      allowManualUpload: String(session.allowManualUpload !== false)
+    };
+    if (session.testMode) params.testMode = "true";
+    if (session.poaEnabled) params.poaEnabled = "true";
+    if (session.poaRequired) params.poaRequired = "true";
+    if (designTokens?.colors) {
+      params.designTokens = JSON.stringify(designTokens);
+    }
+    if (config.embedToken) params.embedToken = config.embedToken;
+    if (session.qrCodeUrl) params.qrCodeUrl = session.qrCodeUrl;
+    const clientMetadata = session.clientMetadata || config.clientMetadata;
+    if (clientMetadata) {
+      params.clientMetadata = JSON.stringify(clientMetadata);
+    }
+    if (config.lang) params.lang = config.lang;
+    if (config.overlayColor) params.overlayColor = config.overlayColor;
+    return this.openWidget(params, {
+      primaryColor: designTokens?.colors?.primary?.cannabis || "#15BA68",
+      lang: config.lang,
+      loader,
+      onSuccess: config.onSuccess,
+      onError: config.onError,
+      onCancel: config.onCancel,
+      onReady: config.onReady,
+      mount: config.mount
+    });
+  }
+  /**
+   * Core: create iframe, attach listeners, return WidgetInstance.
+   */
+  openWidget(params, opts) {
+    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);
+    const mountTarget = opts.mount || document.body;
+    const loader = opts.loader ?? (() => {
+      const l = new Loader();
+      l.show(opts.primaryColor, opts.lang);
+      return l;
+    })();
+    if (loader.element) adjustZIndex(loader.element, iframe);
+    mountTarget.appendChild(iframe);
+    const cleanupViewport = setupViewportSizing(loader.element, iframe);
+    let cleaned = false;
+    const cleanupAll = () => {
+      if (cleaned) return;
+      cleaned = true;
+      try {
+        handler.destroy();
+        cleanupViewport();
+        loader.destroy();
+        if (iframe.parentNode) iframe.remove();
+      } catch {
+      }
+    };
+    const afterCleanup = (delayMs) => () => setTimeout(cleanupAll, delayMs);
+    const handler = new MessageHandler(src, iframe, {
+      onSuccess: opts.onSuccess ? (r) => {
+        opts.onSuccess?.(r);
+        afterCleanup(1e3)();
+      } : void 0,
+      onError: opts.onError ? (e) => {
+        opts.onError?.(e);
+        afterCleanup(500)();
+      } : void 0,
+      onCancel: opts.onCancel ? () => {
+        opts.onCancel?.();
+        afterCleanup(500)();
+      } : void 0,
+      onReady: opts.onReady
+    });
+    handler.listen();
+    handler.onReadyOnce(() => {
+      transitionLoaderToIframe(loader.element, iframe, () => loader.destroy());
+    });
+    return {
+      iframe,
+      destroy: cleanupAll
+    };
+  }
+};
+FlonkKYC.version = SDK_VERSION;
+function FlonkKYCWidget({
+  widgetUrl,
+  apiBase,
+  autoOpen = true,
+  publishableKey,
+  serverUrl,
+  sessionId,
+  embedToken,
+  clientMetadata,
+  lang,
+  overlayColor,
+  allowManualUpload,
+  onSuccess,
+  onError,
+  onCancel,
+  onReady
+}) {
+  const mountRef = useRef(null);
+  const widgetRef = useRef(null);
+  const destroyedRef = useRef(false);
+  const callbacksRef = useRef({ onSuccess, onError, onCancel, onReady });
+  callbacksRef.current = { onSuccess, onError, onCancel, onReady };
+  const sdk = useMemo(() => new FlonkKYC({ widgetUrl, apiBase }), [widgetUrl, apiBase]);
+  useEffect(() => {
+    if (!autoOpen) return;
+    destroyedRef.current = false;
+    const config = {
+      publishableKey,
+      serverUrl,
+      sessionId,
+      embedToken,
+      clientMetadata,
+      lang,
+      overlayColor,
+      allowManualUpload,
+      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?.()
+    };
+    sdk.init(config).then((instance) => {
+      if (destroyedRef.current) {
+        instance.destroy();
+      } else {
+        widgetRef.current = instance;
+      }
+    }).catch((err) => {
+      if (!destroyedRef.current) {
+        callbacksRef.current.onError?.(err.message);
+      }
+    });
+    return () => {
+      destroyedRef.current = true;
+      widgetRef.current?.destroy();
+      widgetRef.current = null;
+    };
+  }, [sdk, publishableKey, serverUrl, sessionId, autoOpen]);
+  return /* @__PURE__ */ jsx("div", { ref: mountRef });
+}
+
+export { FlonkError, FlonkKYC, FlonkKYCWidget, FlonkValidationError };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map