@dexterai/connect 0.7.0 → 0.9.0

package/dist/{chunk-LYIBVWRG.js → chunk-W5ISTMTY.js}

@@ -63,10 +63,13 @@ function derInteger(component) {
 // src/relay.ts
 var DEFAULT_API_BASE = "https://api.dexter.cash";
 var ANON_SIGN_BASE = "/api/passkey-anon/sign";
-async function passkeyLogin(config = {}) {
+async function passkeyLogin(config = {}, onPhase) {
   const apiBase = (config.apiBase ?? DEFAULT_API_BASE).replace(/\/$/, "");
+  onPhase?.("challenge");
   const options = await fetchLoginChallenge(apiBase);
+  onPhase?.("passkey");
   const credential = await getAssertion(options);
+  onPhase?.("verifying");
   return submitLogin(apiBase, credential);
 }
 async function fetchLoginChallenge(apiBase) {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as DexterConnectConfig, S as SignInResult, C as ConnectVault } from './signals-CkBFwCNw.js';
-export { A as ACTIVE_WALLET_STORAGE_KEY, a as ConnectError, P as PasskeyLoginTokens, b as PasskeySignalSupport, c as StoredWallet, e as ejectActiveWallet, f as forgetWallet, g as getActiveHandle, d as getCredentialId, l as listWallets, p as passkeySignalSupport, h as prunePasskey, r as renamePasskey, s as setActiveHandle, i as subscribeWallet, j as switchWallet, k as syncAcceptedPasskeys } from './signals-CkBFwCNw.js';
+import { D as DexterConnectConfig, C as CeremonyPhase, S as SignInResult, a as ConnectVault } from './signals-CXkNJfIo.js';
+export { A as ACTIVE_WALLET_STORAGE_KEY, b as ConnectError, P as PasskeyLoginTokens, c as PasskeySignalSupport, d as StoredWallet, e as ejectActiveWallet, f as forgetWallet, g as getActiveHandle, h as getCredentialId, l as listWallets, p as passkeySignalSupport, i as prunePasskey, r as renamePasskey, s as setActiveHandle, j as subscribeWallet, k as switchWallet, m as syncAcceptedPasskeys } from './signals-CXkNJfIo.js';
 import { DexterApiBrowserPasskeySigner } from '@dexterai/vault/signers/browser';
 
 /**
@@ -15,7 +15,7 @@ import { DexterApiBrowserPasskeySigner } from '@dexterai/vault/signers/browser';
  * Relays to dexter-api's ANON router — a first-time third-party user has no
  * Supabase session, so the Supabase-gated router would 401.
  */
-declare function passkeyLogin(config?: DexterConnectConfig): Promise<SignInResult>;
+declare function passkeyLogin(config?: DexterConnectConfig, onPhase?: (phase: CeremonyPhase) => void): Promise<SignInResult>;
 
 /** What `issueChallenge` returns to the SDK signer. */
 interface AnonChallengeResult {
@@ -82,6 +82,9 @@ interface CreateWalletConfig extends DexterConnectConfig {
     name?: string;
     /** RP id for the new credential. Default "dexter.cash". */
     rpId?: string;
+    /** Called as the ceremony progresses, for live "connecting steps" UI:
+     *  challenge → passkey → verifying → finalizing. */
+    onPhase?: (phase: CeremonyPhase) => void;
 }
 interface CreateWalletResult {
     /** Server-minted 16-byte user handle, base64url — the vault identity. */

package/dist/index.js

@@ -18,7 +18,7 @@ import {
   subscribe,
   switchWallet,
   syncAcceptedPasskeys
-} from "./chunk-LYIBVWRG.js";
+} from "./chunk-W5ISTMTY.js";
 
 // src/enroll.ts
 var DEFAULT_API_BASE = "https://api.dexter.cash";
@@ -31,9 +31,13 @@ async function createWallet(config = {}) {
   const apiBase = (config.apiBase ?? DEFAULT_API_BASE).replace(/\/$/, "");
   const rpId = config.rpId ?? DEFAULT_RP_ID;
   const name = config.name && config.name.trim() || DEFAULT_WALLET_NAME;
+  config.onPhase?.("challenge");
   const options = await fetchEnrollChallenge(apiBase);
+  config.onPhase?.("passkey");
   const credential = await createCredential(options, name, rpId);
+  config.onPhase?.("verifying");
   const enrolled = await submitEnrollComplete(apiBase, credential);
+  config.onPhase?.("finalizing");
   const init = await initializeVault(apiBase, enrolled.userHandle, enrolled.credentialId);
   setActiveHandle(enrolled.userHandle, name, enrolled.credentialId);
   return {

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import { DexterApiBrowserPasskeySigner } from '@dexterai/vault/signers/browser';
-import { S as SignInResult, P as PasskeyLoginTokens, C as ConnectVault, a as ConnectError, c as StoredWallet, b as PasskeySignalSupport } from './signals-CkBFwCNw.js';
-import { ReactElement } from 'react';
+import { C as CeremonyPhase, S as SignInResult, P as PasskeyLoginTokens, a as ConnectVault, b as ConnectError, d as StoredWallet, c as PasskeySignalSupport } from './signals-CXkNJfIo.js';
+import { ReactElement, ReactNode } from 'react';
 
 type ConnectStatus = 'idle' | 'pending' | 'done' | 'error';
 interface UseSignInWithDexterConfig {
@@ -11,6 +11,9 @@ interface UseSignInWithDexterConfig {
 }
 interface UseSignInWithDexter {
     status: ConnectStatus;
+    /** Live ceremony phase while status==='pending' (challenge → passkey →
+     *  verifying); null otherwise. Drives the button's "connecting steps". */
+    phase: CeremonyPhase | null;
     isVaultConnected: boolean;
     /** Run the ceremony. Resolves with the result; throws ConnectError on failure
      *  (error is also captured in `error` + `status==='error'` for declarative UI). */
@@ -48,24 +51,49 @@ interface SignInWithDexterProps extends UseSignInWithDexterConfig {
     onError?: (error: ConnectError) => void;
     /** Button label when signed out. Default "Sign in with Dexter". */
     label?: string;
-    /** Visual variant: 'primary' = filled ember (default), 'secondary' = outline. */
+    /** 'primary' = filled ember (default), 'secondary' = outline. */
     variant?: 'primary' | 'secondary';
+    /** Full-width button. */
+    block?: boolean;
     /** Extra className composed after the brand classes. Prefer overriding the
-     *  `--dx-*` CSS variables for theming over restyling from scratch. */
+     *  `--dx-*` CSS variables for theming. */
     className?: string;
-    /** Render the built-in connected chip (wallet + balance). Default true.
-     *  Set false to render nothing once connected (consumer renders its own UI). */
+    /** Render the built-in connected chip (wallet + balance). Default true. */
     showConnectedChip?: boolean;
 }
 /**
- * Turnkey "Sign in with Dexter" element. Signed out → the branded ember button
+ * Turnkey "Sign in with Dexter" element. Signed out → the branded DexterButton
  * (hover / focus / active / loading states, themeable via --dx-* CSS vars);
  * signed in → a compact chip with the Dexter Wallet address + USD available.
- * Wraps useSignInWithDexter; consumers who need the raw vault/passkey data
- * should use that hook directly. Brand voice: no emojis, "unlock" banned.
+ * Wraps useSignInWithDexter; for the wallet CREATE flow use <DexterButton>
+ * wired to your create action. Brand voice: no emojis, "unlock" banned.
  */
 declare function SignInWithDexter(props: SignInWithDexterProps): ReactElement | null;
 
+/** The Dexter passkey mark — the brand glyph carried on the branded button. */
+declare function DexterMark(): ReactElement;
+interface DexterButtonProps {
+    /** Button content (e.g. "Sign in with Dexter", "Create your Dexter Wallet"). */
+    children?: ReactNode;
+    /** Loading state: shows the animated spinner + `loadingLabel`, disables click. */
+    loading?: boolean;
+    /** Label shown next to the spinner while loading. Default "Connecting…". */
+    loadingLabel?: string;
+    /** 'primary' = filled ember (default), 'secondary' = outline. */
+    variant?: 'primary' | 'secondary';
+    /** Full-width (fills its container). */
+    block?: boolean;
+    /** Render the Dexter mark before the children. Default true. */
+    withMark?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Extra className composed after the brand classes. */
+    className?: string;
+    type?: 'button' | 'submit';
+}
+/** The branded Dexter button. Wire it to any action via `onClick`. */
+declare function DexterButton(props: DexterButtonProps): ReactElement;
+
 interface UseDexterWallet {
     /** Active wallet handle, or null if this browser has no active wallet. */
     activeHandle: string | null;
@@ -96,4 +124,4 @@ interface UseDexterWallet {
 }
 declare function useDexterWallet(): UseDexterWallet;
 
-export { type ConnectStatus, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useSignInWithDexter };
+export { type ConnectStatus, DexterButton, type DexterButtonProps, DexterMark, SignInWithDexter, type SignInWithDexterProps, type UseDexterWallet, type UseSignInWithDexter, type UseSignInWithDexterConfig, useDexterWallet, useSignInWithDexter };

package/dist/react.js

@@ -12,7 +12,7 @@ import {
   setActiveHandle,
   subscribe,
   switchWallet
-} from "./chunk-LYIBVWRG.js";
+} from "./chunk-W5ISTMTY.js";
 
 // src/useSignInWithDexter.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -59,6 +59,7 @@ var DEFAULT_RPC = "https://api.dexter.cash/proxy/helius/rpc";
 function useSignInWithDexter(config = {}) {
   const { apiBase, rpcUrl = DEFAULT_RPC } = config;
   const [status, setStatus] = useState("idle");
+  const [phase, setPhase] = useState(null);
   const [session, setSession] = useState(null);
   const [vault, setVault] = useState(null);
   const [usdcBalance, setUsdcBalance] = useState(null);
@@ -70,17 +71,20 @@ function useSignInWithDexter(config = {}) {
   }, [vault, rpcUrl]);
   const signIn = useCallback(async () => {
     setError(null);
+    setPhase(null);
     setStatus("pending");
     try {
-      const result = await passkeyLogin(apiBase ? { apiBase } : {});
+      const result = await passkeyLogin(apiBase ? { apiBase } : {}, setPhase);
       setSession(result.session);
       setVault(result.vault ?? null);
       setStatus("done");
+      setPhase(null);
       return result;
     } catch (err) {
       const e = err instanceof ConnectError ? err : new ConnectError("sign_in_failed", String(err));
       setError(e);
       setStatus("error");
+      setPhase(null);
       throw e;
     }
   }, [apiBase]);
@@ -100,6 +104,7 @@ function useSignInWithDexter(config = {}) {
   }, [refreshBalance]);
   return {
     status,
+    phase,
     isVaultConnected: status === "done" && vault !== null,
     signIn,
     disconnect,
@@ -116,6 +121,9 @@ function useSignInWithDexter(config = {}) {
 }
 
 // src/SignInWithDexter.tsx
+import { useEffect as useEffect3 } from "react";
+
+// src/DexterButton.tsx
 import { useEffect as useEffect2 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STYLE_ID = "dexter-connect-button-styles";
@@ -139,6 +147,7 @@ var BUTTON_CSS = `
 .dx-btn:disabled{ cursor:default; filter:saturate(.85) brightness(.98); }
 .dx-btn--secondary{ background:transparent; color:var(--dx-ember); box-shadow:none; border-color:color-mix(in srgb,var(--dx-ember) 45%,transparent); }
 .dx-btn--secondary:hover{ background:color-mix(in srgb,var(--dx-ember) 9%,transparent); filter:none; box-shadow:none; }
+.dx-btn--block{ width:100%; }
 .dx-btn__mark{ flex-shrink:0; }
 .dx-btn__spin{ width:15px; height:15px; flex-shrink:0; border-radius:50%;
   border:2px solid color-mix(in srgb,currentColor 30%,transparent); border-top-color:currentColor;
@@ -152,7 +161,7 @@ var BUTTON_CSS = `
 .dx-chip__x{ margin-left:2px; border:none; background:transparent; color:inherit; cursor:pointer; font-size:16px; line-height:1; opacity:.6; }
 .dx-chip__x:hover{ opacity:1; }
 `;
-function ensureStyles() {
+function ensureDexterButtonStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
@@ -160,16 +169,10 @@ function ensureStyles() {
   el.textContent = BUTTON_CSS;
   document.head.appendChild(el);
 }
-ensureStyles();
+ensureDexterButtonStyles();
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-function shortAddress(addr) {
-  return addr.length > 10 ? `${addr.slice(0, 4)}\u2026${addr.slice(-4)}` : addr;
-}
-function formatUsd(n) {
-  return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
-}
 function DexterMark() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -188,17 +191,65 @@ function DexterMark() {
     }
   );
 }
+function DexterButton(props) {
+  const {
+    children,
+    loading = false,
+    loadingLabel = "Connecting\u2026",
+    variant = "primary",
+    block = false,
+    withMark = true,
+    onClick,
+    disabled = false,
+    className,
+    type = "button"
+  } = props;
+  useEffect2(ensureDexterButtonStyles, []);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      className: cx("dx-btn", variant === "secondary" && "dx-btn--secondary", block && "dx-btn--block", className),
+      onClick,
+      disabled: disabled || loading,
+      "aria-busy": loading,
+      children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "dx-btn__spin", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "dx-btn__doing", children: loadingLabel })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        withMark && /* @__PURE__ */ jsx(DexterMark, {}),
+        children
+      ] })
+    }
+  );
+}
+
+// src/SignInWithDexter.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PHASE_LABEL = {
+  challenge: "Preparing\u2026",
+  passkey: "Waiting for your passkey\u2026",
+  verifying: "Verifying\u2026",
+  finalizing: "Finishing\u2026"
+};
+function shortAddress(addr) {
+  return addr.length > 10 ? `${addr.slice(0, 4)}\u2026${addr.slice(-4)}` : addr;
+}
+function formatUsd(n) {
+  return n.toLocaleString("en-US", { style: "currency", currency: "USD" });
+}
 function SignInWithDexter(props) {
   const {
     onSuccess,
     onError,
     label = "Sign in with Dexter",
     variant = "primary",
+    block = false,
     className,
     showConnectedChip = true,
     ...config
   } = props;
-  useEffect2(ensureStyles, []);
+  useEffect3(ensureDexterButtonStyles, []);
   const c = useSignInWithDexter(config);
   const handleClick = async () => {
     try {
@@ -209,44 +260,38 @@ function SignInWithDexter(props) {
   };
   if (c.isVaultConnected) {
     if (!showConnectedChip) return null;
-    return /* @__PURE__ */ jsxs("span", { className: cx("dx-chip", className), children: [
-      /* @__PURE__ */ jsx("span", { className: "dx-chip__dot", "aria-hidden": true }),
-      /* @__PURE__ */ jsx("span", { children: c.vaultAddress ? shortAddress(c.vaultAddress) : "Connected" }),
-      c.usdcBalance !== null && /* @__PURE__ */ jsxs("span", { className: "dx-chip__bal", children: [
+    return /* @__PURE__ */ jsxs2("span", { className: cx("dx-chip", className), children: [
+      /* @__PURE__ */ jsx2("span", { className: "dx-chip__dot", "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: c.vaultAddress ? shortAddress(c.vaultAddress) : "Connected" }),
+      c.usdcBalance !== null && /* @__PURE__ */ jsxs2("span", { className: "dx-chip__bal", children: [
         formatUsd(c.usdcBalance),
         " available"
       ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "dx-chip__x", onClick: c.disconnect, "aria-label": "Disconnect", children: "\xD7" })
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "dx-chip__x", onClick: c.disconnect, "aria-label": "Disconnect", children: "\xD7" })
     ] });
   }
-  const pending = c.status === "pending";
-  return /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsx2(
+    DexterButton,
     {
-      type: "button",
-      className: cx("dx-btn", variant === "secondary" && "dx-btn--secondary", className),
+      loading: c.status === "pending",
+      loadingLabel: c.phase ? PHASE_LABEL[c.phase] : "Connecting\u2026",
+      variant,
+      block,
+      className,
       onClick: handleClick,
-      disabled: pending,
-      "aria-busy": pending,
-      children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "dx-btn__spin", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "dx-btn__doing", children: "Connecting\u2026" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(DexterMark, {}),
-        label
-      ] })
+      children: label
     }
   );
 }
 
 // src/useDexterWallet.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
 var NO_SUPPORT = { rename: false, prune: false, syncAccepted: false };
 function useDexterWallet() {
   const [activeHandle, setHandle] = useState2(() => getActiveHandle());
   const [wallets, setWallets] = useState2(() => listWallets());
   const [support, setSupport] = useState2(NO_SUPPORT);
-  useEffect3(() => {
+  useEffect4(() => {
     const sync = () => {
       setHandle(getActiveHandle());
       setWallets(listWallets());
@@ -282,6 +327,8 @@ function useDexterWallet() {
   };
 }
 export {
+  DexterButton,
+  DexterMark,
   SignInWithDexter,
   useDexterWallet,
   useSignInWithDexter

package/dist/{signals-CkBFwCNw.d.ts → signals-CXkNJfIo.d.ts}

@@ -32,6 +32,12 @@ interface SignInResult {
     /** Present once vault-review ships the vault-in-login change. */
     vault?: ConnectVault;
 }
+/**
+ * Coarse ceremony phase, emitted as a sign-in/create ceremony progresses so the
+ * UI can show live "connecting steps" instead of one flat spinner:
+ *   challenge → passkey (the OS prompt) → verifying → finalizing (create only).
+ */
+type CeremonyPhase = 'challenge' | 'passkey' | 'verifying' | 'finalizing';
 interface DexterConnectConfig {
     /** dexter-api base. Default https://api.dexter.cash. */
     apiBase?: string;
@@ -139,4 +145,4 @@ declare function syncAcceptedPasskeys(args: {
     rpId?: string;
 }): Promise<boolean>;
 
-export { ACTIVE_WALLET_STORAGE_KEY as A, type ConnectVault as C, type DexterConnectConfig as D, type PasskeyLoginTokens as P, type SignInResult as S, ConnectError as a, type PasskeySignalSupport as b, type StoredWallet as c, getCredentialId as d, ejectActiveWallet as e, forgetWallet as f, getActiveHandle as g, prunePasskey as h, subscribe as i, switchWallet as j, syncAcceptedPasskeys as k, listWallets as l, passkeySignalSupport as p, renamePasskey as r, setActiveHandle as s };
+export { ACTIVE_WALLET_STORAGE_KEY as A, type CeremonyPhase as C, type DexterConnectConfig as D, type PasskeyLoginTokens as P, type SignInResult as S, type ConnectVault as a, ConnectError as b, type PasskeySignalSupport as c, type StoredWallet as d, ejectActiveWallet as e, forgetWallet as f, getActiveHandle as g, getCredentialId as h, prunePasskey as i, subscribe as j, switchWallet as k, listWallets as l, syncAcceptedPasskeys as m, passkeySignalSupport as p, renamePasskey as r, setActiveHandle as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dexterai/connect",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Sign in with Dexter — passkey connector. Composes @dexterai/vault.",
   "type": "module",
   "exports": {