@yieldfabric/wallet 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -5353,7 +5353,7 @@ var init_SignupFlow = __esm({
     };
     AvererSidebar = ({ onError }) => {
       const navigate = useWalletNavigate();
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-10", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(YieldFabricLockup, { size: 32 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:block space-y-3 max-w-[260px]", children: [
@@ -5962,7 +5962,7 @@ function clearDynamicSession() {
 init_WalletConfigContext();
 var WalletAuthContext = React54.createContext(void 0);
 function WalletAuthProvider({ children }) {
-  const { onSessionBootstrapped } = useWalletConfig();
+  const { onSessionBootstrapped, onBeforeLogout } = useWalletConfig();
   const [user, setUser] = React54.useState(null);
   const [isLoading, setIsLoading] = React54.useState(true);
   const [error, setError] = React54.useState(null);
@@ -6055,6 +6055,7 @@ function WalletAuthProvider({ children }) {
       setIsLoading(true);
       setError(null);
       tokenRenewalService.stopRenewal();
+      await Promise.resolve().then(() => onBeforeLogout?.()).catch(() => void 0);
       await exports.authService.logout();
       clearDynamicSession();
       setUser(null);
@@ -6070,6 +6071,7 @@ function WalletAuthProvider({ children }) {
       setIsLoading(true);
       setError(null);
       tokenRenewalService.stopRenewal();
+      await Promise.resolve().then(() => onBeforeLogout?.()).catch(() => void 0);
       await exports.authService.logoutAll();
       clearDynamicSession();
       setUser(null);
@@ -9317,11 +9319,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",
@@ -10385,7 +10387,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__ */ jsxRuntime.jsx(
     "div",
     {
@@ -10524,7 +10526,7 @@ function OnboardingChoosePath({ chrome } = {}) {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-[520px] text-center space-y-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[18px] text-text-primary font-medium", children: messages.choosePath.header }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-text-secondary", children: messages.choosePath.subheader }),
-      configError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
+      configError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-[480px] space-y-2.5", children: [
       avererEnabled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -12273,7 +12275,7 @@ function OnboardingChooseMethod({ chrome } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsx(StepShell, { chrome, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[16px] text-text-primary", children: messages.chooseMethod.header }),
-      configError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-orange-400 mt-2", children: "Provider config unavailable \u2014 falling back to email only." })
+      configError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       enabled.map(({ id, impl }) => {
@@ -13066,7 +13068,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
@@ -13119,7 +13121,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 },
@@ -15575,7 +15577,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: [
@@ -17986,7 +17988,7 @@ var OnboardingPolicySection = ({
   ]);
   if (hidden || loading || deployLoading || platformActive === null) return null;
   if (platformActive === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }) }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "Couldn't confirm whether this group is used as a platform." }),
@@ -18003,12 +18005,12 @@ var OnboardingPolicySection = ({
     ] });
   }
   if (!platformActive) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }) }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Platform onboarding" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-text-muted", children: "The path people take from first visit to transacting on this platform." })
@@ -18793,7 +18795,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"
   };
@@ -19784,14 +19786,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__ */ jsxRuntime.jsx("p", { className: "text-[13px] font-medium text-red-100 mb-1", children: "Couldn't load transaction" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] font-medium text-status-error-text dark:text-red-100 mb-1", children: "Couldn't load transaction" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-text-secondary max-w-sm", children: error }),
-          cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-red-200 mt-3", children: cancelError })
+          cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 mt-3", children: cancelError })
         ]
       }
     );
@@ -19806,7 +19808,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
   })();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col h-full text-text-primary", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 px-4 py-4", children: [
-      reviewWarning && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         "button",
@@ -19995,7 +19997,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
                       ] })
                     }
                   ),
-                  selector && !methodName && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-[12px]", children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: "Calldata" }),
@@ -20054,7 +20056,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
       ] })
     ] }) }),
     mode === "sign" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 border-t border-border-light bg-surface-alt", children: [
-      keysLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-border-strong border-t-transparent" }) }) : keysError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-red-200 px-4 py-3", children: keysError }) : availableKeys.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-3 pb-1 space-y-2", children: [
+      keysLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-border-strong border-t-transparent" }) }) : keysError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 px-4 py-3", children: keysError }) : availableKeys.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-3 pb-1 space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Sign with" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "max-h-40 overflow-y-auto divide-y divide-border-light", children: availableKeys.map((key) => {
           const isSelected = selectedKey?.id === key.id;
