@yieldfabric/wallet 0.2.0 → 0.2.2

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/20", 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);
@@ -8786,6 +8788,16 @@ var WalletCenterContext = createContext(null);
 function WalletCenterProvider({ children }) {
   const [isOpen, setIsOpen] = useState(false);
   const [requestedView, setRequestedView] = useState("menu");
+  const [host, setHostElement] = useState(null);
+  const [hostOptions, setHostOptions] = useState({});
+  const [hostTitle, setHostTitle] = useState(null);
+  const setHost = useCallback((next) => {
+    setHostElement((current) => {
+      if (current === next) return current;
+      if (!next) setHostTitle(null);
+      return next;
+    });
+  }, []);
   const openWalletCenter = useCallback((view = "menu") => {
     setRequestedView(view);
     setIsOpen(true);
@@ -8795,8 +8807,8 @@ function WalletCenterProvider({ children }) {
     setRequestedView("menu");
   }, []);
   const value = useMemo(
-    () => ({ isOpen, requestedView, openWalletCenter, closeWalletCenter }),
-    [isOpen, requestedView, openWalletCenter, closeWalletCenter]
+    () => ({ isOpen, requestedView, openWalletCenter, closeWalletCenter, host, setHost, hostOptions, setHostOptions, hostTitle, setHostTitle }),
+    [isOpen, requestedView, openWalletCenter, closeWalletCenter, host, setHost, hostOptions, hostTitle]
   );
   return /* @__PURE__ */ jsx(WalletCenterContext.Provider, { value, children });
 }
@@ -8824,53 +8836,105 @@ function RedirectTo({ href, replace = true }) {
   return null;
 }
 
-// src/core/entityEvents.ts
-init_tokenManager();
-init_config();
-function subscribeEntityEvents(entityId, onEvent, onError) {
-  let eventSource = null;
-  let reconnectTimeout = null;
-  let attempts = 0;
+// src/core/jsonEventStream.ts
+function subscribeJsonEvents(options) {
   let closed = false;
-  function connect() {
+  let retry = 0;
+  let timer;
+  let controller;
+  const connect = async () => {
     if (closed) return;
-    const token = tokenManager.getCurrentToken();
-    if (!token) {
-      onError?.(new Error("No auth token for entity event stream"));
-      reconnectTimeout = setTimeout(connect, 5e3);
-      return;
-    }
-    const baseUrl = getPaymentsServiceUrl();
-    const url = `${baseUrl}/api/events/stream?entity_id=${encodeURIComponent(entityId)}&access_token=${encodeURIComponent(token)}`;
-    eventSource = new EventSource(url);
-    eventSource.onmessage = (e) => {
-      try {
-        onEvent(JSON.parse(e.data));
-      } catch {
-      }
-    };
-    eventSource.onopen = () => {
-      attempts = 0;
+    const attempt = new AbortController();
+    controller = attempt;
+    let reader;
+    let stall;
+    const renewDeadline = () => {
+      if (stall) clearTimeout(stall);
+      stall = setTimeout(() => attempt.abort(), 75e3);
     };
-    eventSource.onerror = () => {
-      eventSource?.close();
-      eventSource = null;
-      if (closed) return;
-      attempts++;
-      const delay2 = Math.min(1e3 * Math.pow(2, attempts - 1), 3e4);
-      reconnectTimeout = setTimeout(connect, delay2);
-      onError?.(new Error(`Entity SSE error, reconnecting in ${delay2}ms`));
-    };
-  }
-  connect();
+    try {
+      renewDeadline();
+      const token = options.token();
+      if (!token) throw new Error("Sign in to receive live updates.");
+      const response = await fetch(options.url(), {
+        headers: { Authorization: `Bearer ${token}`, Accept: "text/event-stream" },
+        signal: attempt.signal,
+        credentials: "omit",
+        cache: "no-store",
+        redirect: "error"
+      });
+      if (!response.ok || !response.headers.get("content-type")?.includes("text/event-stream") || !response.body) {
+        throw new Error(`Live updates unavailable (HTTP ${response.status}).`);
+      }
+      reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "", data = [], size = 0;
+      while (!closed) {
+        const part = await reader.read();
+        if (part.done) break;
+        renewDeadline();
+        buffer += decoder.decode(part.value, { stream: true });
+        for (; ; ) {
+          const end = buffer.search(/[\r\n]/);
+          if (end < 0 || buffer[end] === "\r" && end === buffer.length - 1) break;
+          const line = buffer.slice(0, end);
+          const delimiter = buffer[end] === "\r" && buffer[end + 1] === "\n" ? 2 : 1;
+          buffer = buffer.slice(end + delimiter);
+          size += line.length;
+          if (size > 262144) throw new Error("Live update exceeded its size limit.");
+          if (!line) {
+            if (data.length) {
+              let value;
+              try {
+                value = JSON.parse(data.join("\n"));
+              } catch {
+              }
+              if (value !== void 0 && !closed) {
+                retry = 0;
+                options.onEvent(value);
+              }
+            }
+            data = [];
+            size = 0;
+          } else if (line.startsWith("data:")) {
+            data.push(line.slice(5).replace(/^ /, ""));
+          }
+        }
+        if (buffer.length + size > 262144) throw new Error("Live update exceeded its size limit.");
+      }
+      if (!closed) throw new Error("Live updates disconnected.");
+    } catch (error) {
+      if (!closed) options.onError?.(error instanceof Error ? error : new Error("Live updates unavailable."));
+    } finally {
+      if (stall) clearTimeout(stall);
+      attempt.abort();
+      if (reader) {
+        void reader.cancel().catch(() => void 0);
+        reader.releaseLock();
+      }
+      if (!closed) timer = setTimeout(() => void connect(), Math.min(1e3 * 2 ** Math.min(retry++, 5), 3e4));
+    }
+  };
+  void connect();
   return () => {
     closed = true;
-    eventSource?.close();
-    eventSource = null;
-    if (reconnectTimeout) clearTimeout(reconnectTimeout);
+    if (timer) clearTimeout(timer);
+    controller?.abort();
   };
 }
 
+// src/core/entityEvents.ts
+init_tokenManager();
+init_config();
+function subscribeEntityEvents(entityId, onEvent, onError) {
+  return subscribeJsonEvents({
+    url: () => `${getPaymentsServiceUrl()}/api/events/stream?entity_id=${encodeURIComponent(entityId)}`,
+    token: () => tokenManager.getCurrentToken(),
+    onEvent,
+    onError
+  });
+}
+
 // src/core/globalNotificationService.ts
 var _GlobalNotificationService = class _GlobalNotificationService {
   constructor(callbacks) {
@@ -9247,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",
@@ -9382,7 +9446,7 @@ function CenterPrimaryButton({
   size = "sm",
   className = ""
 }) {
-  const sizeClasses2 = size === "md" ? "text-[12px] px-3 py-1.5" : "text-[11px] px-2.5 py-1";
+  const sizeClasses2 = size === "md" ? "text-[12px] px-3 py-1.5 max-lg:min-h-[44px] max-lg:px-4 max-lg:text-[13px]" : "text-[11px] px-2.5 py-1 max-lg:min-h-[44px] max-lg:px-4 max-lg:text-[13px]";
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -9391,7 +9455,7 @@ function CenterPrimaryButton({
       onClick,
       className: [
         "font-medium rounded-md transition-colors",
-        "bg-cta text-on-cta hover:bg-cta-hover",
+        "bg-cta text-on-cta hover:bg-cta-hover active:opacity-90",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         sizeClasses2,
         className
@@ -10315,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",
     {
@@ -10454,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(
@@ -11452,7 +11516,7 @@ function StripeProgressPanel({
         detail ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] leading-relaxed text-text-secondary/75", children: detail }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsx("div", { className: `h-full w-2/3 rounded-full ${delayed ? "bg-status-warning-text" : "bg-cta"} motion-safe:animate-pulse` }) })
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsx("div", { className: `h-full w-2/3 rounded-full ${delayed ? "bg-status-warning-text" : "bg-cta"} motion-safe:animate-pulse` }) })
   ] });
 }
 function StripeResultPanel({
@@ -11858,7 +11922,7 @@ function ProgressPanel({
           /* @__PURE__ */ jsx("h1", { className: "text-[16px] font-medium text-text-primary leading-snug", children: title }),
           /* @__PURE__ */ jsx("p", { className: "mt-1 text-[12px] leading-relaxed text-text-secondary", children: body })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsx(
           "div",
           {
             className: `h-full w-2/3 rounded-full motion-safe:animate-pulse ${delayed ? "bg-status-warning-text" : "bg-cta"}`
@@ -12203,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 }) => {
@@ -12996,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
@@ -13049,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 },
@@ -14927,7 +14991,7 @@ function RecoveryPanel({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "rounded-lg border border-status-warning-text/25 bg-status-warning-bg/80 px-3.5 py-3 text-status-warning-text",
+      className: "rounded-lg border border-status-warning-text/25 bg-status-warning-bg px-3.5 py-3 text-status-warning-text",
       role: "alert",
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsx("div", { className: `mt-0.5 h-8 w-8 shrink-0 rounded-full flex items-center justify-center ${iconClass}`, children: /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4", strokeWidth: 1.8 }) }),
@@ -15368,7 +15432,7 @@ function AddWalletsStep({ chrome } = {}) {
     showDynamic && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4",
+        className: "fixed inset-0 z-[10000] flex items-center justify-center bg-black/70 p-4",
         role: "dialog",
         "aria-modal": "true",
         children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-lg border border-border-default bg-surface p-4", children: [
@@ -15448,6 +15512,8 @@ var Drawer = ({
   useEffect(() => {
     if (!isOpen || typeof document === "undefined") return;
     const previouslyFocused = document.activeElement;
+    const bodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     const initialFocus = panelRef.current?.querySelector("[data-drawer-initial-focus]") ?? closeButtonRef.current;
     initialFocus?.focus();
     const handleKeyDown = (event) => {
@@ -15478,11 +15544,16 @@ var Drawer = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = bodyOverflow;
       previouslyFocused?.focus?.();
     };
   }, [isOpen, onClose]);
-  const widthClass = maxWidth === "sm" ? "w-full max-w-sm" : maxWidth === "md" ? "w-full max-w-md" : maxWidth === "lg" ? "w-full max-w-2xl" : maxWidth === "half" ? "w-1/2" : maxWidth === "full-mobile" ? "w-full xl:w-1/2" : maxWidth === "full" ? "w-full" : "w-full max-w-md";
-  const widthStyle = maxWidth === "lg" ? { width: "672px", maxWidth: "672px" } : maxWidth === "half" ? { width: "50vw", maxWidth: "50vw" } : maxWidth === "full-mobile" ? {} : {};
+  const widthClass = maxWidth === "sm" ? "w-full max-w-sm" : maxWidth === "md" ? "w-full max-w-md" : maxWidth === "lg" ? "w-full max-w-2xl" : maxWidth === "half" ? "w-full lg:w-1/2" : maxWidth === "full-mobile" ? "w-full xl:w-1/2" : maxWidth === "full" ? "w-full" : "w-full max-w-md";
+  const widthStyle = maxWidth === "lg" ? { width: "672px", maxWidth: "672px" } : (
+    // 'half' is a desk shape; a hard 50vw made it 187px on a phone. The
+    // class carries the split now, so there is no inline width to fight.
+    maxWidth === "half" ? {} : maxWidth === "full-mobile" ? {} : {}
+  );
   return /* @__PURE__ */ jsx(Fragment, { children: isOpen && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden z-[10000]", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -15498,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: [
@@ -15519,12 +15590,12 @@ var Drawer = ({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: `flex-1 px-3 pt-2 ${panelBg} ${fillHeight ? "flex flex-col overflow-hidden pb-0" : "overflow-y-auto pb-6"} ${contentClassName}`,
+              className: `flex-1 px-3 pt-2 ${panelBg} ${fillHeight ? "flex flex-col overflow-hidden pb-0" : "overflow-y-auto pb-[max(1.5rem,env(safe-area-inset-bottom))]"} ${contentClassName}`,
               style: contentStyle,
               children
             }
           ),
-          footer && /* @__PURE__ */ jsx("div", { className: `px-6 py-4 border-t border-border-default ${panelBg} flex-shrink-0 ${footerClassName}`, children: footer })
+          footer && /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 border-t border-border-default px-6 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] ${panelBg} ${footerClassName}`, children: footer })
         ]
       }
     ) })
@@ -16131,7 +16202,7 @@ var AccountOpeningPanel = ({ onContinue, continueLabel = "Continue" }) => {
           /* @__PURE__ */ jsx("h1", { className: "text-[16px] font-medium text-text-primary leading-snug", children: copy.title }),
           /* @__PURE__ */ jsx("p", { className: "mt-1 text-[12px] leading-relaxed text-text-secondary", children: showExit && !terminalFailure ? "This is taking longer than usual. We'll let you know as soon as it's ready \u2014 you can carry on in the meantime." : copy.body })
         ] }),
-        terminalFailure ? null : /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsx(
+        terminalFailure ? null : /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsx(
           "div",
           {
             className: `h-full w-2/3 rounded-full motion-safe:animate-pulse ${impatient ? "bg-status-warning-text" : "bg-cta"}`
@@ -17909,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." }),
@@ -17926,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." })
@@ -18716,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"
   };
@@ -19707,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 })
         ]
       }
     );
@@ -19729,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",
@@ -19918,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" }),
@@ -19977,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;
@@ -20022,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."
@@ -20098,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",
         {
@@ -20128,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" })
@@ -20154,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: [
@@ -20168,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 })
@@ -20178,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",
@@ -20514,14 +20585,14 @@ function SignatureWorkflow({
       {
         id: `signature-${pending.id}`,
         type: "action",
-        title: "Signature Required",
-        message: "A queued action is waiting for your signature.",
+        title: "Signature needed",
+        message: "Something is waiting for your signature.",
         duration: 0,
         showProgress: false,
         onClose: dismissPending,
         onClick: () => openSigner(pending),
         action: {
-          label: "Review & Sign",
+          label: "Review and sign",
           onClick: () => openSigner(pending)
         }
       }
@@ -20531,7 +20602,7 @@ function SignatureWorkflow({
       {
         isOpen: true,
         onClose: closeSigner,
-        title: currentMessage.data?.message_type ? `${currentMessage.data.message_type} \u2014 Sign` : "Sign Transaction",
+        title: currentMessage.data?.message_type ? `${humanizeMessageType(currentMessage.data.message_type)} \u2014 Sign` : "Sign this request",
         maxWidth: "lg",
         fillHeight: true,
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
@@ -20561,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"
 };
@@ -22160,10 +22233,10 @@ function SecurityPage() {
   const [generateDescription, setGenerateDescription] = useState("");
   const [freshApiKey, setFreshApiKey] = useState(null);
   const [freshApiKeyCopied, setFreshApiKeyCopied] = useState(false);
-  const refresh = useCallback(async () => {
+  const refresh = useCallback(async (opts) => {
     setError(null);
     try {
-      invalidateWalletCount();
+      if (opts?.invalidate !== false) invalidateWalletCount();
       const [k, l] = await Promise.all([
         listMyLoginKeys(),
         keysService.getLockdownStatus().catch(() => null)
@@ -22177,7 +22250,7 @@ function SecurityPage() {
     }
   }, []);
   useEffect(() => {
-    refresh();
+    void refresh({ invalidate: false });
   }, [refresh]);
   const refreshApiKeys = useCallback(async () => {
     try {
@@ -23015,7 +23088,7 @@ function SecurityPage() {
                       (account) => !(account.chain_id === activeChainId && account.wallet_address.toLowerCase() === target)
                     );
                     if (otherAccounts.length === 0) return null;
-                    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-status-warning-bg/30 border border-status-warning-text/30 px-3 py-2 space-y-1", children: [
+                    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-status-warning-bg border border-status-warning-text/30 px-3 py-2 space-y-1", children: [
                       /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-status-warning-text font-medium", children: [
                         "This key also owns ",
                         otherAccounts.length,
@@ -23330,7 +23403,7 @@ function RowGhostButton({
       type: "button",
       disabled,
       onClick,
-      className: "text-[11px] font-medium px-2.5 py-1 rounded-md text-text-secondary hover:text-text-primary hover:bg-chip disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+      className: "rounded-md px-2.5 py-1 text-[11px] font-medium text-text-secondary transition-colors hover:bg-chip hover:text-text-primary active:bg-chip-active disabled:cursor-not-allowed disabled:opacity-50 max-lg:min-h-[44px] max-lg:px-4 max-lg:text-[13px]",
       children
     }
   );
@@ -23346,7 +23419,7 @@ function RowNeutralButton({
       type: "button",
       disabled,
       onClick,
-      className: "text-[11px] font-medium px-2.5 py-1 rounded-md bg-chip text-text-primary hover:bg-chip-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+      className: "rounded-md bg-chip px-2.5 py-1 text-[11px] font-medium text-text-primary transition-colors hover:bg-chip-hover active:bg-chip-active disabled:cursor-not-allowed disabled:opacity-50 max-lg:min-h-[44px] max-lg:px-4 max-lg:text-[13px]",
       children
     }
   );
@@ -23915,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) })
           ]
         }
       ),
@@ -23938,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"}`
           }
         ),
@@ -23954,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."
@@ -24289,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: [
@@ -24300,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}`
         }
       )
@@ -24787,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",
     {
@@ -24929,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 })
       ] })
@@ -24943,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",
@@ -24987,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",
@@ -25058,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
       }
     )
@@ -25157,7 +25230,10 @@ var WalletCenterSurface = ({
   modules,
   actors,
   identity,
-  initialView = "menu"
+  initialView = "menu",
+  embedded = false,
+  backLabel = "Back",
+  onTitle
 }) => {
   const { pendingList, refreshPending } = useSignatureQueue();
   const {
@@ -25185,6 +25261,10 @@ var WalletCenterSurface = ({
   const cancelGuardRef = useRef(/* @__PURE__ */ new Map());
   const wasOpenRef = useRef(false);
   const walletRootRef = useRef(null);
+  const leaveSection = useCallback(() => {
+    if (embedded && initialView !== "menu") onClose();
+    else setSection("menu");
+  }, [embedded, initialView, onClose]);
   useEffect(() => {
     const justOpened = isOpen && !wasOpenRef.current;
     wasOpenRef.current = isOpen;
@@ -25202,9 +25282,9 @@ var WalletCenterSurface = ({
   useEffect(() => {
     if (!isOpen) return;
     if (activeBuiltinFor(section, modules) === "transactions" && pendingList.length === 0) {
-      setSection("menu");
+      leaveSection();
     }
-  }, [isOpen, modules, pendingList.length, section]);
+  }, [isOpen, leaveSection, modules, pendingList.length, section]);
   const delegatedGroupId = useMemo(() => {
     if (!delegationToken || typeof window === "undefined") return null;
     return window.localStorage.getItem("delegation_group_id");
@@ -25457,11 +25537,11 @@ var WalletCenterSurface = ({
     setActionError(null);
     try {
       await actor.onSelect();
-      setSection("menu");
+      leaveSection();
     } catch (error) {
       setActionError(error?.message ?? "Failed to switch signing context.");
     }
-  }, []);
+  }, [leaveSection]);
   const drawerTitle = useMemo(() => {
     if (selected) {
       const label = humanizeMessageType(selected.data?.message_type);
@@ -25469,11 +25549,117 @@ var WalletCenterSurface = ({
     }
     return "Wallet";
   }, [selected, selectedSource]);
+  const hostedTitle = !embedded ? null : selected ? drawerTitle : section === "actors" ? "Signing context" : activeModule?.label ?? null;
+  useEffect(() => {
+    if (!embedded) return void 0;
+    onTitle?.(hostedTitle);
+    return () => onTitle?.(null);
+  }, [embedded, hostedTitle, onTitle]);
   const isCompactView = !selected;
   const drawerPanelClass = isCompactView ? stripLayoutUtilities(walletCenterUi?.drawer?.panel, ["height"]) : walletCenterUi?.drawer?.panel;
   const drawerContentClass = isCompactView ? stripLayoutUtilities(walletCenterUi?.drawer?.content, ["overflow"]) : walletCenterUi?.drawer?.content;
-  const walletRootClass = isCompactView ? stripLayoutUtilities(walletCenterUi?.root, ["height", "overflow"]) : walletCenterUi?.root;
-  const walletMainClass = isCompactView ? stripLayoutUtilities(walletCenterUi?.main, ["height", "overflow"]) : walletCenterUi?.main;
+  const walletRootClass = embedded ? void 0 : isCompactView ? stripLayoutUtilities(walletCenterUi?.root, ["height", "overflow"]) : walletCenterUi?.root;
+  const walletMainClass = embedded ? void 0 : isCompactView ? stripLayoutUtilities(walletCenterUi?.main, ["height", "overflow"]) : walletCenterUi?.main;
+  const body = /* @__PURE__ */ jsx("div", { ref: walletRootRef, className: cx4(isCompactView ? "w-full" : "flex h-full overflow-hidden", walletRootClass), children: /* @__PURE__ */ jsx("div", { className: cx4(isCompactView ? "min-h-0 w-full" : "flex-1 min-h-0 overflow-hidden", walletMainClass), children: selected ? /* @__PURE__ */ jsx(
+    DetailPane,
+    {
+      message: selected,
+      source: selectedSource,
+      userId,
+      onBack: handleBackToList,
+      hideBack: embedded,
+      onSigned: async (m) => {
+        onSigned?.(m);
+        setSelected(null);
+        await refreshPending();
+      },
+      onRetry: handleRetry,
+      onSwitchToSign: () => setSelectedSource("pending"),
+      selectorRegistry,
+      addressLabels,
+      renderSimpleSummary
+    }
+  ) : section === "menu" ? /* @__PURE__ */ jsx(
+    WalletMenu,
+    {
+      identity: resolvedIdentity,
+      items: menuItems,
+      actors: resolvedActors,
+      actionError,
+      onSelectModule: handleSelectModule,
+      onOpenActors: () => setSection("actors"),
+      onClose: embedded ? void 0 : onClose,
+      onSignOut: handleSignOut
+    }
+  ) : section === "actors" ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
+    embedded ? null : /* @__PURE__ */ jsx(SectionHeader, { title: "Signing context", onBack: leaveSection }),
+    /* @__PURE__ */ jsx(
+      ActorsPane,
+      {
+        actors: resolvedActors,
+        error: actionError,
+        onSelect: handleSelectActor
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
+    embedded ? null : /* @__PURE__ */ jsx(SectionHeader, { title: activeModule?.label ?? "Wallet", onBack: leaveSection }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0", children: activeModule ? /* @__PURE__ */ jsx(
+      SectionPane,
+      {
+        module: activeModule,
+        panelContext,
+        pendingList,
+        busyId,
+        actionError,
+        onSelectPending: (m) => handleSelect(m, "pending"),
+        onSign: handleSign,
+        onCancel: handleCancel,
+        historyItems: filteredHistoryItems,
+        historyFilter,
+        historyLoading,
+        historyError,
+        historyHasMore: historyHasMore && historyItems.length < HISTORY_MAX_ITEMS,
+        historyAtCap: historyItems.length >= HISTORY_MAX_ITEMS,
+        historyLoadedOnce,
+        showHistoryFilters: !embedded,
+        onFilterChange: handleFilterChange,
+        onLoadMore: handleLoadMore,
+        onSelectHistory: (m) => handleSelect(m, "history"),
+        onRetry: handleRetryFromRow,
+        classNames: walletCenterUi
+      }
+    ) : /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "This wallet view is unavailable",
+        subtitle: "Return to the wallet menu and choose another destination.",
+        classNames: walletCenterUi
+      }
+    ) })
+  ] }) }) });
+  if (embedded) {
+    const back = selected ? { label: activeModule?.label ?? "Wallet", onPick: handleBackToList } : section === "menu" ? null : { label: backLabel, onPick: leaveSection };
+    const sectionControls = !selected && activeBuiltin === "history" ? /* @__PURE__ */ jsx(FilterChips, { filter: historyFilter, onChange: handleFilterChange }) : null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: cx4("min-h-0 flex-1", isCompactView ? "overflow-y-auto" : "overflow-hidden"), children: body }),
+      back || sectionControls ? /* @__PURE__ */ jsxs("nav", { "aria-label": "Wallet controls", className: "flex h-12 shrink-0 items-center gap-2 border-t border-border-light px-4", children: [
+        back ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: back.onPick,
+            className: "flex h-8 shrink-0 items-center gap-1.5 rounded-full bg-chip-hover pl-2 pr-3 text-[12.5px] font-medium text-text-primary transition-colors hover:bg-raised-hover",
+            children: [
+              /* @__PURE__ */ jsx(IconChevronLeft, {}),
+              back.label
+            ]
+          }
+        ) : null,
+        back && sectionControls ? /* @__PURE__ */ jsx("span", { className: "h-5 w-px shrink-0 bg-border-strong", "aria-hidden": "true" }) : null,
+        sectionControls ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto", children: sectionControls }) : null
+      ] }) : null
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     Drawer,
     {
@@ -25491,89 +25677,7 @@ var WalletCenterSurface = ({
       closeButtonClassName: walletCenterUi?.drawer?.closeButton,
       contentClassName: drawerContentClass,
       contentStyle: isCompactView ? { flex: "0 1 auto", maxHeight: "calc(100vh - 24px)", overflowY: "auto", paddingBottom: 12 } : void 0,
-      children: /* @__PURE__ */ jsx("div", { ref: walletRootRef, className: cx4(isCompactView ? "w-full" : "flex h-full overflow-hidden", walletRootClass), children: /* @__PURE__ */ jsx("div", { className: cx4(isCompactView ? "min-h-0 w-full" : "flex-1 min-h-0 overflow-hidden", walletMainClass), children: selected ? /* @__PURE__ */ jsx(
-        DetailPane,
-        {
-          message: selected,
-          source: selectedSource,
-          userId,
-          onBack: handleBackToList,
-          onSigned: async (m) => {
-            onSigned?.(m);
-            setSelected(null);
-            await refreshPending();
-          },
-          onRetry: handleRetry,
-          onSwitchToSign: () => setSelectedSource("pending"),
-          selectorRegistry,
-          addressLabels,
-          renderSimpleSummary
-        }
-      ) : section === "menu" ? /* @__PURE__ */ jsx(
-        WalletMenu,
-        {
-          identity: resolvedIdentity,
-          items: menuItems,
-          actors: resolvedActors,
-          actionError,
-          onSelectModule: handleSelectModule,
-          onOpenActors: () => setSection("actors"),
-          onClose,
-          onSignOut: handleSignOut
-        }
-      ) : section === "actors" ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsx(SectionHeader, { title: "Signing context", onBack: () => setSection("menu") }),
-        /* @__PURE__ */ jsx(
-          ActorsPane,
-          {
-            actors: resolvedActors,
-            error: actionError,
-            onSelect: handleSelectActor
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsx(
-          SectionHeader,
-          {
-            title: activeModule?.label ?? "Wallet",
-            onBack: () => {
-              setSection("menu");
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "min-h-0", children: activeModule ? /* @__PURE__ */ jsx(
-          SectionPane,
-          {
-            module: activeModule,
-            panelContext,
-            pendingList,
-            busyId,
-            actionError,
-            onSelectPending: (m) => handleSelect(m, "pending"),
-            onSign: handleSign,
-            onCancel: handleCancel,
-            historyItems: filteredHistoryItems,
-            historyFilter,
-            historyLoading,
-            historyError,
-            historyHasMore: historyHasMore && historyItems.length < HISTORY_MAX_ITEMS,
-            historyAtCap: historyItems.length >= HISTORY_MAX_ITEMS,
-            historyLoadedOnce,
-            onFilterChange: handleFilterChange,
-            onLoadMore: handleLoadMore,
-            onSelectHistory: (m) => handleSelect(m, "history"),
-            onRetry: handleRetryFromRow,
-            classNames: walletCenterUi
-          }
-        ) : /* @__PURE__ */ jsx(
-          EmptyState,
-          {
-            title: "This wallet view is unavailable",
-            subtitle: "Return to the wallet menu and choose another destination.",
-            classNames: walletCenterUi
-          }
-        ) })
-      ] }) }) })
+      children: body
     }
   );
 };
@@ -25695,7 +25799,7 @@ function WalletMenu({
               action.id
             );
           }),
-          /* @__PURE__ */ jsx(
+          onClose ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -25705,7 +25809,7 @@ function WalletMenu({
               "aria-label": "Close wallet center",
               children: /* @__PURE__ */ jsx(IconX, {})
             }
-          )
+          ) : null
         ] })
       ] }),
       /* @__PURE__ */ jsx(ActiveEnvironmentBadge, {})
@@ -25722,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" })
@@ -25737,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"
@@ -25769,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
           }
@@ -25836,6 +25940,7 @@ function SectionPane(props) {
             {
               items: props.historyItems,
               filter: props.historyFilter,
+              showFilters: props.showHistoryFilters ?? true,
               onFilterChange: props.onFilterChange,
               loading: props.historyLoading,
               error: props.historyError,
@@ -26008,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"
         }
       )
@@ -26067,6 +26172,7 @@ function PendingSection({
   )) });
 }
 function HistorySection({
+  showFilters = true,
   items,
   filter,
   onFilterChange,
@@ -26082,7 +26188,7 @@ function HistorySection({
   classNames
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cx4("p-3 space-y-3", classNames?.listSection), children: [
-    /* @__PURE__ */ jsx(FilterChips, { filter, onChange: onFilterChange }),
+    showFilters ? /* @__PURE__ */ jsx(FilterChips, { filter, onChange: onFilterChange }) : null,
     error && /* @__PURE__ */ jsx(ErrorBanner, { children: error }),
     !loadedOnce && loading && /* @__PURE__ */ jsx("div", { className: "py-10 flex justify-center", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: "md" }) }),
     loadedOnce && items.length === 0 && !loading && /* @__PURE__ */ jsx(
@@ -26165,6 +26271,7 @@ function DetailPane({
   source,
   userId,
   onBack,
+  hideBack = false,
   onSigned,
   onRetry,
   onSwitchToSign,
@@ -26174,7 +26281,7 @@ function DetailPane({
 }) {
   const drawerKey = `signature-${source}-${message.id}`;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col h-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 border-b border-border-light", children: /* @__PURE__ */ jsxs(
+    hideBack ? null : /* @__PURE__ */ jsx("div", { className: "px-3 py-2.5 border-b border-border-light", children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -26259,9 +26366,9 @@ function WalletCenter({
   onCanceled
 }) {
   const { user } = useAuth();
-  const { isOpen, requestedView, closeWalletCenter } = useWalletCenter();
+  const { isOpen, requestedView, closeWalletCenter, host, hostOptions, setHostTitle } = useWalletCenter();
   if (!isOpen || !user?.id) return null;
-  return /* @__PURE__ */ jsx(
+  const surface = /* @__PURE__ */ jsx(
     WalletCenterSurface,
     {
       isOpen: true,
@@ -26276,9 +26383,13 @@ function WalletCenter({
       renderSimpleSummary,
       onSigned,
       onRetried,
-      onCanceled
+      onCanceled,
+      embedded: Boolean(host),
+      backLabel: hostOptions.backLabel,
+      onTitle: setHostTitle
     }
   );
+  return host ? createPortal(surface, host) : surface;
 }
 function WalletCenterTrigger({
   variant = "icon",
@@ -27932,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" })
         ] }),
@@ -28018,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" })
       ] }),
@@ -29740,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(
@@ -30737,7 +30848,7 @@ var PendingPaymentCard = ({
       {
         className: [
           "flex items-center gap-3 px-3 py-2 border-b transition-colors",
-          isHighlighted ? "border-status-warning-text/40 bg-status-warning-bg/30" : "border-border-light hover:bg-chip",
+          isHighlighted ? "border-status-warning-text/40 bg-status-warning-bg" : "border-border-light hover:bg-chip",
           className
         ].join(" "),
         children: [
@@ -30805,7 +30916,7 @@ var PendingPaymentCard = ({
     {
       className: [
         "rounded-lg border p-4 transition-shadow",
-        isHighlighted ? "border-status-warning-text/40 bg-status-warning-bg/40" : "border-border-default bg-surface",
+        isHighlighted ? "border-status-warning-text/40 bg-status-warning-bg" : "border-border-default bg-surface",
         "hover:shadow-sm",
         className
       ].join(" "),
@@ -31447,4 +31558,4 @@ init_YieldFabricLogo();
 //! This service handles all key management operations including creation, retrieval,
 //! rotation, deletion, and cryptographic operations.
 
-export { AccessFlow, AccountOpeningPanel, AddCardDialog, AvatarPicker, BankAccountCard, BillingCenter, BillingChip, BrandingProvider, BrowserLocalStorageTokenStore, BusinessVerificationSection, Button, BuyCreditsDialog, CHOOSER_META, CREDIT_CHECKOUT_RETRY_REQUESTED_EVENT, CREDIT_CHECKOUT_RETRY_REQUIRED_EVENT, CREDIT_CHECKOUT_SYNCED_EVENT, Card, CardRequiredError, CardRequiredHost, ChainAccountActivationError, ChainAccountActivationHttpError, ChainAccountRequiredError, ChainAccountRequiredHost, ChainMismatchError, ChainNotConfiguredError, ChangePasswordModal_default as ChangePasswordModal, CreditExhaustedHost, CreditRequiredError, DEFAULT_APP_DELEGATION_SCOPE, DEFAULT_AUTH_PROVIDERS, DEFAULT_KYC_PROVIDERS, DEFAULT_MESSAGES, DEFAULT_OWNED_GROUP_DELEGATION_SCOPE, DailySpendChart, Drawer, EarningsSection, EntitySSEProvider, GROUP_ACCOUNT_OPERATION_KEYS, GenericSignDialog, globalNotificationService_default as GlobalNotificationService, GroupBillingSection, GroupOwnershipPanel, IdentityCard, IncomingPaymentsCenter, IncomingPaymentsInbox, IncomingPaymentsLauncher, KeyBalances_default as KeyBalances, SecurityPage as KeysManager, LineItemDrawer, LineItemsTable, LoadingSpinner, LoginAltMethods, LoginComponent, LoginForm, LoginLayout, LoginPage, LoginShell, METER_LABELS, OnboardingMethodCard, OnboardingPlanHttpError, OnboardingPolicyHttpError, OnboardingPolicySection, OnboardingWizard, PaymentStatusEnum, PendingPaymentCard, PhoneVerification, Profile as ProfileEditor, ProviderConfigProvider, RedirectTo, SendFromKey_default as SendFromKey, SendPaymentDrawer, SendPaymentForm, SignatureCenterRow, SignaturePreviewDrawer as SignatureDrawer, SignatureQueueProvider, SignatureWorkflow, SkeletonAvatar, SponsorshipSessionError, StepShell, Toast, VerificationRequiredError, VerificationRequiredHost, VerifiedBadge, WalletAuthProvider, WalletCenter, WalletCenterProvider, WalletCenterTrigger, WalletConfigProvider, WalletIdentityError, WalletNotRegisteredError, WalletProvider, YieldFabricLockup, activateChainAccount, activateChainAccountAndRefresh, addChainParamsByChainId, agentMinutesFromMicros, apiKeysService, assertChain, authService, balanceService, billingGateInfoForActiveToken, billingGateInfoFromToken, billingRecoveryAction, billingService, breakdownKeyLabel, buildAuthRegistry, buildCreditCheckoutReturnUrls, buildInbox, buildKycRegistry, buildSendParams, canReexecuteMessage, canonicalEip155ChainId, canonicalEvmAddress, canonicalGroupOperationUuid, canonicalU256Decimal, cardRequiredGate, chainAccountMode, chainAccountRequiredGate, chainAddressesToLabels, chainIdToHex, chainNames, computeMetaTransactionDigest, confirmMyEmailVerification, contractNeedsObligationAccept, convertAmountToRaw, createPasskey, createStripeIdentitySession, createSumsubAccessToken, creditCheckoutTargetGroupId, creditGateInfoForActiveToken, creditPlanTotalAllowanceUsd, creditRequiredGate, decodeJwtPayload as decodeJwtClaims, defaultTokenStore, defaultWalletCenterModules, defineWalletDirectory, defineWalletPanel, defineWalletRoute, delegationService, effectiveStatus, enabledPaymentChainIds, encodeApprove, encodeBalanceOf, encodeTransfer, ensureCardOnFile, ensureCreditAvailable, ensureVerified, exchange, extractCurrency, extractTokenAssetId, featureLabel, fetchAccountOpeningStatus, fetchNonce, fetchVerificationStatus, fetchWithChainAccountActivationRetry, findWalletRegistration, formatAgentMinutes, formatAgentTime, formatPages, formatPayment, formatRelativeTime, formatTxHashShort, formatUnits, formatUsdMicros, freshTokenForSameChainActor, gasOpLabel, getActiveChainId, getActiveUserChainId, getAddChainParams, getAuthServiceUrl, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerTxUrl, getChainAccountActivationStatus, getChainConfig, getChainIdFromToken, getCurrentChainId, getDefaultChainAddressLabels, getDefaultChainId, getErc20Allowance, getErc20Balance, getErc20Decimals, getErc20Symbol, getIdentityStatus, getIdentityStatusForProviders, getMyEmailVerificationStatus, getMyProfile, getNativeBalance, getPaymentsServiceUrl, getReceipt, getWebSocketUrl, groupInbox, groupsService, hasActiveAuthToken, humanizeMessageType, invalidateOnboardingState, invalidateWalletCount, isEoaKey, isExactSponsoredUserToken, isLiveMode, isPaymentChainEnabled, isStaffRole, itemAgentTime, itemLabel, keyPairToEoaHandle, keysService, knownAuthProviderIds, knownKycProviderIds, kycKindOf, link, listMyLoginKeys, listMyVerifications, llmCategoryLabel, makeWalletId, manualChainAccountRequiredContext, messagesService, needsPaymentAcceptance, nftOwnedSignerBinding, onboardingPlanService, onboardingPolicyService, ownedGroupUserSignerCustody, parseChainAccountRequired, parseChainAccountRequiredRest, parseGroupAccountOperationWire, parseUnits, parseVerificationRequired, parseWalletId, passkeyLabel, patchMyEmail, patchMyProfile, paymentsService, paymentsUrlMap, personalJwtHasGroupPayer, personalSessionHasGroupPayer, promptCardCapture, promptCreditPurchase, promptVerification, readCreditCheckoutReturnMarker, recordCredentialIssued, refreshChainAccountSession, registerBlockExplorer, registeredWalletsFromMetadata, remintTokensAfterCardChange, requireActiveUserChainId, requireChainIdFromToken, requireWalletRegistrationChain, requireWalletRegistrationSessionChain, resetDecimalsWarningCache, resolveAuth, resolveKyc, resolveKycInstance, resolvePaymentDirection, resolveWalletIdentityForChain, retryOnceAfterChainAccountActivation, selectWalletRegistration, setAuthRegistry, setGroupVerificationProfiles, setKycRegistry, setModeConfig, signInChallengeViaPasskey, signInWithPasskey, signUpRegisterViaPasskey, signUpWithPasskey, signWithPasskey, signatureSignin, snapshotNeedsPrepaidPlan, startMyEmailVerification, statusToColor, subscribeEntityEvents, switchChain, syntheticPasskeyAddress, testChainIds, tokenManager, tryParseWalletId, unlink, useAuth, useAuthContext, useBranding, useEntitySSE, useEoaSend, useForm, useGenericSigner, useIncomingPaymentDecimals, useIncomingPayments, useKeyBalance, useLogin, useLoginWithForm, useOnboardingState2 as useOnboardingRouting, useOnboardingState, usePaymentDecimals, useProviderConfig, useSendPayment, useSignatureQueue, useTapToCancel, useThemeClasses, useTokenStore, useWalletCenter, useWalletConfig, useWalletNavigate, useWalletSigner, userIdentityStatusScopes, validateWalletCenterModules, verificationRequiredGate, verifyMetaTransactionDigest, verifyNftAuthorizationBinding, walletCenter, walletRegistrationAuthContext, walletRegistrationMatches, walletRegistrationsForChain, withoutCreditCheckoutReturnMarker };
+export { AccessFlow, AccountOpeningPanel, AddCardDialog, AvatarPicker, BankAccountCard, BillingCenter, BillingChip, BrandingProvider, BrowserLocalStorageTokenStore, BusinessVerificationSection, Button, BuyCreditsDialog, CHOOSER_META, CREDIT_CHECKOUT_RETRY_REQUESTED_EVENT, CREDIT_CHECKOUT_RETRY_REQUIRED_EVENT, CREDIT_CHECKOUT_SYNCED_EVENT, Card, CardRequiredError, CardRequiredHost, ChainAccountActivationError, ChainAccountActivationHttpError, ChainAccountRequiredError, ChainAccountRequiredHost, ChainMismatchError, ChainNotConfiguredError, ChangePasswordModal_default as ChangePasswordModal, CreditExhaustedHost, CreditRequiredError, DEFAULT_APP_DELEGATION_SCOPE, DEFAULT_AUTH_PROVIDERS, DEFAULT_KYC_PROVIDERS, DEFAULT_MESSAGES, DEFAULT_OWNED_GROUP_DELEGATION_SCOPE, DailySpendChart, Drawer, EarningsSection, EntitySSEProvider, GROUP_ACCOUNT_OPERATION_KEYS, GenericSignDialog, globalNotificationService_default as GlobalNotificationService, GroupBillingSection, GroupOwnershipPanel, IdentityCard, IncomingPaymentsCenter, IncomingPaymentsInbox, IncomingPaymentsLauncher, KeyBalances_default as KeyBalances, SecurityPage as KeysManager, LineItemDrawer, LineItemsTable, LoadingSpinner, LoginAltMethods, LoginComponent, LoginForm, LoginLayout, LoginPage, LoginShell, METER_LABELS, OnboardingMethodCard, OnboardingPlanHttpError, OnboardingPolicyHttpError, OnboardingPolicySection, OnboardingWizard, PaymentStatusEnum, PendingPaymentCard, PhoneVerification, Profile as ProfileEditor, ProviderConfigProvider, RedirectTo, SendFromKey_default as SendFromKey, SendPaymentDrawer, SendPaymentForm, SignatureCenterRow, SignaturePreviewDrawer as SignatureDrawer, SignatureQueueProvider, SignatureWorkflow, SkeletonAvatar, SponsorshipSessionError, StepShell, Toast, VerificationRequiredError, VerificationRequiredHost, VerifiedBadge, WalletAuthProvider, WalletCenter, WalletCenterProvider, WalletCenterTrigger, WalletConfigProvider, WalletIdentityError, WalletNotRegisteredError, WalletProvider, YieldFabricLockup, activateChainAccount, activateChainAccountAndRefresh, addChainParamsByChainId, agentMinutesFromMicros, apiKeysService, assertChain, authService, balanceService, billingGateInfoForActiveToken, billingGateInfoFromToken, billingRecoveryAction, billingService, breakdownKeyLabel, buildAuthRegistry, buildCreditCheckoutReturnUrls, buildInbox, buildKycRegistry, buildSendParams, canReexecuteMessage, canonicalEip155ChainId, canonicalEvmAddress, canonicalGroupOperationUuid, canonicalU256Decimal, cardRequiredGate, chainAccountMode, chainAccountRequiredGate, chainAddressesToLabels, chainIdToHex, chainNames, computeMetaTransactionDigest, confirmMyEmailVerification, contractNeedsObligationAccept, convertAmountToRaw, createPasskey, createStripeIdentitySession, createSumsubAccessToken, creditCheckoutTargetGroupId, creditGateInfoForActiveToken, creditPlanTotalAllowanceUsd, creditRequiredGate, decodeJwtPayload as decodeJwtClaims, defaultTokenStore, defaultWalletCenterModules, defineWalletDirectory, defineWalletPanel, defineWalletRoute, delegationService, effectiveStatus, enabledPaymentChainIds, encodeApprove, encodeBalanceOf, encodeTransfer, ensureCardOnFile, ensureCreditAvailable, ensureVerified, exchange, extractCurrency, extractTokenAssetId, featureLabel, fetchAccountOpeningStatus, fetchNonce, fetchVerificationStatus, fetchWithChainAccountActivationRetry, findWalletRegistration, formatAgentMinutes, formatAgentTime, formatPages, formatPayment, formatRelativeTime, formatTxHashShort, formatUnits, formatUsdMicros, freshTokenForSameChainActor, gasOpLabel, getActiveChainId, getActiveUserChainId, getAddChainParams, getAuthServiceUrl, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerTxUrl, getChainAccountActivationStatus, getChainConfig, getChainIdFromToken, getCurrentChainId, getDefaultChainAddressLabels, getDefaultChainId, getErc20Allowance, getErc20Balance, getErc20Decimals, getErc20Symbol, getIdentityStatus, getIdentityStatusForProviders, getMyEmailVerificationStatus, getMyProfile, getNativeBalance, getPaymentsServiceUrl, getReceipt, getWebSocketUrl, groupInbox, groupsService, hasActiveAuthToken, humanizeMessageType, invalidateOnboardingState, invalidateWalletCount, isEoaKey, isExactSponsoredUserToken, isLiveMode, isPaymentChainEnabled, isStaffRole, itemAgentTime, itemLabel, keyPairToEoaHandle, keysService, knownAuthProviderIds, knownKycProviderIds, kycKindOf, link, listMyLoginKeys, listMyVerifications, llmCategoryLabel, makeWalletId, manualChainAccountRequiredContext, messagesService, needsPaymentAcceptance, nftOwnedSignerBinding, onboardingPlanService, onboardingPolicyService, ownedGroupUserSignerCustody, parseChainAccountRequired, parseChainAccountRequiredRest, parseGroupAccountOperationWire, parseUnits, parseVerificationRequired, parseWalletId, passkeyLabel, patchMyEmail, patchMyProfile, paymentsService, paymentsUrlMap, personalJwtHasGroupPayer, personalSessionHasGroupPayer, promptCardCapture, promptCreditPurchase, promptVerification, readCreditCheckoutReturnMarker, recordCredentialIssued, refreshChainAccountSession, registerBlockExplorer, registeredWalletsFromMetadata, remintTokensAfterCardChange, requireActiveUserChainId, requireChainIdFromToken, requireWalletRegistrationChain, requireWalletRegistrationSessionChain, resetDecimalsWarningCache, resolveAuth, resolveKyc, resolveKycInstance, resolvePaymentDirection, resolveWalletIdentityForChain, retryOnceAfterChainAccountActivation, selectWalletRegistration, setAuthRegistry, setGroupVerificationProfiles, setKycRegistry, setModeConfig, signInChallengeViaPasskey, signInWithPasskey, signUpRegisterViaPasskey, signUpWithPasskey, signWithPasskey, signatureSignin, snapshotNeedsPrepaidPlan, startMyEmailVerification, statusToColor, subscribeEntityEvents, subscribeJsonEvents, switchChain, syntheticPasskeyAddress, testChainIds, tokenManager, tryParseWalletId, unlink, useAuth, useAuthContext, useBranding, useEntitySSE, useEoaSend, useForm, useGenericSigner, useIncomingPaymentDecimals, useIncomingPayments, useKeyBalance, useLogin, useLoginWithForm, useOnboardingState2 as useOnboardingRouting, useOnboardingState, usePaymentDecimals, useProviderConfig, useSendPayment, useSignatureQueue, useTapToCancel, useThemeClasses, useTokenStore, useWalletCenter, useWalletConfig, useWalletNavigate, useWalletSigner, userIdentityStatusScopes, validateWalletCenterModules, verificationRequiredGate, verifyMetaTransactionDigest, verifyNftAuthorizationBinding, walletCenter, walletRegistrationAuthContext, walletRegistrationMatches, walletRegistrationsForChain, withoutCreditCheckoutReturnMarker };