@solvapay/react 2.1.1 → 2.2.0-preview-e3e546693c002c32f128d83bf6c5fe76ac182a79

package/CHANGELOG.md

@@ -1,11 +1,32 @@
 # @solvapay/react changelog
 
-## 2.1.1
+## 2.2.0-preview-e3e546693c002c32f128d83bf6c5fe76ac182a79
+
+### Minor Changes
+
+- f994f1a: Unify MCP commerce surfaces and ship the v3 account widget (states A–J).
+
+  **Layout and chrome.** One layout law across checkout, top-up, and account: primary content leads, seller and your-account trails, identity rail visible at every width. `<McpApp>` reads host `displayMode` and advertises `inline` + `fullscreen`. Inline chrome is a centered `36rem` block; fullscreen is a hosted 1000px column (340 payment / 300 management rails) that falls back to the stacked widget under 1000px host width. Drop the shell sidebar — identity moves to `McpPayingAs` inside the payment form. Blend the widget into the host canvas (transparent root, hairline card, `color-scheme` meta in scaffolder and examples).
+
+  **Account widget.** StatusPill, FactBand, and UsageMeter (warning at 80%, critical at 100%) with v3 usage captions. Route each plan family through its own panel; ladder rows use per-row Activate/Switch (in-place when no payment, checkout when payment is required). Fullscreen extras: plan consequence lines, credit-activity and charges tables, merchant/buyer footer. Dedicated auto-recharge view from the account panel; shared fields in top-up. Seed bootstrap `limits` into `useLimits`/`useUsage`. `useHistory` fetches charges and credit activity on section mount.
+
+  **Checkout and payment.** Theme Stripe Payment Element from `--solvapay-*` tokens; tabs layout by default. Own billing country in the widget (not PaymentElement). Move mandate text below the pay button. Remove decorative save-card checkbox on PAYG; pass deferred auto-recharge into top-up so the card is saved for off-session reuse. `planPricingShape` so usage-based $0 plans are not labelled Free and one-time vs monthly render correctly.
+
+  **Links and polish.** Outbound links route through host `ui/open-link` when `openLinks` is declared (`useExternalLinkClick`, `useOpenExternal`, `<ExternalLinkProvider>`; `<McpApp>` mounts automatically). Drop fullscreen `CloseButton` export — host owns window chrome. Portal history links render as text; shell centres at 1144px. Seller-card email/support render as plain text (no iframe navigation).
+
+  **Breaking (MCP-only exports).** Removed `McpSellerDetailsCard`, `McpCustomerDetailsCard`, `McpAccountView.hideDetailCards`, `McpLimitReached`, and `CloseButton`. Turnkey `<McpApp>` integrators are unaffected; custom shells that imported these must migrate.
+
+  **Templates.** Example and `create-solvapay` pass `SOLVAPAY_MCP_APP_CAPABILITIES` into `new App()`.
 
 ### Patch Changes
 
+- 4771b85: Widen the `@solvapay/mcp-core` peer range to accept `^0.4.0`. Existing installs pinned to `^0.3.0` keep resolving to 0.3.x and are unaffected; moving to mcp-core 0.4.x is now an explicit opt-in that no longer forces a peer conflict.
 - Updated dependencies [a98faa9]
-  - @solvapay/core@1.6.0
+- Updated dependencies [f994f1a]
+- Updated dependencies [f994f1a]
+- Updated dependencies [5d37370]
+  - @solvapay/core@1.6.0-preview-e3e546693c002c32f128d83bf6c5fe76ac182a79
+  - @solvapay/mcp-core@0.4.0-preview-e3e546693c002c32f128d83bf6c5fe76ac182a79
 
 ## 2.1.0
 