@@ -20099,7 +20101,7 @@ function SignaturePreviewDrawer({ message, onClose, onSignatureConfirmed, userId
           walletLabel(walletKindFromKey(selectedKey)),
           " will open to sign."
         ] }),
-        ownedSignerBinding && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-cyan-200", children: [
+        ownedSignerBinding && /* @__PURE__ */ jsxRuntime.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."
@@ -20175,8 +20177,8 @@ function InspectFooter({
     }
   };
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-amber-100/[0.82]", children: "This message is now awaiting your signature." }),
+    awaitingSignature && onSwitchToSign && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-status-warning-text dark:text-amber-100/[0.82]", children: "This message is now awaiting your signature." }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -20205,7 +20207,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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ml-0.5 text-[9px] align-middle opacity-70", children: "\u2197" })
@@ -20231,7 +20233,7 @@ Opens in block explorer` : txHash
       ] }),
       message.response?.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-medium uppercase tracking-[0.13em] text-text-muted mb-0.5", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-red-200 break-words", children: message.response.error })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-status-error-text dark:text-red-200 break-words", children: message.response.error })
       ] }),
       reexecutions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "text-[11px] uppercase tracking-[0.12em] text-text-muted cursor-pointer hover:text-text-primary transition-colors", children: [
@@ -20245,7 +20247,7 @@ Opens in block explorer` : txHash
             className: "text-[11px] rounded-[10px] border border-border-light px-2 py-1 bg-surface-alt",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: r.success ? "text-emerald-300/[0.90]" : "text-red-200", children: r.success ? "Succeeded" : "Failed" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-muted", children: formatRelativeTime(r.attempted_at) })
               ] }),
               r.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-text-secondary break-words", children: r.error })
@@ -20255,7 +20257,7 @@ Opens in block explorer` : txHash
         )) })
       ] })
     ] }),
-    actionError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -20638,8 +20640,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"
 };
@@ -23992,18 +23996,18 @@ var GroupsView = ({
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorBanner, { children: error }),
     delegationSession?.kind === "owned" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-cyan-300/80", children: "Account ownership path" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-azure dark:text-cyan-300/80", children: "Account ownership path" }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
+            /* @__PURE__ */ jsxRuntime.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) })
           ]
         }
       ),
@@ -24015,7 +24019,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"}`
           }
         ),
