@hyperyai/sdk 1.0.0

package/dist/components/BuyButton.js

@@ -0,0 +1,74 @@
+/**
+ * BuyButton — "buy with Hypery" marketplace checkout button.
+ *
+ * On click it runs the full auth+charge flow via {@link useCheckout}: it logs
+ * the buyer in if needed, charges, and adds a card if none is on file — each
+ * step as a popup or a redirect per `config.interactionMode` (`auto` by default).
+ * So an unauthenticated visitor can click Buy and be walked through login → card
+ * → charge without leaving the page (popup mode). Never throws.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useCheckout } from "../hooks/useCheckout";
+function formatUsd(amountCents) {
+    return `$${(amountCents / 100).toFixed(2)}`;
+}
+/**
+ * Drop-in checkout button for the Hypery marketplace.
+ *
+ * @example
+ * ```tsx
+ * <BuyButton appId="app_123" amountCents={499} description="Pro upgrade"
+ *   onSuccess={(r) => console.log('paid', r.paymentIntentId)} />
+ * ```
+ */
+export function BuyButton({ appId, amountCents, description, label, onSuccess, onError, className = "", branding, requireConfirmation = true, }) {
+    const { checkout, isRunning } = useCheckout();
+    const [armed, setArmed] = useState(false);
+    const busy = isRunning;
+    const charge = async () => {
+        setArmed(false);
+        // Runs login → charge → add-card → retry as needed (popup or redirect).
+        const result = await checkout({ kind: "purchase", appId, amountCents, description });
+        if (result.status === "success") {
+            const b = result.data || {};
+            onSuccess?.({
+                ok: true,
+                paymentIntentId: b.paymentIntentId,
+                status: b.status,
+                amountCents: b.amountCents ?? amountCents,
+                applicationFeeCents: b.applicationFeeCents ?? 0,
+            });
+            return;
+        }
+        // 'redirecting' (navigating away, resumes on return) and 'cancelled' (user
+        // closed a popup) are not errors — stay quiet.
+        if (result.status === "error" && result.error) {
+            onError?.(result.error);
+        }
+    };
+    const handleClick = () => {
+        if (requireConfirmation && !armed) {
+            setArmed(true);
+            return;
+        }
+        void charge();
+    };
+    const primaryColor = branding?.primaryColor;
+    const style = primaryColor ? { backgroundColor: primaryColor } : undefined;
+    const idleLabel = label ?? `Buy · ${formatUsd(amountCents)}`;
+    const buttonLabel = busy
+        ? "Processing…"
+        : armed
+            ? `Confirm · ${formatUsd(amountCents)}`
+            : idleLabel;
+    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleClick, disabled: busy, style: style, className: `
+        inline-flex items-center justify-center gap-2
+        px-6 py-2.5 text-base rounded-lg font-medium transition-all
+        text-white shadow-md hover:shadow-lg
+        ${primaryColor ? "" : "bg-purple-600 hover:bg-purple-700"}
+        disabled:opacity-60 disabled:cursor-not-allowed
+        ${className}
+      `, children: [busy && (_jsx("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white", "aria-hidden": "true" })), buttonLabel] }), armed && !busy && (_jsx("button", { type: "button", onClick: () => setArmed(false), className: "px-3 py-2.5 text-sm rounded-lg font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors", children: "Cancel" }))] }));
+}

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,13 @@
+export interface ErrorBoundaryProps {
+    error: any;
+    onRetry?: () => void;
+    onUpgradeLimits?: () => void;
+    onAddCredits?: () => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Universal error boundary component
+ * Automatically renders the appropriate error UI based on error type
+ */
+export declare function ErrorBoundary({ error, onRetry, onUpgradeLimits, onAddCredits, className, children, }: ErrorBoundaryProps): import("react").JSX.Element;

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,24 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseError } from '../lib/parse-error';
+import { SpendingLimitAlert } from './SpendingLimitAlert';
+import { InsufficientCreditsAlert } from './InsufficientCreditsAlert';
+/**
+ * Universal error boundary component
+ * Automatically renders the appropriate error UI based on error type
+ */
+export function ErrorBoundary({ error, onRetry, onUpgradeLimits, onAddCredits, className = '', children, }) {
+    if (!error)
+        return _jsx(_Fragment, { children: children });
+    const parsed = parseError(error);
+    // Render spending limit alert
+    if (parsed.isSpendingLimit) {
+        return (_jsx(SpendingLimitAlert, { error: parsed, onRetry: onRetry, onUpgradeLimits: onUpgradeLimits, className: className }));
+    }
+    // Render insufficient credits alert
+    if (parsed.isInsufficientCredits) {
+        return (_jsx(InsufficientCreditsAlert, { error: parsed, onAddCredits: onAddCredits, className: className }));
+    }
+    // Render generic error
+    return (_jsx("div", { className: `rounded-lg border border-gray-200 bg-gray-50 p-4 ${className}`, role: "alert", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("svg", { className: "h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-sm font-medium text-gray-800", children: "Error" }), _jsx("div", { className: "mt-2 text-sm text-gray-700", children: _jsx("p", { children: parsed.message }) }), onRetry && (_jsx("div", { className: "mt-4", children: _jsx("button", { type: "button", onClick: onRetry, className: "text-sm font-medium text-gray-800 hover:text-gray-900", children: "Try again" }) }))] })] }) }));
+}

