cilantro-react 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -423,6 +423,18 @@ function CilantroProvider({
   );
 }
 
+// src/hooks/useSelectedWallet.ts
+function useSelectedWallet() {
+  const { selectedWallet, isLoading, refreshWallets } = useWallets();
+  return { selectedWallet, isLoading, refreshWallets };
+}
+
+// src/hooks/useWalletAddress.ts
+function useWalletAddress() {
+  const { selectedWallet } = useWallets();
+  return selectedWallet?.address ?? selectedWallet?.walletAddress ?? null;
+}
+
 // src/hooks/useSigners.ts
 import { useState as useState3, useEffect as useEffect4, useCallback } from "react";
 
@@ -570,8 +582,76 @@ function useSigners(options = {}) {
   return { signers, isLoading, error, refresh };
 }
 
-// src/hooks/useSignerSelection.ts
+// src/hooks/useSignersForSelectedWallet.ts
+function useSignersForSelectedWallet(options = {}) {
+  const { walletId: walletIdOverride } = options;
+  const { selectedWallet } = useWallets();
+  const effectiveWalletId = walletIdOverride ?? selectedWallet?.id ?? selectedWallet?.walletId ?? null;
+  return useSigners({ walletId: effectiveWalletId });
+}
+
+// src/hooks/useDelegatedKeys.ts
 import { useState as useState4, useEffect as useEffect5, useCallback as useCallback2 } from "react";
