decane-connect-kit 2.2.4 → 2.2.6

package/dist/index.cjs

@@ -2619,9 +2619,6 @@ function validatePin(pin) {
 // src/social/crypto/passkey.ts
 var import_browser2 = require("@simplewebauthn/browser");
 init_errors();
-function b64u(u) {
-  return btoa(String.fromCharCode(...u)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
-}
 function fromB64u(s) {
   return Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0));
 }
@@ -2656,7 +2653,7 @@ async function authenticateWithPasskey(opts) {
     ...opts.optionsJSON,
     extensions: {
       ...opts.optionsJSON.extensions,
-      prf: { eval: { first: b64u(opts.prfSalt) } }
+      prf: { eval: { first: buf3(opts.prfSalt) } }
     }
   };
   let response;
@@ -3339,6 +3336,7 @@ async function createDecaneConnect(config) {
   }
   async function passkeyLogin(stored) {
     const userId = stored.userId;
+    events.emit("wallet-unlocking");
     const options = await api.getWebAuthnLoginOptions(userId, rpId);
     if (!options) {
       throw new NewDeviceError();
@@ -3372,8 +3370,10 @@ async function createDecaneConnect(config) {
   async function handleAuthResult(result) {
     let addresses;
     if (!result.hasShare) {
+      events.emit("wallet-creating");
       addresses = await firstTimeSetup(result.userId, result.jwt);
     } else {
+      events.emit("wallet-unlocking");
       addresses = await returningUserUnlock(result.userId, result.jwt);
     }
     auth = { jwt: result.jwt, userId: result.userId, addresses };
@@ -3712,8 +3712,8 @@ async function createDecaneConnect(config) {
 function bufferToB64u(buf6) {
   return btoa(String.fromCharCode(...buf6)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 }
-function b64uToBuffer(b64u2) {
-  const b644 = b64u2.replace(/-/g, "+").replace(/_/g, "/");
+function b64uToBuffer(b64u) {
+  const b644 = b64u.replace(/-/g, "+").replace(/_/g, "/");
   return Uint8Array.from(atob(b644), (c) => c.charCodeAt(0));
 }
 function toHex(bytes) {
@@ -4888,7 +4888,10 @@ function SignInView({
   authMethods,
   resumeHint,
   customAuthLabel,
-  onCustomAuthSignIn
+  onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn
 }) {
   const [googleLoading, setGoogleLoading] = (0, import_react3.useState)(false);
   const [email, setEmail] = (0, import_react3.useState)("");
@@ -4896,7 +4899,25 @@ function SignInView({
   const [emailSent, setEmailSent] = (0, import_react3.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react3.useState)(false);
   const [customLoading, setCustomLoading] = (0, import_react3.useState)(false);
+  const [passkeyLoading, setPasskeyLoading] = (0, import_react3.useState)(false);
+  const [showOtherMethods, setShowOtherMethods] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)("");
+  const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
+  async function handlePasskey() {
+    if (!onPasskeySignIn) return;
+    setError("");
+    setPasskeyLoading(true);
+    try {
+      await onPasskeySignIn();
+    } catch (e) {
+      const err = e;
+      if (err?.name !== "UserCancelledError") {
+        setError(err?.message ?? "Passkey sign-in failed");
+        setShowOtherMethods(true);
+      }
+      setPasskeyLoading(false);
+    }
+  }
   async function handleGoogle() {
     setError("");
     setGoogleLoading(true);
@@ -4956,7 +4977,47 @@ function SignInView({
     fontFamily: "inherit",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && !passkeyFirst && /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), passkeyFirst && /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 unlock to resume", passkeyAddress ? ` ${passkeyAddress.slice(0, 6)}\u2026${passkeyAddress.slice(-4)}` : ""), /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: handlePasskey,
+      disabled: passkeyLoading,
+      style: {
+        width: "100%",
+        padding: "11px 0",
+        background: "var(--dc-accent)",
+        color: "var(--dc-accent-text)",
+        border: "none",
+        borderRadius: 10,
+        fontSize: 13,
+        fontWeight: 700,
+        cursor: passkeyLoading ? "not-allowed" : "pointer",
+        opacity: passkeyLoading ? 0.7 : 1,
+        fontFamily: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 7
+      }
+    },
+    passkeyLoading ? "Verifying\u2026" : "\u{1F513} Continue with passkey"
+  ), /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: () => setShowOtherMethods(true),
+      style: {
+        width: "100%",
+        marginTop: 10,
+        background: "none",
+        border: "none",
+        color: "var(--dc-text-muted)",
+        fontSize: 12,
+        cursor: "pointer",
+        fontFamily: "inherit"
+      }
+    },
+    "Use email or Google instead"
+  ), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error)), !passkeyFirst && authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       onClick: handleGoogle,
@@ -4977,7 +5038,7 @@ function SignInView({
       }
     },
     googleLoading ? "Redirecting\u2026" : "Continue with Google"
-  ), authMethods.includes("email") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
+  ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
       type: "email",
@@ -5016,7 +5077,7 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
+  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       onClick: handleCustomAuth,
@@ -5155,6 +5216,9 @@ function SocialWalletModal({
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -5285,7 +5349,10 @@ function SocialWalletModal({
         authMethods,
         resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
         customAuthLabel,
-        onCustomAuthSignIn
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn
       }
     ) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
       margin: "0 16px 14px",
@@ -5372,16 +5439,98 @@ function SocialWalletModal({
 }
 
 // src/ui/context.tsx
+var import_react5 = __toESM(require("react"), 1);
+
+// src/ui/StatusOverlay.tsx
 var import_react4 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
+function injectTokens3(theme) {
+  if (typeof document === "undefined") return;
+  const resolved = theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+  let el = document.getElementById("decane-tokens");
+  if (!el) {
+    el = document.createElement("style");
+    el.id = "decane-tokens";
+    document.head.appendChild(el);
+  }
+  el.textContent = `:root { ${CSS_VARS[resolved]} }`;
+}
+function WalletStatusOverlay({
+  phase,
+  theme = "auto"
+}) {
+  (0, import_react4.useEffect)(() => {
+    if (!phase) return;
+    injectTokens3(theme);
+    if (theme !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const h = () => injectTokens3("auto");
+    mq.addEventListener("change", h);
+    return () => mq.removeEventListener("change", h);
+  }, [phase, theme]);
+  if (!phase || typeof document === "undefined") return null;
+  const title = phase === "creating" ? "Creating your wallet" : "Unlocking your wallet";
+  const sub = phase === "creating" ? "Generating your keys and splitting them across three shares so no single party ever holds your wallet. This takes a few seconds \u2014 please keep this tab open." : "Reopening your secure session\u2026";
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+          fontFamily: "var(--dc-font-sans, system-ui, sans-serif)"
+        }
+      },
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: {
+        position: "absolute",
+        inset: 0,
+        background: "var(--dc-bg-overlay, rgba(0,0,0,0.75))",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
+      } }),
+      /* @__PURE__ */ import_react4.default.createElement("div", { style: {
+        position: "relative",
+        background: "var(--dc-bg, #0D0D0B)",
+        border: "1px solid var(--dc-border, #3D3C39)",
+        borderRadius: 20,
+        width: "100%",
+        maxWidth: 340,
+        padding: "30px 26px",
+        textAlign: "center",
+        boxShadow: "0 24px 64px rgba(0,0,0,0.6)"
+      } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: 18 } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "relative", width: 60, height: 60, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        border: "2px solid var(--dc-border, #3D3C39)",
+        borderTopColor: "var(--dc-accent, #F5C800)",
+        animation: "dc-status-spin 0.8s linear infinite"
+      } }), /* @__PURE__ */ import_react4.default.createElement(DecaneMark, { size: 32 }))), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: 16, fontWeight: 800, color: "var(--dc-text, #F9F9F7)", letterSpacing: "-0.02em", marginBottom: 7 } }, title), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted, #8A8884)", lineHeight: 1.55 } }, sub), /* @__PURE__ */ import_react4.default.createElement("div", { style: { marginTop: 20, paddingTop: 14, borderTop: "1px solid var(--dc-border, #3D3C39)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 } }, /* @__PURE__ */ import_react4.default.createElement(DecaneMark, { size: 13, muted: true }), /* @__PURE__ */ import_react4.default.createElement(DecaneWordmark, { size: 11, muted: true }))),
+      /* @__PURE__ */ import_react4.default.createElement("style", null, `@keyframes dc-status-spin { to { transform: rotate(360deg); } }`)
+    ),
+    document.body
+  );
+}
+
+// src/ui/context.tsx
 var DEFAULT_SOCIAL = {
   addresses: null,
   isNewUser: false,
   isUnlocked: false,
   sessionExpiresAt: null,
   needsReconnect: false,
-  canUsePasskey: false
+  canUsePasskey: false,
+  phase: null
 };
