cilantro-react 0.1.0 → 0.1.1

package/dist/index.js

@@ -43,6 +43,8 @@ __export(index_exports, {
   SIGNER_TYPES: () => SIGNER_TYPES,
   SignerList: () => SignerList,
   SignerSelector: () => SignerSelector,
+  Skeleton: () => Skeleton,
+  ThemeProvider: () => ThemeProvider,
   TransactionSigningForm: () => TransactionSigningForm,
   WalletProvider: () => WalletProvider,
   WalletSelector: () => WalletSelector,
@@ -53,11 +55,16 @@ __export(index_exports, {
   signAndSendTransactionWithSigner: () => signAndSendTransactionWithSigner,
   signMessageWithSigner: () => signMessageWithSigner,
   signTransactionWithSigner: () => signTransactionWithSigner,
+  useCanSign: () => useCanSign,
   useCilantroAuth: () => useCilantroAuth,
+  useDelegatedKeys: () => useDelegatedKeys,
   useMessageSigning: () => useMessageSigning,
+  useSelectedWallet: () => useSelectedWallet,
   useSignerSelection: () => useSignerSelection,
   useSigners: () => useSigners,
+  useSignersForSelectedWallet: () => useSignersForSelectedWallet,
   useTransactionSigning: () => useTransactionSigning,
+  useWalletAddress: () => useWalletAddress,
   useWallets: () => useWallets
 });
 module.exports = __toCommonJS(index_exports);
@@ -485,6 +492,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
 var import_react4 = require("react");
 
@@ -632,8 +651,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
 var import_react5 = require("react");
+var import_delegated_keys = require("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] = (0, import_react5.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const loadKeys = (0, import_react5.useCallback)(async () => {
+    if (!walletId) {
+      setKeys([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (token) setSdkAuth(token);
+      const result = await (0, import_delegated_keys.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]);
+  (0, import_react5.useEffect)(() => {
+    loadKeys();
+  }, [loadKeys]);
+  const refresh = (0, import_react5.useCallback)(async () => {
+    if (walletId) await loadKeys();
+  }, [walletId, loadKeys]);
+  return { keys, isLoading, error, refresh };
+}
+
+// src/hooks/useSignerSelection.ts
+var import_react6 = require("react");
 function useSignerSelection(options = {}) {
   const { walletId: walletIdOverride, signingMethod = "sdk-signer" } = options;
   const { selectedWallet } = useWallets();
@@ -641,17 +728,17 @@ function useSignerSelection(options = {}) {
   const { signers: availableSigners, isLoading: isLoadingSigners } = useSigners({
     walletId: effectiveWalletId || null
   });
-  const [selectedWalletId, setSelectedWalletId] = (0, import_react5.useState)(effectiveWalletId);
-  const [selectedSigner, setSelectedSigner] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
+  const [selectedWalletId, setSelectedWalletId] = (0, import_react6.useState)(effectiveWalletId);
+  const [selectedSigner, setSelectedSigner] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
     setSelectedWalletId(effectiveWalletId);
   }, [effectiveWalletId]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (signingMethod !== "sdk-signer") {
       setSelectedSigner(null);
     }
   }, [signingMethod]);
-  const reset = (0, import_react5.useCallback)(() => {
+  const reset = (0, import_react6.useCallback)(() => {
     setSelectedWalletId("");
     setSelectedSigner(null);
   }, []);
@@ -666,8 +753,43 @@ function useSignerSelection(options = {}) {
   };
 }
 
+// src/hooks/useCanSign.ts
+var import_react7 = require("react");
+function useCanSign(options = {}) {
+  const {
+    signingMethod = "sdk-signer",
+    requireSigner = true,
+    walletAdapterConnected
+  } = options;
+  const { token } = useCilantroAuth();
+  const { selectedWallet } = useWallets();
+  const { selectedSigner } = useSignerSelection({ signingMethod });
+  return (0, import_react7.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
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/core/signer-signing/core.ts
 var import_web3 = require("@solana/web3.js");
@@ -1210,9 +1332,9 @@ function useMessageSigning(options) {
     walletAdapterSignMessage,
     walletAdapterPublicKey
   } = options;
-  const [messageText, setMessageText] = (0, import_react6.useState)("Hello, Solana!");
-  const [signResultState, setSignResultState] = (0, import_react6.useState)({ status: "idle" });
-  const [isSigning, setIsSigning] = (0, import_react6.useState)(false);
+  const [messageText, setMessageText] = (0, import_react8.useState)("Hello, Solana!");
+  const [signResultState, setSignResultState] = (0, import_react8.useState)({ status: "idle" });
+  const [isSigning, setIsSigning] = (0, import_react8.useState)(false);
   const handleSign = async () => {
     setIsSigning(true);
     setSignResultState({ status: "loading" });
@@ -1270,7 +1392,7 @@ function useMessageSigning(options) {
 }
 
 // src/hooks/useTransactionSigning.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 function useTransactionSigning(options) {
   const {
     token,
@@ -1281,9 +1403,9 @@ function useTransactionSigning(options) {
     walletAdapterPublicKey,
     connection
   } = options;
-  const [transactionResultState, setTransactionResultState] = (0, import_react7.useState)({ status: "idle" });
-  const [isSigningTransaction, setIsSigningTransaction] = (0, import_react7.useState)(false);
-  const [isSendingTransaction, setIsSendingTransaction] = (0, import_react7.useState)(false);
+  const [transactionResultState, setTransactionResultState] = (0, import_react9.useState)({ status: "idle" });
+  const [isSigningTransaction, setIsSigningTransaction] = (0, import_react9.useState)(false);
+  const [isSendingTransaction, setIsSendingTransaction] = (0, import_react9.useState)(false);
   const signTransaction = async (transaction) => {
     setIsSigningTransaction(true);
     setTransactionResultState({ status: "loading" });
@@ -1462,14 +1584,30 @@ var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /*
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-// src/components/WalletSelector.tsx
+// src/ui/skeleton.tsx
+var React2 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var Skeleton = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("rounded-md bg-muted animate-pulse", className),
+      ...props
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/WalletSelector.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function WalletSelector(props) {
   const {
     value,
     onWalletChange,
     className,
     classNames,
+    useSkeleton = true,
     placeholder = "Select a wallet",
     renderTrigger,
     renderList,
@@ -1487,7 +1625,7 @@ function WalletSelector(props) {
     onWalletChange?.(id, wallets.find((w) => w.id === id || w.walletId === id) ?? null);
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
       wallets,
       selectedWallet: selected,
       selectWallet: (id) => {
@@ -1499,23 +1637,44 @@ function WalletSelector(props) {
     }) });
   }
   if (renderTrigger || renderList) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: [
       renderTrigger?.({ selectedWallet: selected, wallets, isLoading, open: false, setOpen: () => {
       } }),
       renderList?.({ wallets, selectedWallet: selected, onSelect: handleSelect, isLoading })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Select, { value: effectiveValue || void 0, onValueChange: handleValueChange, disabled: isLoading, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select wallet", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectValue, { placeholder: isLoading ? "Loading..." : placeholder }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectContent, { className: classNames?.content, children: wallets.map((w) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectItem, { value: w.id, className: classNames?.item, children: w.walletName || w.id }, w.id)) })
+  if (isLoading && useSkeleton) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-wallet-selector": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { className: cn("h-4 flex-1 rounded", classNames?.skeleton) })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-wallet-selector": true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Select, { value: effectiveValue || void 0, onValueChange: handleValueChange, disabled: isLoading, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select wallet", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectValue, { placeholder: isLoading ? "Loading..." : placeholder }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectContent, { className: classNames?.content, children: wallets.map((w) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectItem, { value: w.id, className: classNames?.item, children: w.walletName || w.id }, w.id)) })
   ] }) });
 }
 
 // src/ui/button.tsx
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.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",
   {
@@ -1532,7 +1691,8 @@ var buttonVariants = (0, import_class_variance_authority.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: {
@@ -1541,16 +1701,16 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
 
 // src/components/SignerSelector.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SignerSelector({
   selectedWalletId,
   availableSigners,
@@ -1559,15 +1719,16 @@ function SignerSelector({
   onSignerSelect,
   className,
   classNames,
+  useSkeleton = true,
   renderList,
   children
 }) {
   if (!selectedWalletId) return null;
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({ signers: availableSigners, selectedSigner, onSignerSelect, isLoading: isLoadingSigners }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children({ signers: availableSigners, selectedSigner, onSignerSelect, isLoading: isLoadingSigners }) });
   }
   if (renderList) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, children: renderList({
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, children: renderList({
       signers: availableSigners,
       selectedSigner,
       onSelect: onSignerSelect,
@@ -1577,29 +1738,53 @@ function SignerSelector({
       getSignerUniqueId
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-selector": true, role: "listbox", "aria-label": "Select signer", children: isLoadingSigners ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : availableSigners.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers for this wallet." }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: cn("space-y-1", classNames?.list), children: availableSigners.map((signer) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    Button,
+  const loadingContent = isLoadingSigners && useSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "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__ */ (0, import_jsx_runtime8.jsx)(
+        Skeleton,
+        {
+          className: cn("h-8 w-full rounded-md", classNames?.skeleton)
+        },
+        i
+      ))
     }
-  ) }, signer.id)) }) });
+  ) : isLoadingSigners ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "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__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers for this wallet." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: cn("space-y-1", classNames?.list), children: availableSigners.map((signer) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        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)) }))
+    }
+  );
 }
 
 // src/components/DelegatedKeySelector.tsx
