@solvapay/react 2.5.0 → 2.6.0-preview-01847ff5f57eafaa4bca393519caeaf6856d968c

package/dist/mcp/styles.css

@@ -6,7 +6,9 @@
  * once on `:root` with `light-dark()` so hosts that publish nothing
  * still get a WCAG-compliant palette, and hosts that publish tokens
  * win. `html`/`body` stay transparent so the host canvas shows
- * through; the card is a hairline frame, not a filled sheet.
+ * through. The host owns the outer frame (`prefersBorder: true`):
+ * the widget root and the surface card paint no border, fill, or
+ * radius, so a framing host never nests a second card around ours.
  *
  * All classes start with `solvapay-mcp-` so they don't collide with the
  * core `@solvapay/react` styles or with integrator-supplied classes.
@@ -69,17 +71,31 @@ body {
   line-height: 1.5;
 }
 
+/* Inline frames are sized to the content by the host (`size-changed`),
+ * so the root never legitimately scrolls. When a view grows in place
+ * the document overflows for one frame, the root gains a classic
+ * vertical scrollbar, and Chromium (Claude Desktop) can keep that
+ * scrollbar after the host has grown the frame: a thumbless 15px track
+ * that still steals layout width. No root scrollbar, ever; wheel and
+ * touch scrolling still work on hosts that cap the frame height.
+ * Fullscreen scrolls on `.solvapay-mcp-main`, which keeps its own bar. */
+html {
+  scrollbar-width: none;
+}
+
+/* No gutter: root padding comes only from `hostContext.safeAreaInsets`,
+ * applied to `.solvapay-mcp-main` by the display-mode hook. */
 #root {
   min-height: 100%;