@@ -24031,7 +24035,7 @@ var GroupsView = ({
         )
       ] })
     ] }) : actingAsAnyGroup ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: "min-w-0 flex-1 text-[12px] font-semibold leading-5 text-amber-300", children: [
+      /* @__PURE__ */ jsxRuntime.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."
@@ -24366,7 +24370,7 @@ function OwnedGroupRow({
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-3.5 py-3", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[11px] font-semibold text-text-secondary", children: sourceName }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-cyan-300/70", children: "\u2192" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] font-semibold text-text-primary", children: projection.group.name })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between gap-3", children: [
@@ -24377,7 +24381,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}`
         }
       )
@@ -24864,7 +24868,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__ */ jsxRuntime.jsx(
     "span",
     {
@@ -25006,7 +25010,7 @@ function ActiveEnvironmentBadge({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 px-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-text-muted", children: "Mode" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 truncate text-right text-[9px] text-text-muted", children: [
-        environment.mode === "unknown" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1.5 font-semibold text-amber-400", children: "Unconfigured" }),
+        environment.mode === "unknown" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1.5 font-semibold text-status-warning-text dark:text-amber-400", children: "Unconfigured" }),
         environment.network,
         environment.chainId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5 font-mono text-text-secondary", children: environment.chainId })
       ] })
@@ -25020,7 +25024,7 @@ function ActiveEnvironmentBadge({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                   "span",
@@ -25064,7 +25068,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__ */ jsxRuntime.jsx(Spinner, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 option.active && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
@@ -25135,7 +25139,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
       }
     )
@@ -25830,7 +25834,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconUser, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconBuilding, {}) }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconUser, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconBuilding, {}) }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: activeActor?.label ?? userName }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block text-[10px] font-medium capitalize text-text-muted", children: activeActor?.kind ?? "self" })
@@ -25845,7 +25849,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__ */ jsxRuntime.jsx(IconSignOut, {}),
           "Sign out"
@@ -25877,7 +25881,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
           }
@@ -26117,7 +26121,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"
         }
       )
@@ -28047,7 +28051,7 @@ var BillingCenter = ({ dense = false }) => {
   if (notConfigured) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: outerClass, children: [
       !dense && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-lg font-semibold text-text-primary", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-lg font-semibold text-text-primary max-sm:sr-only", children: [
           "Usage & billing",
           !isLiveMode() && paymentsUrlMap() && /* @__PURE__ */ jsxRuntime.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" })
         ] }),
@@ -28133,7 +28137,7 @@ var BillingCenter = ({ dense = false }) => {
   const recoveryAction = summary ? billingRecoveryAction(summary) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: outerClass, children: [
     !dense && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-lg font-semibold text-text-primary", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-lg font-semibold text-text-primary max-sm:sr-only", children: [
         "Usage & billing",
         !isLiveMode() && paymentsUrlMap() && /* @__PURE__ */ jsxRuntime.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" })
       ] }),
@@ -29855,7 +29859,7 @@ function BusinessVerificationSection({
   };
   const copy = STATUS_COPY[status] ?? STATUS_COPY.unverified;
   const impl = flowInstance ? resolveKycInstance(config, flowInstance) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-lg border border-white/[0.07] bg-white/[0.02] p-4 space-y-3", children: [
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-text-secondary", children: "Business verification" }),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.d.cts

@@ -524,6 +524,10 @@ interface WalletRuntimeConfig extends ModeConfig {
      *  cache reset + `userChanged` event dispatch here. Hosts that
      *  don't use Apollo can omit this. */
     onSessionBootstrapped?: (userId: string) => void | Promise<void>;
+    /** Runs BEFORE the session is torn down on `logout` / `logoutAll`,
+     *  while the token is still valid — the host forgets this device's push
+     *  subscription here. Failures are swallowed; sign-out always proceeds. */
+    onBeforeLogout?: () => void | Promise<void>;
     /** Optional toast / error reporting hooks for wallet-internal
      *  events that the host might want to surface (background poller
      *  failures, queue subscription drops, etc.). */

package/dist/index.d.ts

@@ -524,6 +524,10 @@ interface WalletRuntimeConfig extends ModeConfig {
      *  cache reset + `userChanged` event dispatch here. Hosts that
      *  don't use Apollo can omit this. */
     onSessionBootstrapped?: (userId: string) => void | Promise<void>;
+    /** Runs BEFORE the session is torn down on `logout` / `logoutAll`,
+     *  while the token is still valid — the host forgets this device's push
+     *  subscription here. Failures are swallowed; sign-out always proceeds. */
+    onBeforeLogout?: () => void | Promise<void>;
     /** Optional toast / error reporting hooks for wallet-internal
      *  events that the host might want to surface (background poller
      *  failures, queue subscription drops, etc.). */

package/dist/index.js

@@ -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: [
@@ -5954,7 +5954,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 +6047,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 +6063,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 +9311,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",
@@ -10377,7 +10379,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 +10518,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(
@@ -12265,7 +12267,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 +13060,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 +13113,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 },
@@ -15567,7 +15569,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 +17980,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 +17997,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 +18787,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 +19778,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 +19800,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 +19989,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 +20048,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 +20093,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 +20169,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 +20199,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 +20225,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 +20239,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 +20249,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 +20632,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"
 };
@@ -23984,18 +23988,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("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
+            /* @__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("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
+            /* @__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 +24011,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 +24027,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 +24362,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("span", { "aria-hidden": true, className: "shrink-0 text-[12px] text-azure dark:text-cyan-300/70", children: "\u2192" }),
       /* @__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 +24373,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 +24860,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 +25002,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 +25016,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 +25060,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 +25131,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 +25826,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 +25841,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 +25873,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 +26113,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 +28043,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 +28129,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" })
       ] }),
@@ -29847,7 +29851,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(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yieldfabric/wallet",
-  "version": "0.2.1",
-  "description": "Reusable YieldFabric wallet \u2014 login, signing, profile, and key management",
+  "version": "0.2.2",
+  "description": "Reusable YieldFabric wallet — login, signing, profile, and key management",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "YieldFabric Technologies Ltd",
   "repository": {