@wordkey/sdk 1.0.0

package/dist/index.js

@@ -0,0 +1,862 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  WordKeyButton: () => WordKeyButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/WordKeyButton.tsx
+var import_react = require("react");
+
+// src/types.ts
+var FIELD_LABELS = {
+  name: "Full name",
+  email: "Email address",
+  phone: "Phone number",
+  shipping_address: "Shipping address"
+};
+var DEFAULT_API_URL = "https://app.wordkey.app";
+
+// src/fields.ts
+var STANDARD = {
+  name: { key: "name", label: FIELD_LABELS.name, type: "text", isStandard: true },
+  email: { key: "email", label: FIELD_LABELS.email, type: "email", isStandard: true },
+  phone: { key: "phone", label: FIELD_LABELS.phone, type: "tel", isStandard: true },
+  shipping_address: {
+    key: "shipping_address",
+    label: FIELD_LABELS.shipping_address,
+    type: "address",
+    isStandard: true
+  }
+};
+function resolveFields(requested) {
+  return requested.map((f) => {
+    if (typeof f === "string") {
+      const base = STANDARD[f];
+      if (base) return { ...base, required: false };
+      return { key: f, label: f, type: "text", required: false, isStandard: false };
+    }
+    return {
+      key: f.key,
+      label: f.label,
+      type: f.type,
+      required: f.required ?? false,
+      options: f.options,
+      isStandard: false
+    };
+  });
+}
+
+// src/auth.ts
+var PROTOCOL_SALT = "wordkey.v1.protocol.salt";
+async function hashWord(word) {
+  const data = new TextEncoder().encode(word.toLowerCase().trim() + PROTOCOL_SALT);
+  const digest = await crypto.subtle.digest("SHA-256", data);
+  return Array.from(new Uint8Array(digest)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+function generateHolderSecret() {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+var DEVICE_STORE = "wordkey.device_id";
+function getDeviceId() {
+  if (typeof window === "undefined") return "server";
+  try {
+    const existing = localStorage.getItem(DEVICE_STORE);
+    if (existing) return existing;
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    const id = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+    localStorage.setItem(DEVICE_STORE, id);
+    return id;
+  } catch {
+    return "ephemeral";
+  }
+}
+var DeviceApprovalRequiredError = class extends Error {
+  code = "device_approval_required";
+  constructor(message) {
+    super(message);
+    this.name = "DeviceApprovalRequiredError";
+  }
+};
+async function verifyWord(apiUrl = DEFAULT_API_URL, publishableKey, word) {
+  const wordHash = await hashWord(word);
+  const res = await fetch(`${apiUrl}/api/auth/verify`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ wordHash, deviceId: getDeviceId(), publishableKey })
+  });
+  const json = await res.json();
+  if (!res.ok) {
+    if (json?.error?.code === "device_approval_required") {
+      throw new DeviceApprovalRequiredError(
+        json?.error?.message ?? "Approve this sign-in from your phone."
+      );
+    }
+    throw new Error(json?.error?.message ?? "Authentication failed");
+  }
+  return json;
+}
+
+// src/profile-popup.ts
+var POPUP_TIMEOUT_MS = 5 * 60 * 1e3;
+var PENDING_STORE = "wordkey.pending_share";
+var RESULT_HASH = "#wordkey_result=";
+function b64urlEncode(bytes) {
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function b64urlDecode(s) {
+  const b64 = s.replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(b64 + "=".repeat((4 - b64.length % 4) % 4));
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+function encodeJson(value) {
+  return b64urlEncode(new TextEncoder().encode(JSON.stringify(value)));
+}
+function decodeJson(s) {
+  try {
+    return JSON.parse(new TextDecoder().decode(b64urlDecode(s)));
+  } catch {
+    return null;
+  }
+}
+function newRequestId() {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return b64urlEncode(bytes);
+}
+function openConsentWindow(apiUrl) {
+  const w = 440;
+  const h = 660;
+  const left = Math.max(0, (window.screenX ?? 0) + (window.outerWidth - w) / 2);
+  const top = Math.max(0, (window.screenY ?? 0) + (window.outerHeight - h) / 3);
+  try {
+    return window.open(
+      `${apiUrl}/authorize`,
+      "wordkey-authorize",
+      `popup=yes,width=${w},height=${h},left=${left},top=${top}`
+    );
+  } catch {
+    return null;
+  }
+}
+function runPopupFlow(input2) {
+  const { popup, apiOrigin, requestId, signal } = input2;
+  return new Promise((resolve) => {
+    let settled = false;
+    const cleanup = () => {
+      window.removeEventListener("message", onMsg);
+      clearInterval(closedPoll);
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const finish = (r) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve(r);
+    };
+    const onAbort = () => {
+      try {
+        popup.close();
+      } catch {
+      }
+      finish({ granted: false, values: {}, cancelled: true });
+    };
+    const onMsg = (e) => {
+      if (e.origin !== apiOrigin || e.source !== popup) return;
+      const data = e.data;
+      if (!data || typeof data !== "object") return;
+      if (data.type === "wordkey:authorize:ready") {
+        popup.postMessage(
+          {
+            type: "wordkey:authorize:init",
+            requestId,
+            publishableKey: input2.publishableKey,
+            ticket: input2.ticket,
+            fields: input2.fields
+          },
+          apiOrigin
+        );
+      }
+      if (data.type === "wordkey:profile:result" && data.requestId === requestId) {
+        finish({
+          granted: data.granted === true,
+          values: data.values ?? {}
+        });
+      }
+    };
+    window.addEventListener("message", onMsg);
+    const closedPoll = setInterval(() => {
+      if (popup.closed) finish({ granted: false, values: {}, closed: true });
+    }, 400);
+    const timer = setTimeout(
+      () => finish({ granted: false, values: {} }),
+      POPUP_TIMEOUT_MS
+    );
+    if (signal) {
+      if (signal.aborted) onAbort();
+      else signal.addEventListener("abort", onAbort);
+    }
+  });
+}
+async function beginRedirectShare(input2) {
+  const pair = await crypto.subtle.generateKey(
+    { name: "ECDH", namedCurve: "P-256" },
+    true,
+    ["deriveKey"]
+  );
+  const publicJwk = await crypto.subtle.exportKey("jwk", pair.publicKey);
+  const privateKeyJwk = await crypto.subtle.exportKey("jwk", pair.privateKey);
+  const pending = {
+    requestId: input2.requestId,
+    userId: input2.userId,
+    isNewUser: input2.isNewUser,
+    fields: input2.fields,
+    privateKeyJwk
+  };
+  sessionStorage.setItem(PENDING_STORE, JSON.stringify(pending));
+  const returnUrl = window.location.href.split("#")[0];
+  const request = {
+    v: 1,
+    requestId: input2.requestId,
+    publishableKey: input2.publishableKey,
+    ticket: input2.ticket,
+    fields: input2.fields,
+    origin: window.location.origin,
+    returnUrl,
+    sdkPub: publicJwk
+  };
+  window.location.assign(`${input2.apiUrl}/authorize#wkreq=${encodeJson(request)}`);
+}
+async function consumePendingRedirect() {
+  if (typeof window === "undefined") return null;
+  const hash = window.location.hash;
+  if (!hash.startsWith(RESULT_HASH)) return null;
+  const stored = sessionStorage.getItem(PENDING_STORE);
+  const envelope = decodeJson(
+    hash.slice(RESULT_HASH.length)
+  );
+  history.replaceState(null, "", window.location.pathname + window.location.search);
+  if (!stored || !envelope) return null;
+  let pending;
+  try {
+    pending = JSON.parse(stored);
+  } catch {
+    return null;
+  }
+  if (envelope.requestId !== pending.requestId) return null;
+  sessionStorage.removeItem(PENDING_STORE);
+  if (envelope.granted !== true) {
+    return { pending, result: { granted: false, values: {} } };
+  }
+  if (!envelope.epk || !envelope.iv || !envelope.ct) return null;
+  try {
+    const privateKey = await crypto.subtle.importKey(
+      "jwk",
+      pending.privateKeyJwk,
+      { name: "ECDH", namedCurve: "P-256" },
+      false,
+      ["deriveKey"]
+    );
+    const peer = await crypto.subtle.importKey(
+      "jwk",
+      envelope.epk,
+      { name: "ECDH", namedCurve: "P-256" },
+      false,
+      []
+    );
+    const key = await crypto.subtle.deriveKey(
+      { name: "ECDH", public: peer },
+      privateKey,
+      { name: "AES-GCM", length: 256 },
+      false,
+      ["decrypt"]
+    );
+    const plain = await crypto.subtle.decrypt(
+      { name: "AES-GCM", iv: b64urlDecode(envelope.iv) },
+      key,
+      b64urlDecode(envelope.ct)
+    );
+    const parsed = JSON.parse(new TextDecoder().decode(plain));
+    return {
+      pending,
+      result: { granted: true, values: parsed.values ?? {} }
+    };
+  } catch {
+    return null;
+  }
+}
+
+// src/fonts.ts
+var loaded = false;
+function ensureFont() {
+  if (loaded || typeof document === "undefined") return;
+  loaded = true;
+  const href = "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap";
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  link.media = "print";
+  link.onload = () => {
+    link.media = "all";
+  };
+  document.head.appendChild(link);
+}
+
+// src/theme.ts
+var C = {
+  navy: "#0B1529",
+  navy2: "#111E38",
+  navy3: "#1A2B50",
+  purple: "#7C3AED",
+  purpleL: "#A78BFA",
+  purpleD: "#5B21B6",
+  cream: "#F4F4F0",
+  muted: "#7A8BAD",
+  teal: "#0D9488",
+  red: "#EF4444",
+  border: "rgba(124,58,237,0.2)"
+};
+var FONT_DISPLAY = "'Cormorant Garamond', Georgia, 'Times New Roman', serif";
+var FONT_BODY = "'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+var overlay = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 2147483e3,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(0,0,0,0.7)",
+  backdropFilter: "blur(4px)",
+  padding: 16,
+  fontFamily: FONT_BODY
+};
+var panel = {
+  width: "100%",
+  maxWidth: 420,
+  background: C.navy2,
+  border: `1px solid ${C.border}`,
+  borderRadius: 20,
+  boxShadow: "0 20px 60px rgba(0,0,0,0.5)",
+  padding: 28,
+  color: C.cream,
+  boxSizing: "border-box",
+  maxHeight: "90vh",
+  overflowY: "auto"
+};
+var input = {
+  width: "100%",
+  height: 46,
+  borderRadius: 12,
+  border: `1px solid ${C.border}`,
+  background: C.navy,
+  color: C.cream,
+  padding: "0 14px",
+  fontSize: 15,
+  fontFamily: FONT_BODY,
+  boxSizing: "border-box",
+  outline: "none"
+};
+function primaryBtn(disabled) {
+  return {
+    flex: 1,
+    height: 46,
+    borderRadius: 12,
+    border: "none",
+    background: disabled ? "#3a2d63" : C.purple,
+    color: C.cream,
+    fontSize: 15,
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontFamily: FONT_BODY
+  };
+}
+var ghostBtn = {
+  flex: 1,
+  height: 46,
+  borderRadius: 12,
+  border: `1px solid ${C.border}`,
+  background: "transparent",
+  color: C.cream,
+  fontSize: 15,
+  cursor: "pointer",
+  fontFamily: FONT_BODY
+};
+
+// src/WordKeyButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizePx = { sm: 20, md: 28, lg: 38 };
+function WordKeyButton({
+  publishableKey,
+  onSuccess,
+  onError,
+  size = "md",
+  label = "Word?",
+  requestedFields,
+  apiUrl = DEFAULT_API_URL
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    ensureFont();
+  }, []);
+  const resumed = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (resumed.current) return;
+    resumed.current = true;
+    void consumePendingRedirect().then((r) => {
+      if (!r) return;
+      const profile = buildProfile(
+        r.pending.fields,
+        r.result.granted ? r.result.values : {}
+      );
+      onSuccess({
+        id: r.pending.userId,
+        isNewUser: r.pending.isNewUser,
+        authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        profile
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        style: {
+          background: "transparent",
+          border: "none",
+          padding: 0,
+          cursor: "pointer",
+          fontFamily: FONT_DISPLAY,
+          fontWeight: 600,
+          fontSize: sizePx[size],
+          lineHeight: 1
+        },
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purple }, children: "Word" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purpleL }, children: "?" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AuthModal,
+      {
+        publishableKey,
+        apiUrl,
+        requestedFields,
+        onClose: () => setOpen(false),
+        onSuccess: (u) => {
+          setOpen(false);
+          onSuccess(u);
+        },
+        onError: (e) => onError?.(e)
+      }
+    )
+  ] });
+}
+function AuthModal({
+  publishableKey,
+  apiUrl,
+  requestedFields,
+  onClose,
+  onSuccess,
+  onError
+}) {
+  const fields = (0, import_react.useMemo)(
+    () => requestedFields ? resolveFields(requestedFields) : [],
+    [requestedFields]
+  );
+  const apiOrigin = (0, import_react.useMemo)(() => {
+    try {
+      return new URL(apiUrl).origin;
+    } catch {
+      return apiUrl;
+    }
+  }, [apiUrl]);
+  const [step, setStep] = (0, import_react.useState)("word");
+  const [word, setWord] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(null);
+  const abortRef = (0, import_react.useRef)(null);
+  if (!abortRef.current) abortRef.current = new AbortController();
+  (0, import_react.useEffect)(() => () => abortRef.current?.abort(), []);
+  const [approvalQr, setApprovalQr] = (0, import_react.useState)(null);
+  const [approvalUrl, setApprovalUrl] = (0, import_react.useState)(null);
+  const pendingApproval = (0, import_react.useRef)(null);
+  async function authenticate() {
+    setError(null);
+    setStep("authenticating");
+    try {
+      const result = await verifyWord(apiUrl, publishableKey, word);
+      await completeAuth(result.userId, result.isNewUser, result.profileTicket);
+    } catch (e) {
+      if (e instanceof DeviceApprovalRequiredError) {
+        await startDeviceApproval();
+        return;
+      }
+      const message = e.message;
+      setError(message);
+      setStep("error");
+      onError({ code: "auth_failed", message });
+    }
+  }
+  async function completeAuth(userId, isNewUser, profileTicket) {
+    const finish = (profile) => onSuccess({
+      id: userId,
+      isNewUser,
+      authenticatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      profile
+    });
+    if (fields.length === 0) {
+      finish();
+      return;
+    }
+    const requestId = newRequestId();
+    const popup = openConsentWindow(apiUrl);
+    if (!popup) {
+      await beginRedirectShare({
+        apiUrl,
+        requestId,
+        publishableKey,
+        ticket: profileTicket,
+        fields,
+        userId,
+        isNewUser
+      });
+      return;
+    }
+    setStep("sharing");
+    const result = await runPopupFlow({
+      popup,
+      apiOrigin,
+      requestId,
+      publishableKey,
+      ticket: profileTicket,
+      fields,
+      signal: abortRef.current?.signal
+    });
+    if (result.cancelled) return;
+    finish(buildProfile(fields, result.granted ? result.values : {}));
+  }
+  async function startDeviceApproval() {
+    setStep("device-approval");
+    setError(null);
+    try {
+      const holderSecret = generateHolderSecret();
+      const res = await fetch(`${apiUrl}/api/auth/device-approval/create`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          publishableKey,
+          deviceId: getDeviceId(),
+          holderSecret
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data?.error?.message ?? "Could not start phone approval");
+      }
+      setApprovalUrl(data.approveUrl);
+      try {
+        const QRCode = await import("qrcode");
+        setApprovalQr(
+          await QRCode.toDataURL(data.approveUrl, {
+            margin: 1,
+            color: { dark: "#A78BFA", light: "#0B1529" }
+          })
+        );
+      } catch {
+      }
+      void pollDeviceApproval(data.sessionKey, holderSecret);
+    } catch (e) {
+      const message = e.message;
+      setError(message);
+      setStep("error");
+      onError({ code: "device_approval_failed", message });
+    }
+  }
+  async function pollDeviceApproval(sessionKey, holderSecret) {
+    for (let i = 0; i < 80; i++) {
+      await new Promise((r) => setTimeout(r, 1500));
+      let data;
+      try {
+        const res = await fetch(
+          `${apiUrl}/api/auth/device-approval/status/${sessionKey}`,
+          { headers: { "X-WordKey-Approval-Secret": holderSecret } }
+        );
+        data = await res.json();
+      } catch {
+        continue;
+      }
+      if (data.status === "approved" && data.token) {
+        const claims = decodeToken(data.token);
+        const userId = claims?.userId ?? "";
+        const isNewUser = claims?.isNewUser ?? false;
+        if (fields.length === 0) {
+          await completeAuth(userId, isNewUser, data.profileTicket);
+        } else {
+          pendingApproval.current = {
+            userId,
+            isNewUser,
+            profileTicket: data.profileTicket
+          };
+          setStep("approved");
+        }
+        return;
+      }
+      if (data.status === "expired") {
+        setError("The approval request expired. Try again.");
+        setStep("error");
+        onError({
+          code: "device_approval_expired",
+          message: "Approval request expired"
+        });
+        return;
+      }
+    }
+    setError("Approval timed out. Try again.");
+    setStep("error");
+    onError({ code: "device_approval_timeout", message: "Approval timed out" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: overlay, role: "dialog", "aria-modal": "true", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, {}),
+    step === "word" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, marginTop: 0, fontSize: 14 }, children: "Enter your word to continue." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        WordInput,
+        {
+          autoFocus: true,
+          value: word,
+          onChange: (e) => setWord(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && word.trim().length >= 3)
+              void authenticate();
+          },
+          placeholder: "Your word",
+          style: { ...input, textTransform: "lowercase" }
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorText, { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Row, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            style: primaryBtn(word.trim().length < 3),
+            disabled: word.trim().length < 3,
+            onClick: () => void authenticate(),
+            children: "Continue"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Footer, {})
+    ] }),
+    step === "authenticating" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: "24px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted }, children: "Verifying\u2026" })
+    ] }),
+    step === "sharing" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: "12px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { fontFamily: FONT_DISPLAY, fontSize: 22, margin: "4px 0" }, children: "Finish in the WordKey window" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, fontSize: 13 }, children: "Review what this site will receive in the window that just opened. Closing it signs you in without sharing your details." })
+    ] }),
+    step === "device-approval" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { fontFamily: FONT_DISPLAY, fontSize: 24, margin: "4px 0" }, children: "Approve on your phone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, fontSize: 14, marginTop: 4 }, children: "This device isn't recognized. Scan with the phone where your word lives, then approve." }),
+      approvalQr ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: approvalQr,
+            alt: "Scan to approve on your phone",
+            width: 180,
+            height: 180,
+            style: { margin: "16px auto", display: "block", borderRadius: 12 }
+          }
+        )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "24px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) }),
+      approvalUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          href: approvalUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { color: C.purpleL, fontSize: 12, wordBreak: "break-all" },
+          children: "Or open the approval link"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, fontSize: 12, marginTop: 12 }, children: "Waiting for approval\u2026" }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorText, { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Cancel" }) })
+    ] }),
+    step === "approved" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: "12px 0" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 34, color: C.teal }, children: "\u2713" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { fontFamily: FONT_DISPLAY, fontSize: 24, margin: "8px 0 4px" }, children: "Approved on your phone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.muted, fontSize: 14 }, children: "Continue to review what this site will receive." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Row, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            style: primaryBtn(false),
+            onClick: () => {
+              const p = pendingApproval.current;
+              if (p) void completeAuth(p.userId, p.isNewUser, p.profileTicket);
+            },
+            children: "Continue"
+          }
+        )
+      ] })
+    ] }),
+    step === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorText, { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Row, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: ghostBtn, onClick: onClose, children: "Close" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            style: primaryBtn(false),
+            onClick: () => {
+              setError(null);
+              setStep("word");
+            },
+            children: "Try again"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function WordInput({
+  style,
+  ...props
+}) {
+  const [masked, setMasked] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    try {
+      if (typeof CSS !== "undefined" && CSS.supports("-webkit-text-security", "disc")) {
+        setMasked(true);
+      }
+    } catch {
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: masked ? "text" : "password",
+      name: "word",
+      autoComplete: "off",
+      autoCapitalize: "none",
+      autoCorrect: "off",
+      spellCheck: false,
+      inputMode: "text",
+      style: masked ? { ...style, WebkitTextSecurity: "disc" } : style,
+      ...props
+    }
+  );
+}
+function valuePresent(v) {
+  if (v === void 0) return false;
+  if (typeof v === "string") return v.trim().length > 0;
+  return Object.values(v).some((x) => x && String(x).trim().length > 0);
+}
+function decodeToken(token) {
+  try {
+    const part = token.split(".")[1];
+    if (!part) return null;
+    const b64 = part.replace(/-/g, "+").replace(/_/g, "/");
+    const json = typeof atob === "function" ? atob(b64) : Buffer.from(b64, "base64").toString("utf8");
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+function buildProfile(fields, granted) {
+  const profile = {};
+  const custom = {};
+  for (const f of fields) {
+    const v = granted[f.key];
+    if (!valuePresent(v)) continue;
+    if (f.key === "name" && typeof v === "string") profile.name = v;
+    else if (f.key === "email" && typeof v === "string") profile.email = v;
+    else if (f.key === "phone" && typeof v === "string") profile.phone = v;
+    else if (f.key === "shipping_address" && typeof v === "object")
+      profile.shippingAddress = v;
+    else if (typeof v === "string") custom[f.key] = v;
+  }
+  if (Object.keys(custom).length) profile.custom = custom;
+  return profile;
+}
+function Header() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontFamily: FONT_DISPLAY, fontSize: 28, fontWeight: 600 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purple }, children: "Word" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: C.purpleL }, children: "?" })
+  ] }) });
+}
+function Footer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 16, fontSize: 11, color: C.muted, textAlign: "center" }, children: "Secured by WordKey \xB7 one word, every door" });
+}
+function Row({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 10, marginTop: 20 }, children });
+}
+function ErrorText({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: C.red, fontSize: 13, marginTop: 12 }, children });
+}
+function Spinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        width: 32,
+        height: 32,
+        margin: "0 auto 12px",
+        border: `3px solid ${C.border}`,
+        borderTopColor: C.purpleL,
+        borderRadius: "50%",
+        animation: "wk-spin 0.8s linear infinite"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: "@keyframes wk-spin{to{transform:rotate(360deg)}}" })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WordKeyButton
+});