-var import_react8 = require("react");
-var import_delegated_keys = require("cilantro-sdk/delegated-keys");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function DelegatedKeySelector(props) {
   const {
     walletId,
@@ -1608,55 +1793,14 @@ function DelegatedKeySelector(props) {
     filterActive = true,
     className,
     classNames,
+    useSkeleton = true,
     placeholder = "Select a delegated key",
     children
   } = props;
-  const { token } = useCilantroAuth();
-  const [keys, setKeys] = (0, import_react8.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const loadKeys = (0, import_react8.useCallback)(async () => {
-    if (!walletId) {
-      setKeys([]);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      if (token) setSdkAuth(token);
-      const result = await (0, import_delegated_keys.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]);
-  (0, import_react8.useEffect)(() => {
-    loadKeys();
-  }, [loadKeys]);
+  const { keys, isLoading, error, refresh: loadKeys } = useDelegatedKeys({
+    walletId,
+    filterActive
+  });
   const onSelect = (key) => {
     onChange?.(key.id, key);
   };
@@ -1665,22 +1809,52 @@ function DelegatedKeySelector(props) {
     onChange?.(id, key);
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children({ keys, selectedKeyId: value, onSelect, isLoading, error, refresh: loadKeys }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children({ keys, selectedKeyId: value, onSelect, isLoading, error, refresh: loadKeys }) });
   }
   if (!walletId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, classNames?.root, "text-sm text-muted-foreground"), children: "Select a wallet first" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(className, classNames?.root, "text-sm text-muted-foreground"), children: "Select a wallet first" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-delegated-key-selector": true, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading delegated keys..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : keys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No delegated keys found." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Select, { value: (value ?? "") || void 0, onValueChange: handleValueChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select delegated key", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectValue, { placeholder }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectContent, { className: classNames?.content, children: keys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectItem, { value: k.id, className: classNames?.item, children: k.name || k.publicKey.slice(0, 8) + "..." }, k.id)) })
-  ] }) });
+  if (isLoading && useSkeleton) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-delegated-key-selector": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "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__ */ (0, import_jsx_runtime9.jsx)(Skeleton, { className: cn("h-4 flex-1 rounded", classNames?.skeleton) })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(className, classNames?.root),
+      "data-cilantro-delegated-key-selector": true,
+      "aria-busy": isLoading,
+      "aria-live": "polite",
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading delegated keys..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : keys.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No delegated keys found." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Select, { value: (value ?? "") || void 0, onValueChange: handleValueChange, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: classNames?.trigger, "aria-label": "Select delegated key", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { className: classNames?.content, children: keys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: k.id, className: classNames?.item, children: k.name || k.publicKey.slice(0, 8) + "..." }, k.id)) })
+      ] })
+    }
+  );
 }
 
 // src/ui/textarea.tsx