-var DecaneContext = (0, import_react4.createContext)(null);
+var DecaneContext = (0, import_react5.createContext)(null);
 function hasSocial(mode) {
   return mode === "all" || mode === "social" || mode === "evm+social" || mode === "solana+social" || mode === "tron+social" || mode === "evm+tron+social";
 }
@@ -5404,19 +5553,19 @@ function DecaneKit({ config, children }) {
       `DecaneKit: config.social.apiKey is required for social sign-in (mode "${mode}"). Create an API key for this project in the dashboard.`
     );
   }
-  const walletRef = (0, import_react4.useRef)(null);
+  const walletRef = (0, import_react5.useRef)(null);
   if (!walletRef.current) walletRef.current = createDecane(config);
-  const socialRef = (0, import_react4.useRef)(null);
-  const socialInitialized = (0, import_react4.useRef)(false);
-  const [selectorOpen, setSelectorOpen] = (0, import_react4.useState)(false);
-  const [socialModalOpen, setSocialModalOpen] = (0, import_react4.useState)(false);
-  const [theme, setTheme] = (0, import_react4.useState)(config?.theme ?? "auto");
-  const [socialAuth, setSocialAuth] = (0, import_react4.useState)(DEFAULT_SOCIAL);
-  const openSelector = (0, import_react4.useCallback)(() => setSelectorOpen(true), []);
-  const closeSelector = (0, import_react4.useCallback)(() => setSelectorOpen(false), []);
-  const openSocialModal = (0, import_react4.useCallback)(() => setSocialModalOpen(true), []);
-  const closeSocialModal = (0, import_react4.useCallback)(() => setSocialModalOpen(false), []);
-  (0, import_react4.useEffect)(() => {
+  const socialRef = (0, import_react5.useRef)(null);
+  const socialInitialized = (0, import_react5.useRef)(false);
+  const [selectorOpen, setSelectorOpen] = (0, import_react5.useState)(false);
+  const [socialModalOpen, setSocialModalOpen] = (0, import_react5.useState)(false);
+  const [theme, setTheme] = (0, import_react5.useState)(config?.theme ?? "auto");
+  const [socialAuth, setSocialAuth] = (0, import_react5.useState)(DEFAULT_SOCIAL);
+  const openSelector = (0, import_react5.useCallback)(() => setSelectorOpen(true), []);
+  const closeSelector = (0, import_react5.useCallback)(() => setSelectorOpen(false), []);
+  const openSocialModal = (0, import_react5.useCallback)(() => setSocialModalOpen(true), []);
+  const closeSocialModal = (0, import_react5.useCallback)(() => setSocialModalOpen(false), []);
+  (0, import_react5.useEffect)(() => {
     if (!socialAuth.isUnlocked) return;
     const id = setInterval(() => {
       const sdk = socialRef.current;
@@ -5429,7 +5578,7 @@ function DecaneKit({ config, children }) {
     }, 1e4);
     return () => clearInterval(id);
   }, [socialAuth.isUnlocked]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!hasSocial(mode) || !config?.social || socialInitialized.current) return;
     socialInitialized.current = true;
     const {
@@ -5457,6 +5606,9 @@ function DecaneKit({ config, children }) {
         () => setSocialAuth((p) => ({ ...p, isUnlocked: false, sessionExpiresAt: null }))
       );
       sdk.on("disconnected", () => setSocialAuth(DEFAULT_SOCIAL));
+      sdk.on("wallet-creating", () => setSocialAuth((p) => ({ ...p, phase: "creating" })));
+      sdk.on("wallet-unlocking", () => setSocialAuth((p) => ({ ...p, phase: "unlocking" })));
+      sdk.on("connected", () => setSocialAuth((p) => ({ ...p, phase: null })));
       const saved = sdk.getAddresses();
       if (saved) {
         setSocialAuth((p) => ({ ...p, addresses: saved, isUnlocked: false, needsReconnect: true }));
@@ -5465,7 +5617,10 @@ function DecaneKit({ config, children }) {
       });
       const params = new URLSearchParams(window.location.search);
       if (params.has("decane_jwt") || params.has("decane_error")) {
-        sdk.connectWithGoogle().then(applyResult).catch(console.error);
+        sdk.connectWithGoogle().then(applyResult).catch((e) => {
+          setSocialAuth((p) => p.phase ? { ...p, phase: null } : p);
+          console.error(e);
+        });
       }
     }).catch(console.error);
   }, []);