package/dist/components/HyperyModals.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+export interface HyperyModalsProps {
+    /**
+     * Branding + auth-form options forwarded to the auto-opened `AuthModal`.
+     */
+    branding?: {
+        logo?: string;
+        appName?: string;
+        primaryColor?: string;
+    };
+    showSocial?: boolean;
+    showEmailPassword?: boolean;
+    /**
+     * Called when the funds modal's retry button is pressed (e.g. re-run the
+     * request that was blocked). The restriction is cleared automatically.
+     */
+    onRetry?: () => void;
+}
+/**
+ * Turnkey modal host. Mount this ONCE anywhere inside `<HyperyProvider>` and the
+ * billing/auth modals open automatically off the context state that
+ * `authenticatedFetch` sets — no manual `setError`/`isOpen` wiring:
+ *
+ *   - a 402/429 billing restriction → `<RestrictionModal>` (add funds / add card)
+ *   - a 401 that survives a silent-refresh retry → `<AuthModal>` (re-auth)
+ *
+ * All wiring (clientId, gatewayUrl, getAccessToken, open/close) is read from
+ * context, so this component takes no required props.
+ */
+export declare function HyperyModals({ branding, showSocial, showEmailPassword, onRetry, }?: HyperyModalsProps): React.JSX.Element;

package/dist/components/HyperyModals.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHyperyAuth } from "../lib/context";
+import { AuthModal } from "./AuthModal";
+import { RestrictionModal } from "./RestrictionModal";
+/**
+ * Turnkey modal host. Mount this ONCE anywhere inside `<HyperyProvider>` and the
+ * billing/auth modals open automatically off the context state that
+ * `authenticatedFetch` sets — no manual `setError`/`isOpen` wiring:
+ *
+ *   - a 402/429 billing restriction → `<RestrictionModal>` (add funds / add card)
+ *   - a 401 that survives a silent-refresh retry → `<AuthModal>` (re-auth)
+ *
+ * All wiring (clientId, gatewayUrl, getAccessToken, open/close) is read from
+ * context, so this component takes no required props.
+ */
+export function HyperyModals({ branding, showSocial, showEmailPassword, onRetry, } = {}) {
+    const { clientId, gatewayUrl, getAccessToken, restriction, clearRestriction, authRequired, clearAuthRequired, } = useHyperyAuth();
+    // ParsedError → RestrictionModal's RestrictionError (data carries the billing
+    // fields: limit/current/available/resetsAt/...).
+    const restrictionError = restriction
+        ? {
+            code: restriction.code,
+            message: restriction.message,
+            type: restriction.type,
+            ...restriction.data,
+        }
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx(RestrictionModal, { error: restrictionError, clientId: clientId, gatewayUrl: gatewayUrl, getAccessToken: getAccessToken, onClose: clearRestriction, onRetry: onRetry }), _jsx(AuthModal, { isOpen: authRequired, onClose: clearAuthRequired, branding: branding, showSocial: showSocial, showEmailPassword: showEmailPassword })] }));
+}

