@solvapay/react 1.0.8-preview.9 → 1.0.9

package/dist/primitives/index.cjs

@@ -82,6 +82,16 @@ __export(primitives_exports, {
   PaymentFormSubmitButton: () => PaymentFormSubmitButton2,
   PaymentFormSummary: () => PaymentFormSummary,
   PaymentFormTermsCheckbox: () => PaymentFormTermsCheckbox2,
+  PaywallNotice: () => PaywallNotice,
+  PaywallNoticeBalance: () => Balance,
+  PaywallNoticeEmbeddedCheckout: () => EmbeddedCheckout,
+  PaywallNoticeHeading: () => Heading4,
+  PaywallNoticeHostedCheckoutLink: () => HostedCheckoutLink,
+  PaywallNoticeMessage: () => Message,
+  PaywallNoticePlans: () => Plans,
+  PaywallNoticeProductContext: () => ProductContext,
+  PaywallNoticeRetry: () => Retry,
+  PaywallNoticeRoot: () => Root10,
   PlanBadge: () => PlanBadge,
   PlanSelector: () => PlanSelector,
   PlanSelectorCard: () => PlanSelectorCard2,
@@ -109,6 +119,14 @@ __export(primitives_exports, {
   TopupFormPaymentElement: () => TopupFormPaymentElement,
   TopupFormRoot: () => TopupFormRoot2,
   TopupFormSubmitButton: () => TopupFormSubmitButton2,
+  UsageMeter: () => UsageMeter,
+  UsageMeterBar: () => Bar,
+  UsageMeterEmpty: () => Empty,
+  UsageMeterLabel: () => Label,
+  UsageMeterLoading: () => Loading7,
+  UsageMeterPercentage: () => Percentage,
+  UsageMeterResetsIn: () => ResetsIn,
+  UsageMeterRoot: () => Root11,
   composeEventHandlers: () => composeEventHandlers,
   composeRefs: () => composeRefs,
   setRef: () => setRef,
@@ -118,9 +136,11 @@ __export(primitives_exports, {
   useCancelledPlanNotice: () => useCancelledPlanNotice,
   useCheckoutSummary: () => useCheckoutSummary,
   useCreditGate: () => useCreditGate,
+  usePaywallNotice: () => usePaywallNotice,
   usePlanSelector: () => usePlanSelector,
   usePurchaseGate: () => usePurchaseGate,
-  useTopupForm: () => useTopupForm
+  useTopupForm: () => useTopupForm,
+  useUsageMeter: () => useUsageMeter
 });
 module.exports = __toCommonJS(primitives_exports);
 
@@ -250,6 +270,11 @@ var import_react4 = require("react");
 // src/SolvaPayProvider.tsx
 var import_react3 = require("react");
 
+// src/utils/purchases.ts
+function isPlanPurchase(purchase) {
+  return !!purchase.planSnapshot && purchase.metadata?.purpose !== "credit_topup";
+}
+
 // src/adapters/auth.ts
 var defaultAuthAdapter = {
   async getToken() {
@@ -280,16 +305,6 @@ 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) {
@@ -340,6 +355,167 @@ async function buildRequestHeaders(config) {
   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/context.tsx
 var import_react2 = require("react");
 
@@ -489,6 +665,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",
@@ -502,7 +698,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"
   }
 };
 
@@ -832,27 +1061,41 @@ function usePlan(options) {
 
 // src/hooks/useProduct.ts
 var import_react7 = require("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] = (0, import_react7.useState)(
     () => productRef ? productCache.get(cacheKey)?.product ?? null : null
   );
@@ -870,7 +1113,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);
@@ -895,12 +1139,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);
@@ -949,6 +1207,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;
@@ -958,7 +1219,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",
@@ -1127,6 +1391,26 @@ function useCheckoutSummary() {
 // src/primitives/PlanSelector.tsx
 var import_react10 = require("react");
 
+// 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;
+  const { headers } = await buildRequestHeaders(config);
+  const res = await fetchFn(url, { method: "GET", headers });
+  if (!res.ok) {
+    const error = new Error(`Failed to fetch plans: ${res.statusText || res.status}`);
+    config?.onError?.(error, "listPlans");
+    throw error;
+  }
+  const data = await res.json();
+  return data.plans ?? [];
+}
+
 // src/hooks/usePurchase.ts
 function usePurchase() {
   const { purchase, refetchPurchase } = useSolvaPay();
@@ -1154,20 +1438,6 @@ function useCardContext(part) {
   }
   return ctx;
 }
-async function defaultListPlans(productRef, config) {
-  const base = config?.api?.listPlans || "/api/list-plans";
-  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 plans: ${res.statusText || res.status}`);
-    config?.onError?.(error, "listPlans");
-    throw error;
-  }
-  const data = await res.json();
-  return data.plans ?? [];
-}
 var Root2 = (0, import_react10.forwardRef)(function PlanSelectorRoot(props, forwardedRef) {
   const {
     productRef,
@@ -1191,7 +1461,7 @@ var Root2 = (0, import_react10.forwardRef)(function PlanSelectorRoot(props, forw
     () => 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,
@@ -1226,6 +1496,9 @@ var Root2 = (0, import_react10.forwardRef)(function PlanSelectorRoot(props, forw
     },
     [plans, selectPlan, onSelect]
   );
+  const clearSelection = (0, import_react10.useCallback)(() => {
+    setSelectedPlanIndex(-1);
+  }, [setSelectedPlanIndex]);
   const selectedPlanRef = selectedPlan?.reference ?? null;
   const ctx = (0, import_react10.useMemo)(
     () => ({
@@ -1239,7 +1512,8 @@ var Root2 = (0, import_react10.forwardRef)(function PlanSelectorRoot(props, forw
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     }),
     [
       plans,
@@ -1252,7 +1526,8 @@ var Root2 = (0, import_react10.forwardRef)(function PlanSelectorRoot(props, forw
       isCurrent,
       isFree,
       isPopular,
-      select
+      select,
+      clearSelection
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1333,9 +1608,11 @@ var Card = (0, import_react10.forwardRef)(function PlanSelectorCard({ asChild, o
 });
 var CardName = (0, import_react10.forwardRef)(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__ */ (0, import_jsx_runtime6.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? card.plan.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-name": "", ...rest, children: children ?? label });
 });
 var CardPrice = (0, import_react10.forwardRef)(function PlanSelectorCardPrice({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardPrice");
@@ -1343,14 +1620,25 @@ var CardPrice = (0, import_react10.forwardRef)(function PlanSelectorCardPrice({
   const copy = useCopy();
   const formatted = (0, import_react10.useMemo)(() => {
     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
@@ -1361,11 +1649,22 @@ var CardPrice = (0, import_react10.forwardRef)(function PlanSelectorCardPrice({
 var CardInterval = (0, import_react10.forwardRef)(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__ */ (0, import_jsx_runtime6.jsx)(Comp, { ref: forwardedRef, "data-solvapay-plan-selector-card-interval": "", ...rest, children: children ?? text });
 });
+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 = (0, import_react10.forwardRef)(function PlanSelectorCardBadge({ asChild, children, ...rest }, forwardedRef) {
   const card = useCardContext("CardBadge");
   const copy = useCopy();
@@ -1440,8 +1739,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}`);
@@ -1492,8 +1794,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) {
@@ -1657,24 +1958,17 @@ var import_react15 = require("react");
 var import_react14 = require("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] = (0, import_react14.useState)(
     () => merchantCache.get(key)?.merchant ?? null
   );
@@ -1710,8 +2004,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) {
@@ -1824,31 +2132,36 @@ var MandateText = (0, import_react15.forwardRef)(
 
 // src/components/Spinner.tsx
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsxs)(
     "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__ */ (0, import_jsx_runtime10.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeOpacity: "0.25"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "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"
           }
         )
@@ -1866,6 +2179,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,
@@ -2180,7 +2500,11 @@ var PaidInner = ({
   const copy = useCopy();
   const customer = useCustomer();
   const { processPayment } = useSolvaPay();
-  const { refetch } = usePurchase();
+  const { refetch, hasPaidPurchase } = usePurchase();
+  const hasPaidPurchaseRef = (0, import_react16.useRef)(hasPaidPurchase);
+  (0, import_react16.useEffect)(() => {
+    hasPaidPurchaseRef.current = hasPaidPurchase;
+  }, [hasPaidPurchase]);
   const [elementKind, setElementKind] = (0, import_react16.useState)(
     children ? null : "payment-element"
   );
@@ -2231,14 +2555,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);
@@ -2710,7 +3054,9 @@ function useTopupAmountSelector(options) {
     if (resolvedAmount < minAmount) {
       setError(
         interpolate(copy.topup.minAmount, {
-          amount: `${currencySymbol}${minAmount}`
+          amount: formatPrice(minAmount * getMinorUnitsPerMajor(currency), currency, {
+            free: ""
+          })
         })
       );
       return false;
@@ -2718,14 +3064,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 = (0, import_react17.useCallback)(() => {
     setSelectedAmount(null);
     setCustomAmountRaw("");
@@ -2765,15 +3113,31 @@ function usePickerCtx(part) {
   }
   return ctx;
 }
-var Root4 = (0, import_react19.forwardRef)(function AmountPickerRoot({ currency, minAmount, maxAmount, onChange, asChild, children, ...rest }, forwardedRef) {
+var Root4 = (0, import_react19.forwardRef)(function AmountPickerRoot({
+  currency,
+  minAmount,
+  maxAmount,
+  emit = "major",
+  selector: externalSelector,
+  onChange,
+  asChild,
+  children,
+  ...rest
+}, forwardedRef) {
   const solva = (0, import_react19.useContext)(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;
   (0, import_react19.useEffect)(() => {
-    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;
@@ -2781,12 +3145,23 @@ var Root4 = (0, import_react19.forwardRef)(function AmountPickerRoot({ currency,
     () => ({
       ...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__ */ (0, import_jsx_runtime12.jsx)(AmountPickerContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Comp, { ref: forwardedRef, "data-solvapay-amount-picker": "", ...rest, children }) });
@@ -2805,19 +3180,18 @@ var Option = (0, import_react19.forwardRef)(function AmountPickerOption({ asChil
     }),
     ...rest
   };
+  const defaultLabel = formatPrice(
+    amount * getMinorUnitsPerMajor(ctx.currency),
+    ctx.currency,
+    { free: "" }
+  );
   if (asChild) {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Slot, { ref: forwardedRef, ...commonProps, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        ctx.currencySymbol,
-        amount.toLocaleString()
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Slot, { ref: forwardedRef, ...commonProps, children: children ?? defaultLabel })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    ctx.currencySymbol,
-    amount.toLocaleString()
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { ref: forwardedRef, type: "button", ...commonProps, children: children ?? defaultLabel });
 });
 var Custom = (0, import_react19.forwardRef)(function AmountPickerCustom({ asChild, onChange, onFocus, ...rest }, forwardedRef) {
   const ctx = usePickerCtx("Custom");
@@ -2849,9 +3223,12 @@ var Confirm = (0, import_react19.forwardRef)(function AmountPickerConfirm({ asCh
   const ctx = usePickerCtx("Confirm");
   const isDisabled = disabled || !ctx.resolvedAmount;
   const handleConfirm = (0, import_react19.useCallback)(() => {
-    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": "",
@@ -2964,16 +3341,19 @@ var Root5 = (0, import_react20.forwardRef)(function ActivationFlowRoot({
   const retryActivation = (0, import_react20.useCallback)(async () => {
     if (!resolvedPlanRef) return;
     setStep("retrying");
-    const amountMinor = Math.round((amountSelector.resolvedAmount || 0) * 100);
+    const amountMinor2 = Math.round(
+      (amountSelector.resolvedAmount || 0) * getMinorUnitsPerMajor(currency)
+    );
     const rate = displayExchangeRate ?? 1;
     if (creditsPerMinorUnit) {
-      adjustBalance(Math.floor(amountMinor / rate * creditsPerMinorUnit));
+      adjustBalance(Math.floor(amountMinor2 / rate * creditsPerMinorUnit));
     }
     await new Promise((r) => setTimeout(r, retryDelayMs));
     await activate({ productRef, planRef: resolvedPlanRef });
   }, [
     resolvedPlanRef,
     amountSelector.resolvedAmount,
+    currency,
     displayExchangeRate,
     creditsPerMinorUnit,
     adjustBalance,
@@ -3000,7 +3380,9 @@ var Root5 = (0, import_react20.forwardRef)(function ActivationFlowRoot({
     calledSuccessRef.current = false;
     setStep("summary");
   }, [reset]);
-  const amountCents = Math.round((amountSelector.resolvedAmount || 0) * 100);
+  const amountMinor = Math.round(
+    (amountSelector.resolvedAmount || 0) * getMinorUnitsPerMajor(currency)
+  );
   const ctx = (0, import_react20.useMemo)(
     () => ({
       step,
@@ -3008,7 +3390,11 @@ var Root5 = (0, import_react20.forwardRef)(function ActivationFlowRoot({
       productRef,
       planRef: resolvedPlanRef ?? "",
       amountSelector,
-      amountCents,
+      amountMinor,
+      // Deprecated alias — same value as amountMinor so legacy consumers
+      // keep working after the zero-decimal fix (previously this was
+      // `resolvedAmount * 100`, which over-billed JPY/KRW by 100x).
+      amountCents: amountMinor,
       currency,
       activate: handleActivate,
       reset: resetFlow,
@@ -3024,7 +3410,7 @@ var Root5 = (0, import_react20.forwardRef)(function ActivationFlowRoot({
       productRef,
       resolvedPlanRef,
       amountSelector,
-      amountCents,
+      amountMinor,
       currency,
       handleActivate,
       resetFlow,
@@ -3086,7 +3472,7 @@ var ActivateButton = (0, import_react20.forwardRef)(
 var AmountPickerMount = ({ children }) => {
   const ctx = useFlowCtx("AmountPicker");
   if (ctx.step !== "selectAmount") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-solvapay-activation-flow-amount-picker": "", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AmountPicker.Root, { currency: ctx.currency, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-solvapay-activation-flow-amount-picker": "", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AmountPicker.Root, { currency: ctx.currency, selector: ctx.amountSelector, children }) });
 };
 var ContinueButton = (0, import_react20.forwardRef)(
   function ActivationFlowContinueButton({ asChild, onClick, children, ...rest }, forwardedRef) {
@@ -3357,7 +3743,7 @@ function usePurchaseStatus() {
   }, []);
   const purchaseData = (0, import_react24.useMemo)(() => {
     const cancelledPaidPurchases = purchases.filter((p) => {
-      return p.status === "active" && p.cancelledAt && isPaidPurchase(p);
+      return p.status === "active" && p.cancelledAt && isPaidPurchase(p) && isPlanPurchase(p);
     });
     const cancelledPurchase = cancelledPaidPurchases.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
@@ -3746,6 +4132,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,
@@ -4158,6 +4552,654 @@ var ProductBadgeImpl = (0, import_react30.forwardRef)(function ProductBadge({ as
 });
 var ProductBadge2 = ProductBadgeImpl;
 var PlanBadge = ProductBadgeImpl;
+
+// src/primitives/PaywallNotice.tsx
+var import_react32 = require("react");
+
+// src/hooks/usePaywallResolver.ts
+var import_react31 = require("react");
+function usePaywallResolver(content) {
+  const { activePurchase, hasPaidPurchase, refetch: refetchPurchase } = usePurchase();
+  const { credits, refetch: refetchBalance } = useBalance();
+  const resolved = (0, import_react31.useMemo)(() => {
+    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 = (0, import_react31.useCallback)(async () => {
+    await Promise.all([
+      refetchPurchase().catch(() => void 0),
+      refetchBalance().catch(() => void 0)
+    ]);
+  }, [refetchPurchase, refetchBalance]);
+  return { resolved, refetch };
+}
+
+// src/utils/isPayg.ts
+function isPaygPlan(plan) {
+  if (!plan) return false;
+  const type = plan.planType ?? plan.type;
+  return type === "usage-based" || type === "hybrid";
+}
+
+// src/primitives/PaywallNotice.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PaywallNoticeContext = (0, import_react32.createContext)(null);
+function usePaywallNoticeCtx(part) {
+  const ctx = (0, import_react32.useContext)(PaywallNoticeContext);
+  if (!ctx) {
+    throw new Error(`PaywallNotice.${part} must be rendered inside <PaywallNotice.Root>.`);
+  }
+  return ctx;
+}
+var Root10 = (0, import_react32.forwardRef)(function PaywallNoticeRoot({ content, onResolved, classNames, asChild, children, ...rest }, forwardedRef) {
+  const { resolved, refetch } = usePaywallResolver(content);
+  const classNamesResolved = (0, import_react32.useMemo)(() => classNames ?? {}, [classNames]);
+  (0, import_react32.useEffect)(() => {
+    if (resolved) onResolved?.();
+  }, [resolved, onResolved]);
+  const ctx = (0, import_react32.useMemo)(
+    () => ({
+      content,
+      resolved,
+      refetch,
+      onResolved,
+      classNames: classNamesResolved
+    }),
+    [content, resolved, refetch, onResolved, classNamesResolved]
+  );
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaywallNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-notice": "",
+      "data-kind": content.kind,
+      "data-state": resolved ? "resolved" : "pending",
+      className: classNamesResolved.root,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Heading4 = (0, import_react32.forwardRef)(function PaywallNoticeHeading({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Heading");
+  const copy = useCopy();
+  const defaultText = ctx.resolved ? copy.paywall.resolvedHeading : ctx.content.kind === "payment_required" ? copy.paywall.paymentRequiredHeading : copy.paywall.activationRequiredHeading;
+  const Comp = asChild ? Slot : "h2";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-heading": "",
+      className: className ?? ctx.classNames.heading,
+      ...rest,
+      children: children ?? defaultText
+    }
+  );
+});
+var Message = (0, import_react32.forwardRef)(function PaywallNoticeMessage({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Message");
+  const copy = useCopy();
+  const Comp = asChild ? Slot : "p";
+  const defaultText = resolvePaywallMessage(ctx.content, copy.paywall);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-message": "",
+      className: className ?? ctx.classNames.message,
+      ...rest,
+      children: children ?? defaultText
+    }
+  );
+});
+function resolvePaywallMessage(content, paywallCopy) {
+  if (content.kind !== "payment_required") {
+    return content.message;
+  }
+  const balance = content.balance;
+  if (!balance) return content.message;
+  const productName = content.productDetails?.name;
+  const forProduct = productName ? interpolate(paywallCopy.paymentRequiredProductSuffix, { product: productName }) : "";
+  const remaining = balance.remainingUnits ?? 0;
+  if (remaining <= 0) {
+    return interpolate(paywallCopy.paymentRequiredMessage, { forProduct });
+  }
+  return interpolate(paywallCopy.paymentRequiredMessageRemaining, {
+    remaining: String(remaining),
+    pluralSuffix: remaining === 1 ? "" : "s",
+    forProduct
+  });
+}
+var ProductContext = (0, import_react32.forwardRef)(function PaywallNoticeProductContext({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("ProductContext");
+  const copy = useCopy();
+  const product = ctx.content.kind === "activation_required" ? ctx.content.productDetails : void 0;
+  if (!product?.name) return null;
+  const label = interpolate(copy.paywall.productContext, { product: product.name });
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-product-context": "",
+      className: className ?? ctx.classNames.productContext,
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Balance = (0, import_react32.forwardRef)(function PaywallNoticeBalance({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Balance");
+  const copy = useCopy();
+  const balance = ctx.content.balance;
+  if (ctx.content.kind !== "activation_required" || !balance) return null;
+  const label = interpolate(copy.paywall.balanceLine, {
+    available: String(balance.remainingUnits ?? 0),
+    required: String(balance.creditsPerUnit ?? 1)
+  });
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-balance": "",
+      className: className ?? ctx.classNames.balance,
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+function Plans({ className, children }) {
+  const ctx = usePaywallNoticeCtx("Plans");
+  if (ctx.content.kind !== "activation_required") return null;
+  if (!ctx.content.product) return null;
+  const defaultClass = className ?? ctx.classNames.plans ?? "solvapay-paywall-plans";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-solvapay-paywall-plans": "", className: defaultClass, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(PlanSelector.Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardBadge, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardName, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardPrice, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardInterval, {})
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Loading, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Error, {})
+  ] }) }) });
+}
+function hidesFreePlan(plan) {
+  return plan.requiresPayment !== false;
+}
+var HostedCheckoutLink = (0, import_react32.forwardRef)(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("HostedCheckoutLink");
+  const copy = useCopy();
+  const href = ctx.content.checkoutUrl;
+  if (!href) return null;
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-solvapay-paywall-hosted-link": "",
+      className: className ?? ctx.classNames.hostedLink,
+      ...rest,
+      children: children ?? copy.paywall.hostedCheckoutButton
+    }
+  );
+});
+function EmbeddedCheckout({
+  returnUrl,
+  className,
+  children
+}) {
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  if (!ctx.content.product) return null;
+  const defaultClass = className ?? ctx.classNames.embeddedCheckout ?? "solvapay-paywall-embedded-checkout";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-solvapay-paywall-embedded-checkout": "", className: defaultClass, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(PlanSelector.Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardBadge, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardName, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardPrice, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.CardInterval, {})
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Loading, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlanSelector.Error, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaywallSelectedPlanGate, { productRef: ctx.content.product, returnUrl, children })
+  ] }) });
+}
+function PaywallSelectedPlanGate({
+  productRef,
+  returnUrl,
+  children
+}) {
+  const { selectedPlan, selectedPlanRef } = usePlanSelector();
+  if (!selectedPlanRef || !selectedPlan) return null;
+  if (isPaygPlan(selectedPlan)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      PaywallPaygGate,
+      {
+        plan: selectedPlan,
+        returnUrl
+      },
+      selectedPlanRef
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaywallPaymentFormGate, { productRef, returnUrl, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.Summary, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.Loading, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.PaymentElement, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.Error, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.MandateText, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaymentForm.SubmitButton, {})
+  ] }) });
+}
+function PaywallPaygGate({
+  plan,
+  returnUrl
+}) {
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  const currency = (plan.currency ?? "USD").toUpperCase();
+  const [amountMinor, setAmountMinor] = (0, import_react32.useState)(null);
+  if (amountMinor == null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-solvapay-paywall-payg-amount": "", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(AmountPicker.Root, { currency, emit: "minor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AmountPicker.Custom, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AmountPicker.Confirm, { onConfirm: (minor) => setAmountMinor(minor), children: "Continue" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-solvapay-paywall-payg-topup": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-solvapay-paywall-payg-change-amount": "",
+        onClick: () => setAmountMinor(null),
+        children: "Change amount"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      TopupForm.Root,
+      {
+        amount: amountMinor,
+        currency,
+        returnUrl,
+        onSuccess: () => {
+          void ctx.refetch();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TopupForm.Loading, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TopupForm.PaymentElement, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TopupForm.Error, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TopupForm.SubmitButton, {})
+        ]
+      }
+    )
+  ] });
+}
+function PaywallPaymentFormGate({
+  productRef,
+  returnUrl,
+  children
+}) {
+  const { selectedPlanRef } = usePlanSelector();
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  if (!selectedPlanRef) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    PaymentForm.Root,
+    {
+      planRef: selectedPlanRef,
+      productRef,
+      returnUrl,
+      requireTermsAcceptance: false,
+      onSuccess: () => {
+        void ctx.refetch();
+      },
+      children
+    },
+    selectedPlanRef
+  );
+}
+var Retry = (0, import_react32.forwardRef)(
+  function PaywallNoticeRetry({ asChild, children, className, onClick, ...rest }, forwardedRef) {
+    const ctx = usePaywallNoticeCtx("Retry");
+    const copy = useCopy();
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      Comp,
+      {
+        ref: forwardedRef,
+        type: "button",
+        disabled: !ctx.resolved,
+        "data-solvapay-paywall-retry": "",
+        "data-state": ctx.resolved ? "ready" : "waiting",
+        className: className ?? ctx.classNames.retryButton,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented && ctx.resolved) ctx.onResolved?.();
+        },
+        ...rest,
+        children: children ?? copy.paywall.retryButton
+      }
+    );
+  }
+);
+var PaywallNotice = Object.assign(Root10, {
+  Root: Root10,
+  Heading: Heading4,
+  Message,
+  ProductContext,
+  Plans,
+  Balance,
+  HostedCheckoutLink,
+  EmbeddedCheckout,
+  Retry
+});
+function usePaywallNotice() {
+  return usePaywallNoticeCtx("usePaywallNotice");
+}
+
+// src/primitives/UsageMeter.tsx
+var import_react35 = require("react");
+
+// src/hooks/useUsage.ts
+var import_react34 = require("react");
+
+// src/hooks/useTransport.ts
+var import_react33 = require("react");
+function useTransport() {
+  const { _config } = useSolvaPay();
+  return (0, import_react33.useMemo)(() => _config?.transport ?? createHttpTransport(_config), [_config]);
+}
+
+// src/hooks/useUsage.ts
+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] = (0, import_react34.useState)(null);
+  const [error, setError] = (0, import_react34.useState)(null);
+  const [transportLoading, setTransportLoading] = (0, import_react34.useState)(false);
+  const derived = (0, import_react34.useMemo)(() => deriveUsage(activePurchase ?? null), [activePurchase]);
+  const activePurchaseRef = activePurchase?.reference ?? null;
+  (0, import_react34.useEffect)(() => {
+    setOverride(null);
+  }, [activePurchaseRef]);
+  const usage = override ?? derived;
+  const refetch = (0, import_react34.useCallback)(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
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var UsageMeterContext = (0, import_react35.createContext)(null);
+function useUsageMeterCtx(part) {
+  const ctx = (0, import_react35.useContext)(UsageMeterContext);
+  if (!ctx) {
+    throw new Error(`UsageMeter.${part} must be rendered inside <UsageMeter.Root>.`);
+  }
+  return ctx;
+}
+var Root11 = (0, import_react35.forwardRef)(function UsageMeterRoot({
+  warningAt = 75,
+  criticalAt = 90,
+  classNames,
+  asChild,
+  usageOverride,
+  children,
+  className,
+  ...rest
+}, forwardedRef) {
+  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 = (0, import_react35.useMemo)(
+    () => ({
+      usage,
+      loading,
+      error: hookResult.error,
+      percentUsed,
+      isApproachingLimit: hookResult.isApproachingLimit,
+      isAtLimit: hookResult.isAtLimit,
+      isUnlimited: hookResult.isUnlimited,
+      state,
+      warningAt,
+      criticalAt
+    }),
+    [
+      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__ */ (0, import_jsx_runtime23.jsx)(UsageMeterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter": "",
+      "data-state": state,
+      className: rootClass,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Bar = (0, import_react35.forwardRef)(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__ */ (0, import_jsx_runtime23.jsx)(
+    "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 Label = (0, import_react35.forwardRef)(function UsageMeterLabel({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Label");
+  const copy = useCopy();
+  if (!ctx.usage) return null;
+  if (ctx.isUnlimited) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "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
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-label": "",
+      className: className ?? "solvapay-usage-meter-label",
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Percentage = (0, import_react35.forwardRef)(function UsageMeterPercentage({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Percentage");
+  const copy = useCopy();
+  if (ctx.percentUsed === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "span",
+    {
+      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)) })
+    }
+  );
+});
+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 = (0, import_react35.forwardRef)(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__ */ (0, import_jsx_runtime23.jsx)(
+    "span",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-resets-in": "",
+      className: className ?? "solvapay-usage-meter-resets-in",
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Loading7 = (0, import_react35.forwardRef)(function UsageMeterLoading({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Loading");
+  const copy = useCopy();
+  if (ctx.state !== "loading") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-loading": "",
+      className: className ?? "solvapay-usage-meter-loading",
+      ...rest,
+      children: children ?? copy.usage.loadingLabel
+    }
+  );
+});
+var Empty = (0, import_react35.forwardRef)(function UsageMeterEmpty({ className, children, ...rest }, forwardedRef) {
+  const ctx = useUsageMeterCtx("Empty");
+  const copy = useCopy();
+  if (ctx.loading || ctx.usage !== null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      "data-solvapay-usage-meter-empty": "",
+      className: className ?? "solvapay-usage-meter-empty",
+      ...rest,
+      children: children ?? copy.usage.emptyLabel
+    }
+  );
+});
+var UsageMeter = Object.assign(Root11, {
+  Root: Root11,
+  Bar,
+  Label,
+  Percentage,
+  ResetsIn,
+  Loading: Loading7,
+  Empty
+});
+function useUsageMeter() {
+  return useUsageMeterCtx("useUsageMeter");
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivationFlow,
@@ -4212,6 +5254,16 @@ var PlanBadge = ProductBadgeImpl;
   PaymentFormSubmitButton,
   PaymentFormSummary,
   PaymentFormTermsCheckbox,
+  PaywallNotice,
+  PaywallNoticeBalance,
+  PaywallNoticeEmbeddedCheckout,
+  PaywallNoticeHeading,
+  PaywallNoticeHostedCheckoutLink,
+  PaywallNoticeMessage,
+  PaywallNoticePlans,
+  PaywallNoticeProductContext,
+  PaywallNoticeRetry,
+  PaywallNoticeRoot,
   PlanBadge,
   PlanSelector,
   PlanSelectorCard,
@@ -4239,6 +5291,14 @@ var PlanBadge = ProductBadgeImpl;
   TopupFormPaymentElement,
   TopupFormRoot,
   TopupFormSubmitButton,
+  UsageMeter,
+  UsageMeterBar,
+  UsageMeterEmpty,
+  UsageMeterLabel,
+  UsageMeterLoading,
+  UsageMeterPercentage,
+  UsageMeterResetsIn,
+  UsageMeterRoot,
   composeEventHandlers,
   composeRefs,
   setRef,
@@ -4248,7 +5308,9 @@ var PlanBadge = ProductBadgeImpl;
   useCancelledPlanNotice,
   useCheckoutSummary,
   useCreditGate,
+  usePaywallNotice,
   usePlanSelector,
   usePurchaseGate,
-  useTopupForm
+  useTopupForm,
+  useUsageMeter
 });