@yieldfabric/wallet 0.2.1 → 0.2.3

package/dist/index.js

@@ -9,7 +9,7 @@ import React54, { createContext, lazy, useContext, useState, useEffect, useRef,
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AvererSdkProvider, useAvererWallet, AvererWebSdk } from '@averer/averer-websdk';
 import sha3, { keccak256 } from 'js-sha3';
-import { XMarkIcon, IdentificationIcon, CheckCircleIcon, ExclamationTriangleIcon, SparklesIcon, EnvelopeIcon, ArrowPathIcon, KeyIcon, ShieldCheckIcon, CreditCardIcon, ArrowRightIcon, UserIcon, UserGroupIcon, ClockIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon, XMarkIcon, IdentificationIcon, CheckCircleIcon, ExclamationTriangleIcon, SparklesIcon, EnvelopeIcon, ArrowPathIcon, ShieldCheckIcon, KeyIcon, CreditCardIcon, UserIcon, UserGroupIcon } from '@heroicons/react/24/outline';
 import { Avatar } from '@avatune/react';
 import theme from '@avatune/kyute-theme/react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -5345,7 +5345,7 @@ var init_SignupFlow = __esm({
     };
     AvererSidebar = ({ onError }) => {
       const navigate = useWalletNavigate();
-      return /* @__PURE__ */ jsxs("aside", { className: "w-full md:w-[360px] md:h-screen bg-background flex md:flex-col items-start justify-between md:justify-between gap-4 px-6 py-5 md:p-10 border-b md:border-b-0 md:border-r border-border-light", children: [
+      return /* @__PURE__ */ jsxs("aside", { className: "w-full md:w-[360px] md:h-screen bg-background flex md:flex-col items-start justify-between md:justify-between gap-4 px-6 pt-[calc(1.25rem+env(safe-area-inset-top))] pb-5 md:p-10 border-b md:border-b-0 md:border-r border-border-light", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-10", children: [
           /* @__PURE__ */ jsx("div", { className: "text-text-primary", children: /* @__PURE__ */ jsx(YieldFabricLockup, { size: 32 }) }),
           /* @__PURE__ */ jsxs("div", { className: "hidden md:block space-y-3 max-w-[260px]", children: [
@@ -5362,7 +5362,7 @@ var init_SignupFlow = __esm({
               navigate("/onboarding/choose");
             },
             className: "text-[12px] text-text-muted hover:text-text-primary transition-colors text-left",
-            children: "\u2190 Try a different method"
+            children: "\u2039 Try a different method"
           }
         ) })
       ] });
@@ -5778,6 +5778,7 @@ async function fetchSnapshot() {
   return {
     profileCompleted: !!profile && !!profile.profile_completed,
     keyCount: keys.length,
+    keyDeferred: me?.id ? keyStepDeferred(me.id) : false,
     emailVerified: email.verified,
     emailSynthetic: email.is_synthetic,
     identityStatus: identity && identity.status !== "unverified" ? identity : null,
@@ -5810,6 +5811,24 @@ async function getSnapshot() {
   cache = { kind: "inflight", promise };
   return promise;
 }
+var keyDeferredKey = (userId) => `yf.onboarding.keyDeferred.${userId}`;
+var keyDeferredHere = /* @__PURE__ */ new Set();
+function keyStepDeferred(userId) {
+  if (keyDeferredHere.has(userId)) return true;
+  try {
+    return window.localStorage.getItem(keyDeferredKey(userId)) === "1";
+  } catch {
+    return false;
+  }
+}
+function deferKeyStep(userId) {
+  keyDeferredHere.add(userId);
+  try {
+    window.localStorage.setItem(keyDeferredKey(userId), "1");
+  } catch {
+  }
+  invalidateOnboardingState();
+}
 function invalidateOnboardingState() {
   cache = { kind: "empty" };
   scopedIdentity = null;
@@ -5836,10 +5855,10 @@ function decide(snapshot, ctx) {
   if (ctx.kycVerifiesEmail) {
     if (identityStep) return identityStep;
     if (!emailOk) return "email-required";
-    if (snapshot.keyCount < MIN_USER_KEYS) return "wallets-required";
+    if (snapshot.keyCount < MIN_USER_KEYS && !snapshot.keyDeferred) return "wallets-required";
   } else {
     if (!emailOk) return "email-required";
-    if (snapshot.keyCount < MIN_USER_KEYS) return "wallets-required";
+    if (snapshot.keyCount < MIN_USER_KEYS && !snapshot.keyDeferred) return "wallets-required";
     if (identityStep) return identityStep;
   }
   if (!snapshot.profileCompleted) return "profile-required";
@@ -5954,7 +5973,7 @@ function clearDynamicSession() {
 init_WalletConfigContext();
 var WalletAuthContext = createContext(void 0);
 function WalletAuthProvider({ children }) {
-  const { onSessionBootstrapped } = useWalletConfig();
+  const { onSessionBootstrapped, onBeforeLogout } = useWalletConfig();
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -6047,6 +6066,7 @@ function WalletAuthProvider({ children }) {
       setIsLoading(true);
       setError(null);
       tokenRenewalService.stopRenewal();
+      await Promise.resolve().then(() => onBeforeLogout?.()).catch(() => void 0);
       await authService.logout();
       clearDynamicSession();
       setUser(null);
@@ -6062,6 +6082,7 @@ function WalletAuthProvider({ children }) {
       setIsLoading(true);
       setError(null);
       tokenRenewalService.stopRenewal();
+      await Promise.resolve().then(() => onBeforeLogout?.()).catch(() => void 0);
       await authService.logoutAll();
       clearDynamicSession();
       setUser(null);
@@ -9309,11 +9330,11 @@ function humanizeMessageType(messageType) {
   return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
 var TONE_COLORS = {
-  success: { dotClass: "bg-emerald-300", textClass: "text-emerald-300", bgClass: "bg-emerald-950/[0.16]" },
-  danger: { dotClass: "bg-red-300", textClass: "text-red-200", bgClass: "bg-red-950/[0.16]" },
-  warn: { dotClass: "bg-amber-300", textClass: "text-amber-200", bgClass: "bg-amber-950/[0.14]" },
-  info: { dotClass: "bg-blue-300", textClass: "text-blue-200", bgClass: "bg-blue-950/[0.14]" },
-  neutral: { dotClass: "bg-white/[0.34]", textClass: "text-white/[0.56]", bgClass: "bg-white/[0.045]" }
+  success: { dotClass: "bg-emerald-300", textClass: "text-status-success-text dark:text-emerald-300", bgClass: "bg-status-success-bg dark:bg-emerald-950/[0.16]" },
+  danger: { dotClass: "bg-red-300", textClass: "text-status-error-text dark:text-red-200", bgClass: "bg-status-error-bg dark:bg-red-950/[0.16]" },
+  warn: { dotClass: "bg-amber-300", textClass: "text-status-warning-text dark:text-amber-200", bgClass: "bg-status-warning-bg dark:bg-amber-950/[0.14]" },
+  info: { dotClass: "bg-blue-300", textClass: "text-azure dark:text-blue-200", bgClass: "bg-azure-tint dark:bg-blue-950/[0.14]" },
+  neutral: { dotClass: "bg-text-muted dark:bg-white/[0.34]", textClass: "text-text-muted dark:text-white/[0.56]", bgClass: "bg-chip dark:bg-white/[0.045]" }
 };
 var STATUS_TO_TONE = {
   completed: "success",
@@ -10257,7 +10278,7 @@ var DEFAULT_MESSAGES = {
     },
     email: {
       title: "Continue with email",
-      description: "Email + password. Pick your signing wallets (passkey / MetaMask) in the next step."
+      description: "An email and a password. You can add a passkey later."
     },
     haveAccountPrompt: "Already have an account?",
     signInLinkText: "Sign in"
@@ -10268,7 +10289,7 @@ var DEFAULT_MESSAGES = {
   },
   emailSignup: {
     header: "Create your account",
-    subheader: "Your details now \u2014 signing wallets next.",
+    subheader: "An email and a password is all it takes.",
     submitButtonText: "Continue",
     submittingButtonText: "Creating account\u2026",
     backButtonText: "\u2039 Back",
@@ -10377,7 +10398,7 @@ function LoginPage({
   align = "center",
   logo
 }) {
-  const alignClass = align === "top" ? "items-start pt-12 pb-12" : "items-center";
+  const alignClass = align === "top" ? "items-start pt-[calc(3rem+env(safe-area-inset-top))] pb-12" : "items-center pt-[env(safe-area-inset-top)]";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -10516,7 +10537,7 @@ function OnboardingChoosePath({ chrome } = {}) {
     /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-[520px] text-center space-y-1.5", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-[18px] text-text-primary font-medium", children: messages.choosePath.header }),
       /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-secondary", children: messages.choosePath.subheader }),
-      configError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
+      configError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-status-warning-text dark:text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[480px] space-y-2.5", children: [
       avererEnabled && /* @__PURE__ */ jsx(
@@ -10616,7 +10637,7 @@ function PlanOfferCard({
             /* @__PURE__ */ jsx("span", { className: "block text-[8px] font-medium uppercase tracking-[0.1em] text-text-muted", children: "Pay monthly" }),
             /* @__PURE__ */ jsx("span", { className: "mt-1 block text-[16px] font-semibold leading-none tracking-tight text-text-primary tabular-nums", children: price })
           ] }),
-          /* @__PURE__ */ jsx(ArrowRightIcon, { className: "h-3.5 w-3.5 shrink-0 text-text-muted", strokeWidth: 1.7 }),
+          /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 shrink-0 text-text-muted", strokeWidth: 1.7 }),
           /* @__PURE__ */ jsxs("span", { children: [
             /* @__PURE__ */ jsx("span", { className: "block text-[8px] font-medium uppercase tracking-[0.1em] text-text-muted", children: "Cycle credit" }),
             /* @__PURE__ */ jsx("span", { className: "mt-1 block text-[16px] font-semibold leading-none tracking-tight text-text-primary tabular-nums", children: allowance })
@@ -10786,7 +10807,7 @@ function OnboardingMethodCard({
           /* @__PURE__ */ jsx("div", { className: "text-sm text-text-primary", children: label }),
           /* @__PURE__ */ jsx("div", { className: "text-[11px] text-text-secondary", children: sublabel })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "text-text-secondary", children: "\u2192" })
+        /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "h-4 w-4 text-text-secondary" })
       ]
     }
   );
@@ -12265,7 +12286,7 @@ function OnboardingChooseMethod({ chrome } = {}) {
   return /* @__PURE__ */ jsx(StepShell, { chrome, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-[16px] text-text-primary", children: messages.chooseMethod.header }),
-      configError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
+      configError && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-status-warning-text dark:text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       enabled.map(({ id, impl }) => {
@@ -13058,7 +13079,7 @@ function SkeletonAvatar({
     {
       role: "img",
       "aria-label": choice ? `${name} - ${choice.label} avatar` : `${name}'s avatar`,
-      className: `rounded-full overflow-hidden flex items-center justify-center select-none bg-[#252525] ${className}`,
+      className: `rounded-full overflow-hidden flex items-center justify-center select-none bg-surface-alt dark:bg-[#252525] ${className}`,
       style: {
         width: size,
         height: size
@@ -13111,7 +13132,7 @@ function AvatarPicker({
           onClick: () => onChange(c.id),
           className: [
             "rounded-full flex items-center justify-center select-none overflow-hidden",
-            "transition-all border-2 bg-[#252525]",
+            "transition-all border-2 bg-surface-alt dark:bg-[#252525]",
             selected ? "border-primary scale-105" : "border-transparent hover:border-border-light"
           ].join(" "),
           style: { width: tileSize, height: tileSize },
@@ -14923,35 +14944,6 @@ function providerLabel(p) {
 function ProviderIcon({ provider }) {
   return /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 });
 }
-function setupCopy(args) {
-  const { keyCount, busy } = args;
-  if (keyCount >= MIN_KEYS) {
-    return {
-      title: "Ready to sign",
-      body: keyCount >= RECOMMENDED_KEYS ? "Your signing keys are ready, including a backup recovery path." : "Your signing key is ready. Adding a second key gives you a recovery path, but you can continue now.",
-      tone: "done"
-    };
-  }
-  if (busy === "passkey" || busy === "metamask") {
-    return {
-      title: "Saving your signing key",
-      body: "Complete the passkey or wallet prompt. Your smart account will be activated later, only when an on-chain action requires it.",
-      tone: "active"
-    };
-  }
-  return {
-    title: "Choose a signing key",
-    body: "Use a passkey for quick device-native signing, or connect MetaMask if you prefer an external wallet.",
-    tone: "waiting"
-  };
-}
-function StepDot({
-  state,
-  icon
-}) {
-  const className = state === "done" ? "bg-status-success-bg text-status-success-text border-status-success-text/30" : state === "active" ? "bg-status-warning-bg text-status-warning-text border-status-warning-text/30" : "bg-chip text-text-secondary border-border-default";
-  return /* @__PURE__ */ jsx("div", { className: `h-8 w-8 rounded-full border flex items-center justify-center ${className}`, children: state === "done" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-4 w-4", strokeWidth: 1.8 }) : state === "active" ? /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-4 w-4 animate-spin", strokeWidth: 1.8 }) : icon });
-}
 function SuccessMoment({ visible }) {
   if (!visible) return null;
   return /* @__PURE__ */ jsx(
@@ -15022,65 +15014,6 @@ function RecoveryPanel({
     }
   );
 }
-function SetupStep({
-  label,
-  detail,
-  state,
-  icon
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
-    /* @__PURE__ */ jsx(StepDot, { state, icon }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[12px] text-text-primary truncate", children: label }),
-      /* @__PURE__ */ jsx("div", { className: "text-[10px] text-text-secondary truncate", children: detail })
-    ] })
-  ] });
-}
-function SetupStatusPanel({
-  keyCount,
-  busy
-}) {
-  const copy = setupCopy({ keyCount, busy });
-  const keyState = keyCount >= MIN_KEYS ? "done" : busy === "passkey" || busy === "metamask" ? "active" : "waiting";
-  const readyState = keyCount >= MIN_KEYS ? "done" : "waiting";
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: "rounded-lg border border-border-default bg-input-bg px-4 py-4 space-y-4",
-      role: "status",
-      "aria-live": "polite",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-[18px] text-text-primary font-medium tracking-normal", children: copy.title }),
-            /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-secondary leading-relaxed", children: copy.body })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: `shrink-0 h-9 w-9 rounded-full flex items-center justify-center ${copy.tone === "done" ? "bg-status-success-bg text-status-success-text" : copy.tone === "active" ? "bg-status-warning-bg text-status-warning-text" : "bg-chip text-text-secondary"}`, children: copy.tone === "done" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-5 w-5", strokeWidth: 1.8 }) : copy.tone === "active" ? /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-5 w-5 animate-spin", strokeWidth: 1.8 }) : /* @__PURE__ */ jsx(ShieldCheckIcon, { className: "h-5 w-5", strokeWidth: 1.8 }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-2.5", children: [
-          /* @__PURE__ */ jsx(
-            SetupStep,
-            {
-              label: "Signing key",
-              detail: keyCount >= MIN_KEYS ? "Ready to authorize" : "Choose one below",
-              state: keyState,
-              icon: /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4", strokeWidth: 1.7 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SetupStep,
-            {
-              label: "Continue",
-              detail: readyState === "done" ? "Unlocked" : "Unlocks automatically",
-              state: readyState,
-              icon: /* @__PURE__ */ jsx(ClockIcon, { className: "h-4 w-4", strokeWidth: 1.7 })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
 function AddWalletsStep({ chrome } = {}) {
   const navigate = useWizardNavigate();
   const { bootstrapSession, user } = useAuth();
@@ -15094,6 +15027,7 @@ function AddWalletsStep({ chrome } = {}) {
   const [autoAdvanceArmed, setAutoAdvanceArmed] = useState(false);
   const [emailDraft, setEmailDraft] = useState("");
   const [showDynamic, setShowDynamic] = useState(false);
+  const [walletsOpen, setWalletsOpen] = useState(false);
   const hasSyntheticEmail = !!user?.email && user.email.toLowerCase().endsWith("@external.yieldfabric.local");
   const { snapshot: gateSnapshot } = useOnboardingState();
   const emailOk = !!gateSnapshot && snapshotEmailOk(gateSnapshot);
@@ -15120,7 +15054,7 @@ function AddWalletsStep({ chrome } = {}) {
   }, [refresh]);
   const keyCount = keys.length;
   const canContinue = keyCount >= MIN_KEYS;
-  const continueLabel = canContinue ? autoAdvanceArmed ? "Ready - continuing..." : "Continue" : "Add a key to continue";
+  const continueLabel = canContinue ? autoAdvanceArmed ? "Ready - continuing..." : "Continue" : "Add a passkey to continue";
   async function addMetaMask() {
     setError(null);
     setLastFailedAction(null);
@@ -15139,7 +15073,7 @@ function AddWalletsStep({ chrome } = {}) {
     await impl.directLink({
       onComplete: async () => {
         setBusy(null);
-        setStatus("Signing key saved. Refreshing\u2026");
+        setStatus("Saved. One moment\u2026");
         await refresh({ invalidate: true });
       },
       onError: (msg) => {
@@ -15195,7 +15129,7 @@ function AddWalletsStep({ chrome } = {}) {
           credential_id: created.credentialId
         }
       }, { purpose: "user" });
-      setStatus("Signing key saved. Refreshing\u2026");
+      setStatus("Saved. One moment\u2026");
       await refresh({ invalidate: true });
       const after = await listMyLoginKeys();
       const found = after.some(
@@ -15250,8 +15184,7 @@ function AddWalletsStep({ chrome } = {}) {
       setBusy(null);
     }
   }
-  const onContinue = useCallback(async () => {
-    if (!canContinue) return;
+  const goOn = useCallback(async () => {
     setBusy("continue");
     setLastFailedAction(null);
     try {
@@ -15278,7 +15211,16 @@ function AddWalletsStep({ chrome } = {}) {
       setError(friendlyActionError(e, "refresh"));
       setBusy(null);
     }
-  }, [bootstrapSession, canContinue, config, navigate]);
+  }, [bootstrapSession, config, navigate, user?.role]);
+  const onContinue = useCallback(async () => {
+    if (!canContinue) return;
+    await goOn();
+  }, [canContinue, goOn]);
+  const onSkip = useCallback(async () => {
+    if (!user?.id) return;
+    deferKeyStep(user.id);
+    await goOn();
+  }, [goOn, user?.id]);
   useEffect(() => {
     if (!autoAdvanceArmed || !canContinue || busy) return;
     const timeout = window.setTimeout(() => {
@@ -15304,9 +15246,8 @@ function AddWalletsStep({ chrome } = {}) {
   }
   return /* @__PURE__ */ jsx(StepShell, { chrome, wide: true, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-5 max-w-[420px] mx-auto", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-[0.14em] text-text-secondary", children: "Secure setup" }),
-      /* @__PURE__ */ jsx("h2", { className: "text-[21px] text-text-primary font-medium leading-tight", children: "Your account is almost ready" }),
-      /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-text-secondary max-w-[330px] mx-auto", children: "Add a signing key now. Your smart account is activated later, only when an on-chain action needs it." })
+      /* @__PURE__ */ jsx("h2", { className: "text-[21px] text-text-primary font-medium leading-tight", children: "Secure your account" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[13px] leading-relaxed text-text-secondary max-w-[340px] mx-auto", children: "A passkey means only you can approve what is done in your name \u2014 one tap with Face ID, a fingerprint or your PIN. You can also do this later." })
     ] }),
     hasSyntheticEmail && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-status-warning-bg border border-status-warning-text/20 p-3 space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-[11px] text-status-warning-text", children: "Your account email is a temporary placeholder. Set a real one so you can recover access and (if you ever want it) link Averer KYC." }),
@@ -15333,20 +15274,10 @@ function AddWalletsStep({ chrome } = {}) {
         )
       ] })
     ] }),
-    !loading && /* @__PURE__ */ jsx(
-      SetupStatusPanel,
-      {
-        keyCount,
-        busy
-      }
-    ),
     /* @__PURE__ */ jsx(SuccessMoment, { visible: canContinue && autoAdvanceArmed && !error }),
-    loading ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border-default bg-input-bg px-4 py-8 text-center text-[11px] text-text-secondary", children: "Loading\u2026" }) : keys.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-border-default bg-input-bg px-4 py-7 flex flex-col items-center gap-2.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-11 h-11 rounded-full bg-chip flex items-center justify-center", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-5 w-5 text-text-secondary", strokeWidth: 1.5 }) }),
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] text-text-secondary", children: "No signing keys yet" })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-input-bg rounded-lg px-4 py-3.5 space-y-3", children: [
+    loading ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border-default bg-input-bg px-4 py-8 text-center text-[11px] text-text-secondary", children: "Loading\u2026" }) : keys.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "bg-input-bg rounded-lg px-4 py-3.5 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[11px]", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: "Signing keys" }),
+        /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: "Your keys" }),
         /* @__PURE__ */ jsxs("span", { className: keyCount < RECOMMENDED_KEYS ? "text-status-warning-text" : "text-status-success-text", children: [
           keyCount === 1 && "1 key \xB7 add a backup",
           keyCount >= RECOMMENDED_KEYS && `${keyCount} keys`
@@ -15373,7 +15304,7 @@ function AddWalletsStep({ chrome } = {}) {
       }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-text-secondary text-center", children: !emailOk ? "Verify your email to unlock signing keys" : "Add a key" }),
+      !emailOk ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-text-secondary text-center", children: "Confirm your email first" }) : null,
       !emailOk && /* @__PURE__ */ jsxs(
         "button",
         {
@@ -15393,37 +15324,48 @@ function AddWalletsStep({ chrome } = {}) {
           type: "button",
           onClick: addPasskey,
           disabled: busy !== null || !emailOk,
-          className: "\n              w-full min-h-[44px] flex items-center justify-center gap-2 py-2.5 rounded-lg\n              bg-chip hover:bg-chip-hover\n              text-[12px] text-text-primary\n              transition-all duration-200\n              active:scale-[0.98]\n              disabled:opacity-40 disabled:cursor-not-allowed\n            ",
-          children: [
-            busy === "passkey" ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: "\u2026" }) : /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 }),
-            /* @__PURE__ */ jsx("span", { children: "Add Passkey" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: addMetaMask,
-          disabled: busy !== null || !emailOk,
-          className: "\n              w-full min-h-[44px] flex items-center justify-center gap-2 py-2.5 rounded-lg\n              bg-chip hover:bg-chip-hover\n              text-[12px] text-text-primary\n              transition-all duration-200\n              active:scale-[0.98]\n              disabled:opacity-40 disabled:cursor-not-allowed\n            ",
+          className: `w-full min-h-[46px] flex items-center justify-center gap-2 py-2.5 rounded-lg text-[13px] font-medium transition-colors active:scale-[0.99] disabled:opacity-40 disabled:cursor-not-allowed ${canContinue ? "bg-chip hover:bg-chip-hover text-text-primary" : "bg-cta hover:bg-cta-hover text-on-cta"}`,
           children: [
-            busy === "metamask" ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: "\u2026" }) : /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 }),
-            /* @__PURE__ */ jsx("span", { children: "Add MetaMask" })
+            busy === "passkey" ? /* @__PURE__ */ jsx("span", { children: "\u2026" }) : /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4", strokeWidth: 1.5 }),
+            /* @__PURE__ */ jsx("span", { children: canContinue ? "Add another passkey" : "Add a passkey" })
           ]
         }
       ),
-      !!config?.auth.enabled.includes("dynamic") && !!config?.auth.settings.dynamic?.environment_id && /* @__PURE__ */ jsxs(
+      walletsOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: addMetaMask,
+            disabled: busy !== null || !emailOk,
+            className: "\n                  w-full min-h-[44px] flex items-center justify-center gap-2 py-2.5 rounded-lg\n                  bg-chip hover:bg-chip-hover\n                  text-[12px] text-text-primary\n                  transition-all duration-200\n                  active:scale-[0.98]\n                  disabled:opacity-40 disabled:cursor-not-allowed\n                ",
+            children: [
+              busy === "metamask" ? /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: "\u2026" }) : /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 }),
+              /* @__PURE__ */ jsx("span", { children: "Add MetaMask" })
+            ]
+          }
+        ),
+        !!config?.auth.enabled.includes("dynamic") && !!config?.auth.settings.dynamic?.environment_id && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowDynamic(true),
+            disabled: busy !== null || !emailOk,
+            className: "\n                    w-full min-h-[44px] flex items-center justify-center gap-2 py-2.5 rounded-lg\n                    bg-chip hover:bg-chip-hover\n                    text-[12px] text-text-primary\n                    transition-all duration-200\n                    active:scale-[0.98]\n                    disabled:opacity-40 disabled:cursor-not-allowed\n                  ",
+            children: [
+              /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 }),
+              /* @__PURE__ */ jsx("span", { children: "Add Dynamic" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => setShowDynamic(true),
-          disabled: busy !== null || !emailOk,
-          className: "\n                w-full min-h-[44px] flex items-center justify-center gap-2 py-2.5 rounded-lg\n                bg-chip hover:bg-chip-hover\n                text-[12px] text-text-primary\n                transition-all duration-200\n                active:scale-[0.98]\n                disabled:opacity-40 disabled:cursor-not-allowed\n              ",
-          children: [
-            /* @__PURE__ */ jsx(KeyIcon, { className: "h-4 w-4 text-text-secondary", strokeWidth: 1.5 }),
-            /* @__PURE__ */ jsx("span", { children: "Add Dynamic" })
-          ]
+          onClick: () => setWalletsOpen(true),
+          disabled: busy !== null,
+          className: "w-full py-1.5 text-[11px] text-text-secondary hover:text-text-primary transition-colors disabled:opacity-40",
+          children: "Use a crypto wallet instead"
         }
       )
     ] }),
@@ -15440,7 +15382,7 @@ function AddWalletsStep({ chrome } = {}) {
               registerOnChain: false,
               onComplete: async () => {
                 setShowDynamic(false);
-                setStatus("Signing key saved. Refreshing\u2026");
+                setStatus("Saved. One moment\u2026");
                 await refresh({ invalidate: true });
               },
               onError: (m) => {
@@ -15472,15 +15414,24 @@ function AddWalletsStep({ chrome } = {}) {
         onRetry: retryLastFailure
       }
     ),
-    /* @__PURE__ */ jsx(
+    canContinue ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: onContinue,
-        disabled: !canContinue || busy === "continue",
-        className: "\n            w-full min-h-[46px] py-3 rounded-lg\n            bg-status-success-bg hover:opacity-80 text-status-success-text\n            text-[13px] font-medium\n            transition-all duration-200 active:scale-[0.99]\n            disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-status-success-bg\n          ",
+        disabled: busy === "continue",
+        className: "w-full min-h-[46px] py-3 rounded-lg bg-cta hover:bg-cta-hover text-on-cta text-[13px] font-medium transition-colors active:scale-[0.99] disabled:opacity-40 disabled:cursor-not-allowed",
         children: continueLabel
       }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void onSkip(),
+        disabled: busy !== null || !user?.id,
+        className: "w-full py-2 text-[13px] text-text-secondary hover:text-text-primary transition-colors disabled:opacity-40",
+        children: "Not now"
+      }
     ),
     keyCount === 1 && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-text-secondary text-center pt-1", children: "Tip: a second key is your recovery path. If you lose your only key, the account is locked out." })
   ] }) });
@@ -15567,7 +15518,7 @@ var Drawer = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": titleId,
-        className: `pointer-events-auto ${panelBg} shadow-2xl h-full flex flex-col ${widthClass} ${panelClassName}`,
+        className: `pointer-events-auto ${panelBg} shadow-2xl h-full flex flex-col pt-[env(safe-area-inset-top)] ${widthClass} ${panelClassName}`,
         style: { ...widthStyle, ...panelStyle },
         onClick: (e) => e.stopPropagation(),
         children: [
@@ -17978,7 +17929,7 @@ var OnboardingPolicySection = ({
   ]);
   if (hidden || loading || deployLoading || platformActive === null) return null;
   if (platformActive === "error") {
-    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border-default dark:border-white/[0.07] bg-raised dark:bg-white/[0.02] p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border-light bg-surface-alt px-3 py-2.5 text-[13px] leading-5 text-text-muted", children: [
         /* @__PURE__ */ jsx("span", { children: "Couldn't confirm whether this group is used as a platform." }),
@@ -17995,12 +17946,12 @@ var OnboardingPolicySection = ({
     ] });
   }
   if (!platformActive) {
-    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border-default dark:border-white/[0.07] bg-raised dark:bg-white/[0.02] p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }) }),
       /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border-light bg-surface-alt px-3 py-2.5 text-[13px] leading-5 text-text-muted", children: "This group isn't used as a platform, so there are no signups to configure. Enable platform sponsorship first \u2014 then choose the sign-in methods and identity checks its users go through." })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border-default dark:border-white/[0.07] bg-raised dark:bg-white/[0.02] p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }),
       /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted", children: "The path people take from first visit to transacting on this platform." })
@@ -18785,7 +18736,7 @@ function DecodedCalldata({
   }
   const kindColor = {
     zero: "text-text-muted",
-    address: "text-blue-300/[0.90]",
+    address: "text-azure dark:text-blue-300/[0.90]",
     uint: "text-text-primary",
     bytes32: "text-text-secondary"
   };
@@ -19776,14 +19727,14 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
             type: "button",
             onClick: handleCancelMessage,
             disabled: cancelling,
-            className: "px-3 py-2 text-[13px] text-red-200 hover:text-text-primary disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+            className: "px-3 py-2 text-[13px] text-status-error-text dark:text-red-200 hover:text-text-primary disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
             children: cancelling ? "Cancelling\u2026" : "Cancel message"
           }
         ) : void 0,
         children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-red-100 mb-1", children: "Couldn't load transaction" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-status-error-text dark:text-red-100 mb-1", children: "Couldn't load transaction" }),
           /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-secondary max-w-sm", children: error }),