package/dist/components/InsufficientCreditsAlert.d.ts

@@ -0,0 +1,11 @@
+import { ParsedError } from '../types';
+export interface InsufficientCreditsAlertProps {
+    error: ParsedError;
+    onAddCredits?: () => void;
+    className?: string;
+}
+/**
+ * Alert component for insufficient credits errors
+ * Displays a user-friendly message with option to add credits
+ */
+export declare function InsufficientCreditsAlert({ error, onAddCredits, className, }: InsufficientCreditsAlertProps): import("react").JSX.Element | null;

package/dist/components/InsufficientCreditsAlert.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Alert component for insufficient credits errors
+ * Displays a user-friendly message with option to add credits
+ */
+export function InsufficientCreditsAlert({ error, onAddCredits, className = '', }) {
+    if (!error.isInsufficientCredits)
+        return null;
+    const data = error.data;
+    return (_jsx("div", { className: `rounded-lg border border-red-200 bg-red-50 p-4 ${className}`, role: "alert", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("svg", { className: "h-5 w-5 text-red-400", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z", clipRule: "evenodd" }) }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "Insufficient Credits" }), _jsxs("div", { className: "mt-2 text-sm text-red-700", children: [_jsx("p", { children: error.message }), data.available !== undefined && data.required !== undefined && (_jsxs("p", { className: "mt-1", children: ["You have ", _jsx("strong", { children: data.available }), " credits, but need", ' ', _jsx("strong", { children: data.required }), " credits."] }))] }), onAddCredits && (_jsx("div", { className: "mt-4", children: _jsx("button", { type: "button", onClick: onAddCredits, className: "text-sm font-medium text-red-800 hover:text-red-900 underline", children: "Add credits \u2192" }) }))] })] }) }));
+}

package/dist/components/ModernAuthForm.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ModernAuthForm Component
+ * Beautiful, embeddable authentication form
+ * Inspired by modern SaaS login pages
+ * Can be used standalone on login/signup pages
+ */
+import React from 'react';
+export interface ModernAuthFormProps {
+    /** Auth mode: signin or signup */
+    mode?: 'signin' | 'signup';
+    /** Allow switching between signin/signup */
+    allowModeSwitch?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Show card wrapper */
+    showCard?: boolean;
+    /** Show social OAuth buttons */
+    showSocial?: boolean;
+    /** Show email/password form */
+    showEmailPassword?: boolean;
+    /** Callback after successful auth */
+    onSuccess?: () => void;
+    /** Callback on error */
+    onError?: (error: string) => void;
+    /** Custom branding */
+    branding?: {
+        logo?: string;
+        appName?: string;
+        primaryColor?: string;
+    };
+}
+/**
+ * Modern authentication form with beautiful design
+ * Perfect for dedicated login/signup pages
+ *
+ * @example
+ * ```tsx
+ * // On login page
+ * <ModernAuthForm
+ *   mode="signin"
+ *   showCard
+ *   allowModeSwitch
+ *   onSuccess={() => router.push('/dashboard')}
+ *   branding={{
+ *     logo: '/logo.png',
+ *     appName: 'My App',
+ *     primaryColor: '#8b5cf6'
+ *   }}
+ * />
+ * ```
+ */
+export declare function ModernAuthForm({ mode: initialMode, allowModeSwitch, className, showCard, showSocial, showEmailPassword, onSuccess, onError, branding, }: ModernAuthFormProps): React.JSX.Element;

package/dist/components/ModernAuthForm.js

@@ -0,0 +1,83 @@
+/**
+ * ModernAuthForm Component
+ * Beautiful, embeddable authentication form
+ * Inspired by modern SaaS login pages
+ * Can be used standalone on login/signup pages
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useHyperyAuth } from '../lib/context';
+/**
+ * Modern authentication form with beautiful design
+ * Perfect for dedicated login/signup pages
+ *
+ * @example
+ * ```tsx
+ * // On login page
+ * <ModernAuthForm
+ *   mode="signin"
+ *   showCard
+ *   allowModeSwitch
+ *   onSuccess={() => router.push('/dashboard')}
+ *   branding={{
+ *     logo: '/logo.png',
+ *     appName: 'My App',
+ *     primaryColor: '#8b5cf6'
+ *   }}
+ * />
+ * ```
+ */
+export function ModernAuthForm({ mode: initialMode = 'signin', allowModeSwitch = true, className = '', showCard = true, showSocial = true, showEmailPassword = true, onSuccess, onError, branding, }) {
+    const { login } = useHyperyAuth();
+    const [mode, setMode] = useState(initialMode);
+    const [isLoading, setIsLoading] = useState(false);
+    const [loadingProvider, setLoadingProvider] = useState(null);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [name, setName] = useState('');
+    const [error, setError] = useState('');
+    const handleSocialSignIn = (provider) => {
+        setLoadingProvider(provider);
+        setError('');
+        try {
+            login();
+            if (onSuccess) {
+                onSuccess();
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage);
+            }
+            setLoadingProvider(null);
+        }
+    };
+    const handleEmailSubmit = (e) => {
+        e.preventDefault();
+        setError('');
+        setIsLoading(true);
+        if (!email || !password) {
+            setError('Please fill in all fields');
+            setIsLoading(false);
+            return;
+        }
+        if (mode === 'signup' && !name) {
+            setError('Please enter your name');
+            setIsLoading(false);
+            return;
+        }
+        setError('Direct email authentication coming soon. Please use social sign-in.');
+        setIsLoading(false);
+    };
+    const primaryColor = branding?.primaryColor || '#8b5cf6';
+    const formContent = (_jsxs("div", { className: !showCard ? className : '', children: [_jsxs("div", { className: "text-center mb-8", children: [branding?.logo && (_jsx("img", { src: branding.logo, alt: "Logo", className: "h-12 mx-auto mb-6" })), _jsx("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-3", children: mode === 'signin' ? 'Welcome back' : 'Create your account' }), _jsx("p", { className: "text-gray-600 dark:text-gray-400", children: mode === 'signin'
+                            ? `Sign in to ${branding?.appName || 'continue'}`
+                            : `Get started with ${branding?.appName || 'your account'}` })] }), error && (_jsxs("div", { className: "mb-6 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 text-sm flex items-start gap-3", children: [_jsx("svg", { className: "w-5 h-5 flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), _jsx("span", { children: error })] })), showSocial && (_jsxs("div", { className: "space-y-3 mb-6", children: [_jsxs("button", { onClick: () => handleSocialSignIn('google'), disabled: !!loadingProvider, className: "w-full bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white py-3.5 px-4 rounded-xl flex items-center justify-center gap-3 font-medium transition-all disabled:opacity-50 shadow-sm hover:shadow-md", children: [loadingProvider === 'google' ? (_jsx("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-transparent rounded-full animate-spin" })) : (_jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] })), _jsx("span", { children: "Continue with Google" })] }), _jsxs("button", { onClick: () => handleSocialSignIn('github'), disabled: !!loadingProvider, className: "w-full bg-gray-900 dark:bg-gray-800 hover:bg-gray-800 dark:hover:bg-gray-750 text-white py-3.5 px-4 rounded-xl flex items-center justify-center gap-3 font-medium transition-all disabled:opacity-50 shadow-sm hover:shadow-md", children: [loadingProvider === 'github' ? (_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" })) : (_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }) })), _jsx("span", { children: "Continue with GitHub" })] })] })), showSocial && showEmailPassword && (_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "w-full border-t border-gray-300 dark:border-gray-700" }) }), _jsx("div", { className: "relative flex justify-center text-sm", children: _jsx("span", { className: "px-4 bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400 font-medium", children: "Or continue with email" }) })] })), showEmailPassword && (_jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-5", children: [mode === 'signup' && (_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Full name" }), _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all", style: { '--tw-ring-color': primaryColor }, placeholder: "John Doe", disabled: isLoading })] })), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Email address" }), _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all", style: { '--tw-ring-color': primaryColor }, placeholder: "you@example.com", disabled: isLoading, autoComplete: "email" })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Password" }), mode === 'signin' && (_jsx("a", { href: "/forgot-password", className: "text-sm font-medium hover:underline", style: { color: primaryColor }, children: "Forgot?" }))] }), _jsx("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), className: "w-full px-4 py-3.5 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-offset-2 focus:outline-none transition-all", style: { '--tw-ring-color': primaryColor }, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: isLoading, autoComplete: mode === 'signin' ? 'current-password' : 'new-password' })] }), _jsx("button", { type: "submit", disabled: isLoading, className: "w-full py-3.5 px-4 rounded-xl font-semibold text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-[1.02] active:scale-[0.98]", style: { backgroundColor: primaryColor }, children: isLoading ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" }), mode === 'signin' ? 'Signing in...' : 'Creating account...'] })) : (mode === 'signin' ? 'Sign in' : 'Create account') })] })), allowModeSwitch && (_jsxs("div", { className: "mt-6 text-center text-sm", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400", children: mode === 'signin' ? "Don't have an account?" : 'Already have an account?' }), ' ', _jsx("button", { onClick: () => setMode(mode === 'signin' ? 'signup' : 'signin'), className: "font-semibold hover:underline", style: { color: primaryColor }, children: mode === 'signin' ? 'Sign up' : 'Sign in' })] })), _jsxs("div", { className: "mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 text-center text-xs text-gray-500 dark:text-gray-500", children: ["By continuing, you agree to our", ' ', _jsx("a", { href: "/terms", className: "hover:underline font-medium", style: { color: primaryColor }, children: "Terms of Service" }), ' ', "and", ' ', _jsx("a", { href: "/privacy", className: "hover:underline font-medium", style: { color: primaryColor }, children: "Privacy Policy" })] })] }));
+    if (!showCard) {
+        return _jsx("div", { className: className, children: formContent });
+    }
+    return (_jsx("div", { className: `bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-10 max-w-md w-full ${className}`, children: formContent }));
+}

package/dist/components/RestrictionModal.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+export interface RestrictionError {
+    code: string;
+    message: string;
+    type?: string;
+    limitType?: 'daily' | 'monthly' | 'total';
+    limit?: number;
+    current?: number;
+    requested?: number;
+    resetsAt?: string;
+    available?: number;
+    required?: number;
+    [key: string]: any;
+}
+interface RestrictionModalProps {
+    error: RestrictionError | null;
+    /** OAuth clientId of the app making the requests. Preferred name. */
+    clientId?: string;
+    /**
+     * @deprecated Use `clientId` instead. This prop is actually the OAuth clientId,
+     * not the DB app id. Kept as a backward-compatible alias.
+     */
+    appId?: string;
+    gatewayUrl: string;
+    getAccessToken: () => Promise<string | null>;
+    onClose: () => void;
+    onRetry?: () => void;
+    /** Called after funds/card are successfully added. */
+    onFunded?: () => void;
+    className?: string;
+    overlayClassName?: string;
+}
+/**
+ * Mode-aware restriction / funds modal.
+ *
+ * Reads the team's wallet state (GET /api/wallet/state) and renders the CTA that
+ * matches the billing lever:
+ *   - metered + no card → "Add a payment method" (Stripe-hosted Checkout)
+ *   - metered + declined → "Update payment method"
+ *   - prepaid           → 1-click "Add $X" (charges the saved card in place)
+ */
+export declare function RestrictionModal({ error, clientId, appId, gatewayUrl, getAccessToken, onClose, onRetry, onFunded, className, overlayClassName, }: RestrictionModalProps): React.JSX.Element | null;
+export {};

package/dist/components/RestrictionModal.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+const QUICK_AMOUNTS = [10, 25, 50];
+/**
+ * Mode-aware restriction / funds modal.
+ *
+ * Reads the team's wallet state (GET /api/wallet/state) and renders the CTA that
+ * matches the billing lever:
+ *   - metered + no card → "Add a payment method" (Stripe-hosted Checkout)
+ *   - metered + declined → "Update payment method"
+ *   - prepaid           → 1-click "Add $X" (charges the saved card in place)
+ */
+export function RestrictionModal({ error, clientId, appId, gatewayUrl, getAccessToken, onClose, onRetry, onFunded, className = '', overlayClassName = '', }) {
+    // `appId` is a deprecated alias for `clientId`; prefer `clientId` when both are set.
+    const resolvedClientId = clientId ?? appId;
+    const [wallet, setWallet] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [fetchError, setFetchError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const [funded, setFunded] = useState(false);
+    const authHeaders = useCallback(async () => {
+        const token = await getAccessToken();
+        if (!token)
+            throw new Error('Not authenticated');
+        const headers = {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        };
+        if (resolvedClientId)
+            headers['X-Hypery-Client-Id'] = resolvedClientId;
+        return headers;
+    }, [getAccessToken, resolvedClientId]);
+    const loadWallet = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            setFetchError(null);
+            const headers = await authHeaders();
+            const res = await fetch(`${gatewayUrl}/api/wallet/state`, { headers });
+            if (!res.ok)
+                throw new Error(`Failed to load wallet (${res.status})`);
+            setWallet((await res.json()));
+        }
+        catch (err) {
+            setFetchError(err instanceof Error ? err.message : 'Failed to load wallet');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [authHeaders, gatewayUrl]);
+    useEffect(() => {
+        if (!error)
+            return;
+        void loadWallet();
+    }, [error, loadWallet]);
+    // 1-click: charge the saved card and credit the team.
+    const addFunds = useCallback(async (usd) => {
+        setBusy(true);
+        setActionError(null);
+        try {
+            const headers = await authHeaders();
+            const res = await fetch(`${gatewayUrl}/api/wallet/topup`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ amount: usd }),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok || !body?.success) {
+                throw new Error(body?.error || `Top-up failed (${res.status})`);
+            }
+            await loadWallet();
+            setFunded(true);
+            onFunded?.();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : 'Top-up failed');
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [authHeaders, gatewayUrl, loadWallet, onFunded]);
+    // Stripe-hosted Checkout (setup) in a popup — no Stripe Elements here.
+    const addPaymentMethod = useCallback(async () => {
+        setBusy(true);
+        setActionError(null);
+        try {
+            const headers = await authHeaders();
+            const res = await fetch(`${gatewayUrl}/api/payments/stripe/checkout-setup`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({}),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok || !body?.url) {
+                throw new Error(body?.error || `Could not start checkout (${res.status})`);
+            }
+            const popup = window.open(body.url, 'hypery-add-card', 'width=480,height=720');
+            const added = await new Promise((resolve) => {
+                let settled = false;
+                const finish = (ok) => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    window.removeEventListener('message', onMessage);
+                    clearInterval(poll);
+                    resolve(ok);
+                };
+                // Only trust the completion message from the gateway's own origin.
+                const expectedOrigin = (() => {
+                    try {
+                        return new URL(gatewayUrl).origin;
+                    }
+                    catch {
+                        return typeof window !== 'undefined' ? window.location.origin : '';
+                    }
+                })();
+                const onMessage = (event) => {
+                    if (event.origin !== expectedOrigin)
+                        return;
+                    if (event?.data?.type === 'hypery:payment-method') {
+                        finish(event.data.status === 'added');
+                    }
+                };
+                window.addEventListener('message', onMessage);
+                const poll = setInterval(() => {
+                    if (popup && popup.closed)
+                        finish(false);
+                }, 700);
+            });
+            await loadWallet();
+            if (added)
+                onFunded?.();
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : 'Could not add payment method');
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [authHeaders, gatewayUrl, loadWallet, onFunded]);
+    if (!error)
+        return null;
+    const openSettings = (path) => {
+        if (!path)
+            return;
+        window.open(`${gatewayUrl}${path}`, '_blank');
+    };
+    const isSpendingLimit = error.code === 'SPENDING_LIMIT_EXCEEDED';
+    const isPaymentDeclined = error.code === 'PAYMENT_DECLINED';
+    const isPaymentMethodRequired = error.code === 'PAYMENT_METHOD_REQUIRED';
+    const title = funded
+        ? 'You’re all set'
+        : isPaymentMethodRequired
+            ? 'Add a payment method'
+            : isPaymentDeclined
+                ? 'Payment failed'
+                : isSpendingLimit
+                    ? 'Spending limit reached'
+                    : 'Add funds';
+    const mode = wallet?.mode;
+    const hasCard = !!wallet?.paymentMethod?.exists;
+    return (_jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm ${overlayClassName}`, children: _jsxs("div", { className: `relative w-full max-w-md bg-gray-900 border border-gray-700 rounded-lg shadow-2xl ${className}`, children: [_jsx("button", { onClick: onClose, className: "absolute top-4 right-4 text-gray-400 hover:text-gray-100 transition-colors z-10", "aria-label": "Close", children: _jsx("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-2xl font-bold text-center mb-4 text-white", children: title }), isLoading && (_jsxs("div", { className: "flex items-center justify-center py-8", children: [_jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" }), _jsx("span", { className: "ml-3 text-gray-400", children: "Loading your account\u2026" })] })), !isLoading && (_jsxs(_Fragment, { children: [wallet && (_jsxs("div", { className: "bg-gray-800 border border-gray-700 rounded-lg p-4 mb-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm text-gray-400", children: "Available credits" }), _jsx("span", { className: "text-2xl font-bold text-white", children: wallet.balance.current })] }), _jsxs("div", { className: "flex justify-between items-center mt-1", children: [_jsx("span", { className: "text-xs text-gray-500", children: mode === 'metered' ? 'Pay-as-you-go billing' : 'Prepaid balance' }), wallet.paymentMethod.exists && (_jsxs("span", { className: "text-xs text-gray-500", children: [wallet.paymentMethod.brand, " \u2022\u2022\u2022\u2022 ", wallet.paymentMethod.last4] }))] })] })), fetchError && (_jsxs("p", { className: "text-sm text-red-400 mb-4", children: ["\u26A0\uFE0F ", fetchError] })), actionError && (_jsxs("p", { className: "text-sm text-red-400 mb-4", children: ["\u26A0\uFE0F ", actionError] })), !funded && (_jsx("p", { className: "text-sm text-gray-400 text-center mb-5", children: error.message })), _jsxs("div", { className: "space-y-3", children: [funded ? (_jsx("button", { onClick: () => {
+                                                onRetry?.();
+                                                onClose();
+                                            }, className: "w-full px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors font-medium", children: "Continue" })) : isSpendingLimit ? (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => openSettings(wallet?.settingsUrls.billing), className: "w-full px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg transition-colors", children: "Manage spending limits" }), onRetry && (_jsx("button", { onClick: onRetry, className: "w-full px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg transition-colors", children: "Try again" }))] })) : mode === 'metered' || !hasCard || isPaymentMethodRequired || isPaymentDeclined ? (_jsxs(_Fragment, { children: [_jsx("button", { onClick: addPaymentMethod, disabled: busy, className: "w-full px-4 py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-60 text-white rounded-lg transition-colors font-medium", children: busy ? 'Opening secure checkout…' : hasCard ? 'Update payment method' : 'Add a payment method' }), mode === 'metered' && (_jsx("p", { className: "text-xs text-gray-500 text-center", children: "You\u2019ll be billed automatically as you use the service." })), onRetry && (_jsx("button", { onClick: onRetry, className: "w-full px-4 py-2 text-gray-400 hover:text-white text-sm transition-colors", children: "Try again" }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-3 gap-2", children: QUICK_AMOUNTS.map((usd) => (_jsxs("button", { onClick: () => addFunds(usd), disabled: busy, className: "px-3 py-3 bg-blue-600 hover:bg-blue-500 disabled:opacity-60 text-white rounded-lg transition-colors font-medium", children: ["$", usd] }, usd))) }), _jsx("button", { onClick: () => openSettings(wallet?.settingsUrls.topup), className: "w-full px-4 py-2 text-gray-400 hover:text-white text-sm transition-colors", children: "Other amount\u2026" })] })), !funded && (_jsx("button", { onClick: onClose, className: "w-full px-4 py-2 text-gray-500 hover:text-gray-300 text-sm transition-colors", children: "Close" }))] })] }))] })] }) }));
+}

package/dist/components/SignIn.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Sign In Component
+ * Similar to Clerk's <SignIn />
+ */
+import React from 'react';
+export interface SignInProps {
+    /** Button text */
+    buttonText?: string;
+    /** Custom className for styling */
+    className?: string;
+    /** Button style variant */
+    variant?: 'primary' | 'secondary' | 'outline';
+    /** Redirect path after sign in */
+    redirectTo?: string;
+    /** Show loading state */
+    loading?: boolean;
+}
+/**
+ * Pre-built sign-in button component
+ *
+ * @example
+ * ```tsx
+ * <SignIn buttonText="Sign in with Hypery" />
+ * ```
+ */
+export declare function SignIn({ buttonText, className, variant, redirectTo, loading, }: SignInProps): React.JSX.Element;

package/dist/components/SignIn.js

@@ -0,0 +1,47 @@
+/**
+ * Sign In Component
+ * Similar to Clerk's <SignIn />
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHyperyAuth } from '../lib/context';
+/**
+ * Pre-built sign-in button component
+ *
+ * @example
+ * ```tsx
+ * <SignIn buttonText="Sign in with Hypery" />
+ * ```
+ */
+export function SignIn({ buttonText = 'Sign in with Hypery', className, variant = 'primary', redirectTo, loading, }) {
+    const { login, isLoading } = useHyperyAuth();
+    const handleClick = () => {
+        if (redirectTo) {
+            sessionStorage.setItem('hypery_redirect_after_login', redirectTo);
+        }
+        login();
+    };
+    const isDisabled = isLoading || loading;
+    // Default styles based on variant
+    const getVariantStyles = () => {
+        switch (variant) {
+            case 'secondary':
+                return 'bg-gray-600 hover:bg-gray-700 text-white';
+            case 'outline':
+                return 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50';
+            default:
+                return 'bg-blue-600 hover:bg-blue-700 text-white';
+        }
+    };
+    const defaultStyles = `
+    inline-flex items-center justify-center
+    px-6 py-2.5
+    rounded-lg
+    font-medium
+    transition-colors
+    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed
+    ${getVariantStyles()}
+  `.replace(/\s+/g, ' ').trim();
+    return (_jsx("button", { onClick: handleClick, disabled: isDisabled, className: className || defaultStyles, type: "button", children: isDisabled ? 'Loading...' : buttonText }));
+}