@yieldfabric/wallet 0.2.0 → 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/20", 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);
@@ -8794,6 +8796,16 @@ var WalletCenterContext = React54.createContext(null);
 function WalletCenterProvider({ children }) {
   const [isOpen, setIsOpen] = React54.useState(false);
   const [requestedView, setRequestedView] = React54.useState("menu");
+  const [host, setHostElement] = React54.useState(null);
+  const [hostOptions, setHostOptions] = React54.useState({});
+  const [hostTitle, setHostTitle] = React54.useState(null);
+  const setHost = React54.useCallback((next) => {
+    setHostElement((current) => {
+      if (current === next) return current;
+      if (!next) setHostTitle(null);
+      return next;
+    });
+  }, []);
   const openWalletCenter = React54.useCallback((view = "menu") => {
     setRequestedView(view);
     setIsOpen(true);
@@ -8803,8 +8815,8 @@ function WalletCenterProvider({ children }) {
     setRequestedView("menu");
   }, []);
   const value = React54.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__ */ jsxRuntime.jsx(WalletCenterContext.Provider, { value, children });
 }
@@ -8832,53 +8844,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 = exports.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: () => exports.tokenManager.getCurrentToken(),
+    onEvent,
+    onError
+  });
+}
+
 // src/core/globalNotificationService.ts
 var _GlobalNotificationService = class _GlobalNotificationService {
   constructor(callbacks) {
@@ -9255,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",
@@ -9390,7 +9454,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__ */ jsxRuntime.jsx(
     "button",
     {
@@ -9399,7 +9463,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
@@ -10323,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",
     {
@@ -10462,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(
@@ -11460,7 +11524,7 @@ function StripeProgressPanel({
         detail ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-[10px] leading-relaxed text-text-secondary/75", children: detail }) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-full w-2/3 rounded-full ${delayed ? "bg-status-warning-text" : "bg-cta"} motion-safe:animate-pulse` }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-full w-2/3 rounded-full ${delayed ? "bg-status-warning-text" : "bg-cta"} motion-safe:animate-pulse` }) })
   ] });
 }
 function StripeResultPanel({
@@ -11866,7 +11930,7 @@ function ProgressPanel({
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[16px] font-medium text-text-primary leading-snug", children: title }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[12px] leading-relaxed text-text-secondary", children: body })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `h-full w-2/3 rounded-full motion-safe:animate-pulse ${delayed ? "bg-status-warning-text" : "bg-cta"}`
@@ -12211,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 }) => {
@@ -13004,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
@@ -13057,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 },
@@ -14935,7 +14999,7 @@ function RecoveryPanel({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-0.5 h-8 w-8 shrink-0 rounded-full flex items-center justify-center ${iconClass}`, children: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { className: "h-4 w-4", strokeWidth: 1.8 }) }),
@@ -15376,7 +15440,7 @@ function AddWalletsStep({ chrome } = {}) {
     showDynamic && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-lg border border-border-default bg-surface p-4", children: [
@@ -15456,6 +15520,8 @@ var Drawer = ({
   React54.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) => {
@@ -15486,11 +15552,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 overflow-hidden z-[10000]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -15506,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: [
@@ -15527,12 +15598,12 @@ var Drawer = ({
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: `px-6 py-4 border-t border-border-default ${panelBg} flex-shrink-0 ${footerClassName}`, children: footer })
+          footer && /* @__PURE__ */ jsxRuntime.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 })
         ]
       }
     ) })
@@ -16139,7 +16210,7 @@ var AccountOpeningPanel = ({ onContinue, continueLabel = "Continue" }) => {
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[16px] font-medium text-text-primary leading-snug", children: copy.title }),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default/40", children: /* @__PURE__ */ jsxRuntime.jsx(
+        terminalFailure ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-border-default", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `h-full w-2/3 rounded-full motion-safe:animate-pulse ${impatient ? "bg-status-warning-text" : "bg-cta"}`
@@ -17917,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." }),
@@ -17934,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." })
@@ -18724,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"
   };
@@ -19715,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 })
         ]
       }
     );
@@ -19737,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",
@@ -19926,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" }),
@@ -19985,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;
@@ -20030,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."
@@ -20106,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",
         {
@@ -20136,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" })
@@ -20162,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: [
@@ -20176,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 })
@@ -20186,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",
@@ -20522,14 +20593,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)
         }
       }
@@ -20539,7 +20610,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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
@@ -20569,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"
 };
@@ -22168,10 +22241,10 @@ function SecurityPage() {
   const [generateDescription, setGenerateDescription] = React54.useState("");
   const [freshApiKey, setFreshApiKey] = React54.useState(null);
   const [freshApiKeyCopied, setFreshApiKeyCopied] = React54.useState(false);
-  const refresh = React54.useCallback(async () => {
+  const refresh = React54.useCallback(async (opts) => {
     setError(null);
     try {
-      invalidateWalletCount();
+      if (opts?.invalidate !== false) invalidateWalletCount();
       const [k, l] = await Promise.all([
         listMyLoginKeys(),
         keysService.getLockdownStatus().catch(() => null)
@@ -22185,7 +22258,7 @@ function SecurityPage() {
     }
   }, []);
   React54.useEffect(() => {
-    refresh();
+    void refresh({ invalidate: false });
   }, [refresh]);
   const refreshApiKeys = React54.useCallback(async () => {
     try {
@@ -23023,7 +23096,7 @@ function SecurityPage() {
                       (account) => !(account.chain_id === activeChainId && account.wallet_address.toLowerCase() === target)
                     );
                     if (otherAccounts.length === 0) return null;
-                    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-status-warning-bg border border-status-warning-text/30 px-3 py-2 space-y-1", children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-status-warning-text font-medium", children: [
                         "This key also owns ",
                         otherAccounts.length,
@@ -23338,7 +23411,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
     }
   );
@@ -23354,7 +23427,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
     }
   );
@@ -23923,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) })
           ]
         }
       ),
@@ -23946,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"}`
           }
         ),
@@ -23962,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."
@@ -24297,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: [
@@ -24308,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}`
         }
       )
@@ -24795,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",
     {
@@ -24937,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 })
       ] })
@@ -24951,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",
@@ -24995,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",
@@ -25066,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
       }
     )
@@ -25165,7 +25238,10 @@ var WalletCenterSurface = ({
   modules,
   actors,
   identity,
-  initialView = "menu"
+  initialView = "menu",
+  embedded = false,
+  backLabel = "Back",
+  onTitle
 }) => {
   const { pendingList, refreshPending } = useSignatureQueue();
   const {
@@ -25193,6 +25269,10 @@ var WalletCenterSurface = ({
   const cancelGuardRef = React54.useRef(/* @__PURE__ */ new Map());
   const wasOpenRef = React54.useRef(false);
   const walletRootRef = React54.useRef(null);
+  const leaveSection = React54.useCallback(() => {
+    if (embedded && initialView !== "menu") onClose();
+    else setSection("menu");
+  }, [embedded, initialView, onClose]);
   React54.useEffect(() => {
     const justOpened = isOpen && !wasOpenRef.current;
     wasOpenRef.current = isOpen;
@@ -25210,9 +25290,9 @@ var WalletCenterSurface = ({
   React54.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 = React54.useMemo(() => {
     if (!delegationToken || typeof window === "undefined") return null;
     return window.localStorage.getItem("delegation_group_id");
@@ -25465,11 +25545,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 = React54.useMemo(() => {
     if (selected) {
       const label = humanizeMessageType(selected.data?.message_type);
@@ -25477,11 +25557,117 @@ var WalletCenterSurface = ({
     }
     return "Wallet";
   }, [selected, selectedSource]);
+  const hostedTitle = !embedded ? null : selected ? drawerTitle : section === "actors" ? "Signing context" : activeModule?.label ?? null;
+  React54.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__ */ jsxRuntime.jsx("div", { ref: walletRootRef, className: cx4(isCompactView ? "w-full" : "flex h-full overflow-hidden", walletRootClass), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx4(isCompactView ? "min-h-0 w-full" : "flex-1 min-h-0 overflow-hidden", walletMainClass), children: selected ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    WalletMenu,
+    {
+      identity: resolvedIdentity,
+      items: menuItems,
+      actors: resolvedActors,
+      actionError,
+      onSelectModule: handleSelectModule,
+      onOpenActors: () => setSection("actors"),
+      onClose: embedded ? void 0 : onClose,
+      onSignOut: handleSignOut
+    }
+  ) : section === "actors" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col", children: [
+    embedded ? null : /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title: "Signing context", onBack: leaveSection }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActorsPane,
+      {
+        actors: resolvedActors,
+        error: actionError,
+        onSelect: handleSelectActor
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col", children: [
+    embedded ? null : /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title: activeModule?.label ?? "Wallet", onBack: leaveSection }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0", children: activeModule ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FilterChips, { filter: historyFilter, onChange: handleFilterChange }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx4("min-h-0 flex-1", isCompactView ? "overflow-y-auto" : "overflow-hidden"), children: body }),
+      back || sectionControls ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconChevronLeft, {}),
+              back.label
+            ]
+          }
+        ) : null,
+        back && sectionControls ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-5 w-px shrink-0 bg-border-strong", "aria-hidden": "true" }) : null,
+        sectionControls ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto", children: sectionControls }) : null
+      ] }) : null
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Drawer,
     {
@@ -25499,89 +25685,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__ */ jsxRuntime.jsx("div", { ref: walletRootRef, className: cx4(isCompactView ? "w-full" : "flex h-full overflow-hidden", walletRootClass), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx4(isCompactView ? "min-h-0 w-full" : "flex-1 min-h-0 overflow-hidden", walletMainClass), children: selected ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        WalletMenu,
-        {
-          identity: resolvedIdentity,
-          items: menuItems,
-          actors: resolvedActors,
-          actionError,
-          onSelectModule: handleSelectModule,
-          onOpenActors: () => setSection("actors"),
-          onClose,
-          onSignOut: handleSignOut
-        }
-      ) : section === "actors" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { title: "Signing context", onBack: () => setSection("menu") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActorsPane,
-          {
-            actors: resolvedActors,
-            error: actionError,
-            onSelect: handleSelectActor
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SectionHeader,
-          {
-            title: activeModule?.label ?? "Wallet",
-            onBack: () => {
-              setSection("menu");
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0", children: activeModule ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          EmptyState,
-          {
-            title: "This wallet view is unavailable",
-            subtitle: "Return to the wallet menu and choose another destination.",
-            classNames: walletCenterUi
-          }
-        ) })
-      ] }) }) })
+      children: body
     }
   );
 };
@@ -25703,7 +25807,7 @@ function WalletMenu({
               action.id
             );
           }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          onClose ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -25713,7 +25817,7 @@ function WalletMenu({
               "aria-label": "Close wallet center",
               children: /* @__PURE__ */ jsxRuntime.jsx(IconX, {})
             }
-          )
+          ) : null
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ActiveEnvironmentBadge, {})
@@ -25730,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" })
@@ -25745,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"
@@ -25777,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
           }
@@ -25844,6 +25948,7 @@ function SectionPane(props) {
             {
               items: props.historyItems,
               filter: props.historyFilter,
+              showFilters: props.showHistoryFilters ?? true,
               onFilterChange: props.onFilterChange,
               loading: props.historyLoading,
               error: props.historyError,
@@ -26016,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"
         }
       )
@@ -26075,6 +26180,7 @@ function PendingSection({
   )) });
 }
 function HistorySection({
+  showFilters = true,
   items,
   filter,
   onFilterChange,
@@ -26090,7 +26196,7 @@ function HistorySection({
   classNames
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx4("p-3 space-y-3", classNames?.listSection), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FilterChips, { filter, onChange: onFilterChange }),
+    showFilters ? /* @__PURE__ */ jsxRuntime.jsx(FilterChips, { filter, onChange: onFilterChange }) : null,
     error && /* @__PURE__ */ jsxRuntime.jsx(ErrorBanner, { children: error }),
     !loadedOnce && loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-10 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size: "md" }) }),
     loadedOnce && items.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -26173,6 +26279,7 @@ function DetailPane({
   source,
   userId,
   onBack,
+  hideBack = false,
   onSigned,
   onRetry,
   onSwitchToSign,
@@ -26182,7 +26289,7 @@ function DetailPane({
 }) {
   const drawerKey = `signature-${source}-${message.id}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2.5 border-b border-border-light", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    hideBack ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2.5 border-b border-border-light", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
@@ -26267,9 +26374,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__ */ jsxRuntime.jsx(
+  const surface = /* @__PURE__ */ jsxRuntime.jsx(
     WalletCenterSurface,
     {
       isOpen: true,
@@ -26284,9 +26391,13 @@ function WalletCenter({
       renderSimpleSummary,
       onSigned,
       onRetried,
-      onCanceled
+      onCanceled,
+      embedded: Boolean(host),
+      backLabel: hostOptions.backLabel,
+      onTitle: setHostTitle
     }
   );
+  return host ? reactDom.createPortal(surface, host) : surface;
 }
 function WalletCenterTrigger({
   variant = "icon",
@@ -27940,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" })
         ] }),
@@ -28026,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" })
       ] }),
@@ -29748,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(
@@ -30745,7 +30856,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: [
@@ -30813,7 +30924,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(" "),
@@ -31704,6 +31815,7 @@ exports.snapshotNeedsPrepaidPlan = snapshotNeedsPrepaidPlan;
 exports.startMyEmailVerification = startMyEmailVerification;
 exports.statusToColor = statusToColor;
 exports.subscribeEntityEvents = subscribeEntityEvents;
+exports.subscribeJsonEvents = subscribeJsonEvents;
 exports.switchChain = switchChain;
 exports.syntheticPasskeyAddress = syntheticPasskeyAddress;
 exports.testChainIds = testChainIds;