@@ -5477,129 +5632,153 @@ function DecaneKit({ config, children }) {
       isUnlocked: sdk?.isUnlocked() ?? false,
       sessionExpiresAt: sdk?.sessionExpiresAt() ?? null,
       needsReconnect: false,
-      canUsePasskey: false
+      canUsePasskey: false,
+      phase: null
     });
     sdk?.canSignInWithPasskey().then((can) => setSocialAuth((p) => ({ ...p, canUsePasskey: can }))).catch(() => {
     });
   }
-  const signInWithPasskey = (0, import_react4.useCallback)(async () => {
+  const clearPhase = (0, import_react5.useCallback)(() => setSocialAuth((p) => p.phase ? { ...p, phase: null } : p), []);
+  const signInWithPasskey = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.signInWithPasskey();
-    applyResult(result);
-    setSelectorOpen(false);
-    return result;
-  }, []);
-  const connectWithGoogle = (0, import_react4.useCallback)(async () => {
+    try {
+      const result = await sdk.signInWithPasskey();
+      applyResult(result);
+      setSelectorOpen(false);
+      return result;
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
+  const connectWithGoogle = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
     await sdk.connectWithGoogle();
   }, []);
-  const connectWithEmail = (0, import_react4.useCallback)(async (email) => {
+  const connectWithEmail = (0, import_react5.useCallback)(async (email) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
     return sdk.connectWithEmail(email);
   }, []);
-  const verifyEmailCode2 = (0, import_react4.useCallback)(async (email, code) => {
+  const verifyEmailCode2 = (0, import_react5.useCallback)(async (email, code) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.verifyEmailCode(email, code);
-    applyResult(result);
-    setSelectorOpen(false);
-  }, []);
-  const connectWithToken = (0, import_react4.useCallback)(async (token, opts) => {
+    try {
+      const result = await sdk.verifyEmailCode(email, code);
+      applyResult(result);
+      setSelectorOpen(false);
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
+  const connectWithToken = (0, import_react5.useCallback)(async (token, opts) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.connectWithToken(token, opts);
-    applyResult(result);
-    setSelectorOpen(false);
-  }, []);
+    try {
+      const result = await sdk.connectWithToken(token, opts);
+      applyResult(result);
+      setSelectorOpen(false);
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const customAuthConfig = config?.social?.customAuth;
-  const connectWithCustomAuth = (0, import_react4.useCallback)(async () => {
+  const connectWithCustomAuth = (0, import_react5.useCallback)(async () => {
     if (!customAuthConfig) throw new Error("Custom auth not configured");
     const token = await customAuthConfig.getToken();
     await connectWithToken(token, customAuthConfig.providerId ? { providerId: customAuthConfig.providerId } : void 0);
   }, [customAuthConfig, connectWithToken]);
-  const socialUnlock = (0, import_react4.useCallback)(async () => {
+  const socialUnlock = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) return;
-    await sdk.unlock();
-    setSocialAuth((p) => ({
-      ...p,
-      isUnlocked: sdk.isUnlocked(),
-      sessionExpiresAt: sdk.sessionExpiresAt(),
-      needsReconnect: false
-    }));
-  }, []);
-  const socialDisconnect = (0, import_react4.useCallback)(async () => {
+    setSocialAuth((p) => ({ ...p, phase: "unlocking" }));
+    try {
+      await sdk.unlock();
+      setSocialAuth((p) => ({
+        ...p,
+        isUnlocked: sdk.isUnlocked(),
+        sessionExpiresAt: sdk.sessionExpiresAt(),
+        needsReconnect: false,
+        phase: null
+      }));
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
+  const socialDisconnect = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) return;
     await sdk.disconnect();
     setSocialAuth(DEFAULT_SOCIAL);
   }, []);
-  const socialSignMessage = (0, import_react4.useCallback)(async (chain, message) => {
+  const socialSignMessage = (0, import_react5.useCallback)(async (chain, message) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.signMessage({ chain, message });
   }, []);
-  const socialSendTransaction = (0, import_react4.useCallback)(async (req) => {
+  const socialSendTransaction = (0, import_react5.useCallback)(async (req) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.sendTransaction({ ...req, chain: req.chain });
   }, []);
-  const socialSignSolanaTransaction = (0, import_react4.useCallback)(async (tx) => {
+  const socialSignSolanaTransaction = (0, import_react5.useCallback)(async (tx) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.signSolanaTransaction(tx);
   }, []);
-  const socialSignTypedData = (0, import_react4.useCallback)(async (req) => {
+  const socialSignTypedData = (0, import_react5.useCallback)(async (req) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.signTypedData({ ...req, chain: req.chain });
   }, []);
-  const socialGetBalance = (0, import_react4.useCallback)(async (chain) => {
+  const socialGetBalance = (0, import_react5.useCallback)(async (chain) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.getBalance(chain);
   }, []);
-  const socialGetBalances = (0, import_react4.useCallback)(async () => {
+  const socialGetBalances = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.getBalances();
   }, []);
-  const socialRotateShares = (0, import_react4.useCallback)(async (opts) => {
+  const socialRotateShares = (0, import_react5.useCallback)(async (opts) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.rotateShares(opts);
   }, []);
-  const socialExportPortableBackup = (0, import_react4.useCallback)(async (opts) => {
+  const socialExportPortableBackup = (0, import_react5.useCallback)(async (opts) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.exportPortableBackup(opts);
   }, []);
-  const socialHasRecoveryShare = (0, import_react4.useCallback)(async () => {
+  const socialHasRecoveryShare = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.hasRecoveryShare();
   }, []);
-  const socialShouldPromptRecovery = (0, import_react4.useCallback)(async () => {
+  const socialShouldPromptRecovery = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.shouldPromptRecovery();
   }, []);
-  const socialDismissRecoveryPrompt = (0, import_react4.useCallback)(async () => {
+  const socialDismissRecoveryPrompt = (0, import_react5.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social wallet not connected");
     return sdk.dismissRecoveryPrompt();
   }, []);
-  const handleWalletConnect = (0, import_react4.useCallback)(
+  const handleWalletConnect = (0, import_react5.useCallback)(
     (wallet, preference) => {
       walletRef.current.connect(wallet, preference).catch(console.error);
     },
     []
   );
   const networks = deriveNetworks(mode, config?.networks);
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     DecaneContext.Provider,
     {
       value: {
@@ -5637,7 +5816,7 @@ function DecaneKit({ config, children }) {
       }
     },
     children,
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       WalletSelector,
       {
         provider: walletRef.current,
@@ -5658,7 +5837,7 @@ function DecaneKit({ config, children }) {
         onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0
       }
     ),
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       SocialWalletModal,
       {
         open: socialModalOpen,
@@ -5673,16 +5852,20 @@ function DecaneKit({ config, children }) {
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         authMethods: config?.social?.authMethods ?? ["google", "email"],
+        canUsePasskey: socialAuth.canUsePasskey,
+        passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
+        onPasskeySignIn: signInWithPasskey,
         onRotateShares: socialRotateShares,
         onExportPortableBackup: socialExportPortableBackup,
         rpcUrls: config?.social?.rpcUrls,
         chains: config?.social?.chains
       }
-    )
+    ),
+    /* @__PURE__ */ import_react5.default.createElement(WalletStatusOverlay, { phase: socialAuth.phase, theme })
   );
 }
 function useDecaneContext() {
-  const ctx = (0, import_react4.useContext)(DecaneContext);
+  const ctx = (0, import_react5.useContext)(DecaneContext);
   if (!ctx) {
     throw new Error(
       "Decane hooks must be called inside <DecaneKit>. Wrap your app: <DecaneKit config={...}><App /></DecaneKit>"
@@ -5692,7 +5875,7 @@ function useDecaneContext() {
 }
 
 // src/ui/hooks.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useSocialAuth() {
   const {
     socialAuth,
@@ -5702,15 +5885,16 @@ function useSocialAuth() {
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
+    signInWithPasskey: ctxSignInWithPasskey,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
-  const [googleLoading, setGoogleLoading] = (0, import_react5.useState)(false);
-  const [emailLoading, setEmailLoading] = (0, import_react5.useState)(false);
-  const [tokenLoading, setTokenLoading] = (0, import_react5.useState)(false);
-  const [customLoading, setCustomLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const signInWithGoogle = (0, import_react5.useCallback)(async () => {
+  const [googleLoading, setGoogleLoading] = (0, import_react6.useState)(false);
+  const [emailLoading, setEmailLoading] = (0, import_react6.useState)(false);
+  const [tokenLoading, setTokenLoading] = (0, import_react6.useState)(false);
+  const [customLoading, setCustomLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const signInWithGoogle = (0, import_react6.useCallback)(async () => {
     setGoogleLoading(true);
     setError(null);
     try {
@@ -5720,7 +5904,7 @@ function useSocialAuth() {
       setGoogleLoading(false);
     }
   }, [connectWithGoogle]);
-  const sendEmailCode = (0, import_react5.useCallback)(async (email) => {
+  const sendEmailCode = (0, import_react6.useCallback)(async (email) => {
     setEmailLoading(true);
     setError(null);
     try {
@@ -5733,7 +5917,7 @@ function useSocialAuth() {
       setEmailLoading(false);
     }
   }, [connectWithEmail]);
-  const confirmEmailCode = (0, import_react5.useCallback)(async (email, code) => {
+  const confirmEmailCode = (0, import_react6.useCallback)(async (email, code) => {
     setEmailLoading(true);
     setError(null);
     try {
@@ -5745,7 +5929,7 @@ function useSocialAuth() {
       setEmailLoading(false);
     }
   }, [verifyEmailCode2]);
-  const signInWithToken = (0, import_react5.useCallback)(async (token, opts) => {
+  const signInWithToken = (0, import_react6.useCallback)(async (token, opts) => {
     setTokenLoading(true);
     setError(null);
     try {
@@ -5757,7 +5941,7 @@ function useSocialAuth() {
       setTokenLoading(false);
     }
   }, [connectWithToken]);
-  const signInWithCustomAuth = (0, import_react5.useCallback)(async () => {
+  const signInWithCustomAuth = (0, import_react6.useCallback)(async () => {
     if (!connectWithCustomAuth) throw new Error("Custom auth not configured");
     setCustomLoading(true);
     setError(null);
@@ -5770,7 +5954,16 @@ function useSocialAuth() {
       setCustomLoading(false);
     }
   }, [connectWithCustomAuth]);
-  const unlock = (0, import_react5.useCallback)(async () => {
+  const signInWithPasskey = (0, import_react6.useCallback)(async () => {
+    setError(null);
+    try {
+      await ctxSignInWithPasskey();
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+  }, [ctxSignInWithPasskey]);
+  const unlock = (0, import_react6.useCallback)(async () => {
     setError(null);
     try {
       await socialUnlock();
@@ -5779,7 +5972,7 @@ function useSocialAuth() {
       throw e;
     }
   }, [socialUnlock]);
-  const disconnect = (0, import_react5.useCallback)(async () => {
+  const disconnect = (0, import_react6.useCallback)(async () => {
     setError(null);
     try {
       await socialDisconnect();
@@ -5794,6 +5987,11 @@ function useSocialAuth() {
     isNewUser: socialAuth.isNewUser,
     addresses: socialAuth.addresses,
     sessionExpiresAt: socialAuth.sessionExpiresAt,
+    // True when this device can skip the full sign-in and resume with a passkey.
+    canUsePasskey: socialAuth.canUsePasskey,
+    // Long-running work in progress, for driving your own status UI.
+    phase: socialAuth.phase,
+    isCreatingWallet: socialAuth.phase === "creating",
     // True when addresses are known (from a previous visit) but there's no
     // live session — unlock() will always throw in this state (every
     // unlock requires a fresh JWT, and JWTs are never persisted). Route
@@ -5811,6 +6009,7 @@ function useSocialAuth() {
     confirmEmailCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
+    signInWithPasskey,
     unlock,
     disconnect
   };
@@ -5835,8 +6034,8 @@ function useSocialWallet() {
     closeSocialModal,
     socialModalOpen
   } = useDecaneContext();
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
   async function run(fn) {
     setLoading(true);
     setError(null);
@@ -5850,31 +6049,31 @@ function useSocialWallet() {
       setLoading(false);
     }
   }
-  const signMessage = (0, import_react5.useCallback)(
+  const signMessage = (0, import_react6.useCallback)(
     (chain, message) => run(() => socialSignMessage(chain, message)),
     [socialSignMessage]
   );
-  const sendTransaction = (0, import_react5.useCallback)(
+  const sendTransaction = (0, import_react6.useCallback)(
     (req) => run(() => socialSendTransaction(req)),
     [socialSendTransaction]
   );
-  const signSolanaTransaction2 = (0, import_react5.useCallback)(
+  const signSolanaTransaction2 = (0, import_react6.useCallback)(
     (tx) => run(() => socialSignSolanaTransaction(tx)),
     [socialSignSolanaTransaction]
   );
-  const signTypedData = (0, import_react5.useCallback)(
+  const signTypedData = (0, import_react6.useCallback)(
     (req) => run(() => socialSignTypedData(req)),
     [socialSignTypedData]
   );
-  const getBalance = (0, import_react5.useCallback)(
+  const getBalance = (0, import_react6.useCallback)(
     (chain) => run(() => socialGetBalance(chain)),
     [socialGetBalance]
   );
-  const getBalances = (0, import_react5.useCallback)(
+  const getBalances = (0, import_react6.useCallback)(
     () => run(() => socialGetBalances()),
     [socialGetBalances]
   );
-  const unlock = (0, import_react5.useCallback)(async () => {
+  const unlock = (0, import_react6.useCallback)(async () => {
     setError(null);
     try {
       await socialUnlock();
@@ -5883,7 +6082,7 @@ function useSocialWallet() {
       throw e;
     }
   }, [socialUnlock]);
-  const disconnect = (0, import_react5.useCallback)(async () => {
+  const disconnect = (0, import_react6.useCallback)(async () => {
     setError(null);
     try {
       await socialDisconnect();
@@ -5892,23 +6091,23 @@ function useSocialWallet() {
       throw e;
     }
   }, [socialDisconnect]);
-  const rotateShares = (0, import_react5.useCallback)(
+  const rotateShares = (0, import_react6.useCallback)(
     (opts) => run(() => socialRotateShares(opts)),
     [socialRotateShares]
   );
-  const exportPortableBackup = (0, import_react5.useCallback)(
+  const exportPortableBackup = (0, import_react6.useCallback)(
     (opts) => run(() => socialExportPortableBackup(opts)),
     [socialExportPortableBackup]
   );
-  const hasRecoveryShare = (0, import_react5.useCallback)(
+  const hasRecoveryShare = (0, import_react6.useCallback)(
     () => run(() => socialHasRecoveryShare()),
     [socialHasRecoveryShare]
   );
-  const shouldPromptRecovery = (0, import_react5.useCallback)(
+  const shouldPromptRecovery = (0, import_react6.useCallback)(
     () => run(() => socialShouldPromptRecovery()),
     [socialShouldPromptRecovery]
   );
-  const dismissRecoveryPrompt = (0, import_react5.useCallback)(
+  const dismissRecoveryPrompt = (0, import_react6.useCallback)(
     () => run(() => socialDismissRecoveryPrompt()),
     [socialDismissRecoveryPrompt]
   );
@@ -5924,6 +6123,10 @@ function useSocialWallet() {
     // unlock requires a fresh JWT, and JWTs are never persisted). Route
     // this into a real reconnect (signInWithGoogle / sendEmailCode), not unlock().
     needsReconnect: socialAuth.needsReconnect,
+    // Long-running work in progress ('creating' | 'unlocking' | null), for
+    // driving your own status UI in addition to the SDK's built-in overlay.
+    phase: socialAuth.phase,
+    isCreatingWallet: socialAuth.phase === "creating",
     // Modal
     modalOpen: socialModalOpen,
     openModal: openSocialModal,
@@ -5952,11 +6155,11 @@ function useSocialWallet() {
 }
 function useSocialBalance(chain) {
   const { socialAuth, socialGetBalance } = useDecaneContext();
-  const [balance, setBalance] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
+  const [balance, setBalance] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
   const addrKey = `${socialAuth.addresses?.evm ?? ""}|${socialAuth.addresses?.solana ?? ""}`;
-  const refetch = (0, import_react5.useCallback)(async () => {
+  const refetch = (0, import_react6.useCallback)(async () => {
     if (!socialAuth.addresses) {
       setBalance(null);
       return;
@@ -5972,7 +6175,7 @@ function useSocialBalance(chain) {
       setLoading(false);
     }
   }, [socialGetBalance, chain, socialAuth.addresses]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let cancelled = false;
     if (!socialAuth.addresses) {
       setBalance(null);
@@ -6003,8 +6206,8 @@ function toDecaneError(err) {
 }
 function useDecane() {
   const { provider, theme, setTheme } = useDecaneContext();
-  const [, forceUpdate] = (0, import_react5.useState)(0);
-  (0, import_react5.useEffect)(() => {
+  const [, forceUpdate] = (0, import_react6.useState)(0);
+  (0, import_react6.useEffect)(() => {
     const refresh = () => forceUpdate((n) => n + 1);
     const events = [
       "connect",
@@ -6043,10 +6246,10 @@ function useWalletSelector() {
 }
 function useChainSwitch() {
   const { provider } = useDecaneContext();
-  const [, forceUpdate] = (0, import_react5.useState)(0);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
+  const [, forceUpdate] = (0, import_react6.useState)(0);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
     const refresh = () => forceUpdate((n) => n + 1);
     provider.on("connect", refresh);
     provider.on("disconnect", refresh);
@@ -6055,7 +6258,7 @@ function useChainSwitch() {
       provider.off("disconnect", refresh);
     };
   }, [provider]);
-  const switchChain = (0, import_react5.useCallback)(
+  const switchChain = (0, import_react6.useCallback)(
     async (chainId) => {
       setLoading(true);
       setError(null);
@@ -6109,10 +6312,10 @@ function resolveScope(provider, chainId, account) {
 }
 function useSignMessage() {
   const { provider } = useDecaneContext();
-  const [signature, setSignature] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const signMessage = (0, import_react5.useCallback)(
+  const [signature, setSignature] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const signMessage = (0, import_react6.useCallback)(
     async (message, options) => {
       const { chain, account } = resolveScope(
         provider,
@@ -6138,7 +6341,7 @@ function useSignMessage() {
     },
     [provider]
   );
-  const reset = (0, import_react5.useCallback)(() => {
+  const reset = (0, import_react6.useCallback)(() => {
     setSignature(null);
     setError(null);
   }, []);
@@ -6146,10 +6349,10 @@ function useSignMessage() {
 }
 function useSendTransaction() {
   const { provider } = useDecaneContext();
-  const [txHash, setTxHash] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const sendTransaction = (0, import_react5.useCallback)(
+  const [txHash, setTxHash] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const sendTransaction = (0, import_react6.useCallback)(
     async (tx, options) => {
       const { chain, account } = resolveScope(
         provider,
@@ -6176,7 +6379,7 @@ function useSendTransaction() {
     },
     [provider]
   );
-  const reset = (0, import_react5.useCallback)(() => {
+  const reset = (0, import_react6.useCallback)(() => {
     setTxHash(null);
     setError(null);
   }, []);
@@ -6184,10 +6387,10 @@ function useSendTransaction() {
 }
 function useSignTypedData() {
   const { provider } = useDecaneContext();
-  const [signature, setSignature] = (0, import_react5.useState)(null);
-  const [loading, setLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const signTypedData = (0, import_react5.useCallback)(
+  const [signature, setSignature] = (0, import_react6.useState)(null);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const signTypedData = (0, import_react6.useCallback)(
     async (typedData, options) => {
       const { chain, account } = resolveScope(
         provider,
@@ -6213,7 +6416,7 @@ function useSignTypedData() {
     },
     [provider]
   );
-  const reset = (0, import_react5.useCallback)(() => {
+  const reset = (0, import_react6.useCallback)(() => {
     setSignature(null);
     setError(null);
   }, []);