+import { findAll } from "cilantro-sdk/delegated-keys";
+function normalizeKeys(list) {
+  return list.filter((k) => k != null && typeof k === "object" && "id" in k).map((k) => ({
+    id: String(k.id ?? ""),
+    walletId: String(k.walletId ?? ""),
+    name: k.name,
+    publicKey: String(k.publicKey ?? ""),
+    permissions: k.permissions ?? {},
+    isActive: k.isActive !== false,
+    createdAt: k.createdAt,
+    expiresAt: k.expiresAt,
+    ...k
+  }));
+}
+function useDelegatedKeys(options = {}) {
+  const { walletId, filterActive = true } = options;
+  const { token } = useCilantroAuth();
+  const [keys, setKeys] = useState4([]);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const loadKeys = useCallback2(async () => {
+    if (!walletId) {
+      setKeys([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (token) setSdkAuth(token);
+      const result = await findAll(walletId);
+      const keysData = extractResponseData(result) ?? [];
+      const list = Array.isArray(keysData) ? keysData : [];
+      let loaded = normalizeKeys(list);
+      if (filterActive) {
+        const now = Date.now();
+        loaded = loaded.filter((key) => {
+          if (!key.isActive) return false;
+          const exp = key.expiresAt ? new Date(key.expiresAt).getTime() : null;
+          return exp === null || exp > now;
+        });
+      }
+      setKeys(loaded);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setKeys([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [walletId, token, filterActive]);
+  useEffect5(() => {
+    loadKeys();
+  }, [loadKeys]);
+  const refresh = useCallback2(async () => {
+    if (walletId) await loadKeys();
+  }, [walletId, loadKeys]);
+  return { keys, isLoading, error, refresh };
+}
+
+// src/hooks/useSignerSelection.ts
+import { useState as useState5, useEffect as useEffect6, useCallback as useCallback3 } from "react";
 function useSignerSelection(options = {}) {
   const { walletId: walletIdOverride, signingMethod = "sdk-signer" } = options;
   const { selectedWallet } = useWallets();
@@ -579,17 +659,17 @@ function useSignerSelection(options = {}) {
   const { signers: availableSigners, isLoading: isLoadingSigners } = useSigners({
     walletId: effectiveWalletId || null
   });
-  const [selectedWalletId, setSelectedWalletId] = useState4(effectiveWalletId);
-  const [selectedSigner, setSelectedSigner] = useState4(null);
-  useEffect5(() => {
+  const [selectedWalletId, setSelectedWalletId] = useState5(effectiveWalletId);
+  const [selectedSigner, setSelectedSigner] = useState5(null);
+  useEffect6(() => {
     setSelectedWalletId(effectiveWalletId);
   }, [effectiveWalletId]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (signingMethod !== "sdk-signer") {
       setSelectedSigner(null);
     }
   }, [signingMethod]);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     setSelectedWalletId("");
     setSelectedSigner(null);
   }, []);
@@ -604,8 +684,43 @@ function useSignerSelection(options = {}) {
   };
 }
 
+// src/hooks/useCanSign.ts
+import { useMemo } from "react";
+function useCanSign(options = {}) {
+  const {
+    signingMethod = "sdk-signer",
+    requireSigner = true,
+    walletAdapterConnected
+  } = options;
+  const { token } = useCilantroAuth();
+  const { selectedWallet } = useWallets();
+  const { selectedSigner } = useSignerSelection({ signingMethod });
+  return useMemo(() => {
+    const hasToken = !!token;
+    const hasWallet = !!selectedWallet?.id || !!selectedWallet?.walletId;
+    const isSdkSigner = signingMethod === "sdk-signer";
+    const hasSigner = isSdkSigner ? !!selectedSigner : walletAdapterConnected !== void 0 ? walletAdapterConnected : hasWallet;
+    const canSign = hasToken && hasWallet && (requireSigner ? hasSigner : true);
+    return {
+      hasToken,
+      hasWallet,
+      hasSigner,
+      canSignMessage: canSign,
+      canSignTransaction: canSign
+    };
+  }, [
+    token,
+    selectedWallet?.id,
+    selectedWallet?.walletId,
+    selectedSigner,
+    signingMethod,
+    requireSigner,
+    walletAdapterConnected
+  ]);
+}
+
 // src/hooks/useMessageSigning.ts
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
 // src/core/signer-signing/core.ts
 import { PublicKey } from "@solana/web3.js";
@@ -1181,9 +1296,9 @@ function useMessageSigning(options) {
     walletAdapterSignMessage,
     walletAdapterPublicKey
   } = options;
-  const [messageText, setMessageText] = useState5("Hello, Solana!");
-  const [signResultState, setSignResultState] = useState5({ status: "idle" });
-  const [isSigning, setIsSigning] = useState5(false);
+  const [messageText, setMessageText] = useState6("Hello, Solana!");
+  const [signResultState, setSignResultState] = useState6({ status: "idle" });
+  const [isSigning, setIsSigning] = useState6(false);
   const handleSign = async () => {
     setIsSigning(true);
     setSignResultState({ status: "loading" });
@@ -1241,7 +1356,7 @@ function useMessageSigning(options) {
 }
 
 // src/hooks/useTransactionSigning.ts
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 function useTransactionSigning(options) {
   const {
     token,
@@ -1252,9 +1367,9 @@ function useTransactionSigning(options) {
     walletAdapterPublicKey,
     connection
   } = options;
-  const [transactionResultState, setTransactionResultState] = useState6({ status: "idle" });
-  const [isSigningTransaction, setIsSigningTransaction] = useState6(false);
-  const [isSendingTransaction, setIsSendingTransaction] = useState6(false);
+  const [transactionResultState, setTransactionResultState] = useState7({ status: "idle" });
+  const [isSigningTransaction, setIsSigningTransaction] = useState7(false);
+  const [isSendingTransaction, setIsSendingTransaction] = useState7(false);
   const signTransaction = async (transaction) => {
     setIsSigningTransaction(true);
     setTransactionResultState({ status: "loading" });
@@ -1433,14 +1548,30 @@ var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /*
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
+// src/ui/skeleton.tsx
+import * as React2 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Skeleton = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref,
+      className: cn("rounded-md bg-muted animate-pulse", className),
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
 // src/components/WalletSelector.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function WalletSelector(props) {
   const {
     value,
     onWalletChange,
     className,
     classNames,
+    useSkeleton = true,
     placeholder = "Select a wallet",
     renderTrigger,
     renderList,
@@ -1458,7 +1589,7 @@ function WalletSelector(props) {
     onWalletChange?.(id, wallets.find((w) => w.id === id || w.walletId === id) ?? null);
   };
   if (children) {
-    return /* @__PURE__ */ jsx5(Fragment, { children: children({
+    return /* @__PURE__ */ jsx6(Fragment, { children: children({
       wallets,
       selectedWallet: selected,
       selectWallet: (id) => {
@@ -1476,17 +1607,38 @@ function WalletSelector(props) {
       renderList?.({ wallets, selectedWallet: selected, onSelect: handleSelect, isLoading })
     ] });
   }
-  return /* @__PURE__ */ jsx5("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: /* @__PURE__ */ jsxs2(Select, { value: effectiveValue || void 0, onValueChange: handleValueChange, disabled: isLoading, children: [
-    /* @__PURE__ */ jsx5(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select wallet", children: /* @__PURE__ */ jsx5(SelectValue, { placeholder: isLoading ? "Loading..." : placeholder }) }),
-    /* @__PURE__ */ jsx5(SelectContent, { className: classNames?.content, children: wallets.map((w) => /* @__PURE__ */ jsx5(SelectItem, { value: w.id, className: classNames?.item, children: w.walletName || w.id }, w.id)) })
+  if (isLoading && useSkeleton) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-wallet-selector": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: cn(
+              "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2",
+              classNames?.trigger
+            ),
+            children: /* @__PURE__ */ jsx6(Skeleton, { className: cn("h-4 flex-1 rounded", classNames?.skeleton) })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: /* @__PURE__ */ jsxs2(Select, { value: effectiveValue || void 0, onValueChange: handleValueChange, disabled: isLoading, children: [
+    /* @__PURE__ */ jsx6(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select wallet", children: /* @__PURE__ */ jsx6(SelectValue, { placeholder: isLoading ? "Loading..." : placeholder }) }),
+    /* @__PURE__ */ jsx6(SelectContent, { className: classNames?.content, children: wallets.map((w) => /* @__PURE__ */ jsx6(SelectItem, { value: w.id, className: classNames?.item, children: w.walletName || w.id }, w.id)) })
   ] }) });
 }
 
 // src/ui/button.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -1503,7 +1655,8 @@ var buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        icon: "h-10 w-10",
+        touch: "h-12 min-h-[44px] min-w-[44px] rounded-md px-4"
       }
     },
     defaultVariants: {
@@ -1512,16 +1665,16 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx6(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ jsx7(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
 
 // src/components/SignerSelector.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignerSelector({
   selectedWalletId,
   availableSigners,
@@ -1530,15 +1683,16 @@ function SignerSelector({
   onSignerSelect,
   className,
   classNames,
+  useSkeleton = true,
   renderList,
   children
 }) {
   if (!selectedWalletId) return null;
   if (children) {
-    return /* @__PURE__ */ jsx7(Fragment2, { children: children({ signers: availableSigners, selectedSigner, onSignerSelect, isLoading: isLoadingSigners }) });
+    return /* @__PURE__ */ jsx8(Fragment2, { children: children({ signers: availableSigners, selectedSigner, onSignerSelect, isLoading: isLoadingSigners }) });
   }
   if (renderList) {
-    return /* @__PURE__ */ jsx7("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, children: renderList({
+    return /* @__PURE__ */ jsx8("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, children: renderList({
       signers: availableSigners,
       selectedSigner,
       onSelect: onSignerSelect,
@@ -1548,29 +1702,53 @@ function SignerSelector({
       getSignerUniqueId
     }) });
   }
-  return /* @__PURE__ */ jsx7("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, role: "listbox", "aria-label": "Select signer", children: isLoadingSigners ? /* @__PURE__ */ jsx7("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : availableSigners.length === 0 ? /* @__PURE__ */ jsx7("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers for this wallet." }) : /* @__PURE__ */ jsx7("ul", { className: cn("space-y-1", classNames?.list), children: availableSigners.map((signer) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs3(
-    Button,
+  const loadingContent = isLoadingSigners && useSkeleton ? /* @__PURE__ */ jsx8(
+    "div",
     {
-      type: "button",
-      variant: selectedSigner?.id === signer.id ? "secondary" : "ghost",
-      size: "sm",
-      className: cn("w-full justify-start", classNames?.item),
-      onClick: () => onSignerSelect(signer),
-      "aria-pressed": selectedSigner?.id === signer.id,
-      children: [
-        getSignerDisplayName(signer),
-        " (",
-        getSignerTypeLabel(signer.type || signer.signerType || ""),
-        ")"
-      ]
+      className: cn("space-y-1", classNames?.loading),
+      "aria-busy": "true",
+      "aria-live": "polite",
+      children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx8(
+        Skeleton,
+        {
+          className: cn("h-8 w-full rounded-md", classNames?.skeleton)
+        },
+        i
+      ))
+    }
+  ) : isLoadingSigners ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : null;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cn(className, classNames?.root),
+      "data-cilantro-signer-selector": true,
+      role: "listbox",
+      "aria-label": "Select signer",
+      "aria-busy": isLoadingSigners,
+      "aria-live": "polite",
+      children: loadingContent ?? (availableSigners.length === 0 ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers for this wallet." }) : /* @__PURE__ */ jsx8("ul", { className: cn("space-y-1", classNames?.list), children: availableSigners.map((signer) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsxs3(
+        Button,
+        {
+          type: "button",
+          variant: selectedSigner?.id === signer.id ? "secondary" : "ghost",
+          size: "sm",
+          className: cn("w-full justify-start", classNames?.item),
+          onClick: () => onSignerSelect(signer),
+          "aria-pressed": selectedSigner?.id === signer.id,
+          children: [
+            getSignerDisplayName(signer),
+            " (",
+            getSignerTypeLabel(signer.type || signer.signerType || ""),
+            ")"
+          ]
+        }
+      ) }, signer.id)) }))
     }
-  ) }, signer.id)) }) });
+  );
 }
 
 // src/components/DelegatedKeySelector.tsx
-import { useState as useState7, useEffect as useEffect6, useCallback as useCallback3 } from "react";
-import { findAll } from "cilantro-sdk/delegated-keys";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function DelegatedKeySelector(props) {
   const {
     walletId,
@@ -1579,55 +1757,14 @@ function DelegatedKeySelector(props) {
     filterActive = true,
     className,
     classNames,
+    useSkeleton = true,
     placeholder = "Select a delegated key",
     children
   } = props;
-  const { token } = useCilantroAuth();
-  const [keys, setKeys] = useState7([]);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7(null);
-  const loadKeys = useCallback3(async () => {
-    if (!walletId) {
-      setKeys([]);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      if (token) setSdkAuth(token);
-      const result = await findAll(walletId);
-      const keysData = extractResponseData(result) ?? [];
-      const list = Array.isArray(keysData) ? keysData : [];
-      let loaded = list.filter((k) => k != null && typeof k === "object" && "id" in k).map((k) => ({
-        id: String(k.id ?? ""),
-        walletId: String(k.walletId ?? ""),
-        name: k.name,
-        publicKey: String(k.publicKey ?? ""),
-        permissions: k.permissions ?? {},
-        isActive: k.isActive !== false,
-        createdAt: k.createdAt,
-        expiresAt: k.expiresAt,
-        ...k
-      }));
-      if (filterActive) {
-        const now = Date.now();
-        loaded = loaded.filter((key) => {
-          if (!key.isActive) return false;
-          const exp = key.expiresAt ? new Date(key.expiresAt).getTime() : null;
-          return exp === null || exp > now;
-        });
-      }
-      setKeys(loaded);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-      setKeys([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [walletId, token, filterActive]);
-  useEffect6(() => {
-    loadKeys();
-  }, [loadKeys]);
+  const { keys, isLoading, error, refresh: loadKeys } = useDelegatedKeys({
+    walletId,
+    filterActive
+  });
   const onSelect = (key) => {
     onChange?.(key.id, key);
   };
@@ -1636,22 +1773,52 @@ function DelegatedKeySelector(props) {
     onChange?.(id, key);
   };
   if (children) {
-    return /* @__PURE__ */ jsx8(Fragment3, { children: children({ keys, selectedKeyId: value, onSelect, isLoading, error, refresh: loadKeys }) });
+    return /* @__PURE__ */ jsx9(Fragment3, { children: children({ keys, selectedKeyId: value, onSelect, isLoading, error, refresh: loadKeys }) });
   }
   if (!walletId) {
-    return /* @__PURE__ */ jsx8("div", { className: cn(className, classNames?.root, "text-sm text-muted-foreground"), children: "Select a wallet first" });
+    return /* @__PURE__ */ jsx9("div", { className: cn(className, classNames?.root, "text-sm text-muted-foreground"), children: "Select a wallet first" });
   }
-  return /* @__PURE__ */ jsx8("div", { className: cn(className, classNames?.root), "data-cilantro-delegated-key-selector": true, children: isLoading ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading delegated keys..." }) : error ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : keys.length === 0 ? /* @__PURE__ */ jsx8("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No delegated keys found." }) : /* @__PURE__ */ jsxs4(Select, { value: (value ?? "") || void 0, onValueChange: handleValueChange, children: [
-    /* @__PURE__ */ jsx8(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select delegated key", children: /* @__PURE__ */ jsx8(SelectValue, { placeholder }) }),
-    /* @__PURE__ */ jsx8(SelectContent, { className: classNames?.content, children: keys.map((k) => /* @__PURE__ */ jsx8(SelectItem, { value: k.id, className: classNames?.item, children: k.name || k.publicKey.slice(0, 8) + "..." }, k.id)) })
-  ] }) });
+  if (isLoading && useSkeleton) {
+    return /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-delegated-key-selector": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: cn(
+              "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2",
+              classNames?.trigger
+            ),
+            children: /* @__PURE__ */ jsx9(Skeleton, { className: cn("h-4 flex-1 rounded", classNames?.skeleton) })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(className, classNames?.root),
+      "data-cilantro-delegated-key-selector": true,
+      "aria-busy": isLoading,
+      "aria-live": "polite",
+      children: isLoading ? /* @__PURE__ */ jsx9("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading delegated keys..." }) : error ? /* @__PURE__ */ jsx9("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : keys.length === 0 ? /* @__PURE__ */ jsx9("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No delegated keys found." }) : /* @__PURE__ */ jsxs4(Select, { value: (value ?? "") || void 0, onValueChange: handleValueChange, children: [
+        /* @__PURE__ */ jsx9(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select delegated key", children: /* @__PURE__ */ jsx9(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ jsx9(SelectContent, { className: classNames?.content, children: keys.map((k) => /* @__PURE__ */ jsx9(SelectItem, { value: k.id, className: classNames?.item, children: k.name || k.publicKey.slice(0, 8) + "..." }, k.id)) })
+      ] })
+    }
+  );
 }
 
 // src/ui/textarea.tsx
-import * as React3 from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Textarea = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+import * as React4 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Textarea = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
     "textarea",
     {
       className: cn(
@@ -1666,21 +1833,21 @@ var Textarea = React3.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/ui/label.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/ui/card.tsx
-import * as React5 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Card = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+import * as React6 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Card = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
     "div",
     {
       ref,
@@ -1690,12 +1857,12 @@ var Card = React5.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+var CardHeader = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var CardTitle = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
     "h3",
     {
       ref,
@@ -1705,19 +1872,19 @@ var CardTitle = React5.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11("div", { ref, className: cn("p-6 pt-0", className), ...props })
+var CardContent = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx11("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+var CardFooter = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 
 // src/components/MessageSigningForm.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function MessageSigningForm({
   token: tokenOverride,
   selectedWalletId: walletIdOverride,
@@ -1749,7 +1916,7 @@ function MessageSigningForm({
     walletAdapterPublicKey
   });
   if (children) {
-    return /* @__PURE__ */ jsx12("div", { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: children({
+    return /* @__PURE__ */ jsx13("div", { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: children({
       messageText: signing.messageText,
       setMessageText: signing.setMessageText,
       signResultState: signing.signResultState,
@@ -1763,8 +1930,8 @@ function MessageSigningForm({
   const isError = resultStatus === "error";
   return /* @__PURE__ */ jsxs5(Card, { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: [
     /* @__PURE__ */ jsxs5(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ jsx12(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign message" }),
-      /* @__PURE__ */ jsx12(CardDescription, { className: classNames?.description, children: "Sign a message with your selected wallet or signer. The signature proves you control the key." }),
+      /* @__PURE__ */ jsx13(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign message" }),
+      /* @__PURE__ */ jsx13(CardDescription, { className: classNames?.description, children: "Sign a message with your selected wallet or signer. The signature proves you control the key." }),
       showContext && (selectedWalletId || selectedSigner) && /* @__PURE__ */ jsxs5("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
         selectedWalletId && /* @__PURE__ */ jsxs5("span", { children: [
           "Wallet: ",
@@ -1782,8 +1949,8 @@ function MessageSigningForm({
     ] }),
     /* @__PURE__ */ jsxs5(CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx12(Label, { htmlFor: "cilantro-message-text", className: classNames?.label, children: "Message" }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(Label, { htmlFor: "cilantro-message-text", className: classNames?.label, children: "Message" }),
+        /* @__PURE__ */ jsx13(
           Textarea,
           {
             id: "cilantro-message-text",
@@ -1801,17 +1968,18 @@ function MessageSigningForm({
         ] })
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           Button,
           {
             type: "button",
+            size: "touch",
             className: cn("w-full sm:w-auto", classNames?.button),
             onClick: signing.handleSign,
             disabled: signing.isSigning || !signing.messageText.trim(),
             children: signing.isSigning ? "Signing..." : "Sign message"
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           Button,
           {
             type: "button",
@@ -1826,6 +1994,9 @@ function MessageSigningForm({
       resultStatus !== "idle" && /* @__PURE__ */ jsxs5(
         "div",
         {
+          role: "status",
+          "aria-live": isError ? "assertive" : "polite",
+          "aria-busy": resultStatus === "loading",
           className: cn(
             "rounded-lg border px-3 py-2 text-sm",
             isSuccess && cn("border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400", classNames?.resultSuccess),
@@ -1836,7 +2007,7 @@ function MessageSigningForm({
           "data-status": resultStatus,
           children: [
             signing.signResultState.message,
-            signing.signResultState.detail != null && /* @__PURE__ */ jsx12("pre", { className: cn("mt-2 overflow-auto rounded-md bg-muted/80 p-2 text-xs", classNames?.resultPre), children: JSON.stringify(signing.signResultState.detail, null, 2) })
+            signing.signResultState.detail != null && /* @__PURE__ */ jsx13("pre", { className: cn("mt-2 overflow-auto rounded-md bg-muted/80 p-2 text-xs", classNames?.resultPre), children: JSON.stringify(signing.signResultState.detail, null, 2) })
           ]
         }
       )
@@ -1845,7 +2016,7 @@ function MessageSigningForm({
 }
 
 // src/components/TransactionSigningForm.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function TransactionSigningForm({
   token: tokenOverride,
   selectedWalletId: walletIdOverride,
@@ -1878,7 +2049,7 @@ function TransactionSigningForm({
     connection
   });
   if (children) {
-    return /* @__PURE__ */ jsx13("div", { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: children({
+    return /* @__PURE__ */ jsx14("div", { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: children({
       transactionResultState: signing.transactionResultState,
       isSigningTransaction: signing.isSigningTransaction,
       isSendingTransaction: signing.isSendingTransaction,
@@ -1892,12 +2063,12 @@ function TransactionSigningForm({
   const isError = resultStatus === "error";
   return /* @__PURE__ */ jsxs6(Card, { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: [
     /* @__PURE__ */ jsxs6(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ jsx13(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign transaction" }),
+      /* @__PURE__ */ jsx14(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign transaction" }),
       /* @__PURE__ */ jsxs6(CardDescription, { className: classNames?.description, children: [
         "Build a transaction in your app, then pass it to ",
-        /* @__PURE__ */ jsx13("code", { className: "text-xs", children: "signTransaction(tx)" }),
+        /* @__PURE__ */ jsx14("code", { className: "text-xs", children: "signTransaction(tx)" }),
         " to sign only, or ",
-        /* @__PURE__ */ jsx13("code", { className: "text-xs", children: "signAndSendTransaction(tx)" }),
+        /* @__PURE__ */ jsx14("code", { className: "text-xs", children: "signAndSendTransaction(tx)" }),
         " to sign and send. Use the render props (children) to wire your own UI."
       ] }),
       showContext && (selectedWalletId || selectedSigner) && /* @__PURE__ */ jsxs6("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
@@ -1916,7 +2087,7 @@ function TransactionSigningForm({
       ] })
     ] }),
     /* @__PURE__ */ jsxs6(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         Button,
         {
           type: "button",
@@ -1930,6 +2101,9 @@ function TransactionSigningForm({
       resultStatus !== "idle" && /* @__PURE__ */ jsxs6(
         "div",
         {
+          role: "status",
+          "aria-live": isError ? "assertive" : "polite",
+          "aria-busy": resultStatus === "loading",
           className: cn(
             "rounded-lg border px-3 py-2 text-sm",
             isSuccess && cn("border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400", classNames?.resultSuccess),
@@ -1940,7 +2114,7 @@ function TransactionSigningForm({
           "data-status": resultStatus,
           children: [
             signing.transactionResultState.message,
-            signing.transactionResultState.detail != null && /* @__PURE__ */ jsx13("pre", { className: cn("mt-2 overflow-auto rounded-md bg-muted/80 p-2 text-xs", classNames?.resultPre), children: JSON.stringify(signing.transactionResultState.detail, null, 2) })
+            signing.transactionResultState.detail != null && /* @__PURE__ */ jsx14("pre", { className: cn("mt-2 overflow-auto rounded-md bg-muted/80 p-2 text-xs", classNames?.resultPre), children: JSON.stringify(signing.transactionResultState.detail, null, 2) })
           ]
         }
       )
@@ -1952,11 +2126,11 @@ function TransactionSigningForm({
 import { useState as useState8 } from "react";
 
 // src/ui/input.tsx
-import * as React6 from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Input = React6.forwardRef(
+import * as React7 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Input = React7.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "input",
       {
         type,
@@ -1973,7 +2147,7 @@ var Input = React6.forwardRef(
 Input.displayName = "Input";
 
 // src/components/LoginForm.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function LoginForm({
   className,
   classNames,
@@ -2002,13 +2176,13 @@ function LoginForm({
   };
   return /* @__PURE__ */ jsxs7(Card, { className: cn(className, classNames?.root), "data-cilantro-login-form": true, children: [
     /* @__PURE__ */ jsxs7(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ jsx15(CardTitle, { className: classNames?.title, children: title }),
-      description != null && /* @__PURE__ */ jsx15(CardDescription, { className: classNames?.description, children: description })
+      /* @__PURE__ */ jsx16(CardTitle, { className: classNames?.title, children: title }),
+      description != null && /* @__PURE__ */ jsx16(CardDescription, { className: classNames?.description, children: description })
     ] }),
-    /* @__PURE__ */ jsx15(CardContent, { children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+    /* @__PURE__ */ jsx16(CardContent, { children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
       /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx15(Label, { htmlFor: "cilantro-login-username", className: classNames?.label, children: "Username or email" }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(Label, { htmlFor: "cilantro-login-username", className: classNames?.label, children: "Username or email" }),
+        /* @__PURE__ */ jsx16(
           Input,
           {
             id: "cilantro-login-username",
@@ -2024,8 +2198,8 @@ function LoginForm({
         )
       ] }),
       /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx15(Label, { htmlFor: "cilantro-login-password", className: classNames?.label, children: "Password" }),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(Label, { htmlFor: "cilantro-login-password", className: classNames?.label, children: "Password" }),
+        /* @__PURE__ */ jsx16(
           Input,
           {
             id: "cilantro-login-password",
@@ -2040,7 +2214,7 @@ function LoginForm({
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx15(
+      error && /* @__PURE__ */ jsx16(
         "div",
         {
           className: cn(
@@ -2051,23 +2225,24 @@ function LoginForm({
           children: error
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(
         Button,
         {
           type: "submit",
+          size: "touch",
           className: cn("w-full", classNames?.submitButton),
           disabled: isLoading || !usernameOrEmail.trim() || !password,
           children: isLoading ? "Signing in..." : submitLabel
         }
       ),
-      renderSwitchToRegister && /* @__PURE__ */ jsx15("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToRegister() })
+      renderSwitchToRegister && /* @__PURE__ */ jsx16("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToRegister() })
     ] }) })
   ] });
 }
 
 // src/components/RegisterForm.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function RegisterForm({
   className,
   classNames,
@@ -2098,13 +2273,13 @@ function RegisterForm({
   };
   return /* @__PURE__ */ jsxs8(Card, { className: cn(className, classNames?.root), "data-cilantro-register-form": true, children: [
     /* @__PURE__ */ jsxs8(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ jsx16(CardTitle, { className: classNames?.title, children: title }),
-      description != null && /* @__PURE__ */ jsx16(CardDescription, { className: classNames?.description, children: description })
+      /* @__PURE__ */ jsx17(CardTitle, { className: classNames?.title, children: title }),
+      description != null && /* @__PURE__ */ jsx17(CardDescription, { className: classNames?.description, children: description })
     ] }),
-    /* @__PURE__ */ jsx16(CardContent, { children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+    /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
       /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx16(Label, { htmlFor: "cilantro-register-username", className: classNames?.label, children: "Username" }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-register-username", className: classNames?.label, children: "Username" }),
+        /* @__PURE__ */ jsx17(
           Input,
           {
             id: "cilantro-register-username",
@@ -2120,8 +2295,8 @@ function RegisterForm({
         )
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx16(Label, { htmlFor: "cilantro-register-email", className: classNames?.label, children: "Email" }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-register-email", className: classNames?.label, children: "Email" }),
+        /* @__PURE__ */ jsx17(
           Input,
           {
             id: "cilantro-register-email",
@@ -2137,8 +2312,8 @@ function RegisterForm({
         )
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx16(Label, { htmlFor: "cilantro-register-password", className: classNames?.label, children: "Password" }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-register-password", className: classNames?.label, children: "Password" }),
+        /* @__PURE__ */ jsx17(
           Input,
           {
             id: "cilantro-register-password",
@@ -2153,7 +2328,7 @@ function RegisterForm({
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx16(
+      error && /* @__PURE__ */ jsx17(
         "div",
         {
           className: cn(
@@ -2164,23 +2339,24 @@ function RegisterForm({
           children: error
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         Button,
         {
           type: "submit",
+          size: "touch",
           className: cn("w-full", classNames?.submitButton),
           disabled: isLoading || !username.trim() || !email.trim() || !password,
           children: isLoading ? "Creating account..." : submitLabel
         }
       ),
-      renderSwitchToLogin && /* @__PURE__ */ jsx16("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToLogin() })
+      renderSwitchToLogin && /* @__PURE__ */ jsx17("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToLogin() })
     ] }) })
   ] });
 }
 
 // src/components/AuthForm.tsx
 import { useState as useState10 } from "react";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function AuthForm({
   defaultMode = "login",
   className,
@@ -2228,14 +2404,14 @@ function AuthForm({
   const canSubmit = isLogin ? usernameOrEmail.trim().length > 0 && password.length > 0 : username.trim().length > 0 && email.trim().length > 0 && password.length > 0;
   return /* @__PURE__ */ jsxs9(Card, { className: cn("w-full max-w-sm", className, classNames?.root), "data-cilantro-auth-form": true, children: [
     /* @__PURE__ */ jsxs9(CardHeader, { className: cn("space-y-1 text-center sm:text-left", classNames?.header), children: [
-      /* @__PURE__ */ jsx17(CardTitle, { className: cn("text-xl", classNames?.title), children: isLogin ? loginTitle : registerTitle }),
-      /* @__PURE__ */ jsx17(CardDescription, { className: classNames?.description, children: isLogin ? loginDescription : registerDescription })
+      /* @__PURE__ */ jsx18(CardTitle, { className: cn("text-xl", classNames?.title), children: isLogin ? loginTitle : registerTitle }),
+      /* @__PURE__ */ jsx18(CardDescription, { className: classNames?.description, children: isLogin ? loginDescription : registerDescription })
     ] }),
-    /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+    /* @__PURE__ */ jsx18(CardContent, { children: /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
       isLogin ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
         /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-auth-username", className: classNames?.label, children: "Username or email" }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "cilantro-auth-username", className: classNames?.label, children: "Username or email" }),
+          /* @__PURE__ */ jsx18(
             Input,
             {
               id: "cilantro-auth-username",
@@ -2251,8 +2427,8 @@ function AuthForm({
           )
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-auth-password", className: classNames?.label, children: "Password" }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "cilantro-auth-password", className: classNames?.label, children: "Password" }),
+          /* @__PURE__ */ jsx18(
             Input,
             {
               id: "cilantro-auth-password",
@@ -2269,8 +2445,8 @@ function AuthForm({
         ] })
       ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
         /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-auth-reg-username", className: classNames?.label, children: "Username" }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "cilantro-auth-reg-username", className: classNames?.label, children: "Username" }),
+          /* @__PURE__ */ jsx18(
             Input,
             {
               id: "cilantro-auth-reg-username",
@@ -2286,8 +2462,8 @@ function AuthForm({
           )
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-auth-reg-email", className: classNames?.label, children: "Email" }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "cilantro-auth-reg-email", className: classNames?.label, children: "Email" }),
+          /* @__PURE__ */ jsx18(
             Input,
             {
               id: "cilantro-auth-reg-email",
@@ -2303,8 +2479,8 @@ function AuthForm({
           )
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx17(Label, { htmlFor: "cilantro-auth-reg-password", className: classNames?.label, children: "Password" }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Label, { htmlFor: "cilantro-auth-reg-password", className: classNames?.label, children: "Password" }),
+          /* @__PURE__ */ jsx18(
             Input,
             {
               id: "cilantro-auth-reg-password",
@@ -2320,7 +2496,7 @@ function AuthForm({
           )
         ] })
       ] }),
-      error && /* @__PURE__ */ jsx17(
+      error && /* @__PURE__ */ jsx18(
         "div",
         {
           className: cn(
@@ -2331,16 +2507,17 @@ function AuthForm({
           children: error
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         Button,
         {
           type: "submit",
+          size: "touch",
           className: cn("w-full", classNames?.submitButton),
           disabled: isLoading || !canSubmit,
           children: isLoading ? isLogin ? "Signing in..." : "Creating account..." : isLogin ? loginSubmitLabel : registerSubmitLabel
         }
       ),
-      /* @__PURE__ */ jsx17("p", { className: cn("text-center text-sm text-muted-foreground", classNames?.toggle), children: /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18("p", { className: cn("text-center text-sm text-muted-foreground", classNames?.toggle), children: /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -2355,35 +2532,49 @@ function AuthForm({
 }
 
 // src/components/AuthGuard.tsx
-import { Fragment as Fragment5, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function AuthGuard({
   children,
   fallback,
   className,
   classNames,
-  showFallback = true
+  showFallback = true,
+  useSkeleton = false
 }) {
   const { isAuthenticated, isLoading } = useCilantroAuth();
   if (isLoading) {
-    return /* @__PURE__ */ jsx18("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: /* @__PURE__ */ jsx18("div", { className: cn("text-sm text-muted-foreground", classNames?.fallback), children: "Loading..." }) });
+    return /* @__PURE__ */ jsx19(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-auth-guard": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: useSkeleton ? /* @__PURE__ */ jsxs10("div", { className: cn("rounded-lg border border-input p-4 space-y-3 w-full max-w-sm", classNames?.fallback), children: [
+          /* @__PURE__ */ jsx19(Skeleton, { className: cn("h-6 w-2/3 rounded", classNames?.skeleton) }),
+          /* @__PURE__ */ jsx19(Skeleton, { className: cn("h-4 w-full rounded", classNames?.skeleton) }),
+          /* @__PURE__ */ jsx19(Skeleton, { className: cn("h-4 w-[80%] rounded", classNames?.skeleton) })
+        ] }) : /* @__PURE__ */ jsx19("div", { className: cn("text-sm text-muted-foreground", classNames?.fallback), children: "Loading..." })
+      }
+    );
   }
   if (!isAuthenticated) {
     if (!showFallback) return null;
-    return /* @__PURE__ */ jsx18("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: fallback ?? /* @__PURE__ */ jsx18(LoginForm, { className: classNames?.fallback }) });
+    return /* @__PURE__ */ jsx19("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: fallback ?? /* @__PURE__ */ jsx19(LoginForm, { className: classNames?.fallback }) });
   }
-  return /* @__PURE__ */ jsx18(Fragment5, { children });
+  return /* @__PURE__ */ jsx19(Fragment5, { children });
 }
 
 // src/components/AddSignerForm.tsx
 import { useState as useState11 } from "react";
 
 // src/ui/dialog.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2395,14 +2586,14 @@ var DialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(DialogPortal, { children: [
-  /* @__PURE__ */ jsx19(DialogOverlay, {}),
-  /* @__PURE__ */ jsx19(
+var DialogContent = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(DialogPortal, { children: [
+  /* @__PURE__ */ jsx20(DialogOverlay, {}),
+  /* @__PURE__ */ jsx20(
     DialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg max-h-[100dvh] sm:max-h-[90vh] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 overflow-y-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       ),
       ...props,
@@ -2411,9 +2602,9 @@ var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) =
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx19("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx20("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx20(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -2421,7 +2612,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx19(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   DialogPrimitive.Title,
   {
     ref,
@@ -2430,7 +2621,7 @@ var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   DialogPrimitive.Description,
   {
     ref,
@@ -2441,7 +2632,7 @@ var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/AddSignerForm.tsx
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function AddSignerForm({
   walletId,
   open = true,
@@ -2513,12 +2704,12 @@ function AddSignerForm({
       onError?.(message);
     }).finally(() => setIsSubmitting(false));
   };
-  const formContent = /* @__PURE__ */ jsxs11("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
-    !signerType ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx20(Label, { className: classNames?.label, children: "Signer type" }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsx20(
+  const formContent = /* @__PURE__ */ jsxs12("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+    !signerType ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "space-y-2", role: "group", "aria-labelledby": "add-signer-type-label", children: [
+        /* @__PURE__ */ jsx21(Label, { id: "add-signer-type-label", className: classNames?.label, children: "Signer type" }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx21(
             Button,
             {
               type: "button",
@@ -2529,7 +2720,7 @@ function AddSignerForm({
               children: "Email"
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Button,
             {
               type: "button",
@@ -2540,7 +2731,7 @@ function AddSignerForm({
               children: "Phone"
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Button,
             {
               type: "button",
@@ -2551,7 +2742,7 @@ function AddSignerForm({
               children: "Passkey"
             }
           ),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             Button,
             {
               type: "button",
@@ -2564,7 +2755,7 @@ function AddSignerForm({
           )
         ] })
       ] }),
-      asDialog && /* @__PURE__ */ jsx20(DialogFooter, { className: "gap-2 sm:gap-0", children: /* @__PURE__ */ jsx20(
+      asDialog && /* @__PURE__ */ jsx21(DialogFooter, { className: "gap-2 sm:gap-0", children: /* @__PURE__ */ jsx21(
         Button,
         {
           type: "button",
@@ -2575,10 +2766,10 @@ function AddSignerForm({
           children: "Cancel"
         }
       ) })
-    ] }) : signerType === "email" ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx20(Label, { htmlFor: "add-signer-email", className: classNames?.label, children: "Email" }),
-        /* @__PURE__ */ jsx20(
+    ] }) : signerType === "email" ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx21(Label, { htmlFor: "add-signer-email", className: classNames?.label, children: "Email" }),
+        /* @__PURE__ */ jsx21(
           Input,
           {
             id: "add-signer-email",
@@ -2593,8 +2784,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ jsxs11(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ jsx20(
+      asDialog && /* @__PURE__ */ jsxs12(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2605,10 +2796,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx20(
+      !asDialog && /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2619,12 +2810,12 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
-    ] }) : signerType === "phone" ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx20(Label, { htmlFor: "add-signer-phone", className: classNames?.label, children: "Phone number" }),
-        /* @__PURE__ */ jsx20(
+    ] }) : signerType === "phone" ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx21(Label, { htmlFor: "add-signer-phone", className: classNames?.label, children: "Phone number" }),
+        /* @__PURE__ */ jsx21(
           Input,
           {
             id: "add-signer-phone",
@@ -2639,8 +2830,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ jsxs11(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ jsx20(
+      asDialog && /* @__PURE__ */ jsxs12(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2651,10 +2842,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx20(
+      !asDialog && /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2665,12 +2856,12 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
-    ] }) : signerType === "external" ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-      /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx20(Label, { htmlFor: "add-signer-address", className: classNames?.label, children: "Wallet address" }),
-        /* @__PURE__ */ jsx20(
+    ] }) : signerType === "external" ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+      /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx21(Label, { htmlFor: "add-signer-address", className: classNames?.label, children: "Wallet address" }),
+        /* @__PURE__ */ jsx21(
           Input,
           {
             id: "add-signer-address",
@@ -2684,8 +2875,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ jsxs11(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ jsx20(
+      asDialog && /* @__PURE__ */ jsxs12(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2696,10 +2887,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx20(
+      !asDialog && /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             type: "button",
@@ -2710,34 +2901,35 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ jsx20(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ jsx21(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
     ] }) : null,
-    error && /* @__PURE__ */ jsx20("p", { className: cn("text-sm text-destructive", classNames?.error), role: "alert", children: error })
+    error && /* @__PURE__ */ jsx21("div", { className: cn("text-sm text-destructive", classNames?.error), role: "alert", children: error })
   ] });
   if (asDialog) {
-    return /* @__PURE__ */ jsx20(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs11(DialogContent, { className: cn(classNames?.dialog), children: [
-      /* @__PURE__ */ jsxs11(DialogHeader, { children: [
-        /* @__PURE__ */ jsx20(DialogTitle, { children: "Add signer" }),
-        /* @__PURE__ */ jsx20(DialogDescription, { children: "Add a new signer to this wallet." })
+    return /* @__PURE__ */ jsx21(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs12(DialogContent, { className: cn(classNames?.dialog), children: [
+      /* @__PURE__ */ jsxs12(DialogHeader, { children: [
+        /* @__PURE__ */ jsx21(DialogTitle, { children: "Add signer" }),
+        /* @__PURE__ */ jsx21(DialogDescription, { children: "Add a new signer to this wallet." })
       ] }),
       formContent
     ] }) });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: cn(className, classNames?.root), "data-cilantro-add-signer-form": true, children: [
-    /* @__PURE__ */ jsx20("h3", { className: "text-sm font-medium mb-2", children: "Add signer" }),
+  return /* @__PURE__ */ jsxs12("div", { className: cn(className, classNames?.root), "data-cilantro-add-signer-form": true, children: [
+    /* @__PURE__ */ jsx21("h3", { className: "text-sm font-medium mb-2", children: "Add signer" }),
     formContent
   ] });
 }
 
 // src/components/SignerList.tsx
 import { useState as useState12 } from "react";
-import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function SignerList({
   walletId,
   className,
   classNames,
   onSignerAdded,
+  useSkeleton = true,
   children
 }) {
   const { signers, isLoading, error, refresh } = useSigners({ walletId });
@@ -2747,7 +2939,7 @@ function SignerList({
     onSignerAdded?.();
   };
   if (children) {
-    return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+    return /* @__PURE__ */ jsxs13(Fragment7, { children: [
       children({
         signers,
         isLoading,
@@ -2755,7 +2947,7 @@ function SignerList({
         refresh,
         openAddSigner: () => setAddSignerOpen(true)
       }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         AddSignerForm,
         {
           walletId,
@@ -2768,31 +2960,46 @@ function SignerList({
     ] });
   }
   if (!walletId) {
-    return /* @__PURE__ */ jsx21("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: /* @__PURE__ */ jsx21("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Select a wallet first." }) });
+    return /* @__PURE__ */ jsx22("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: /* @__PURE__ */ jsx22("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Select a wallet first." }) });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: [
-    /* @__PURE__ */ jsxs12("div", { className: cn("flex items-center justify-between gap-2 mb-2", classNames?.header), children: [
-      /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium", children: "Signers" }),
-      /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs13("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, "aria-busy": isLoading, "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs13("div", { className: cn("flex items-center justify-between gap-2 mb-2", classNames?.header), children: [
+      /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium", children: "Signers" }),
+      /* @__PURE__ */ jsx22(
         Button,
         {
           type: "button",
-          size: "sm",
+          size: "touch",
           variant: "outline",
           className: classNames?.addButton,
           onClick: () => setAddSignerOpen(true),
           disabled: isLoading,
+          "aria-label": "Add signer",
           children: "Add signer"
         }
       )
     ] }),
-    isLoading ? /* @__PURE__ */ jsx21("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : error ? /* @__PURE__ */ jsx21("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : signers.length === 0 ? /* @__PURE__ */ jsx21("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers. Add one to get started." }) : /* @__PURE__ */ jsx21("ul", { className: cn("space-y-1", classNames?.list), role: "list", children: signers.map((signer) => /* @__PURE__ */ jsxs12("li", { className: cn("text-sm", classNames?.item), children: [
+    isLoading && useSkeleton ? /* @__PURE__ */ jsx22(
+      "div",
+      {
+        className: cn("space-y-1", classNames?.loading),
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx22(
+          Skeleton,
+          {
+            className: cn("h-5 w-full rounded-md", classNames?.skeleton)
+          },
+          i
+        ))
+      }
+    ) : isLoading ? /* @__PURE__ */ jsx22("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : error ? /* @__PURE__ */ jsx22("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : signers.length === 0 ? /* @__PURE__ */ jsx22("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers. Add one to get started." }) : /* @__PURE__ */ jsx22("ul", { className: cn("space-y-1", classNames?.list), role: "list", children: signers.map((signer) => /* @__PURE__ */ jsxs13("li", { className: cn("text-sm", classNames?.item), children: [
       getSignerDisplayName(signer),
       " (",
       getSignerTypeLabel(signer.type || signer.signerType || ""),
       ")"
     ] }, signer.id)) }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       AddSignerForm,
       {
         walletId,
@@ -2804,6 +3011,74 @@ function SignerList({
     )
   ] });
 }
+
+// src/ui/theme-provider.tsx
+import * as React9 from "react";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_THEME_CSS = `
+:root,[data-theme="light"]{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%}
+[data-theme="dark"]{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--primary:210 40% 98%;--primary-foreground:222.2 47.4% 11.2%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:212.7 26.8% 83.9%;--destructive:0 62.8% 30.6%;--destructive-foreground:210 40% 98%;--accent:217.2 32.6% 17.5%;--accent-foreground:210 40% 98%;--popover:222.2 84% 4.9%;--popover-foreground:210 40% 98%;--card:222.2 84% 4.9%;--card-foreground:210 40% 98%}
+`;
+function getSystemTheme() {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({
+  theme = "system",
+  defaultTheme = "dark",
+  storageKey,
+  className,
+  children,
+  injectStyles = true
+}) {
+  const [resolved, setResolved] = React9.useState(() => {
+    if (theme === "light") return "light";
+    if (theme === "dark") return "dark";
+    if (typeof window !== "undefined" && storageKey) {
+      const stored = window.localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark") return stored;
+    }
+    return defaultTheme;
+  });
+  React9.useEffect(() => {
+    if (theme === "light") {
+      setResolved("light");
+      return;
+    }
+    if (theme === "dark") {
+      setResolved("dark");
+      return;
+    }
+    const system = getSystemTheme();
+    setResolved(system);
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = () => {
+      const next = mql.matches ? "dark" : "light";
+      setResolved(next);
+      if (storageKey) window.localStorage.setItem(storageKey, next);
+    };
+    mql.addEventListener("change", listener);
+    return () => mql.removeEventListener("change", listener);
+  }, [theme, storageKey]);
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    injectStyles && /* @__PURE__ */ jsx23(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: DEFAULT_THEME_CSS },
+        "data-cilantro-theme-styles": true
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: cn(className),
+        "data-theme": resolved,
+        "data-cilantro-theme-provider": true,
+        children
+      }
+    )
+  ] });
+}
 export {
   AddSignerForm,
   AuthForm,
@@ -2817,6 +3092,8 @@ export {
   SIGNER_TYPES,
   SignerList,
   SignerSelector,
+  Skeleton,
+  ThemeProvider,
   TransactionSigningForm,
   WalletProvider,
   WalletSelector,
@@ -2827,11 +3104,16 @@ export {
   signAndSendTransactionWithSigner,
   signMessageWithSigner,
   signTransactionWithSigner,
+  useCanSign,
   useCilantroAuth,
+  useDelegatedKeys,
   useMessageSigning,
+  useSelectedWallet,
   useSignerSelection,
   useSigners,
+  useSignersForSelectedWallet,
   useTransactionSigning,
+  useWalletAddress,
   useWallets
 };
 //# sourceMappingURL=index.mjs.map