@doujins/payments-ui 0.0.11 → 0.0.13

package/dist/index.cjs

@@ -1,25 +1,32 @@
 'use strict';
 
 var React3 = require('react');
-var vanilla = require('zustand/vanilla');
-var jsxRuntime = require('react/jsx-runtime');
+var reactQuery = require('@tanstack/react-query');
+var walletAdapterReact = require('@solana/wallet-adapter-react');
+var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
+require('@solana/wallet-adapter-react-ui/styles.css');
+var web3_js = require('@solana/web3.js');
+var walletAdapterPhantom = require('@solana/wallet-adapter-phantom');
+var walletAdapterSolflare = require('@solana/wallet-adapter-solflare');
+var walletAdapterTrust = require('@solana/wallet-adapter-trust');
+var walletAdapterCoinbase = require('@solana/wallet-adapter-coinbase');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
-var countryList = require('country-list');
-var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var countryList = require('country-list');
+var classVarianceAuthority = require('class-variance-authority');
 var LabelPrimitive = require('@radix-ui/react-label');
 var SelectPrimitive = require('@radix-ui/react-select');
-var reactQuery = require('@tanstack/react-query');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-var walletAdapterReact = require('@solana/wallet-adapter-react');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var buffer = require('buffer');
-var web3_js = require('@solana/web3.js');
 var splToken = require('@solana/spl-token');
 var QRCode = require('qrcode');
-var zustand = require('zustand');
-var TabsPrimitive = require('@radix-ui/react-tabs');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
+var bs58 = require('bs58');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -42,13 +49,16 @@ function _interopNamespace(e) {
 }
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var countryList__default = /*#__PURE__*/_interopDefault(countryList);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
-var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var bs58__default = /*#__PURE__*/_interopDefault(bs58);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
 // src/context/PaymentContext.tsx
 
@@ -331,6 +341,38 @@ var SubscriptionService = class {
       body: { ...payload }
     });
   }
+  async getPaymentHistory(params) {
+    const limit = params?.limit ?? 10;
+    const offset = params?.offset ?? 0;
+    const query = {
+      limit: String(limit),
+      offset: String(offset)
+    };
+    if (params?.type) {
+      query.type = params.type;
+    }
+    const response = await this.api.get("/subscriptions/purchases", {
+      query
+    });
+    const totalItems = response?.total_items ?? 0;
+    const pageSize = limit;
+    const pageNumber = response?.page ?? (pageSize > 0 ? Math.floor(offset / pageSize) + 1 : 1);
+    const totalPages = response?.total_pages ?? (pageSize > 0 ? Math.ceil(totalItems / pageSize) : void 0);
+    return {
+      data: response?.data ?? [],
+      total_items: totalItems,
+      limit,
+      offset,
+      page: pageNumber,
+      page_size: pageSize,
+      total_pages: totalPages
+    };
+  }
+  async cancelSubscription(feedback) {
+    return this.api.post("/subscriptions/cancel", {
+      body: feedback ? { feedback } : void 0
+    });
+  }
   serializePayload(platform, payload) {
     if (platform === "nmi") {
       const data2 = payload;
@@ -375,6 +417,48 @@ var SubscriptionService = class {
   }
 };
 
+// src/services/SolanaWalletService.ts
+var SolanaWalletService = class {
+  constructor(api) {
+    this.api = api;
+  }
+  async list() {
+    const response = await this.api.get(
+      "/wallet/solana"
+    );
+    if (Array.isArray(response)) {
+      return response;
+    }
+    if ("wallets" in response && Array.isArray(response.wallets)) {
+      return response.wallets;
+    }
+    if ("wallet" in response) {
+      return response.wallet ? [response.wallet] : [];
+    }
+    if ("address" in response) {
+      return [response];
+    }
+    return [];
+  }
+  async requestChallenge(wallet) {
+    return this.api.post("/wallet/solana/challenge", {
+      body: { wallet }
+    });
+  }
+  async verify(wallet, signature, nonce) {
+    const body = { wallet, signature };
+    if (nonce) {
+      body.nonce = nonce;
+    }
+    return this.api.post("/wallet/solana/verify", { body });
+  }
+  async remove(wallet) {
+    await this.api.delete("/wallet/solana", {
+      query: { wallet }
+    });
+  }
+};
+
 // src/core/PaymentApp.ts
 var PaymentApp = class {
   constructor(options) {
@@ -424,6 +508,7 @@ var PaymentApp = class {
       this.resolveAuthToken
     );
     const solanaPayments = new SolanaPaymentService(billingApi);
+    const solanaWallets = new SolanaWalletService(billingApi);
     const paymentMethods = new PaymentMethodService(accountApi);
     const cardPayments = new CardPaymentService(this.config);
     const walletGateway = new WalletGateway();
@@ -433,6 +518,7 @@ var PaymentApp = class {
       cardPayments,
       paymentMethods,
       solanaPayments,
+      solanaWallets,
       tokenCatalog,
       walletGateway,
       subscriptions,
@@ -441,141 +527,98 @@ var PaymentApp = class {
     };
   }
 };
-var initialState = {
-  selectedMethodId: null,
-  solanaModalOpen: false,
-  savedPaymentStatus: "idle",
-  savedPaymentError: null,
-  newCardStatus: "idle",
-  newCardError: null,
-  solanaTab: "wallet",
-  solanaStatus: "selecting",
-  solanaError: null,
-  solanaTransactionId: null,
-  solanaSelectedToken: null,
-  solanaTokenAmount: 0
-};
-var createPaymentStore = (options) => vanilla.createStore((set, get) => {
-  const notifyStatus = (status, context) => {
-    options?.callbacks?.onStatusChange?.({ status, context });
-  };
-  const notifySuccess = (payload) => {
-    if (!options?.callbacks?.onSuccess) return;
-    options.callbacks.onSuccess(payload ?? {});
-  };
-  const notifyError = (error) => {
-    options?.callbacks?.onError?.(new Error(error));
-  };
-  return {
-    ...initialState,
-    setSelectedMethod: (methodId) => {
-      if (get().selectedMethodId === methodId) return;
-      set({ selectedMethodId: methodId });
-    },
-    setSolanaModalOpen: (open) => {
-      if (get().solanaModalOpen === open) return;
-      set({ solanaModalOpen: open });
-    },
-    setSolanaTab: (tab) => {
-      if (get().solanaTab === tab) return;
-      set({ solanaTab: tab });
-    },
-    setSolanaSelectedToken: (symbol) => {
-      if (get().solanaSelectedToken === symbol) return;
-      set({ solanaSelectedToken: symbol });
-    },
-    setSolanaTokenAmount: (amount) => {
-      if (get().solanaTokenAmount === amount) return;
-      set({ solanaTokenAmount: amount });
-    },
-    setSolanaTransactionId: (txId) => {
-      if (get().solanaTransactionId === txId) return;
-      set({ solanaTransactionId: txId });
-    },
-    startSavedPayment: () => {
-      notifyStatus("processing", { source: "saved-payment" });
-      set({ savedPaymentStatus: "processing", savedPaymentError: null });
-    },
-    completeSavedPayment: () => {
-      notifyStatus("success", { source: "saved-payment" });
-      set({ savedPaymentStatus: "success", savedPaymentError: null });
-    },
-    failSavedPayment: (error) => {
-      notifyStatus("error", { source: "saved-payment" });
-      notifyError(error);
-      set({ savedPaymentStatus: "error", savedPaymentError: error });
-    },
-    resetSavedPayment: () => set({ savedPaymentStatus: "idle", savedPaymentError: null }),
-    startNewCardPayment: () => {
-      notifyStatus("processing", { source: "new-card" });
-      set({ newCardStatus: "processing", newCardError: null });
-    },
-    completeNewCardPayment: () => {
-      notifyStatus("success", { source: "new-card" });
-      set({ newCardStatus: "success", newCardError: null });
-    },
-    failNewCardPayment: (error) => {
-      notifyStatus("error", { source: "new-card" });
-      notifyError(error);
-      set({ newCardStatus: "error", newCardError: error });
-    },
-    resetNewCardPayment: () => set({ newCardStatus: "idle", newCardError: null }),
-    startSolanaPayment: () => {
-      notifyStatus("processing", { source: "solana" });
-      set({ solanaStatus: "processing", solanaError: null });
-    },
-    confirmSolanaPayment: () => set({ solanaStatus: "confirming" }),
-    completeSolanaPayment: (payload) => {
-      notifyStatus("success", { source: "solana" });
-      notifySuccess(payload);
-      set({ solanaStatus: "success", solanaError: null });
-    },
-    failSolanaPayment: (error) => {
-      notifyStatus("error", { source: "solana" });
-      notifyError(error);
-      set({ solanaStatus: "error", solanaError: error });
+
+// src/runtime/PaymentsRuntime.ts
+var createQueryClient = () => new reactQuery.QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 3e4,
+      gcTime: 5 * 6e4,
+      refetchOnWindowFocus: false,
+      retry: 1
     },
-    resetSolanaPayment: () => set({
-      solanaStatus: "selecting",
-      solanaError: null,
-      solanaTransactionId: null
-    }),
-    resetAll: () => set(initialState)
-  };
+    mutations: {
+      retry: 1
+    }
+  }
 });
-var PaymentContext = React3.createContext(void 0);
-var PaymentProvider = ({
-  config,
-  children
-}) => {
-  const app = React3.useMemo(() => new PaymentApp({ config }), [config]);
-  const store = React3.useMemo(
-    () => createPaymentStore({ callbacks: config.callbacks }),
-    [config.callbacks]
-  );
-  const value = React3.useMemo(() => {
-    return {
-      config: app.getConfig(),
-      fetcher: app.getFetcher(),
-      resolveAuthToken: app.resolveAuthToken,
-      app,
-      services: app.getServices(),
-      store
-    };
-  }, [app, store]);
-  React3.useEffect(() => {
-    if (!value.config.collectJsKey) return;
-    loadCollectJs(value.config.collectJsKey);
-  }, [value.config.collectJsKey]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children });
-};
-var usePaymentContext = () => {
-  const context = React3.useContext(PaymentContext);
-  if (!context) {
-    throw new Error("usePaymentContext must be used within a PaymentProvider");
+var PaymentsRuntime = class {
+  constructor(config) {
+    this.config = config;
+    this.app = new PaymentApp({ config });
+    this.services = this.app.getServices();
+    this.queryClient = createQueryClient();
   }
-  return context;
 };
+var createPaymentsRuntime = (config) => new PaymentsRuntime(config);
+
+// node_modules/@solana/wallet-adapter-base/lib/esm/types.js
+var WalletAdapterNetwork;
+(function(WalletAdapterNetwork2) {
+  WalletAdapterNetwork2["Mainnet"] = "mainnet-beta";
+  WalletAdapterNetwork2["Testnet"] = "testnet";
+  WalletAdapterNetwork2["Devnet"] = "devnet";
+})(WalletAdapterNetwork || (WalletAdapterNetwork = {}));
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogPortal = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { className: cn(className), ...props });
+DialogPortal.displayName = DialogPrimitive__namespace.Portal.displayName;
+var DialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var DialogContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var customCountries = [
   { code: "TW", name: "Taiwan, Province of China" },
   { code: "KR", name: "Korea" },
@@ -705,9 +748,6 @@ function getElementRef(element) {
   }
   return element.props.ref || element.ref;
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var buttonVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
@@ -850,7 +890,6 @@ var defaultBilling = {
   firstName: "",
   lastName: "",
   address1: "",
-  address2: "",
   city: "",
   stateRegion: "",
   postalCode: "",
@@ -884,7 +923,6 @@ var CardDetailsForm = ({
   const [firstName, setFirstName] = React3.useState(mergedDefaults.firstName);
   const [lastName, setLastName] = React3.useState(mergedDefaults.lastName);
   const [address1, setAddress1] = React3.useState(mergedDefaults.address1);
-  const [address2, setAddress2] = React3.useState(mergedDefaults.address2 ?? "");
   const [city, setCity] = React3.useState(mergedDefaults.city);
   const [stateRegion, setStateRegion] = React3.useState(mergedDefaults.stateRegion ?? "");
   const [postalCode, setPostalCode] = React3.useState(mergedDefaults.postalCode);
@@ -903,7 +941,6 @@ var CardDetailsForm = ({
     setFirstName(mergedDefaults.firstName);
     setLastName(mergedDefaults.lastName);
     setAddress1(mergedDefaults.address1);
-    setAddress2(mergedDefaults.address2 ?? "");
     setCity(mergedDefaults.city);
     setStateRegion(mergedDefaults.stateRegion ?? "");
     setPostalCode(mergedDefaults.postalCode);
@@ -916,7 +953,6 @@ var CardDetailsForm = ({
       firstName,
       lastName,
       address1,
-      address2,
       city,
       stateRegion,
       postalCode,
@@ -928,7 +964,6 @@ var CardDetailsForm = ({
     firstName,
     lastName,
     address1,
-    address2,
     city,
     stateRegion,
     postalCode,
@@ -952,7 +987,6 @@ var CardDetailsForm = ({
         firstName,
         lastName,
         address1,
-        address2,
         city,
         stateRegion,
         postalCode,
@@ -983,7 +1017,6 @@ var CardDetailsForm = ({
     firstName,
     lastName,
     address1,
-    address2,
     city,
     stateRegion,
     postalCode,
@@ -1012,19 +1045,16 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-dashed border-muted-foreground/40 bg-muted/20 px-3 text-sm text-muted-foreground";
+  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-border/60 bg-background px-3 text-sm text-muted-foreground";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
-      className: cn(
-        "space-y-6 rounded-2xl border border-border/60 bg-card/90 p-6 shadow-lg",
-        className
-      ),
+      className: cn("space-y-5", className),
       onSubmit: handleSubmit,
       noValidate: true,
       children: [
         errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
@@ -1070,7 +1100,7 @@ var CardDetailsForm = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address1", children: "Address line 1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address1", children: "Address" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -1081,18 +1111,7 @@ var CardDetailsForm = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address2", children: "Address line 2 (optional)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              id: "payments-address2",
-              value: address2,
-              onChange: (e) => setAddress2(e.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-city", children: "City" }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1117,7 +1136,7 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4" }),
@@ -1137,7 +1156,7 @@ var CardDetailsForm = ({
             /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Country" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: country, onValueChange: setCountry, children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a country" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64 w-full", children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
             ] })
           ] })
         ] }),
@@ -1226,63 +1245,6 @@ var usePaymentMethods = () => {
     deleteMutation
   };
 };
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogPortal = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { className: cn(className), ...props });
-DialogPortal.displayName = DialogPrimitive__namespace.Portal.displayName;
-var DialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
   {
@@ -1332,43 +1294,6 @@ var ScrollBar = React3__namespace.forwardRef(({ className, orientation = "vertic
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-var Card = React3__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-CardDescription.displayName = "CardDescription";
-var CardContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
 var formatCardLabel = (method) => {
   const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
   const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
@@ -1397,22 +1322,22 @@ var StoredPaymentMethods = ({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-border/60 bg-card/95", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base font-semibold text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "h-4 w-4" }),
           " ",
           heading
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
       ] }),
-      showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", onClick: () => setIsModalOpen(true), children: [
+      showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => setIsModalOpen(true), children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
         " Add card"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
+    listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
       " Loading cards\u2026"
     ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
@@ -1470,8 +1395,8 @@ var StoredPaymentMethods = ({
         },
         method.id
       );
-    }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto", children: [
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add a new card" }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your card details are tokenized securely via our payment provider." })
@@ -1490,6 +1415,71 @@ var StoredPaymentMethods = ({
     ] }) })
   ] });
 };
