@yieldfabric/wallet 0.2.0 → 0.2.1

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 py-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: [
@@ -8794,6 +8794,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 +8813,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 +8842,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) {
@@ -9390,7 +9452,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 +9461,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
@@ -11460,7 +11522,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 +11928,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"}`
@@ -14935,7 +14997,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 +15438,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 +15518,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 +15550,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",
@@ -15527,12 +15596,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 +16208,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"}`
@@ -20522,14 +20591,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 +20608,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: [
@@ -22168,10 +22237,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 +22254,7 @@ function SecurityPage() {
     }
   }, []);
   React54.useEffect(() => {
-    refresh();
+    void refresh({ invalidate: false });
   }, [refresh]);
   const refreshApiKeys = React54.useCallback(async () => {
     try {
@@ -23023,7 +23092,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 +23407,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 +23423,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
     }
   );
@@ -25165,7 +25234,10 @@ var WalletCenterSurface = ({
   modules,
   actors,
   identity,
-  initialView = "menu"
+  initialView = "menu",
+  embedded = false,
+  backLabel = "Back",
+  onTitle
 }) => {
   const { pendingList, refreshPending } = useSignatureQueue();
   const {
@@ -25193,6 +25265,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 +25286,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 +25541,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 +25553,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 +25681,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 +25803,7 @@ function WalletMenu({
               action.id
             );
           }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          onClose ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -25713,7 +25813,7 @@ function WalletMenu({
               "aria-label": "Close wallet center",
               children: /* @__PURE__ */ jsxRuntime.jsx(IconX, {})
             }
-          )
+          ) : null
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ActiveEnvironmentBadge, {})
@@ -25844,6 +25944,7 @@ function SectionPane(props) {
             {
               items: props.historyItems,
               filter: props.historyFilter,
+              showFilters: props.showHistoryFilters ?? true,
               onFilterChange: props.onFilterChange,
               loading: props.historyLoading,
               error: props.historyError,
@@ -26075,6 +26176,7 @@ function PendingSection({
   )) });
 }
 function HistorySection({
+  showFilters = true,
   items,
   filter,
   onFilterChange,
@@ -26090,7 +26192,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 +26275,7 @@ function DetailPane({
   source,
   userId,
   onBack,
+  hideBack = false,
   onSigned,
   onRetry,
   onSwitchToSign,
@@ -26182,7 +26285,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 +26370,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 +26387,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",
@@ -30745,7 +30852,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 +30920,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 +31811,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;