cilantro-react 0.1.4 → 0.1.6

package/README.md

@@ -1,800 +1,1247 @@
 # cilantro-react
 
-React SDK/UI for [Cilantro Smart Wallet](https://www.npmjs.com/package/cilantro-sdk). Provides providers, hooks, and UI components so you can add auth, wallets, signers, and signing flows without wiring the low-level SDK directly. Components use [Shadcn/UI](https://ui.shadcn.com)-style primitives and are customizable via `className` and `classNames`.
+React SDK/UI for [Cilantro Smart Wallet](https://www.npmjs.com/package/cilantro-sdk). Provides a single context provider, hooks, and UI components for authentication, wallets, signers, and transactions.
+
+## Table of Contents
+
+- [cilantro-react](#cilantro-react)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Polyfills (Browser)](#polyfills-browser)
+  - [Quick Start](#quick-start)
+  - [CilantroProvider](#cilantroprovider)
+    - [Props](#props)
+    - [Storage Adapters](#storage-adapters)
+  - [Hooks](#hooks)
+    - [useAuth](#useauth)
+    - [useWallet](#usewallet)
+    - [useSigners](#usesigners)
+    - [usePasskey](#usepasskey)
+    - [useExternalWallet](#useexternalwallet)
+    - [useSendTransaction](#usesendtransaction)
+    - [useCilantroConfig](#usecilantroconfig)
+  - [Components](#components)
+    - [Auth Components](#auth-components)
+      - [LoginForm](#loginform)
+      - [LogoutButton](#logoutbutton)
+      - [AuthGuard](#authguard)
+    - [Wallet Components](#wallet-components)
+      - [WalletSelector](#walletselector)
+      - [CreateWalletForm](#createwalletform)
+      - [WalletAddress](#walletaddress)
+      - [WalletBalance](#walletbalance)
+      - [ConnectWalletButton](#connectwalletbutton)
+    - [Signer Components](#signer-components)
+      - [SignerSelector](#signerselector)
+      - [SignerList](#signerlist)
+      - [CreateEmailSignerForm](#createemailsignerform)
+      - [CreatePhoneSignerForm](#createphonesignerform)
+      - [AddPasskeyButton](#addpasskeybutton)
+    - [Transaction Components](#transaction-components)
+      - [SendSOLForm](#sendsolform)
+      - [SendSPLForm](#sendsplform)
+      - [TransactionStatus](#transactionstatus)
+      - [TransactionHistory](#transactionhistory)
+    - [Layout Components](#layout-components)
+      - [CilantroConnect](#cilantroconnect)
+      - [LoadingOverlay](#loadingoverlay)
+      - [ErrorBoundary](#errorboundary)
+  - [Theming](#theming)
+    - [Built-in Theme (ThemeProvider)](#built-in-theme-themeprovider)
+    - [Import Theme CSS Directly](#import-theme-css-directly)
+  - [Advanced Usage](#advanced-usage)
+    - [Low-Level Signer Signing](#low-level-signer-signing)
+    - [Solana Connection Adapter](#solana-connection-adapter)
+    - [Utilities](#utilities)
+  - [Types](#types)
+  - [License](#license)
 
-## Install
+---
+
+## Installation
 
 ```bash
-npm install cilantro-react cilantro-sdk react
+npm install cilantro-react cilantro-sdk
+# or
+yarn add cilantro-react cilantro-sdk
+# or
+pnpm add cilantro-react cilantro-sdk
 ```
 
-**Peer dependencies:** `react` (^18.0.0 || ^19.0.0), `cilantro-sdk` (^0.0.40). For transaction signing and Solana helpers, optionally install `@solana/web3.js` (^1.98.0).
+**Requirements:**
 
-**Styling:** Components use Tailwind CSS and Shadcn-compatible class names. Ensure your app has [Tailwind CSS](https://tailwindcss.com) configured; for theming, use your own Shadcn theme or CSS variables so styles apply correctly.
+- React 18+
+- `cilantro-sdk` (peer dependency)
+- [Tailwind CSS](https://tailwindcss.com) for component styling (components use Tailwind-compatible class names)
 
-## Polyfills
+### Polyfills (Browser)
 
-Import the SDK polyfills once before any SDK usage (e.g. in your app entry or root layout):
+Import polyfills at the very top of your entry file (before any other imports):
 
 ```ts
-import 'cilantro-sdk/polyfills'
+import 'cilantro-sdk/polyfills';
 ```
 
-## Setup
+---
 
-Wrap your app with `CilantroProvider` and pass your platform API key:
+## Quick Start
 
 ```tsx
-import { CilantroProvider } from 'cilantro-react'
+import 'cilantro-sdk/polyfills';
+import { CilantroProvider, LoginForm, AuthGuard, useAuth, useWallet } from 'cilantro-react';
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+function App() {
   return (
-    <CilantroProvider platformApiKey="your-platform-api-key">
-      {children}
+    <CilantroProvider
+      apiKey={import.meta.env.VITE_API_KEY}
+      baseURL="https://api.cilantro.gg"
+    >
+      <AuthGuard>
+        <Dashboard />
+      </AuthGuard>
     </CilantroProvider>
-  )
+  );
+}
+
+function Dashboard() {
+  const { user, logout } = useAuth();
+  const { wallet, wallets } = useWallet();
+
+  return (
+    <div>
+      <p>Welcome, {user?.username}</p>
+      <p>Wallet: {wallet?.walletName}</p>
+      <button onClick={logout}>Logout</button>
+    </div>
+  );
 }
 ```
 
-**CilantroProvider props:**
+---
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `platformApiKey` | `string` | **Required.** Your Cilantro platform API key. |
-| `apiUrl` | `string` | Optional API base URL. |
-| `jwtStorageKey` | `string` | localStorage key for JWT (default: `cilantro_jwt`). |
-| `walletStorageKey` | `string` | localStorage key for selected wallet id (default: `cilantro_selected_wallet_id`). |
-| `onLoginSuccess` | `() => void` | Callback after successful login. |
-| `onLogout` | `() => void` | Callback after logout. |
-| `onRegisterSuccess` | `() => void` | Callback after successful registration. |
+## CilantroProvider
 
-**Connection:** The library does not create a Solana RPC connection. For transaction sign-and-send (wallet-adapter or passkey), pass your own `connection` from `@solana/web3.js` (or your Solana config) into `useTransactionSigning` / `TransactionSigningForm`. See [Transaction signing](#transaction-signing) below.
+The root provider that initializes configuration, storage, authentication, and wallet state.
 
----
+```tsx
+import { CilantroProvider, createIndexedDBAdapter } from 'cilantro-react';
 
-## API reference
+const storage = createIndexedDBAdapter();
 
-### Providers
+<CilantroProvider
+  apiKey="your-platform-api-key"
+  baseURL="https://api.cilantro.gg"
+  storageAdapter={storage}
+>
+  <App />
+</CilantroProvider>
+```
 
-- **CilantroProvider** – Root provider: initializes storage, auth, and wallet context. Requires `platformApiKey`; optional `apiUrl`, storage keys, and callbacks. Use this unless you only need auth.
-- **CilantroAuthProvider** – Auth only (token, user, login, register, logout). Use when you don’t need the full provider stack (e.g. auth-only pages).
-- **WalletProvider** – Wallet list and selection. Depends on auth; usually used inside `CilantroProvider`.
-- **ThemeProvider** – Optional: sets `data-theme="light"` or `"dark"` on a wrapper and injects default CSS variables for light/dark. Props: `theme` (`"light"` | `"dark"` | `"system"`), `defaultTheme`, `storageKey`, `className`, `injectStyles`. See [Themes](#built-in-theme-themeprovider).
+### Props
 
-**CilantroAuthProvider props:** `platformApiKey` (required), `apiUrl`, `jwtStorageKey`, `onLoginSuccess`, `onLogout`, `onRegisterSuccess`.
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `apiKey` | `string` | No* | — | Platform API key for server-side operations |
+| `baseURL` | `string` | No | `https://api.cilantro.gg` | API base URL |
+| `storageAdapter` | `DeviceKeyStorage` | No | IndexedDB | Storage adapter for device keys |
+| `children` | `ReactNode` | Yes | — | App content |
 
-**WalletProvider props:** `storageKey` (default: `cilantro_selected_wallet_id`).
+*Either `apiKey` or JWT (obtained via login) is required for authenticated requests.
 
----
+### Storage Adapters
 
-### Custom hooks (detailed)
+For email and phone signers, device keys must be stored. Choose an adapter:
 
-All hooks must be used within the appropriate provider (see each hook below).
+| Adapter | Use Case |
+|---------|----------|
+| `createIndexedDBAdapter()` | **Production** – persistent, large capacity |
+| `createLocalStorageAdapter()` | Development – simple, limited capacity |
+| `createMemoryAdapter()` | Testing – not persisted |
 
-#### useCilantroAuth
+```tsx
+import { createIndexedDBAdapter, createLocalStorageAdapter, createMemoryAdapter } from 'cilantro-react';
 
-Auth state and actions. Use inside `CilantroAuthProvider` or `CilantroProvider`.
+// Production
+const storage = createIndexedDBAdapter();
 
-**Returns:** `CilantroAuthContextType`
+// Development
+const storage = createLocalStorageAdapter();
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `token` | `string \| null` | JWT token (null when not authenticated). |
-| `user` | `User \| null` | User object: `{ username?, email?, userType? }`. |
-| `isAuthenticated` | `boolean` | True when `token` is set. |
-| `isLoading` | `boolean` | True while restoring session from storage. |
-| `login` | `(usernameOrEmail: string, password: string) => Promise<void>` | Log in; throws on error. |
-| `register` | `(username: string, email: string, password: string, isActive?: boolean) => Promise<void>` | Register and log in; throws on error. |
-| `logout` | `() => void` | Clear token and user; calls `onLogout` if provided. |
+// Testing
+const storage = createMemoryAdapter();
+```
 
 ---
 
-#### useWallets
+## Hooks
 
-Wallet list and selection. Use inside `CilantroProvider` (which includes `WalletProvider`).
+### useAuth
 
-**Returns:** `WalletContextType`
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `wallets` | `WalletData[]` | List of wallets for the authenticated user. |
-| `selectedWallet` | `WalletData \| null` | Currently selected wallet (persisted in localStorage). |
-| `selectWallet` | `(walletId: string) => void` | Set the selected wallet by id. |
-| `refreshWallets` | `() => Promise<void>` | Reload wallets from the API. |
-| `isLoading` | `boolean` | True while loading wallets. |
+Authentication state and actions.
 
-**WalletData:** `{ id, walletId, walletName?, address?, walletAddress?, chain?, active?, ... }`.
+```tsx
+import { useAuth } from 'cilantro-react';
 
----
+function MyComponent() {
+  const { user, jwt, isLoading, isAuthenticated, login, logout } = useAuth();
 
-#### useSelectedWallet
+  const handleLogin = async () => {
+    await login({ usernameOrEmail: 'user@example.com', password: 'password123' });
+  };
 
-Convenience hook when you only need the currently selected wallet (and loading/refresh), not the full list. Use inside `CilantroProvider`.
+  return (
+    <div>
+      {isLoading && <p>Loading...</p>}
+      {isAuthenticated ? (
+        <>
+          <p>Hello, {user?.username}</p>
+          <button onClick={logout}>Logout</button>
+        </>
+      ) : (
+        <button onClick={handleLogin}>Login</button>
+      )}
+    </div>
+  );
+}
+```
 
-**Returns:** `UseSelectedWalletResult`
+**Returns: `UseAuthResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `selectedWallet` | `WalletData \| null` | Currently selected wallet. |
-| `isLoading` | `boolean` | True while loading wallets. |
-| `refreshWallets` | `() => Promise<void>` | Reload wallets from the API. |
-
-**Use when:** You need the current wallet without the full wallet list or `selectWallet`.
+| `user` | `User \| null` | Current user object (`{ username?, email?, userType? }`) |
+| `jwt` | `string \| null` | JWT token (null when not authenticated) |
+| `isLoading` | `boolean` | True while restoring session from storage |
+| `isAuthenticated` | `boolean` | True when user has valid JWT |
+| `login` | `(params: { usernameOrEmail: string; password: string }) => Promise<void>` | Log in; throws on error |
+| `logout` | `() => void` | Clear session and token |
 
 ---
 
-#### useWalletAddress
+### useWallet
+
+Wallet state and actions.
+
+```tsx
+import { useWallet } from 'cilantro-react';
 
-Returns the address of the currently selected wallet (handles both `address` and `walletAddress` on WalletData). Use inside `CilantroProvider`.
+function WalletManager() {
+  const { wallet, wallets, createWallet, selectWallet, isLoading } = useWallet();
 
-**Returns:** `string | null`
+  const handleCreate = async () => {
+    const result = await createWallet({ name: 'My New Wallet' });
+    console.log('Created:', result.data.id);
+  };
 
-**Use when:** You need the selected wallet's address for display or building transactions.
+  return (
+    <div>
+      {isLoading && <p>Loading wallets...</p>}
+      <p>Current wallet: {wallet?.walletName ?? 'None selected'}</p>
+      <ul>
+        {wallets.map((w) => (
+          <li key={w.id} onClick={() => selectWallet(w.id)}>
+            {w.walletName}
+          </li>
+        ))}
+      </ul>
+      <button onClick={handleCreate}>Create Wallet</button>
+    </div>
+  );
+}
+```
+
+**Returns: `UseWalletResult`**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `wallet` | `WalletData \| null` | Currently selected wallet |
+| `wallets` | `WalletData[]` | All wallets for the authenticated user |
+| `createWallet` | `(params: { name: string; userId?: string }) => Promise<WalletControllerCreateResult>` | Create a new wallet |
+| `selectWallet` | `(walletId: string) => void` | Select a wallet by ID |
+| `isLoading` | `boolean` | True while loading wallets |
 
 ---
 
-#### useSigners
+### useSigners
+
+Signers for a specific wallet.
 
-Load signers for a wallet. Use inside `CilantroProvider` (auth required).
+```tsx
+import { useSigners } from 'cilantro-react';
+
+function SignerManager({ walletId }: { walletId: string }) {
+  const {
+    signers,
+    isLoading,
+    error,
+    refresh,
+    createEmailSigner,
+    createPhoneSigner,
+    revokeSigner,
+  } = useSigners(walletId);
+
+  const handleCreateEmail = async () => {
+    const signer = await createEmailSigner({ email: 'user@example.com' });
+    console.log('Created signer:', signer.signerId);
+  };
+
+  const handleCreatePhone = async () => {
+    const signer = await createPhoneSigner({ phone: '+1234567890' });
+    console.log('Created signer:', signer.signerId);
+  };
 
-**Options:** `UseSignersOptions`
+  return (
+    <div>
+      {isLoading && <p>Loading signers...</p>}
+      {error && <p className="text-red-500">{error}</p>}
+      <ul>
+        {signers.map((s) => (
+          <li key={s.id}>
+            {s.email || s.phone || s.id} ({s.signerType})
+            <button onClick={() => revokeSigner(s.id)}>Revoke</button>
+          </li>
+        ))}
+      </ul>
+      <button onClick={handleCreateEmail}>Add Email Signer</button>
+      <button onClick={handleCreatePhone}>Add Phone Signer</button>
+      <button onClick={refresh}>Refresh</button>
+    </div>
+  );
+}
+```
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `walletId` | `string \| null \| undefined` | Wallet ID to load signers for. If omitted, you can pass it from `useWallets().selectedWallet?.id`. |
+**Parameters:**
 
-**Returns:** `UseSignersResult`
+- `walletId: string | null | { walletId?: string | null }` — Wallet ID to load signers for
+
+**Returns: `UseSignersResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `signers` | `SignerData[]` | List of signers for the wallet. |
-| `isLoading` | `boolean` | True while loading. |
-| `error` | `string \| null` | Error message if load failed. |
-| `refresh` | `() => Promise<void>` | Reload signers. |
-
-When `walletId` is null/undefined, `signers` is empty and `refresh` no-ops.
+| `signers` | `SignerData[]` | List of signers for the wallet |
+| `isLoading` | `boolean` | True while loading |
+| `error` | `string \| null` | Error message if load failed |
+| `refresh` | `() => Promise<void>` | Reload signers |
+| `createEmailSigner` | `(params: { email: string }) => Promise<SignerInfo>` | Create email signer |
+| `createPhoneSigner` | `(params: { phone: string }) => Promise<SignerInfo>` | Create phone signer |
+| `revokeSigner` | `(signerId: string) => Promise<void>` | Revoke a signer |
 
 ---
 
-#### useSignersForSelectedWallet
+### usePasskey
 
-Signers for the currently selected wallet (or a `walletId` override). Composes `useWallets` + `useSigners` so you don't pass `walletId` yourself. Use inside `CilantroProvider`.
+Passkey (WebAuthn) registration and authentication.
 
-**Options:** `UseSignersForSelectedWalletOptions`
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `walletId` | `string \| null \| undefined` | Override; when omitted, uses the selected wallet from context. |
+```tsx
+import { usePasskey } from 'cilantro-react';
 
-**Returns:** Same as `useSigners` – `UseSignersResult` (`signers`, `isLoading`, `error`, `refresh`).
+function PasskeyManager({ walletId }: { walletId: string }) {
+  const { isSupported, register, authenticate, isLoading } = usePasskey(walletId);
 
-**Use when:** You need signers for the current wallet without calling `useWallets()` and `useSigners({ walletId })` in every component (e.g. SignerList-style UIs).
+  if (!isSupported) {
+    return <p>Passkeys not supported in this browser.</p>;
+  }
 
----
+  const handleRegister = async () => {
+    const result = await register();
+    console.log('Passkey registered:', result.signerId);
+  };
 
-#### useSignerSelection
+  const handleAuthenticate = async () => {
+    const result = await authenticate();
+    console.log('Authenticated with passkey');
+  };
 
-Wallet + signer selection state for signing flows. Uses `useWallets` and `useSigners` internally. Use inside `CilantroProvider`.
+  return (
+    <div>
+      <button onClick={handleRegister} disabled={isLoading}>
+        {isLoading ? 'Registering...' : 'Register Passkey'}
+      </button>
+      <button onClick={handleAuthenticate} disabled={isLoading}>
+        {isLoading ? 'Authenticating...' : 'Authenticate'}
+      </button>
+    </div>
+  );
+}
+```
 
-**Options:** `UseSignerSelectionOptions`
+**Parameters:**
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `walletId` | `string \| null \| undefined` | Override wallet ID; if not set, uses `useWallets().selectedWallet?.id`. |
-| `signingMethod` | `'wallet-adapter' \| 'sdk-signer' \| null` | Current signing method (default: `'sdk-signer'`). When `'wallet-adapter'`, signer selection is ignored. |
+- `walletId: string | undefined` — Wallet ID to register passkey for
 
-**Returns:** `UseSignerSelectionResult`
+**Returns: `UsePasskeyResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `selectedWalletId` | `string` | Effective wallet ID (override or from context). |
-| `setSelectedWalletId` | `(id: string) => void` | Set wallet ID (when not using context selection). |
-| `availableSigners` | `SignerData[]` | Signers for the selected wallet (from `useSigners`). |
-| `selectedSigner` | `SignerData \| null` | Currently selected signer. |
-| `setSelectedSigner` | `(signer: SignerData \| null) => void` | Set selected signer. |
-| `isLoadingSigners` | `boolean` | True while signers are loading. |
-| `reset` | `() => void` | Clear `selectedWalletId` and `selectedSigner`. |
-
-**SigningMethod:** `'wallet-adapter'` = use wallet adapter for signing; `'sdk-signer'` = use a Cilantro signer (email, phone, passkey, external, etc.).
+| `isSupported` | `boolean` | True if WebAuthn is available |
+| `register` | `() => Promise<{ signerId: string; isNew: boolean }>` | Register a new passkey |
+| `authenticate` | `(signerId?: string) => Promise<{ credential: unknown }>` | Authenticate with passkey |
+| `isLoading` | `boolean` | True during operation |
 
 ---
 
-#### useDelegatedKeys
+### useExternalWallet
+
+Connect to external Solana wallets (Phantom, Solflare, etc.).
 
-Load delegated keys for a wallet (same data as DelegatedKeySelector). Use for custom delegated-key UI or logic. Use inside `CilantroProvider` (auth required).
+```tsx
+import { useExternalWallet } from 'cilantro-react';
 
-**Options:** `UseDelegatedKeysOptions`
+function ExternalWalletConnect() {
+  const { wallets, connectedWallet, connect, disconnect } = useExternalWallet();
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `walletId` | `string \| null \| undefined` | Wallet ID to load delegated keys for. When null/undefined, keys are empty. |
-| `filterActive` | `boolean` | When true (default), filter to active and non-expired keys only. |
+  return (
+    <div>
+      {connectedWallet ? (
+        <div>
+          <p>Connected: {connectedWallet.name}</p>
+          <p>Public Key: {connectedWallet.publicKey?.toBase58()}</p>
+          <button onClick={disconnect}>Disconnect</button>
+        </div>
+      ) : (
+        <div>
+          {wallets.map((wallet) => (
+            <button key={wallet.name} onClick={() => connect(wallet)}>
+              Connect {wallet.name}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+```
 
-**Returns:** `UseDelegatedKeysResult`
+**Returns: `UseExternalWalletResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `keys` | `DelegatedKeyData[]` | List of delegated keys. |
-| `isLoading` | `boolean` | True while loading. |
-| `error` | `string \| null` | Error message if load failed. |
-| `refresh` | `() => Promise<void>` | Reload delegated keys. |
-
-**Use when:** You need the list of delegated keys in custom UI or logic without using the DelegatedKeySelector component.
+| `wallets` | `SolanaWallet[]` | Detected Solana wallets (Phantom, Solflare, etc.) |
+| `connectedWallet` | `SolanaWallet \| null` | Currently connected wallet |
+| `connect` | `(wallet: SolanaWallet) => Promise<void>` | Connect to a wallet |
+| `disconnect` | `() => void` | Disconnect current wallet |
 
 ---
 
-#### useCanSign
+### useSendTransaction
 
-Derived "is the user ready to sign?" for disabling sign buttons or showing prompts. Use inside `CilantroProvider`.
+Send SOL and SPL tokens.
 
-**Options:** `UseCanSignOptions`
+```tsx
+import { useSendTransaction } from 'cilantro-react';
+
+function SendTransaction({ walletId, signerId }: { walletId: string; signerId: string }) {
+  const { sendSOL, sendSPL, isPending, error } = useSendTransaction(walletId, signerId, 'email');
+
+  const handleSendSOL = async () => {
+    const result = await sendSOL({
+      recipientAddress: '7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU',
+      amountLamports: 100000000, // 0.1 SOL
+    });
+    console.log('Transaction signature:', result.data.signature);
+  };
+
+  const handleSendSPL = async () => {
+    const result = await sendSPL({
+      mintAddress: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', // USDC
+      recipientAddress: '7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU',
+      amount: 1000000, // 1 USDC (6 decimals)
+    });
+    console.log('Transaction signature:', result.data.signature);
+  };
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `signingMethod` | `SigningMethod \| null` | Override; default `'sdk-signer'`. |
-| `requireSigner` | `boolean` | When true (default), require a selected signer for sdk-signer. |
-| `walletAdapterConnected` | `boolean` | When using wallet-adapter, pass true when the adapter is connected so `canSign*` reflects it. |
+  return (
+    <div>
+      {error && <p className="text-red-500">{error}</p>}
+      <button onClick={handleSendSOL} disabled={isPending}>
+        {isPending ? 'Sending...' : 'Send SOL'}
+      </button>
+      <button onClick={handleSendSPL} disabled={isPending}>
+        {isPending ? 'Sending...' : 'Send USDC'}
+      </button>
+    </div>
+  );
+}
+```
+
+**Parameters:**
 
-**Returns:** `UseCanSignResult`
+- `walletId: string | undefined` — Wallet to send from
+- `signerId?: string` — Signer ID (optional)
+- `signerType?: 'email' | 'phone' | 'passkey' | 'external'` — Signer type (optional)
+
+**Returns: `UseSendTransactionResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `hasToken` | `boolean` | True when the user has a valid token. |
-| `hasWallet` | `boolean` | True when a wallet is selected. |
-| `hasSigner` | `boolean` | True when a signer is selected (sdk-signer) or wallet-adapter is connected (when `walletAdapterConnected` is passed). |
-| `canSignMessage` | `boolean` | True when ready to sign a message. |
-| `canSignTransaction` | `boolean` | True when ready to sign/send a transaction (connection still required for send). |
-
-**Use when:** You need to disable sign buttons or show "Select wallet" / "Select signer" prompts without reimplementing token/wallet/signer checks. For wallet-adapter, pass `walletAdapterConnected` from your adapter state.
+| `sendSOL` | `(params: { recipientAddress: string; amountLamports: number }) => Promise<SubmitTransactionResult>` | Send SOL |
+| `sendSPL` | `(params: { mintAddress: string; recipientAddress: string; amount: number }) => Promise<SubmitTransactionResult>` | Send SPL tokens |
+| `isPending` | `boolean` | True while sending |
+| `error` | `string \| null` | Error message if send failed |
 
 ---
 
-#### useMessageSigning
+### useCilantroConfig
 
-Sign a message with the selected signer or wallet-adapter. Use inside `CilantroProvider`.
+Access SDK configuration and storage adapter.
 
-**Options:** `UseMessageSigningOptions`
+```tsx
+import { useCilantroConfig } from 'cilantro-react';
+
+function ConfigDisplay() {
+  const { config, storage } = useCilantroConfig();
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `token` | `string \| null` | JWT (usually from `useCilantroAuth().token`). |
-| `signingMethod` | `SigningMethod \| null` | `'sdk-signer'` or `'wallet-adapter'`. |
-| `selectedSigner` | `SignerData \| null` | Signer to use when `signingMethod === 'sdk-signer'`. |
-| `selectedWalletId` | `string` | Wallet ID when using SDK signer. |
-| `walletAdapterSignMessage` | `(message: Uint8Array) => Promise<Uint8Array>` | Optional; required when `signingMethod === 'wallet-adapter'`. |
-| `walletAdapterPublicKey` | `string \| null` | Optional; included in success detail when using wallet-adapter. |
+  return (
+    <div>
+      <p>API Key: {config.apiKey ? '***' : 'Not set'}</p>
+      <p>Base URL: {config.baseURL}</p>
+      <p>Storage: {storage ? 'Configured' : 'Not configured'}</p>
+    </div>
+  );
+}
+```
 
-**Returns:** `UseMessageSigningResult`
+**Returns: `UseCilantroConfigResult`**
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `messageText` | `string` | Current message (default: `"Hello, Solana!"`). |
-| `setMessageText` | `(text: string) => void` | Update message. |
-| `signResultState` | `ActionState` | `{ status, message?, detail? }` – idle, loading, success, or error. |
-| `isSigning` | `boolean` | True while signing. |
-| `handleSign` | `() => Promise<void>` | Sign the current message; updates `signResultState`. |
-| `reset` | `() => void` | Reset message to default and clear result state. |
+| `config` | `{ apiKey?: string; baseURL?: string; jwt?: string }` | Current configuration |
+| `storage` | `DeviceKeyStorage \| null` | Storage adapter instance |
 
 ---
 
-#### useTransactionSigning
+## Components
 
-Sign and/or send a transaction. Use inside `CilantroProvider`.
+### Auth Components
 
-**Options:** `UseTransactionSigningOptions`
+#### LoginForm
 
-| Option | Type | Description |
-|--------|------|-------------|
-| `token` | `string \| null` | JWT (usually from `useCilantroAuth().token`). |
-| `signingMethod` | `SigningMethod \| null` | `'sdk-signer'` or `'wallet-adapter'`. |
-| `selectedSigner` | `SignerData \| null` | Signer when `signingMethod === 'sdk-signer'`. |
-| `selectedWalletId` | `string` | Wallet ID when using SDK signer. |
-| `walletAdapterSignTransaction` | `(transaction: Transaction) => Promise<Transaction>` | Optional; required for wallet-adapter signing. |
-| `walletAdapterPublicKey` | `string \| null` | Optional; required for wallet-adapter send. |
-| `connection` | `SignAndSendConnection \| null` | **Required for sign-and-send** when using wallet-adapter or passkey. Provide your Solana `Connection` (e.g. from `@solana/web3.js`). |
+Username/email + password login form with loading and error states.
 
-**Returns:** `UseTransactionSigningResult`
+```tsx
+import { LoginForm } from 'cilantro-react';
+
+<LoginForm
+  onSuccess={() => console.log('Logged in!')}
+  onError={(err) => console.error(err.message)}
+  title="Welcome back"
+  description="Sign in to your account"
+  submitLabel="Sign in"
+  renderSwitchToRegister={() => <a href="/register">Create account</a>}
+  className="max-w-sm"
+/>
+```
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `transactionResultState` | `ActionState` | Result of last sign/send (idle, loading, success, error). |
-| `isSigningTransaction` | `boolean` | True while `signTransaction` is running. |
-| `isSendingTransaction` | `boolean` | True while `signAndSendTransaction` is running. |
-| `signTransaction` | `(transaction: Transaction) => Promise<void>` | Sign only (no send). Passkey signers cannot sign-only; use sign-and-send. |
-| `signAndSendTransaction` | `(transaction: Transaction) => Promise<void>` | Sign and send. Requires `connection` for wallet-adapter and passkey. |
-| `reset` | `() => void` | Set `transactionResultState` back to idle. |
+**Props:**
 
-**Connection:** For passkey or wallet-adapter sign-and-send, you must pass a `connection` that has `getLatestBlockhash`, `sendRawTransaction`, and `confirmTransaction`. The library does not create a connection.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSuccess` | `() => void` | — | Called after successful login |
+| `onError` | `(error: Error) => void` | — | Called on login error |
+| `title` | `string` | `"Sign in"` | Form title |
+| `description` | `string` | — | Form description |
+| `submitLabel` | `string` | `"Sign in"` | Submit button label |
+| `rememberMe` | `boolean` | — | Show remember me option |
+| `renderSwitchToRegister` | `() => ReactNode` | — | Render link to register page |
+| `className` | `string` | — | Root element class |
+| `classNames` | `LoginFormClassNames` | — | Class names for inner elements |
 
 ---
 
-### Components (detailed)
+#### LogoutButton
 
-All components accept `className`. Many accept a `classNames` object (see TypeScript types e.g. `WalletSelectorClassNames`, `MessageSigningFormClassNames`).
+Logout button with optional confirmation dialog.
 
-#### Auth components
-
-| Component | Purpose | Key props |
-|-----------|---------|-----------|
-| **AuthForm** | Single form that toggles login/register. | `defaultMode?: 'login' \| 'register'`, `onSuccess?`, `onError?(error: string)`, `loginTitle`, `registerTitle`, `loginDescription`, `registerDescription`, `loginSubmitLabel`, `registerSubmitLabel`, `switchToRegisterText`, `switchToLoginText`, `isActive?`, `className`, `classNames?` (root, header, title, description, form, label, input, submitButton, toggle, toggleLink, error). |
-| **LoginForm** | Login (username/email + password). | `onSuccess?`, `onError?(error: string)`, `submitLabel`, `title`, `description`, `renderSwitchToRegister? () => ReactNode`, `className`, `classNames?`. |
-| **RegisterForm** | Registration (username, email, password). | `onSuccess?`, `onError?(error: string)`, `submitLabel`, `title`, `description`, `isActive?` (default true), `renderSwitchToLogin? () => ReactNode`, `className`, `classNames?`. |
-| **AuthGuard** | Renders children when authenticated; shows fallback otherwise. | `children`, `fallback?: ReactNode` (default: `<LoginForm />`), `showFallback?` (default true), `className`, `classNames?` (root, fallback). |
+```tsx
+import { LogoutButton } from 'cilantro-react';
+
+<LogoutButton
+  onLogout={() => console.log('Logged out')}
+  confirmBeforeLogout={true}
+>
+  Sign out
+</LogoutButton>
+```
 
-#### Wallet and signer components
+**Props:**
 
-| Component | Purpose | Key props |
-|-----------|---------|-----------|
-| **WalletSelector** | Wallet dropdown (Shadcn Select). | `value?`, `onWalletChange?(walletId, wallet)`, `placeholder`, `className`, `classNames?` (root, trigger, content, item). Headless: `children?`, `renderTrigger?`, `renderList?`. |
-| **SignerSelector** | List/select signers (buttons). | `selectedWalletId?`, `availableSigners`, `selectedSigner`, `onSignerSelect(signer)`, `isLoadingSigners?`, `className`, `classNames?` (root, list, item, message). Headless: `children?`, `renderList?`. |
-| **SignerList** | List signers + “Add signer” (opens AddSignerForm in dialog). | `walletId`, `onSignerAdded`, `className`, `classNames`. Headless: `children`. |
-| **AddSignerForm** | Add signer (email, phone, passkey, external wallet). | `walletId`, `open?`, `onOpenChange?`, `onSuccess?`, `onCancel?`, `onError?(error)`, `asDialog?` (default true), `className`, `classNames?`. |
-| **DelegatedKeySelector** | Select delegated key for a wallet. | `walletId`, `value?`, `onChange?(keyId, key)`, `filterActive?` (default true), `placeholder`, `className`, `classNames?`. Headless: `children?` (keys, selectedKeyId, onSelect, isLoading, error, refresh). |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onLogout` | `() => void` | — | Called after logout |
+| `confirmBeforeLogout` | `boolean` | `false` | Show confirmation dialog |
+| `className` | `string` | — | Button class |
+| `children` | `ReactNode` | `"Log out"` | Button content |
 
-#### UI primitives
+---
 
-- **Skeleton** – Shadcn-style skeleton placeholder (`rounded-md bg-muted animate-pulse`). Use for loading states or custom UI. Exported for headless use.
-- **ThemeProvider** – See [Themes](#built-in-theme-themeprovider).
+#### AuthGuard
 
-#### Signing form components
+Protect content behind authentication. Shows fallback (default: LoginForm) when not authenticated.
 
-| Component | Purpose | Key props |
-|-----------|---------|-----------|
-| **MessageSigningForm** | Message input + sign button; shows wallet/signer context. | `token?`, `selectedWalletId?`, `selectedSigner?`, `signingMethod?`, `walletAdapterSignMessage?`, `walletAdapterPublicKey?`, `showContext?`, `showCharCount?`, `className`, `classNames?`. Headless: `children?` (messageText, setMessageText, signResultState, isSigning, handleSign, reset). |
-| **TransactionSigningForm** | Sign/send transaction; pass `connection` for sign-and-send. | `token?`, `selectedWalletId?`, `selectedSigner?`, `signingMethod?`, `walletAdapterSignTransaction?`, `walletAdapterPublicKey?`, **`connection?`** (required for wallet-adapter or passkey sign-and-send), `showContext?`, `className`, `classNames?`. Headless: `children?` (transactionResultState, isSigningTransaction, isSendingTransaction, signTransaction, signAndSendTransaction, reset). |
+```tsx
+import { AuthGuard, LoginForm } from 'cilantro-react';
 
-When token/wallet/signer/signingMethod are omitted, MessageSigningForm and TransactionSigningForm use `useCilantroAuth().token` and `useSignerSelection()` internally.
+// Basic usage - shows LoginForm when not authenticated
+<AuthGuard>
+  <ProtectedContent />
+</AuthGuard>
 
-### Types (detailed)
+// Custom fallback
+<AuthGuard fallback={<CustomLoginPage />}>
+  <ProtectedContent />
+</AuthGuard>
 
-#### ActionState
+// Redirect instead of showing fallback
+<AuthGuard redirectTo="/login">
+  <ProtectedContent />
+</AuthGuard>
 
-Used by signing hooks and forms for result state.
+// Hide content when not authenticated (no fallback)
+<AuthGuard showFallback={false}>
+  <ProtectedContent />
+</AuthGuard>
 
-```ts
-type ActionState<T = unknown> = {
-  status: 'idle' | 'loading' | 'success' | 'error';
-  message?: string;
-  detail?: T;
-};
+// Show skeleton while loading
+<AuthGuard useSkeleton={true}>
+  <ProtectedContent />
+</AuthGuard>
 ```
 
-- **idle** – No operation yet.
-- **loading** – Sign/send in progress.
-- **success** – Done; `message` and optional `detail` (e.g. signature, explorer URL).
-- **error** – Failed; `message` (and optional `detail`).
+**Props:**
 
-#### User
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | Content to show when authenticated |
+| `fallback` | `ReactNode` | `<LoginForm />` | Content when not authenticated |
+| `redirectTo` | `string` | — | Redirect URL when not authenticated |
+| `showFallback` | `boolean` | `true` | Whether to show fallback or null |
+| `useSkeleton` | `boolean` | `false` | Show skeleton while loading auth state |
+| `className` | `string` | — | Root element class |
+| `classNames` | `AuthGuardClassNames` | — | Class names for inner elements |
 
-From `useCilantroAuth().user`:
+---
 
-```ts
-interface User {
-  username?: string;
-  email?: string;
-  userType?: string;
-}
-```
+### Wallet Components
 
-#### WalletData
+#### WalletSelector
 
-From `useWallets().wallets` / `selectedWallet`:
+Dropdown to select from available wallets.
 
-```ts
-interface WalletData {
-  id: string;
-  walletId: string;
-  walletName?: string;
-  address?: string;
-  walletAddress?: string;
-  chain?: string;
-  active?: boolean;
-  [key: string]: unknown;
-}
-```
+```tsx
+import { WalletSelector } from 'cilantro-react';
 
-#### SignerData
+// Controlled
+const [walletId, setWalletId] = useState('');
+<WalletSelector value={walletId} onChange={setWalletId} />
 
-From `useSigners().signers` or `useSignerSelection().availableSigners` / `selectedSigner`. Used by SignerSelector, MessageSigningForm, TransactionSigningForm. Contains at least: `id`, `signerId`, `type` or `signerType`, `walletId`, `publicKey` / `signerPubkey`, and optional `email`, `phone`, `isActive`, `signerConfig`, etc. See TypeScript type `SignerData` for full shape.
+// With callback
+<WalletSelector
+  onWalletChange={(id, wallet) => console.log('Selected:', wallet?.walletName)}
+  placeholder="Choose a wallet"
+/>
+
+// Headless (custom rendering)
+<WalletSelector>
+  {({ wallets, selectedWallet, selectWallet, isLoading }) => (
+    <div>
+      {wallets.map((w) => (
+        <button key={w.id} onClick={() => selectWallet(w.id)}>
+          {w.walletName}
+        </button>
+      ))}
+    </div>
+  )}
+</WalletSelector>
+```
 
-#### SignAndSendConnection
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Controlled wallet ID |
+| `onChange` | `(walletId: string) => void` | — | Called when wallet changes |
+| `onWalletChange` | `(walletId: string, wallet: WalletData \| null) => void` | — | Called with wallet object |
+| `placeholder` | `string` | `"Select a wallet"` | Placeholder text |
+| `useSkeleton` | `boolean` | `true` | Show skeleton while loading |
+| `className` | `string` | — | Root element class |
+| `classNames` | `WalletSelectorClassNames` | — | Class names for inner elements |
+| `children` | `(props) => ReactNode` | — | Headless render function |
+| `renderTrigger` | `(props) => ReactNode` | — | Custom trigger render |
+| `renderList` | `(props) => ReactNode` | — | Custom list render |
 
-Type for the `connection` prop when using sign-and-send (passkey or wallet-adapter). Your `Connection` from `@solana/web3.js` is compatible. Must have:
+---
 
-- `getLatestBlockhash(commitment?)` → `Promise<{ blockhash, lastValidBlockHeight }>`
-- `confirmTransaction(opts: { signature, blockhash, lastValidBlockHeight })` → `Promise<void>`
+#### CreateWalletForm
 
-For wallet-adapter send, the hook also uses `sendRawTransaction(buf)` (standard Solana Connection has this).
+Form to create a new wallet.
 
-#### Other types
+```tsx
+import { CreateWalletForm } from 'cilantro-react';
 
-- **ErrorResponse** – `{ message?, error?, code?, status?, statusText?, data?, ... }` for API error shapes.
-- **ApiResponse\<T\>** – SDK response shape; use `extractResponseData(response)` to unwrap.
-- **DelegatedKeyData** – From DelegatedKeySelector: `id`, `walletId`, `name?`, `publicKey`, `permissions`, `isActive?`, `createdAt?`, `expiresAt?`, etc.
-- **SigningMethod** – `'wallet-adapter' | 'sdk-signer'`.
-- **AddSignerType** – `'email' | 'phone' | 'passkey' | 'external'`.
-- **AuthFormMode** – `'login' | 'register'`.
+<CreateWalletForm
+  onCreated={(result) => console.log('Created wallet:', result.data.id)}
+  onError={(err) => console.error(err.message)}
+  userId="optional-user-id"
+/>
+```
 
-#### Utilities
+**Props:**
 
-- **extractErrorMessage(error: unknown): string** – Returns a string from any thrown value (Error.message, object.message, response.data.message, etc.). Use in catch blocks when calling auth, signer, or SDK methods.
-- **extractResponseData\<T\>(response: unknown): T | null** – Unwraps SDK response shapes (`{ data }`, `{ success, data }`, signer arrays). Use after cilantro-sdk calls that return wrapped payloads.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `userId` | `string` | — | Optional user ID to associate wallet with |
+| `onCreated` | `(wallet: WalletControllerCreateResult) => void` | — | Called after wallet is created |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Form class |
 
 ---
 
-## Examples
+#### WalletAddress
 
-### Auth – single form (AuthForm)
-
-One form that switches between sign-in and create-account:
+Display a wallet address with copy functionality.
 
 ```tsx
-import { AuthForm } from 'cilantro-react'
+import { WalletAddress } from 'cilantro-react';
 
-function LoginPage() {
-  return (
-    <AuthForm
-      defaultMode="login"
-      onSuccess={() => window.location.href = '/dashboard'}
-      onError={(err) => console.error(err)}
-      loginTitle="Welcome back"
-      registerTitle="Create an account"
-      switchToRegisterText="Don't have an account? Create one"
-      switchToLoginText="Already have an account? Sign in"
-    />
-  )
-}
+<WalletAddress
+  address="7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU"
+  short={true}
+  copyable={true}
+/>
 ```
 
-### Auth – separate Login and Register
+**Props:**
 
-Use `LoginForm` and `RegisterForm` with links to switch pages:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `address` | `string` | — | Wallet address to display |
+| `short` | `boolean` | `false` | Truncate address for display |
+| `copyable` | `boolean` | `false` | Show copy button |
+| `className` | `string` | — | Element class |
 
-```tsx
-import { LoginForm, RegisterForm } from 'cilantro-react'
-import { Link } from 'react-router-dom'
+---
 
-function LoginPage() {
-  return (
-    <LoginForm
-      onSuccess={() => navigate('/dashboard')}
-      renderSwitchToRegister={() => (
-        <Link to="/register">Create account</Link>
-      )}
-    />
-  )
-}
+#### WalletBalance
 
-function RegisterPage() {
-  return (
-    <RegisterForm
-      onSuccess={() => navigate('/dashboard')}
-      renderSwitchToLogin={() => (
-        <Link to="/login">Already have an account? Sign in</Link>
-      )}
-    />
-  )
-}
+Display wallet SOL and token balances.
+
+```tsx
+import { WalletBalance } from 'cilantro-react';
+
+<WalletBalance walletId={walletId} showTokens={true} />
 ```
 
-### Auth – protected route (AuthGuard)
+**Props:**
 
-Show login when not authenticated, otherwise render children:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID to show balance for |
+| `showTokens` | `boolean` | `false` | Show SPL token balances |
+| `className` | `string` | — | Element class |
 
-```tsx
-import { AuthGuard, LoginForm } from 'cilantro-react'
+---
 
-function DashboardRoute() {
-  return (
-    <AuthGuard fallback={<LoginForm />}>
-      <Dashboard />
-    </AuthGuard>
-  )
-}
+#### ConnectWalletButton
 
-// Or use default fallback (LoginForm)
-<AuthGuard>
-  <Dashboard />
-</AuthGuard>
+Connect to external Solana wallets (Phantom, Solflare).
 
-// Hide content when unauthenticated (no fallback UI)
-<AuthGuard showFallback={false}>
-  <Dashboard />
-</AuthGuard>
+```tsx
+import { ConnectWalletButton } from 'cilantro-react';
+
+<ConnectWalletButton
+  onConnect={(publicKey, wallet) => console.log('Connected:', publicKey)}
+  onDisconnect={() => console.log('Disconnected')}
+>
+  Connect External Wallet
+</ConnectWalletButton>
 ```
 
-### Wallets
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onConnect` | `(publicKey: string, wallet: SolanaWallet) => void` | — | Called when connected |
+| `onDisconnect` | `() => void` | — | Called when disconnected |
+| `className` | `string` | — | Button class |
+| `children` | `ReactNode` | `"Connect Wallet"` | Button content |
+
+---
+
+### Signer Components
+
+#### SignerSelector
 
-Wallet dropdown with optional customization:
+Select a signer from the wallet's signers.
 
 ```tsx
-import { useWallets, WalletSelector } from 'cilantro-react'
+import { SignerSelector } from 'cilantro-react';
 
-function Wallets() {
-  const { wallets, selectedWallet } = useWallets()
+const [signerId, setSignerId] = useState('');
+const [signerType, setSignerType] = useState<'email' | 'phone'>('email');
 
-  return (
+<SignerSelector
+  walletId={walletId}
+  value={signerId}
+  onChange={(id, type) => {
+    setSignerId(id);
+    setSignerType(type);
+  }}
+/>
+
+// Headless
+<SignerSelector walletId={walletId} onChange={handleChange}>
+  {({ signers, selectedSigner, onSignerSelect, isLoading }) => (
     <div>
-      <WalletSelector
-        placeholder="Choose a wallet"
-        onWalletChange={(id, wallet) => console.log('Selected', id, wallet)}
-        classNames={{
-          root: 'w-full max-w-xs',
-          trigger: 'border-2',
-        }}
-      />
-      {selectedWallet && (
-        <p>Selected: {selectedWallet.walletName ?? selectedWallet.id}</p>
-      )}
+      {signers.map((s) => (
+        <button key={s.id} onClick={() => onSignerSelect(s)}>
+          {s.email || s.phone}
+        </button>
+      ))}
     </div>
-  )
-}
+  )}
+</SignerSelector>
 ```
 
-### Signers – list and select
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID to load signers for |
+| `value` | `string` | — | Selected signer ID |
+| `onChange` | `(signerId: string, signerType: SignerType) => void` | — | Called when signer changes |
+| `useSkeleton` | `boolean` | `true` | Show skeleton while loading |
+| `className` | `string` | — | Root element class |
+| `classNames` | `SignerSelectorClassNames` | — | Class names for inner elements |
+| `children` | `(props) => ReactNode` | — | Headless render function |
+| `renderList` | `(props) => ReactNode` | — | Custom list render |
+
+---
+
+#### SignerList
 
-Load signers for the selected wallet and let the user pick one:
+List signers with "Add signer" dialog (includes email, phone, passkey forms).
 
 ```tsx
-import { useSigners, useSignerSelection, SignerSelector } from 'cilantro-react'
+import { SignerList } from 'cilantro-react';
 
-function SignerPick() {
-  const { walletId } = useSignerSelection({ walletId: selectedWalletId })
-  const { signers, isLoading, refresh } = useSigners({ walletId: walletId ?? undefined })
+<SignerList
+  walletId={walletId}
+  onSignerAdded={() => console.log('Signer added')}
+  onRevoke={(signerId) => console.log('Revoked:', signerId)}
+/>
 
-  return (
-    <SignerSelector
-      selectedWalletId={walletId ?? undefined}
-      availableSigners={signers}
-      selectedSigner={selectedSigner}
-      onSignerSelect={setSelectedSigner}
-      isLoadingSigners={isLoading}
-      className="w-full"
-    />
-  )
-}
+// Headless
+<SignerList walletId={walletId}>
+  {({ signers, isLoading, openAddSigner }) => (
+    <div>
+      {signers.map((s) => <div key={s.id}>{s.email}</div>)}
+      <button onClick={openAddSigner}>Add Signer</button>
+    </div>
+  )}
+</SignerList>
 ```
 
-Headless: use `children` or `renderList` to render the list yourself.
+**Props:**
 
-### Signers – add signer (AddSignerForm + SignerList)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID |
+| `onSignerAdded` | `() => void` | — | Called after signer is added |
+| `onRevoke` | `(signerId: string) => void` | — | Called when signer is revoked |
+| `useSkeleton` | `boolean` | `true` | Show skeleton while loading |
+| `className` | `string` | — | Root element class |
+| `classNames` | `SignerListClassNames` | — | Class names for inner elements |
+| `children` | `(props) => ReactNode` | — | Headless render function |
 
-List signers and open a dialog to add a new one (email, phone, passkey, external wallet):
+---
 
-```tsx
-import { SignerList } from 'cilantro-react'
+#### CreateEmailSignerForm
 
-function SignersPage() {
-  const walletId = 'your-wallet-id'
+Form to create an email signer.
 
-  return (
-    <SignerList
-      walletId={walletId}
-      onSignerAdded={() => console.log('Signer added')}
-    />
-  )
-}
+```tsx
+import { CreateEmailSignerForm } from 'cilantro-react';
+
+<CreateEmailSignerForm
+  walletId={walletId}
+  onCreated={(signer) => console.log('Created:', signer.signerId)}
+  onError={(err) => console.error(err.message)}
+/>
 ```
 
-AddSignerForm can also be used standalone (e.g. inline or in your own dialog):
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID |
+| `onCreated` | `(signer: SignerInfo) => void` | — | Called after signer is created |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Form class |
+
+---
+
+#### CreatePhoneSignerForm
+
+Form to create a phone signer.
 
 ```tsx
-import { AddSignerForm } from 'cilantro-react'
+import { CreatePhoneSignerForm } from 'cilantro-react';
 
-<AddSignerForm
+<CreatePhoneSignerForm
   walletId={walletId}
-  open={dialogOpen}
-  onOpenChange={setDialogOpen}
-  onSuccess={() => { refreshSigners(); setDialogOpen(false) }}
-  asDialog={true}
+  onCreated={(signer) => console.log('Created:', signer.signerId)}
+  onError={(err) => console.error(err.message)}
 />
 ```
 
-### Delegated keys
+**Props:**
 
-Select a delegated key for a wallet:
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID |
+| `onCreated` | `(signer: SignerInfo) => void` | — | Called after signer is created |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Form class |
 
-```tsx
-import { DelegatedKeySelector } from 'cilantro-react'
+---
 
-function DelegatedKeys() {
-  const [keyId, setKeyId] = useState<string>('')
+#### AddPasskeyButton
 
-  return (
-    <DelegatedKeySelector
-      walletId={walletId}
-      value={keyId}
-      onChange={(id, key) => setKeyId(id)}
-      placeholder="Select a delegated key"
-      filterActive={true}
-    />
-  )
-}
+Button to register a passkey signer. Only renders if WebAuthn is supported.
+
+```tsx
+import { AddPasskeyButton } from 'cilantro-react';
+
+<AddPasskeyButton
+  walletId={walletId}
+  onRegistered={(signer) => console.log('Registered:', signer.signerId)}
+  onError={(err) => console.error(err.message)}
+>
+  Add Passkey
+</AddPasskeyButton>
 ```
 
-Use `children` for full control over the list UI.
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID |
+| `onRegistered` | `(signer: SignerInfo) => void` | — | Called after passkey is registered |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Container class |
+| `children` | `ReactNode` | `"Add Passkey"` | Button content |
+
+---
+
+### Transaction Components
 
-### Message signing
+#### SendSOLForm
 
-Default UI with message textarea, sign button, and wallet/signer context:
+Form to send SOL.
 
 ```tsx
-import { MessageSigningForm } from 'cilantro-react'
+import { SendSOLForm } from 'cilantro-react';
 
-function SignMessage() {
-  return (
-    <MessageSigningForm
-      showContext={true}
-      showCharCount={true}
-    />
-  )
-}
+<SendSOLForm
+  walletId={walletId}
+  signerId={signerId}
+  signerType="email"
+  onSuccess={(result) => console.log('Sent! Signature:', result.data.signature)}
+  onError={(err) => console.error(err.message)}
+/>
 ```
 
-Headless: use `children` to get `messageText`, `setMessageText`, `handleSign`, `signResultState`, `isSigning`, `reset`:
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet to send from |
+| `signerId` | `string` | — | Signer ID to authorize transaction |
+| `signerType` | `'email' \| 'phone' \| 'passkey' \| 'external'` | — | Signer type |
+| `onSuccess` | `(result: SubmitTransactionResult) => void` | — | Called after successful send |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Form class |
+
+---
+
+#### SendSPLForm
+
+Form to send SPL tokens.
 
 ```tsx
-<MessageSigningForm>
-  {({ messageText, setMessageText, handleSign, signResultState, isSigning, reset }) => (
-    <div>
-      <textarea value={messageText} onChange={e => setMessageText(e.target.value)} />
-      <button onClick={handleSign} disabled={isSigning}>Sign</button>
-      {signResultState.status !== 'idle' && <p>{signResultState.message}</p>}
-      <button onClick={reset}>Clear</button>
-    </div>
-  )}
-</MessageSigningForm>
+import { SendSPLForm } from 'cilantro-react';
+
+<SendSPLForm
+  walletId={walletId}
+  signerId={signerId}
+  signerType="email"
+  mintAddress="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v" // USDC
+  onSuccess={(result) => console.log('Sent! Signature:', result.data.signature)}
+  onError={(err) => console.error(err.message)}
+/>
 ```
 
-### Transaction signing
+**Props:**
 
-Build a transaction in your app, then call `signTransaction(tx)` to sign only, or `signAndSendTransaction(tx)` to sign and send. **For wallet-adapter or passkey sign-and-send, pass `connection`** from your Solana config (e.g. `@solana/web3.js`):
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet to send from |
+| `signerId` | `string` | — | Signer ID |
+| `signerType` | `SignerType` | — | Signer type |
+| `mintAddress` | `string` | — | Pre-fill token mint address |
+| `onSuccess` | `(result: SubmitTransactionResult) => void` | — | Called after successful send |
+| `onError` | `(error: Error) => void` | — | Called on error |
+| `className` | `string` | — | Form class |
 
-```tsx
-import { Connection } from '@solana/web3.js'
-import { TransactionSigningForm } from 'cilantro-react'
+---
 
-function SendTx() {
-  const connection = new Connection('https://api.devnet.solana.com')
+#### TransactionStatus
 
-  return (
-    <TransactionSigningForm
-      connection={connection}
-      showContext={true}
-    >
-      {({ signTransaction, signAndSendTransaction, transactionResultState, isSigningTransaction, isSendingTransaction, reset }) => (
-        <div>
-          <button
-            onClick={() => {
-              const tx = buildMyTransaction() // your code
-              signAndSendTransaction(tx)
-            }}
-            disabled={isSendingTransaction}
-          >
-            {isSendingTransaction ? 'Sending...' : 'Sign and send'}
-          </button>
-          {transactionResultState.status !== 'idle' && (
-            <p>{transactionResultState.message}</p>
-          )}
-          <button onClick={reset}>Reset status</button>
-        </div>
-      )}
-    </TransactionSigningForm>
-  )
-}
+Display transaction status with explorer link.
+
+```tsx
+import { TransactionStatus } from 'cilantro-react';
+
+<TransactionStatus
+  signature="5wHu1qwD7q9..."
+  cluster="mainnet-beta"
+/>
 ```
 
-If you use passkey or wallet-adapter for sign-and-send, **connection is required**; otherwise the library will throw. The library does not create a Solana connection—you pass it in.
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `signature` | `string` | — | Transaction signature |
+| `cluster` | `'mainnet-beta' \| 'devnet' \| 'testnet'` | `'mainnet-beta'` | Solana cluster |
+| `className` | `string` | — | Element class |
+
+---
+
+#### TransactionHistory
 
-### Full flow example
+Paginated list of recent transactions.
 
-Typical app flow:
+```tsx
+import { TransactionHistory } from 'cilantro-react';
 
-1. Wrap app with `CilantroProvider` (see [Setup](#setup)).
-2. **Auth:** Use `AuthForm` on a login page, or `AuthGuard` around protected routes with `LoginForm` as fallback.
-3. **Wallets:** Use `WalletSelector` so the user picks a wallet; get `selectedWallet` from `useWallets()`.
-4. **Signers:** Use `SignerSelector` with `useSigners({ walletId })` and `useSignerSelection`, or use `SignerList` to list + add signers.
-5. **Message signing:** Use `MessageSigningForm` (optionally with `showContext` and `showCharCount`).
-6. **Transaction signing:** Use `TransactionSigningForm` with your `connection` and build the transaction in your app; call `signTransaction(tx)` or `signAndSendTransaction(tx)` from the render props.
+<TransactionHistory walletId={walletId} pageSize={10} />
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `walletId` | `string` | — | Wallet ID |
+| `pageSize` | `number` | `10` | Transactions per page |
+| `className` | `string` | — | Element class |
 
 ---
 
-## Customization
+### Layout Components
+
+#### CilantroConnect
+
+All-in-one connect component combining wallet, signers, and auth.
+
+```tsx
+import { CilantroConnect } from 'cilantro-react';
+
+<CilantroConnect
+  onConnect={(wallet, signers) => console.log('Connected:', wallet, signers)}
+  onDisconnect={() => console.log('Disconnected')}
+/>
+```
+
+**Props:**
 
-- **className** – All components accept `className` on the root element. Apply your own Tailwind or CSS.
-- **classNames** – Many components accept a `classNames` object to style inner parts (e.g. `root`, `trigger`, `input`, `button`, `label`). See TypeScript types: `WalletSelectorClassNames`, `SignerSelectorClassNames`, `MessageSigningFormClassNames`, `TransactionSigningFormClassNames`, `LoginFormClassNames`, `AuthFormClassNames`, etc.
-- **Headless** – Where supported, use `children` render props or `renderList` / `renderTrigger` to render the UI yourself and still use the component’s logic (e.g. `WalletSelector`, `SignerSelector`, `MessageSigningForm`, `TransactionSigningForm`, `SignerList`, `DelegatedKeySelector`).
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onConnect` | `(wallet: WalletInfo, signers: SignerInfo[]) => void` | — | Called when connected |
+| `onDisconnect` | `() => void` | — | Called when disconnected |
+| `className` | `string` | — | Element class |
 
 ---
 
-## Core types and utilities
+#### LoadingOverlay
+
+Overlay with loading spinner for async operations.
+
+```tsx
+import { LoadingOverlay } from 'cilantro-react';
+
+<LoadingOverlay isLoading={isPending} message="Sending transaction...">
+  <MyContent />
+</LoadingOverlay>
+```
+
+**Props:**
 
-- **ActionState** – `{ status: 'idle' | 'loading' | 'success' | 'error', message?: string, detail?: unknown }`. Returned by signing hooks and used in signing form result UI. See [Types (detailed)](#types-detailed) for full shape.
-- **extractErrorMessage(error: unknown): string** – Normalizes unknown errors to a string. Handles `Error`, `{ message }`, `{ response: { data } }`, etc. Use when catching SDK or API errors to show a consistent message.
-- **extractResponseData\<T\>(response: unknown): T | null** – Extracts the data payload from SDK API responses. Handles `{ data }`, `{ success, data }`, and signer list shapes. Use when you need to unwrap the response shape (e.g. after calling cilantro-sdk).
-- **SignAndSendConnection** – Type for the `connection` prop when using sign-and-send. Your `Connection` from `@solana/web3.js` is compatible. Must provide `getLatestBlockhash`, `confirmTransaction`, and (for wallet-adapter send) `sendRawTransaction`.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isLoading` | `boolean` | — | Show overlay when true |
+| `message` | `string` | — | Loading message |
+| `children` | `ReactNode` | — | Content to wrap |
+| `className` | `string` | — | Overlay class |
 
 ---
 
-## Advanced / low-level
+#### ErrorBoundary
 
-**Signer signing (without React hooks):** For advanced usage you can call the core signer APIs directly:
+Error boundary with retry functionality.
 
-- `signMessageWithSigner(walletId, signer, message)` – Sign a message with a given signer.
-- `signTransactionWithSigner(walletId, signer, transactionBuffer)` – Sign a transaction (no send).
-- `signAndSendTransactionWithSigner(walletId, signer, transaction, connection?)` – Sign and send; **connection is required for passkey**.
-- `getWalletData(walletId)`, `getSignerPublicKey(...)` – Helpers for wallet/signer data.
-- `SIGNER_TYPES`, `SignerType` – Signer type constants.
+```tsx
+import { ErrorBoundary } from 'cilantro-react';
+
+<ErrorBoundary
+  fallback={<div>Something went wrong</div>}
+  onRetry={() => window.location.reload()}
+>
+  <App />
+</ErrorBoundary>
+```
 
-See TypeScript types and [cilantro-sdk](https://www.npmjs.com/package/cilantro-sdk) for full behavior.
+**Props:**
 
-**Connection:** The library never creates a Solana RPC connection. Your app creates it (e.g. `new Connection(rpcUrl)`) and passes it into `useTransactionSigning` or `TransactionSigningForm` when using wallet-adapter or passkey sign-and-send.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fallback` | `ReactNode` | — | Content to show on error |
+| `onRetry` | `() => void` | — | Retry callback |
+| `children` | `ReactNode` | — | Content to wrap |
 
 ---
 
 ## Theming
 
-Components use Shadcn-style class names and CSS variables (e.g. `border-input`, `bg-primary`, `text-muted-foreground`). Ensure your app has **Tailwind CSS** so utility classes work; the library does not bundle Tailwind.
+Components use Shadcn-style class names and CSS variables. Ensure your app has **Tailwind CSS** configured.
 
-### Built-in theme (ThemeProvider)
-
-You can opt into a built-in light/dark theme without bringing your own Shadcn setup. Wrap your app (or just the Cilantro UI) with `ThemeProvider`:
+### Built-in Theme (ThemeProvider)
 
 ```tsx
-import { ThemeProvider } from 'cilantro-react'
-
-<ThemeProvider theme="system" defaultTheme="dark" className="min-h-screen">
-  <CilantroProvider platformApiKey="...">
-    {children}
+import { ThemeProvider } from 'cilantro-react';
+
+<ThemeProvider
+  theme="system"
+  defaultTheme="dark"
+  injectStyles={true}
+  className="min-h-screen"
+>
+  <CilantroProvider apiKey="...">
+    <App />
   </CilantroProvider>
 </ThemeProvider>
 ```
 
-- **theme** – `"light"` | `"dark"` | `"system"`. `"system"` follows `prefers-color-scheme`.
-- **defaultTheme** – Initial theme when using `"system"` (default: `"dark"`).
-- **storageKey** – Optional localStorage key to persist the resolved theme when using `"system"`.
-- **injectStyles** – When `true` (default), the provider injects a minimal set of CSS variables (`--background`, `--foreground`, `--primary`, `--muted`, `--border`, `--input`, `--ring`, etc.) for light and `[data-theme="dark"]`. You can set `injectStyles={false}` and import the theme file yourself: `import 'cilantro-react/themes/default.css'`.
+**Props:**
 
-Tailwind is still required so utility classes apply; ThemeProvider only sets the variables.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Theme mode |
+| `defaultTheme` | `'light' \| 'dark'` | `'dark'` | Default when using system |
+| `storageKey` | `string` | — | localStorage key for persistence |
+| `injectStyles` | `boolean` | `true` | Inject CSS variables |
+| `className` | `string` | — | Wrapper class |
 
-For full Shadcn theming, see [Theming - shadcn/ui](https://ui.shadcn.com/docs/theming).
+### Import Theme CSS Directly
+
+```ts
+import 'cilantro-react/themes/default.css';
+```
 
 ---
 
-## Accessibility
+## Advanced Usage
+
+### Low-Level Signer Signing
 
-Components are built with screen readers and keyboard use in mind:
+For advanced use cases without React hooks:
 
-- **Live regions** – Signing result messages (MessageSigningForm, TransactionSigningForm) use `role="status"` and `aria-live="polite"` (or `assertive` for errors). Loading states use `aria-busy`.
-- **Form labels** – Auth, login, register, message signing, and add-signer forms use visible labels with correct `id` / `htmlFor`. Error blocks use `role="alert"` so errors are announced immediately.
-- **Selects and dialogs** – WalletSelector and DelegatedKeySelector triggers have `aria-label`. Radix Dialog handles focus trap and restore in AddSignerForm.
-- **Loading** – WalletSelector, SignerSelector, SignerList, DelegatedKeySelector, and AuthGuard use `aria-busy` and `aria-live="polite"` when loading so screen readers announce loading state.
+```tsx
+import {
+  signMessageWithSigner,
+  signTransactionWithSigner,
+  signAndSendTransactionWithSigner,
+  getWalletData,
+  getSignerPublicKey,
+  SIGNER_TYPES,
+} from 'cilantro-react';
+
+// Sign a message
+const result = await signMessageWithSigner(walletId, signer, 'Hello, Solana!');
+
+// Sign and send a transaction
+const txResult = await signAndSendTransactionWithSigner(walletId, signer, transaction, connection);
+```
 
-Buttons use `focus-visible:ring-2` for focus indication; icon-only or custom buttons can receive `aria-label` via standard HTML attributes.
+### Solana Connection Adapter
 
----
+For `@solana/web3.js` connection compatibility:
+
+```tsx
+import { Connection } from '@solana/web3.js';
+import { adaptSolanaConnection } from 'cilantro-react';
 
-## Mobile
+const connection = new Connection('https://api.mainnet-beta.solana.com');
+const adapted = adaptSolanaConnection(connection);
+```
 
-Key actions use touch-friendly targets and dialogs are responsive:
+### Utilities
 
-- **Touch targets** – The Button component has a `touch` size (`min-h-[44px] min-w-[44px]`) used on primary actions: AuthForm/LoginForm/RegisterForm submit, MessageSigningForm sign button, and SignerList “Add signer”. Use `size="touch"` on your own primary buttons when needed.
-- **Responsive layout** – Auth forms use `w-full max-w-sm`. MessageSigningForm and TransactionSigningForm use responsive button groups (`flex-col` on small screens). Result blocks use `overflow-auto` on `<pre>` so content doesn’t overflow.
-- **Dialog** – DialogContent has `max-h-[100dvh] sm:max-h-[90vh]` and `overflow-y-auto` so dialogs (e.g. AddSignerForm) are scrollable on small screens. You can add `className="rounded-none sm:rounded-lg"` or full-height classes for a more mobile-friendly dialog.
+| Function | Description |
+|----------|-------------|
+| `extractErrorMessage(error)` | Normalize unknown errors to string |
+| `extractResponseData(response)` | Unwrap SDK response shapes |
+| `normalizeWallet(dto)` | Normalize wallet data from SDK |
+| `normalizeSigner(dto)` | Normalize signer data from SDK |
+| `isJwtExpired(jwt)` | Check if JWT is expired |
+| `isAuthError(error)` | Check if error is an auth error |
 
 ---
 
-## Loading states
+## Types
 
-Loading is shown with skeleton placeholders where it improves perceived performance:
+Key exported types:
 
-- **Skeleton** – A `Skeleton` UI primitive is available (`import { Skeleton } from 'cilantro-react'`). Components use it when loading: WalletSelector and DelegatedKeySelector show a skeleton trigger; SignerSelector and SignerList show 2–3 skeleton rows.
-- **useSkeleton** – WalletSelector, SignerSelector, SignerList, and DelegatedKeySelector accept an optional **useSkeleton** prop (default: `true`). Set `useSkeleton={false}` to show plain “Loading…” text instead.
-- **classNames** – These components support `classNames.skeleton` and `classNames.loading` so you can style the skeleton or the loading container.
-- **AuthGuard** – Optional skeleton while checking auth: set **useSkeleton={true}** to show a small skeleton card instead of “Loading…” text.
+```ts
+import type {
+  // Config
+  CilantroConfig,
+  CilantroContextValue,
+  DeviceKeyStorage,
+
+  // User/Auth
+  User,
+  UseAuthResult,
+
+  // Wallet
+  WalletData,
+  UseWalletResult,
+  WalletControllerCreateResult,
+
+  // Signer
+  SignerData,
+  SignerInfo,
+  SignerType,
+  UseSignersResult,
+
+  // Transaction
+  SubmitTransactionResult,
+  UseSendTransactionResult,
+
+  // External Wallet
+  SolanaWallet,
+  UseExternalWalletResult,
+
+  // Passkey
+  UsePasskeyResult,
+
+  // UI
+  ActionState,
+} from 'cilantro-react';
+```
 
 ---
 
-## Low-level SDK
+## License
 
-For direct cilantro-sdk usage (auth, storage, wallets, signers, delegated keys, message/transaction signing), see the [cilantro-sdk](https://www.npmjs.com/package/cilantro-sdk) package.
+MIT