-  padding: 16px;
 }
 
 /* Fill the host container. Anthropic: "Apps always fill the
  * container width — there are no fixed breakpoints." `main` stays
  * `width: 100%` so `@container mcp (min-width: 760px)` sees the
- * host. The visual widget — chrome, loading card, shell — is one
- * centered 760px block (no-op below that width). Fullscreen lifts
- * the cap and becomes a centered 1000px hosted column. */
+ * host. Chrome, loading card and shell fill it too: the host draws
+ * its frame at the full column width, so any inline cap on our side
+ * shows up as dead margins inside that frame (seen on Claude Desktop
+ * past 760px). Fullscreen becomes a centered 1000px hosted column. */
 .solvapay-mcp-main {
   --solvapay-surface: var(--color-background-primary);
   --solvapay-muted: var(--color-background-secondary);
@@ -128,8 +144,6 @@ body {
 .solvapay-mcp-main > .solvapay-mcp-card,
 .solvapay-mcp-shell {
   width: 100%;
-  max-inline-size: 760px;
-  margin-inline: auto;
 }
 
 .solvapay-mcp-chrome-row {
@@ -149,9 +163,7 @@ body {
   flex-direction: column;
   gap: var(--solvapay-section-gap);
   padding: var(--solvapay-card-padding);
-  /* Hairline frame only — no fill, no shadow. Host tokens win. */
-  border-radius: var(--border-radius-xl);
-  border: 1px solid var(--color-border-primary);
+  /* A padded section, not a frame — the host card is the frame. */
   transition: opacity 180ms ease;
 }
 
@@ -227,7 +239,7 @@ body {
 
 /*
  * Subtle feedback while a background `check_purchase` poll is in flight.
- * The card frame stays mounted — we just dim it so the user sees activity
+ * The card stays mounted — we just dim it so the user sees activity
  * without any layout shift or content swap.
  */
 .solvapay-mcp-card[data-refreshing='true'] {
@@ -286,6 +298,10 @@ body {
   font-size: 13px;
 }
 
+.solvapay-mcp-signed-in-ref {
+  font-family: var(--font-mono);
+}
+
 .solvapay-mcp-notice {
   padding: 12px;
   border-radius: var(--border-radius-md);
@@ -389,12 +405,11 @@ body {
 /* Account view */
 
 /* `<CurrentPlanCard>` ships its own card frame for standalone web
- * surfaces. Inside the MCP account view the surrounding
- * `.solvapay-mcp-card` already IS the frame, so the default chrome
- * nested a second bordered box and doubled the inset (16px card
- * padding + 16px card padding). Flatten it: the plan facts then align
- * to the same left edge and 16px gutter as the heading, the CTA, and
- * every other MCP surface (checkout, topup, success). */
+ * surfaces. Inside the MCP account view the host card is the frame,
+ * so the default chrome would nest a second bordered box and double
+ * the inset. Flatten it: the plan facts then align to the same left
+ * edge as the heading, the CTA, and every other MCP surface
+ * (checkout, topup, success). */
 .solvapay-mcp-account [data-solvapay-current-plan-card] {
   padding: 0;
   border: 0;
@@ -461,48 +476,6 @@ body {
   gap: 12px;
 }
 
-/* Rounded-rectangle quick-amount chips. Mirrors the `.solvapay-amount-picker-pill`
- * shape used by the web SDK and the hosted topup page so the topup look is
- * consistent across surfaces. Colors come from host theme tokens
- * (`--color-*`) so Claude Desktop / ChatGPT / VSCode dark themes adapt
- * automatically. */
-.solvapay-mcp-amount-options {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.solvapay-mcp-amount-option {
-  padding: 6px 14px;
-  border-radius: var(--border-radius-md);
-  border: 1px solid var(--color-border-primary);
-  background: transparent;
-  color: var(--color-text-primary);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease;
-}
-
-/* Recommended chip: a subtly heavier border on the default state. No
- * color — stays within the pre-refactor black/white/gray palette. The
- * selected state below still wins and fills the chip with the accent. */
-.solvapay-mcp-amount-option[data-popular]:not([data-state='selected']) {
-  border-color: var(--color-text-primary);
-}
-
-.solvapay-mcp-amount-option:hover:not([data-state='selected']):not(:disabled) {
-  background: var(--solvapay-control-hover);
-}
-
-.solvapay-mcp-amount-option[data-state='selected'] {
-  border-color: var(--color-background-inverse);
-  background: var(--color-background-inverse);
-  color: var(--color-text-inverse);
-}
-
 /* `.solvapay-mcp-amount-custom` now wraps the bordered row — currency
  * prefix + input — instead of being applied directly to the `<input>`.
  * Lets us prefix the merchant currency symbol the same way the hosted
@@ -671,10 +644,11 @@ body {
  * There is no sidebar grid.
  */
 
+/* No gap: the card's own bottom padding is the only space between the
+ * last control and the legal footer. */
 .solvapay-mcp-shell {
   display: flex;
   flex-direction: column;
-  gap: 16px;
 }
 
 /* Body column carrying every step of every surface (account card,
@@ -728,14 +702,9 @@ body {
   display: none;
 }
 
-.solvapay-mcp-main[data-display-mode='fullscreen'] > .solvapay-mcp-card {
-  max-inline-size: none;
-}
-
 .solvapay-mcp-main[data-display-mode='fullscreen']
   .solvapay-mcp-card:has(.solvapay-mcp-hosted-layout) {
   padding: 0;
-  border: none;
 }
 
 html:has(.solvapay-mcp-main[data-display-mode='fullscreen']),
@@ -746,7 +715,6 @@ html:has(.solvapay-mcp-main[data-display-mode='fullscreen']) #root {
 }
 
 html:has(.solvapay-mcp-main[data-display-mode='fullscreen']) #root {
-  padding: 0;
   overflow: hidden;
 }
 
@@ -757,7 +725,6 @@ html:has(.solvapay-mcp-main[data-display-mode='fullscreen']) #root {
   /* 1000px column + the 72px gutter on each side. */
   max-inline-size: 1144px;
   padding: 56px 72px 40px;
-  margin-inline: 0;
 }
 
 .solvapay-mcp-hosted-layout {
@@ -810,42 +777,44 @@ html:has(.solvapay-mcp-main[data-display-mode='fullscreen']) #root {
 /*
  * Shell-level legal footer.
  *
- * Lays the `<LegalFooter>` primitive out as one centered line:
- * `Provided by SolvaPay · Terms · Privacy`. The parent
- * `.solvapay-mcp-shell` already supplies a `gap: 16px` between
- * children, so the row needs no extra `padding-top` of its own.
+ * One centered, muted line: `Provided by SolvaPay   Terms   Privacy`.
+ * The attribution is plain text, not a link. The `<LegalFooter>`
+ * wrappers flatten via `display: contents` so the attribution and both
+ * links share one flex gap, and the primitive's `·` separators are
+ * hidden. The card's bottom padding is the only space above it; the
+ * footer carries its own bottom inset so it does not sit flush against
+ * the host frame.
  *
- * Scoped to the shell context so the primitive's default centred
- * column layout, font size, and muted slate-500 ink keep working for
- * any other consumer who drops the primitive in.
+ * Scoped to the shell context so the primitive's default layout keeps
+ * working for any other consumer who drops it in.
  */
 .solvapay-mcp-shell-footer {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  gap: 1rem;
   font-size: 12px;
+  padding: 0 var(--solvapay-card-padding) 16px;
+}
+
+/* Fullscreen zeroes the card padding, so the footer supplies its own
+ * gap above; the shell's 40px bottom padding handles the space below. */
+.solvapay-mcp-main[data-display-mode='fullscreen'] .solvapay-mcp-shell-footer {
+  padding: 16px 0 0;
 }
 
+.solvapay-mcp-shell-footer [data-solvapay-legal-footer],
+.solvapay-mcp-shell-footer [data-solvapay-legal-footer-links] {
+  display: contents;
+}
+
+/* The shared footer sizes in `rem`; the widget root is 14px, not 16px. */
 .solvapay-mcp-shell-footer [data-solvapay-legal-footer] {
-  flex-direction: row-reverse;
-  justify-content: center;
-  align-items: baseline;
-  gap: 0;
-  width: 100%;
-  /* Step the ink up from slate-500 (the primitive default) to
-   * slate-600 so the footer reads cleanly against white without
-   * fading into the card border. Matches the rest of the MCP
-   * chrome (`AppHeader`, muted body copy). */
-  color: var(--color-text-secondary);
+  font-size: inherit;
 }
 
-/* Match the visual spacing of the inner `Terms · Privacy` separator.
- * That span sits inside an `inline-flex` with `gap: 0.5rem`, so each
- * side of its `·` reads as `0.5rem` flex-gap + the literal space in
- * the span text. We mirror that by adding `0.5rem` of padding to each
- * side of the `::after`-rendered bullet — the existing `' · '` text
- * already contributes the matching literal spaces. */
-.solvapay-mcp-shell-footer [data-solvapay-legal-footer-attribution]::after {
-  content: ' · ';
-  padding: 0 0.5rem;
-  font-weight: 400;
+.solvapay-mcp-shell-footer [data-solvapay-legal-footer-separator] {
+  display: none;
 }
 
 .solvapay-mcp-account {

package/dist/primitives/index.cjs

@@ -998,6 +998,7 @@ var enCopy = {
     soldBy: "Sold by {merchant}",
     fullHistory: "Full history",
     fullAccount: "Full account",
+    signedInAs: "Signed in as",
     creditActivityEyebrow: "Credit activity",
     chargesEyebrow: "Charges for this product",
     creditActivityCaption: "Every credit event on your account, newest first, including other products and top-ups. Credits are shared, so the balance only makes sense account-wide.",
@@ -2755,7 +2756,7 @@ var LegalFooter = (0, import_react13.forwardRef)(
             children: copy.legalFooter.terms
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-solvapay-legal-footer-separator": "", "aria-hidden": "true", children: " \xB7 " }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "a",
           {
@@ -8432,7 +8433,7 @@ var import_core9 = require("@solvapay/core");
 
 // src/utils/isPayg.ts
 function isPaygPlan(plan) {
-  return plan?.type === "usage-based" || plan?.type === "hybrid";
+  return plan?.type === "usage-based";
 }
 
 // src/primitives/checkout/shared.ts
@@ -8555,6 +8556,7 @@ function useCheckoutFlow(opts) {
   const planCtx = usePlanSelector();
   const planSelection = usePlanSelection();
   const transport = useTransport();
+  const copy = useCopy();
   const locale = useLocale();
   const balance = useBalance();
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
@@ -8610,7 +8612,23 @@ function useCheckoutFlow(opts) {
     setError(null);
     setStatus("activating");
     try {
-      await transport.activatePlan({ productRef, planRef: selectedPlanRef });
+      const result = await transport.activatePlan({ productRef, planRef: selectedPlanRef });
+      switch (result.status) {
+        case "activated":
+        case "already_active":
+        case "already_purchased":
+          break;
+        case "topup_required":
+          setStatus("idle");
+          setStep("amount");
+          return true;
+        case "payment_required":
+          throw new Error(copy.activation.paymentRequired);
+        case "invalid":
+          throw new Error(result.message ?? copy.activation.invalidConfiguration);
+        default:
+          throw new Error(copy.activation.unexpectedResponse);
+      }
       const credits = await balance.refetch() ?? balance.credits;
       if (credits == null) {
         throw new Error("Credit balance is unavailable");
@@ -8636,7 +8654,17 @@ function useCheckoutFlow(opts) {
       onErrorRef.current?.(wrapped, "activate");
       return false;
     }
-  }, [balance, locale, productRef, selectedPlanRef, selectedPlanShape, transport]);
+  }, [
+    balance,
+    copy.activation.invalidConfiguration,
+    copy.activation.paymentRequired,
+    copy.activation.unexpectedResponse,
+    locale,
+    productRef,
+    selectedPlanRef,
+    selectedPlanShape,
+    transport
+  ]);
   const advanceFromPlan = (0, import_react39.useCallback)(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
@@ -8674,7 +8702,15 @@ function useCheckoutFlow(opts) {
     }
     setError(null);
     setStep("payment");
-  }, [balance, branch, locale, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
+  }, [
+    balance,
+    branch,
+    locale,
+    planCtx.currentPlanRef,
+    runActivate,
+    selectedPlanRef,
+    selectedPlanShape
+  ]);
   const recordPaygSuccess = (0, import_react39.useCallback)(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
@@ -9934,8 +9970,8 @@ function deriveUsage(purchase, limits) {
   const hasFiniteCap = limits.unlimited === false && limits.remaining !== null;
   const remaining = hasFiniteCap ? limits.remaining : null;
   const total = typeof limits.limit === "number" && limits.limit > 0 ? limits.limit : null;
-  const used = typeof limits.used === "number" ? limits.used : total !== null && remaining !== null ? Math.max(0, total - remaining) : typeof usage?.used === "number" ? usage.used : 0;
-  const percentUsed = total !== null && total > 0 ? Math.min(100, Math.round(used / total * 1e4) / 100) : null;
+  const used = typeof limits.used === "number" ? limits.used : total !== null && remaining !== null ? Math.max(0, total - remaining) : null;
+  const percentUsed = total !== null && total > 0 && used !== null ? Math.min(100, Math.round(used / total * 1e4) / 100) : null;
   return {
     meterRef: limits.meterName,
     total,
@@ -10127,7 +10163,7 @@ var Label = (0, import_react45.forwardRef)(function UsageMeterLabel({ className,
     );
   }
   const unit = ctx.usage.meterRef ?? "requests";
-  const label = ctx.usage.total !== null ? interpolate(copy.usage.usedLabel, {
+  const label = ctx.usage.total !== null && ctx.usage.used !== null ? interpolate(copy.usage.usedLabel, {
     used: String(ctx.usage.used),
     total: String(ctx.usage.total),
     unit

package/dist/primitives/index.d.cts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { Ref } from 'react';
-import { b as Plan, z as Product, s as UseTopupAmountSelectorReturn, y as PurchaseInfo, T as TopupFormProps, c as SaveAutoRechargeResponse, u as AutoRechargeConfig } from '../useUsage-DwwQ-jAO.cjs';
-export { B as BootstrapPlanLike, E as CheckoutStep, O as SuccessMeta } from '../useUsage-DwwQ-jAO.cjs';
+import { b as Plan, z as Product, s as UseTopupAmountSelectorReturn, y as PurchaseInfo, T as TopupFormProps, c as SaveAutoRechargeResponse, u as AutoRechargeConfig } from '../useUsage-CPlXBdC5.cjs';
+export { B as BootstrapPlanLike, E as CheckoutStep, O as SuccessMeta } from '../useUsage-CPlXBdC5.cjs';
 import { TaxBreakdown, BusinessDetailsInput } from '@solvapay/core';
-import { A as AutoRechargeInputPayload, F as AmountInputUnit, G as AutoRechargeFormState, l as PaywallStructuredContent } from '../index-B8rb25FF.cjs';
-export { H as ActivationFlow, I as ActivationFlowActivateButton, J as ActivationFlowActivated, K as ActivationFlowAmountPicker, L as ActivationFlowContinueButton, N as ActivationFlowError, O as ActivationFlowLoading, Q as ActivationFlowRetrying, R as ActivationFlowRoot, m as ActivationFlowStep, S as ActivationFlowSummary, B as BalanceBadge, n as CancelPlanButton, p as CheckoutStatus, q as CheckoutSteps, T as CheckoutStepsAmountContinueButton, V as CheckoutStepsAmountPicker, W as CheckoutStepsBackLink, X as CheckoutStepsIfStep, Y as CheckoutStepsPayment, Z as CheckoutStepsPlanContinueButton, _ as CheckoutStepsPlanGrid, $ as CheckoutStepsRoot, a0 as CheckoutStepsStepHeading, a1 as CheckoutStepsStepMessage, a2 as CheckoutStepsSuccess, M as MandateText, t as MandateTextProps, a3 as PaymentForm, j as PaymentFormBusinessDetails, c as PaymentFormCardElement, a as PaymentFormCustomerFields, h as PaymentFormError, i as PaymentFormLegalFooter, g as PaymentFormLoading, d as PaymentFormMandateText, b as PaymentFormPaymentElement, a4 as PaymentFormRoot, f as PaymentFormSubmitButton, P as PaymentFormSummary, k as PaymentFormTaxSummary, e as PaymentFormTermsCheckbox, u as PlanBadge, v as ProductBadge, w as PurchaseGate, a5 as PurchaseGateAllowed, a6 as PurchaseGateBlocked, a7 as PurchaseGateError, a8 as PurchaseGateLoading, a9 as PurchaseGateRoot, aa as useActivationFlow, E as useCheckoutStepsContext, ab as usePurchaseGate } from '../index-B8rb25FF.cjs';
+import { A as AutoRechargeInputPayload, F as AmountInputUnit, G as AutoRechargeFormState, l as PaywallStructuredContent } from '../index-CCNxvSm-.cjs';
+export { H as ActivationFlow, I as ActivationFlowActivateButton, J as ActivationFlowActivated, K as ActivationFlowAmountPicker, L as ActivationFlowContinueButton, N as ActivationFlowError, O as ActivationFlowLoading, Q as ActivationFlowRetrying, R as ActivationFlowRoot, m as ActivationFlowStep, S as ActivationFlowSummary, B as BalanceBadge, n as CancelPlanButton, p as CheckoutStatus, q as CheckoutSteps, T as CheckoutStepsAmountContinueButton, V as CheckoutStepsAmountPicker, W as CheckoutStepsBackLink, X as CheckoutStepsIfStep, Y as CheckoutStepsPayment, Z as CheckoutStepsPlanContinueButton, _ as CheckoutStepsPlanGrid, $ as CheckoutStepsRoot, a0 as CheckoutStepsStepHeading, a1 as CheckoutStepsStepMessage, a2 as CheckoutStepsSuccess, M as MandateText, t as MandateTextProps, a3 as PaymentForm, j as PaymentFormBusinessDetails, c as PaymentFormCardElement, a as PaymentFormCustomerFields, h as PaymentFormError, i as PaymentFormLegalFooter, g as PaymentFormLoading, d as PaymentFormMandateText, b as PaymentFormPaymentElement, a4 as PaymentFormRoot, f as PaymentFormSubmitButton, P as PaymentFormSummary, k as PaymentFormTaxSummary, e as PaymentFormTermsCheckbox, u as PlanBadge, v as ProductBadge, w as PurchaseGate, a5 as PurchaseGateAllowed, a6 as PurchaseGateBlocked, a7 as PurchaseGateError, a8 as PurchaseGateLoading, a9 as PurchaseGateRoot, aa as useActivationFlow, E as useCheckoutStepsContext, ab as usePurchaseGate } from '../index-CCNxvSm-.cjs';
 import { PaymentElement } from '@stripe/react-stripe-js';
 import { Stripe, StripeElements } from '@stripe/stripe-js';
-export { a as UsageMeter, B as UsageMeterBar, b as UsageMeterClassNames, E as UsageMeterEmpty, L as UsageMeterLabel, c as UsageMeterLoading, P as UsageMeterPercentage, R as UsageMeterResetsIn, d as UsageMeterRoot, U as UsageMeterRootProps, u as useUsageMeter } from '../UsageMeter-YX-icS_X.cjs';
+export { a as UsageMeter, B as UsageMeterBar, b as UsageMeterClassNames, E as UsageMeterEmpty, L as UsageMeterLabel, c as UsageMeterLoading, P as UsageMeterPercentage, R as UsageMeterResetsIn, d as UsageMeterRoot, U as UsageMeterRootProps, u as useUsageMeter } from '../UsageMeter-Cxn3_A-q.cjs';
 import '../adapters/auth.cjs';
 
 type PlanPricingOption = {

package/dist/primitives/index.d.ts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { Ref } from 'react';
-import { b as Plan, z as Product, s as UseTopupAmountSelectorReturn, y as PurchaseInfo, T as TopupFormProps, c as SaveAutoRechargeResponse, u as AutoRechargeConfig } from '../useUsage-DwFZIuQW.js';
-export { B as BootstrapPlanLike, E as CheckoutStep, O as SuccessMeta } from '../useUsage-DwFZIuQW.js';
+import { b as Plan, z as Product, s as UseTopupAmountSelectorReturn, y as PurchaseInfo, T as TopupFormProps, c as SaveAutoRechargeResponse, u as AutoRechargeConfig } from '../useUsage-Bee4D9Hw.js';
+export { B as BootstrapPlanLike, E as CheckoutStep, O as SuccessMeta } from '../useUsage-Bee4D9Hw.js';
 import { TaxBreakdown, BusinessDetailsInput } from '@solvapay/core';
-import { A as AutoRechargeInputPayload, F as AmountInputUnit, G as AutoRechargeFormState, l as PaywallStructuredContent } from '../index-DBd1TLZA.js';
-export { H as ActivationFlow, I as ActivationFlowActivateButton, J as ActivationFlowActivated, K as ActivationFlowAmountPicker, L as ActivationFlowContinueButton, N as ActivationFlowError, O as ActivationFlowLoading, Q as ActivationFlowRetrying, R as ActivationFlowRoot, m as ActivationFlowStep, S as ActivationFlowSummary, B as BalanceBadge, n as CancelPlanButton, p as CheckoutStatus, q as CheckoutSteps, T as CheckoutStepsAmountContinueButton, V as CheckoutStepsAmountPicker, W as CheckoutStepsBackLink, X as CheckoutStepsIfStep, Y as CheckoutStepsPayment, Z as CheckoutStepsPlanContinueButton, _ as CheckoutStepsPlanGrid, $ as CheckoutStepsRoot, a0 as CheckoutStepsStepHeading, a1 as CheckoutStepsStepMessage, a2 as CheckoutStepsSuccess, M as MandateText, t as MandateTextProps, a3 as PaymentForm, j as PaymentFormBusinessDetails, c as PaymentFormCardElement, a as PaymentFormCustomerFields, h as PaymentFormError, i as PaymentFormLegalFooter, g as PaymentFormLoading, d as PaymentFormMandateText, b as PaymentFormPaymentElement, a4 as PaymentFormRoot, f as PaymentFormSubmitButton, P as PaymentFormSummary, k as PaymentFormTaxSummary, e as PaymentFormTermsCheckbox, u as PlanBadge, v as ProductBadge, w as PurchaseGate, a5 as PurchaseGateAllowed, a6 as PurchaseGateBlocked, a7 as PurchaseGateError, a8 as PurchaseGateLoading, a9 as PurchaseGateRoot, aa as useActivationFlow, E as useCheckoutStepsContext, ab as usePurchaseGate } from '../index-DBd1TLZA.js';
+import { A as AutoRechargeInputPayload, F as AmountInputUnit, G as AutoRechargeFormState, l as PaywallStructuredContent } from '../index-ykfNzPia.js';
+export { H as ActivationFlow, I as ActivationFlowActivateButton, J as ActivationFlowActivated, K as ActivationFlowAmountPicker, L as ActivationFlowContinueButton, N as ActivationFlowError, O as ActivationFlowLoading, Q as ActivationFlowRetrying, R as ActivationFlowRoot, m as ActivationFlowStep, S as ActivationFlowSummary, B as BalanceBadge, n as CancelPlanButton, p as CheckoutStatus, q as CheckoutSteps, T as CheckoutStepsAmountContinueButton, V as CheckoutStepsAmountPicker, W as CheckoutStepsBackLink, X as CheckoutStepsIfStep, Y as CheckoutStepsPayment, Z as CheckoutStepsPlanContinueButton, _ as CheckoutStepsPlanGrid, $ as CheckoutStepsRoot, a0 as CheckoutStepsStepHeading, a1 as CheckoutStepsStepMessage, a2 as CheckoutStepsSuccess, M as MandateText, t as MandateTextProps, a3 as PaymentForm, j as PaymentFormBusinessDetails, c as PaymentFormCardElement, a as PaymentFormCustomerFields, h as PaymentFormError, i as PaymentFormLegalFooter, g as PaymentFormLoading, d as PaymentFormMandateText, b as PaymentFormPaymentElement, a4 as PaymentFormRoot, f as PaymentFormSubmitButton, P as PaymentFormSummary, k as PaymentFormTaxSummary, e as PaymentFormTermsCheckbox, u as PlanBadge, v as ProductBadge, w as PurchaseGate, a5 as PurchaseGateAllowed, a6 as PurchaseGateBlocked, a7 as PurchaseGateError, a8 as PurchaseGateLoading, a9 as PurchaseGateRoot, aa as useActivationFlow, E as useCheckoutStepsContext, ab as usePurchaseGate } from '../index-ykfNzPia.js';
 import { PaymentElement } from '@stripe/react-stripe-js';
 import { Stripe, StripeElements } from '@stripe/stripe-js';
-export { a as UsageMeter, B as UsageMeterBar, b as UsageMeterClassNames, E as UsageMeterEmpty, L as UsageMeterLabel, c as UsageMeterLoading, P as UsageMeterPercentage, R as UsageMeterResetsIn, d as UsageMeterRoot, U as UsageMeterRootProps, u as useUsageMeter } from '../UsageMeter-Cg9IAFvV.js';
+export { a as UsageMeter, B as UsageMeterBar, b as UsageMeterClassNames, E as UsageMeterEmpty, L as UsageMeterLabel, c as UsageMeterLoading, P as UsageMeterPercentage, R as UsageMeterResetsIn, d as UsageMeterRoot, U as UsageMeterRootProps, u as useUsageMeter } from '../UsageMeter-sAFkX-Tz.js';
 import '../adapters/auth.js';
 
 type PlanPricingOption = {

package/dist/primitives/index.js

@@ -89,7 +89,7 @@ import {
   useCreditGate,
   usePaywallNotice,
   usePurchaseGate
-} from "../chunk-IZPE4LKU.js";
+} from "../chunk-SISWCV4B.js";
 import {
   AmountPicker,
   AmountPickerConfirm,
@@ -175,7 +175,7 @@ import {
   usePlanSelector,
   useTopupForm,
   useUsageMeter
-} from "../chunk-67GJCZZU.js";
+} from "../chunk-WVWUTOBU.js";
 import "../chunk-UMXOAUW7.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/{useUsage-DwFZIuQW.d.ts → useUsage-Bee4D9Hw.d.ts}

@@ -1785,8 +1785,20 @@ interface components {
              * @example active
              */
             status: string;
-            /** @description Usage billing state for usage-based plans */
-            usage?: components['schemas']['UsageBillingDto'];
+            /** @description Billing period of the active usage window; counts come from `/v1/sdk/limits` */
+            usage?: components['schemas']['SdkUsagePeriodDto'];
+        };
+        SdkUsagePeriodDto: {
+            /**
+             * Billing period of the active usage window; counts come from `/v1/sdk/limits`
+             * @example 2025-11-01T00:00:00Z
+             */
+            periodEnd?: string;
+            /**
+             * Billing period of the active usage window; counts come from `/v1/sdk/limits`
+             * @example 2025-10-01T00:00:00Z
+             */
+            periodStart?: string;
         };
         TaxBreakdownDto: {
             /** @description ISO 4217 currency code */
@@ -1934,33 +1946,6 @@ interface components {
             /** @enum {string} */
             taxBehavior?: 'auto' | 'inclusive' | 'exclusive';
         };
-        UsageBillingDto: {
-            /**
-             * Overage cost in cents
-             * @example 0
-             */
-            overageCost: number;
-            /**
-             * Units exceeding the plan included amount
-             * @example 0
-             */
-            overageUnits: number;
-            /**
-             * Period end date
-             * @example 2025-11-01T00:00:00Z
-             */
-            periodEnd?: string;
-            /**
-             * Period start date
-             * @example 2025-10-01T00:00:00Z
-             */
-            periodStart?: string;
-            /**
-             * Units consumed in current period
-             * @example 150
-             */
-            used: number;
-        };
         UsageRecordResponse: {
             creditDebit?: components['schemas']['CreditDebitSuccessResponse'] | components['schemas']['CreditDebitSkippedResponse'];
             /** @example usage_A1B2C3D4 */
@@ -3953,7 +3938,13 @@ interface PurchaseCheckResult {
 interface GetUsageResult {
     meterRef: string | null;
     total: number | null;
-    used: number;
+    /**
+     * Consumed units this period. `limits.used` when the backend measured a
+     * finite cap, otherwise `total - remaining` when both are finite.
+     * `null` means this response did not measure consumption (`limits` null,
+     * unlimited, or credit-based).
+     */
+    used: number | null;
     remaining: number | null;
     /** 0–100, rounded to 2dp. `null` when `total` is unknown. */
     percentUsed: number | null;
@@ -4279,6 +4270,8 @@ interface SolvaPayCopy {
         fullHistory: string;
         /** Portal text link. The button adds the external-link glyph. */
         fullAccount: string;
+        /** Inline account identity. Email and customer ref follow the label. */
+        signedInAs: string;
         creditActivityEyebrow: string;
         chargesEyebrow: string;
         creditActivityCaption: string;
@@ -4444,7 +4437,7 @@ interface SolvaPayCopy {
         activationRequiredHeading: string;
         /**
          * Heading for `kind: 'activation_required'` when every available
-         * plan is PAYG (`type: 'usage-based' | 'hybrid'`). Displayed as the
+         * plan is PAYG (`type: 'usage-based'`). Displayed as the
          * topup variant of the activation gate so the user sees "Add
          * credits" framing rather than generic "Activate a plan".
          */
@@ -4472,7 +4465,7 @@ interface SolvaPayCopy {
          * Web-friendly copy for the topup variant of an activation gate —
          * `kind: 'activation_required'` where every available plan is
          * PAYG. `<PaywallNotice.Message>` resolves this when the gate's
-         * `plans` are all `type: 'usage-based' | 'hybrid'`.
+         * `plans` are all `type: 'usage-based'`.
          */
         topupRequiredMessage: string;
         paymentRequiredProductSuffix: string;
@@ -4571,8 +4564,7 @@ interface TransportLimitsResult {
     needsTopUp?: boolean;
     /**
      * Consumed units this period. Present only when the backend measured
-     * a finite cap. Authoritative — do not reconstruct from
-     * `purchase.usage.used`.
+     * a finite cap. The purchase wire does not carry a count.
      */
     used?: number;
     /**
@@ -5516,7 +5508,8 @@ interface UseUsageReturn {
 interface UsageSnapshot {
     meterRef: string | null;
     total: number | null;
-    used: number;
+    /** Measured consumption, or `null` when this response did not measure it. */
+    used: number | null;
     remaining: number | null;
     percentUsed: number | null;
     periodStart?: string;