+var Tabs = TabsPrimitive__namespace.Root;
+var TabsList = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var TabsTrigger = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+var usePaymentNotifications = () => {
+  const { config } = usePaymentContext();
+  const notifyStatus = React3.useCallback(
+    (status, context) => {
+      config.callbacks?.onStatusChange?.({ status, context });
+    },
+    [config.callbacks]
+  );
+  const notifySuccess = React3.useCallback(
+    (payload) => {
+      config.callbacks?.onSuccess?.(payload ?? {});
+    },
+    [config.callbacks]
+  );
+  const notifyError = React3.useCallback(
+    (error) => {
+      config.callbacks?.onError?.(
+        typeof error === "string" ? new Error(error) : error
+      );
+    },
+    [config.callbacks]
+  );
+  return {
+    notifyStatus,
+    notifySuccess,
+    notifyError
+  };
+};
 var useSolanaService = () => {
   const { services } = usePaymentContext();
   return React3.useMemo(() => services.solanaPayments, [services]);
@@ -1766,6 +1756,43 @@ var useSolanaDirectPayment = (options) => {
     pay
   };
 };
+var Card = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
 var DirectPayment = ({
   priceId,
   tokenAmount,
@@ -1786,7 +1813,7 @@ var DirectPayment = ({
     onSuccess: onPaymentSuccess,
     onError: onPaymentError
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 rounded-md border border-border/60 bg-background/80 shadow-none p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4" }),
@@ -2018,9 +2045,9 @@ var QRCodePayment = ({
     onSuccess: onPaymentSuccess
   });
   if (!selectedToken) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6 shadow-none rounded-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Scan with Solana Pay" }),
@@ -2249,109 +2276,21 @@ var useSupportedTokens = () => {
     tokenCount: tokens.length
   };
 };
-var usePaymentStore = (selector) => {
-  const { store } = usePaymentContext();
-  return zustand.useStore(store, selector);
-};
-
-// src/state/selectors.ts
-var selectCheckoutFlow = (state) => ({
-  selectedMethodId: state.selectedMethodId,
-  savedStatus: state.savedPaymentStatus,
-  savedError: state.savedPaymentError,
-  newCardStatus: state.newCardStatus,
-  newCardError: state.newCardError,
-  solanaModalOpen: state.solanaModalOpen,
-  setSelectedMethod: state.setSelectedMethod,
-  setSolanaModalOpen: state.setSolanaModalOpen,
-  startSavedPayment: state.startSavedPayment,
-  completeSavedPayment: state.completeSavedPayment,
-  failSavedPayment: state.failSavedPayment,
-  startNewCardPayment: state.startNewCardPayment,
-  completeNewCardPayment: state.completeNewCardPayment,
-  failNewCardPayment: state.failNewCardPayment,
-  resetSavedPayment: state.resetSavedPayment
-});
-var selectSolanaFlow = (state) => ({
-  tab: state.solanaTab,
-  status: state.solanaStatus,
-  error: state.solanaError,
-  transactionId: state.solanaTransactionId,
-  tokenAmount: state.solanaTokenAmount,
-  selectedTokenSymbol: state.solanaSelectedToken,
-  setTab: state.setSolanaTab,
-  setTokenAmount: state.setSolanaTokenAmount,
-  setTransactionId: state.setSolanaTransactionId,
-  setSelectedTokenSymbol: state.setSolanaSelectedToken,
-  startSolanaPayment: state.startSolanaPayment,
-  confirmSolanaPayment: state.confirmSolanaPayment,
-  completeSolanaPayment: state.completeSolanaPayment,
-  failSolanaPayment: state.failSolanaPayment,
-  resetSolanaPayment: state.resetSolanaPayment
-});
-var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var SolanaPaymentSelector = ({
-  isOpen,
-  onClose,
+var SolanaPaymentView = ({
   priceId,
   usdAmount,
   onSuccess,
-  onError
+  onError,
+  onClose
 }) => {
   const { connected } = walletAdapterReact.useWallet();
-  const {
-    tab: activeTab,
-    status: paymentState,
-    error: errorMessage,
-    transactionId,
-    tokenAmount,
-    selectedTokenSymbol,
-    setTab,
-    setTokenAmount,
-    setTransactionId,
-    setSelectedTokenSymbol,
-    startSolanaPayment,
-    confirmSolanaPayment,
-    completeSolanaPayment,
-    failSolanaPayment,
-    resetSolanaPayment
-  } = usePaymentStore(selectSolanaFlow);
+  const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
+  const [activeTab, setActiveTab] = React3.useState("wallet");
+  const [paymentState, setPaymentState] = React3.useState("selecting");
+  const [errorMessage, setErrorMessage] = React3.useState(null);
+  const [transactionId, setTransactionId] = React3.useState(null);
+  const [tokenAmount, setTokenAmount] = React3.useState(0);
+  const [selectedTokenSymbol, setSelectedTokenSymbol] = React3.useState(null);
   const {
     tokens,
     isLoading: tokensLoading,
@@ -2367,60 +2306,70 @@ var SolanaPaymentSelector = ({
       const defaultToken = tokens.find((token) => token.symbol === "SOL") || tokens[0];
       setSelectedTokenSymbol(defaultToken.symbol);
     }
-  }, [tokens, selectedTokenSymbol, setSelectedTokenSymbol]);
+  }, [tokens, selectedTokenSymbol]);
   const handlePaymentStart = React3.useCallback(() => {
-    startSolanaPayment();
-  }, [startSolanaPayment]);
+    setPaymentState("processing");
+    setErrorMessage(null);
+    notifyStatus("processing", { source: "solana" });
+  }, [notifyStatus]);
   const handlePaymentConfirming = React3.useCallback(() => {
-    confirmSolanaPayment();
-  }, [confirmSolanaPayment]);
+    setPaymentState("confirming");
+  }, []);
   const handlePaymentSuccess = React3.useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
       setTransactionId(resolvedTx);