-          cancelError && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-red-200 mt-3", children: cancelError })
+          cancelError && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 mt-3", children: cancelError })
         ]
       }
     );
@@ -19798,7 +19749,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
   })();
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col h-full text-text-primary", children: [
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 py-4", children: [
-      reviewWarning && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-amber-300/[0.22] bg-amber-400/[0.08] px-3 py-2 text-[12px] leading-5 text-amber-100", children: reviewWarning }),
+      reviewWarning && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-status-warning-line dark:border-amber-300/[0.22] bg-status-warning-bg dark:bg-amber-400/[0.08] px-3 py-2 text-[12px] leading-5 text-status-warning-text dark:text-amber-100", children: reviewWarning }),
       /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-secondary leading-5", children: mode === "inspect" ? "Review action details and execution outcome." : "Review the action, choose a signing key, and confirm." }),
       /* @__PURE__ */ jsx("div", { className: "flex w-full rounded-[22px] border border-border-light bg-raised p-1 text-[12px] shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]", children: ["simple", "advanced"].map((mode2) => /* @__PURE__ */ jsx(
         "button",
@@ -19987,7 +19938,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
                       ] })
                     }
                   ),
-                  selector && !methodName && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-red-300/[0.18] bg-red-400/[0.08] px-2.5 py-2 text-[10px] leading-4 text-red-200", children: "High risk: this selector is unknown. Review the raw target, value, and every calldata word before signing." }),
+                  selector && !methodName && /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-status-error-line dark:border-red-300/[0.18] bg-status-error-bg dark:bg-red-400/[0.08] px-2.5 py-2 text-[10px] leading-4 text-status-error-text dark:text-red-200", children: "High risk: this selector is unknown. Review the raw target, value, and every calldata word before signing." }),
                   !dataEmpty && /* @__PURE__ */ jsx("div", { className: "text-[12px]", children: isExpanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: "Calldata" }),
