@solvapay/react 1.0.8-preview.9 → 1.0.9

package/dist/{chunk-MOP3ZBGC.js → chunk-37R5NZGF.js}

@@ -31,6 +31,240 @@ function getPrimaryPurchase(purchases) {
 function isPaidPurchase(purchase) {
   return (purchase.amount ?? 0) > 0;
 }
+function isPlanPurchase(purchase) {
+  return !!purchase.planSnapshot && purchase.metadata?.purpose !== "credit_topup";
+}
+function isTopupPurchase(purchase) {
+  return !isPlanPurchase(purchase);
+}
+
+// src/utils/headers.ts
+var CUSTOMER_REF_KEY = "solvapay_customerRef";
+var CUSTOMER_REF_EXPIRY = "solvapay_customerRef_expiry";
+var CUSTOMER_REF_USER_ID_KEY = "solvapay_customerRef_userId";
+function getAuthAdapter(config) {
+  if (config?.auth?.adapter) {
+    return config.auth.adapter;
+  }
+  return defaultAuthAdapter;
+}
+function getCachedCustomerRef(userId) {
+  if (typeof window === "undefined") return null;
+  const cached = localStorage.getItem(CUSTOMER_REF_KEY);
+  const expiry = localStorage.getItem(CUSTOMER_REF_EXPIRY);
+  const cachedUserId = localStorage.getItem(CUSTOMER_REF_USER_ID_KEY);
+  if (!cached || !expiry) return null;
+  if (Date.now() > parseInt(expiry)) {
+    localStorage.removeItem(CUSTOMER_REF_KEY);
+    localStorage.removeItem(CUSTOMER_REF_EXPIRY);
+    localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
+    return null;
+  }
+  if (userId !== void 0 && userId !== null) {
+    if (cachedUserId !== userId) {
+      clearCachedCustomerRef();
+      return null;
+    }
+  }
+  return cached;
+}
+var CACHE_DURATION = 24 * 60 * 60 * 1e3;
+function setCachedCustomerRef(customerRef, userId) {
+  if (typeof window === "undefined") return;
+  if (userId === void 0 || userId === null) {
+    return;
+  }
+  localStorage.setItem(CUSTOMER_REF_KEY, customerRef);
+  localStorage.setItem(CUSTOMER_REF_EXPIRY, String(Date.now() + CACHE_DURATION));
+  localStorage.setItem(CUSTOMER_REF_USER_ID_KEY, userId);
+}
+function clearCachedCustomerRef() {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(CUSTOMER_REF_KEY);
+  localStorage.removeItem(CUSTOMER_REF_EXPIRY);
+  localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
+}
+async function buildRequestHeaders(config) {
+  const adapter = getAuthAdapter(config);
+  const token = await adapter.getToken();
+  const userId = await adapter.getUserId();
+  const cachedRef = getCachedCustomerRef(userId);
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  if (cachedRef) {
+    headers["x-solvapay-customer-ref"] = cachedRef;
+  }
+  if (config?.headers) {
+    const custom = typeof config.headers === "function" ? await config.headers() : config.headers;
+    Object.assign(headers, custom);
+  }
+  return { headers, userId };
+}
+
+// src/transport/http.ts
+async function request(config, url, opts) {
+  const { headers } = await buildRequestHeaders(config);
+  const fetchFn = config?.fetch || fetch;
+  const init = { method: opts.method, headers };
+  if (opts.body !== void 0) {
+    init.body = JSON.stringify(opts.body);
+  }
+  const res = await fetchFn(url, init);
+  if (!res.ok) {
+    let serverMessage;
+    try {
+      const data = await res.clone().json();
+      serverMessage = data?.error;
+    } catch {
+    }
+    const error = new Error(serverMessage || `${opts.errorPrefix}: ${res.statusText || res.status}`);
+    config?.onError?.(error, opts.onErrorContext);
+    throw error;
+  }
+  return await res.json();
+}
+var DEFAULT_ROUTES = {
+  checkPurchase: "/api/check-purchase",
+  createPayment: "/api/create-payment-intent",
+  processPayment: "/api/process-payment",
+  createTopupPayment: "/api/create-topup-payment-intent",
+  customerBalance: "/api/customer-balance",
+  cancelRenewal: "/api/cancel-renewal",
+  reactivateRenewal: "/api/reactivate-renewal",
+  activatePlan: "/api/activate-plan",
+  createCheckoutSession: "/api/create-checkout-session",
+  createCustomerSession: "/api/create-customer-session",
+  getMerchant: "/api/merchant",
+  getProduct: "/api/get-product",
+  listPlans: "/api/list-plans",
+  getPaymentMethod: "/api/payment-method",
+  getUsage: "/api/usage"
+};
+function routeFor(config, key) {
+  const configured = config?.api?.[key];
+  return configured || DEFAULT_ROUTES[key];
+}
+function createHttpTransport(config) {
+  return {
+    checkPurchase: () => request(config, routeFor(config, "checkPurchase"), {
+      method: "GET",
+      onErrorContext: "checkPurchase",
+      errorPrefix: "Failed to check purchase"
+    }),
+    createPayment: (params) => {
+      const body = {};
+      if (params.planRef) body.planRef = params.planRef;
+      if (params.productRef) body.productRef = params.productRef;
+      if (params.customer && (params.customer.name || params.customer.email)) {
+        body.customer = params.customer;
+      }
+      return request(config, routeFor(config, "createPayment"), {
+        method: "POST",
+        body,
+        onErrorContext: "createPayment",
+        errorPrefix: "Failed to create payment"
+      });
+    },
+    processPayment: (params) => request(config, routeFor(config, "processPayment"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "processPayment",
+      errorPrefix: "Failed to process payment"
+    }),
+    createTopupPayment: (params) => request(config, routeFor(config, "createTopupPayment"), {
+      method: "POST",
+      body: { amount: params.amount, currency: params.currency },
+      onErrorContext: "createTopupPayment",
+      errorPrefix: "Failed to create topup payment"
+    }),
+    getBalance: () => request(config, routeFor(config, "customerBalance"), {
+      method: "GET",
+      onErrorContext: "getBalance",
+      errorPrefix: "Failed to fetch balance"
+    }),
+    cancelRenewal: (params) => request(config, routeFor(config, "cancelRenewal"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "cancelRenewal",
+      errorPrefix: "Failed to cancel renewal"
+    }),
+    reactivateRenewal: (params) => request(config, routeFor(config, "reactivateRenewal"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "reactivateRenewal",
+      errorPrefix: "Failed to reactivate renewal"
+    }),
+    activatePlan: (params) => request(config, routeFor(config, "activatePlan"), {
+      method: "POST",
+      body: params,
+      onErrorContext: "activatePlan",
+      errorPrefix: "Failed to activate plan"
+    }),
+    createCheckoutSession: (params) => {
+      const body = {};
+      if (params?.planRef) body.planRef = params.planRef;
+      if (params?.productRef) body.productRef = params.productRef;
+      if (params?.returnUrl) body.returnUrl = params.returnUrl;
+      return request(
+        config,
+        routeFor(config, "createCheckoutSession"),
+        {
+          method: "POST",
+          body,
+          onErrorContext: "createCheckoutSession",
+          errorPrefix: "Failed to create checkout session"
+        }
+      );
+    },
+    createCustomerSession: () => request(
+      config,
+      routeFor(config, "createCustomerSession"),
+      {
+        method: "POST",
+        body: {},
+        onErrorContext: "createCustomerSession",
+        errorPrefix: "Failed to create customer session"
+      }
+    ),
+    getMerchant: () => request(config, routeFor(config, "getMerchant"), {
+      method: "GET",
+      onErrorContext: "getMerchant",
+      errorPrefix: "Failed to fetch merchant"
+    }),
+    getProduct: (productRef) => {
+      const base = routeFor(config, "getProduct");
+      const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+      return request(config, url, {
+        method: "GET",
+        onErrorContext: "getProduct",
+        errorPrefix: "Failed to fetch product"
+      });
+    },
+    listPlans: (productRef) => {
+      const base = routeFor(config, "listPlans");
+      const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+      return request(config, url, {
+        method: "GET",
+        onErrorContext: "listPlans",
+        errorPrefix: "Failed to list plans"
+      });
+    },
+    getPaymentMethod: () => request(config, routeFor(config, "getPaymentMethod"), {
+      method: "GET",
+      onErrorContext: "getPaymentMethod",
+      errorPrefix: "Failed to load payment method"
+    }),
+    getUsage: () => request(config, routeFor(config, "getUsage"), {
+      method: "GET",
+      onErrorContext: "getUsage",
+      errorPrefix: "Failed to load usage"
+    })
+  };
+}
 
 // src/i18n/en.ts
 function intervalPhrase(ctx) {
@@ -178,6 +412,26 @@ var enCopy = {
     lowBalanceSubheading: "Top up to continue using {product}",
     topUpCta: "Top up now"
   },
+  currentPlan: {
+    heading: "Your plan",
+    nextBilling: "Next billing: {date}",
+    expiresOn: "Expires {date}",
+    validIndefinitely: "Valid indefinitely",
+    paymentMethod: "{brand} \u2022\u2022\u2022\u2022 {last4}",
+    paymentMethodExpires: "expires {month}/{year}",
+    noPaymentMethod: "No payment method on file",
+    updatePaymentButton: "Update card",
+    cycleUnit: {
+      weekly: "week",
+      monthly: "month",
+      quarterly: "3 months",
+      yearly: "year"
+    }
+  },
+  customerPortal: {
+    launchButton: "Manage billing",
+    loadingLabel: "Loading portal\u2026"
+  },
   errors: {
     paymentInitFailed: "Payment initialization failed",
     topupInitFailed: "Top-up initialization failed",
@@ -191,7 +445,40 @@ var enCopy = {
     paymentProcessingFailed: "Payment processing failed. Please try again or contact support.",
     paymentRequires3ds: "Payment requires additional authentication. Please complete the verification.",
     paymentProcessingTimeout: "Payment processing timed out \u2014 webhooks may not be configured",
-    paymentStatusPrefix: "Payment status: {status}"
+    paymentConfirmationDelayed: "Payment succeeded but confirmation is taking longer than usual. Refresh in a moment to see your purchase.",
+    paymentStatusPrefix: "Payment status: {status}",
+    paywallInvalidContent: "Paywall content is missing or malformed.",
+    usageLoadFailed: "Failed to load usage"
+  },
+  paywall: {
+    header: "Unlock access",
+    paymentRequiredHeading: "Upgrade to continue",
+    activationRequiredHeading: "Add credits to continue",
+    resolvedHeading: "You can continue",
+    productContext: "For {product}",
+    balanceLine: "You have {available} credits, need {required}.",
+    paymentRequiredMessage: "You've used all your included calls{forProduct}. Choose a plan below to keep going.",
+    paymentRequiredMessageRemaining: "Only {remaining} call{pluralSuffix} left{forProduct}. Choose a plan below to keep going.",
+    paymentRequiredProductSuffix: " for {product}",
+    retryButton: "Continue",
+    hostedCheckoutButton: "Open checkout",
+    hostedCheckoutLoading: "Loading checkout\u2026"
+  },
+  usage: {
+    header: "Usage",
+    percentUsedLabel: "{percent}% used",
+    usedLabel: "{used} / {total} {unit}",
+    remainingLabel: "{remaining} {unit} remaining",
+    unlimitedLabel: "Unlimited",
+    resetsInLabel: "Resets in {days} days",
+    resetsOnLabel: "Resets {date}",
+    loadingLabel: "Loading usage\u2026",
+    emptyLabel: "No usage-based plan is active.",
+    approachingLimit: "You're approaching your usage limit.",
+    atLimit: "You've reached your usage limit.",
+    topUpCta: "Add credits",
+    upgradeCta: "Upgrade plan",
+    refreshCta: "Refresh"
   }
 };
 
@@ -236,227 +523,68 @@ function useCopyContext() {
 
 // src/SolvaPayProvider.tsx
 import { createContext as createContext2, useState, useEffect, useCallback, useMemo as useMemo2, useRef } from "react";
-
-// src/utils/headers.ts
-var CUSTOMER_REF_KEY = "solvapay_customerRef";
-var CUSTOMER_REF_EXPIRY = "solvapay_customerRef_expiry";
-var CUSTOMER_REF_USER_ID_KEY = "solvapay_customerRef_userId";
-function getAuthAdapter(config) {
-  if (config?.auth?.adapter) {
-    return config.auth.adapter;
-  }
-  if (config?.auth?.getToken || config?.auth?.getUserId) {
-    return {
-      async getToken() {
-        return config?.auth?.getToken?.() || null;
-      },
-      async getUserId() {
-        return config?.auth?.getUserId?.() || null;
-      }
-    };
-  }
-  return defaultAuthAdapter;
-}
-function getCachedCustomerRef(userId) {
-  if (typeof window === "undefined") return null;
-  const cached = localStorage.getItem(CUSTOMER_REF_KEY);
-  const expiry = localStorage.getItem(CUSTOMER_REF_EXPIRY);
-  const cachedUserId = localStorage.getItem(CUSTOMER_REF_USER_ID_KEY);
-  if (!cached || !expiry) return null;
-  if (Date.now() > parseInt(expiry)) {
-    localStorage.removeItem(CUSTOMER_REF_KEY);
-    localStorage.removeItem(CUSTOMER_REF_EXPIRY);
-    localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
-    return null;
-  }
-  if (userId !== void 0 && userId !== null) {
-    if (cachedUserId !== userId) {
-      clearCachedCustomerRef();
-      return null;
-    }
-  }
-  return cached;
-}
-var CACHE_DURATION = 24 * 60 * 60 * 1e3;
-function setCachedCustomerRef(customerRef, userId) {
-  if (typeof window === "undefined") return;
-  if (userId === void 0 || userId === null) {
-    return;
-  }
-  localStorage.setItem(CUSTOMER_REF_KEY, customerRef);
-  localStorage.setItem(CUSTOMER_REF_EXPIRY, String(Date.now() + CACHE_DURATION));
-  localStorage.setItem(CUSTOMER_REF_USER_ID_KEY, userId);
-}
-function clearCachedCustomerRef() {
-  if (typeof window === "undefined") return;
-  localStorage.removeItem(CUSTOMER_REF_KEY);
-  localStorage.removeItem(CUSTOMER_REF_EXPIRY);
-  localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
-}
-async function buildRequestHeaders(config) {
-  const adapter = getAuthAdapter(config);
-  const token = await adapter.getToken();
-  const userId = await adapter.getUserId();
-  const cachedRef = getCachedCustomerRef(userId);
-  const headers = {
-    "Content-Type": "application/json"
-  };
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-  if (cachedRef) {
-    headers["x-solvapay-customer-ref"] = cachedRef;
-  }
-  if (config?.headers) {
-    const custom = typeof config.headers === "function" ? await config.headers() : config.headers;
-    Object.assign(headers, custom);
-  }
-  return { headers, userId };
-}
-
-// src/SolvaPayProvider.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var SolvaPayContext = createContext2(null);
-var SolvaPayProvider = ({
-  config,
-  createPayment: customCreatePayment,
-  checkPurchase: customCheckPurchase,
-  processPayment: customProcessPayment,
-  createTopupPayment: customCreateTopupPayment,
-  children
-}) => {
-  const [purchaseData, setPurchaseData] = useState({
-    purchases: []
+function resolveTransport(config) {
+  return config?.transport ?? createHttpTransport(config);
+}
+var SolvaPayProvider = ({ config, children }) => {
+  const initial = config?.initial;
+  const [purchaseData, setPurchaseData] = useState(() => {
+    if (!initial) return { purchases: [] };
+    return {
+      // The server-side `PurchaseCheckResult.purchases` shape has looser
+      // optional fields than `PurchaseInfo`, but the runtime data is
+      // identical — the same rows flow through `transport.checkPurchase()`
+      // today. Cast once here to unify the two entry points, and run
+      // the same `filterPurchases` the HTTP path applies in
+      // `fetchPurchase` so the bootstrap-hydrated data never contains
+      // cancelled / expired / suspended rows the active-only derivations
+      // (`activePurchase`, `hasPaidPurchase`, …) wouldn't expect.
+      purchases: filterPurchases(
+        initial.purchase?.purchases ?? []
+      ),
+      customerRef: initial.customerRef ?? initial.purchase?.customerRef,
+      email: initial.purchase?.email,
+      name: initial.purchase?.name
+    };
   });
   const [loading, setLoading] = useState(false);
   const [isRefetching, setIsRefetching] = useState(false);
   const [purchaseError, setPurchaseError] = useState(null);
-  const [internalCustomerRef, setInternalCustomerRef] = useState(void 0);
+  const [internalCustomerRef, setInternalCustomerRef] = useState(
+    initial?.customerRef ?? void 0
+  );
   const [userId, setUserId] = useState(null);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [creditsValue, setCreditsValue] = useState(null);
-  const [displayCurrencyValue, setDisplayCurrencyValue] = useState(null);
-  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = useState(null);
-  const [displayExchangeRateValue, setDisplayExchangeRateValue] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(!!initial?.customerRef);
+  const [creditsValue, setCreditsValue] = useState(
+    initial?.balance?.credits ?? null
+  );
+  const [displayCurrencyValue, setDisplayCurrencyValue] = useState(
+    initial?.balance?.displayCurrency ?? null
+  );
+  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = useState(
+    initial?.balance?.creditsPerMinorUnit ?? null
+  );
+  const [displayExchangeRateValue, setDisplayExchangeRateValue] = useState(
+    initial?.balance?.displayExchangeRate ?? null
+  );
   const [balanceLoading, setBalanceLoading] = useState(false);
   const balanceInFlightRef = useRef(false);
-  const balanceLoadedRef = useRef(false);
+  const balanceLoadedRef = useRef(!!initial?.balance);
   const optimisticUntilRef = useRef(0);
   const optimisticTimerRef = useRef(null);
   const fetchBalanceRef = useRef(null);
   const inFlightRef = useRef(null);
-  const checkPurchaseRef = useRef(null);
-  const createPaymentRef = useRef(null);
-  const processPaymentRef = useRef(null);
-  const createTopupPaymentRef = useRef(null);
-  const configRef = useRef(config);
-  const buildDefaultCheckPurchaseRef = useRef(
-    null
+  const loadedCacheKeysRef = useRef(
+    new Set(initial?.customerRef ? [initial.customerRef] : [])
   );
+  const configRef = useRef(config);
+  const transportRef = useRef(resolveTransport(config));
   useEffect(() => {
     configRef.current = config;
+    transportRef.current = resolveTransport(config);
   }, [config]);
-  useEffect(() => {
-    checkPurchaseRef.current = customCheckPurchase || null;
-  }, [customCheckPurchase]);
-  useEffect(() => {
-    createPaymentRef.current = customCreatePayment || null;
-  }, [customCreatePayment]);
-  useEffect(() => {
-    processPaymentRef.current = customProcessPayment || null;
-  }, [customProcessPayment]);
-  useEffect(() => {
-    createTopupPaymentRef.current = customCreateTopupPayment || null;
-  }, [customCreateTopupPayment]);
-  const buildDefaultCheckPurchase = useCallback(async () => {
-    const currentConfig = configRef.current;
-    const { headers } = await buildRequestHeaders(currentConfig);
-    const route = currentConfig?.api?.checkPurchase || "/api/check-purchase";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const res = await fetchFn(route, { method: "GET", headers });
-    if (!res.ok) {
-      const error = new Error(`Failed to check purchase: ${res.statusText}`);
-      currentConfig?.onError?.(error, "checkPurchase");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  useEffect(() => {
-    buildDefaultCheckPurchaseRef.current = buildDefaultCheckPurchase;
-  }, [buildDefaultCheckPurchase]);
-  const buildDefaultCreatePayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const body = {};
-      if (params.planRef) {
-        body.planRef = params.planRef;
-      }
-      if (params.productRef) {
-        body.productRef = params.productRef;
-      }
-      if (params.customer && (params.customer.name || params.customer.email)) {
-        body.customer = params.customer;
-      }
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(body)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultProcessPayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.processPayment || "/api/process-payment";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to process payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "processPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultCreateTopupPayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createTopupPayment || "/api/create-topup-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          amount: params.amount,
-          currency: params.currency
-        })
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create topup payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createTopupPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
   const fetchBalanceImpl = useCallback(async () => {
     if (optimisticUntilRef.current > Date.now()) return;
     if (!isAuthenticated && !internalCustomerRef) {
@@ -474,16 +602,12 @@ var SolvaPayProvider = ({
       setBalanceLoading(true);
     }
     try {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.customerBalance || "/api/customer-balance";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, { method: "GET", headers });
-      if (!res.ok) {
-        console.error("[SolvaPayProvider] Failed to fetch balance:", res.statusText);
+      if (!transportRef.current.getBalance) {
+        setBalanceLoading(false);
+        balanceInFlightRef.current = false;
         return;
       }
-      const data = await res.json();
+      const data = await transportRef.current.getBalance();
       setCreditsValue(data.credits ?? null);
       setDisplayCurrencyValue(data.displayCurrency ?? null);
       setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
@@ -514,54 +638,35 @@ var SolvaPayProvider = ({
       fetchBalanceRef.current?.();
     }, OPTIMISTIC_GRACE_MS);
   }, []);
-  const _checkPurchase = useCallback(async () => {
-    if (checkPurchaseRef.current) {
-      return checkPurchaseRef.current();
-    }
-    if (buildDefaultCheckPurchaseRef.current) {
-      return buildDefaultCheckPurchaseRef.current();
-    }
-    return buildDefaultCheckPurchase();
-  }, [buildDefaultCheckPurchase]);
   const createPayment = useCallback(
-    async (params) => {
-      if (createPaymentRef.current) {
-        return createPaymentRef.current(params);
-      }
-      return buildDefaultCreatePayment(params);
-    },
-    [buildDefaultCreatePayment]
+    (params) => transportRef.current.createPayment(params),
+    []
   );
   const processPayment = useCallback(
-    async (params) => {
-      if (processPaymentRef.current) {
-        return processPaymentRef.current(params);
-      }
-      return buildDefaultProcessPayment(params);
-    },
-    [buildDefaultProcessPayment]
+    (params) => transportRef.current.processPayment(params),
+    []
   );
   const createTopupPayment = useCallback(
-    async (params) => {
-      if (createTopupPaymentRef.current) {
-        return createTopupPaymentRef.current(params);
-      }
-      return buildDefaultCreateTopupPayment(params);
-    },
-    [buildDefaultCreateTopupPayment]
+    (params) => transportRef.current.createTopupPayment(params),
+    []
   );
   useEffect(() => {
+    if (configRef.current?.initial) {
+      setIsAuthenticated(configRef.current.initial.customerRef !== null);
+      return;
+    }
     const detectAuth = async () => {
       const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
+      const adapter2 = getAuthAdapter(currentConfig);
+      const token = await adapter2.getToken();
+      const detectedUserId = await adapter2.getUserId();
       const prevUserId = userId;
       setIsAuthenticated(!!token);
       setUserId(detectedUserId);
       if (prevUserId !== null && detectedUserId !== prevUserId) {
         clearCachedCustomerRef();
         setInternalCustomerRef(void 0);
+        loadedCacheKeysRef.current.clear();
         return;
       }
       const cachedRef = getCachedCustomerRef(detectedUserId);
@@ -570,11 +675,19 @@ var SolvaPayProvider = ({
       } else if (!token) {
         clearCachedCustomerRef();
         setInternalCustomerRef(void 0);
+        loadedCacheKeysRef.current.clear();
       } else if (token && !cachedRef) {
         setInternalCustomerRef(void 0);
       }
     };
     detectAuth();
+    const adapter = getAuthAdapter(configRef.current);
+    if (typeof adapter.subscribe === "function") {
+      const unsubscribe = adapter.subscribe(() => {
+        detectAuth();
+      });
+      return unsubscribe;
+    }
     const interval = setInterval(detectAuth, 3e4);
     return () => clearInterval(interval);
   }, [userId]);
@@ -593,20 +706,24 @@ var SolvaPayProvider = ({
         return;
       }
       inFlightRef.current = cacheKey;
-      const hasExistingData = purchaseData.purchases.length > 0;
-      if (hasExistingData) {
+      const hasLoadedOnce = loadedCacheKeysRef.current.has(cacheKey);
+      if (hasLoadedOnce) {
         setIsRefetching(true);
       } else {
         setLoading(true);
       }
       try {
-        const checkFn = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
-        if (!checkFn) {
-          throw new Error("checkPurchase function not available");
+        if (!transportRef.current.checkPurchase) {
+          setLoading(false);
+          setIsRefetching(false);
+          loadedCacheKeysRef.current.add(cacheKey);
+          inFlightRef.current = null;
+          return;
         }
-        const data = await checkFn();
+        const data = await transportRef.current.checkPurchase();
         if (data.customerRef) {
           setInternalCustomerRef(data.customerRef);
+          loadedCacheKeysRef.current.add(data.customerRef);
           const currentAdapter = getAuthAdapter(configRef.current);
           const currentUserId = await currentAdapter.getUserId();
           setCachedCustomerRef(data.customerRef, currentUserId);
@@ -626,40 +743,82 @@ var SolvaPayProvider = ({
         }
       } finally {
         if (inFlightRef.current === cacheKey) {
+          loadedCacheKeysRef.current.add(cacheKey);
           setLoading(false);
           setIsRefetching(false);
           inFlightRef.current = null;
         }
       }
     },
-    [isAuthenticated, internalCustomerRef, userId, purchaseData.purchases.length]
+    [isAuthenticated, internalCustomerRef, userId]
   );
   const fetchPurchaseRef = useRef(fetchPurchase);
   useEffect(() => {
     fetchPurchaseRef.current = fetchPurchase;
   }, [fetchPurchase]);
+  const applyInitialRef = useRef(null);
   const refetchPurchase = useCallback(async () => {
     inFlightRef.current = null;
+    const refresh = configRef.current?.refreshInitial;
+    const hasCheckPurchase = !!transportRef.current.checkPurchase;
+    if (refresh && !hasCheckPurchase) {
+      setIsRefetching(true);
+      try {
+        const next = await refresh();
+        if (next) applyInitialRef.current?.(next);
+      } catch (err) {
+        console.error("[SolvaPayProvider] refetchPurchase (MCP) failed:", err);
+      } finally {
+        setIsRefetching(false);
+      }
+      return;
+    }
     await fetchPurchaseRef.current(true);
   }, []);
+  const applyInitial = useCallback((next) => {
+    setPurchaseData({
+      // Mirror the HTTP path: strip non-active rows before any
+      // derivation (`activePurchase` etc.) reads the array.
+      purchases: filterPurchases(
+        next.purchase?.purchases ?? []
+      ),
+      customerRef: next.customerRef ?? next.purchase?.customerRef,
+      email: next.purchase?.email,
+      name: next.purchase?.name
+    });
+    if (next.customerRef) {
+      setInternalCustomerRef(next.customerRef);
+      loadedCacheKeysRef.current.add(next.customerRef);
+    } else {
+      setInternalCustomerRef(void 0);
+      loadedCacheKeysRef.current.clear();
+    }
+    setIsAuthenticated(next.customerRef !== null);
+    setCreditsValue(next.balance?.credits ?? null);
+    setDisplayCurrencyValue(next.balance?.displayCurrency ?? null);
+    setCreditsPerMinorUnitValue(next.balance?.creditsPerMinorUnit ?? null);
+    setDisplayExchangeRateValue(next.balance?.displayExchangeRate ?? null);
+    balanceLoadedRef.current = !!next.balance;
+  }, []);
+  useEffect(() => {
+    applyInitialRef.current = applyInitial;
+  }, [applyInitial]);
+  const refreshBootstrap = useCallback(async () => {
+    const refresh = configRef.current?.refreshInitial;
+    if (refresh) {
+      try {
+        const next = await refresh();
+        if (next) applyInitial(next);
+      } catch (err) {
+        console.error("[SolvaPayProvider] refreshBootstrap failed:", err);
+      }
+      return;
+    }
+    await Promise.all([refetchPurchase(), fetchBalanceRef.current?.() ?? Promise.resolve()]);
+  }, [refetchPurchase, applyInitial]);
   const cancelRenewal = useCallback(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.cancelRenewal || "/api/cancel-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to cancel renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "cancelRenewal");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.cancelRenewal(params);
       await refetchPurchase();
       return result;
     },
@@ -667,22 +826,7 @@ var SolvaPayProvider = ({
   );
   const reactivateRenewal = useCallback(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.reactivateRenewal || "/api/reactivate-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to reactivate renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "reactivateRenewal");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.reactivateRenewal(params);
       await refetchPurchase();
       return result;
     },
@@ -690,22 +834,7 @@ var SolvaPayProvider = ({
   );
   const activatePlan = useCallback(
     async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.activatePlan || "/api/activate-plan";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to activate plan: ${res.statusText}`);
-        currentConfig?.onError?.(error, "activatePlan");
-        throw error;
-      }
-      const result = await res.json();
+      const result = await transportRef.current.activatePlan(params);
       if (result.status === "activated" || result.status === "already_active") {
         await refetchPurchase();
       }
@@ -713,8 +842,13 @@ var SolvaPayProvider = ({
     },
     [refetchPurchase]
   );
+  const hydratedFromInitialRef = useRef(!!initial);
   useEffect(() => {
     inFlightRef.current = null;
+    if (hydratedFromInitialRef.current) {
+      hydratedFromInitialRef.current = false;
+      return;
+    }
     if (isAuthenticated || internalCustomerRef) {
       fetchPurchase();
     } else {
@@ -733,8 +867,10 @@ var SolvaPayProvider = ({
     [fetchPurchase, userId]
   );
   const purchase = useMemo2(() => {
-    const activePurchase = getPrimaryPurchase(purchaseData.purchases);
-    const activePaidPurchases = purchaseData.purchases.filter(
+    const planPurchases = purchaseData.purchases.filter(isPlanPurchase);
+    const balanceTransactions = purchaseData.purchases.filter((p) => !isPlanPurchase(p));
+    const activePurchase = getPrimaryPurchase(planPurchases);
+    const activePaidPurchases = planPurchases.filter(
       (p) => p.status === "active" && isPaidPurchase(p)
     );
     const activePaidPurchase = activePaidPurchases.sort(
@@ -749,18 +885,14 @@ var SolvaPayProvider = ({
       name: purchaseData.name,
       purchases: purchaseData.purchases,
       hasProduct: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      hasPlan: (productName) => {
-        return purchaseData.purchases.some(
+        return planPurchases.some(
           (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
         );
       },
       activePurchase,
       hasPaidPurchase: activePaidPurchases.length > 0,
-      activePaidPurchase
+      activePaidPurchase,
+      balanceTransactions
     };
   }, [loading, isRefetching, purchaseError, purchaseData, internalCustomerRef]);
   const balance = useMemo2(
@@ -773,7 +905,15 @@ var SolvaPayProvider = ({
       refetch: fetchBalanceImpl,
       adjustBalance: adjustBalanceImpl
     }),
-    [balanceLoading, creditsValue, displayCurrencyValue, creditsPerMinorUnitValue, displayExchangeRateValue, fetchBalanceImpl, adjustBalanceImpl]
+    [
+      balanceLoading,
+      creditsValue,
+      displayCurrencyValue,
+      creditsPerMinorUnitValue,
+      displayExchangeRateValue,
+      fetchBalanceImpl,
+      adjustBalanceImpl
+    ]
   );
   const contextValue = useMemo2(
     () => ({
@@ -788,6 +928,7 @@ var SolvaPayProvider = ({
       customerRef: purchaseData.customerRef || internalCustomerRef,
       updateCustomerRef,
       balance,
+      refreshBootstrap,
       _config: configRef.current
     }),
     [
@@ -802,7 +943,8 @@ var SolvaPayProvider = ({
       purchaseData.customerRef,
       internalCustomerRef,
       updateCustomerRef,
-      balance
+      balance,
+      refreshBootstrap
     ]
   );
   return /* @__PURE__ */ jsx2(SolvaPayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(CopyProvider, { locale: config?.locale, copy: config?.copy, children }) });
@@ -939,8 +1081,11 @@ var stripePromiseCache = /* @__PURE__ */ new Map();
 function getStripeCacheKey(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
 }
-async function resolvePlanRef(productRef, fetchFn, headers, listPlansRoute) {
+async function resolvePlanRef(productRef, config) {
+  const listPlansRoute = config?.api?.listPlans || "/api/list-plans";
   const url = `${listPlansRoute}?productRef=${encodeURIComponent(productRef)}`;
+  const fetchFn = config?.fetch || fetch;
+  const { headers } = await buildRequestHeaders(config);
   const res = await fetchFn(url, { method: "GET", headers });
   if (!res.ok) {
     throw new Error(`Failed to fetch plans for product "${productRef}": ${res.statusText}`);
@@ -991,8 +1136,7 @@ function useCheckout(options) {
     try {
       let effectivePlanRef = planRef;
       if (!effectivePlanRef && productRef) {
-        const listPlansRoute = _config?.api?.listPlans || "/api/list-plans";
-        effectivePlanRef = await resolvePlanRef(productRef, fetch, {}, listPlansRoute);
+        effectivePlanRef = await resolvePlanRef(productRef, _config);
         setResolvedPlanRef(effectivePlanRef);
       }
       if (!effectivePlanRef) {
@@ -1381,27 +1525,41 @@ function usePlan(options) {
 
 // src/hooks/useProduct.ts
 import { useCallback as useCallback5, useEffect as useEffect4, useState as useState5 } from "react";
+
+// src/transport/cache-key.ts
+var transportIds = /* @__PURE__ */ new WeakMap();
+var nextTransportId = 0;
+function transportIdFor(transport) {
+  let id = transportIds.get(transport);
+  if (id === void 0) {
+    id = ++nextTransportId;
+    transportIds.set(transport, id);
+  }
+  return id;
+}
+function createTransportCacheKey(config, fallbackRoute, suffix) {
+  const transport = config?.transport;
+  if (transport) {
+    const id = transportIdFor(transport);
+    return suffix ? `transport:${id}:${suffix}` : `transport:${id}`;
+  }
+  return fallbackRoute;
+}
+
+// src/hooks/useProduct.ts
 var productCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION3 = 5 * 60 * 1e3;
-function routeFor(config) {
-  return config?.api?.getProduct || "/api/get-product";
+function cacheKeyFor(config, productRef) {
+  return createTransportCacheKey(config, productRef, productRef);
 }
 async function fetchProduct(productRef, config) {
-  const base = routeFor(config);
-  const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
-  const fetchFn = config?.fetch || fetch;
-  const { headers } = await buildRequestHeaders(config);
-  const res = await fetchFn(url, { method: "GET", headers });
-  if (!res.ok) {
-    const error = new Error(`Failed to fetch product: ${res.statusText || res.status}`);
-    config?.onError?.(error, "getProduct");
-    throw error;
-  }
-  return await res.json();
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getProduct) return null;
+  return transport.getProduct(productRef);
 }
 function useProduct(productRef) {
   const { _config } = useSolvaPay();
-  const cacheKey = productRef || "";
+  const cacheKey = productRef ? cacheKeyFor(_config, productRef) : "";
   const [product, setProduct] = useState5(
     () => productRef ? productCache.get(cacheKey)?.product ?? null : null
   );
@@ -1419,7 +1577,8 @@ function useProduct(productRef) {
         setError(null);
         return;
       }
-      const cached = productCache.get(productRef);
+      const key = cacheKeyFor(_config, productRef);
+      const cached = productCache.get(key);
       const now = Date.now();
       if (!force && cached?.product && now - cached.timestamp < CACHE_DURATION3) {
         setProduct(cached.product);
@@ -1444,12 +1603,26 @@ function useProduct(productRef) {
         setLoading(true);
         setError(null);
         const promise = fetchProduct(productRef, _config);
-        productCache.set(productRef, { product: null, promise, timestamp: now });
+        productCache.set(key, {
+          product: cached?.product ?? null,
+          promise,
+          timestamp: now
+        });
         const p = await promise;
-        productCache.set(productRef, { product: p, promise: null, timestamp: now });
+        if (p === null) {
+          productCache.set(key, {
+            product: cached?.product ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setProduct(cached?.product ?? null);
+          setLoading(false);
+          return;
+        }
+        productCache.set(key, { product: p, promise: null, timestamp: now });
         setProduct(p);
       } catch (err) {
-        productCache.delete(productRef);
+        productCache.delete(key);
         setError(err instanceof Error ? err : new Error("Failed to load product"));
       } finally {
         setLoading(false);
@@ -1556,6 +1729,9 @@ var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
 function getFractionDigits(currency) {
   return ZERO_DECIMAL_CURRENCIES.has(currency.toLowerCase()) ? 0 : 2;
 }
+function getMinorUnitsPerMajor(currency) {
+  return getFractionDigits(currency) === 0 ? 1 : 100;
+}
 function toMajorUnits(amountMinor, currency) {
   const fractionDigits = getFractionDigits(currency);
   return fractionDigits === 0 ? amountMinor : amountMinor / 100;
@@ -1565,7 +1741,10 @@ function formatPrice(amountMinor, currency, opts = {}) {
   if (amountMinor === 0 && free !== "") {
     return free;
   }
-  const fractionDigits = getFractionDigits(currency);
+  const naturalFractionDigits = getFractionDigits(currency);
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  const isWhole = amountMinor % minorPerMajor === 0;
+  const fractionDigits = isWhole ? 0 : naturalFractionDigits;
   const major = toMajorUnits(amountMinor, currency);
   const formatter = new Intl.NumberFormat(locale, {
     style: "currency",
@@ -1759,24 +1938,17 @@ var CheckoutSummary2 = ({
 import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
 var merchantCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION4 = 5 * 60 * 1e3;
-function cacheKeyFor(config) {
-  return config?.api?.getMerchant || "/api/merchant";
+function cacheKeyFor2(config) {
+  return createTransportCacheKey(config, config?.api?.getMerchant || "/api/merchant");
 }
 async function fetchMerchant(config) {
-  const route = cacheKeyFor(config);
-  const fetchFn = config?.fetch || fetch;
-  const { headers } = await buildRequestHeaders(config);
-  const res = await fetchFn(route, { method: "GET", headers });
-  if (!res.ok) {
-    const error = new Error(`Failed to fetch merchant: ${res.statusText || res.status}`);
-    config?.onError?.(error, "getMerchant");
-    throw error;
-  }
-  return await res.json();
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getMerchant) return null;
+  return transport.getMerchant();
 }
 function useMerchant() {
   const { _config } = useSolvaPay();
-  const key = cacheKeyFor(_config);
+  const key = cacheKeyFor2(_config);
   const [merchant, setMerchant] = useState7(
     () => merchantCache.get(key)?.merchant ?? null
   );
@@ -1812,8 +1984,22 @@ function useMerchant() {
         setLoading(true);
         setError(null);
         const promise = fetchMerchant(_config);
-        merchantCache.set(key, { merchant: null, promise, timestamp: now });
+        merchantCache.set(key, {
+          merchant: cached?.merchant ?? null,
+          promise,
+          timestamp: now
+        });
         const m = await promise;
+        if (m === null) {
+          merchantCache.set(key, {
+            merchant: cached?.merchant ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setMerchant(cached?.merchant ?? null);
+          setLoading(false);
+          return;
+        }
         merchantCache.set(key, { merchant: m, promise: null, timestamp: now });
         setMerchant(m);
       } catch (err) {
@@ -1927,31 +2113,36 @@ var MandateText = forwardRef2(
 
 // src/components/Spinner.tsx
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
-var Spinner = ({
-  className = "",
-  size = "md"
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  };
+var SIZE_PX = { sm: 16, md: 20, lg: 24 };
+var Spinner = ({ className, size = "md" }) => {
+  const px = SIZE_PX[size];
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
-      className: `animate-spin ${sizeClasses[size]} ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
+      "data-solvapay-spinner": "",
+      className,
+      width: px,
+      height: px,
       viewBox: "0 0 24 24",
-      role: "status",
-      "aria-busy": "true",
+      fill: "none",
+      "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx9("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx9(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
         /* @__PURE__ */ jsx9(
           "path",
           {
-            className: "opacity-75",
             fill: "currentColor",
+            fillOpacity: "0.75",
             d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
           }
         )
@@ -1969,6 +2160,13 @@ async function confirmPayment(input) {
       if (!paymentElement) {
         return { status: "error", message: copy.errors.cardElementMissing };
       }
+      const { error: submitError } = await elements.submit();
+      if (submitError) {
+        return {
+          status: "error",
+          message: submitError.message || copy.errors.paymentUnexpected
+        };
+      }
       const { error: error2, paymentIntent: paymentIntent2 } = await stripe.confirmPayment({
         elements,
         clientSecret,
@@ -2301,7 +2499,11 @@ var PaidInner = ({
   const copy = useCopy();
   const customer = useCustomer();
   const { processPayment } = useSolvaPay();
-  const { refetch } = usePurchase();
+  const { refetch, hasPaidPurchase } = usePurchase();
+  const hasPaidPurchaseRef = useRef4(hasPaidPurchase);
+  useEffect6(() => {
+    hasPaidPurchaseRef.current = hasPaidPurchase;
+  }, [hasPaidPurchase]);
   const [elementKind, setElementKind] = useState8(
     children ? null : "payment-element"
   );
@@ -2352,14 +2554,34 @@ var PaidInner = ({
       refetchPurchase: refetch,
       copy
     });
-    setIsProcessing(false);
     if (reconcileResult.status === "success") {
       const pi = paymentIntent;
       onSuccess?.(pi);
       const paid = { kind: "paid", paymentIntent: pi };
       onResult?.(paid);
+      const CONFIRMATION_TIMEOUT_MS = 1e4;
+      const startedAt = Date.now();
+      let attempt = 0;
+      while (!hasPaidPurchaseRef.current && Date.now() - startedAt < CONFIRMATION_TIMEOUT_MS) {
+        attempt += 1;
+        await new Promise((r) => setTimeout(r, Math.min(500 * attempt, 1500)));
+        if (hasPaidPurchaseRef.current) break;
+        try {
+          await refetch();
+        } catch {
+        }
+      }
+      if (!hasPaidPurchaseRef.current) {
+        const confirmationMsg = copy.errors.paymentConfirmationDelayed;
+        setError(confirmationMsg);
+        setIsProcessing(false);
+        onError?.(new Error(confirmationMsg));
+        return;
+      }
+      setIsProcessing(false);
       return;
     }
+    setIsProcessing(false);
     const msg = reconcileResult.status === "timeout" ? reconcileResult.error.message : copy.errors.paymentProcessingFailed;
     setError(msg);
     onError?.(reconcileResult.error);
@@ -2825,7 +3047,9 @@ function useTopupAmountSelector(options) {
     if (resolvedAmount < minAmount) {
       setError(
         interpolate(copy.topup.minAmount, {
-          amount: `${currencySymbol}${minAmount}`
+          amount: formatPrice(minAmount * getMinorUnitsPerMajor(currency), currency, {
+            free: ""
+          })
         })
       );
       return false;
@@ -2833,14 +3057,16 @@ function useTopupAmountSelector(options) {
     if (resolvedAmount > maxAmount) {
       setError(
         interpolate(copy.topup.maxAmount, {
-          amount: `${currencySymbol}${maxAmount.toLocaleString()}`
+          amount: formatPrice(maxAmount * getMinorUnitsPerMajor(currency), currency, {
+            free: ""
+          })
         })
       );
       return false;
     }
     setError(null);
     return true;
-  }, [resolvedAmount, minAmount, maxAmount, currencySymbol, copy]);
+  }, [resolvedAmount, minAmount, maxAmount, currency, copy]);
   const reset = useCallback9(() => {
     setSelectedAmount(null);
     setCustomAmountRaw("");
@@ -2879,7 +3105,7 @@ import {
   useEffect as useEffect8,
   useMemo as useMemo8
 } from "react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var AmountPickerContext = createContext6(null);
 function usePickerCtx(part) {
   const ctx = useContext8(AmountPickerContext);
@@ -2888,15 +3114,31 @@ function usePickerCtx(part) {
   }
   return ctx;
 }
-var Root3 = forwardRef4(function AmountPickerRoot({ currency, minAmount, maxAmount, onChange, asChild, children, ...rest }, forwardedRef) {
+var Root3 = forwardRef4(function AmountPickerRoot({
+  currency,
+  minAmount,
+  maxAmount,
+  emit = "major",
+  selector: externalSelector,
+  onChange,
+  asChild,
+  children,
+  ...rest
+}, forwardedRef) {
   const solva = useContext8(SolvaPayContext);
   if (!solva) throw new MissingProviderError("AmountPicker");
-  const selector = useTopupAmountSelector({ currency, minAmount, maxAmount });
+  const internalSelector = useTopupAmountSelector({ currency, minAmount, maxAmount });
+  const selector = externalSelector ?? internalSelector;
   const { creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  const resolvedAmountMinor = selector.resolvedAmount != null && selector.resolvedAmount > 0 ? Math.round(selector.resolvedAmount * minorPerMajor) : null;
   useEffect8(() => {
-    onChange?.(selector.resolvedAmount);
-  }, [selector.resolvedAmount, onChange]);
-  const resolvedAmountMinor = selector.resolvedAmount != null && selector.resolvedAmount > 0 ? Math.round(selector.resolvedAmount * 100) : null;
+    if (emit === "minor") {
+      onChange?.(resolvedAmountMinor);
+    } else {
+      onChange?.(selector.resolvedAmount);
+    }
+  }, [emit, selector.resolvedAmount, resolvedAmountMinor, onChange]);
   const rate = displayExchangeRate ?? 1;
   const estimatedCredits = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 && resolvedAmountMinor != null ? Math.floor(resolvedAmountMinor / rate * creditsPerMinorUnit) : null;
   const isApproximate = rate !== 1;
@@ -2904,12 +3146,23 @@ var Root3 = forwardRef4(function AmountPickerRoot({ currency, minAmount, maxAmou
     () => ({
       ...selector,
       currency,
+      emit,
       creditsPerMinorUnit,
       displayExchangeRate,
       estimatedCredits,
-      isApproximate
+      isApproximate,
+      resolvedAmountMinor
     }),
-    [selector, currency, creditsPerMinorUnit, displayExchangeRate, estimatedCredits, isApproximate]
+    [
+      selector,
+      currency,
+      emit,
+      creditsPerMinorUnit,
+      displayExchangeRate,
+      estimatedCredits,
+      isApproximate,
+      resolvedAmountMinor
+    ]
   );
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx11(AmountPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx11(Comp, { ref: forwardedRef, "data-solvapay-amount-picker": "", ...rest, children }) });
@@ -2928,19 +3181,18 @@ var Option = forwardRef4(function AmountPickerOption({ asChild, amount, onClick,
     }),
     ...rest
   };
+  const defaultLabel = formatPrice(
+    amount * getMinorUnitsPerMajor(ctx.currency),
+    ctx.currency,
+    { free: "" }
+  );
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx11(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        ctx.currencySymbol,
-        amount.toLocaleString()
-      ] }) })
+      /* @__PURE__ */ jsx11(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultLabel })
     );
   }
-  return /* @__PURE__ */ jsx11("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    ctx.currencySymbol,
-    amount.toLocaleString()
-  ] }) });
+  return /* @__PURE__ */ jsx11("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? defaultLabel });
 });
 var Custom = forwardRef4(function AmountPickerCustom({ asChild, onChange, onFocus, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Custom");
@@ -2972,9 +3224,12 @@ var Confirm = forwardRef4(function AmountPickerConfirm({ asChild, onClick, onCon
   const ctx = usePickerCtx("Confirm");
   const isDisabled = disabled || !ctx.resolvedAmount;
   const handleConfirm = useCallback10(() => {
-    if (ctx.validate() && ctx.resolvedAmount != null) {
-      onConfirm?.(ctx.resolvedAmount);
+    if (!ctx.validate()) return;
+    if (ctx.emit === "minor") {
+      if (ctx.resolvedAmountMinor != null) onConfirm?.(ctx.resolvedAmountMinor);
+      return;
     }
+    if (ctx.resolvedAmount != null) onConfirm?.(ctx.resolvedAmount);
   }, [ctx, onConfirm]);
   const commonProps = {
     "data-solvapay-amount-picker-confirm": "",
@@ -3109,7 +3364,7 @@ import {
   useElements as useElements2,
   PaymentElement as StripePaymentElement2
 } from "@stripe/react-stripe-js";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var TopupFormContext = createContext7(null);
 function useTopupCtx(part) {
   const ctx = useContext9(TopupFormContext);
@@ -3214,6 +3469,14 @@ var Inner = ({
     }
     setError(null);
     setIsProcessing(true);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      const msg = submitError.message || copy.errors.paymentUnexpected;
+      setError(msg);
+      setIsProcessing(false);
+      onError?.(new Error(msg));
+      return;
+    }
     const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
       elements,
       clientSecret,
@@ -3322,7 +3585,7 @@ var SubmitButton2 = forwardRef5(function TopupFormSubmitButton({ asChild, onClic
   const ctx = useTopupCtx("SubmitButton");
   const copy = useCopy();
   const dataState = ctx.isProcessing ? "processing" : !ctx.canSubmit ? "disabled" : "idle";
-  const content = ctx.isProcessing ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+  const content = ctx.isProcessing ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
     /* @__PURE__ */ jsx12(Spinner, { size: "sm" }),
     /* @__PURE__ */ jsx12("span", { children: copy.cta.processing })
   ] }) : children ? children : copy.cta.topUp;
@@ -3386,145 +3649,11 @@ function useTopupForm() {
   return useTopupCtx("useTopupForm");
 }
 
-// src/TopupForm.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var TopupForm2 = (props) => {
-  const { className, buttonClassName, submitButtonText, ...rootProps } = props;
-  const rootClass = ["solvapay-topup-form", className].filter(Boolean).join(" ");
-  const buttonClass = ["solvapay-topup-form-submit", buttonClassName].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6(TopupForm.Root, { ...rootProps, className: rootClass, children: [
-    /* @__PURE__ */ jsx13(TopupForm.PaymentElement, {}),
-    /* @__PURE__ */ jsx13(TopupForm.Error, { className: "solvapay-topup-form-error" }),
-    /* @__PURE__ */ jsx13(TopupForm.Loading, { className: "solvapay-topup-form-loading" }),
-    /* @__PURE__ */ jsx13(TopupForm.SubmitButton, { className: buttonClass, children: submitButtonText })
-  ] });
-};
-
-// src/primitives/ProductBadge.tsx
-import { forwardRef as forwardRef6, useContext as useContext10, useEffect as useEffect10, useState as useState12 } from "react";
-import { Fragment as Fragment5, jsx as jsx14 } from "react/jsx-runtime";
-var ProductBadgeImpl = forwardRef6(function ProductBadge({ asChild, children, ...rest }, forwardedRef) {
-  const solva = useContext10(SolvaPayContext);
-  if (!solva) throw new MissingProviderError("ProductBadge");
-  const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
-  const copy = useCopy();
-  const [hasLoadedOnce, setHasLoadedOnce] = useState12(false);
-  useEffect10(() => {
-    if (!loading) setHasLoadedOnce(true);
-  }, [loading]);
-  const planToDisplay = activePurchase?.productName ?? null;
-  const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
-  if (!shouldShow) return null;
-  const commonProps = {
-    "data-solvapay-product-badge": "",
-    "data-loading": loading ? "" : void 0,
-    "data-has-purchase": activePurchase ? "" : void 0,
-    "data-has-paid-purchase": hasPaidPurchase ? "" : void 0,
-    role: "status",
-    "aria-live": "polite",
-    "aria-busy": loading,
-    "aria-label": interpolate(copy.product.currentProductLabel, { name: planToDisplay }),
-    ...rest
-  };
-  if (asChild) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx14(Fragment5, { children: planToDisplay }) })
-    );
-  }
-  void purchases;
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ jsx14("div", { ref: forwardedRef, ...commonProps, children: children ?? planToDisplay })
-  );
-});
-var ProductBadge2 = ProductBadgeImpl;
-var PlanBadge = ProductBadgeImpl;
-
-// src/primitives/PurchaseGate.tsx
-import {
-  createContext as createContext8,
-  forwardRef as forwardRef7,
-  useContext as useContext11,
-  useMemo as useMemo10
-} from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var PurchaseGateContext = createContext8(null);
-function useGateCtx(part) {
-  const ctx = useContext11(PurchaseGateContext);
-  if (!ctx) {
-    throw new Error(`PurchaseGate.${part} must be rendered inside <PurchaseGate.Root>.`);
-  }
-  return ctx;
-}
-var Root5 = forwardRef7(function PurchaseGateRoot({ requirePlan, requireProduct, asChild, children, ...rest }, forwardedRef) {
-  const solva = useContext11(SolvaPayContext);
-  if (!solva) throw new MissingProviderError("PurchaseGate");
-  const { purchases, loading, hasProduct, error } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
-  const state = loading ? "loading" : hasAccess ? "allowed" : "blocked";
-  const ctx = useMemo10(
-    () => ({ state, loading, hasAccess, error }),
-    [state, loading, hasAccess, error]
-  );
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx15(PurchaseGateContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx15(
-    Comp,
-    {
-      ref: forwardedRef,
-      "data-solvapay-purchase-gate": "",
-      "data-state": state,
-      ...rest,
-      children
-    }
-  ) });
-});
-var Allowed = forwardRef7(function PurchaseGateAllowed({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx("Allowed");
-  if (ctx.state !== "allowed") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx15(Comp, { ref: forwardedRef, "data-solvapay-purchase-gate-allowed": "", ...rest, children });
-});
-var Blocked = forwardRef7(function PurchaseGateBlocked({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx("Blocked");
-  if (ctx.state !== "blocked") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx15(Comp, { ref: forwardedRef, "data-solvapay-purchase-gate-blocked": "", ...rest, children });
-});
-var Loading3 = forwardRef7(function PurchaseGateLoading({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx("Loading");
-  if (ctx.state !== "loading") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx15(Comp, { ref: forwardedRef, "data-solvapay-purchase-gate-loading": "", ...rest, children });
-});
-var ErrorSlot3 = forwardRef7(function PurchaseGateError({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx("Error");
-  if (!ctx.error) return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx15(Comp, { ref: forwardedRef, "data-solvapay-purchase-gate-error": "", role: "alert", ...rest, children: children ?? ctx.error.message });
-});
-var PurchaseGateRoot2 = Root5;
-var PurchaseGateAllowed2 = Allowed;
-var PurchaseGateBlocked2 = Blocked;
-var PurchaseGateLoading2 = Loading3;
-var PurchaseGateError2 = ErrorSlot3;
-var PurchaseGate = {
-  Root: Root5,
-  Allowed,
-  Blocked,
-  Loading: Loading3,
-  Error: ErrorSlot3
-};
-function usePurchaseGate() {
-  return useGateCtx("usePurchaseGate");
-}
-
 // src/primitives/BalanceBadge.tsx
-import { forwardRef as forwardRef8, useContext as useContext12 } from "react";
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
-var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, lowThreshold = 10, children, ...rest }, forwardedRef) {
-  const solva = useContext12(SolvaPayContext);
+import { forwardRef as forwardRef6, useContext as useContext10 } from "react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var BalanceBadge = forwardRef6(function BalanceBadge2({ asChild, numberOnly, lowThreshold = 10, children, ...rest }, forwardedRef) {
+  const solva = useContext10(SolvaPayContext);
   if (!solva) throw new MissingProviderError("BalanceBadge");
   const { credits, displayCurrency, creditsPerMinorUnit, displayExchangeRate, loading } = useBalance();
   const copy = useCopy();
@@ -3541,10 +3670,10 @@ var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, low
     if (asChild) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx16(Fragment6, {}) })
+        /* @__PURE__ */ jsx13(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx13(Fragment4, {}) })
       );
     }
-    return /* @__PURE__ */ jsx16("span", { ref: forwardedRef, ...commonProps });
+    return /* @__PURE__ */ jsx13("span", { ref: forwardedRef, ...commonProps });
   }
   if (credits == null) return null;
   const formattedCredits = new Intl.NumberFormat(locale).format(credits);
@@ -3559,7 +3688,7 @@ var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, low
     }).format(displayMajorUnits);
     currencyEquivalent = interpolate(copy.balance.currencyEquivalent, { amount: formatted });
   }
-  const content = children ?? /* @__PURE__ */ jsxs7(Fragment6, { children: [
+  const content = children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
     formattedCredits,
     !numberOnly && copy.balance.credits,
     !numberOnly && currencyEquivalent
@@ -3567,38 +3696,27 @@ var BalanceBadge = forwardRef8(function BalanceBadge2({ asChild, numberOnly, low
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children: content })
+      /* @__PURE__ */ jsx13(Slot, { ref: forwardedRef, ...commonProps, children: content })
     );
   }
-  return /* @__PURE__ */ jsx16("span", { ref: forwardedRef, ...commonProps, children: content });
+  return /* @__PURE__ */ jsx13("span", { ref: forwardedRef, ...commonProps, children: content });
 });
 
 // src/primitives/PlanSelector.tsx
 import {
-  createContext as createContext9,
-  forwardRef as forwardRef9,
+  createContext as createContext8,
+  forwardRef as forwardRef7,
   useCallback as useCallback13,
-  useContext as useContext13,
-  useMemo as useMemo11
+  useContext as useContext11,
+  useMemo as useMemo10
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var PlanSelectorContext = createContext9(null);
-function usePlanSelectorContext(part) {
-  const ctx = useContext13(PlanSelectorContext);
-  if (!ctx) {
-    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Root>.`);
-  }
-  return ctx;
-}
-var CardContext = createContext9(null);
-function useCardContext(part) {
-  const ctx = useContext13(CardContext);
-  if (!ctx) {
-    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Card>.`);
-  }
-  return ctx;
-}
+
+// src/transport/list-plans.ts
 async function defaultListPlans(productRef, config) {
+  const transport = config?.transport;
+  if (transport) {
+    return transport.listPlans ? transport.listPlans(productRef) : plansCache.get(productRef)?.plans ?? [];
+  }
   const base = config?.api?.listPlans || "/api/list-plans";
   const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
   const fetchFn = config?.fetch || fetch;
@@ -3612,7 +3730,26 @@ async function defaultListPlans(productRef, config) {
   const data = await res.json();
   return data.plans ?? [];
 }
-var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
+
+// src/primitives/PlanSelector.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PlanSelectorContext = createContext8(null);
+function usePlanSelectorContext(part) {
+  const ctx = useContext11(PlanSelectorContext);
+  if (!ctx) {
+    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Root>.`);
+  }
+  return ctx;
+}
+var CardContext = createContext8(null);
+function useCardContext(part) {
+  const ctx = useContext11(CardContext);
+  if (!ctx) {
+    throw new Error(`PlanSelector.${part} must be rendered inside <PlanSelector.Card>.`);
+  }
+  return ctx;
+}
+var Root5 = forwardRef7(function PlanSelectorRoot(props, forwardedRef) {
   const {
     productRef,
     fetcher,
@@ -3626,16 +3763,16 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     children,
     ...rest
   } = props;
-  const solva = useContext13(SolvaPayContext);
+  const solva = useContext11(SolvaPayContext);
   if (!solva) throw new MissingProviderError("PlanSelector");
   if (!productRef) throw new MissingProductRefError("PlanSelector");
   const { _config } = solva;
   const { purchases } = usePurchase();
-  const effectiveFetcher = useMemo11(
+  const effectiveFetcher = useMemo10(
     () => fetcher ?? ((ref) => defaultListPlans(ref, _config)),
     [fetcher, _config]
   );
-  const { plans, selectedPlan, selectPlan, loading, error } = usePlans({
+  const { plans, selectedPlan, selectPlan, setSelectedPlanIndex, loading, error } = usePlans({
     productRef,
     fetcher: effectiveFetcher,
     filter,
@@ -3643,7 +3780,7 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     autoSelectFirstPaid,
     initialPlanRef
   });
-  const autoCurrentPlanRef = useMemo11(() => {
+  const autoCurrentPlanRef = useMemo10(() => {
     const active = purchases.filter((p) => p.status === "active").sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0];
     return active?.planSnapshot?.reference ?? null;
   }, [purchases]);
@@ -3670,8 +3807,11 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
     },
     [plans, selectPlan, onSelect]
   );
+  const clearSelection = useCallback13(() => {
+    setSelectedPlanIndex(-1);
+  }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
-  const ctx = useMemo11(
+  const ctx = useMemo10(
     () => ({
       plans,
       loading,
@@ -3683,7 +3823,8 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     }),
     [
       plans,
@@ -3696,10 +3837,11 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     ]
   );
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx14(
     PlanSelectionProvider,
     {
       value: {
@@ -3712,19 +3854,19 @@ var Root6 = forwardRef9(function PlanSelectorRoot(props, forwardedRef) {
         loading,
         error
       },
-      children: /* @__PURE__ */ jsx17("div", { ref: forwardedRef, "data-solvapay-plan-selector": "", ...rest, children: /* @__PURE__ */ jsx17(PlanSelectorContext.Provider, { value: ctx, children }) })
+      children: /* @__PURE__ */ jsx14("div", { ref: forwardedRef, "data-solvapay-plan-selector": "", ...rest, children: /* @__PURE__ */ jsx14(PlanSelectorContext.Provider, { value: ctx, children }) })
     }
   );
 });
-var Heading = forwardRef9(function PlanSelectorHeading({ asChild, children, ...rest }, forwardedRef) {
+var Heading = forwardRef7(function PlanSelectorHeading({ asChild, children, ...rest }, forwardedRef) {
   usePlanSelectorContext("Heading");
   const copy = useCopy();
   const Comp = asChild ? Slot : "h3";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-heading": "", ...rest, children: children ?? copy.planSelector.heading });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-heading": "", ...rest, children: children ?? copy.planSelector.heading });
 });
-var Grid = forwardRef9(function PlanSelectorGrid({ children, ...rest }, forwardedRef) {
+var Grid = forwardRef7(function PlanSelectorGrid({ children, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("Grid");
-  return /* @__PURE__ */ jsx17("div", { ref: forwardedRef, "data-solvapay-plan-selector-grid": "", ...rest, children: ctx.plans.map((plan) => {
+  return /* @__PURE__ */ jsx14("div", { ref: forwardedRef, "data-solvapay-plan-selector-grid": "", ...rest, children: ctx.plans.map((plan) => {
     const isCurrent = ctx.isCurrent(plan.reference);
     const isFree = ctx.isFree(plan.reference);
     const isPopular = ctx.isPopular(plan.reference);
@@ -3740,10 +3882,10 @@ var Grid = forwardRef9(function PlanSelectorGrid({ children, ...rest }, forwarde
       disabled,
       select: () => ctx.select(plan.reference)
     };
-    return /* @__PURE__ */ jsx17(CardContext.Provider, { value: cardCtx, children }, plan.reference);
+    return /* @__PURE__ */ jsx14(CardContext.Provider, { value: cardCtx, children }, plan.reference);
   }) });
 });
-var Card = forwardRef9(function PlanSelectorCard({ asChild, onClick, children, ...rest }, forwardedRef) {
+var Card = forwardRef7(function PlanSelectorCard({ asChild, onClick, children, ...rest }, forwardedRef) {
   const card = useCardContext("Card");
   const dataTrial = !!(card.plan.trialDays && card.plan.trialDays > 0);
   const commonProps = {
@@ -3761,10 +3903,10 @@ var Card = forwardRef9(function PlanSelectorCard({ asChild, onClick, children, .
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ jsx17(Slot, { ref: forwardedRef, ...commonProps, children })
+      /* @__PURE__ */ jsx14(Slot, { ref: forwardedRef, ...commonProps, children })
     );
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       ref: forwardedRef,
@@ -3775,42 +3917,66 @@ var Card = forwardRef9(function PlanSelectorCard({ asChild, onClick, children, .
     }
   );
 });
-var CardName = forwardRef9(function PlanSelectorCardName({ asChild, children, ...rest }, forwardedRef) {
+var CardName = forwardRef7(function PlanSelectorCardName({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardName");
-  if (!card.plan.name) return null;
+  const fallback = card.plan.requiresPayment === false ? "Free" : card.plan.type === "usage-based" ? "Pay as you go" : card.plan.type === "recurring" ? "Plan" : null;
+  const label = card.plan.name ?? fallback;
+  if (!label && children == null) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? card.plan.name });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? label });
 });
-var CardPrice = forwardRef9(function PlanSelectorCardPrice({ asChild, children, ...rest }, forwardedRef) {
+var CardPrice = forwardRef7(function PlanSelectorCardPrice({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardPrice");
   const locale = useLocale();
   const copy = useCopy();
-  const formatted = useMemo11(() => {
+  const formatted = useMemo10(() => {
     if (card.isFree) return copy.planSelector.freeBadge;
+    if (card.plan.type === "usage-based") {
+      const creditsPerUnit = card.plan.creditsPerUnit ?? 1;
+      const perCallMinor = Math.max(1, Math.round(1 / creditsPerUnit));
+      const rate = formatPrice(perCallMinor, card.plan.currency ?? "usd", {
+        locale,
+        free: ""
+      });
+      return `${rate} / call`;
+    }
     return formatPrice(card.plan.price ?? 0, card.plan.currency ?? "usd", {
       locale,
       free: copy.interval.free
     });
   }, [
     card.isFree,
+    card.plan.type,
     card.plan.price,
     card.plan.currency,
+    card.plan.creditsPerUnit,
     locale,
     copy.planSelector.freeBadge,
     copy.interval.free
   ]);
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-price": "", ...rest, children: children ?? formatted });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-price": "", ...rest, children: children ?? formatted });
 });
-var CardInterval = forwardRef9(function PlanSelectorCardInterval({ asChild, children, ...rest }, forwardedRef) {
+var CardInterval = forwardRef7(function PlanSelectorCardInterval({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardInterval");
   const copy = useCopy();
-  if (card.isFree || !card.plan.interval) return null;
-  const text = interpolate(copy.planSelector.perIntervalShort, { interval: card.plan.interval });
+  if (card.isFree || card.plan.type === "usage-based") return null;
+  const rawInterval = card.plan.interval ?? normalizeBillingCycle(card.plan.billingCycle);
+  if (!rawInterval) return null;
+  const text = interpolate(copy.planSelector.perIntervalShort, { interval: rawInterval });
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
 });
-var CardBadge = forwardRef9(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
+function normalizeBillingCycle(cycle) {
+  if (!cycle) return null;
+  const lc = cycle.toLowerCase();
+  if (lc === "monthly" || lc === "month") return "month";
+  if (lc === "yearly" || lc === "annually" || lc === "annual" || lc === "year") return "year";
+  if (lc === "weekly" || lc === "week") return "week";
+  if (lc === "daily" || lc === "day") return "day";
+  return cycle;
+}
+var CardBadge = forwardRef7(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardBadge");
   const copy = useCopy();
   let variant = null;
@@ -3824,7 +3990,7 @@ var CardBadge = forwardRef9(function PlanSelectorCardBadge({ asChild, children,
   }
   if (!variant) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx14(
     Comp,
     {
       ref: forwardedRef,
@@ -3835,19 +4001,19 @@ var CardBadge = forwardRef9(function PlanSelectorCardBadge({ asChild, children,
     }
   );
 });
-var Loading4 = forwardRef9(function PlanSelectorLoading({ asChild, children, ...rest }, forwardedRef) {
+var Loading3 = forwardRef7(function PlanSelectorLoading({ asChild, children, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("Loading");
   if (!ctx.loading || ctx.plans.length > 0) return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-loading": "", ...rest, children });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-loading": "", ...rest, children });
 });
-var ErrorSlot4 = forwardRef9(function PlanSelectorError({ asChild, children, ...rest }, forwardedRef) {
+var ErrorSlot3 = forwardRef7(function PlanSelectorError({ asChild, children, ...rest }, forwardedRef) {
   const ctx = usePlanSelectorContext("Error");
   if (!ctx.error) return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx17(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-error": "", role: "alert", ...rest, children: children ?? ctx.error.message });
+  return /* @__PURE__ */ jsx14(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-error": "", role: "alert", ...rest, children: children ?? ctx.error.message });
 });
-var PlanSelectorRoot2 = Root6;
+var PlanSelectorRoot2 = Root5;
 var PlanSelectorHeading2 = Heading;
 var PlanSelectorGrid2 = Grid;
 var PlanSelectorCard2 = Card;
@@ -3855,10 +4021,10 @@ var PlanSelectorCardName2 = CardName;
 var PlanSelectorCardPrice2 = CardPrice;
 var PlanSelectorCardInterval2 = CardInterval;
 var PlanSelectorCardBadge2 = CardBadge;
-var PlanSelectorLoading2 = Loading4;
-var PlanSelectorError2 = ErrorSlot4;
+var PlanSelectorLoading2 = Loading3;
+var PlanSelectorError2 = ErrorSlot3;
 var PlanSelector = {
-  Root: Root6,
+  Root: Root5,
   Heading,
   Grid,
   Card,
@@ -3866,306 +4032,21 @@ var PlanSelector = {
   CardPrice,
   CardInterval,
   CardBadge,
-  Loading: Loading4,
-  Error: ErrorSlot4
+  Loading: Loading3,
+  Error: ErrorSlot3
 };
 function usePlanSelector() {
   return usePlanSelectorContext("usePlanSelector");
 }
 
-// src/primitives/ActivationFlow.tsx
-import {
-  createContext as createContext10,
-  forwardRef as forwardRef10,
-  useCallback as useCallback14,
-  useContext as useContext14,
-  useEffect as useEffect11,
-  useMemo as useMemo12,
-  useRef as useRef7,
-  useState as useState13
-} from "react";
-import { Fragment as Fragment7, jsx as jsx18 } from "react/jsx-runtime";
-var ActivationFlowContext = createContext10(null);
-function useFlowCtx(part) {
-  const ctx = useContext14(ActivationFlowContext);
-  if (!ctx) {
-    throw new Error(`ActivationFlow.${part} must be rendered inside <ActivationFlow.Root>.`);
-  }
-  return ctx;
-}
-var Root7 = forwardRef10(function ActivationFlowRoot({
-  productRef,
-  planRef: planRefProp,
-  onSuccess,
-  onError,
-  retryDelayMs = 1500,
-  retryBackoffMs = 2e3,
-  asChild,
-  children,
-  ...rest
-}, forwardedRef) {
-  const solva = useContext14(SolvaPayContext);
-  if (!solva) throw new MissingProviderError("ActivationFlow");
-  if (!productRef) throw new MissingProductRefError("ActivationFlow");
-  const planSelection = usePlanSelection();
-  const resolvedPlanRef = planRefProp ?? planSelection?.selectedPlanRef ?? void 0;
-  const { plan } = usePlan({ planRef: resolvedPlanRef, productRef });
-  const { activate, state, error, result, reset } = useActivation();
-  const currency = plan?.currency ?? "USD";
-  const amountSelector = useTopupAmountSelector({ currency });
-  const { adjustBalance, creditsPerMinorUnit, displayExchangeRate } = useBalance();
-  const [step, setStep] = useState13("summary");
-  const calledSuccessRef = useRef7(false);
-  const retryTimeoutRef = useRef7(null);
-  useEffect11(() => {
-    if (state === "activated" && !calledSuccessRef.current) {
-      calledSuccessRef.current = true;
-      setStep("activated");
-      if (result) {
-        const activationResult = { kind: "activated", result };
-        onSuccess?.(activationResult);
-      }
-    }
-  }, [state, result, onSuccess]);
-  useEffect11(() => {
-    if (state === "topup_required" && (step === "summary" || step === "activating")) {
-      setStep("selectAmount");
-    }
-  }, [state, step]);
-  useEffect11(() => {
-    if ((state === "error" || state === "payment_required") && error) {
-      setStep("error");
-      if (state === "error") onError?.(new Error(error));
-    }
-  }, [state, error, onError]);
-  const handleActivate = useCallback14(async () => {
-    if (!resolvedPlanRef) return;
-    setStep("activating");
-    await activate({ productRef, planRef: resolvedPlanRef });
-  }, [activate, productRef, resolvedPlanRef]);
-  const goToTopupPayment = useCallback14(() => {
-    if (amountSelector.validate()) setStep("topupPayment");
-  }, [amountSelector]);
-  const backToSelectAmount = useCallback14(() => {
-    setStep("selectAmount");
-  }, []);
-  const retryActivation = useCallback14(async () => {
-    if (!resolvedPlanRef) return;
-    setStep("retrying");
-    const amountMinor = Math.round((amountSelector.resolvedAmount || 0) * 100);
-    const rate = displayExchangeRate ?? 1;
-    if (creditsPerMinorUnit) {
-      adjustBalance(Math.floor(amountMinor / rate * creditsPerMinorUnit));
-    }
-    await new Promise((r) => setTimeout(r, retryDelayMs));
-    await activate({ productRef, planRef: resolvedPlanRef });
-  }, [
-    resolvedPlanRef,
-    amountSelector.resolvedAmount,
-    displayExchangeRate,
-    creditsPerMinorUnit,
-    adjustBalance,
-    retryDelayMs,
-    activate,
-    productRef
-  ]);
-  const handleTopupSuccess = useCallback14(async () => {
-    await retryActivation();
-  }, [retryActivation]);
-  useEffect11(() => {
-    if (step !== "retrying") return;
-    if (state !== "topup_required") return;
-    if (!resolvedPlanRef) return;
-    retryTimeoutRef.current = setTimeout(async () => {
-      await activate({ productRef, planRef: resolvedPlanRef });
-    }, retryBackoffMs);
-    return () => {
-      if (retryTimeoutRef.current) clearTimeout(retryTimeoutRef.current);
-    };
-  }, [step, state, resolvedPlanRef, retryBackoffMs, activate, productRef]);
-  const resetFlow = useCallback14(() => {
-    reset();
-    calledSuccessRef.current = false;
-    setStep("summary");
-  }, [reset]);
-  const amountCents = Math.round((amountSelector.resolvedAmount || 0) * 100);
-  const ctx = useMemo12(
-    () => ({
-      step,
-      plan,
-      productRef,
-      planRef: resolvedPlanRef ?? "",
-      amountSelector,
-      amountCents,
-      currency,
-      activate: handleActivate,
-      reset: resetFlow,
-      goToTopupPayment,
-      backToSelectAmount,
-      onTopupSuccess: handleTopupSuccess,
-      error,
-      onError
-    }),
-    [
-      step,
-      plan,
-      productRef,
-      resolvedPlanRef,
-      amountSelector,
-      amountCents,
-      currency,
-      handleActivate,
-      resetFlow,
-      goToTopupPayment,
-      backToSelectAmount,
-      handleTopupSuccess,
-      error,
-      onError
-    ]
-  );
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(ActivationFlowContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx18(
-    Comp,
-    {
-      ref: forwardedRef,
-      "data-solvapay-activation-flow": "",
-      "data-state": step,
-      ...rest,
-      children
-    }
-  ) });
-});
-function matchStep(step, allowed) {
-  return allowed.includes(step);
-}
-var Summary2 = forwardRef10(function ActivationFlowSummary({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useFlowCtx("Summary");
-  if (!matchStep(ctx.step, ["summary", "activating"])) return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-activation-flow-summary": "", ...rest, children });
-});
-var ActivateButton = forwardRef10(
-  function ActivationFlowActivateButton({ asChild, onClick, children, ...rest }, forwardedRef) {
-    const ctx = useFlowCtx("ActivateButton");
-    const copy = useCopy();
-    if (!matchStep(ctx.step, ["summary", "activating"])) return null;
-    const isActivating = ctx.step === "activating";
-    const disabled = isActivating;
-    const commonProps = {
-      "data-solvapay-activation-flow-activate": "",
-      "data-state": isActivating ? "activating" : "idle",
-      "aria-busy": isActivating,
-      disabled,
-      onClick: composeEventHandlers(onClick, () => {
-        void ctx.activate();
-      }),
-      ...rest
-    };
-    const label = isActivating ? copy.activationFlow.activatingLabel : copy.activationFlow.activateButton;
-    if (asChild) {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx18(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx18(Fragment7, { children: label }) })
-      );
-    }
-    return /* @__PURE__ */ jsx18("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
-  }
-);
-var AmountPickerMount = ({ children }) => {
-  const ctx = useFlowCtx("AmountPicker");
-  if (ctx.step !== "selectAmount") return null;
-  return /* @__PURE__ */ jsx18("div", { "data-solvapay-activation-flow-amount-picker": "", children: /* @__PURE__ */ jsx18(AmountPicker.Root, { currency: ctx.currency, children }) });
-};
-var ContinueButton = forwardRef10(
-  function ActivationFlowContinueButton({ asChild, onClick, children, ...rest }, forwardedRef) {
-    const ctx = useFlowCtx("ContinueButton");
-    const copy = useCopy();
-    if (ctx.step !== "selectAmount") return null;
-    const disabled = !ctx.amountSelector.resolvedAmount;
-    const commonProps = {
-      "data-solvapay-activation-flow-continue": "",
-      "data-state": disabled ? "disabled" : "idle",
-      disabled,
-      "aria-disabled": disabled || void 0,
-      onClick: composeEventHandlers(onClick, () => {
-        ctx.goToTopupPayment();
-      }),
-      ...rest
-    };
-    if (asChild) {
-      return (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx18(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx18(Fragment7, { children: copy.activationFlow.continueToPayment }) })
-      );
-    }
-    return /* @__PURE__ */ jsx18("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? copy.activationFlow.continueToPayment });
-  }
-);
-var Retrying = forwardRef10(function ActivationFlowRetrying({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useFlowCtx("Retrying");
-  if (ctx.step !== "retrying") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-activation-flow-retrying": "", ...rest, children });
-});
-var Activated = forwardRef10(function ActivationFlowActivated({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useFlowCtx("Activated");
-  if (ctx.step !== "activated") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-activation-flow-activated": "", ...rest, children });
-});
-var Loading5 = forwardRef10(function ActivationFlowLoading({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useFlowCtx("Loading");
-  if (ctx.plan) return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(Comp, { ref: forwardedRef, "data-solvapay-activation-flow-loading": "", ...rest, children });
-});
-var ErrorSlot5 = forwardRef10(function ActivationFlowError({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useFlowCtx("Error");
-  if (ctx.step !== "error") return null;
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx18(
-    Comp,
-    {
-      ref: forwardedRef,
-      role: "alert",
-      "data-solvapay-activation-flow-error": "",
-      ...rest,
-      children: children ?? ctx.error
-    }
-  );
-});
-var ActivationFlowRoot2 = Root7;
-var ActivationFlowSummary2 = Summary2;
-var ActivationFlowActivateButton2 = ActivateButton;
-var ActivationFlowAmountPicker = AmountPickerMount;
-var ActivationFlowContinueButton2 = ContinueButton;
-var ActivationFlowRetrying2 = Retrying;
-var ActivationFlowActivated2 = Activated;
-var ActivationFlowLoading2 = Loading5;
-var ActivationFlowError2 = ErrorSlot5;
-var ActivationFlow = {
-  Root: Root7,
-  Summary: Summary2,
-  ActivateButton,
-  AmountPicker: AmountPickerMount,
-  ContinueButton,
-  Retrying,
-  Activated,
-  Loading: Loading5,
-  Error: ErrorSlot5
-};
-function useActivationFlow() {
-  return useFlowCtx("useActivationFlow");
-}
-
 // src/hooks/usePurchaseActions.ts
-import { useState as useState14, useCallback as useCallback15 } from "react";
+import { useState as useState12, useCallback as useCallback14 } from "react";
 function usePurchaseActions() {
   const ctx = useSolvaPay();
-  const [isCancelling, setIsCancelling] = useState14(false);
-  const [isReactivating, setIsReactivating] = useState14(false);
-  const [isActivating, setIsActivating] = useState14(false);
-  const cancelRenewal = useCallback15(
+  const [isCancelling, setIsCancelling] = useState12(false);
+  const [isReactivating, setIsReactivating] = useState12(false);
+  const [isActivating, setIsActivating] = useState12(false);
+  const cancelRenewal = useCallback14(
     async (params) => {
       setIsCancelling(true);
       try {
@@ -4176,7 +4057,7 @@ function usePurchaseActions() {
     },
     [ctx.cancelRenewal]
   );
-  const reactivateRenewal = useCallback15(
+  const reactivateRenewal = useCallback14(
     async (params) => {
       setIsReactivating(true);
       try {
@@ -4187,7 +4068,7 @@ function usePurchaseActions() {
     },
     [ctx.reactivateRenewal]
   );
-  const activatePlan = useCallback15(
+  const activatePlan = useCallback14(
     async (params) => {
       setIsActivating(true);
       try {
@@ -4209,8 +4090,8 @@ function usePurchaseActions() {
 }
 
 // src/primitives/CancelPlanButton.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback16, useContext as useContext15 } from "react";
-import { Fragment as Fragment8, jsx as jsx19 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8, useCallback as useCallback15, useContext as useContext12 } from "react";
+import { Fragment as Fragment5, jsx as jsx15 } from "react/jsx-runtime";
 function resolveConfirmText(confirm, purchase, defaults) {
   if (confirm === false) return null;
   if (typeof confirm === "string") return confirm;
@@ -4218,7 +4099,7 @@ function resolveConfirmText(confirm, purchase, defaults) {
   if (planType === "usage-based") return defaults.usageBased;
   return defaults.recurring;
 }
-var CancelPlanButton = forwardRef11(
+var CancelPlanButton = forwardRef8(
   function CancelPlanButton2({
     asChild,
     purchaseRef,
@@ -4230,14 +4111,14 @@ var CancelPlanButton = forwardRef11(
     children,
     ...rest
   }, forwardedRef) {
-    const solva = useContext15(SolvaPayContext);
+    const solva = useContext12(SolvaPayContext);
     if (!solva) throw new MissingProviderError("CancelPlanButton");
     const copy = useCopy();
     const { activePurchase } = usePurchase();
     const { cancelRenewal, isCancelling } = usePurchaseActions();
     const effectivePurchase = purchaseRef ? activePurchase && activePurchase.reference === purchaseRef ? activePurchase : { reference: purchaseRef } : activePurchase;
     const effectiveRef = purchaseRef ?? effectivePurchase?.reference;
-    const cancel = useCallback16(async () => {
+    const cancel = useCallback15(async () => {
       if (!effectiveRef) return;
       const confirmText = resolveConfirmText(confirm, effectivePurchase, {
         recurring: copy.cancelPlan.confirmRecurring,
@@ -4270,24 +4151,24 @@ var CancelPlanButton = forwardRef11(
     if (asChild) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx19(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx19(Fragment8, { children: label }) })
+        /* @__PURE__ */ jsx15(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx15(Fragment5, { children: label }) })
       );
     }
-    return /* @__PURE__ */ jsx19("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
+    return /* @__PURE__ */ jsx15("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
   }
 );
 
 // src/hooks/usePurchaseStatus.ts
-import { useMemo as useMemo13, useCallback as useCallback17 } from "react";
+import { useMemo as useMemo11, useCallback as useCallback16 } from "react";
 function usePurchaseStatus() {
   const { purchases } = usePurchase();
   const locale = useLocale();
-  const isPaidPurchase2 = useCallback17((p) => {
+  const isPaidPurchase2 = useCallback16((p) => {
     return (p.amount ?? 0) > 0;
   }, []);
-  const purchaseData = useMemo13(() => {
+  const purchaseData = useMemo11(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
-      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
+      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p) && isPlanPurchase(p);
     });
     const cancelledPurchase = cancelledPaidPurchases.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
@@ -4298,7 +4179,7 @@ function usePurchaseStatus() {
       shouldShowCancelledNotice
     };
   }, [purchases, isPaidPurchase2]);
-  const formatDate = useCallback17(
+  const formatDate = useCallback16(
     (dateString) => {
       if (!dateString) return null;
       return new Date(dateString).toLocaleDateString(locale || "en-US", {
@@ -4309,7 +4190,7 @@ function usePurchaseStatus() {
     },
     [locale]
   );
-  const getDaysUntilExpiration = useCallback17((endDate) => {
+  const getDaysUntilExpiration = useCallback16((endDate) => {
     if (!endDate) return null;
     const now = /* @__PURE__ */ new Date();
     const expiration = new Date(endDate);
@@ -4327,16 +4208,16 @@ function usePurchaseStatus() {
 
 // src/primitives/CancelledPlanNotice.tsx
 import {
-  createContext as createContext11,
-  forwardRef as forwardRef12,
-  useCallback as useCallback18,
-  useContext as useContext16,
-  useMemo as useMemo14
+  createContext as createContext9,
+  forwardRef as forwardRef9,
+  useCallback as useCallback17,
+  useContext as useContext13,
+  useMemo as useMemo12
 } from "react";
-import { Fragment as Fragment9, jsx as jsx20 } from "react/jsx-runtime";
-var CancelledPlanNoticeContext = createContext11(null);
+import { Fragment as Fragment6, jsx as jsx16 } from "react/jsx-runtime";
+var CancelledPlanNoticeContext = createContext9(null);
 function useNoticeCtx(part) {
-  const ctx = useContext16(CancelledPlanNoticeContext);
+  const ctx = useContext13(CancelledPlanNoticeContext);
   if (!ctx) {
     throw new Error(
       `CancelledPlanNotice.${part} must be rendered inside <CancelledPlanNotice.Root>.`
@@ -4344,8 +4225,8 @@ function useNoticeCtx(part) {
   }
   return ctx;
 }
-var Root8 = forwardRef12(function CancelledPlanNoticeRoot({ onReactivated, onError, asChild, children, ...rest }, forwardedRef) {
-  const solva = useContext16(SolvaPayContext);
+var Root6 = forwardRef9(function CancelledPlanNoticeRoot({ onReactivated, onError, asChild, children, ...rest }, forwardedRef) {
+  const solva = useContext13(SolvaPayContext);
   if (!solva) throw new MissingProviderError("CancelledPlanNotice");
   const {
     cancelledPurchase,
@@ -4354,7 +4235,7 @@ var Root8 = forwardRef12(function CancelledPlanNoticeRoot({ onReactivated, onErr
     getDaysUntilExpiration
   } = usePurchaseStatus();
   const { reactivateRenewal, isReactivating } = usePurchaseActions();
-  const reactivate = useCallback18(async () => {
+  const reactivate = useCallback17(async () => {
     if (!cancelledPurchase) return;
     try {
       await reactivateRenewal({ purchaseRef: cancelledPurchase.reference });
@@ -4363,11 +4244,11 @@ var Root8 = forwardRef12(function CancelledPlanNoticeRoot({ onReactivated, onErr
       onError?.(err instanceof Error ? err : new Error(String(err)));
     }
   }, [cancelledPurchase, reactivateRenewal, onReactivated, onError]);
-  const daysRemaining = useMemo14(
+  const daysRemaining = useMemo12(
     () => cancelledPurchase ? getDaysUntilExpiration(cancelledPurchase.endDate) : null,
     [cancelledPurchase, getDaysUntilExpiration]
   );
-  const ctx = useMemo14(() => {
+  const ctx = useMemo12(() => {
     if (!cancelledPurchase) return null;
     const state = daysRemaining != null && daysRemaining > 0 ? "active" : "expired";
     return {
@@ -4382,7 +4263,7 @@ var Root8 = forwardRef12(function CancelledPlanNoticeRoot({ onReactivated, onErr
   }, [cancelledPurchase, daysRemaining, formatDate, reactivate, isReactivating]);
   if (!shouldShowCancelledNotice || !ctx) return null;
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx20(CancelledPlanNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx16(CancelledPlanNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx16(
     Comp,
     {
       ref: forwardedRef,
@@ -4394,61 +4275,61 @@ var Root8 = forwardRef12(function CancelledPlanNoticeRoot({ onReactivated, onErr
     }
   ) });
 });
-var Heading2 = forwardRef12(function CancelledPlanNoticeHeading({ asChild, children, ...rest }, forwardedRef) {
+var Heading2 = forwardRef9(function CancelledPlanNoticeHeading({ asChild, children, ...rest }, forwardedRef) {
   useNoticeCtx("Heading");
   const copy = useCopy();
   const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-heading": "", ...rest, children: children ?? copy.cancelledNotice.heading });
+  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-heading": "", ...rest, children: children ?? copy.cancelledNotice.heading });
 });
-var Expires = forwardRef12(function CancelledPlanNoticeExpires({ asChild, children, ...rest }, forwardedRef) {
+var Expires = forwardRef9(function CancelledPlanNoticeExpires({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useNoticeCtx("Expires");
   const copy = useCopy();
   const date = ctx.formatDate(ctx.purchase.endDate);
   if (!ctx.purchase.endDate) {
     const Comp2 = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx20(Comp2, { ref: forwardedRef, "data-solvapay-cancelled-notice-expires": "", ...rest, children: children ?? copy.cancelledNotice.accessEnded });
+    return /* @__PURE__ */ jsx16(Comp2, { ref: forwardedRef, "data-solvapay-cancelled-notice-expires": "", ...rest, children: children ?? copy.cancelledNotice.accessEnded });
   }
   const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-expires": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.expiresLabel, { date: date ?? "" }) });
+  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-expires": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.expiresLabel, { date: date ?? "" }) });
 });
-var DaysRemaining = forwardRef12(
+var DaysRemaining = forwardRef9(
   function CancelledPlanNoticeDaysRemaining({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("DaysRemaining");
     const copy = useCopy();
     if (ctx.daysRemaining == null || ctx.daysRemaining <= 0) return null;
     const template = ctx.daysRemaining === 1 ? copy.cancelledNotice.dayRemaining : copy.cancelledNotice.daysRemaining;
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-days-remaining": "", ...rest, children: children ?? interpolate(template, { days: ctx.daysRemaining }) });
+    return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-days-remaining": "", ...rest, children: children ?? interpolate(template, { days: ctx.daysRemaining }) });
   }
 );
-var AccessUntil = forwardRef12(
+var AccessUntil = forwardRef9(
   function CancelledPlanNoticeAccessUntil({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("AccessUntil");
     const copy = useCopy();
     if (!ctx.purchase.endDate) return null;
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-access-until": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.accessUntil, {
+    return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-access-until": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.accessUntil, {
       product: ctx.purchase.productName
     }) });
   }
 );
-var CancelledOn = forwardRef12(
+var CancelledOn = forwardRef9(
   function CancelledPlanNoticeCancelledOn({ asChild, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("CancelledOn");
     const copy = useCopy();
     if (!ctx.purchase.cancelledAt) return null;
     const date = ctx.formatDate(ctx.purchase.cancelledAt);
     const Comp = asChild ? Slot : "p";
-    return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-cancelled-on": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.cancelledOn, { date: date ?? "" }) });
+    return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-cancelled-on": "", ...rest, children: children ?? interpolate(copy.cancelledNotice.cancelledOn, { date: date ?? "" }) });
   }
 );
-var Reason = forwardRef12(function CancelledPlanNoticeReason({ asChild, children, ...rest }, forwardedRef) {
+var Reason = forwardRef9(function CancelledPlanNoticeReason({ asChild, children, ...rest }, forwardedRef) {
   const ctx = useNoticeCtx("Reason");
   if (!ctx.hasReason) return null;
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx20(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-reason": "", ...rest, children: children ?? ctx.purchase.cancellationReason });
+  return /* @__PURE__ */ jsx16(Comp, { ref: forwardedRef, "data-solvapay-cancelled-notice-reason": "", ...rest, children: children ?? ctx.purchase.cancellationReason });
 });
-var ReactivateButton = forwardRef12(
+var ReactivateButton = forwardRef9(
   function CancelledPlanNoticeReactivateButton({ asChild, onClick, children, ...rest }, forwardedRef) {
     const ctx = useNoticeCtx("ReactivateButton");
     const copy = useCopy();
@@ -4468,13 +4349,13 @@ var ReactivateButton = forwardRef12(
     if (asChild) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        /* @__PURE__ */ jsx20(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx20(Fragment9, { children: label }) })
+        /* @__PURE__ */ jsx16(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ jsx16(Fragment6, { children: label }) })
       );
     }
-    return /* @__PURE__ */ jsx20("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
+    return /* @__PURE__ */ jsx16("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? label });
   }
 );
-var CancelledPlanNoticeRoot2 = Root8;
+var CancelledPlanNoticeRoot2 = Root6;
 var CancelledPlanNoticeHeading2 = Heading2;
 var CancelledPlanNoticeExpires2 = Expires;
 var CancelledPlanNoticeDaysRemaining2 = DaysRemaining;
@@ -4483,7 +4364,7 @@ var CancelledPlanNoticeCancelledOn2 = CancelledOn;
 var CancelledPlanNoticeReason2 = Reason;
 var CancelledPlanNoticeReactivateButton2 = ReactivateButton;
 var CancelledPlanNotice = {
-  Root: Root8,
+  Root: Root6,
   Heading: Heading2,
   Expires,
   DaysRemaining,
@@ -4496,122 +4377,320 @@ function useCancelledPlanNotice() {
   return useNoticeCtx("useCancelledPlanNotice");
 }
 
-// src/primitives/CreditGate.tsx
-import {
-  createContext as createContext12,
-  forwardRef as forwardRef13,
-  useContext as useContext17,
-  useMemo as useMemo15
-} from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var CreditGateContext = createContext12(null);
-function useGateCtx2(part) {
-  const ctx = useContext17(CreditGateContext);
+// src/hooks/useTransport.ts
+import { useMemo as useMemo13 } from "react";
+function useTransport() {
+  const { _config } = useSolvaPay();
+  return useMemo13(() => _config?.transport ?? createHttpTransport(_config), [_config]);
+}
+
+// src/hooks/useUsage.ts
+import { useCallback as useCallback18, useEffect as useEffect10, useMemo as useMemo14, useState as useState13 } from "react";
+function deriveUsage(purchase) {
+  if (!purchase) return null;
+  const snap = purchase.planSnapshot;
+  const usage = purchase.usage;
+  const meterRef = snap?.meterRef ?? null;
+  const total = typeof snap?.limit === "number" ? snap.limit : null;
+  if (meterRef === null && !usage) return null;
+  const used = typeof usage?.used === "number" ? usage.used : 0;
+  const remaining = total !== null ? Math.max(0, total - used) : null;
+  const percentUsed = total !== null && total > 0 ? Math.min(100, Math.round(used / total * 1e4) / 100) : null;
+  return {
+    meterRef,
+    total,
+    used,
+    remaining,
+    percentUsed,
+    ...usage?.periodStart ? { periodStart: usage.periodStart } : {},
+    ...usage?.periodEnd ? { periodEnd: usage.periodEnd } : {},
+    ...purchase.reference ? { purchaseRef: purchase.reference } : {}
+  };
+}
+function useUsage() {
+  const { activePurchase, refetch: refetchPurchase, loading: purchaseLoading } = usePurchase();
+  const transport = useTransport();
+  const [override, setOverride] = useState13(null);
+  const [error, setError] = useState13(null);
+  const [transportLoading, setTransportLoading] = useState13(false);
+  const derived = useMemo14(() => deriveUsage(activePurchase ?? null), [activePurchase]);
+  const activePurchaseRef = activePurchase?.reference ?? null;
+  useEffect10(() => {
+    setOverride(null);
+  }, [activePurchaseRef]);
+  const usage = override ?? derived;
+  const refetch = useCallback18(async () => {
+    setError(null);
+    if (typeof transport.getUsage === "function") {
+      setTransportLoading(true);
+      try {
+        const next = await transport.getUsage();
+        setOverride(next);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to load usage"));
+      } finally {
+        setTransportLoading(false);
+      }
+      return;
+    }
+    try {
+      await refetchPurchase();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to refetch purchase"));
+    }
+  }, [transport, refetchPurchase]);
+  const percentUsed = usage?.percentUsed ?? null;
+  const isApproachingLimit = percentUsed !== null && percentUsed >= 80 && percentUsed < 100;
+  const isAtLimit = percentUsed !== null && percentUsed >= 100;
+  const isUnlimited = usage !== null && usage.total === null;
+  return {
+    usage,
+    loading: purchaseLoading || transportLoading,
+    error,
+    refetch,
+    percentUsed,
+    isApproachingLimit,
+    isAtLimit,
+    isUnlimited,
+    meterRef: usage?.meterRef ?? null
+  };
+}
+
+// src/primitives/UsageMeter.tsx
+import { createContext as createContext10, forwardRef as forwardRef10, useContext as useContext14, useMemo as useMemo15 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var UsageMeterContext = createContext10(null);
+function useUsageMeterCtx(part) {
+  const ctx = useContext14(UsageMeterContext);
   if (!ctx) {
-    throw new Error(`CreditGate.${part} must be rendered inside <CreditGate.Root>.`);
+    throw new Error(`UsageMeter.${part} must be rendered inside <UsageMeter.Root>.`);
   }
   return ctx;
 }
-var Root9 = forwardRef13(function CreditGateRoot({
-  minCredits = 1,
-  productRef,
-  topupAmount = 1e3,
-  topupCurrency = "usd",
+var Root7 = forwardRef10(function UsageMeterRoot({
+  warningAt = 75,
+  criticalAt = 90,
+  classNames,
   asChild,
+  usageOverride,
   children,
+  className,
   ...rest
 }, forwardedRef) {
-  const solva = useContext17(SolvaPayContext);
-  if (!solva) throw new MissingProviderError("CreditGate");
-  const { credits, loading } = useBalance();
-  const { product } = useProduct(productRef);
-  const hasCredits = credits != null && credits >= minCredits;
-  const state = loading && credits == null ? "loading" : hasCredits ? "allowed" : "blocked";
+  const hookResult = useUsage();
+  const usage = usageOverride !== void 0 ? usageOverride : hookResult.usage;
+  const loading = hookResult.loading && !usage;
+  const percentUsed = usage?.percentUsed ?? null;
+  const state = loading ? "loading" : percentUsed === null ? "safe" : percentUsed >= criticalAt ? "critical" : percentUsed >= warningAt ? "warning" : "safe";
   const ctx = useMemo15(
     () => ({
-      state,
+      usage,
       loading,
-      hasCredits,
-      balance: credits,
-      productName: product?.name ?? null,
-      topupAmount,
-      topupCurrency
+      error: hookResult.error,
+      percentUsed,
+      isApproachingLimit: hookResult.isApproachingLimit,
+      isAtLimit: hookResult.isAtLimit,
+      isUnlimited: hookResult.isUnlimited,
+      state,
+      warningAt,
+      criticalAt
     }),
-    [state, loading, hasCredits, credits, product?.name, topupAmount, topupCurrency]
+    [
+      usage,
+      loading,
+      hookResult.error,
+      percentUsed,
+      hookResult.isApproachingLimit,
+      hookResult.isAtLimit,
+      hookResult.isUnlimited,
+      state,
+      warningAt,
+      criticalAt
+    ]
   );
+  const rootClass = [classNames?.root ?? "solvapay-usage-meter", className].filter(Boolean).join(" ");
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx21(CreditGateContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx17(UsageMeterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx17(
     Comp,
     {
       ref: forwardedRef,
-      "data-solvapay-credit-gate": "",
+      "data-solvapay-usage-meter": "",
       "data-state": state,
+      className: rootClass,
       ...rest,
       children
     }
   ) });
 });
-var Heading3 = forwardRef13(function CreditGateHeading({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx2("Heading");
-  const copy = useCopy();
-  if (ctx.state !== "blocked") return null;
-  const Comp = asChild ? Slot : "h3";
-  return /* @__PURE__ */ jsx21(Comp, { ref: forwardedRef, "data-solvapay-credit-gate-heading": "", ...rest, children: children ?? copy.creditGate.lowBalanceHeading });
+var Bar = forwardRef10(function UsageMeterBar({ className, style, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Bar");
+  const width = ctx.percentUsed === null ? 0 : Math.max(0, Math.min(100, ctx.percentUsed));
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-bar": "",
+      "data-state": ctx.state,
+      role: "progressbar",
+      "aria-valuenow": Math.round(width),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: className ?? "solvapay-usage-meter-bar",
+      style: {
+        // Expose as a CSS custom property so default styles can drive
+        // `width: var(--solvapay-usage-meter-fill)` without inline styling.
+        ["--solvapay-usage-meter-fill"]: `${width}%`,
+        ...style
+      },
+      ...rest
+    }
+  );
 });
-var Subheading = forwardRef13(function CreditGateSubheading({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx2("Subheading");
+var Label = forwardRef10(function UsageMeterLabel({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Label");
   const copy = useCopy();
-  if (ctx.state !== "blocked") return null;
-  const text = interpolate(copy.creditGate.lowBalanceSubheading, {
-    product: ctx.productName ?? "this product"
+  if (!ctx.usage) return null;
+  if (ctx.isUnlimited) {
+    return /* @__PURE__ */ jsx17(
+      "span",
+      {
+        ref: forwardedRef,
+        "data-solvapay-usage-meter-label": "",
+        className: className ?? "solvapay-usage-meter-label",
+        ...rest,
+        children: children ?? copy.usage.unlimitedLabel
+      }
+    );
+  }
+  const unit = ctx.usage.meterRef ?? "units";
+  const label = ctx.usage.total !== null ? interpolate(copy.usage.usedLabel, {
+    used: String(ctx.usage.used),
+    total: String(ctx.usage.total),
+    unit
+  }) : interpolate(copy.usage.remainingLabel, {
+    remaining: String(ctx.usage.remaining ?? 0),
+    unit
   });
-  const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ jsx21(Comp, { ref: forwardedRef, "data-solvapay-credit-gate-subheading": "", ...rest, children: children ?? text });
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-label": "",
+      className: className ?? "solvapay-usage-meter-label",
+      ...rest,
+      children: children ?? label
+    }
+  );
 });
-var Topup = ({ amount, currency }) => {
-  const ctx = useGateCtx2("Topup");
-  if (ctx.state !== "blocked") return null;
-  return /* @__PURE__ */ jsx21(
-    TopupForm2,
+var Percentage = forwardRef10(function UsageMeterPercentage({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Percentage");
+  const copy = useCopy();
+  if (ctx.percentUsed === null) return null;
+  return /* @__PURE__ */ jsx17(
+    "span",
     {
-      amount: amount ?? ctx.topupAmount,
-      currency: currency ?? ctx.topupCurrency
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-percentage": "",
+      className: className ?? "solvapay-usage-meter-percentage",
+      ...rest,
+      children: children ?? interpolate(copy.usage.percentUsedLabel, { percent: String(Math.round(ctx.percentUsed)) })
     }
   );
-};
-var Loading6 = forwardRef13(function CreditGateLoading({ asChild, children, ...rest }, forwardedRef) {
-  const ctx = useGateCtx2("Loading");
+});
+function formatResetsIn(copy, periodEnd, nowMs = typeof performance !== "undefined" ? performance.timeOrigin + performance.now() : 0) {
+  const end = new Date(periodEnd).getTime();
+  if (Number.isNaN(end)) return null;
+  const daysLeft = Math.max(0, Math.ceil((end - nowMs) / (24 * 60 * 60 * 1e3)));
+  return daysLeft > 0 ? interpolate(copy.usage.resetsInLabel, { days: String(daysLeft) }) : interpolate(copy.usage.resetsOnLabel, { date: new Date(periodEnd).toLocaleDateString() });
+}
+var ResetsIn = forwardRef10(function UsageMeterResetsIn({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("ResetsIn");
+  const copy = useCopy();
+  const periodEnd = ctx.usage?.periodEnd;
+  if (!periodEnd) return null;
+  const label = formatResetsIn(copy, periodEnd);
+  if (!label) return null;
+  return /* @__PURE__ */ jsx17(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-resets-in": "",
+      className: className ?? "solvapay-usage-meter-resets-in",
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Loading4 = forwardRef10(function UsageMeterLoading({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Loading");
+  const copy = useCopy();
   if (ctx.state !== "loading") return null;
-  const Comp = asChild ? Slot : "div";
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ jsx21(Comp, { ref: forwardedRef, "data-solvapay-credit-gate-loading": "", ...rest, children })
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-loading": "",
+      className: className ?? "solvapay-usage-meter-loading",
+      ...rest,
+      children: children ?? copy.usage.loadingLabel
+    }
   );
 });
-var ErrorSlot6 = forwardRef13(function CreditGateError({ asChild, children, ...rest }, forwardedRef) {
-  if (!children) return null;
-  const Comp = asChild ? Slot : "div";
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ jsx21(Comp, { ref: forwardedRef, "data-solvapay-credit-gate-error": "", role: "alert", ...rest, children })
+var Empty = forwardRef10(function UsageMeterEmpty({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Empty");
+  const copy = useCopy();
+  if (ctx.loading || ctx.usage !== null) return null;
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-empty": "",
+      className: className ?? "solvapay-usage-meter-empty",
+      ...rest,
+      children: children ?? copy.usage.emptyLabel
+    }
   );
 });
-var CreditGateRoot2 = Root9;
-var CreditGateHeading2 = Heading3;
-var CreditGateSubheading2 = Subheading;
-var CreditGateTopup = Topup;
-var CreditGateLoading2 = Loading6;
-var CreditGateError2 = ErrorSlot6;
-var CreditGate = {
-  Root: Root9,
-  Heading: Heading3,
-  Subheading,
-  Topup,
-  Loading: Loading6,
-  Error: ErrorSlot6
-};
-function useCreditGate() {
-  return useGateCtx2("useCreditGate");
+var UsageMeter = Object.assign(Root7, {
+  Root: Root7,
+  Bar,
+  Label,
+  Percentage,
+  ResetsIn,
+  Loading: Loading4,
+  Empty
+});
+function useUsageMeter() {
+  return useUsageMeterCtx("useUsageMeter");
+}
+
+// src/hooks/usePaywallResolver.ts
+import { useCallback as useCallback19, useMemo as useMemo16 } from "react";
+function usePaywallResolver(content) {
+  const { activePurchase, hasPaidPurchase, refetch: refetchPurchase } = usePurchase();
+  const { credits, refetch: refetchBalance } = useBalance();
+  const resolved = useMemo16(() => {
+    if (!content) return false;
+    const productMatches = !content.product || activePurchase?.productRef === content.product || activePurchase?.productName === content.product;
+    if (content.kind === "payment_required") {
+      return Boolean(hasPaidPurchase && productMatches);
+    }
+    const balance = content.balance;
+    if (balance && typeof balance.remainingUnits === "number" && balance.remainingUnits > 0) {
+      return true;
+    }
+    if (balance && credits != null && balance.creditsPerUnit && credits >= balance.creditsPerUnit) {
+      return true;
+    }
+    return Boolean(productMatches && activePurchase?.status === "active");
+  }, [content, hasPaidPurchase, activePurchase, credits]);
+  const refetch = useCallback19(async () => {
+    await Promise.all([
+      refetchPurchase().catch(() => void 0),
+      refetchBalance().catch(() => void 0)
+    ]);
+  }, [refetchPurchase, refetchBalance]);
+  return { resolved, refetch };
 }
 
 export {
@@ -4621,7 +4700,10 @@ export {
   getMostRecentPurchase,
   getPrimaryPurchase,
   isPaidPurchase,
-  buildRequestHeaders,
+  isPlanPurchase,
+  isTopupPurchase,
+  DEFAULT_ROUTES,
+  createHttpTransport,
   enCopy,
   mergeCopy,
   CopyContext,
@@ -4633,19 +4715,27 @@ export {
   Slot,
   Slottable,
   composeEventHandlers,
+  MissingProviderError,
+  MissingProductRefError,
   useSolvaPay,
   useCheckout,
   usePurchase,
   useCustomer,
   useCopy,
   useLocale,
+  plansCache,
   usePlans,
   usePlan,
+  createTransportCacheKey,
+  productCache,
   useProduct,
   useActivation,
+  usePlanSelection,
   PaymentFormContext,
   usePaymentForm,
   PaymentFormProvider,
+  getMinorUnitsPerMajor,
+  toMajorUnits,
   formatPrice,
   interpolate,
   CheckoutSummaryRoot2 as CheckoutSummaryRoot,
@@ -4657,6 +4747,7 @@ export {
   CheckoutSummary,
   useCheckoutSummary,
   CheckoutSummary2,
+  merchantCache,
   useMerchant,
   deriveVariant,
   MandateText,
@@ -4691,17 +4782,8 @@ export {
   TopupFormError2 as TopupFormError,
   TopupForm,
   useTopupForm,
-  TopupForm2,
-  ProductBadge2 as ProductBadge,
-  PlanBadge,
-  PurchaseGateRoot2 as PurchaseGateRoot,
-  PurchaseGateAllowed2 as PurchaseGateAllowed,
-  PurchaseGateBlocked2 as PurchaseGateBlocked,
-  PurchaseGateLoading2 as PurchaseGateLoading,
-  PurchaseGateError2 as PurchaseGateError,
-  PurchaseGate,
-  usePurchaseGate,
   BalanceBadge,
+  defaultListPlans,
   PlanSelectorRoot2 as PlanSelectorRoot,
   PlanSelectorHeading2 as PlanSelectorHeading,
   PlanSelectorGrid2 as PlanSelectorGrid,
@@ -4714,17 +4796,6 @@ export {
   PlanSelectorError2 as PlanSelectorError,
   PlanSelector,
   usePlanSelector,
-  ActivationFlowRoot2 as ActivationFlowRoot,
-  ActivationFlowSummary2 as ActivationFlowSummary,
-  ActivationFlowActivateButton2 as ActivationFlowActivateButton,
-  ActivationFlowAmountPicker,
-  ActivationFlowContinueButton2 as ActivationFlowContinueButton,
-  ActivationFlowRetrying2 as ActivationFlowRetrying,
-  ActivationFlowActivated2 as ActivationFlowActivated,
-  ActivationFlowLoading2 as ActivationFlowLoading,
-  ActivationFlowError2 as ActivationFlowError,
-  ActivationFlow,
-  useActivationFlow,
   usePurchaseActions,
   CancelPlanButton,
   usePurchaseStatus,
@@ -4738,12 +4809,16 @@ export {
   CancelledPlanNoticeReactivateButton2 as CancelledPlanNoticeReactivateButton,
   CancelledPlanNotice,
   useCancelledPlanNotice,
-  CreditGateRoot2 as CreditGateRoot,
-  CreditGateHeading2 as CreditGateHeading,
-  CreditGateSubheading2 as CreditGateSubheading,
-  CreditGateTopup,
-  CreditGateLoading2 as CreditGateLoading,
-  CreditGateError2 as CreditGateError,
-  CreditGate,
-  useCreditGate
+  useTransport,
+  useUsage,
+  Root7 as Root,
+  Bar,
+  Label,
+  Percentage,
+  ResetsIn,
+  Loading4 as Loading,
+  Empty,
+  UsageMeter,
+  useUsageMeter,
+  usePaywallResolver
 };