package/dist/UsageMeter-BhxNHeRM.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { _ as UsageSnapshot } from './useUsage-CMqxEF9d.js';
+
+/**
+ * `<UsageMeter>` compound primitive — renders the authenticated customer's
+ * usage against their plan quota.
+ *
+ * Composes `useUsage()` internally so integrators only render the leaf
+ * primitives they care about. Leaves render `null` when the active plan
+ * isn't usage-based, so dropping the compound into any account page is
+ * safe.
+ *
+ * State:
+ *  - root / bar `data-state="safe" | "warning" | "critical" | "loading"`
+ *  - root `data-solvapay-usage-meter`
+ *  - bar  `data-solvapay-usage-meter-bar`
+ */
+
+type UsageMeterState = 'safe' | 'warning' | 'critical' | 'loading';
+interface UsageMeterContextValue {
+    usage: UsageSnapshot | null;
+    loading: boolean;
+    error: Error | null;
+    percentUsed: number | null;
+    isApproachingLimit: boolean;
+    isAtLimit: boolean;
+    isUnlimited: boolean;
+    state: UsageMeterState;
+    warningAt: number;
+    criticalAt: number;
+}
+interface UsageMeterClassNames {
+    root?: string;
+    bar?: string;
+    label?: string;
+    percentage?: string;
+    resetsIn?: string;
+    loading?: string;
+    empty?: string;
+    error?: string;
+}
+interface UsageMeterRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Percent at which the bar flips to `data-state="warning"`. Default 75. */
+    warningAt?: number;
+    /** Percent at which the bar flips to `data-state="critical"`. Default 90. */
+    criticalAt?: number;
+    classNames?: UsageMeterClassNames;
+    asChild?: boolean;
+    /**
+     * Override the usage snapshot rather than reading from `useUsage`.
+     * Mostly useful for tests / Storybook demos.
+     */
+    usageOverride?: UsageSnapshot | null;
+}
+declare const Root: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const Bar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const Percentage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const ResetsIn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Empty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const UsageMeter: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>>;
+    Bar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Percentage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ResetsIn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Empty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+
+declare function useUsageMeter(): UsageMeterContextValue;
+
+export { Bar as B, Empty as E, Label as L, Percentage as P, ResetsIn as R, type UsageMeterRootProps as U, UsageMeter as a, type UsageMeterClassNames as b, Loading as c, Root as d, useUsageMeter as u };

package/dist/UsageMeter-rga6cyfB.d.cts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { _ as UsageSnapshot } from './useUsage-CTgRBvFK.cjs';
+
+/**
+ * `<UsageMeter>` compound primitive — renders the authenticated customer's
+ * usage against their plan quota.
+ *
+ * Composes `useUsage()` internally so integrators only render the leaf
+ * primitives they care about. Leaves render `null` when the active plan
+ * isn't usage-based, so dropping the compound into any account page is
+ * safe.
+ *
+ * State:
+ *  - root / bar `data-state="safe" | "warning" | "critical" | "loading"`
+ *  - root `data-solvapay-usage-meter`
+ *  - bar  `data-solvapay-usage-meter-bar`
+ */
+
+type UsageMeterState = 'safe' | 'warning' | 'critical' | 'loading';
+interface UsageMeterContextValue {
+    usage: UsageSnapshot | null;
+    loading: boolean;
+    error: Error | null;
+    percentUsed: number | null;
+    isApproachingLimit: boolean;
+    isAtLimit: boolean;
+    isUnlimited: boolean;
+    state: UsageMeterState;
+    warningAt: number;
+    criticalAt: number;
+}
+interface UsageMeterClassNames {
+    root?: string;
+    bar?: string;
+    label?: string;
+    percentage?: string;
+    resetsIn?: string;
+    loading?: string;
+    empty?: string;
+    error?: string;
+}
+interface UsageMeterRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Percent at which the bar flips to `data-state="warning"`. Default 75. */
+    warningAt?: number;
+    /** Percent at which the bar flips to `data-state="critical"`. Default 90. */
+    criticalAt?: number;
+    classNames?: UsageMeterClassNames;
+    asChild?: boolean;
+    /**
+     * Override the usage snapshot rather than reading from `useUsage`.
+     * Mostly useful for tests / Storybook demos.
+     */
+    usageOverride?: UsageSnapshot | null;
+}
+declare const Root: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const Bar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const Percentage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const ResetsIn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Empty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const UsageMeter: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<UsageMeterRootProps & React.RefAttributes<HTMLDivElement>>;
+    Bar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Percentage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ResetsIn: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    Loading: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Empty: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+
+declare function useUsageMeter(): UsageMeterContextValue;
+
+export { Bar as B, Empty as E, Label as L, Percentage as P, ResetsIn as R, type UsageMeterRootProps as U, UsageMeter as a, type UsageMeterClassNames as b, Loading as c, Root as d, useUsageMeter as u };

package/dist/chunk-FWT62B56.js

