decane-connect-kit 2.28.0 → 2.29.1

package/dist/index.js

@@ -5469,8 +5469,8 @@ async function deriveAddressesFromShares(a, b) {
 init_errors();
 
 // src/ui/WalletSelector.tsx
-import React2, { useEffect, useCallback, useState } from "react";
-import { createPortal } from "react-dom";
+import React3, { useEffect as useEffect2, useCallback as useCallback2, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/ui/styles.ts
 var tokens = {
@@ -5519,6 +5519,7 @@ var tokens = {
     accent: "#F5C800",
     accentHover: "#D4A800",
     accentText: "#0D0D0B",
+    accentInk: "#7A5F00",
     badgeEvm: "#1A1917",
     badgeEvmText: "#F5C800",
     badgeSolana: "#F5C800",
@@ -5539,6 +5540,7 @@ var tokens = {
     accent: "#F5C800",
     accentHover: "#FFE04D",
     accentText: "#0D0D0B",
+    accentInk: "#F5C800",
     badgeEvm: "#F5C800",
     badgeEvmText: "#0D0D0B",
     badgeSolana: "#1A1917",
@@ -5564,6 +5566,7 @@ var CSS_VARS = {
     --dc-accent:          ${tokens.light.accent};
     --dc-accent-hover:    ${tokens.light.accentHover};
     --dc-accent-text:     ${tokens.light.accentText};
+    --dc-accent-ink:      ${tokens.light.accentInk};
     --dc-badge-evm:       ${tokens.light.badgeEvm};
     --dc-badge-evm-text:  ${tokens.light.badgeEvmText};
     --dc-badge-sol:       ${tokens.light.badgeSolana};
@@ -5585,6 +5588,7 @@ var CSS_VARS = {
     --dc-accent:          ${tokens.dark.accent};
     --dc-accent-hover:    ${tokens.dark.accentHover};
     --dc-accent-text:     ${tokens.dark.accentText};
+    --dc-accent-ink:      ${tokens.dark.accentInk};
     --dc-badge-evm:       ${tokens.dark.badgeEvm};
     --dc-badge-evm-text:  ${tokens.dark.badgeEvmText};
     --dc-badge-sol:       ${tokens.dark.badgeSolana};
@@ -5746,145 +5750,262 @@ function XLogo({ size = 14 }) {
     /* @__PURE__ */ React.createElement("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
   );
 }
-
-// src/ui/WalletSelector.tsx
-var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
-function injectTokens(theme) {
-  let resolved;
-  if (theme === "auto") {
-    resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  } else {
-    resolved = theme;
-  }
-  let styleEl = document.getElementById("decane-tokens");
-  if (!styleEl) {
-    styleEl = document.createElement("style");
-    styleEl.id = "decane-tokens";
-    document.head.appendChild(styleEl);
-  }
-  styleEl.textContent = `:root { ${CSS_VARS[resolved]} }`;
+var line = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.8,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function GoogleMark({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48", "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { fill: "#EA4335", d: "M24 9.5c3.5 0 6 1.5 7.4 2.8l5.4-5.3C33.5 3.9 29.2 2 24 2 15.4 2 8 7 4.7 14.2l6.3 4.9C12.6 13.4 17.8 9.5 24 9.5z" }), /* @__PURE__ */ React.createElement("path", { fill: "#4285F4", d: "M46 24.5c0-1.6-.1-2.8-.4-4H24v7.5h12.6c-.3 2.2-1.7 5.5-4.9 7.7l6.1 4.7C41.5 37 46 31.4 46 24.5z" }), /* @__PURE__ */ React.createElement("path", { fill: "#FBBC05", d: "M11 29.1a13.9 13.9 0 0 1 0-10l-6.3-4.9A22 22 0 0 0 2 24c0 3.5.8 6.9 2.4 9.8L11 29.1z" }), /* @__PURE__ */ React.createElement("path", { fill: "#34A853", d: "M24 46c5.9 0 10.9-2 14.5-5.4l-6.1-4.7c-1.7 1.2-4 2-8.4 2-6.2 0-11.4-4-13.1-9.6l-6.3 4.9C7.9 40.9 15.3 46 24 46z" }));
 }
-function injectFont() {
-  if (document.getElementById("decane-font")) return;
-  const link = document.createElement("link");
-  link.id = "decane-font";
-  link.rel = "stylesheet";
-  link.href = FONT_URL;
-  document.head.appendChild(link);
+function MailIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }), /* @__PURE__ */ React.createElement("path", { d: "m3.5 7 8.5 6 8.5-6" }));
 }
-function WalletRow({ wallet, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        width: "100%",
-        padding: "11px 14px",
-        background: hovered ? "var(--dc-surface-hover)" : "transparent",
-        border: focused ? "1px solid var(--dc-border-accent)" : "1px solid transparent",
-        borderRadius: 10,
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "background 0.12s, border-color 0.12s",
-        outline: "none",
-        fontFamily: "inherit"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(WalletIcon, { src: wallet.icon || void 0, name: wallet.name, size: 38 }),
-    /* @__PURE__ */ React2.createElement("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--dc-text)", letterSpacing: "-0.01em" } }, wallet.name),
-    /* @__PURE__ */ React2.createElement(ChainIconStack, { support: wallet.chainSupport, size: 16 }),
-    /* @__PURE__ */ React2.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 14 14",
-        fill: "none",
-        style: { color: hovered ? "var(--dc-text-secondary)" : "var(--dc-text-muted)", flexShrink: 0, transition: "color 0.12s" }
-      },
-      /* @__PURE__ */ React2.createElement("path", { d: "M5 2.5L9.5 7L5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    )
-  );
+function PhoneIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2.5" }), /* @__PURE__ */ React.createElement("path", { d: "M11 18h2" }));
 }
-function FilterTab({ label, active, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        flex: 1,
-        padding: "6px 8px",
-        borderRadius: 8,
-        border: active ? "1px solid var(--dc-border-accent)" : "1px solid transparent",
-        background: active ? "rgba(245,200,0,0.1)" : hovered ? "var(--dc-surface-hover)" : "transparent",
-        color: active ? "var(--dc-accent)" : "var(--dc-text-muted)",
-        fontSize: 11,
-        fontWeight: 700,
-        letterSpacing: "0.04em",
-        textTransform: "uppercase",
-        cursor: "pointer",
-        transition: "all 0.12s",
-        fontFamily: "inherit",
-        outline: "none"
-      }
-    },
-    label
-  );
+function ChatIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.2a.6.6 0 0 1-1-.5V16A2.5 2.5 0 0 1 4 13.5z" }), /* @__PURE__ */ React.createElement("path", { d: "M8.5 9h7M8.5 12.5h4.5" }));
+}
+function KeyIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("circle", { cx: "8", cy: "12", r: "4" }), /* @__PURE__ */ React.createElement("path", { d: "M12 12h9M18 12v3M15 12v2.5" }));
+}
+function UserIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "8.5", r: "3.8" }), /* @__PURE__ */ React.createElement("path", { d: "M4.5 20a7.5 7.5 0 0 1 15 0" }));
 }
-function ChainOption({ label, description, badges, onClick }) {
-  const [hovered, setHovered] = useState(false);
-  return /* @__PURE__ */ React2.createElement(
-    "button",
+function CopyIcon({ size = 15 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("rect", { x: "8.5", y: "8.5", width: "12", height: "12", rx: "2.5" }), /* @__PURE__ */ React.createElement("path", { d: "M15.5 8.5V6A2.5 2.5 0 0 0 13 3.5H6A2.5 2.5 0 0 0 3.5 6v7A2.5 2.5 0 0 0 6 15.5h2.5" }));
+}
+function CheckIcon({ size = 15 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "m5 12.5 4.5 4.5L19 7.5" }));
+}
+function CloseIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M6 6l12 12M18 6 6 18" }));
+}
+function ChevronIcon({ size = 16, open = false }) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
     {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: 6,
-        width: "100%",
-        padding: "14px 16px",
-        background: hovered ? "var(--dc-surface-hover)" : "var(--dc-surface)",
-        border: hovered ? "1px solid var(--dc-border-accent)" : "1px solid var(--dc-border)",
-        borderRadius: 12,
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "all 0.12s",
-        fontFamily: "inherit",
-        outline: "none"
-      }
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      ...line,
+      "aria-hidden": "true",
+      style: { flexShrink: 0, transition: "transform .2s", transform: open ? "rotate(180deg)" : "none" }
     },
-    badges,
-    /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--dc-text)" } }, label),
-    /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", lineHeight: 1.4 } }, description)
+    /* @__PURE__ */ React.createElement("path", { d: "m6 9 6 6 6-6" })
   );
 }
-function hasSocialMode(mode) {
-  return mode === "all" || mode === "social" || mode === "evm+social" || mode === "solana+social" || mode === "tron+social" || mode === "evm+tron+social";
+function ArrowLeftIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M19 12H5M11 6l-6 6 6 6" }));
 }