-      completeSolanaPayment(
-        typeof result === "string" ? {
-          transactionId: resolvedTx,
-          processor: "solana",
-          metadata: { source: "solana-pay" }
-        } : {
-          transactionId: result.transaction_id,
-          intentId: result.intent_id,
-          processor: "solana",
-          metadata: {
-            purchaseId: result.purchase_id,
-            amount: result.amount,
-            currency: result.currency
-          }
+      setPaymentState("success");
+      setErrorMessage(null);
+      const payload = typeof result === "string" ? {
+        transactionId: resolvedTx,
+        processor: "solana",
+        metadata: { source: "solana-pay" }
+      } : {
+        transactionId: result.transaction_id,
+        intentId: result.intent_id,
+        processor: "solana",
+        metadata: {
+          purchaseId: result.purchase_id,
+          amount: result.amount,
+          currency: result.currency
         }
-      );
+      };
+      notifyStatus("success", { source: "solana" });
+      notifySuccess(payload);
       setTimeout(() => {
         onSuccess(result);
       }, 1500);
     },
-    [completeSolanaPayment, onSuccess, setTransactionId]
+    [notifyStatus, notifySuccess, onSuccess]
   );
   const handlePaymentError = React3.useCallback(
     (error) => {
-      failSolanaPayment(error);
+      setPaymentState("error");
+      setErrorMessage(error);
+      notifyStatus("error", { source: "solana" });
+      notifyError(error);
       onError?.(error);
     },
-    [failSolanaPayment, onError]
+    [notifyError, notifyStatus, onError]
   );
-  const handleRetry = React3.useCallback(() => {
-    resetSolanaPayment();
+  const resetState = React3.useCallback(() => {
+    setPaymentState("selecting");
+    setErrorMessage(null);
     setTransactionId(null);
-  }, [resetSolanaPayment, setTransactionId]);
+  }, []);
+  const handleRetry = React3.useCallback(() => {
+    resetState();
+  }, [resetState]);
   const handleClose = React3.useCallback(() => {
     if (paymentState === "processing" || paymentState === "confirming") {
       return;
     }
-    resetSolanaPayment();
-    setTransactionId(null);
-    onClose();
-  }, [paymentState, resetSolanaPayment, setTransactionId, onClose]);
+    resetState();
+    onClose?.();
+  }, [paymentState, onClose, resetState]);
   React3.useEffect(() => {
-    if (!isOpen || !selectedToken || usdAmount === 0) {
+    if (!selectedToken || usdAmount === 0) {
       setTokenAmount(0);
       return;
     }
@@ -2430,23 +2379,20 @@ var SolanaPaymentSelector = ({
       return;
     }
     setTokenAmount(usdAmount / price);
-  }, [isOpen, usdAmount, selectedToken, setTokenAmount]);
-  const handleTokenChange = React3.useCallback(
-    (value) => {
-      setSelectedTokenSymbol(value);
-    },
-    [setSelectedTokenSymbol]
-  );
+  }, [usdAmount, selectedToken]);
+  const handleTokenChange = React3.useCallback((value) => {
+    setSelectedTokenSymbol(value);
+  }, []);
   const wasConnectedRef = React3.useRef(connected);
   React3.useEffect(() => {
     if (connected && !wasConnectedRef.current) {
-      setTab("wallet");
+      setActiveTab("wallet");
     }
     if (!connected && wasConnectedRef.current) {
-      setTab("qr");
+      setActiveTab("qr");
     }
     wasConnectedRef.current = connected;
-  }, [connected, setTab]);
+  }, [connected]);
   const renderBody = () => {
     if (paymentState !== "selecting") {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2462,63 +2408,79 @@ var SolanaPaymentSelector = ({
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: tokensLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-      " Loading supported tokens\u2026"
-    ] }) : tokensError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: tokensError }) : !tokens.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No payment tokens available." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-muted/10 p-4 text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-semibold text-foreground", children: [
+    if (tokensLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-10 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+        " Loading supported tokens\u2026"
+      ] });
+    }
+    if (tokensError) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: tokensError });
+    }
+    if (!tokens.length) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No payment tokens available." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Amount due" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-3xl font-semibold text-foreground", children: [
           "$",
           usdAmount.toFixed(2),
           " USD"
         ] }),
-        selectedToken && tokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        selectedToken && tokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
           "\u2248 ",
           tokenAmount.toFixed(selectedToken.symbol === "SOL" ? 4 : 2),
           " ",
           selectedToken.symbol
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
-          token.name,
-          " (",
-          token.symbol,
-          ")"
-        ] }, token.symbol)) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
+            token.name,
+            " (",
+            token.symbol,
+            ")"
+          ] }, token.symbol)) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
         Tabs,
         {
           value: activeTab,
-          onValueChange: (value) => setTab(value),
-          className: "w-full",
+          onValueChange: (value) => setActiveTab(value),
+          className: "w-full space-y-3",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-muted/20", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-muted/10", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "wallet", disabled: !connected, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "mr-2 h-4 w-4" }),
-                " Pay with Wallet"
+                " Wallet"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "qr", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
-                " Scan QR Code"
+                " QR Code"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "wallet", className: "mt-4", children: activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx(
-              DirectPayment,
-              {
-                priceId,
-                tokenAmount,
-                selectedToken,
-                supportedTokens: tokens,
-                onPaymentStart: handlePaymentStart,
-                onPaymentConfirming: handlePaymentConfirming,
-                onPaymentSuccess: handlePaymentSuccess,
-                onPaymentError: handlePaymentError
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "qr", className: "mt-4", children: activeTab === "qr" && /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "wallet", className: "space-y-4", children: [
+              activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx(
+                DirectPayment,
+                {
+                  priceId,
+                  tokenAmount,
+                  selectedToken,
+                  supportedTokens: tokens,
+                  onPaymentStart: handlePaymentStart,
+                  onPaymentConfirming: handlePaymentConfirming,
+                  onPaymentSuccess: handlePaymentSuccess,
+                  onPaymentError: handlePaymentError
+                }
+              ),
+              !connected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-amber-100", children: "Connect your Solana wallet to continue or switch to QR mode." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "qr", children: activeTab === "qr" && /* @__PURE__ */ jsxRuntime.jsx(
               QRCodePayment,
               {
                 priceId,
@@ -2529,17 +2491,34 @@ var SolanaPaymentSelector = ({
             ) })
           ]
         }
-      ),
-      !connected && activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-100", children: "Please connect your Solana wallet to complete this payment, or switch to QR mode." })
-    ] }) });
+      ) })
+    ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Complete your payment" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Select a token and preferred method. We\u2019ll guide you through the rest." })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Solana Pay checkout" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment with your wallet or a QR code." })
+      ] }),
+      onClose && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleClose,
+          disabled: paymentState === "processing" || paymentState === "confirming",
+          className: "h-8 px-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+            " Back"
+          ]
+        }
+      )
     ] }),
     renderBody()