@@ -0,0 +1,316 @@
+import {
+  Slot,
+  composeEventHandlers,
+  createHttpTransport,
+  createTransportCacheKey,
+  useCopy,
+  useExternalLinkClick,
+  useOpenExternal,
+  useSolvaPay,
+  useTransport
+} from "./chunk-VTGYZIE2.js";
+
+// src/hooks/usePaymentMethod.ts
+import { useCallback, useEffect, useState } from "react";
+var paymentMethodCache = /* @__PURE__ */ new Map();
+var CACHE_DURATION = 5 * 60 * 1e3;
+function cacheKeyFor(config) {
+  return createTransportCacheKey(
+    config,
+    config?.api?.getPaymentMethod || "/api/payment-method"
+  );
+}
+async function fetchPaymentMethod(config) {
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getPaymentMethod) return null;
+  return transport.getPaymentMethod();
+}
+function usePaymentMethod() {
+  const { _config } = useSolvaPay();
+  const key = cacheKeyFor(_config);
+  const [paymentMethod, setPaymentMethod] = useState(
+    () => paymentMethodCache.get(key)?.paymentMethod ?? null
+  );
+  const [loading, setLoading] = useState(() => {
+    const cached = paymentMethodCache.get(key);
+    return !cached || !cached.paymentMethod && !cached.promise;
+  });
+  const [error, setError] = useState(null);
+  const load = useCallback(
+    async (force = false) => {
+      const cached = paymentMethodCache.get(key);
+      const now = Date.now();
+      if (!force && cached?.paymentMethod && now - cached.timestamp < CACHE_DURATION) {
+        setPaymentMethod(cached.paymentMethod);
+        setLoading(false);
+        setError(null);
+        return;
+      }
+      if (!force && cached?.promise) {
+        try {
+          setLoading(true);
+          const pm = await cached.promise;
+          setPaymentMethod(pm);
+          setError(null);
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error("Failed to load payment method"));
+        } finally {
+          setLoading(false);
+        }
+        return;
+      }
+      try {
+        setLoading(true);
+        setError(null);
+        const promise = fetchPaymentMethod(_config);
+        paymentMethodCache.set(key, {
+          paymentMethod: cached?.paymentMethod ?? null,
+          promise,
+          timestamp: now
+        });
+        const pm = await promise;
+        if (pm === null) {
+          paymentMethodCache.set(key, {
+            paymentMethod: cached?.paymentMethod ?? null,
+            promise: null,
+            timestamp: cached?.timestamp ?? now
+          });
+          setPaymentMethod(cached?.paymentMethod ?? null);
+          setLoading(false);
+          return;
+        }
+        paymentMethodCache.set(key, { paymentMethod: pm, promise: null, timestamp: now });
+        setPaymentMethod(pm);
+      } catch (err) {
+        paymentMethodCache.delete(key);
+        setError(err instanceof Error ? err : new Error("Failed to load payment method"));
+        setPaymentMethod(null);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [_config, key]
+  );
+  useEffect(() => {
+    load();
+  }, [load]);
+  return {
+    paymentMethod,
+    loading,
+    error,
+    refetch: () => load(true)
+  };
+}
+
+// src/components/LaunchCustomerPortalButton.tsx
+import { forwardRef, useState as useState2 } from "react";
+
+// src/hooks/useCustomerSessionUrl.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useSyncExternalStore } from "react";
+var SessionStore = class {
+  constructor(transport) {
+    this.transport = transport;
+  }
+  // Snapshot is replaced (not mutated) on every transition so
+  // `useSyncExternalStore` sees a fresh reference and schedules
+  // a re-render for every subscriber.
+  state = { status: "idle" };
+  inflight = null;
+  listeners = /* @__PURE__ */ new Set();
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => this.state;
+  ensure = () => {
+    if (this.state.status === "ready" && this.state.url) {
+      return Promise.resolve(this.state.url);
+    }
+    return this.start();
+  };
+  refresh = () => {
+    this.inflight = null;
+    this.state = { status: "idle" };
+    this.notify();
+    return this.start();
+  };
+  start() {
+    if (this.inflight) return this.inflight;
+    this.state = { status: "loading" };
+    this.notify();
+    const promise = this.transport.createCustomerSession().then(({ customerUrl }) => {
+      this.state = { status: "ready", url: customerUrl };
+      this.inflight = null;
+      this.notify();
+      return customerUrl;
+    }).catch((err) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.state = { status: "error", error };
+      this.inflight = null;
+      this.notify();
+      throw error;
+    });
+    this.inflight = promise;
+    return promise;
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener());
+  }
+};
+var stores = /* @__PURE__ */ new WeakMap();
+function getStore(transport) {
+  let store = stores.get(transport);
+  if (!store) {
+    store = new SessionStore(transport);
+    stores.set(transport, store);
+  }
+  return store;
+}
+function useCustomerSessionUrl() {
+  const transport = useTransport();
+  const store = getStore(transport);
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  useEffect2(() => {
+    const current = getStore(transport);
+    if (current.state.status === "idle") {
+      current.ensure().catch(() => {
+      });
+    }
+  }, [transport]);
+  const ensure = useCallback2(() => getStore(transport).ensure(), [transport]);
+  const refresh = useCallback2(() => getStore(transport).refresh(), [transport]);
+  return {
+    status: snapshot.status,
+    url: snapshot.url,
+    error: snapshot.error,
+    ensure,
+    refresh
+  };
+}
+
+// src/components/ExternalLinkGlyph.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ExternalLinkGlyph = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `solvapay-mcp-external-glyph${className ? ` ${className}` : ""}`,
+      width: "0.9em",
+      height: "0.9em",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+        /* @__PURE__ */ jsx("path", { d: "m10 14 11-11" })
+      ]
+    }
+  );
+};
+
+// src/components/LaunchCustomerPortalButton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LaunchCustomerPortalButton = forwardRef(function LaunchCustomerPortalButton2({
+  children,
+  onLaunch,
+  onError,
+  onClick,
+  loadingClassName,
+  errorClassName,
+  asChild,
+  className,
+  ...rest
+}, forwardedRef) {
+  const { status, url, ensure } = useCustomerSessionUrl();
+  const copy = useCopy();
+  const handleExternalClick = useExternalLinkClick();
+  const openExternal = useOpenExternal();
+  const [clickState, setClickState] = useState2("idle");
+  const isReady = status === "ready" && typeof url === "string";
+  const label = children ?? copy.customerPortal.launchButton;
+  const labelText = typeof label === "string" ? label : copy.customerPortal.launchButton;
+  const composedClassName = [
+    className,
+    clickState === "pending" ? loadingClassName : null,
+    clickState === "error" ? errorClassName : null
+  ].filter(Boolean).join(" ") || void 0;
+  const handleReadyClick = (event) => {
+    if (!isReady || !url) return;
+    onLaunch?.(url);
+    handleExternalClick(event);
+  };
+  const handlePendingClick = async (event) => {
+    event.preventDefault();
+    setClickState("pending");
+    try {
+      const resolved = await ensure();
+      if (!await openExternal(resolved)) {
+        setClickState("error");
+        onError?.(new Error(`Host declined to open the customer portal: ${resolved}`));
+        return;
+      }
+      setClickState("idle");
+      onLaunch?.(resolved);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setClickState("error");
+      onError?.(error);
+    }
+  };
+  const sharedProps = {
+    "data-solvapay-launch-customer-portal": "",
+    "data-state": clickState === "pending" ? "pending" : isReady ? "ready" : "idle",
+    "aria-label": `${labelText} (opens in a new tab)`,
+    className: composedClassName,
+    ...rest
+  };
+  if (isReady && url) {
+    const readyProps = {
+      ...sharedProps,
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: composeEventHandlers(onClick, handleReadyClick)
+    };
+    if (asChild) {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        /* @__PURE__ */ jsx2(Slot, { ref: forwardedRef, ...readyProps, children: label })
+      );
+    }
+    return /* @__PURE__ */ jsxs2("a", { ref: forwardedRef, ...readyProps, children: [
+      label,
+      /* @__PURE__ */ jsx2(ExternalLinkGlyph, {})
+    ] });
+  }
+  const pendingProps = {
+    ...sharedProps,
+    role: "link",
+    onClick: composeEventHandlers(onClick, handlePendingClick)
+  };
+  if (asChild) {
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      /* @__PURE__ */ jsx2(Slot, { ref: forwardedRef, ...pendingProps, children: label })
+    );
+  }
+  return /* @__PURE__ */ jsxs2("a", { ref: forwardedRef, ...pendingProps, children: [
+    label,
+    /* @__PURE__ */ jsx2(ExternalLinkGlyph, {})
+  ] });
+});
+
+export {
+  paymentMethodCache,
+  usePaymentMethod,
+  ExternalLinkGlyph,
+  LaunchCustomerPortalButton
+};