decane-connect-kit 2.28.0 → 2.29.0

package/dist/index.js

@@ -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,6 +5750,54 @@ 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" })
   );
 }
+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 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 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 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 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",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      ...line,
+      "aria-hidden": "true",
+      style: { flexShrink: 0, transition: "transform .2s", transform: open ? "rotate(180deg)" : "none" }
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "m6 9 6 6 6-6" })
+  );
+}
 
 // src/ui/WalletSelector.tsx
 var FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";
@@ -6809,33 +6861,6 @@ function downloadJson(data, 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(() => {
@@ -6853,6 +6878,117 @@ function useBalance(kind, address, chain, rpcUrls) {
   }, [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-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] = useState2(false);
+  async function copy() {
+    await navigator.clipboard.writeText(value).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+  return /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-copy", onClick: copy, "aria-label": copied ? "Copied" : `Copy ${label} address`, title: copied ? "Copied" : "Copy address" }, copied ? /* @__PURE__ */ React3.createElement(CheckIcon, null) : /* @__PURE__ */ React3.createElement(CopyIcon, null));
+}
 function AddressRow({
   label,
   address,
@@ -6861,14 +6997,10 @@ function AddressRow({
   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 })));
+  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-address" }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-address-main" }, /* @__PURE__ */ React3.createElement("span", null, label), /* @__PURE__ */ React3.createElement("code", { title: address }, shortAddress(address, 8, 6))), /* @__PURE__ */ React3.createElement("span", { className: "dcm-balance" }, balance.loading ? "\u2026" : `${formatBalanceDisplay(balance.value)} ${balance.symbol}`), /* @__PURE__ */ React3.createElement(CopyButton, { value: address, label }));
+}
+function ProtectedBy() {
+  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-protected" }, /* @__PURE__ */ React3.createElement("span", null, "Protected by"), /* @__PURE__ */ React3.createElement(DecaneMark, { size: 14, muted: true }), /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 12, muted: true }));
 }
 function SignInView({
   onGoogleSignIn,
@@ -6902,6 +7034,7 @@ function SignInView({
   const [showOtherMethods, setShowOtherMethods] = useState2(false);
   const [error, setError] = useState2("");
   const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
+  const busy = googleLoading || kingsChatLoading || xLoading || customLoading || emailLoading || phoneLoading;
   async function handlePasskey() {
     if (!onPasskeySignIn) return;
     setError("");
@@ -6955,7 +7088,7 @@ function SignInView({
     setError("");
     setEmailLoading(true);
     try {
-      await onEmailStart(email);
+      await onEmailStart(email.trim());
       setEmailSent(true);
     } catch (e2) {
       setError(e2.message);
@@ -6968,7 +7101,7 @@ function SignInView({
     setError("");
     setEmailLoading(true);
     try {
-      await onEmailVerify(email, code);
+      await onEmailVerify(email.trim(), code);
     } catch (e2) {
       setError(e2.message);
     } finally {
@@ -6981,7 +7114,7 @@ function SignInView({
     setError("");
     setPhoneLoading(true);
     try {
-      await onPhoneStart(phone);
+      await onPhoneStart(phone.trim());
       setPhoneSent(true);
     } catch (e2) {
       setError(e2.message);
@@ -6995,7 +7128,7 @@ function SignInView({
     setError("");
     setPhoneLoading(true);
     try {
-      await onPhoneVerify(phone, phoneCode);
+      await onPhoneVerify(phone.trim(), phoneCode);
     } catch (e2) {
       setError(e2.message);
     } finally {
@@ -7014,226 +7147,67 @@ function SignInView({
       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(
+  function backToMethods() {
+    setEmailSent(false);
+    setCode("");
+    setPhoneSent(false);
+    setPhoneCode("");
+    setError("");
+  }
+  const errorLine = error ? /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, error) : null;
+  if (passkeyFirst) {
+    return /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-badge" }, /* @__PURE__ */ React3.createElement(KeyIcon, { size: 22 })), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Welcome back"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, passkeyAddress ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, "Unlock ", /* @__PURE__ */ React3.createElement("b", null, shortAddress(passkeyAddress)), " with your passkey.") : "Unlock your wallet with your passkey."), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handlePasskey, disabled: passkeyLoading }, passkeyLoading ? "Waiting for passkey\u2026" : "Continue with passkey"), errorLine, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+      setError("");
+      setShowOtherMethods(true);
+    } }, "Use another sign-in method"), /* @__PURE__ */ React3.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__ */ React3.createElement("form", { className: "dcm-body", onSubmit: isEmail ? handleEmailVerify : handlePhoneVerify }, /* @__PURE__ */ React3.createElement("div", { className: "dcm-badge" }, isEmail ? /* @__PURE__ */ React3.createElement(MailIcon, { size: 22 }) : /* @__PURE__ */ React3.createElement(PhoneIcon, { size: 22 })), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Enter your code"), /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, "We sent a 6-digit code to ", /* @__PURE__ */ React3.createElement("b", null, isEmail ? email.trim() : phone.trim())), /* @__PURE__ */ React3.createElement("div", { className: "dcm-form" }, /* @__PURE__ */ React3.createElement(
+      "input",
+      {
+        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__ */ React3.createElement("button", { type: "submit", className: "dcm-primary", disabled: loading || value.length < 6 }, loading ? "Verifying\u2026" : "Continue")), errorLine, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: backToMethods }, "Use a different method"), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
+  }
+  const showPhone = authMethods.includes("phone") && !!onPhoneStart && !!onPhoneVerify;
+  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, resumeHint ? "Welcome back" : "Log in or sign up"), resumeHint && /* @__PURE__ */ React3.createElement("p", { className: "dcm-sub" }, "Sign in again to resume ", resumeHint, "."), /* @__PURE__ */ React3.createElement("div", { className: "dcm-methods" }, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleGoogle, disabled: busy }, /* @__PURE__ */ React3.createElement(GoogleMark, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, googleLoading ? "Redirecting to Google\u2026" : "Google")), authMethods.includes("email") && /* @__PURE__ */ React3.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handleEmailStart }, /* @__PURE__ */ React3.createElement(MailIcon, { size: 18 }), /* @__PURE__ */ React3.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__ */ React3.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !email.trim() }, emailLoading ? "Sending\u2026" : "Submit")), showPhone && /* @__PURE__ */ React3.createElement("form", { className: "dcm-method dcm-method-input", onSubmit: handlePhoneStart }, /* @__PURE__ */ React3.createElement(PhoneIcon, { size: 18 }), /* @__PURE__ */ React3.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__ */ React3.createElement("button", { type: "submit", className: "dcm-submit", disabled: busy || !phone.trim() }, phoneLoading ? "Sending\u2026" : "Submit")), authMethods.includes("x") && onXSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleX, disabled: busy }, /* @__PURE__ */ React3.createElement(XLogo, { size: 16 }), /* @__PURE__ */ React3.createElement("span", null, xLoading ? "Redirecting to X\u2026" : "X")), authMethods.includes("kingschat") && onKingsChatSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleKingsChat, disabled: busy }, /* @__PURE__ */ React3.createElement(ChatIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, kingsChatLoading ? "Waiting for KingsChat\u2026" : "KingsChat")), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-method", onClick: handleCustomAuth, disabled: busy }, /* @__PURE__ */ React3.createElement(UserIcon, { size: 18 }), /* @__PURE__ */ React3.createElement("span", null, customLoading ? "Connecting\u2026" : customAuthLabel))), errorLine, canUsePasskey && onPasskeySignIn && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-link", onClick: () => {
+    setError("");
+    setShowOtherMethods(false);
+  } }, "Use my passkey instead"), /* @__PURE__ */ React3.createElement(ProtectedBy, null));
 }
 function RecoverySection({
   addresses,
@@ -7284,60 +7258,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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.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__ */ React3.createElement(
+    "input",
+    {
+      className: "dcm-field",
+      placeholder: "Password hint (optional)",
+      "aria-label": "Password hint",
+      value: passwordHint,
+      onChange: (e) => setPasswordHint(e.target.value)
+    }
+  ), error && /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, error));
+  return /* @__PURE__ */ React3.createElement("div", { className: "dcm-panel" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-panel-head", onClick: () => setExpanded((v) => !v), "aria-expanded": expanded }, /* @__PURE__ */ React3.createElement("span", null, "Recovery file"), /* @__PURE__ */ React3.createElement(ChevronIcon, { open: expanded })), expanded && /* @__PURE__ */ React3.createElement("div", { className: "dcm-panel-body" }, !mode && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("p", { className: "dcm-note" }, "Save a recovery file so you can restore this wallet on a new device."), /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.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__ */ React3.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), mode === "portable" && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "dcm-warn" }, /* @__PURE__ */ React3.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__ */ React3.createElement("label", { className: "dcm-check" }, /* @__PURE__ */ React3.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__ */ React3.createElement("div", { className: "dcm-row" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", onClick: handleGenerate, disabled: busy || !confirmed }, busy ? "Preparing\u2026" : "Download"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: reset }, "Cancel"))), result && /* @__PURE__ */ React3.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 +7296,7 @@ function SocialWalletModal({
   onDisconnect,
   onGoogleSignIn,
   onKingsChatSignIn,
+  onXSignIn,
   onEmailStart,
   onEmailVerify,
   onPhoneStart,
@@ -7366,9 +7315,11 @@ function SocialWalletModal({
   const [timer, setTimer] = useState2("");
   const [unlocking, setUnlocking] = useState2(false);
   const [disconnecting, setDisconnecting] = useState2(false);
+  const [actionError, setActionError] = useState2("");
   useEffect2(() => {
     if (!open) return;
     injectTokens2(theme);
+    injectModalCss();
     if (theme !== "auto") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const h = () => injectTokens2("auto");
@@ -7395,17 +7346,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 +7370,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 unlocked = socialAuth.isUnlocked;
   const modal = /* @__PURE__ */ React3.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 +7385,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__ */ React3.createElement("div", { className: "dcm-backdrop", onClick: onClose }),
+    /* @__PURE__ */ React3.createElement("div", { className: "dcm-card" }, /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-icon-btn", style: { right: 14 }, onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React3.createElement(CloseIcon, null)), showSignIn ? /* @__PURE__ */ React3.createElement(
       SignInView,
       {
         onGoogleSignIn,
         onKingsChatSignIn,
+        onXSignIn,
         onEmailStart,
         onEmailVerify,
         onPhoneStart,
@@ -7496,86 +7408,22 @@ 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__ */ React3.createElement("div", { className: "dcm-body" }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 44 }), /* @__PURE__ */ React3.createElement("h2", { className: "dcm-title" }, "Your wallet"), /* @__PURE__ */ React3.createElement(
+      "span",
+      {
+        className: "dcm-status",
+        style: { color: unlocked ? "#12b76a" : "var(--dc-accent-ink)", marginTop: -8 }
+      },
+      /* @__PURE__ */ React3.createElement("i", { style: { background: unlocked ? "#12b76a" : "var(--dc-accent)" } }),
+      unlocked ? timer ? `Unlocked, expires in ${timer}` : "Unlocked" : "Locked"
+    ), (socialAuth.addresses?.evm || socialAuth.addresses?.solana) && /* @__PURE__ */ React3.createElement("div", { className: "dcm-addresses" }, socialAuth.addresses?.evm && /* @__PURE__ */ React3.createElement(AddressRow, { label: "Ethereum and EVM", 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 })), unlocked && /* @__PURE__ */ React3.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",
-      {
-        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",
-      {
-        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 })))
+    ), actionError && /* @__PURE__ */ React3.createElement("p", { className: "dcm-error", role: "alert" }, actionError), /* @__PURE__ */ React3.createElement("div", { className: "dcm-actions" }, !unlocked && /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-primary", style: { height: 44, borderRadius: 12 }, onClick: handleUnlock, disabled: unlocking }, unlocking ? "Unlocking\u2026" : "Unlock wallet"), /* @__PURE__ */ React3.createElement("button", { type: "button", className: "dcm-ghost", onClick: handleDisconnect, disabled: disconnecting }, disconnecting ? "Signing out\u2026" : "Sign out")), /* @__PURE__ */ React3.createElement(ProtectedBy, null)))
   );
   return createPortal2(modal, document.body);
 }