-  ] }) });
+  ] });
 };
 var PaymentExperience = ({
   priceId,
@@ -2549,138 +2528,176 @@ var PaymentExperience = ({
   enableNewCard = true,
   enableStoredMethods = true,
   enableSolanaPay = true,
-  checkoutSummary,
   onSolanaSuccess,
-  onSolanaError
+  onSolanaError,
+  initialMode = "cards"
 }) => {
   const showNewCard = enableNewCard && Boolean(onNewCardPayment);
-  const showStored = enableStoredMethods;
-  const {
-    selectedMethodId,
-    savedStatus,
-    savedError,
-    newCardStatus,
-    newCardError,
-    solanaModalOpen,
-    setSelectedMethod,
-    setSolanaModalOpen,
-    startSavedPayment,
-    completeSavedPayment,
-    failSavedPayment,
-    startNewCardPayment,
-    completeNewCardPayment,
-    failNewCardPayment,
-    resetSavedPayment
-  } = usePaymentStore(selectCheckoutFlow);
-  const handleMethodSelect = (method) => {
-    setSelectedMethod(method.id);
-    resetSavedPayment();
-  };
-  const handleNewCardTokenize = async (token, billing) => {
-    if (!onNewCardPayment) return;
-    try {
-      startNewCardPayment();
-      await onNewCardPayment({ token, billing });
-      completeNewCardPayment();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unable to complete payment";
-      failNewCardPayment(message);
+  const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
+  const defaultTab = showStored ? "saved" : "new";
+  const [activeTab, setActiveTab] = React3.useState(defaultTab);
+  const [mode, setMode] = React3.useState(
+    () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
+  );
+  const [selectedMethodId, setSelectedMethodId] = React3.useState(null);
+  const [savedStatus, setSavedStatus] = React3.useState("idle");
+  const [savedError, setSavedError] = React3.useState(null);
+  const [newCardStatus, setNewCardStatus] = React3.useState("idle");
+  const [newCardError, setNewCardError] = React3.useState(null);
+  const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
+  React3.useEffect(() => {
+    setActiveTab(showStored ? "saved" : "new");
+  }, [showStored]);
+  React3.useEffect(() => {
+    if (!enableSolanaPay) {
+      setMode("cards");
+      return;
     }
-  };
-  const handleSavedPayment = async () => {
+    if (initialMode === "solana") {
+      setMode("solana");
+    } else {
+      setMode("cards");
+    }
+  }, [enableSolanaPay, initialMode]);
+  const handleMethodSelect = React3.useCallback((method) => {
+    setSelectedMethodId(method.id);
+    setSavedStatus("idle");
+    setSavedError(null);
+  }, []);
+  const handleSavedPayment = React3.useCallback(async () => {
     if (!onSavedMethodPayment || !selectedMethodId) return;
     try {
-      startSavedPayment();
+      setSavedStatus("processing");
+      setSavedError(null);
+      notifyStatus("processing", { source: "saved-payment" });
       await onSavedMethodPayment({
         paymentMethodId: selectedMethodId,
         amount: usdAmount
       });
-      completeSavedPayment();
+      setSavedStatus("success");
+      notifyStatus("success", { source: "saved-payment" });
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unable to complete payment with saved card";
-      failSavedPayment(message);
+      setSavedStatus("error");
+      setSavedError(message);
+      notifyStatus("error", { source: "saved-payment" });
+      notifyError(message);
+    }
+  }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, usdAmount]);
+  const handleNewCardTokenize = React3.useCallback(
+    async (token, billing) => {
+      if (!onNewCardPayment) return;
+      try {
+        setNewCardStatus("processing");
+        setNewCardError(null);
+        notifyStatus("processing", { source: "new-card" });
+        await onNewCardPayment({ token, billing });
+        setNewCardStatus("success");
+        notifyStatus("success", { source: "new-card" });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Unable to complete payment";
+        setNewCardStatus("error");
+        setNewCardError(message);
+        notifyStatus("error", { source: "new-card" });
+        notifyError(message);
+      }
+    },
+    [notifyError, notifyStatus, onNewCardPayment]
+  );
+  const showSolanaView = React3.useCallback(() => {
+    if (!enableSolanaPay) return;
+    setMode("solana");
+  }, [enableSolanaPay]);
+  const exitSolanaView = React3.useCallback(() => {
+    setMode("cards");
+  }, []);
+  const handleSolanaSuccess = React3.useCallback(
+    (result) => {
+      onSolanaSuccess?.(result);
+      exitSolanaView();
+    },
+    [exitSolanaView, onSolanaSuccess]
+  );
+  const handleSolanaError = React3.useCallback(
+    (error) => {
+      onSolanaError?.(error);
+    },
+    [onSolanaError]
+  );
+  const renderSavedTab = () => {
+    if (!showStored) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Saved payment methods are unavailable right now. Add a new card to get started." });
     }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StoredPaymentMethods,
+        {
+          heading: "Saved cards",
+          selectedMethodId,
+          onMethodSelect: handleMethodSelect,
+          description: "Select one of your stored payment methods.",
+          showAddButton: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          className: "w-full",
+          disabled: !selectedMethodId || savedStatus === "processing",
+          onClick: handleSavedPayment,
+          children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
+        }
+      ),
+      savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: savedError })
+    ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-border/60 bg-card/95", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2 text-lg text-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-5 w-5 text-primary" }),
-            " Secure checkout"
+  const renderNewTab = () => {
+    if (!showNewCard) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select a subscription plan to add a new card." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CardDetailsForm,
+      {
+        visible: true,
+        submitLabel: "Pay now",
+        externalError: newCardError,
+        onTokenize: handleNewCardTokenize,
+        submitting: newCardStatus === "processing"
+      }
+    );
+  };
+  const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: (value) => setActiveTab(value),
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 border border-border/60", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { children: [
-            "Amount due: $",
-            usdAmount.toFixed(2)
-          ] })
-        ] }),
-        checkoutSummary && /* @__PURE__ */ jsxRuntime.jsx("div", { children: checkoutSummary })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-2", children: [
-        showStored && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StoredPaymentMethods,
-            {
-              selectedMethodId,
-              onMethodSelect: handleMethodSelect,
-              heading: "Saved cards",
-              description: "Use or manage your saved payment methods."
-            }
-          ),
-          onSavedMethodPayment && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              className: "w-full",
-              disabled: !selectedMethodId || savedStatus === "processing",
-              onClick: handleSavedPayment,
-              children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
-            }
-          ),
-          savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: savedError })
-        ] }),
-        showNewCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border/60 bg-background/80 p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
-              " Pay with a new card"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Card details are tokenized via Collect.js and never hit your server." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CardDetailsForm,
-            {
-              visible: true,
-              submitLabel: "Pay now",
-              submitting: newCardStatus === "processing",
-              externalError: newCardError,
-              onTokenize: handleNewCardTokenize
-            }
-          )
-        ] }) })
-      ] }) })
-    ] }),
-    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border border-primary/40 bg-primary/5", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-col gap-4 text-sm text-primary md:flex-row md:items-center md:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-base font-semibold text-primary", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4" }),
-          " Prefer Solana Pay?"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary/80", children: "Use a Solana wallet or QR code for instant settlement." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setSolanaModalOpen(true), children: "Open Solana Pay" })
-    ] }) }),
-    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
-      SolanaPaymentSelector,
+          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", className: "space-y-4", children: renderSavedTab() }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", className: "space-y-4", children: renderNewTab() })
+        ]
+      }
+    ),
+    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "secondary", onClick: showSolanaView, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "mr-2 h-4 w-4" }),
+      " Pay with Solana"
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
+    mode === "cards" && renderCardExperience(),
+    mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
+      SolanaPaymentView,
       {
-        isOpen: solanaModalOpen,
-        onClose: () => setSolanaModalOpen(false),
         priceId,
         usdAmount,
-        onSuccess: (result) => {
-          setSolanaModalOpen(false);
-          onSolanaSuccess?.(result);
-        },
-        onError: onSolanaError
+        onSuccess: handleSolanaSuccess,
+        onError: handleSolanaError,
+        onClose: exitSolanaView
       }
     )
   ] });
@@ -2694,23 +2711,23 @@ var SubscriptionSuccessDialog = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
     if (!value) onClose();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-sm text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex flex-col items-center gap-3 text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }),
-        "Subscription activated"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { className: "text-base text-muted-foreground", children: [
-        "You now have access to ",
-        planName,
-        ". Billing: ",
-        amountLabel,
-        " / ",
-        billingPeriodLabel,
-        "."
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border border-border/70 bg-background/95 p-0 shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-2xl font-semibold text-foreground", children: "Subscription activated" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { className: "text-base text-muted-foreground", children: [
+          "You now have access to ",
+          planName,
+          ". Billing: ",
+          amountLabel,
+          " / ",
+          billingPeriodLabel,
+          "."
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "mt-6 w-full", onClick: onClose, children: "Continue" })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
   ] }) });
 };
 var useSubscriptionActions = () => {
@@ -2832,23 +2849,22 @@ var SubscriptionCheckoutModal = ({
   userEmail,
   provider = "mobius",
   onSuccess,
-  enableSolanaPay = true
+  enableSolanaPay = true,
+  onSolanaSuccess,
+  onSolanaError,
+  initialMode = "cards"
 }) => {
   const [showSuccess, setShowSuccess] = React3.useState(false);
   const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
   const handleClose = React3.useCallback(
     (nextOpen) => {
       onOpenChange(nextOpen);
-      if (!nextOpen) {
-        setShowSuccess(false);
-      }
+      if (!nextOpen) setShowSuccess(false);
     },
     [onOpenChange]
   );
   const ensurePrice = () => {
-    if (!priceId) {
-      throw new Error("Select a plan before subscribing.");
-    }
+    if (!priceId) throw new Error("Select a plan before subscribing.");
     return priceId;
   };
   const notifySuccess = (result) => {
@@ -2878,40 +2894,34 @@ var SubscriptionCheckoutModal = ({
   };
   const solanaSuccess = (result) => {
     notifySuccess(result);
+    onSolanaSuccess?.(result);
     onOpenChange(false);
   };
-  const summary = React3.useMemo(() => {
-    if (!planName && !amountLabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-muted/10 p-3 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-foreground", children: planName ?? "Selected plan" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-        amountLabel ?? `$${usdAmount.toFixed(2)}`,
-        " ",
-        billingPeriodLabel ? `/ ${billingPeriodLabel}` : ""
-      ] })
-    ] });
-  }, [planName, amountLabel, billingPeriodLabel, usdAmount]);
+  const solanaError = (error) => {
+    onSolanaError?.(error);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-3xl", children: [
-      !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-md border border-border/60 bg-background p-0 [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-6", children: [
+      !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
         " Select a subscription plan to continue."
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         PaymentExperience,
         {
-          priceId: priceId ?? "",
           usdAmount,
-          checkoutSummary: summary,
-          onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-          onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
+          priceId: priceId ?? "",
+          onSolanaSuccess: solanaSuccess,
+          onSolanaError: solanaError,
           enableNewCard: Boolean(priceId),
           enableStoredMethods: Boolean(priceId),
           enableSolanaPay: enableSolanaPay && Boolean(priceId),
-          onSolanaSuccess: solanaSuccess
+          onNewCardPayment: priceId ? handleNewCardPayment : void 0,
+          onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
+          initialMode
         }
       )
-    ] }) }),
+    ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SubscriptionSuccessDialog,
       {
@@ -2924,6 +2934,1466 @@ var SubscriptionCheckoutModal = ({
     )
   ] });
 };