-var React3 = __toESM(require("react"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Textarea = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var React4 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Textarea = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "textarea",
     {
       className: cn(
@@ -1695,21 +1869,21 @@ var Textarea = React3.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/ui/label.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var labelVariants = (0, import_class_variance_authority2.cva)(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/ui/card.tsx
-var React5 = __toESM(require("react"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Card = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var React6 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Card = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       ref,
@@ -1719,12 +1893,12 @@ var Card = React5.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+var CardHeader = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime11.jsx)(
+var CardTitle = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "h3",
     {
       ref,
@@ -1734,19 +1908,19 @@ var CardTitle = React5.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props })
+var CardContent = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+var CardFooter = React6.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 
 // src/components/MessageSigningForm.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function MessageSigningForm({
   token: tokenOverride,
   selectedWalletId: walletIdOverride,
@@ -1778,7 +1952,7 @@ function MessageSigningForm({
     walletAdapterPublicKey
   });
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: children({
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: children({
       messageText: signing.messageText,
       setMessageText: signing.setMessageText,
       signResultState: signing.signResultState,
@@ -1790,17 +1964,17 @@ function MessageSigningForm({
   const resultStatus = signing.signResultState.status;
   const isSuccess = resultStatus === "success";
   const isError = resultStatus === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign message" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsxs)("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
-        selectedWalletId && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-message-signing-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardHeader, { className: classNames?.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(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__ */ (0, import_jsx_runtime13.jsxs)("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
+        selectedWalletId && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
           "Wallet: ",
           selectedWalletId.slice(0, 8),
           "\u2026"
         ] }),
-        selectedSigner && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: selectedWalletId ? " ml-2" : "", children: [
+        selectedSigner && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: selectedWalletId ? " ml-2" : "", children: [
           "Signer: ",
           getSignerDisplayName(selectedSigner),
           " (",
@@ -1809,10 +1983,10 @@ function MessageSigningForm({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { htmlFor: "cilantro-message-text", className: classNames?.label, children: "Message" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Label, { htmlFor: "cilantro-message-text", className: classNames?.label, children: "Message" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Textarea,
           {
             id: "cilantro-message-text",
@@ -1823,24 +1997,25 @@ function MessageSigningForm({
             rows: 4
           }
         ),
-        showCharCount && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: cn("text-right text-xs text-muted-foreground", classNames?.charCount), children: [
+        showCharCount && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: cn("text-right text-xs text-muted-foreground", classNames?.charCount), children: [
           signing.messageText.length,
           " character",
           signing.messageText.length !== 1 ? "s" : ""
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           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__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Button,
           {
             type: "button",
@@ -1852,9 +2027,12 @@ function MessageSigningForm({
           }
         )
       ] }),
-      resultStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      resultStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "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),
@@ -1865,7 +2043,7 @@ function MessageSigningForm({
           "data-status": resultStatus,
           children: [
             signing.signResultState.message,
-            signing.signResultState.detail != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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) })
           ]
         }
       )
@@ -1874,7 +2052,7 @@ function MessageSigningForm({
 }
 
 // src/components/TransactionSigningForm.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function TransactionSigningForm({
   token: tokenOverride,
   selectedWalletId: walletIdOverride,
@@ -1907,7 +2085,7 @@ function TransactionSigningForm({
     connection
   });
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: children({
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: children({
       transactionResultState: signing.transactionResultState,
       isSigningTransaction: signing.isSigningTransaction,
       isSendingTransaction: signing.isSendingTransaction,
@@ -1919,23 +2097,23 @@ function TransactionSigningForm({
   const resultStatus = signing.transactionResultState.status;
   const isSuccess = resultStatus === "success";
   const isError = resultStatus === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign transaction" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardDescription, { className: classNames?.description, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-transaction-signing-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardHeader, { className: classNames?.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardTitle, { className: cn("text-lg", classNames?.title), children: "Sign transaction" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardDescription, { className: classNames?.description, children: [
         "Build a transaction in your app, then pass it to ",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "text-xs", children: "signTransaction(tx)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs", children: "signTransaction(tx)" }),
         " to sign only, or ",
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "text-xs", children: "signAndSendTransaction(tx)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
-        selectedWalletId && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+      showContext && (selectedWalletId || selectedSigner) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: cn("mt-1 text-xs text-muted-foreground", classNames?.context), children: [
+        selectedWalletId && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
           "Wallet: ",
           selectedWalletId.slice(0, 8),
           "\u2026"
         ] }),
-        selectedSigner && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: selectedWalletId ? " ml-2" : "", children: [
+        selectedSigner && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: selectedWalletId ? " ml-2" : "", children: [
           "Signer: ",
           getSignerDisplayName(selectedSigner),
           " (",
@@ -1944,8 +2122,8 @@ function TransactionSigningForm({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Button,
         {
           type: "button",
@@ -1956,9 +2134,12 @@ function TransactionSigningForm({
           children: "Reset status"
         }
       ),
-      resultStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      resultStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "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),
@@ -1969,7 +2150,7 @@ function TransactionSigningForm({
           "data-status": resultStatus,
           children: [
             signing.transactionResultState.message,
-            signing.transactionResultState.detail != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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) })
           ]
         }
       )
@@ -1978,14 +2159,14 @@ function TransactionSigningForm({
 }
 
 // src/components/LoginForm.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/ui/input.tsx
-var React6 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Input = React6.forwardRef(
+var React7 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Input = React7.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         type,
@@ -2002,7 +2183,7 @@ var Input = React6.forwardRef(
 Input.displayName = "Input";
 
 // src/components/LoginForm.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function LoginForm({
   className,
   classNames,
@@ -2014,9 +2195,9 @@ function LoginForm({
   renderSwitchToRegister
 }) {
   const { login, isLoading } = useCilantroAuth();
-  const [usernameOrEmail, setUsernameOrEmail] = (0, import_react9.useState)("");
-  const [password, setPassword] = (0, import_react9.useState)("");
-  const [error, setError] = (0, import_react9.useState)(null);
+  const [usernameOrEmail, setUsernameOrEmail] = (0, import_react10.useState)("");
+  const [password, setPassword] = (0, import_react10.useState)("");
+  const [error, setError] = (0, import_react10.useState)(null);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -2029,15 +2210,15 @@ function LoginForm({
       onError?.(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-login-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardTitle, { className: classNames?.title, children: title }),
-      description != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardDescription, { className: classNames?.description, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-login-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CardHeader, { className: classNames?.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardTitle, { className: classNames?.title, children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardDescription, { className: classNames?.description, children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { htmlFor: "cilantro-login-username", className: classNames?.label, children: "Username or email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { htmlFor: "cilantro-login-username", className: classNames?.label, children: "Username or email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Input,
           {
             id: "cilantro-login-username",
@@ -2052,9 +2233,9 @@ function LoginForm({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { htmlFor: "cilantro-login-password", className: classNames?.label, children: "Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { htmlFor: "cilantro-login-password", className: classNames?.label, children: "Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Input,
           {
             id: "cilantro-login-password",
@@ -2069,7 +2250,7 @@ function LoginForm({
           }
         )
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           className: cn(
@@ -2080,23 +2261,24 @@ function LoginForm({
           children: error
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           type: "submit",
+          size: "touch",
           className: cn("w-full", classNames?.submitButton),
           disabled: isLoading || !usernameOrEmail.trim() || !password,
           children: isLoading ? "Signing in..." : submitLabel
         }
       ),
-      renderSwitchToRegister && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToRegister() })
+      renderSwitchToRegister && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToRegister() })
     ] }) })
   ] });
 }
 
 // src/components/RegisterForm.tsx
-var import_react10 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function RegisterForm({
   className,
   classNames,
@@ -2109,10 +2291,10 @@ function RegisterForm({
   renderSwitchToLogin
 }) {
   const { register, isLoading } = useCilantroAuth();
-  const [username, setUsername] = (0, import_react10.useState)("");
-  const [email, setEmail] = (0, import_react10.useState)("");
-  const [password, setPassword] = (0, import_react10.useState)("");
-  const [error, setError] = (0, import_react10.useState)(null);
+  const [username, setUsername] = (0, import_react11.useState)("");
+  const [email, setEmail] = (0, import_react11.useState)("");
+  const [password, setPassword] = (0, import_react11.useState)("");
+  const [error, setError] = (0, import_react11.useState)(null);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -2125,15 +2307,15 @@ function RegisterForm({
       onError?.(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-register-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CardHeader, { className: classNames?.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardTitle, { className: classNames?.title, children: title }),
-      description != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardDescription, { className: classNames?.description, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Card, { className: cn(className, classNames?.root), "data-cilantro-register-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CardHeader, { className: classNames?.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardTitle, { className: classNames?.title, children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardDescription, { className: classNames?.description, children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { htmlFor: "cilantro-register-username", className: classNames?.label, children: "Username" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-register-username", className: classNames?.label, children: "Username" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Input,
           {
             id: "cilantro-register-username",
@@ -2148,9 +2330,9 @@ function RegisterForm({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { htmlFor: "cilantro-register-email", className: classNames?.label, children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-register-email", className: classNames?.label, children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Input,
           {
             id: "cilantro-register-email",
@@ -2165,9 +2347,9 @@ function RegisterForm({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { htmlFor: "cilantro-register-password", className: classNames?.label, children: "Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-register-password", className: classNames?.label, children: "Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Input,
           {
             id: "cilantro-register-password",
@@ -2182,7 +2364,7 @@ function RegisterForm({
           }
         )
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           className: cn(
@@ -2193,23 +2375,24 @@ function RegisterForm({
           children: error
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         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__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToLogin() })
+      renderSwitchToLogin && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center text-sm text-muted-foreground", children: renderSwitchToLogin() })
     ] }) })
   ] });
 }
 
 // src/components/AuthForm.tsx
-var import_react11 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function AuthForm({
   defaultMode = "login",
   className,
@@ -2227,12 +2410,12 @@ function AuthForm({
   isActive = true
 }) {
   const { login, register, isLoading } = useCilantroAuth();
-  const [mode, setMode] = (0, import_react11.useState)(defaultMode);
-  const [usernameOrEmail, setUsernameOrEmail] = (0, import_react11.useState)("");
-  const [username, setUsername] = (0, import_react11.useState)("");
-  const [email, setEmail] = (0, import_react11.useState)("");
-  const [password, setPassword] = (0, import_react11.useState)("");
-  const [error, setError] = (0, import_react11.useState)(null);
+  const [mode, setMode] = (0, import_react12.useState)(defaultMode);
+  const [usernameOrEmail, setUsernameOrEmail] = (0, import_react12.useState)("");
+  const [username, setUsername] = (0, import_react12.useState)("");
+  const [email, setEmail] = (0, import_react12.useState)("");
+  const [password, setPassword] = (0, import_react12.useState)("");
+  const [error, setError] = (0, import_react12.useState)(null);
   const isLogin = mode === "login";
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -2255,16 +2438,16 @@ function AuthForm({
     setError(null);
   };
   const canSubmit = isLogin ? usernameOrEmail.trim().length > 0 && password.length > 0 : username.trim().length > 0 && email.trim().length > 0 && password.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Card, { className: cn("w-full max-w-sm", className, classNames?.root), "data-cilantro-auth-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CardHeader, { className: cn("space-y-1 text-center sm:text-left", classNames?.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardTitle, { className: cn("text-xl", classNames?.title), children: isLogin ? loginTitle : registerTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardDescription, { className: classNames?.description, children: isLogin ? loginDescription : registerDescription })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Card, { className: cn("w-full max-w-sm", className, classNames?.root), "data-cilantro-auth-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CardHeader, { className: cn("space-y-1 text-center sm:text-left", classNames?.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardTitle, { className: cn("text-xl", classNames?.title), children: isLogin ? loginTitle : registerTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardDescription, { className: classNames?.description, children: isLogin ? loginDescription : registerDescription })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
-      isLogin ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-auth-username", className: classNames?.label, children: "Username or email" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+      isLogin ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: "cilantro-auth-username", className: classNames?.label, children: "Username or email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
               id: "cilantro-auth-username",
@@ -2279,9 +2462,9 @@ function AuthForm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-auth-password", className: classNames?.label, children: "Password" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: "cilantro-auth-password", className: classNames?.label, children: "Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
               id: "cilantro-auth-password",
@@ -2296,10 +2479,10 @@ function AuthForm({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-auth-reg-username", className: classNames?.label, children: "Username" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: "cilantro-auth-reg-username", className: classNames?.label, children: "Username" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
               id: "cilantro-auth-reg-username",
@@ -2314,9 +2497,9 @@ function AuthForm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-auth-reg-email", className: classNames?.label, children: "Email" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: "cilantro-auth-reg-email", className: classNames?.label, children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
               id: "cilantro-auth-reg-email",
@@ -2331,9 +2514,9 @@ function AuthForm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: "cilantro-auth-reg-password", className: classNames?.label, children: "Password" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: "cilantro-auth-reg-password", className: classNames?.label, children: "Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Input,
             {
               id: "cilantro-auth-reg-password",
@@ -2349,7 +2532,7 @@ function AuthForm({
           )
         ] })
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           className: cn(
@@ -2360,16 +2543,17 @@ function AuthForm({
           children: error
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         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__ */ (0, import_jsx_runtime17.jsx)("p", { className: cn("text-center text-sm text-muted-foreground", classNames?.toggle), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: cn("text-center text-sm text-muted-foreground", classNames?.toggle), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -2384,35 +2568,49 @@ function AuthForm({
 }
 
 // src/components/AuthGuard.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function AuthGuard({
   children,
   fallback,
   className,
   classNames,
-  showFallback = true
+  showFallback = true,
+  useSkeleton = false
 }) {
   const { isAuthenticated, isLoading } = useCilantroAuth();
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("text-sm text-muted-foreground", classNames?.fallback), children: "Loading..." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        className: cn(className, classNames?.root, classNames?.loading),
+        "data-cilantro-auth-guard": true,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: useSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("rounded-lg border border-input p-4 space-y-3 w-full max-w-sm", classNames?.fallback), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton, { className: cn("h-6 w-2/3 rounded", classNames?.skeleton) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton, { className: cn("h-4 w-full rounded", classNames?.skeleton) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Skeleton, { className: cn("h-4 w-[80%] rounded", classNames?.skeleton) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("text-sm text-muted-foreground", classNames?.fallback), children: "Loading..." })
+      }
+    );
   }
   if (!isAuthenticated) {
     if (!showFallback) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoginForm, { className: classNames?.fallback }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-auth-guard": true, children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoginForm, { className: classNames?.fallback }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children });
 }
 
 // src/components/AddSignerForm.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/ui/dialog.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2424,14 +2622,14 @@ var DialogOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogContent = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     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,
@@ -2440,9 +2638,9 @@ var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) =
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "div",
   {
     className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
@@ -2450,7 +2648,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   DialogPrimitive.Title,
   {
     ref,
@@ -2459,7 +2657,7 @@ var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   DialogPrimitive.Description,
   {
     ref,
@@ -2470,7 +2668,7 @@ var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/AddSignerForm.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function AddSignerForm({
   walletId,
   open = true,
@@ -2482,12 +2680,12 @@ function AddSignerForm({
   classNames,
   asDialog = true
 }) {
-  const [signerType, setSignerType] = (0, import_react12.useState)(null);
-  const [email, setEmail] = (0, import_react12.useState)("");
-  const [phone, setPhone] = (0, import_react12.useState)("");
-  const [address, setAddress] = (0, import_react12.useState)("");
-  const [isSubmitting, setIsSubmitting] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [signerType, setSignerType] = (0, import_react13.useState)(null);
+  const [email, setEmail] = (0, import_react13.useState)("");
+  const [phone, setPhone] = (0, import_react13.useState)("");
+  const [address, setAddress] = (0, import_react13.useState)("");
+  const [isSubmitting, setIsSubmitting] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
   const resetForm = () => {
     setSignerType(null);
     setEmail("");
@@ -2542,12 +2740,12 @@ function AddSignerForm({
       onError?.(message);
     }).finally(() => setIsSubmitting(false));
   };
-  const formContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
-    !signerType ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { className: classNames?.label, children: "Signer type" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const formContent = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { onSubmit: handleSubmit, className: cn("space-y-4", classNames?.form), children: [
+    !signerType ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", role: "group", "aria-labelledby": "add-signer-type-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { id: "add-signer-type-label", className: classNames?.label, children: "Signer type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Button,
             {
               type: "button",
@@ -2558,7 +2756,7 @@ function AddSignerForm({
               children: "Email"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Button,
             {
               type: "button",
@@ -2569,7 +2767,7 @@ function AddSignerForm({
               children: "Phone"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Button,
             {
               type: "button",
@@ -2580,7 +2778,7 @@ function AddSignerForm({
               children: "Passkey"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Button,
             {
               type: "button",
@@ -2593,7 +2791,7 @@ function AddSignerForm({
           )
         ] })
       ] }),
-      asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogFooter, { className: "gap-2 sm:gap-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogFooter, { className: "gap-2 sm:gap-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Button,
         {
           type: "button",
@@ -2604,10 +2802,10 @@ function AddSignerForm({
           children: "Cancel"
         }
       ) })
-    ] }) : signerType === "email" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { htmlFor: "add-signer-email", className: classNames?.label, children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ] }) : signerType === "email" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { htmlFor: "add-signer-email", className: classNames?.label, children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Input,
           {
             id: "add-signer-email",
@@ -2622,8 +2820,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2634,10 +2832,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2648,12 +2846,12 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
-    ] }) : signerType === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { htmlFor: "add-signer-phone", className: classNames?.label, children: "Phone number" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ] }) : signerType === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { htmlFor: "add-signer-phone", className: classNames?.label, children: "Phone number" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Input,
           {
             id: "add-signer-phone",
@@ -2668,8 +2866,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2680,10 +2878,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2694,12 +2892,12 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
-    ] }) : signerType === "external" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label, { htmlFor: "add-signer-address", className: classNames?.label, children: "Wallet address" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    ] }) : signerType === "external" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Label, { htmlFor: "add-signer-address", className: classNames?.label, children: "Wallet address" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Input,
           {
             id: "add-signer-address",
@@ -2713,8 +2911,8 @@ function AddSignerForm({
           }
         )
       ] }),
-      asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2725,10 +2923,10 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] }),
-      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      !asDialog && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             type: "button",
@@ -2739,44 +2937,45 @@ function AddSignerForm({
             children: "Back"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", className: classNames?.submitButton, disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add signer" })
       ] })
     ] }) : null,
-    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: cn("text-sm text-destructive", classNames?.error), role: "alert", children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("text-sm text-destructive", classNames?.error), role: "alert", children: error })
   ] });
   if (asDialog) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogContent, { className: cn(classNames?.dialog), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogTitle, { children: "Add signer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogDescription, { children: "Add a new signer to this wallet." })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogContent, { className: cn(classNames?.dialog), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogTitle, { children: "Add signer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogDescription, { children: "Add a new signer to this wallet." })
       ] }),
       formContent
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-add-signer-form": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-sm font-medium mb-2", children: "Add signer" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-add-signer-form": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-sm font-medium mb-2", children: "Add signer" }),
     formContent
   ] });
 }
 
 // src/components/SignerList.tsx
-var import_react13 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SignerList({
   walletId,
   className,
   classNames,
   onSignerAdded,
+  useSkeleton = true,
   children
 }) {
   const { signers, isLoading, error, refresh } = useSigners({ walletId });
-  const [addSignerOpen, setAddSignerOpen] = (0, import_react13.useState)(false);
+  const [addSignerOpen, setAddSignerOpen] = (0, import_react14.useState)(false);
   const handleAddSuccess = () => {
     refresh();
     onSignerAdded?.();
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
       children({
         signers,
         isLoading,
@@ -2784,7 +2983,7 @@ function SignerList({
         refresh,
         openAddSigner: () => setAddSignerOpen(true)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         AddSignerForm,
         {
           walletId,
@@ -2797,31 +2996,46 @@ function SignerList({
     ] });
   }
   if (!walletId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Select a wallet first." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Select a wallet first." }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("flex items-center justify-between gap-2 mb-2", classNames?.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium", children: "Signers" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn(className, classNames?.root), "data-cilantro-signer-list": true, "aria-busy": isLoading, "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex items-center justify-between gap-2 mb-2", classNames?.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium", children: "Signers" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         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__ */ (0, import_jsx_runtime21.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : signers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers. Add one to get started." }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: cn("space-y-1", classNames?.list), role: "list", children: signers.map((signer) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: cn("text-sm", classNames?.item), children: [
+    isLoading && useSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: cn("space-y-1", classNames?.loading),
+        "aria-busy": "true",
+        "aria-live": "polite",
+        children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          Skeleton,
+          {
+            className: cn("h-5 w-full rounded-md", classNames?.skeleton)
+          },
+          i
+        ))
+      }
+    ) : isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "Loading signers..." }) : error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: cn("text-sm text-destructive", classNames?.message), role: "alert", children: error }) : signers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: cn("text-sm text-muted-foreground", classNames?.message), children: "No signers. Add one to get started." }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: cn("space-y-1", classNames?.list), role: "list", children: signers.map((signer) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: cn("text-sm", classNames?.item), children: [
       getSignerDisplayName(signer),
       " (",
       getSignerTypeLabel(signer.type || signer.signerType || ""),
       ")"
     ] }, signer.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       AddSignerForm,
       {
         walletId,
@@ -2833,6 +3047,74 @@ function SignerList({
     )
   ] });
 }
+
+// src/ui/theme-provider.tsx
+var React9 = __toESM(require("react"));
+var import_jsx_runtime23 = require("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__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    injectStyles && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: DEFAULT_THEME_CSS },
+        "data-cilantro-theme-styles": true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: cn(className),
+        "data-theme": resolved,
+        "data-cilantro-theme-provider": true,
+        children
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddSignerForm,
@@ -2847,6 +3129,8 @@ function SignerList({
   SIGNER_TYPES,
   SignerList,
   SignerSelector,
+  Skeleton,
+  ThemeProvider,
   TransactionSigningForm,
   WalletProvider,
   WalletSelector,
@@ -2857,11 +3141,16 @@ function SignerList({
   signAndSendTransactionWithSigner,
   signMessageWithSigner,
   signTransactionWithSigner,
+  useCanSign,
   useCilantroAuth,
+  useDelegatedKeys,
   useMessageSigning,
+  useSelectedWallet,
   useSignerSelection,
   useSigners,
+  useSignersForSelectedWallet,
   useTransactionSigning,
+  useWalletAddress,
   useWallets
 });
 //# sourceMappingURL=index.js.map