@@ -20046,7 +19997,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
       ] })
     ] }) }),
     mode === "sign" && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border-light bg-surface-alt", children: [
-      keysLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-border-strong border-t-transparent" }) }) : keysError ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-red-200 px-4 py-3", children: keysError }) : availableKeys.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-muted text-center py-5", children: ownedSignerState.error ?? (ownedSignerBinding ? "The personal key bound to this owned-group session is unavailable. Return to the parent group and mint a new session with an active key." : `No active keys for this ${entityType}.`) }) : /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3 pb-1 space-y-2", children: [
+      keysLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-border-strong border-t-transparent" }) }) : keysError ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 px-4 py-3", children: keysError }) : availableKeys.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-muted text-center py-5", children: ownedSignerState.error ?? (ownedSignerBinding ? "The personal key bound to this owned-group session is unavailable. Return to the parent group and mint a new session with an active key." : `No active keys for this ${entityType}.`) }) : /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3 pb-1 space-y-2", children: [
         /* @__PURE__ */ jsx(SectionLabel, { children: "Sign with" }),
         /* @__PURE__ */ jsx("ul", { className: "max-h-40 overflow-y-auto divide-y divide-border-light", children: availableKeys.map((key) => {
           const isSelected = selectedKey?.id === key.id;
@@ -20091,7 +20042,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
           walletLabel(walletKindFromKey(selectedKey)),
           " will open to sign."
         ] }),
-        ownedSignerBinding && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-cyan-200", children: [
+        ownedSignerBinding && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-azure dark:text-cyan-200", children: [
           "This owned-group request is cryptographically bound to this personal key (",
           ownedSignerBinding.signerCustody,
           "). Choose a different key by returning to the parent group and minting a new child session."
@@ -20167,8 +20118,8 @@ function InspectFooter({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 border-t border-border-light bg-raised px-3 py-3 space-y-2.5", children: [
-    awaitingSignature && onSwitchToSign && /* @__PURE__ */ jsxs("div", { className: "rounded-[18px] border border-amber-300/[0.20] bg-amber-950/[0.12] px-3 py-2 flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[12px] text-amber-100/[0.82]", children: "This message is now awaiting your signature." }),
+    awaitingSignature && onSwitchToSign && /* @__PURE__ */ jsxs("div", { className: "rounded-[18px] border border-status-warning-line dark:border-amber-300/[0.20] bg-status-warning-bg dark:bg-amber-950/[0.12] px-3 py-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[12px] text-status-warning-text dark:text-amber-100/[0.82]", children: "This message is now awaiting your signature." }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -20197,7 +20148,7 @@ function InspectFooter({
                 href: txExplorerUrl,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "text-blue-300/[0.90] hover:text-blue-200 hover:underline underline-offset-2 transition-colors",
+                className: "text-azure dark:text-blue-300/[0.90] hover:text-azure-deep dark:hover:text-blue-200 hover:underline underline-offset-2 transition-colors",
                 children: [
                   formatTxHashShort(txHash),
                   /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ml-0.5 text-[9px] align-middle opacity-70", children: "\u2197" })
@@ -20223,7 +20174,7 @@ Opens in block explorer` : txHash
       ] }),
       message.response?.error && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase tracking-[0.13em] text-text-muted mb-0.5", children: "Error" }),
-        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-red-200 break-words", children: message.response.error })
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 break-words", children: message.response.error })
       ] }),
       reexecutions.length > 0 && /* @__PURE__ */ jsxs("details", { children: [
         /* @__PURE__ */ jsxs("summary", { className: "text-[11px] uppercase tracking-[0.12em] text-text-muted cursor-pointer hover:text-text-primary transition-colors", children: [
@@ -20237,7 +20188,7 @@ Opens in block explorer` : txHash
             className: "text-[11px] rounded-[10px] border border-border-light px-2 py-1 bg-surface-alt",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: r.success ? "text-emerald-300/[0.90]" : "text-red-200", children: r.success ? "Succeeded" : "Failed" }),
+                /* @__PURE__ */ jsx("span", { className: r.success ? "text-status-success-text dark:text-emerald-300/[0.90]" : "text-status-error-text dark:text-red-200", children: r.success ? "Succeeded" : "Failed" }),
                 /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: formatRelativeTime(r.attempted_at) })
               ] }),
               r.error && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-text-secondary break-words", children: r.error })
@@ -20247,7 +20198,7 @@ Opens in block explorer` : txHash
         )) })
       ] })
     ] }),
-    actionError && /* @__PURE__ */ jsx("div", { className: "rounded-[16px] border border-red-300/[0.24] bg-red-950/[0.18] px-3 py-2 text-[11px] text-red-100", children: actionError }),
+    actionError && /* @__PURE__ */ jsx("div", { className: "rounded-[16px] border border-status-error-line dark:border-red-300/[0.24] bg-status-error-bg dark:bg-red-950/[0.18] px-3 py-2 text-[11px] text-status-error-text dark:text-red-100", children: actionError }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -20630,8 +20581,10 @@ function SignatureWorkflow({
   ] });
 }
 var PLACEMENT_CLASSES = {
-  "top-left": "top-4 left-4",
-  "top-right": "top-4 right-4",
+  // The top corners clear the status bar of a home-screen install (zero
+  // in a browser tab).
+  "top-left": "top-[calc(1rem+env(safe-area-inset-top))] left-4",
+  "top-right": "top-[calc(1rem+env(safe-area-inset-top))] right-4",
   "bottom-left": "bottom-4 left-4",
   "bottom-right": "bottom-4 right-4"
 };
@@ -23062,7 +23015,7 @@ function SecurityPage() {
                     rotateStep === "added" || rotateStep === "removing" || rotateStep === "remove-pending" || rotateStep === "done" ? "\u2713 " : "1. ",
                     "Add new key"
                   ] }),
-                  /* @__PURE__ */ jsx("span", { children: "\u2192" }),
+                  /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "h-3 w-3" }),
                   /* @__PURE__ */ jsxs("span", { className: rotateStep === "added" || rotateStep === "removing" || rotateStep === "remove-pending" ? "text-text-primary font-medium" : "", children: [
                     rotateStep === "done" ? "\u2713 " : "2. ",
                     "Remove old key"
@@ -23984,18 +23937,18 @@ var GroupsView = ({
     ] }),
     error && /* @__PURE__ */ jsx(ErrorBanner, { children: error }),
     delegationSession?.kind === "owned" ? /* @__PURE__ */ jsxs("div", { className: "rounded-[22px] border border-cyan-300/[0.18] bg-cyan-400/[0.07] px-3.5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-cyan-300/80", children: "Account ownership path" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-azure dark:text-cyan-300/80", children: "Account ownership path" }),
       /* @__PURE__ */ jsxs(
         "div",
         {
           className: "mt-2 flex min-w-0 items-center gap-2",
           "aria-label": `${sourceGroup?.name ?? "Owning group"} is operating ${activeOwnedGroup?.name ?? "owned group"}`,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-white/[0.08] bg-white/[0.035] px-2.5 py-1.5 text-[11px] font-semibold text-text-secondary", children: "You" }),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-white/[0.08] bg-white/[0.035] px-2.5 py-1.5 text-[11px] font-semibold text-text-secondary", children: sourceGroup?.name ?? compactGroupId(delegationSession.parentGroupId) }),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-cyan-300/[0.18] bg-cyan-300/[0.08] px-2.5 py-1.5 text-[11px] font-semibold text-cyan-200", children: activeOwnedGroup?.name ?? compactGroupId(delegationSession.currentGroupId) })
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-border-default dark:border-white/[0.08] bg-chip dark:bg-white/[0.035] px-2.5 py-1.5 text-[11px] font-semibold text-text-secondary", children: "You" }),
+            /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 text-azure dark:text-cyan-300/70" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-border-default dark:border-white/[0.08] bg-chip dark:bg-white/[0.035] px-2.5 py-1.5 text-[11px] font-semibold text-text-secondary", children: sourceGroup?.name ?? compactGroupId(delegationSession.parentGroupId) }),
+            /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 text-azure dark:text-cyan-300/70" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate rounded-lg border border-azure-line dark:border-cyan-300/[0.18] bg-azure-tint dark:bg-cyan-300/[0.08] px-2.5 py-1.5 text-[11px] font-semibold text-azure dark:text-cyan-200", children: activeOwnedGroup?.name ?? compactGroupId(delegationSession.currentGroupId) })
           ]
         }
       ),
@@ -24007,7 +23960,7 @@ var GroupsView = ({
             type: "button",
             onClick: () => void handleReturnToParent(),
             disabled: busyId === `parent:${delegationSession.parentGroupId}`,
-            className: "rounded-full border border-cyan-300/[0.16] bg-cyan-300/[0.08] px-3 py-1.5 text-[11px] font-semibold text-cyan-200 transition-colors hover:bg-cyan-300/[0.13] disabled:opacity-45",
+            className: "rounded-full border border-azure-line dark:border-cyan-300/[0.16] bg-azure-tint dark:bg-cyan-300/[0.08] px-3 py-1.5 text-[11px] font-semibold text-azure dark:text-cyan-200 transition-colors hover:bg-azure-muted dark:hover:bg-cyan-300/[0.13] disabled:opacity-45",
             children: busyId === `parent:${delegationSession.parentGroupId}` ? "Returning..." : `Return to ${sourceGroup?.name ?? "owning group"}`
           }
         ),
@@ -24023,7 +23976,7 @@ var GroupsView = ({
         )
       ] })
     ] }) : actingAsAnyGroup ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-[22px] border border-amber-300/[0.18] bg-amber-400/[0.08] px-3.5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]", children: [
-      /* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 text-[12px] font-semibold leading-5 text-amber-300", children: [
+      /* @__PURE__ */ jsxs("p", { className: "min-w-0 flex-1 text-[12px] font-semibold leading-5 text-status-warning-text dark:text-amber-300", children: [
         "Acting as ",
         sourceGroup?.name ?? "a group",
         ". Operations use its direct delegation token."
@@ -24358,7 +24311,7 @@ function OwnedGroupRow({
   return /* @__PURE__ */ jsxs("li", { className: "px-3.5 py-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-[11px] font-semibold text-text-secondary", children: sourceName }),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
+      /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 text-azure dark:text-cyan-300/70" }),
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] font-semibold text-text-primary", children: projection.group.name })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-3", children: [
@@ -24369,7 +24322,7 @@ function OwnedGroupRow({
           type: "button",
           onClick: onSwitch,
           disabled: busy,
-          className: "shrink-0 rounded-full border border-cyan-300/[0.16] bg-cyan-300/[0.08] px-3 py-1.5 text-[11px] font-semibold text-cyan-200 transition-colors hover:bg-cyan-300/[0.13] disabled:cursor-not-allowed disabled:opacity-45",
+          className: "shrink-0 rounded-full border border-azure-line dark:border-cyan-300/[0.16] bg-azure-tint dark:bg-cyan-300/[0.08] px-3 py-1.5 text-[11px] font-semibold text-azure dark:text-cyan-200 transition-colors hover:bg-azure-muted dark:hover:bg-cyan-300/[0.13] disabled:cursor-not-allowed disabled:opacity-45",
           children: busy ? "Checking ownership..." : `Operate as ${projection.group.name}`
         }
       )
@@ -24856,7 +24809,7 @@ function PlusIcon() {
 }
 function RoleBadge({ role }) {
   const label = normalizeRole(role);
-  const tone = label === "owner" ? "bg-orange-500/[0.16] text-orange-300" : label === "admin" ? "bg-blue-500/[0.16] text-blue-300" : "bg-chip text-text-secondary";
+  const tone = label === "owner" ? "bg-orange-500/[0.16] text-primary dark:text-orange-300" : label === "admin" ? "bg-blue-500/[0.16] text-azure dark:text-blue-300" : "bg-chip text-text-secondary";
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -24998,7 +24951,7 @@ function ActiveEnvironmentBadge({
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 px-1", children: [
       /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-text-muted", children: "Mode" }),
       /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-right text-[9px] text-text-muted", children: [
-        environment.mode === "unknown" && /* @__PURE__ */ jsx("span", { className: "mr-1.5 font-semibold text-amber-400", children: "Unconfigured" }),
+        environment.mode === "unknown" && /* @__PURE__ */ jsx("span", { className: "mr-1.5 font-semibold text-status-warning-text dark:text-amber-400", children: "Unconfigured" }),
         environment.network,
         environment.chainId && /* @__PURE__ */ jsx("span", { className: "ml-1.5 font-mono text-text-secondary", children: environment.chainId })
       ] })
@@ -25012,7 +24965,7 @@ function ActiveEnvironmentBadge({
           /* @__PURE__ */ jsxs(
             "span",
             {
-              className: `inline-flex items-center gap-1.5 text-[11px] font-semibold ${environment.mode === "test" ? "text-amber-400" : environment.mode === "live" ? "text-emerald-400" : "text-text-secondary"}`,
+              className: `inline-flex items-center gap-1.5 text-[11px] font-semibold ${environment.mode === "test" ? "text-status-warning-text dark:text-amber-400" : environment.mode === "live" ? "text-status-success-text dark:text-emerald-400" : "text-text-secondary"}`,
               children: [
                 /* @__PURE__ */ jsx(
                   "span",
@@ -25056,7 +25009,7 @@ function ActiveEnvironmentBadge({
                   void switchTo(option);
                 }
               },
-              className: `flex min-h-[34px] min-w-0 items-center justify-center gap-1.5 rounded-lg border px-2 text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 disabled:cursor-default ${option.active ? test ? "border-amber-500/40 bg-raised text-amber-400 focus-visible:ring-amber-500/40" : "border-emerald-500/40 bg-raised text-emerald-400 focus-visible:ring-emerald-500/40" : unavailable ? "border-transparent text-text-muted opacity-50" : "border-transparent text-text-secondary hover:bg-raised-hover hover:text-text-primary focus-visible:ring-border-strong"}`,
+              className: `flex min-h-[34px] min-w-0 items-center justify-center gap-1.5 rounded-lg border px-2 text-[11px] font-medium transition-colors focus:outline-none focus-visible:ring-2 disabled:cursor-default ${option.active ? test ? "border-amber-500/40 bg-raised text-status-warning-text dark:text-amber-400 focus-visible:ring-amber-500/40" : "border-emerald-500/40 bg-raised text-status-success-text dark:text-emerald-400 focus-visible:ring-emerald-500/40" : unavailable ? "border-transparent text-text-muted opacity-50" : "border-transparent text-text-secondary hover:bg-raised-hover hover:text-text-primary focus-visible:ring-border-strong"}`,
               children: busy ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 option.active && /* @__PURE__ */ jsx(
                   "span",
@@ -25127,7 +25080,7 @@ function ActiveEnvironmentBadge({
       "div",
       {
         role: "alert",
-        className: "mt-2 rounded-xl border border-red-500/25 bg-red-500/[0.07] px-3 py-2 text-[10px] leading-4 text-red-400",
+        className: "mt-2 rounded-xl border border-status-error-line dark:border-red-500/25 bg-status-error-bg dark:bg-red-500/[0.07] px-3 py-2 text-[10px] leading-4 text-status-error-text dark:text-red-400",
         children: error
       }
     )
@@ -25822,7 +25775,7 @@ function WalletMenu({
           onClick: onOpenActors,
           className: "flex min-h-[52px] w-full items-center gap-3 px-4 py-2 text-left text-[14px] font-semibold text-text-primary transition-colors hover:bg-raised-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400/70",
           children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-lg bg-orange-500/10 text-orange-400", children: activeActor?.kind === "self" ? /* @__PURE__ */ jsx(IconUser, {}) : /* @__PURE__ */ jsx(IconBuilding, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 text-primary dark:text-orange-400", children: activeActor?.kind === "self" ? /* @__PURE__ */ jsx(IconUser, {}) : /* @__PURE__ */ jsx(IconBuilding, {}) }),
             /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsx("span", { className: "block truncate", children: activeActor?.label ?? userName }),
               /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[10px] font-medium capitalize text-text-muted", children: activeActor?.kind ?? "self" })
@@ -25837,7 +25790,7 @@ function WalletMenu({
       {
         type: "button",
         onClick: onSignOut,
-        className: "mt-3 flex min-h-[48px] w-full items-center justify-center gap-2 rounded-[24px] bg-red-500/10 px-4 py-3 text-[14px] font-semibold text-red-400 transition-colors hover:bg-red-500/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400/70",
+        className: "mt-3 flex min-h-[48px] w-full items-center justify-center gap-2 rounded-[24px] bg-status-error-bg dark:bg-red-500/10 px-4 py-3 text-[14px] font-semibold text-status-error-text dark:text-red-400 transition-colors hover:bg-red-500/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400/70",
         children: [
           /* @__PURE__ */ jsx(IconSignOut, {}),
           "Sign out"
@@ -25869,7 +25822,7 @@ function WalletMenuRow({
           {
             className: cx4(
               "mr-3 inline-flex h-8 w-8 items-center justify-center rounded-lg",
-              urgent ? "bg-violet-500/20 text-orange-400" : active ? "bg-surface-alt text-text-secondary" : "bg-surface-alt text-text-muted"
+              urgent ? "bg-violet-500/20 text-primary dark:text-orange-400" : active ? "bg-surface-alt text-text-secondary" : "bg-surface-alt text-text-muted"
             ),
             children: item.icon
           }
@@ -26109,7 +26062,7 @@ function DirectoryPane({
         {
           type: "button",
           onClick: () => setQuery(""),
-          className: "mt-2 min-h-[44px] rounded-xl px-3 text-[12px] font-semibold text-orange-400 hover:bg-orange-400/10",
+          className: "mt-2 min-h-[44px] rounded-xl px-3 text-[12px] font-semibold text-primary dark:text-orange-400 hover:bg-primary/10 dark:hover:bg-orange-400/10",
           children: "Clear search"
         }
       )
@@ -28039,7 +27992,7 @@ var BillingCenter = ({ dense = false }) => {
   if (notConfigured) {
     return /* @__PURE__ */ jsxs("div", { className: outerClass, children: [
       !dense && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsxs("h1", { className: "text-lg font-semibold text-text-primary", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "text-lg font-semibold text-text-primary max-sm:sr-only", children: [
           "Usage & billing",
           !isLiveMode() && paymentsUrlMap() && /* @__PURE__ */ jsx("span", { className: "ml-2 align-middle inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-amber-500/15 text-amber-600 ring-1 ring-amber-500/40", children: "Test mode" })
         ] }),
@@ -28125,7 +28078,7 @@ var BillingCenter = ({ dense = false }) => {
   const recoveryAction = summary ? billingRecoveryAction(summary) : null;
   return /* @__PURE__ */ jsxs("div", { className: outerClass, children: [
     !dense && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxs("h1", { className: "text-lg font-semibold text-text-primary", children: [
+      /* @__PURE__ */ jsxs("h1", { className: "text-lg font-semibold text-text-primary max-sm:sr-only", children: [
         "Usage & billing",
         !isLiveMode() && paymentsUrlMap() && /* @__PURE__ */ jsx("span", { className: "ml-2 align-middle inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider bg-amber-500/15 text-amber-600 ring-1 ring-amber-500/40", children: "Test mode" })
       ] }),
@@ -29702,7 +29655,7 @@ var VerificationDialog = ({
             type: "button",
             onClick: () => setActiveProvider(null),
             className: "mb-3 text-[12px] text-text-secondary hover:text-text-primary",
-            children: "\u2190 Choose a different provider"
+            children: "\u2039 Choose a different provider"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -29847,7 +29800,7 @@ function BusinessVerificationSection({
   };
   const copy = STATUS_COPY[status] ?? STATUS_COPY.unverified;
   const impl = flowInstance ? resolveKycInstance(config, flowInstance) : null;
-  return /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4 space-y-3", children: [
+  return /* @__PURE__ */ jsxs("section", { className: "rounded-lg border border-border-default dark:border-white/[0.07] bg-raised dark:bg-white/[0.02] p-4 space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Business verification" }),
       /* @__PURE__ */ jsx(
@@ -29865,7 +29818,7 @@ function BusinessVerificationSection({
           type: "button",
           onClick: () => setFlowInstance(null),
           className: "mb-3 text-[12px] text-text-secondary hover:text-text-primary",
-          children: "\u2190 Back"
+          children: "\u2039 Back"
         }
       ),
       /* @__PURE__ */ jsx(