+var wallets = [
+  {
+    id: "phantom",
+    name: "Phantom",
+    icon: "https://phantom.app/img/logo.png"
+  },
+  {
+    id: "solflare",
+    name: "Solflare",
+    icon: "https://solflare.com/favicon.ico"
+  }
+];
+var WalletModal = ({ open, onOpenChange }) => {
+  const [expandedWallet, setExpandedWallet] = React3.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-border/40 bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
+        " Connect a Solana wallet"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-sm text-muted-foreground", children: "Pick a supported wallet to link with Doujins. Verified wallets unlock Solana payments and withdrawals." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-4", children: [
+      wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "rounded-2xl border border-border/60 bg-background/80 p-4 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                className: "flex w-full items-center justify-between",
+                onClick: () => setExpandedWallet((prev) => prev === wallet.id ? null : wallet.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("img", { src: wallet.icon, alt: wallet.name, className: "h-10 w-10 rounded-full" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-foreground", children: wallet.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Browser extension or mobile app" })
+                    ] })
+                  ] }),
+                  expandedWallet === wallet.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
+                ]
+              }
+            ),
+            expandedWallet === wallet.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "Open the ",
+                wallet.name,
+                " wallet, approve the connection request, and confirm the signature prompt to finish linking."
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "outline", disabled: true, children: [
+                "Connect with ",
+                wallet.name,
+                " (coming soon)"
+              ] })
+            ] })
+          ]
+        },
+        wallet.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border/60 bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
+    ] })
+  ] }) });
+};
+var createDialogState = () => ({
+  isOpen: false,
+  props: null
+});
+var PaymentsDialogContext = React3.createContext(void 0);
+var PaymentsDialogProvider = ({
+  children
+}) => {
+  const [checkoutState, setCheckoutState] = React3.useState(
+    () => createDialogState()
+  );
+  const [walletState, setWalletState] = React3.useState(
+    () => createDialogState()
+  );
+  const contextValue = React3.useMemo(() => {
+    const openCheckout = (options) => setCheckoutState({
+      isOpen: true,
+      props: options
+    });
+    return {
+      checkout: {
+        isOpen: checkoutState.isOpen,
+        open: openCheckout,
+        close: () => setCheckoutState(createDialogState())
+      },
+      solana: {
+        isOpen: checkoutState.isOpen && checkoutState.props?.initialMode === "solana",
+        open: (options) => openCheckout({
+          priceId: options.priceId,
+          usdAmount: options.usdAmount,
+          enableSolanaPay: true,
+          initialMode: "solana",
+          onSolanaSuccess: options.onSuccess,
+          onSolanaError: options.onError
+        }),
+        close: () => setCheckoutState(createDialogState())
+      },
+      wallet: {
+        isOpen: walletState.isOpen,
+        open: (options) => setWalletState({
+          isOpen: true,
+          props: options ?? null
+        }),
+        close: () => setWalletState(createDialogState())
+      }
+    };
+  }, [checkoutState, walletState.isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaymentsDialogContext.Provider, { value: contextValue, children: [
+    children,
+    checkoutState.props && /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionCheckoutModal,
+      {
+        open: checkoutState.isOpen,
+        onOpenChange: (open) => open ? setCheckoutState((prev) => ({ ...prev, isOpen: true })) : setCheckoutState(createDialogState()),
+        ...checkoutState.props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WalletModal,
+      {
+        open: walletState.isOpen,
+        onOpenChange: (open) => open ? setWalletState((prev) => ({ ...prev, isOpen: true })) : setWalletState(createDialogState()),
+        ...walletState.props ?? {}
+      }
+    )
+  ] });
+};
+var usePaymentDialogs = () => {
+  const context = React3.useContext(PaymentsDialogContext);
+  if (!context) {
+    throw new Error("usePaymentDialogs must be used within PaymentProvider");
+  }
+  return context;
+};
+var PaymentContext = React3.createContext(void 0);
+var PaymentProvider = ({
+  config,
+  runtime: runtimeProp,
+  children
+}) => {
+  const runtime = React3.useMemo(
+    () => runtimeProp ?? createPaymentsRuntime(config),
+    [runtimeProp, config]
+  );
+  const solanaEndpoint = React3.useMemo(() => {
+    if (config.solana?.endpoint) return config.solana.endpoint;
+    const network = config.solana?.network ?? WalletAdapterNetwork.Mainnet;
+    return web3_js.clusterApiUrl(network);
+  }, [config.solana?.endpoint, config.solana?.network]);
+  const walletAdapters = React3.useMemo(() => {
+    if (config.solana?.wallets?.length) {
+      return config.solana.wallets;
+    }
+    return [
+      new walletAdapterPhantom.PhantomWalletAdapter(),
+      new walletAdapterSolflare.SolflareWalletAdapter(),
+      new walletAdapterTrust.TrustWalletAdapter(),
+      new walletAdapterCoinbase.CoinbaseWalletAdapter()
+    ];
+  }, [config.solana?.wallets]);
+  const autoConnect = config.solana?.autoConnect ?? true;
+  const value = React3.useMemo(() => {
+    return {
+      config: runtime.config,
+      fetcher: runtime.app.getFetcher(),
+      resolveAuthToken: runtime.app.resolveAuthToken,
+      app: runtime.app,
+      services: runtime.services,
+      queryClient: runtime.queryClient
+    };
+  }, [runtime]);
+  React3.useEffect(() => {
+    if (!config.collectJsKey) return;
+    loadCollectJs(config.collectJsKey);
+  }, [config.collectJsKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: runtime.queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.ConnectionProvider, { endpoint: solanaEndpoint, config: { commitment: "confirmed" }, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.WalletProvider, { wallets: walletAdapters, autoConnect, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(PaymentsDialogProvider, { children }) }) }) }) }) });
+};
+var usePaymentContext = () => {
+  const context = React3.useContext(PaymentContext);
+  if (!context) {
+    throw new Error("usePaymentContext must be used within a PaymentProvider");
+  }
+  return context;
+};
+var SolanaPaymentSelector = ({
+  isOpen,
+  onClose,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
+};
+var Table = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  )
+);
+Table.displayName = "Table";
+var TableHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: cn("bg-muted/50 font-medium text-muted-foreground", className), ...props }));
+TableFooter.displayName = "TableFooter";
+var TableRow = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+TableRow.displayName = "TableRow";
+var TableHead = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-10 px-2 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+      ...props
+    }
+  )
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+TableCaption.displayName = "TableCaption";
+var AlertDialog = AlertDialogPrimitive__namespace.Root;
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+var AlertDialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
+var AlertDialogContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 text-popover-foreground shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", className),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
+var AlertDialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
+var AlertDialogAction = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
+var AlertDialogCancel = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+var Textarea = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref,
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var notifyDefault = (payload) => {
+  const level = payload.status === "destructive" ? "error" : "info";
+  console[level === "error" ? "error" : "log"]("[payments-ui] cancellation", payload);
+};
+var CancelMembershipDialog = ({
+  minReasonLength = 15,
+  onCancelled,
+  onNotify
+}) => {
+  const { services } = usePaymentContext();
+  const notify = onNotify ?? notifyDefault;
+  const [cancelReason, setCancelReason] = React3.useState("");
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [isReasonValid, setIsReasonValid] = React3.useState(false);
+  const [hasInteracted, setHasInteracted] = React3.useState(false);
+  const [isSubmitting, setIsSubmitting] = React3.useState(false);
+  React3.useEffect(() => {
+    const trimmed = cancelReason.trim();
+    setIsReasonValid(trimmed.length >= minReasonLength);
+  }, [cancelReason, minReasonLength]);
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (!open) {
+      setCancelReason("");
+      setIsReasonValid(false);
+      setHasInteracted(false);
+      setIsSubmitting(false);
+    }
+  };
+  const handleReasonChange = (e) => {
+    setCancelReason(e.target.value);
+    if (!hasInteracted) {
+      setHasInteracted(true);
+    }
+  };
+  const handleConfirm = async () => {
+    if (!isReasonValid) {
+      setHasInteracted(true);
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await services.subscriptions.cancelSubscription(cancelReason.trim());
+      notify({
+        title: "Membership cancelled",
+        description: "Your subscription has been cancelled successfully.",
+        status: "success"
+      });
+      onCancelled?.();
+      handleOpenChange(false);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to cancel membership";
+      notify({ title: "Cancellation failed", description: message, status: "destructive" });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const showError = hasInteracted && !isReasonValid;
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog, { open: isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "border-destructive/50 text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ban, { className: "mr-2 h-4 w-4" }),
+      " Cancel Membership"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-md border border-border bg-background", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "h-5 w-5 text-destructive" }),
+          " Confirm Membership Cancellation"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogDescription, { className: "mt-3 space-y-3 text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You are about to cancel your membership. Please review the consequences:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "You will immediately lose access to premium features upon confirmation." }),
+            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Your benefits remain active until the end of the billing cycle." }),
+            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Your account will revert to the free plan afterwards." })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 space-y-2 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium", children: "Please provide a reason for cancellation (required):" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            id: "cancelReason",
+            value: cancelReason,
+            onChange: handleReasonChange,
+            placeholder: "Your feedback helps us improve...",
+            className: cn(
+              "w-full resize-none border-border bg-background",
+              showError && "border-destructive"
+            ),
+            rows: 4,
+            "aria-describedby": "reason-hint",
+            "aria-invalid": showError
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: "reason-hint",
+            className: `text-xs ${showError ? "text-destructive" : "text-muted-foreground"}`,
+            children: showError ? `Reason must be at least ${minReasonLength} characters long.` : `Minimum ${minReasonLength} characters required.`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "mt-6 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "border-border text-muted-foreground", children: "Keep Membership" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            onClick: handleConfirm,
+            disabled: !isReasonValid || isSubmitting,
+            children: isSubmitting ? "Cancelling..." : "Confirm Cancellation"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+var notifyDefault2 = (payload) => {
+  const level = payload.status === "destructive" ? "error" : "info";
+  console[level === "error" ? "error" : "log"]("[payments-ui] billing", payload);
+};
+var BillingHistory = ({
+  pageSize = 10,
+  initialPage = 1,
+  enableCancel = true,
+  onNotify
+}) => {
+  const { services } = usePaymentContext();
+  const notify = onNotify ?? notifyDefault2;
+  const [isExpanded, setIsExpanded] = React3.useState(false);
+  const observerRef = React3.useRef(null);
+  const loadMoreRef = React3.useRef(null);
+  const historyQuery = reactQuery.useInfiniteQuery({
+    queryKey: ["payments-ui", "billing-history", pageSize],
+    queryFn: async ({ pageParam = initialPage }) => {
+      const offset = (pageParam - 1) * pageSize;
+      return services.subscriptions.getPaymentHistory({ limit: pageSize, offset });
+    },
+    initialPageParam: initialPage,
+    getNextPageParam: (lastPage) => {
+      const nextOffset = (lastPage.offset ?? 0) + lastPage.data.length;
+      if (lastPage.total_items <= nextOffset) {
+        return void 0;
+      }
+      return lastPage.page ? lastPage.page + 1 : initialPage + 1;
+    },
+    staleTime: 5 * 60 * 1e3
+  });
+  React3.useEffect(() => {
+    if (!loadMoreRef.current || !isExpanded) return;
+    observerRef.current = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+      if (entry?.isIntersecting && historyQuery.hasNextPage && !historyQuery.isFetchingNextPage) {
+        historyQuery.fetchNextPage().catch(() => {
+          notify({ title: "Failed to load more history", status: "destructive" });
+        });
+      }
+    });
+    observerRef.current.observe(loadMoreRef.current);
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [historyQuery, isExpanded, notify]);
+  const payments = React3.useMemo(() => {
+    const data = historyQuery.data;
+    return data?.pages ?? [];
+  }, [historyQuery.data]);
+  const formatDate = (value) => new Date(value).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  const formatAmount = (amount, currency) => {
+    try {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency
+      }).format(amount);
+    } catch {
+      return `${amount.toFixed(2)} ${currency}`;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-background/5 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 sm:p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center justify-between", onClick: () => setIsExpanded((prev) => !prev), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl font-semibold", children: "Transaction History" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Record of billing history" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-5 w-5 text-muted-foreground transition-transform", isExpanded && "rotate-180") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-300",
+          isExpanded ? "mt-4 max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0 pt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Review your account activity below" }),
+            enableCancel && /* @__PURE__ */ jsxRuntime.jsx(CancelMembershipDialog, { onNotify: notify })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: "Loading..." }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: "Error loading billing history." }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/60", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Reference" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Date" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Amount" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Processor" }),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Status" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: payments.map(
+              (page) => page.data.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/40", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-mono text-sm", children: payment.id.slice(0, 7).toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatDate(payment.purchased_at) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatAmount(payment.amount, payment.currency) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "capitalize", children: payment.processor }),
+                /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-emerald-500/10 text-emerald-400", children: (payment.status || "completed").toLowerCase() }) })
+              ] }, payment.id))
+            ) })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: "h-10 w-full", children: historyQuery.isFetchingNextPage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: "Loading more..." }) })
+        ] }) })
+      }
+    )
+  ] }) });
+};
+var formatCardLabel2 = (method) => {
+  const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
+  const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
+  return `${brand} ${lastFour}`.trim();
+};
+var notifyDefault3 = (payload) => {
+  const level = payload.status === "destructive" ? "error" : "info";
+  console[level === "error" ? "error" : "log"]("[payments-ui] notification", payload);
+};
+var PaymentMethodsSection = ({
+  isAuthenticated = true,
+  userEmail,
+  provider = "mobius",
+  defaultCountry = "US",
+  collectPrefix = "account-card",
+  onNotify
+}) => {
+  const paymentMethods = usePaymentMethodService();
+  const queryClient = reactQuery.useQueryClient();
+  const [isModalOpen, setIsModalOpen] = React3.useState(false);
+  const [deletingId, setDeletingId] = React3.useState(null);
+  const notify = onNotify ?? notifyDefault3;
+  const queryKey = ["payments-ui", "payment-methods"];
+  const paymentQuery = reactQuery.useQuery({
+    queryKey,
+    queryFn: () => paymentMethods.list({ pageSize: 50 }),
+    enabled: isAuthenticated,
+    staleTime: 3e4
+  });
+  const createMutation = reactQuery.useMutation({
+    mutationFn: (payload) => paymentMethods.create(payload),
+    onSuccess: () => {
+      notify({ title: "Card added successfully", status: "success" });
+      setIsModalOpen(false);
+      void queryClient.invalidateQueries({ queryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: "Unable to add card",
+        description: error.message,
+        status: "destructive"
+      });
+    }
+  });
+  const deleteMutation = reactQuery.useMutation({
+    mutationFn: (id) => paymentMethods.remove(id),
+    onMutate: (id) => setDeletingId(id),
+    onSuccess: () => {
+      notify({ title: "Card removed", status: "success" });
+      void queryClient.invalidateQueries({ queryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: "Unable to remove card",
+        description: error.message,
+        status: "destructive"
+      });
+    },
+    onSettled: () => setDeletingId(null)
+  });
+  React3.useEffect(() => {
+    if (!isModalOpen) {
+      createMutation.reset();
+    }
+  }, [createMutation, isModalOpen]);
+  const payments = React3.useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
+  const loading = paymentQuery.isLoading || paymentQuery.isFetching;
+  const handleCardTokenize = (token, billing) => {
+    const payload = {
+      payment_token: token,
+      first_name: billing.firstName,
+      last_name: billing.lastName,
+      address1: billing.address1,
+      address2: billing.address2,
+      city: billing.city,
+      state: billing.stateRegion,
+      zip: billing.postalCode,
+      country: billing.country,
+      email: billing.email,
+      provider: billing.provider
+    };
+    createMutation.mutate(payload);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-0 bg-background/5 shadow-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2 text-xl", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "h-5 w-5 text-primary" }),
+          " Payment Methods"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Manage your saved billing cards" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => setIsModalOpen(true), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
+        " Add card"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "space-y-4", children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-10 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
+      " Loading cards..."
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 p-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-lg border border-border/80 bg-background/40 p-4 shadow-sm",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-medium text-foreground", children: formatCardLabel2(method) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                "Added on",
+                " ",
+                method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown date"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Badge,
+                {
+                  variant: method.is_active ? "default" : "secondary",
+                  className: method.is_active ? "bg-emerald-500/20 text-emerald-400" : "",
+                  children: method.is_active ? "Active" : "Inactive"
+                }
+              ),
+              method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "text-destructive hover:text-destructive",
+              disabled: deletingId === method.id && deleteMutation.isPending,
+              onClick: () => deleteMutation.mutate(method.id),
+              children: [
+                deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "mr-2 h-4 w-4" }),
+                "Remove"
+              ]
+            }
+          ) })
+        ]
+      },
+      method.id
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto border border-border bg-background", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add a new card" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your card details are tokenized securely via our payment provider." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CardDetailsForm,
+        {
+          visible: isModalOpen,
+          collectPrefix,
+          submitting: createMutation.isPending,
+          submitLabel: "Save card",
+          defaultValues: {
+            email: userEmail ?? "",
+            country: defaultCountry,
+            provider
+          },
+          externalError: createMutation.error?.message ?? null,
+          onTokenize: handleCardTokenize,
+          className: "rounded-2xl border border-border bg-muted/20 p-6"
+        }
+      )
+    ] }) })
+  ] });
+};
+var useWalletList = (options = {}) => {
+  const { services } = usePaymentContext();
+  const [state, setState] = React3.useState({
+    wallets: [],
+    isLoading: false,
+    error: null
+  });
+  const fetchWallets = React3.useCallback(async () => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const wallets2 = await services.solanaWallets.list();
+      setState({ wallets: wallets2, isLoading: false, error: null });
+      return wallets2;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load wallets";
+      console.error("payments-ui: wallet list fetch failed", error);
+      setState((prev) => ({ ...prev, isLoading: false, error: message }));
+      throw error;
+    }
+  }, [services.solanaWallets]);
+  const deleteWallet = React3.useCallback(
+    async (walletIdOrAddress) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        await services.solanaWallets.remove(walletIdOrAddress);
+        setState((prev) => ({
+          ...prev,
+          wallets: prev.wallets.filter(
+            (wallet) => wallet.id !== walletIdOrAddress && wallet.address !== walletIdOrAddress
+          ),
+          isLoading: false
+        }));
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to remove wallet";
+        console.error("payments-ui: wallet removal failed", error);
+        setState((prev) => ({ ...prev, isLoading: false, error: message }));
+        throw error;
+      }
+    },
+    [services.solanaWallets]
+  );
+  const addWallet = React3.useCallback((wallet) => {
+    setState((prev) => ({ ...prev, wallets: [...prev.wallets, wallet] }));
+  }, []);
+  const updateWallet = React3.useCallback((walletId, updates) => {
+    setState((prev) => ({
+      ...prev,
+      wallets: prev.wallets.map(
+        (wallet) => wallet.id === walletId ? { ...wallet, ...updates } : wallet
+      )
+    }));
+  }, []);
+  const clearError = React3.useCallback(() => {
+    setState((prev) => ({ ...prev, error: null }));
+  }, []);
+  const findWalletByAddress = React3.useCallback(
+    (address) => state.wallets.find((wallet) => wallet.address === address),
+    [state.wallets]
+  );
+  const getVerifiedWallets = React3.useCallback(
+    () => state.wallets.filter((wallet) => wallet.is_verified),
+    [state.wallets]
+  );
+  React3.useEffect(() => {
+    if (options.autoFetch !== false) {
+      fetchWallets().catch(() => {
+      });
+    }
+  }, [fetchWallets, options.autoFetch]);
+  return {
+    wallets: state.wallets,
+    isLoading: state.isLoading,
+    error: state.error,
+    fetchWallets,
+    deleteWallet,
+    addWallet,
+    updateWallet,
+    clearError,
+    findWalletByAddress,
+    getVerifiedWallets,
+    hasVerifiedWallets: state.wallets.some((w) => w.is_verified),
+    totalWallets: state.wallets.length
+  };
+};
+var useWalletVerification = () => {
+  const { services } = usePaymentContext();
+  const { publicKey, signMessage } = walletAdapterReact.useWallet();
+  const [state, setState] = React3.useState({
+    isVerifying: false,
+    isVerified: false,
+    error: null
+  });
+  const signAndVerifyWallet = React3.useCallback(
+    async (walletAddress, message, nonce) => {
+      if (!publicKey || !signMessage) {
+        throw new Error("Wallet not connected or signing unavailable");
+      }
+      if (publicKey.toBase58() !== walletAddress) {
+        throw new Error("Connected wallet does not match target wallet");
+      }
+      setState((prev) => ({ ...prev, isVerifying: true, error: null }));
+      try {
+        const encodedMessage = new TextEncoder().encode(message);
+        const signature = await signMessage(encodedMessage);
+        const signatureBase58 = bs58__default.default.encode(signature);
+        const response = await services.solanaWallets.verify(
+          walletAddress,
+          signatureBase58,
+          nonce
+        );
+        setState({ isVerifying: false, isVerified: response.verified, error: null });
+        return response;
+      } catch (error) {
+        const message2 = error instanceof Error ? error.message : "Wallet verification failed";
+        console.error("payments-ui: wallet verification failed", error);
+        setState({ isVerifying: false, isVerified: false, error: message2 });
+        throw error;
+      }
+    },
+    [publicKey, signMessage, services.solanaWallets]
+  );
+  const clearError = React3.useCallback(() => {
+    setState((prev) => ({ ...prev, error: null }));
+  }, []);
+  const resetVerification = React3.useCallback(() => {
+    setState({ isVerifying: false, isVerified: false, error: null });
+  }, []);
+  const autoVerifyWallet = React3.useCallback(
+    async (walletAddress, message, nonce) => {
+      try {
+        return await signAndVerifyWallet(walletAddress, message, nonce);
+      } catch (error) {
+        console.warn("payments-ui: auto-verification skipped", error);
+        return null;
+      }
+    },
+    [signAndVerifyWallet]
+  );
+  return {
+    ...state,
+    signAndVerifyWallet,
+    autoVerifyWallet,
+    clearError,
+    resetVerification
+  };
+};
+var useWalletConnection = () => {
+  const { services } = usePaymentContext();
+  const { publicKey, connected, connecting, disconnect, wallet } = walletAdapterReact.useWallet();
+  const [state, setState] = React3.useState({
+    isConnected: false,
+    isConnecting: false,
+    publicKey: null,
+    wallets: [],
+    isLoading: false,
+    error: null
+  });
+  React3.useEffect(() => {
+    setState((prev) => ({
+      ...prev,
+      isConnected: connected,
+      isConnecting: connecting,
+      publicKey: publicKey?.toBase58() ?? null
+    }));
+  }, [connected, connecting, publicKey]);
+  const connectWalletToBackend = React3.useCallback(
+    async (address) => {
+      if (!address) {
+        throw new Error("Wallet address is required");
+      }
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const challenge = await services.solanaWallets.requestChallenge(address);
+        setState((prev) => ({ ...prev, isLoading: false }));
+        return challenge;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Wallet challenge failed";
+        console.error("payments-ui: wallet challenge failed", error);
+        setState((prev) => ({ ...prev, isLoading: false, error: message }));
+        throw error;
+      }
+    },
+    [services.solanaWallets]
+  );
+  const connectWallet = React3.useCallback(async () => {
+    if (!wallet) {
+      throw new Error("No wallet adapter selected");
+    }
+    setState((prev) => ({ ...prev, isConnecting: true, error: null }));
+    try {
+      await wallet.adapter.connect();
+      if (publicKey) {
+        await connectWalletToBackend(publicKey.toBase58());
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to connect wallet";
+      console.error("payments-ui: wallet connection failed", error);
+      setState((prev) => ({ ...prev, isConnecting: false, error: message }));
+      throw error;
+    } finally {
+      setState((prev) => ({ ...prev, isConnecting: false }));
+    }
+  }, [wallet, publicKey, connectWalletToBackend]);
+  const disconnectWallet = React3.useCallback(async () => {
+    try {
+      await disconnect();
+      setState((prev) => ({
+        ...prev,
+        isConnected: false,
+        publicKey: null,
+        wallets: [],
+        error: null
+      }));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to disconnect wallet";
+      console.error("payments-ui: wallet disconnect failed", error);
+      setState((prev) => ({ ...prev, error: message }));
+      throw error;
+    }
+  }, [disconnect]);
+  const clearError = React3.useCallback(() => {
+    setState((prev) => ({ ...prev, error: null }));
+  }, []);
+  return {
+    ...state,
+    walletName: wallet?.adapter.name,
+    walletIcon: wallet?.adapter.icon,
+    connectWallet,
+    disconnectWallet,
+    connectWalletToBackend,
+    clearError
+  };
+};
+var notifyDefault4 = (payload) => {
+  console.log("[payments-ui] wallet-card", payload);
+};
+var WalletCard = ({
+  wallet,
+  isPrimary = false,
+  isConnected = false,
+  balance,
+  onSetPrimary,
+  onVerify,
+  onDelete,
+  isVerifying = false,
+  isDeleting = false,
+  notify = notifyDefault4
+}) => {
+  const [isCopying, setIsCopying] = React3.useState(false);
+  const formatAddress = (address) => address.length <= 12 ? address : `${address.slice(0, 4)}...${address.slice(-4)}`;
+  const copyToClipboard = async (text) => {
+    setIsCopying(true);
+    try {
+      await navigator.clipboard.writeText(text);
+      notify({ title: "Copied", description: "Wallet address copied to clipboard" });
+    } catch (error) {
+      notify({ title: "Failed to copy", description: error.message, status: "destructive" });
+    } finally {
+      setTimeout(() => setIsCopying(false), 500);
+    }
+  };
+  const openExplorer = () => {
+    window.open(`https://solscan.io/account/${wallet.address}`, "_blank", "noopener,noreferrer");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border bg-background/40 p-4 transition-shadow",
+        isPrimary && "border-primary/50 shadow-lg",
+        isConnected && "ring-1 ring-primary"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-5 rounded-full bg-gradient-to-br from-primary to-primary/60" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm font-medium", children: formatAddress(wallet.address) }),
+                isPrimary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { className: "h-3 w-3 fill-yellow-500 text-yellow-500" }),
+                  " Primary"
+                ] }),
+                wallet.is_verified ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-emerald-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-3.5 w-3.5" }),
+                  " Verified"
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3.5 w-3.5" }),
+                  " Unverified"
+                ] }),
+                isConnected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400", children: "Connected" })
+              ] }),
+              balance !== null && typeof balance !== "undefined" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+                "Balance: ",
+                balance.toFixed(4),
+                " SOL"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+                "Added ",
+                new Date(wallet.created_at).toLocaleDateString()
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => copyToClipboard(wallet.address),
+                disabled: isCopying,
+                children: isCopying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: openExplorer, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+          !isPrimary && onSetPrimary && wallet.is_verified && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "border-primary/40 text-primary",
+              onClick: () => onSetPrimary(wallet.id),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { className: "mr-1 h-3 w-3" }),
+                " Set Primary"
+              ]
+            }
+          ),
+          !wallet.is_verified && onVerify && isConnected && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "border-emerald-500/40 text-emerald-400",
+              onClick: () => onVerify(wallet),
+              disabled: isVerifying,
+              children: isVerifying ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 h-3 w-3 animate-spin" }),
+                " Verifying..."
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "mr-1 h-3 w-3" }),
+                " Verify"
+              ] })
+            }
+          ),
+          onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "ml-auto border-destructive/40 text-destructive",
+              onClick: () => onDelete(wallet.id),
+              disabled: isDeleting,
+              children: isDeleting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var EmptyWalletState = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "mb-4 h-12 w-12 text-muted-foreground" }),
+  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-medium", children: "No wallets connected" }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-sm text-muted-foreground", children: "Connect your Solana wallet to get started" }),
+  /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletMultiButton, { className: "!bg-primary text-primary-foreground hover:!bg-primary/90" })
+] });
+var notifyDefault5 = (payload) => {
+  console.log("[payments-ui] solana-wallets", payload);
+};
+var SolanaWalletSection = ({
+  onNotify,
+  rpcUrl
+}) => {
+  const notify = onNotify ?? notifyDefault5;
+  const { config } = usePaymentContext();
+  const { connected, publicKey, disconnect } = walletAdapterReact.useWallet();
+  const { wallets: wallets2, isLoading, deleteWallet, fetchWallets } = useWalletList();
+  const { signAndVerifyWallet } = useWalletVerification();
+  const walletConnection = useWalletConnection();
+  const [primaryWalletId, setPrimaryWalletId] = React3.useState(null);
+  const [showOtherWallets, setShowOtherWallets] = React3.useState(false);
+  const [balances, setBalances] = React3.useState({});
+  const [verifyingWalletId, setVerifyingWalletId] = React3.useState(null);
+  const [deletingWalletId, setDeletingWalletId] = React3.useState(null);
+  const [walletToDelete, setWalletToDelete] = React3.useState(null);
+  const [isRegistering, setIsRegistering] = React3.useState(false);
+  const rpcEndpoint = rpcUrl || config.solanaRpcUrl || "https://api.mainnet-beta.solana.com";
+  const connection = React3.useMemo(() => new web3_js.Connection(rpcEndpoint), [rpcEndpoint]);
+  const primaryWallet = wallets2.find((w) => w.id === primaryWalletId) ?? wallets2.find((w) => w.is_verified) ?? null;
+  const otherWallets = wallets2.filter((w) => w.id !== primaryWallet?.id);
+  const fetchBalance = React3.useCallback(
+    async (address) => {
+      try {
+        const pubkey = new web3_js.PublicKey(address);
+        const balance = await connection.getBalance(pubkey);
+        return balance / web3_js.LAMPORTS_PER_SOL;
+      } catch (error) {
+        console.error("payments-ui: failed to fetch balance", error);
+        return null;
+      }
+    },
+    [connection]
+  );
+  const fetchAllBalances = React3.useCallback(async () => {
+    const results = await Promise.all(
+      wallets2.map(async (wallet) => ({ address: wallet.address, balance: await fetchBalance(wallet.address) }))
+    );
+    const next = {};
+    results.forEach(({ address, balance }) => {
+      if (balance !== null && typeof balance !== "undefined") {
+        next[address] = balance;
+      }
+    });
+    setBalances(next);
+  }, [wallets2, fetchBalance]);
+  React3.useEffect(() => {
+    if (wallets2.length > 0) {
+      fetchAllBalances().catch(() => void 0);
+    }
+  }, [wallets2, fetchAllBalances]);
+  React3.useEffect(() => {
+    const verifiedWallet = wallets2.find((w) => w.is_verified);
+    if (verifiedWallet && !primaryWalletId) {
+      setPrimaryWalletId(verifiedWallet.id);
+    }
+  }, [wallets2, primaryWalletId]);
+  const registerWallet = React3.useCallback(async () => {
+    if (!connected || !publicKey || isRegistering) return;
+    setIsRegistering(true);
+    try {
+      const challenge = await walletConnection.connectWalletToBackend(publicKey.toBase58());
+      if (!challenge?.message) {
+        throw new Error("Failed to retrieve wallet verification challenge");
+      }
+      await signAndVerifyWallet(challenge.wallet, challenge.message, challenge.nonce);
+      await fetchWallets();
+      notify({
+        title: "Wallet verified",
+        description: "Your wallet has been linked successfully.",
+        status: "success"
+      });
+    } catch (error) {
+      notify({
+        title: "Wallet verification failed",
+        description: error instanceof Error ? error.message : "Failed to verify wallet",
+        status: "destructive"
+      });
+    } finally {
+      setIsRegistering(false);
+    }
+  }, [connected, publicKey, isRegistering, walletConnection, signAndVerifyWallet, fetchWallets, notify]);
+  React3.useEffect(() => {
+    if (connected && publicKey && !walletConnection.isConnecting && wallets2.length === 0) {
+      registerWallet().catch(() => void 0);
+    }
+  }, [connected, publicKey, walletConnection.isConnecting, wallets2.length, registerWallet]);
+  const handleVerifyWallet = React3.useCallback(
+    async (wallet) => {
+      if (!connected || publicKey?.toBase58() !== wallet.address) {
+        notify({
+          title: "Connect wallet first",
+          description: "Please connect the wallet you want to verify.",
+          status: "destructive"
+        });
+        return;
+      }
+      setVerifyingWalletId(wallet.id);
+      try {
+        const challenge = await walletConnection.connectWalletToBackend(wallet.address);
+        if (!challenge?.message) {
+          throw new Error("Failed to retrieve verification challenge");
+        }
+        await signAndVerifyWallet(challenge.wallet, challenge.message, challenge.nonce);
+        await fetchWallets();
+        notify({ title: "Wallet verified", status: "success" });
+      } catch (error) {
+        notify({
+          title: "Verification failed",
+          description: error instanceof Error ? error.message : "Failed to verify wallet",
+          status: "destructive"
+        });
+      } finally {
+        setVerifyingWalletId(null);
+      }
+    },
+    [connected, publicKey, walletConnection, signAndVerifyWallet, fetchWallets, notify]
+  );
+  const handleDeleteWallet = React3.useCallback(
+    async (walletId) => {
+      setDeletingWalletId(walletId);
+      try {
+        await deleteWallet(walletId);
+        if (primaryWalletId === walletId) {
+          setPrimaryWalletId(null);
+        }
+        if (connected && publicKey) {
+          const deletedWallet = wallets2.find((w) => w.id === walletId);
+          if (deletedWallet?.address === publicKey.toBase58()) {
+            await disconnect();
+          }
+        }
+        notify({ title: "Wallet removed", status: "success" });
+      } catch (error) {
+        notify({
+          title: "Failed to remove wallet",
+          description: error instanceof Error ? error.message : "Please try again",
+          status: "destructive"
+        });
+      } finally {
+        setDeletingWalletId(null);
+        setWalletToDelete(null);
+      }
+    },
+    [deleteWallet, primaryWalletId, connected, publicKey, wallets2, disconnect, notify]
+  );
+  const handleSetPrimary = (walletId) => {
+    setPrimaryWalletId(walletId);
+    notify({ title: "Primary wallet updated", status: "success" });
+  };
+  const isWalletRegistered = connected && publicKey && wallets2.some((w) => w.address === publicKey.toBase58());
+  if (isLoading && wallets2.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-0 bg-background/5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl", children: "Solana Wallets" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-6 w-6 animate-spin text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Loading wallets..." })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-0 bg-background/5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl", children: "Solana Wallets" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "Connect and manage your Solana wallets for payments" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "space-y-4", children: wallets2.length === 0 && !connected ? /* @__PURE__ */ jsxRuntime.jsx(EmptyWalletState, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        primaryWallet && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-sm font-medium uppercase tracking-wide text-muted-foreground", children: "Primary Wallet" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            WalletCard,
+            {
+              wallet: primaryWallet,
+              isPrimary: true,
+              isConnected: connected && publicKey?.toBase58() === primaryWallet.address,
+              balance: balances[primaryWallet.address],
+              onVerify: handleVerifyWallet,
+              onDelete: (id) => {
+                const target = wallets2.find((w) => w.id === id);
+                if (target) setWalletToDelete(target);
+              },
+              isVerifying: verifyingWalletId === primaryWallet.id,
+              isDeleting: deletingWalletId === primaryWallet.id,
+              notify
+            }
+          )
+        ] }),
+        otherWallets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: "mb-3 flex w-full items-center justify-between text-left",
+              onClick: () => setShowOtherWallets((prev) => !prev),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-medium uppercase tracking-wide text-muted-foreground", children: [
+                  "Other Wallets (",
+                  otherWallets.length,
+                  ")"
+                ] }),
+                showOtherWallets ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
+              ]
+            }
+          ),
+          showOtherWallets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: otherWallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsx(
+            WalletCard,
+            {
+              wallet,
+              isConnected: connected && publicKey?.toBase58() === wallet.address,
+              balance: balances[wallet.address],
+              onSetPrimary: handleSetPrimary,
+              onVerify: handleVerifyWallet,
+              onDelete: (id) => {
+                const target = wallets2.find((w) => w.id === id);
+                if (target) setWalletToDelete(target);
+              },
+              isVerifying: verifyingWalletId === wallet.id,
+              isDeleting: deletingWalletId === wallet.id,
+              notify
+            },
+            wallet.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: connected && publicKey ? isWalletRegistered ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm text-emerald-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" }),
+            " Connected wallet is verified and linked to your account."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200", children: "Your connected wallet is not registered with your account." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: registerWallet, disabled: isRegistering || walletConnection.isConnecting, className: "flex-1 bg-primary text-primary-foreground", children: isRegistering ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+              " Registering..."
+            ] }) : "Register This Wallet" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => disconnect(), variant: "outline", className: "border-border", children: "Disconnect" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open: !!walletToDelete, onOpenChange: () => setWalletToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: "Remove Wallet" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: "Are you sure you want to remove this wallet from your account? This action cannot be undone." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => walletToDelete && handleDeleteWallet(walletToDelete.id), className: "bg-destructive text-destructive-foreground", children: "Remove" })
+      ] })
+    ] }) })
+  ] });
+};
+var WalletManagement = (props) => /* @__PURE__ */ jsxRuntime.jsx(SolanaWalletSection, { ...props });
+var Checkbox = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+var initialState = {
+  nameOnCard: "",
+  cardNumber: "",
+  expiration: "",
+  cvv: "",
+  termsAccepted: false
+};
+var WalletDialog = ({ open, onOpenChange }) => {
+  const [form, setForm] = React3.useState(initialState);
+  const [errors, setErrors] = React3.useState({});
+  const validators = React3.useMemo(
+    () => ({
+      nameOnCard: (value) => !value ? "Name is required" : void 0,
+      cardNumber: (value) => /^\d{16}$/.test(value) ? void 0 : "Card number must be 16 digits",
+      expiration: (value) => /^(0[1-9]|1[0-2])\/([2-9]\d)$/.test(value) ? void 0 : "Must be in MM/YY format",
+      cvv: (value) => /^\d{3,4}$/.test(value) ? void 0 : "CVV must be 3 or 4 digits",
+      termsAccepted: (value) => value ? void 0 : "You must accept the terms"
+    }),
+    []
+  );
+  const updateField = (field, value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: void 0 }));
+  };
+  const validate = () => {
+    const next = {};
+    Object.keys(validators).forEach((key) => {
+      const validator = validators[key];
+      const message = validator?.(form[key]);
+      if (message) {
+        next[key] = message;
+      }
+    });
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!validate()) return;
+    console.log("[payments-ui] wallet dialog submit", form);
+    onOpenChange(false);
+    setForm(initialState);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-border/60 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-5 w-5 text-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide", children: "Secure Payment via Mobius Pay" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-muted-foreground", children: "$23 USD per month, cancel at any time." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-5 px-2 py-4 sm:px-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Name on Card" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRound, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.nameOnCard, onChange: (e) => updateField("nameOnCard", e.target.value), className: "pl-10" })
+          ] }),
+          errors.nameOnCard && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.nameOnCard })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Credit Card Number" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cardNumber, onChange: (e) => updateField("cardNumber", e.target.value), className: "pl-10" })
+          ] }),
+          errors.cardNumber && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cardNumber })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Expiration" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.expiration, onChange: (e) => updateField("expiration", e.target.value), className: "pl-10", placeholder: "MM/YY" })
+            ] }),
+            errors.expiration && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.expiration })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "CVV" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyRound, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cvv, onChange: (e) => updateField("cvv", e.target.value), className: "pl-10" })
+            ] }),
+            errors.cvv && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cvv })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/70 bg-muted/10 p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "terms-agree", className: "text-sm text-muted-foreground", children: "By completing this order, I confirm that I am 18 years or older and agree to your privacy policy and terms." })
+      ] }),
+      errors.termsAccepted && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: errors.termsAccepted }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "flex-1", children: "Subscribe" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "flex-1", children: "Close" }) })
+      ] })
+    ] })
+  ] }) });
+};
 var useTokenBalance = (tokens) => {
   const { publicKey } = walletAdapterReact.useWallet();
   const { connection } = walletAdapterReact.useConnection();
@@ -3443,33 +4913,50 @@ var useAlternativePaymentProvider = () => {
   return { openFlexForm, isLoading, error };
 };
 
+exports.BillingHistory = BillingHistory;
+exports.CancelMembershipDialog = CancelMembershipDialog;
 exports.CardDetailsForm = CardDetailsForm;
 exports.CardPaymentService = CardPaymentService;
+exports.EmptyWalletState = EmptyWalletState;
 exports.PaymentApp = PaymentApp;
 exports.PaymentExperience = PaymentExperience;
 exports.PaymentMethodService = PaymentMethodService;
+exports.PaymentMethodsSection = PaymentMethodsSection;
 exports.PaymentProvider = PaymentProvider;
+exports.PaymentsDialogProvider = PaymentsDialogProvider;
+exports.PaymentsRuntime = PaymentsRuntime;
 exports.SolanaPaymentSelector = SolanaPaymentSelector;
 exports.SolanaPaymentService = SolanaPaymentService;
+exports.SolanaPaymentView = SolanaPaymentView;
+exports.SolanaWalletSection = SolanaWalletSection;
+exports.SolanaWalletService = SolanaWalletService;
 exports.StoredPaymentMethods = StoredPaymentMethods;
 exports.SubscriptionCheckoutModal = SubscriptionCheckoutModal;
 exports.SubscriptionService = SubscriptionService;
 exports.SubscriptionSuccessDialog = SubscriptionSuccessDialog;
 exports.TokenCatalog = TokenCatalog;
+exports.WalletCard = WalletCard;
+exports.WalletDialog = WalletDialog;
 exports.WalletGateway = WalletGateway;
-exports.createPaymentStore = createPaymentStore;
+exports.WalletManagement = WalletManagement;
+exports.WalletModal = WalletModal;
+exports.createPaymentsRuntime = createPaymentsRuntime;
 exports.useAlternativePaymentProvider = useAlternativePaymentProvider;
 exports.useDirectWalletPayment = useDirectWalletPayment;
 exports.usePaymentContext = usePaymentContext;
+exports.usePaymentDialogs = usePaymentDialogs;
 exports.usePaymentMethodService = usePaymentMethodService;
 exports.usePaymentMethods = usePaymentMethods;
+exports.usePaymentNotifications = usePaymentNotifications;
 exports.usePaymentStatus = usePaymentStatus;
-exports.usePaymentStore = usePaymentStore;
 exports.useSolanaDirectPayment = useSolanaDirectPayment;
 exports.useSolanaQrPayment = useSolanaQrPayment;
 exports.useSolanaService = useSolanaService;
 exports.useSubscriptionActions = useSubscriptionActions;
 exports.useSupportedTokens = useSupportedTokens;
 exports.useTokenBalance = useTokenBalance;
+exports.useWalletConnection = useWalletConnection;
+exports.useWalletList = useWalletList;
+exports.useWalletVerification = useWalletVerification;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map