-function WalletSelector({
-  provider,
-  open,
-  onClose,
-  onConnect,
-  theme = "auto",
-  networks = "all",
-  mode = "wallets",
-  socialAuthMethods = ["google", "email"],
+function WalletLineIcon({ size = 18 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "M4 7.5A2.5 2.5 0 0 1 6.5 5H18a1 1 0 0 1 1 1v2" }), /* @__PURE__ */ React.createElement("path", { d: "M4 7.5v9A2.5 2.5 0 0 0 6.5 19H19a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1H6.5A2.5 2.5 0 0 1 4 7.5z" }), /* @__PURE__ */ React.createElement("circle", { cx: "16", cy: "13.5", r: "1", fill: "currentColor", stroke: "none" }));
+}
+function SearchIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("circle", { cx: "11", cy: "11", r: "6.5" }), /* @__PURE__ */ React.createElement("path", { d: "m20 20-4.2-4.2" }));
+}
+function ChevronRightIcon({ size = 16 }) {
+  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", ...line, "aria-hidden": "true", style: { flexShrink: 0 } }, /* @__PURE__ */ React.createElement("path", { d: "m9 6 6 6-6 6" }));
+}
+
+// src/ui/SocialWalletModal.tsx
+import React2, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+function injectTokens(theme) {
+  const resolved = theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+  let el = document.getElementById("decane-tokens");
+  if (!el) {
+    el = document.createElement("style");
+    el.id = "decane-tokens";
+    document.head.appendChild(el);
+  }
+  el.textContent = `:root { ${CSS_VARS[resolved]} }`;
+}
+function countdown(expiresAt) {
+  const secs = Math.max(0, Math.round((expiresAt - Date.now()) / 1e3));
+  return `${Math.floor(secs / 60)}m ${String(secs % 60).padStart(2, "0")}s`;
+}
+function downloadJson(data, filename) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function useBalance(kind, address, chain, rpcUrls) {
+  const [state, setState] = useState({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
+  useEffect(() => {
+    if (!address || !chain) return;
+    let cancelled = false;
+    setState((s) => ({ ...s, loading: true }));
+    fetchBalance({ kind, address, chain, rpcUrls }).then((b) => {
+      if (!cancelled) setState({ loading: false, value: b.formatted, symbol: b.symbol });
+    }).catch(() => {
+      if (!cancelled) setState({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [kind, address, chain, rpcUrls]);
+  return state;
+}
+var MODAL_CSS = `
+.dcm-card { position: relative; width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow-y: auto;
+  background: var(--dc-bg); color: var(--dc-text); border: 1px solid var(--dc-border); border-radius: 24px;
+  box-shadow: 0 24px 64px -12px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.08);
+  animation: dcm-in .22s cubic-bezier(.2,.8,.2,1); box-sizing: border-box; }
+.dcm-card *, .dcm-card *::before, .dcm-card *::after { box-sizing: border-box; }
+@keyframes dcm-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
+@keyframes dcm-fade { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .dcm-card, .dcm-backdrop { animation: none !important; } }
+.dcm-backdrop { position: absolute; inset: 0; background: var(--dc-bg-overlay);
+  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: dcm-fade .2s ease; }
+.dcm-icon-btn { position: absolute; top: 14px; width: 32px; height: 32px; border-radius: 10px; border: 0;
+  background: transparent; color: var(--dc-text-muted); cursor: pointer; display: grid; place-items: center;
+  padding: 0; transition: background .15s, color .15s; z-index: 1; }
+.dcm-icon-btn:hover { background: var(--dc-surface-hover); color: var(--dc-text); }
+.dcm-body { padding: 32px 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
+.dcm-title { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--dc-text); }
+.dcm-sub { margin: -6px 0 2px; font-size: 13.5px; line-height: 1.5; color: var(--dc-text-secondary); overflow-wrap: anywhere; }
+.dcm-sub b { color: var(--dc-text); font-weight: 600; }
+.dcm-methods { width: 100%; display: grid; gap: 8px; margin-top: 4px; }
+.dcm-method { width: 100%; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
+  border-radius: 14px; border: 1px solid var(--dc-border); background: var(--dc-surface); color: var(--dc-text);
+  font-weight: 500; font-size: 14.5px; line-height: 1; font-family: inherit; cursor: pointer; text-align: left;
+  transition: border-color .15s, background .15s; }
+.dcm-method:hover:not(:disabled) { border-color: var(--dc-text-muted); background: var(--dc-surface-hover); }
+.dcm-method:disabled { opacity: .6; cursor: default; }
+.dcm-method:focus-visible, .dcm-primary:focus-visible, .dcm-link:focus-visible, .dcm-icon-btn:focus-visible,
+.dcm-ghost:focus-visible, .dcm-copy:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
+.dcm-method > svg { color: var(--dc-text-secondary); }
+.dcm-method-input { cursor: text; padding-right: 6px; }
+.dcm-method-input:focus-within { border-color: var(--dc-accent); }
+.dcm-method-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
+  color: var(--dc-text); font-family: inherit; font-size: 14.5px; padding: 0; }
+.dcm-method-input input::placeholder { color: var(--dc-text-muted); }
+.dcm-submit { height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent;
+  color: var(--dc-accent-ink); font-weight: 600; font-size: 13.5px; line-height: 1; font-family: inherit; cursor: pointer; transition: background .15s; }
+.dcm-submit:hover:not(:disabled) { background: var(--dc-surface-hover); }
+.dcm-submit:disabled { color: var(--dc-text-muted); cursor: default; }
+.dcm-form { width: 100%; display: grid; gap: 10px; margin-top: 4px; }
+.dcm-field { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--dc-border);
+  background: var(--dc-surface); color: var(--dc-text); font-family: inherit; font-size: 15px; outline: none;
+  transition: border-color .15s, box-shadow .15s; }
+.dcm-field::placeholder { color: var(--dc-text-muted); }
+.dcm-field:focus { border-color: var(--dc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-accent) 22%, transparent); }
+.dcm-code { height: 56px; text-align: center; font-family: var(--dc-font-mono); font-size: 24px; letter-spacing: .45em; padding-left: calc(14px + .45em); }
+.dcm-primary { width: 100%; height: 48px; border-radius: 14px; border: 0; background: var(--dc-accent); color: var(--dc-accent-text);
+  font-weight: 600; font-size: 14.5px; line-height: 1; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
+  transition: background .15s, opacity .15s; }
+.dcm-primary:hover:not(:disabled) { background: var(--dc-accent-hover); }
+.dcm-primary:disabled { opacity: .55; cursor: default; }
+.dcm-ghost { height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--dc-border); background: transparent;
+  color: var(--dc-text); font-weight: 500; font-size: 14px; line-height: 1; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
+.dcm-ghost:hover:not(:disabled) { background: var(--dc-surface-hover); border-color: var(--dc-text-muted); }
+.dcm-ghost:disabled { opacity: .55; cursor: default; }
+.dcm-link { border: 0; background: transparent; color: var(--dc-accent-ink); font-weight: 500; font-size: 13.5px; line-height: 1.4; font-family: inherit;
+  cursor: pointer; padding: 4px; border-radius: 6px; }
+.dcm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
+.dcm-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
+  background: var(--dc-surface); border: 1px solid var(--dc-border); color: var(--dc-text); }
+.dcm-error { margin: 0; width: 100%; font-size: 13px; line-height: 1.45; color: var(--dc-danger); overflow-wrap: anywhere; }
+.dcm-protected { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
+  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--dc-border); font-size: 12.5px; color: var(--dc-text-muted); }
+.dcm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
+.dcm-status i { width: 7px; height: 7px; border-radius: 50%; display: block; }
+.dcm-addresses { width: 100%; border: 1px solid var(--dc-border); border-radius: 16px; overflow: hidden; text-align: left; }
+.dcm-address { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--dc-surface); }
+.dcm-address + .dcm-address { border-top: 1px solid var(--dc-border); }
+.dcm-address-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
+.dcm-address-main span { font-size: 13px; color: var(--dc-text-secondary); }
+.dcm-address-main code { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-text); }
+.dcm-balance { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-text); white-space: nowrap; }
+.dcm-copy { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--dc-text-muted);
+  display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s; }
+.dcm-copy:hover { background: var(--dc-surface-hover); color: var(--dc-text); }
+.dcm-panel { width: 100%; border: 1px solid var(--dc-border); border-radius: 16px; text-align: left; overflow: hidden; }
+.dcm-panel-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px;
+  border: 0; background: var(--dc-surface); color: var(--dc-text); font-weight: 500; font-size: 14px; line-height: 1; font-family: inherit; cursor: pointer; }
+.dcm-panel-head:hover { background: var(--dc-surface-hover); }
+.dcm-panel-head svg { color: var(--dc-text-muted); }
+.dcm-panel-body { padding: 14px; border-top: 1px solid var(--dc-border); display: grid; gap: 10px; }
+.dcm-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-secondary); }
+.dcm-warn { padding: 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
+  background: color-mix(in srgb, var(--dc-danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--dc-danger) 30%, transparent); color: var(--dc-text); }
+.dcm-warn strong { display: block; margin-bottom: 2px; color: var(--dc-danger); font-weight: 600; }
+.dcm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dc-text); cursor: pointer; }
+.dcm-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--dc-accent); }
+.dcm-row { display: flex; gap: 8px; width: 100%; }
+.dcm-row > .dcm-primary { flex: 1; height: 44px; border-radius: 12px; }
+.dcm-actions { width: 100%; display: flex; gap: 8px; }
+.dcm-or { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dc-text-muted); }
+.dcm-or::before, .dcm-or::after { content: ""; flex: 1; height: 1px; background: var(--dc-border); }
+.dcm-method .dcm-trail { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--dc-text-muted); font-size: 12.5px; font-weight: 500; }
+.dcm-stack { display: inline-flex; }
+.dcm-stack img, .dcm-stack span { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--dc-surface); margin-left: -7px; object-fit: cover; background: var(--dc-surface-hover); }
+.dcm-stack > :first-child { margin-left: 0; }
+.dcm-method:hover:not(:disabled) .dcm-stack img { border-color: var(--dc-surface-hover); }
+.dcm-wallet-img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+.dcm-list { width: 100%; display: grid; gap: 8px; max-height: min(380px, 50vh); overflow-y: auto; padding: 2px; margin: -2px; }
+.dcm-pills { width: 100%; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dc-surface); border: 1px solid var(--dc-border); }
+.dcm-pills button { flex: 1; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--dc-text-secondary);
+  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
+.dcm-pills button:hover { color: var(--dc-text); }
+.dcm-pills button[aria-pressed="true"] { background: var(--dc-bg); color: var(--dc-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
+.dcm-search { position: relative; width: 100%; }
+.dcm-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dc-text-muted); pointer-events: none; }
+.dcm-search .dcm-field { padding: 10px 14px 10px 38px; font-size: 14px; }
+.dcm-empty { width: 100%; padding: 28px 12px; font-size: 13.5px; color: var(--dc-text-muted); }
+.dcm-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--dc-border);
+  background: var(--dc-surface); color: var(--dc-text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
+.dcm-option:hover { border-color: var(--dc-text-muted); background: var(--dc-surface-hover); }
+.dcm-option:focus-visible, .dcm-pills button:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 2px; }
+.dcm-option-icons { width: 64px; flex-shrink: 0; display: flex; }
+.dcm-option-text { flex: 1; min-width: 0; }
+.dcm-option b { display: block; font-size: 14.5px; font-weight: 500; }
+.dcm-option small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--dc-text-secondary); }
+.dcm-option > svg { color: var(--dc-text-muted); }
+.dcm-actions > * { flex: 1; }
+`;
+function injectModalCss() {
+  if (document.getElementById("decane-modal-css")) return;
+  const el = document.createElement("style");
+  el.id = "decane-modal-css";
+  el.textContent = MODAL_CSS;
+  document.head.appendChild(el);
+}
+function shortAddress(a, head = 6, tail = 4) {
+  return a.length > head + tail + 1 ? `${a.slice(0, head)}\u2026${a.slice(-tail)}` : a;
+}
+function CopyButton({ value, label }) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    await navigator.clipboard.writeText(value).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+  return /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-copy", onClick: copy, "aria-label": copied ? "Copied" : `Copy ${label} address`, title: copied ? "Copied" : "Copy address" }, copied ? /* @__PURE__ */ React2.createElement(CheckIcon, null) : /* @__PURE__ */ React2.createElement(CopyIcon, null));
+}
+function AddressRow({
+  label,
+  address,
+  kind,
+  chain,
+  rpcUrls
+}) {
+  const balance = useBalance(kind, address, chain, rpcUrls);
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-address" }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-address-main" }, /* @__PURE__ */ React2.createElement("span", null, label), /* @__PURE__ */ React2.createElement("code", { title: address }, shortAddress(address, 8, 6))), /* @__PURE__ */ React2.createElement("span", { className: "dcm-balance" }, balance.loading ? "\u2026" : `${formatBalanceDisplay(balance.value)} ${balance.symbol}`), /* @__PURE__ */ React2.createElement(CopyButton, { value: address, label }));
+}
+function ProtectedBy() {
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-protected" }, /* @__PURE__ */ React2.createElement("span", null, "Protected by"), /* @__PURE__ */ React2.createElement(DecaneMark, { size: 14, muted: true }), /* @__PURE__ */ React2.createElement(DecaneWordmark, { size: 12, muted: true }));
+}
+function SignInView({
   onGoogleSignIn,
   onKingsChatSignIn,
   onXSignIn,
@@ -5892,1362 +6013,219 @@ function WalletSelector({
   onEmailVerify,
   onPhoneStart,
   onPhoneVerify,
+  authMethods,
+  resumeHint,
   customAuthLabel,
   onCustomAuthSignIn,
-  canUsePasskey = false,
-  passkeyAddress = null,
-  onPasskeySignIn
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
+  extra
 }) {
-  const showSocial = hasSocialMode(mode);
-  const showWallets = mode !== "social";
-  const [view, setView] = useState(showSocial ? "social" : "wallets");
-  const [search, setSearch] = useState("");
-  const [filter, setFilter] = useState("all");
-  const [pendingWallet, setPendingWallet] = useState(null);
-  const [emailStep, setEmailStep] = useState("input");
-  const [emailVal, setEmailVal] = useState("");
-  const [codeVal, setCodeVal] = useState("");
-  const [phoneStep, setPhoneStep] = useState("input");
-  const [phoneVal, setPhoneVal] = useState("");
+  const [googleLoading, setGoogleLoading] = useState(false);
+  const [kingsChatLoading, setKingsChatLoading] = useState(false);
+  const [xLoading, setXLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [emailSent, setEmailSent] = useState(false);
+  const [emailLoading, setEmailLoading] = useState(false);
+  const [phone, setPhone] = useState("");
   const [phoneCode, setPhoneCode] = useState("");
-  const [socialLoad, setSocialLoad] = useState(false);
-  const [socialErr, setSocialErr] = useState("");
+  const [phoneSent, setPhoneSent] = useState(false);
+  const [phoneLoading, setPhoneLoading] = useState(false);
+  const [customLoading, setCustomLoading] = useState(false);
+  const [passkeyLoading, setPasskeyLoading] = useState(false);
   const [showOtherMethods, setShowOtherMethods] = useState(false);
-  const passkeyFirst = canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
-  useEffect(() => {
-    if (!open) return;
-    injectFont();
-    injectTokens(theme);
-    if (theme !== "auto") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => injectTokens("auto");
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [open, theme]);
-  useEffect(() => {
-    if (!open) {
-      setSearch("");
-      setFilter("all");
-      setPendingWallet(null);
-      setView(showSocial ? "social" : "wallets");
-      setEmailStep("input");
-      setEmailVal("");
-      setCodeVal("");
-      setSocialErr("");
-      setShowOtherMethods(false);
-      return;
-    }
-    return () => {
-      document.getElementById("decane-tokens")?.remove();
-    };
-  }, [open, showWallets]);
-  async function handlePasskeySignIn() {
+  const [error, setError] = useState("");
+  const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
+  const busy = googleLoading || kingsChatLoading || xLoading || customLoading || emailLoading || phoneLoading;
+  async function handlePasskey() {
     if (!onPasskeySignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setPasskeyLoading(true);
     try {
       await onPasskeySignIn();
     } catch (e) {
       const err = e;
       if (err?.name !== "UserCancelledError") {
-        setSocialErr(err?.message ?? "Passkey sign-in failed");
+        setError(err?.message ?? "Passkey sign-in failed");
         setShowOtherMethods(true);
       }
-      setSocialLoad(false);
+      setPasskeyLoading(false);
     }
   }
-  async function handlePasskeyClick() {
-    void handlePasskeySignIn();
-  }
-  async function handleGoogleClick() {
-    if (!onGoogleSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
+  async function handleGoogle() {
+    setError("");
+    setGoogleLoading(true);
     try {
       await onGoogleSignIn();
     } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
+      setError(e.message);
+      setGoogleLoading(false);
     }
   }
-  async function handleKingsChatClick() {
+  async function handleKingsChat() {
     if (!onKingsChatSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setKingsChatLoading(true);
     try {
       await onKingsChatSignIn();
     } catch (e) {
-      setSocialErr(e.message);
+      setError(e.message);
     } finally {
-      setSocialLoad(false);
+      setKingsChatLoading(false);
     }
   }
-  async function handleXClick() {
+  async function handleX() {
     if (!onXSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setXLoading(true);
     try {
       await onXSignIn();
     } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
-    }
-  }
-  async function handleCustomAuthClick() {
-    if (!onCustomAuthSignIn) return;
-    setSocialLoad(true);
-    setSocialErr("");
-    try {
-      await onCustomAuthSignIn();
-    } catch (e) {
-      setSocialErr(e.message);
-      setSocialLoad(false);
+      setError(e.message);
+      setXLoading(false);
     }
   }
   async function handleEmailStart(e) {
     e.preventDefault();
-    if (!onEmailStart) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setEmailLoading(true);
     try {
-      await onEmailStart(emailVal);
-      setEmailStep("code");
+      await onEmailStart(email.trim());
+      setEmailSent(true);
     } catch (e2) {
-      setSocialErr(e2.message);
+      setError(e2.message);
     } finally {
-      setSocialLoad(false);
+      setEmailLoading(false);
     }
   }
   async function handleEmailVerify(e) {
     e.preventDefault();
-    if (!onEmailVerify) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setEmailLoading(true);
     try {
-      await onEmailVerify(emailVal, codeVal);
+      await onEmailVerify(email.trim(), code);
     } catch (e2) {
-      setSocialErr(e2.message);
+      setError(e2.message);
     } finally {
-      setSocialLoad(false);
+      setEmailLoading(false);
     }
   }
   async function handlePhoneStart(e) {
     e.preventDefault();
     if (!onPhoneStart) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setPhoneLoading(true);
     try {
-      await onPhoneStart(phoneVal);
-      setPhoneStep("code");
+      await onPhoneStart(phone.trim());
+      setPhoneSent(true);
     } catch (e2) {
-      setSocialErr(e2.message);
+      setError(e2.message);
     } finally {
-      setSocialLoad(false);
+      setPhoneLoading(false);
     }
   }
   async function handlePhoneVerify(e) {
     e.preventDefault();
     if (!onPhoneVerify) return;
-    setSocialLoad(true);
-    setSocialErr("");
+    setError("");
+    setPhoneLoading(true);
     try {
-      await onPhoneVerify(phoneVal, phoneCode);
+      await onPhoneVerify(phone.trim(), phoneCode);
     } catch (e2) {
-      setSocialErr(e2.message);
+      setError(e2.message);
     } finally {
-      setSocialLoad(false);
+      setPhoneLoading(false);
     }
   }
-  const handleKey = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        if (pendingWallet) {
-          setPendingWallet(null);
-        } else {
-          onClose();
-        }
-      }
-    },
-    [onClose, pendingWallet]
-  );
-  useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [open, handleKey]);
-  if (!open) return null;
-  const q = search.toLowerCase();
-  const networkWallets = provider.wallets.filter((w) => {
-    const cs = w.chainSupport;
-    if (networks === "evm") return cs.includes("evm");
-    if (networks === "solana") return cs.includes("solana");
-    if (networks === "tron") return cs.includes("tron");
-    if (networks === "bitcoin") return cs.includes("bitcoin");
-    return true;
-  });
-  const baseWallets = filter === "evm" ? networkWallets.filter((w) => w.chainSupport.includes("evm")) : filter === "solana" ? networkWallets.filter((w) => w.chainSupport.includes("solana")) : filter === "tron" ? networkWallets.filter((w) => w.chainSupport.includes("tron")) : filter === "bitcoin" ? networkWallets.filter((w) => w.chainSupport.includes("bitcoin")) : networkWallets;
-  const filtered = q ? baseWallets.filter((w) => w.name.toLowerCase().includes(q)) : baseWallets;
-  function handleWalletClick(wallet) {
-    const cs = wallet.chainSupport;
-    const isMulti = cs.length >= 2;
-    if (isMulti && networks === "all") {
-      setPendingWallet(wallet);
-    } else {
-      const preference = networks === "evm" ? "evm" : networks === "solana" ? "solana" : networks === "tron" ? "tron" : networks === "bitcoin" ? "bitcoin" : void 0;
-      onConnect(wallet, preference);
-      onClose();
+  async function handleCustomAuth() {
+    if (!onCustomAuthSignIn) return;
+    setError("");
+    setCustomLoading(true);
+    try {
+      await onCustomAuthSignIn();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setCustomLoading(false);
     }
   }
-  function handleChainChoice(preference) {
-    if (!pendingWallet) return;
-    onConnect(pendingWallet, preference);
-    onClose();
+  function backToMethods() {
+    setEmailSent(false);
+    setCode("");
+    setPhoneSent(false);
+    setPhoneCode("");
+    setError("");
   }
-  const modal = /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Connect wallet",
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "16px",
-        // Same fallback chain as SocialWalletModal — without it, this modal
-        // drops to the browser default serif whenever the token block hasn't
-        // been injected, while the social modal still lands on system-ui.
-        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)"
-      }
-    },
-    /* @__PURE__ */ React2.createElement(
-      "div",
+  const errorLine = error ? /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, error) : null;
+  if (passkeyFirst) {
+    return /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-badge" }, /* @__PURE__ */ React2.createElement(KeyIcon, { size: 22 })), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Welcome back"), /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, passkeyAddress ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, "Unlock ", /* @__PURE__ */ React2.createElement("b", null, shortAddress(passkeyAddress)), " with your passkey.") : "Unlock your wallet with your passkey."), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handlePasskey, disabled: passkeyLoading }, passkeyLoading ? "Waiting for passkey\u2026" : "Continue with passkey"), errorLine, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+      setError("");
+      setShowOtherMethods(true);
+    } }, "Use another sign-in method"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
+  }
+  if (emailSent || phoneSent) {
+    const isEmail = emailSent;
+    const value = isEmail ? code : phoneCode;
+    const setValue = isEmail ? setCode : setPhoneCode;
+    const loading = isEmail ? emailLoading : phoneLoading;
+    return /* @__PURE__ */ React2.createElement("form", { className: "dcm-body", onSubmit: isEmail ? handleEmailVerify : handlePhoneVerify }, /* @__PURE__ */ React2.createElement("div", { className: "dcm-badge" }, isEmail ? /* @__PURE__ */ React2.createElement(MailIcon, { size: 22 }) : /* @__PURE__ */ React2.createElement(PhoneIcon, { size: 22 })), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Enter your code"), /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, "We sent a 6-digit code to ", /* @__PURE__ */ React2.createElement("b", null, isEmail ? email.trim() : phone.trim())), /* @__PURE__ */ React2.createElement("div", { className: "dcm-form" }, /* @__PURE__ */ React2.createElement(
+      "input",
       {
-        onClick: () => {
-          if (pendingWallet) {
-            setPendingWallet(null);
-          } else {
-            onClose();
-          }
-        },
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "var(--dc-bg-overlay)",
-          backdropFilter: "blur(8px)",
-          WebkitBackdropFilter: "blur(8px)"
-        }
-      }
-    ),
-    /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        style: {
-          position: "relative",
-          background: "var(--dc-bg)",
-          border: "1px solid var(--dc-border)",
-          borderRadius: 20,
-          width: "100%",
-          maxWidth: 400,
-          maxHeight: "85vh",
-          display: "flex",
-          flexDirection: "column",
-          boxShadow: "0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
-          overflow: "hidden"
-        }
-      },
-      /* @__PURE__ */ React2.createElement(
-        "div",
-        {
-          style: {
-            height: 2,
-            background: "linear-gradient(90deg, transparent, var(--dc-accent) 30%, var(--dc-accent) 70%, transparent)"
-          }
-        }
-      ),
-      pendingWallet ? (
-        /* ── Chain picker step ───────────────────────────────────────── */
-        /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: { padding: "18px 20px 16px", display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => setPendingWallet(null),
-            "aria-label": "Back",
-            style: {
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 8,
-              width: 28,
-              height: 28,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              fontFamily: "inherit",
-              padding: 0
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M7.5 2L3 6l4.5 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))
-        ), /* @__PURE__ */ React2.createElement("h2", { style: { margin: 0, fontSize: 16, fontWeight: 800, color: "var(--dc-text)", letterSpacing: "-0.02em" } }, "Choose networks"), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: onClose,
-            "aria-label": "Close",
-            style: {
-              marginLeft: "auto",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 8,
-              width: 28,
-              height: 28,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              fontFamily: "inherit",
-              padding: 0
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-        )), /* @__PURE__ */ React2.createElement(
-          "div",
-          {
-            style: {
-              margin: "0 20px 16px",
-              padding: "12px 14px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 12,
-              display: "flex",
-              alignItems: "center",
-              gap: 12
-            }
-          },
-          /* @__PURE__ */ React2.createElement(WalletIcon, { src: pendingWallet.icon || void 0, name: pendingWallet.name, size: 36 }),
-          /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", { style: { fontSize: 14, fontWeight: 700, color: "var(--dc-text)" } }, pendingWallet.name), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: 11, color: "var(--dc-text-muted)", marginTop: 2 } }, "Multi-chain wallet detected"))
-        ), /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 12px 20px", display: "flex", flexDirection: "column", gap: 8 } }, pendingWallet.chainSupport.includes("evm") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "EVM networks",
-            description: "Connect your Ethereum-compatible address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["evm"], size: 18 }),
-            onClick: () => handleChainChoice("evm")
-          }
-        ), pendingWallet.chainSupport.includes("solana") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Solana network",
-            description: "Connect your Solana address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["solana"], size: 18 }),
-            onClick: () => handleChainChoice("solana")
-          }
-        ), pendingWallet.chainSupport.includes("tron") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Tron network",
-            description: "Connect your Tron address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["tron"], size: 18 }),
-            onClick: () => handleChainChoice("tron")
-          }
-        ), pendingWallet.chainSupport.includes("bitcoin") && /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "Bitcoin network",
-            description: "Connect your Bitcoin address only",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: ["bitcoin"], size: 18 }),
-            onClick: () => handleChainChoice("bitcoin")
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          ChainOption,
-          {
-            label: "All networks",
-            description: "Connect all supported addresses together",
-            badges: /* @__PURE__ */ React2.createElement(ChainIconStack, { support: pendingWallet.chainSupport, size: 18 }),
-            onClick: () => handleChainChoice(void 0)
-          }
-        )))
-      ) : (
-        /* ── Wallet list / Social sign-in ────────────────────────────── */
-        /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: { padding: "18px 20px 0" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 } }, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("h2", { style: { margin: 0, fontSize: 17, fontWeight: 800, color: "var(--dc-text)", letterSpacing: "-0.02em", lineHeight: 1.2 } }, view === "social" ? "Sign in" : "Connect wallet"), view === "wallets" && networkWallets.length > 0 && /* @__PURE__ */ React2.createElement("p", { style: { margin: "3px 0 0", fontSize: 12, color: "var(--dc-text-muted)" } }, networkWallets.length, " wallet", networkWallets.length !== 1 ? "s" : "", " detected")), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: onClose,
-            "aria-label": "Close",
-            style: {
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              cursor: "pointer",
-              padding: 0,
-              width: 28,
-              height: 28,
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "var(--dc-text-muted)",
-              flexShrink: 0,
-              transition: "background 0.12s, color 0.12s",
-              fontFamily: "inherit"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.background = "var(--dc-surface-hover)";
-              e.currentTarget.style.color = "var(--dc-text)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = "var(--dc-surface)";
-              e.currentTarget.style.color = "var(--dc-text-muted)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-        )), showWallets && showSocial && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 14, background: "var(--dc-surface)", borderRadius: 10, padding: 3 } }, ["social", "wallets"].map((v) => /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            key: v,
-            onClick: () => setView(v),
-            style: {
-              flex: 1,
-              padding: "7px 0",
-              borderRadius: 8,
-              border: "none",
-              background: view === v ? "var(--dc-bg)" : "transparent",
-              color: view === v ? "var(--dc-text)" : "var(--dc-text-muted)",
-              fontSize: 13,
-              fontWeight: view === v ? 700 : 500,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              boxShadow: view === v ? "0 1px 4px rgba(0,0,0,0.2)" : "none",
-              transition: "all 0.15s"
-            }
-          },
-          v === "wallets" ? "Wallet" : "Sign in"
-        ))), view === "wallets" && networks === "all" && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 10 } }, /* @__PURE__ */ React2.createElement(FilterTab, { label: "All", active: filter === "all", onClick: () => setFilter("all") }), /* @__PURE__ */ React2.createElement(FilterTab, { label: "EVM", active: filter === "evm", onClick: () => setFilter("evm") }), /* @__PURE__ */ React2.createElement(FilterTab, { label: "Solana", active: filter === "solana", onClick: () => setFilter("solana") }), provider.tronWallets && provider.tronWallets.length > 0 && /* @__PURE__ */ React2.createElement(FilterTab, { label: "Tron", active: filter === "tron", onClick: () => setFilter("tron") }), provider.bitcoinWallets && provider.bitcoinWallets.length > 0 && /* @__PURE__ */ React2.createElement(FilterTab, { label: "Bitcoin", active: filter === "bitcoin", onClick: () => setFilter("bitcoin") })), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { position: "relative", marginBottom: 10 } }, /* @__PURE__ */ React2.createElement(
-          "svg",
-          {
-            width: "14",
-            height: "14",
-            viewBox: "0 0 14 14",
-            fill: "none",
-            style: { position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--dc-text-muted)", pointerEvents: "none" }
-          },
-          /* @__PURE__ */ React2.createElement("circle", { cx: "6", cy: "6", r: "4", stroke: "currentColor", strokeWidth: "1.4" }),
-          /* @__PURE__ */ React2.createElement("path", { d: "M9.5 9.5L12 12", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
-        ), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            placeholder: "Search wallets\u2026",
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            style: {
-              width: "100%",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              padding: "8px 12px 8px 32px",
-              outline: "none",
-              fontFamily: "var(--dc-font-sans, system-ui, sans-serif)",
-              transition: "border-color 0.15s",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ))), view === "social" && /* @__PURE__ */ React2.createElement("div", { style: { padding: "4px 20px 24px", display: "flex", flexDirection: "column", gap: 10 } }, socialErr && /* @__PURE__ */ React2.createElement("div", { style: { background: "rgba(204,51,0,0.1)", border: "1px solid var(--dc-danger)", borderRadius: 8, padding: "9px 12px", fontSize: 12, color: "var(--dc-danger)" } }, socialErr), passkeyFirst && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handlePasskeyClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "13px 16px",
-              background: "var(--dc-accent)",
-              border: "none",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              color: "var(--dc-accent-text)",
-              fontSize: 14,
-              fontWeight: 700,
-              fontFamily: "inherit",
-              opacity: socialLoad ? 0.6 : 1
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "8", r: "4" }), /* @__PURE__ */ React2.createElement("path", { d: "M6 21v-1a4 4 0 0 1 4-4h1" }), /* @__PURE__ */ React2.createElement("path", { d: "M17 15v6M14.5 18h5" })),
-          socialLoad ? "Verifying\u2026" : "Continue with passkey"
-        ), passkeyAddress && /* @__PURE__ */ React2.createElement("div", { style: { textAlign: "center", fontSize: 12, color: "var(--dc-text-muted)" } }, "Resuming ", passkeyAddress.slice(0, 6), "\u2026", passkeyAddress.slice(-4)), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => {
-              setShowOtherMethods(true);
-              setSocialErr("");
-            },
-            disabled: socialLoad,
-            style: {
-              background: "none",
-              border: "none",
-              padding: "6px 0",
-              color: "var(--dc-text-muted)",
-              fontSize: 12.5,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              textDecoration: "underline",
-              textUnderlineOffset: 3
-            }
-          },
-          "Use a different account"
-        )), !passkeyFirst && socialAuthMethods.includes("google") && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleGoogleClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ React2.createElement("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z", fill: "#4285F4" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z", fill: "#34A853" }), /* @__PURE__ */ React2.createElement("path", { d: "M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z", fill: "#FBBC05" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z", fill: "#EA4335" })),
-          socialLoad ? "Redirecting\u2026" : "Continue with Google"
-        ), !passkeyFirst && socialAuthMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleKingsChatClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true" }, /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "9", r: "9", fill: "var(--dc-accent)" }), /* @__PURE__ */ React2.createElement("path", { d: "M5.5 4.5h1.9v3.6l3.1-3.6h2.3l-3.3 3.8 3.5 5.2h-2.3l-2.5-3.8-.8.9v2.9H5.5V4.5z", fill: "var(--dc-accent-text)" })),
-          socialLoad ? "Waiting for KingsChat\u2026" : "Continue with KingsChat"
-        ), !passkeyFirst && socialAuthMethods.includes("x") && onXSignIn && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleXClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          /* @__PURE__ */ React2.createElement(XLogo, { size: 16 }),
-          socialLoad ? "Redirecting\u2026" : "Continue with X"
-        ), !passkeyFirst && socialAuthMethods.includes("google") && socialAuthMethods.includes("email") && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or continue with email"), /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), !passkeyFirst && socialAuthMethods.includes("email") && (emailStep === "input" ? /* @__PURE__ */ React2.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "email",
-            placeholder: "your@email.com",
-            value: emailVal,
-            onChange: (e) => setEmailVal(e.target.value),
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              fontFamily: "inherit",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || !emailVal,
-            style: {
-              width: "100%",
-              padding: "10px 16px",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 14,
-              fontWeight: 700,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || !emailVal ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Sending\u2026" : "Send code"
-        )) : /* @__PURE__ */ React2.createElement("form", { onSubmit: handleEmailVerify, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: 12, color: "var(--dc-text-muted)", textAlign: "center" } }, "Code sent to ", /* @__PURE__ */ React2.createElement("strong", { style: { color: "var(--dc-text)" } }, emailVal)), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            placeholder: "6-digit code",
-            value: codeVal,
-            onChange: (e) => setCodeVal(e.target.value.replace(/\D/g, "").slice(0, 6)),
-            autoFocus: true,
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 20,
-              fontFamily: "monospace",
-              letterSpacing: 8,
-              textAlign: "center",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setEmailStep("input");
-              setCodeVal("");
-              setSocialErr("");
-            },
-            style: {
-              flex: 1,
-              padding: "9px 0",
-              background: "transparent",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text-muted)",
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit"
-            }
-          },
-          "Back"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || codeVal.length < 6,
-            style: {
-              flex: 2,
-              padding: "9px 0",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 13,
-              fontWeight: 700,
-              cursor: socialLoad || codeVal.length < 6 ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || codeVal.length < 6 ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Verifying\u2026" : "Verify"
-        )))), !passkeyFirst && socialAuthMethods.includes("phone") && onPhoneStart && onPhoneVerify && (phoneStep === "input" ? /* @__PURE__ */ React2.createElement("form", { onSubmit: handlePhoneStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "tel",
-            placeholder: "+234 801 234 5678",
-            value: phoneVal,
-            onChange: (e) => setPhoneVal(e.target.value),
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 13,
-              fontFamily: "inherit",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || !phoneVal,
-            style: {
-              width: "100%",
-              padding: "10px 16px",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 14,
-              fontWeight: 700,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || !phoneVal ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Sending\u2026" : "Send code"
-        )) : /* @__PURE__ */ React2.createElement("form", { onSubmit: handlePhoneVerify, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: 12, color: "var(--dc-text-muted)", textAlign: "center" } }, "Code sent to ", /* @__PURE__ */ React2.createElement("strong", { style: { color: "var(--dc-text)" } }, phoneVal)), /* @__PURE__ */ React2.createElement(
-          "input",
-          {
-            type: "text",
-            inputMode: "numeric",
-            placeholder: "6-digit code",
-            value: phoneCode,
-            onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, "").slice(0, 6)),
-            autoFocus: true,
-            required: true,
-            style: {
-              width: "100%",
-              padding: "10px 12px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text)",
-              fontSize: 20,
-              fontFamily: "monospace",
-              letterSpacing: 8,
-              textAlign: "center",
-              outline: "none",
-              boxSizing: "border-box"
-            },
-            onFocus: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onBlur: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          }
-        ), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              setPhoneStep("input");
-              setPhoneCode("");
-              setSocialErr("");
-            },
-            style: {
-              flex: 1,
-              padding: "9px 0",
-              background: "transparent",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              color: "var(--dc-text-muted)",
-              fontSize: 13,
-              cursor: "pointer",
-              fontFamily: "inherit"
-            }
-          },
-          "Back"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            type: "submit",
-            disabled: socialLoad || phoneCode.length < 6,
-            style: {
-              flex: 2,
-              padding: "9px 0",
-              background: "var(--dc-accent)",
-              color: "var(--dc-accent-text)",
-              border: "none",
-              borderRadius: 10,
-              fontSize: 13,
-              fontWeight: 700,
-              cursor: socialLoad || phoneCode.length < 6 ? "not-allowed" : "pointer",
-              fontFamily: "inherit",
-              opacity: socialLoad || phoneCode.length < 6 ? 0.6 : 1
-            }
-          },
-          socialLoad ? "Verifying\u2026" : "Verify"
-        )))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React2.createElement(React2.Fragment, null, (socialAuthMethods.includes("google") || socialAuthMethods.includes("email")) && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or"), /* @__PURE__ */ React2.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: handleCustomAuthClick,
-            disabled: socialLoad,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 10,
-              width: "100%",
-              padding: "11px 16px",
-              background: "var(--dc-surface)",
-              border: "1px solid var(--dc-border)",
-              borderRadius: 10,
-              cursor: socialLoad ? "not-allowed" : "pointer",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "var(--dc-text)",
-              fontFamily: "inherit",
-              transition: "border-color 0.12s, background 0.12s",
-              opacity: socialLoad ? 0.6 : 1
-            },
-            onMouseEnter: (e) => {
-              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.borderColor = "var(--dc-border)";
-            }
-          },
-          socialLoad ? "Connecting\u2026" : customAuthLabel
-        ))), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { overflowY: "auto", flex: 1, padding: "0 12px 20px" } }, filtered.length > 0 ? /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, filtered.map((w) => /* @__PURE__ */ React2.createElement(WalletRow, { key: w.id, wallet: w, onClick: () => handleWalletClick(w) }))) : /* @__PURE__ */ React2.createElement("div", { style: { textAlign: "center", padding: "32px 16px", color: "var(--dc-text-muted)", fontSize: 13 } }, q ? `No wallets matching "${q}"` : "No wallets detected")), view === "wallets" && /* @__PURE__ */ React2.createElement("div", { style: { padding: "10px 20px 14px", borderTop: "1px solid var(--dc-border)", textAlign: "center", fontSize: 11, color: "var(--dc-text-muted)" } }, "Don't see your wallet? Make sure it's installed and unlocked"))
-      )
-    )
-  );
-  return createPortal(modal, document.body);
-}
-
-// src/ui/SocialWalletModal.tsx
-import React3, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-function injectTokens2(theme) {
-  const resolved = theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
-  let el = document.getElementById("decane-tokens");
-  if (!el) {
-    el = document.createElement("style");
-    el.id = "decane-tokens";
-    document.head.appendChild(el);
-  }
-  el.textContent = `:root { ${CSS_VARS[resolved]} }`;
-}
-function countdown(expiresAt) {
-  const secs = Math.max(0, Math.round((expiresAt - Date.now()) / 1e3));
-  return `${Math.floor(secs / 60)}m ${String(secs % 60).padStart(2, "0")}s`;
-}
-function downloadJson(data, filename) {
-  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-function CopyButton({ value }) {
-  const [copied, setCopied] = useState2(false);
-  async function copy() {
-    await navigator.clipboard.writeText(value).catch(() => {
-    });
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }
-  return /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: copy,
-      style: {
-        background: "none",
-        border: "none",
-        cursor: "pointer",
-        color: copied ? "var(--dc-accent)" : "var(--dc-text-muted)",
-        fontSize: 11,
-        fontFamily: "inherit",
-        padding: "2px 6px",
-        borderRadius: 5,
-        transition: "color 0.15s"
-      }
-    },
-    copied ? "\u2713" : "copy"
-  );
-}
-function useBalance(kind, address, chain, rpcUrls) {
-  const [state, setState] = useState2({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
-  useEffect2(() => {
-    if (!address || !chain) return;
-    let cancelled = false;
-    setState((s) => ({ ...s, loading: true }));
-    fetchBalance({ kind, address, chain, rpcUrls }).then((b) => {
-      if (!cancelled) setState({ loading: false, value: b.formatted, symbol: b.symbol });
-    }).catch(() => {
-      if (!cancelled) setState({ loading: false, value: null, symbol: kind === "evm" ? "ETH" : "SOL" });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [kind, address, chain, rpcUrls]);
-  return state;
-}
-function AddressRow({
-  label,
-  address,
-  kind,
-  chain,
-  rpcUrls
-}) {
-  const balance = useBalance(kind, address, chain, rpcUrls);
-  const short = `${address.slice(0, 8)}\u2026${address.slice(-6)}`;
-  return /* @__PURE__ */ React3.createElement("div", { style: {
-    background: "var(--dc-surface)",
-    border: "1px solid var(--dc-border)",
-    borderRadius: 10,
-    padding: "10px 14px",
-    marginBottom: 8
-  } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 5 } }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: "var(--dc-text-muted)", letterSpacing: "0.06em", textTransform: "uppercase" } }, label), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 11, fontFamily: "monospace", color: "var(--dc-text)" } }, balance.loading ? "\u2026" : `${formatBalanceDisplay(balance.value)} ${balance.symbol}`)), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 } }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 13, fontFamily: "monospace", color: "var(--dc-text)", letterSpacing: "0.02em" } }, short), /* @__PURE__ */ React3.createElement(CopyButton, { value: address })));
-}
-function SignInView({
-  onGoogleSignIn,
-  onKingsChatSignIn,
-  onXSignIn,
-  onEmailStart,
-  onEmailVerify,
-  onPhoneStart,
-  onPhoneVerify,
-  authMethods,
-  resumeHint,
-  customAuthLabel,
-  onCustomAuthSignIn,
-  canUsePasskey,
-  passkeyAddress,
-  onPasskeySignIn
-}) {
-  const [googleLoading, setGoogleLoading] = useState2(false);
-  const [kingsChatLoading, setKingsChatLoading] = useState2(false);
-  const [xLoading, setXLoading] = useState2(false);
-  const [email, setEmail] = useState2("");
-  const [code, setCode] = useState2("");
-  const [emailSent, setEmailSent] = useState2(false);
-  const [emailLoading, setEmailLoading] = useState2(false);
-  const [phone, setPhone] = useState2("");
-  const [phoneCode, setPhoneCode] = useState2("");
-  const [phoneSent, setPhoneSent] = useState2(false);
-  const [phoneLoading, setPhoneLoading] = useState2(false);
-  const [customLoading, setCustomLoading] = useState2(false);
-  const [passkeyLoading, setPasskeyLoading] = useState2(false);
-  const [showOtherMethods, setShowOtherMethods] = useState2(false);
-  const [error, setError] = useState2("");
-  const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
-  async function handlePasskey() {
-    if (!onPasskeySignIn) return;
-    setError("");
-    setPasskeyLoading(true);
-    try {
-      await onPasskeySignIn();
-    } catch (e) {
-      const err = e;
-      if (err?.name !== "UserCancelledError") {
-        setError(err?.message ?? "Passkey sign-in failed");
-        setShowOtherMethods(true);
-      }
-      setPasskeyLoading(false);
-    }
-  }
-  async function handleGoogle() {
-    setError("");
-    setGoogleLoading(true);
-    try {
-      await onGoogleSignIn();
-    } catch (e) {
-      setError(e.message);
-      setGoogleLoading(false);
-    }
-  }
-  async function handleKingsChat() {
-    if (!onKingsChatSignIn) return;
-    setError("");
-    setKingsChatLoading(true);
-    try {
-      await onKingsChatSignIn();
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setKingsChatLoading(false);
-    }
-  }
-  async function handleX() {
-    if (!onXSignIn) return;
-    setError("");
-    setXLoading(true);
-    try {
-      await onXSignIn();
-    } catch (e) {
-      setError(e.message);
-      setXLoading(false);
-    }
-  }
-  async function handleEmailStart(e) {
-    e.preventDefault();
-    setError("");
-    setEmailLoading(true);
-    try {
-      await onEmailStart(email);
-      setEmailSent(true);
-    } catch (e2) {
-      setError(e2.message);
-    } finally {
-      setEmailLoading(false);
-    }
-  }
-  async function handleEmailVerify(e) {
-    e.preventDefault();
-    setError("");
-    setEmailLoading(true);
-    try {
-      await onEmailVerify(email, code);
-    } catch (e2) {
-      setError(e2.message);
-    } finally {
-      setEmailLoading(false);
-    }
-  }
-  async function handlePhoneStart(e) {
-    e.preventDefault();
-    if (!onPhoneStart) return;
-    setError("");
-    setPhoneLoading(true);
-    try {
-      await onPhoneStart(phone);
-      setPhoneSent(true);
-    } catch (e2) {
-      setError(e2.message);
-    } finally {
-      setPhoneLoading(false);
-    }
-  }
-  async function handlePhoneVerify(e) {
-    e.preventDefault();
-    if (!onPhoneVerify) return;
-    setError("");
-    setPhoneLoading(true);
-    try {
-      await onPhoneVerify(phone, phoneCode);
-    } catch (e2) {
-      setError(e2.message);
-    } finally {
-      setPhoneLoading(false);
-    }
-  }
-  async function handleCustomAuth() {
-    if (!onCustomAuthSignIn) return;
-    setError("");
-    setCustomLoading(true);
-    try {
-      await onCustomAuthSignIn();
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setCustomLoading(false);
-    }
-  }
-  const inputStyle = {
-    width: "100%",
-    background: "var(--dc-surface)",
-    border: "1px solid var(--dc-border)",
-    borderRadius: 8,
-    color: "var(--dc-text)",
-    padding: "9px 12px",
-    fontSize: 13,
-    outline: "none",
-    fontFamily: "inherit",
-    boxSizing: "border-box"
-  };
-  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && !passkeyFirst && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), passkeyFirst && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 unlock to resume", passkeyAddress ? ` ${passkeyAddress.slice(0, 6)}\u2026${passkeyAddress.slice(-4)}` : ""), /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: handlePasskey,
-      disabled: passkeyLoading,
-      style: {
-        width: "100%",
-        padding: "11px 0",
-        background: "var(--dc-accent)",
-        color: "var(--dc-accent-text)",
-        border: "none",
-        borderRadius: 10,
-        fontSize: 13,
-        fontWeight: 700,
-        cursor: passkeyLoading ? "not-allowed" : "pointer",
-        opacity: passkeyLoading ? 0.7 : 1,
-        fontFamily: "inherit",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 7
-      }
-    },
-    passkeyLoading ? "Verifying\u2026" : "\u{1F513} Continue with passkey"
-  ), /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: () => setShowOtherMethods(true),
-      style: {
-        width: "100%",
-        marginTop: 10,
-        background: "none",
-        border: "none",
-        color: "var(--dc-text-muted)",
-        fontSize: 12,
-        cursor: "pointer",
-        fontFamily: "inherit"
-      }
-    },
-    "Use email or Google instead"
-  ), error && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error)), !passkeyFirst && authMethods.includes("google") && /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: handleGoogle,
-      disabled: googleLoading,
-      style: {
-        width: "100%",
-        padding: "10px 0",
-        marginBottom: 10,
-        background: "var(--dc-accent)",
-        color: "var(--dc-accent-text)",
-        border: "none",
-        borderRadius: 10,
-        fontSize: 13,
-        fontWeight: 700,
-        cursor: googleLoading ? "not-allowed" : "pointer",
-        opacity: googleLoading ? 0.7 : 1,
-        fontFamily: "inherit"
-      }
-    },
-    googleLoading ? "Redirecting\u2026" : "Continue with Google"
-  ), !passkeyFirst && authMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: handleKingsChat,
-      disabled: kingsChatLoading,
-      style: {
-        width: "100%",
-        padding: "10px 0",
-        marginBottom: 10,
-        background: "var(--dc-surface)",
-        color: "var(--dc-text)",
-        border: "1px solid var(--dc-border)",
-        borderRadius: 10,
-        fontSize: 13,
-        fontWeight: 700,
-        cursor: kingsChatLoading ? "not-allowed" : "pointer",
-        opacity: kingsChatLoading ? 0.7 : 1,
-        fontFamily: "inherit"
-      }
-    },
-    kingsChatLoading ? "Waiting for KingsChat\u2026" : "Continue with KingsChat"
-  ), !passkeyFirst && authMethods.includes("x") && onXSignIn && /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: handleX,
-      disabled: xLoading,
-      style: {
-        width: "100%",
-        padding: "10px 0",
-        marginBottom: 10,
-        background: "var(--dc-surface)",
-        color: "var(--dc-text)",
-        border: "1px solid var(--dc-border)",
-        borderRadius: 10,
-        fontSize: 13,
-        fontWeight: 700,
-        cursor: xLoading ? "not-allowed" : "pointer",
-        opacity: xLoading ? 0.7 : 1,
-        fontFamily: "inherit",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8
-      }
-    },
-    /* @__PURE__ */ React3.createElement(XLogo, null),
-    xLoading ? "Redirecting\u2026" : "Continue with X"
-  ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ React3.createElement(React3.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
+        className: "dcm-field dcm-code",
+        "aria-label": "6-digit code",
+        placeholder: "000000",
+        value,
+        maxLength: 6,
+        autoFocus: true,
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        onChange: (e) => setValue(e.target.value.replace(/\D/g, ""))
+      }
+    ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-primary", disabled: loading || value.length < 6 }, loading ? "Verifying\u2026" : "Continue")), errorLine, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: backToMethods }, "Use a different method"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
+  }
+  const showPhone = authMethods.includes("phone") && !!onPhoneStart && !!onPhoneVerify;
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, resumeHint ? "Welcome back" : "Log in or sign up"), resumeHint && /* @__PURE__ */ React2.createElement("p", { className: "dcm-sub" }, "Sign in again to resume ", resumeHint, "."), /* @__PURE__ */ React2.createElement("div", { className: "dcm-methods" }, authMethods.includes("google") && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleGoogle, disabled: busy }, /* @__PURE__ */ React2.createElement(GoogleMark, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, googleLoading ? "Redirecting to Google\u2026" : "Google")), authMethods.includes("email") && /* @__PURE__ */ React2.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handleEmailStart }, /* @__PURE__ */ React2.createElement(MailIcon, { size: 18 }), /* @__PURE__ */ React2.createElement(
     "input",
     {
       type: "email",
       required: true,
       placeholder: "your@email.com",
+      "aria-label": "Email address",
+      autoComplete: "email",
       value: email,
-      onChange: (e) => setEmail(e.target.value),
-      style: { ...inputStyle, flex: 1 }
-    }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", disabled: emailLoading, style: {
-    padding: "0 16px",
-    background: "var(--dc-surface)",
-    border: "1px solid var(--dc-border)",
-    borderRadius: 8,
-    color: "var(--dc-text)",
-    fontSize: 13,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Send code")) : /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailVerify, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
-    "input",
-    {
-      placeholder: "6-digit code",
-      value: code,
-      maxLength: 6,
-      autoFocus: true,
-      onChange: (e) => setCode(e.target.value.replace(/\D/g, "")),
-      style: { ...inputStyle, flex: 1, letterSpacing: 4, textAlign: "center" }
-    }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", disabled: emailLoading, style: {
-    padding: "0 16px",
-    background: "var(--dc-accent)",
-    color: "var(--dc-accent-text)",
-    border: "none",
-    borderRadius: 8,
-    fontSize: 13,
-    fontWeight: 700,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && authMethods.includes("phone") && onPhoneStart && onPhoneVerify && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !phoneSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handlePhoneStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
+      onChange: (e) => setEmail(e.target.value)
+    }
+  ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !email.trim() }, emailLoading ? "Sending\u2026" : "Submit")), showPhone && /* @__PURE__ */ React2.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handlePhoneStart }, /* @__PURE__ */ React2.createElement(PhoneIcon, { size: 18 }), /* @__PURE__ */ React2.createElement(
     "input",
     {
       type: "tel",
       required: true,
       placeholder: "+234 801 234 5678",
+      "aria-label": "Phone number",
+      autoComplete: "tel",
       value: phone,
-      onChange: (e) => setPhone(e.target.value),
-      style: { ...inputStyle, flex: 1 }
-    }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", disabled: phoneLoading, style: {
-    padding: "0 16px",
-    background: "var(--dc-surface)",
-    border: "1px solid var(--dc-border)",
-    borderRadius: 8,
-    color: "var(--dc-text)",
-    fontSize: 13,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  } }, phoneLoading ? "\u2026" : "Send code")) : /* @__PURE__ */ React3.createElement("form", { onSubmit: handlePhoneVerify, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
-    "input",
-    {
-      placeholder: "6-digit code",
-      value: phoneCode,
-      maxLength: 6,
-      autoFocus: true,
-      inputMode: "numeric",
-      onChange: (e) => setPhoneCode(e.target.value.replace(/\D/g, "")),
-      style: { ...inputStyle, flex: 1, letterSpacing: 4, textAlign: "center" }
-    }
-  ), /* @__PURE__ */ React3.createElement("button", { type: "submit", disabled: phoneLoading, style: {
-    padding: "0 16px",
-    background: "var(--dc-accent)",
-    color: "var(--dc-accent-text)",
-    border: "none",
-    borderRadius: 8,
-    fontSize: 13,
-    fontWeight: 700,
-    cursor: "pointer",
-    fontFamily: "inherit"
-  } }, phoneLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ React3.createElement(
-    "button",
-    {
-      onClick: handleCustomAuth,
-      disabled: customLoading,
-      style: {
-        width: "100%",
-        padding: "10px 0",
-        background: "var(--dc-surface)",
-        color: "var(--dc-text)",
-        border: "1px solid var(--dc-border)",
-        borderRadius: 10,
-        fontSize: 13,
-        fontWeight: 600,
-        cursor: customLoading ? "not-allowed" : "pointer",
-        opacity: customLoading ? 0.7 : 1,
-        fontFamily: "inherit"
-      }
-    },
-    customLoading ? "Connecting\u2026" : customAuthLabel
-  )), error && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error));
+      onChange: (e) => setPhone(e.target.value)
+    }
+  ), /* @__PURE__ */ React2.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !phone.trim() }, phoneLoading ? "Sending\u2026" : "Submit")), authMethods.includes("x") && onXSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleX, disabled: busy }, /* @__PURE__ */ React2.createElement(XLogo, { size: 16 }), /* @__PURE__ */ React2.createElement("span", null, xLoading ? "Redirecting to X\u2026" : "X")), authMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleKingsChat, disabled: busy }, /* @__PURE__ */ React2.createElement(ChatIcon, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, kingsChatLoading ? "Waiting for KingsChat\u2026" : "KingsChat")), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-method", onClick: handleCustomAuth, disabled: busy }, /* @__PURE__ */ React2.createElement(UserIcon, { size: 18 }), /* @__PURE__ */ React2.createElement("span", null, customLoading ? "Connecting\u2026" : customAuthLabel))), extra, errorLine, canUsePasskey && onPasskeySignIn && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+    setError("");
+    setShowOtherMethods(false);
+  } }, "Use my passkey instead"), /* @__PURE__ */ React2.createElement(ProtectedBy, null));
 }
 function RecoverySection({
   addresses,
   onRotateShares,
   onExportPortableBackup
 }) {
-  const [expanded, setExpanded] = useState2(false);
-  const [mode, setMode] = useState2(null);
-  const [password, setPassword] = useState2("");
-  const [passwordHint, setPasswordHint] = useState2("");
-  const [confirmed, setConfirmed] = useState2(false);
-  const [busy, setBusy] = useState2(false);
-  const [result, setResult] = useState2(null);
-  const [error, setError] = useState2("");
+  const [expanded, setExpanded] = useState(false);
+  const [mode, setMode] = useState(null);
+  const [password, setPassword] = useState("");
+  const [passwordHint, setPasswordHint] = useState("");
+  const [confirmed, setConfirmed] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState("");
   function reset() {
     setMode(null);
     setPassword("");
@@ -7284,60 +6262,34 @@ function RecoverySection({
       setBusy(false);
     }
   }
-  const inputStyle = {
-    width: "100%",
-    background: "var(--dc-bg)",
-    border: "1px solid var(--dc-border)",
-    borderRadius: 8,
-    color: "var(--dc-text)",
-    padding: "8px 10px",
-    fontSize: 12,
-    outline: "none",
-    fontFamily: "inherit",
-    boxSizing: "border-box"
-  };
-  const btnStyle = {
-    padding: "8px 12px",
-    borderRadius: 8,
-    fontSize: 12,
-    fontWeight: 700,
-    cursor: "pointer",
-    fontFamily: "inherit",
-    border: "none"
-  };
-  return /* @__PURE__ */ React3.createElement("div", { style: { margin: "0 16px 14px", border: "1px solid var(--dc-border)", borderRadius: 10, overflow: "hidden" } }, /* @__PURE__ */ React3.createElement(
-    "button",
+  const passwordFields = /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "input",
     {
-      onClick: () => setExpanded((v) => !v),
-      style: {
-        width: "100%",
-        padding: "10px 14px",
-        background: "var(--dc-surface)",
-        border: "none",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        cursor: "pointer",
-        fontFamily: "inherit"
-      }
-    },
-    /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 12, fontWeight: 700, color: "var(--dc-text)" } }, "Recovery"),
-    /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)" } }, expanded ? "\u25B2" : "\u25BC")
-  ), expanded && /* @__PURE__ */ React3.createElement("div", { style: { padding: "12px 14px", borderTop: "1px solid var(--dc-border)" } }, /* @__PURE__ */ React3.createElement("p", { style: { fontSize: 11, color: "var(--dc-text-muted)", lineHeight: 1.5, margin: "0 0 10px" } }, "Save a recovery file so you can restore this wallet on a new device."), !mode && /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React3.createElement("button", { onClick: () => {
+      className: "dcm-field",
+      type: "password",
+      placeholder: "Password (at least 8 characters)",
+      "aria-label": "Password",
+      autoComplete: "new-password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value)
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      className: "dcm-field",
+      placeholder: "Password hint (optional)",
+      "aria-label": "Password hint",
+      value: passwordHint,
+      onChange: (e) => setPasswordHint(e.target.value)
+    }
+  ), error && /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, error));
+  return /* @__PURE__ */ React2.createElement("div", { className: "dcm-panel" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-panel-head", onClick: () => setExpanded((v) => !v), "aria-expanded": expanded }, /* @__PURE__ */ React2.createElement("span", null, "Recovery file"), /* @__PURE__ */ React2.createElement(ChevronIcon, { open: expanded })), expanded && /* @__PURE__ */ React2.createElement("div", { className: "dcm-panel-body" }, !mode && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, "Save a recovery file so you can restore this wallet on a new device."), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: () => {
     reset();
     setMode("share");
-  }, style: { ...btnStyle, background: "var(--dc-accent)", color: "var(--dc-accent-text)" } }, "Generate recovery-share file"), /* @__PURE__ */ React3.createElement("button", { onClick: () => {
+  } }, "Download recovery-share file"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: () => {
     reset();
     setMode("portable");
-  }, style: { ...btnStyle, background: "transparent", border: "1px solid var(--dc-border)", color: "var(--dc-text)" } }, "Generate full recovery file")), mode === "share" && /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React3.createElement("p", { style: { fontSize: 11, color: "var(--dc-text-muted)", margin: 0 } }, "One share \u2014 useless alone, safe to keep in a password manager or cloud drive. Generating a new one invalidates any previous recovery-share file."), /* @__PURE__ */ React3.createElement("input", { type: "password", placeholder: "Password (min 8 chars)", value: password, onChange: (e) => setPassword(e.target.value), style: inputStyle }), /* @__PURE__ */ React3.createElement("input", { placeholder: "Password hint (optional)", value: passwordHint, onChange: (e) => setPasswordHint(e.target.value), style: inputStyle }), error && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 11, color: "var(--dc-danger, #ff5533)" } }, error), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement("button", { onClick: handleGenerate, disabled: busy, style: { ...btnStyle, flex: 1, background: "var(--dc-accent)", color: "var(--dc-accent-text)" } }, busy ? "Generating\u2026" : "Generate & download"), /* @__PURE__ */ React3.createElement("button", { onClick: reset, style: { ...btnStyle, background: "transparent", border: "1px solid var(--dc-border)", color: "var(--dc-text-muted)" } }, "Cancel"))), mode === "portable" && /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ React3.createElement("div", { style: {
-    background: "rgba(255,85,51,0.08)",
-    border: "1px solid rgba(255,85,51,0.3)",
-    borderRadius: 8,
-    padding: "8px 10px",
-    fontSize: 11,
-    color: "#ff9977",
-    lineHeight: 1.5
-  } }, /* @__PURE__ */ React3.createElement("strong", { style: { display: "block", marginBottom: 3, color: "#ff5533" } }, "This file controls your wallet"), "Contains two shares \u2014 file plus password gives complete control. Keep it offline, not a cloud drive. This also invalidates your current recovery-share file."), /* @__PURE__ */ React3.createElement("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--dc-text)" } }, /* @__PURE__ */ React3.createElement("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked), style: { width: "auto" } }), "I understand this is a bearer secret"), /* @__PURE__ */ React3.createElement("input", { type: "password", placeholder: "Password (min 8 chars)", value: password, onChange: (e) => setPassword(e.target.value), style: inputStyle }), /* @__PURE__ */ React3.createElement("input", { placeholder: "Password hint (optional)", value: passwordHint, onChange: (e) => setPasswordHint(e.target.value), style: inputStyle }), error && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 11, color: "var(--dc-danger, #ff5533)" } }, error), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement("button", { onClick: handleGenerate, disabled: busy || !confirmed, style: { ...btnStyle, flex: 1, background: "var(--dc-accent)", color: "var(--dc-accent-text)" } }, busy ? "Generating\u2026" : "Generate & download"), /* @__PURE__ */ React3.createElement("button", { onClick: reset, style: { ...btnStyle, background: "transparent", border: "1px solid var(--dc-border)", color: "var(--dc-text-muted)" } }, "Cancel"))), result && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: 10, fontSize: 11, color: "var(--dc-text-muted)", lineHeight: 1.5 } }, result.kind === "share" ? "Recovery-share file" : "Full recovery file", " downloaded \u2014 share set is now version ", result.version, ". Any previous recovery file no longer works.")));
+  } }, "Download full recovery file")), mode === "share" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, "One share. It is useless on its own, so a password manager or cloud drive is a fine place for it. A new file replaces any previous recovery-share file."), passwordFields, /* @__PURE__ */ React2.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), mode === "portable" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "dcm-warn" }, /* @__PURE__ */ React2.createElement("strong", null, "This file controls your wallet"), "It holds two shares, so the file plus its password is full control. Keep it offline, not in a cloud drive. It also replaces your current recovery-share file."), /* @__PURE__ */ React2.createElement("label", { className: "dcm-check" }, /* @__PURE__ */ React2.createElement("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked) }), "I understand anyone with this file and password controls the wallet"), passwordFields, /* @__PURE__ */ React2.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy || !confirmed }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), result && /* @__PURE__ */ React2.createElement("p", { className: "dcm-note" }, result.kind === "share" ? "Recovery-share file" : "Full recovery file", " downloaded. The share set is now version ", result.version, ", and any earlier recovery file no longer works.")));
 }
 function SocialWalletModal({
   open,
@@ -7348,6 +6300,7 @@ function SocialWalletModal({
   onDisconnect,
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -7363,19 +6316,21 @@ function SocialWalletModal({
   rpcUrls,
   chains
 }) {
-  const [timer, setTimer] = useState2("");
-  const [unlocking, setUnlocking] = useState2(false);
-  const [disconnecting, setDisconnecting] = useState2(false);
-  useEffect2(() => {
+  const [timer, setTimer] = useState("");
+  const [unlocking, setUnlocking] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+  const [actionError, setActionError] = useState("");
+  useEffect(() => {
     if (!open) return;
-    injectTokens2(theme);
+    injectTokens(theme);
+    injectModalCss();
     if (theme !== "auto") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const h = () => injectTokens2("auto");
+    const h = () => injectTokens("auto");
     mq.addEventListener("change", h);
     return () => mq.removeEventListener("change", h);
   }, [open, theme]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!socialAuth.sessionExpiresAt) {
       setTimer("");
       return;
@@ -7384,10 +6339,10 @@ function SocialWalletModal({
     const id = setInterval(() => setTimer(countdown(socialAuth.sessionExpiresAt)), 1e3);
     return () => clearInterval(id);
   }, [socialAuth.sessionExpiresAt]);
-  const handleKey = useCallback2((e) => {
+  const handleKey = useCallback((e) => {
     if (e.key === "Escape") onClose();
   }, [onClose]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
@@ -7395,17 +6350,23 @@ function SocialWalletModal({
   if (!open) return null;
   async function handleUnlock() {
     setUnlocking(true);
+    setActionError("");
     try {
       await onUnlock();
+    } catch (e) {
+      setActionError(e.message);
     } finally {
       setUnlocking(false);
     }
   }
   async function handleDisconnect() {
     setDisconnecting(true);
+    setActionError("");
     try {
       await onDisconnect();
       onClose();
+    } catch (e) {
+      setActionError(e.message);
     } finally {
       setDisconnecting(false);
     }
@@ -7413,12 +6374,13 @@ function SocialWalletModal({
   const evmChain = chains?.find((c) => c.startsWith("evm:")) ?? "evm:11155111";
   const solChain = chains?.find((c) => c.startsWith("solana:")) ?? "solana:mainnet";
   const showSignIn = !socialAuth.addresses || socialAuth.needsReconnect;
-  const modal = /* @__PURE__ */ React3.createElement(
+  const unlocked = socialAuth.isUnlocked;
+  const modal = /* @__PURE__ */ React2.createElement(
     "div",
     {
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": "Social wallet",
+      "aria-label": showSignIn ? "Log in or sign up" : "Your wallet",
       style: {
         position: "fixed",
         inset: 0,
@@ -7427,63 +6389,17 @@ function SocialWalletModal({
         alignItems: "center",
         justifyContent: "center",
         padding: 16,
-        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)"
+        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)",
+        WebkitFontSmoothing: "antialiased"
       }
     },
-    /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        onClick: onClose,
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "var(--dc-bg-overlay)",
-          backdropFilter: "blur(8px)",
-          WebkitBackdropFilter: "blur(8px)"
-        }
-      }
-    ),
-    /* @__PURE__ */ React3.createElement("div", { style: {
-      position: "relative",
-      background: "var(--dc-bg)",
-      border: "1px solid var(--dc-border)",
-      borderRadius: 20,
-      width: "100%",
-      maxWidth: 380,
-      maxHeight: "90vh",
-      overflowY: "auto",
-      boxShadow: "0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)"
-    } }, /* @__PURE__ */ React3.createElement("div", { style: {
-      height: 2,
-      position: "sticky",
-      top: 0,
-      zIndex: 1,
-      background: "linear-gradient(90deg, transparent, var(--dc-accent) 30%, var(--dc-accent) 70%, transparent)"
-    } }), /* @__PURE__ */ React3.createElement("div", { style: { padding: "18px 20px 16px", display: "flex", alignItems: "center", gap: 11 } }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 38 }), /* @__PURE__ */ React3.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 6 } }, /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 15 }), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--dc-text-muted)", letterSpacing: "-0.01em" } }, "wallet")), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 11, color: "var(--dc-text-muted)", marginTop: 2 } }, "Non-custodial \xB7 key split three ways")), /* @__PURE__ */ React3.createElement(
-      "button",
-      {
-        onClick: onClose,
-        style: {
-          background: "var(--dc-surface)",
-          border: "1px solid var(--dc-border)",
-          borderRadius: 8,
-          width: 28,
-          height: 28,
-          cursor: "pointer",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--dc-text-muted)",
-          flexShrink: 0,
-          padding: 0
-        }
-      },
-      /* @__PURE__ */ React3.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ React3.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-    )), showSignIn ? /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React2.createElement("div", { className: "dcm-backdrop", onClick: onClose }),
+    /* @__PURE__ */ React2.createElement("div", { className: "dcm-card" }, /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React2.createElement(CloseIcon, null)), showSignIn ? /* @__PURE__ */ React2.createElement(
       SignInView,
       {
         onGoogleSignIn,
         onKingsChatSignIn,
+        onXSignIn,
         onEmailStart,
         onEmailVerify,
         onPhoneStart,
@@ -7496,86 +6412,238 @@ function SocialWalletModal({
         passkeyAddress,
         onPasskeySignIn
       }
-    ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: {
-      margin: "0 16px 14px",
-      padding: "8px 14px",
-      background: socialAuth.isUnlocked ? "rgba(18,183,106,0.08)" : "rgba(245,200,0,0.08)",
-      border: `1px solid ${socialAuth.isUnlocked ? "rgba(18,183,106,0.2)" : "rgba(245,200,0,0.2)"}`,
-      borderRadius: 10,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between"
-    } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React3.createElement("span", { style: {
-      width: 7,
-      height: 7,
-      borderRadius: "50%",
-      flexShrink: 0,
-      background: socialAuth.isUnlocked ? "#12b76a" : "var(--dc-accent)",
-      boxShadow: `0 0 6px ${socialAuth.isUnlocked ? "#12b76a" : "var(--dc-accent)"}`
-    } }), /* @__PURE__ */ React3.createElement("span", { style: {
-      fontSize: 12,
-      fontWeight: 700,
-      color: socialAuth.isUnlocked ? "#12b76a" : "var(--dc-accent)"
-    } }, socialAuth.isUnlocked ? "Unlocked" : "Locked")), socialAuth.isUnlocked && timer && /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", fontFamily: "monospace" } }, "expires ", timer)), /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 14px" } }, socialAuth.addresses?.evm && /* @__PURE__ */ React3.createElement(AddressRow, { label: "EVM (Ethereum, Base, \u2026)", address: socialAuth.addresses.evm, kind: "evm", chain: evmChain, rpcUrls }), socialAuth.addresses?.solana && /* @__PURE__ */ React3.createElement(AddressRow, { label: "Solana", address: socialAuth.addresses.solana, kind: "solana", chain: solChain, rpcUrls })), socialAuth.isUnlocked && /* @__PURE__ */ React3.createElement(
+    ) : /* @__PURE__ */ React2.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React2.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React2.createElement("h2", { className: "dcm-title" }, "Your wallet"), /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        className: "dcm-status",
+        style: { color: unlocked ? "#12b76a" : "var(--dc-accent-ink)", marginTop: -8 }
+      },
+      /* @__PURE__ */ React2.createElement("i", { style: { background: unlocked ? "#12b76a" : "var(--dc-accent)" } }),
+      unlocked ? timer ? `Unlocked, expires in ${timer}` : "Unlocked" : "Locked"
+    ), (socialAuth.addresses?.evm || socialAuth.addresses?.solana) && /* @__PURE__ */ React2.createElement("div", { className: "dcm-addresses" }, socialAuth.addresses?.evm && /* @__PURE__ */ React2.createElement(AddressRow, { label: "Ethereum and EVM", address: socialAuth.addresses.evm, kind: "evm", chain: evmChain, rpcUrls }), socialAuth.addresses?.solana && /* @__PURE__ */ React2.createElement(AddressRow, { label: "Solana", address: socialAuth.addresses.solana, kind: "solana", chain: solChain, rpcUrls })), unlocked && /* @__PURE__ */ React2.createElement(
       RecoverySection,
       {
         addresses: socialAuth.addresses,
         onRotateShares,
         onExportPortableBackup
       }
-    ), /* @__PURE__ */ React3.createElement("div", { style: {
-      padding: "14px 16px",
-      borderTop: "1px solid var(--dc-border)",
-      display: "flex",
-      gap: 8
-    } }, !socialAuth.isUnlocked && /* @__PURE__ */ React3.createElement(
-      "button",
+    ), actionError && /* @__PURE__ */ React2.createElement("p", { className: "dcm-error", role: "alert" }, actionError), /* @__PURE__ */ React2.createElement("div", { className: "dcm-actions" }, !unlocked && /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: handleUnlock, disabled: unlocking }, unlocking ? "Unlocking\u2026" : "Unlock wallet"), /* @__PURE__ */ React2.createElement("button", { type: "button", className: "dcm-ghost", onClick: handleDisconnect, disabled: disconnecting }, disconnecting ? "Signing out\u2026" : "Sign out")), /* @__PURE__ */ React2.createElement(ProtectedBy, null)))
+  );
+  return createPortal(modal, document.body);
+}
+
+// src/ui/WalletSelector.tsx
+var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
+function injectTokens2(theme) {
+  let resolved;
+  if (theme === "auto") {
+    resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } else {
+    resolved = theme;
+  }
+  let styleEl = document.getElementById("decane-tokens");
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = "decane-tokens";
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = `:root { ${CSS_VARS[resolved]} }`;
+}
+function injectFont() {
+  if (document.getElementById("decane-font")) return;
+  const link = document.createElement("link");
+  link.id = "decane-font";
+  link.rel = "stylesheet";
+  link.href = FONT_URL;
+  document.head.appendChild(link);
+}
+function hasSocialMode(mode) {
+  return mode === "all" || mode === "social" || mode === "evm+social" || mode === "solana+social" || mode === "tron+social" || mode === "evm+tron+social";
+}
+var NETWORK_LABEL = {
+  evm: "EVM networks",
+  solana: "Solana",
+  tron: "Tron",
+  bitcoin: "Bitcoin"
+};
+function WalletSelector({
+  provider,
+  open,
+  onClose,
+  onConnect,
+  theme = "auto",
+  networks = "all",
+  mode = "wallets",
+  socialAuthMethods = ["google", "email"],
+  onGoogleSignIn,
+  onKingsChatSignIn,
+  onXSignIn,
+  onEmailStart,
+  onEmailVerify,
+  onPhoneStart,
+  onPhoneVerify,
+  customAuthLabel,
+  onCustomAuthSignIn,
+  canUsePasskey = false,
+  passkeyAddress = null,
+  onPasskeySignIn
+}) {
+  const showSocial = hasSocialMode(mode);
+  const showWallets = mode !== "social";
+  const [view, setView] = useState2(showSocial ? "social" : "wallets");
+  const [search, setSearch] = useState2("");
+  const [filter, setFilter] = useState2("all");
+  const [pendingWallet, setPendingWallet] = useState2(null);
+  const [session, setSession] = useState2(0);
+  useEffect2(() => {
+    if (!open) return;
+    injectFont();
+    injectTokens2(theme);
+    injectModalCss();
+    if (theme !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => injectTokens2("auto");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [open, theme]);
+  useEffect2(() => {
+    if (!open) {
+      setSearch("");
+      setFilter("all");
+      setPendingWallet(null);
+      setView(showSocial ? "social" : "wallets");
+      setSession((n) => n + 1);
+      return;
+    }
+    return () => {
+      document.getElementById("decane-tokens")?.remove();
+    };
+  }, [open, showWallets, showSocial]);
+  const handleKey = useCallback2(
+    (e) => {
+      if (e.key !== "Escape") return;
+      if (pendingWallet) setPendingWallet(null);
+      else onClose();
+    },
+    [onClose, pendingWallet]
+  );
+  useEffect2(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, handleKey]);
+  if (!open) return null;
+  const q = search.trim().toLowerCase();
+  const networkWallets = provider.wallets.filter((w) => {
+    const cs = w.chainSupport;
+    if (networks === "evm") return cs.includes("evm");
+    if (networks === "solana") return cs.includes("solana");
+    if (networks === "tron") return cs.includes("tron");
+    if (networks === "bitcoin") return cs.includes("bitcoin");
+    return true;
+  });
+  const baseWallets = filter === "all" ? networkWallets : networkWallets.filter((w) => w.chainSupport.includes(filter));
+  const filtered = q ? baseWallets.filter((w) => w.name.toLowerCase().includes(q)) : baseWallets;
+  const filters = [
+    { id: "all", label: "All" },
+    { id: "evm", label: "EVM" },
+    { id: "solana", label: "Solana" },
+    ...provider.tronWallets?.length ? [{ id: "tron", label: "Tron" }] : [],
+    ...provider.bitcoinWallets?.length ? [{ id: "bitcoin", label: "Bitcoin" }] : []
+  ];
+  function handleWalletClick(wallet) {
+    const cs = wallet.chainSupport;
+    const isMulti = cs.length >= 2;
+    if (isMulti && networks === "all") {
+      setPendingWallet(wallet);
+    } else {
+      const preference = networks === "evm" ? "evm" : networks === "solana" ? "solana" : networks === "tron" ? "tron" : networks === "bitcoin" ? "bitcoin" : void 0;
+      onConnect(wallet, preference);
+      onClose();
+    }
+  }
+  function handleChainChoice(preference) {
+    if (!pendingWallet) return;
+    onConnect(pendingWallet, preference);
+    onClose();
+  }
+  const signInMethods = socialAuthMethods.filter(
+    (m) => m === "google" ? !!onGoogleSignIn : m === "email" ? !!onEmailStart && !!onEmailVerify : true
+  );
+  const noop = async () => {
+  };
+  const noopStart = async () => ({ codeRequired: true });
+  const walletEntry = showWallets ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "dcm-or" }, "or"), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods", style: { marginTop: 0 } }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: () => setView("wallets") }, /* @__PURE__ */ React3.createElement(WalletLineIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, "Continue with a wallet"), /* @__PURE__ */ React3.createElement("span", { className: "dcm-trail" }, networkWallets.length > 0 && /* @__PURE__ */ React3.createElement("span", { className: "dcm-stack", "aria-label": `${networkWallets.length} detected` }, networkWallets.slice(0, 3).map(
+    (w) => w.icon ? /* @__PURE__ */ React3.createElement("img", { key: w.id, src: w.icon, alt: "" }) : /* @__PURE__ */ React3.createElement("span", { key: w.id })
+  )), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null))))) : null;
+  const closeButton = /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React3.createElement(CloseIcon, null));
+  let body;
+  if (pendingWallet) {
+    const support = pendingWallet.chainSupport;
+    body = /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { left: 14 }, onClick: () => setPendingWallet(null), "aria-label": "Back" }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, null)), closeButton, /* @__PURE__ */ React3.createElement(WalletIcon, { src: pendingWallet.icon || void 0, name: pendingWallet.name, size: 52 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Choose networks"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, pendingWallet.name, " works on more than one network. Pick what to connect."), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-option", onClick: () => handleChainChoice(void 0) }, /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-icons" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support, size: 20 })), /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-text" }, /* @__PURE__ */ React3.createElement("b", null, "All networks"), /* @__PURE__ */ React3.createElement("small", null, "Every address this wallet has")), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null)), support.map((c) => /* @__PURE__ */ React3.createElement("button", { key: c, type: "button", className: "dcm-option", onClick: () => handleChainChoice(c) }, /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-icons" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support: [c], size: 20 })), /* @__PURE__ */ React3.createElement("span", { className: "dcm-option-text" }, /* @__PURE__ */ React3.createElement("b", null, NETWORK_LABEL[c] ?? c), /* @__PURE__ */ React3.createElement("small", null, "Only your ", c === "evm" ? "Ethereum-compatible" : NETWORK_LABEL[c] ?? c, " address")), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null)))), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  } else if (view === "wallets") {
+    body = /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, showSocial && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { left: 14 }, onClick: () => setView("social"), "aria-label": "Back to sign-in" }, /* @__PURE__ */ React3.createElement(ArrowLeftIcon, null)), closeButton, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Connect a wallet"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, networkWallets.length ? `${networkWallets.length} wallet${networkWallets.length === 1 ? "" : "s"} found in this browser` : "No wallets found in this browser"), networks === "all" && networkWallets.length > 0 && filters.length > 1 && /* @__PURE__ */ React3.createElement("div", { className: "dcm-pills", role: "group", "aria-label": "Filter by network" }, filters.map((f) => /* @__PURE__ */ React3.createElement("button", { key: f.id, type: "button", "aria-pressed": filter === f.id, onClick: () => setFilter(f.id) }, f.label))), networkWallets.length > 5 && /* @__PURE__ */ React3.createElement("div", { className: "dcm-search" }, /* @__PURE__ */ React3.createElement(SearchIcon, null), /* @__PURE__ */ React3.createElement(
+      "input",
       {
-        onClick: handleUnlock,
-        disabled: unlocking,
-        style: {
-          flex: 1,
-          padding: "10px 0",
-          background: "var(--dc-accent)",
-          color: "var(--dc-accent-text)",
-          border: "none",
-          borderRadius: 10,
-          fontSize: 13,
-          fontWeight: 700,
-          cursor: unlocking ? "not-allowed" : "pointer",
-          fontFamily: "inherit",
-          opacity: unlocking ? 0.7 : 1
-        }
-      },
-      unlocking ? "Unlocking\u2026" : "\u{1F513} Unlock wallet"
-    ), /* @__PURE__ */ React3.createElement(
-      "button",
+        className: "dcm-field",
+        type: "text",
+        placeholder: "Search wallets",
+        "aria-label": "Search wallets",
+        value: search,
+        onChange: (e) => setSearch(e.target.value)
+      }
+    )), filtered.length > 0 ? /* @__PURE__ */ React3.createElement("div", { className: "dcm-list" }, filtered.map((w) => /* @__PURE__ */ React3.createElement("button", { key: w.id, type: "button", className: "dcm-method", onClick: () => handleWalletClick(w) }, /* @__PURE__ */ React3.createElement(WalletIcon, { src: w.icon || void 0, name: w.name, size: 26 }), /* @__PURE__ */ React3.createElement("span", null, w.name), /* @__PURE__ */ React3.createElement("span", { className: "dcm-trail" }, /* @__PURE__ */ React3.createElement(ChainIconStack, { support: w.chainSupport, size: 16 }), /* @__PURE__ */ React3.createElement(ChevronRightIcon, null))))) : /* @__PURE__ */ React3.createElement("p", { className: "dcm-empty" }, q ? `No wallets match "${search.trim()}".` : networkWallets.length ? "No wallets for this network." : "Install a wallet extension, or unlock the one you have, then reopen this window."), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  } else {
+    body = /* @__PURE__ */ React3.createElement(React3.Fragment, null, closeButton, /* @__PURE__ */ React3.createElement(
+      SignInView,
       {
-        onClick: handleDisconnect,
-        disabled: disconnecting,
-        style: {
-          flex: socialAuth.isUnlocked ? 1 : 0,
-          padding: "10px 16px",
-          background: "transparent",
-          border: "1px solid var(--dc-border)",
-          borderRadius: 10,
-          color: "var(--dc-text-muted)",
-          fontSize: 13,
-          cursor: disconnecting ? "not-allowed" : "pointer",
-          fontFamily: "inherit",
-          opacity: disconnecting ? 0.7 : 1,
-          whiteSpace: "nowrap"
-        }
-      },
-      disconnecting ? "Signing out\u2026" : "Sign out"
-    ))), /* @__PURE__ */ React3.createElement("div", { style: {
-      padding: "11px 16px",
-      borderTop: "1px solid var(--dc-border)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 6
-    } }, /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 10.5, color: "var(--dc-text-muted)", letterSpacing: "0.02em" } }, "Secured by"), /* @__PURE__ */ React3.createElement(DecaneMark, { size: 13, muted: true }), /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 11, muted: true })))
+        key: session,
+        onGoogleSignIn: onGoogleSignIn ?? noop,
+        onKingsChatSignIn,
+        onXSignIn,
+        onEmailStart: onEmailStart ?? noopStart,
+        onEmailVerify: onEmailVerify ?? noop,
+        onPhoneStart,
+        onPhoneVerify,
+        authMethods: signInMethods,
+        customAuthLabel,
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn,
+        extra: walletEntry
+      }
+    ));
+  }
+  const modal = /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": pendingWallet ? "Choose networks" : view === "wallets" ? "Connect a wallet" : "Log in or sign up",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px",
+        // Same fallback chain as SocialWalletModal — without it, this modal
+        // drops to the browser default serif whenever the token block hasn't
+        // been injected, while the social modal still lands on system-ui.
+        fontFamily: "var(--dc-font-sans, system-ui, sans-serif)",
+        WebkitFontSmoothing: "antialiased"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "dcm-backdrop",
+        onClick: () => pendingWallet ? setPendingWallet(null) : onClose()
+      }
+    ),
+    /* @__PURE__ */ React3.createElement("div", { className: "dcm-card" }, body)
   );
   return createPortal2(modal, document.body);
 }