@nozle-js/react 0.5.2 → 0.7.0

package/dist/index.js

@@ -1,301 +1,247 @@
-import React, { createContext, useMemo, useState, useEffect, useContext } from 'react';
-import { Centrifuge } from 'centrifuge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import React, { createContext, useMemo, useContext, useState, useEffect, useCallback } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { EmbeddedCheckoutProvider, EmbeddedCheckout, Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 
 // src/provider.tsx
-function createClient(apiKey, baseUrl) {
+function createClient(publishableKey, baseUrl) {
   const base = baseUrl.replace(/\/+$/, "");
-  async function apiFetch(path, init) {
-    return fetch(`${base}${path}`, {
-      ...init,
-      headers: {
-        Authorization: `Bearer ${apiKey}`,
-        "Content-Type": "application/json",
-        ...init?.headers
-      }
-    });
-  }
   return {
-    apiKey,
+    publishableKey,
     baseUrl: base,
-    fetch: apiFetch,
-    async can(customerId, feature) {
-      const res = await apiFetch(`/api/v1/can?customer_id=${encodeURIComponent(customerId)}&feature=${encodeURIComponent(feature)}`);
-      if (!res.ok) return { allowed: false, remaining: null, limit: null, used: 0 };
-      return res.json();
+    catalogFetch(path, init) {
+      return fetch(`${base}${path}`, {
+        ...init,
+        headers: {
+          Authorization: `Bearer ${publishableKey}`,
+          "Content-Type": "application/json",
+          ...init?.headers
+        }
+      });
     }
   };
 }
-var BillingContext = createContext({
-  client: null,
-  workspaceId: "",
-  centrifugoUrl: "",
-  centrifugoToken: null
-});
+var BillingContext = createContext(null);
 function BillingProvider({
-  apiKey,
+  publishableKey,
+  createCheckout,
   baseUrl = "https://api.nozle.app",
-  workspaceId = "",
-  centrifugoUrl,
   children
 }) {
-  const client = useMemo(() => createClient(apiKey, baseUrl), [apiKey, baseUrl]);
-  const [centrifugoToken, setCentrifugoToken] = useState(null);
-  const resolvedCentrifugoUrl = centrifugoUrl ?? (typeof process !== "undefined" ? process.env["NEXT_PUBLIC_CENTRIFUGO_URL"] ?? "" : "");
-  useEffect(() => {
-    let cancelled = false;
-    async function fetchCentrifugoToken() {
-      try {
-        const response = await client.fetch("/api/v1/auth/centrifugo-token");
-        if (!response.ok) return;
-        const data = await response.json();
-        if (!cancelled && data.token) {
-          setCentrifugoToken(data.token);
-        }
-      } catch {
-      }
-    }
-    void fetchCentrifugoToken();
-    return () => {
-      cancelled = true;
-    };
-  }, [client]);
-  const contextValue = {
-    client,
-    workspaceId,
-    centrifugoUrl: resolvedCentrifugoUrl,
-    centrifugoToken
-  };
+  if (!publishableKey.startsWith("pk_")) {
+    throw new Error("BillingProvider publishableKey must be a publishable key (pk_)");
+  }
+  const client = useMemo(
+    () => createClient(publishableKey, baseUrl),
+    [publishableKey, baseUrl]
+  );
+  const contextValue = useMemo(
+    () => ({ client, createCheckout }),
+    [client, createCheckout]
+  );
   return React.createElement(BillingContext.Provider, { value: contextValue }, children);
 }
-function useBillingContext() {
+function useOptionalBillingContext() {
   return useContext(BillingContext);
 }
+function useBillingContext() {
+  const context = useOptionalBillingContext();
+  if (!context) {
+    throw new Error("useBillingContext must be used within a BillingProvider");
+  }
+  return context;
+}
 function useNozleClient() {
-  const { client } = useBillingContext();
-  if (!client) throw new Error("useNozleClient must be used within <BillingProvider>");
-  return client;
+  return useBillingContext().client;
 }
-var initialState = {
-  allowed: false,
-  remaining: null,
-  limit: null,
-  loading: true,
-  error: null
-};
-function useCan(customerId, featureKey) {
-  const { client, workspaceId, centrifugoUrl, centrifugoToken } = useBillingContext();
-  const [state, setState] = useState(initialState);
+function usePlans() {
+  const { client } = useBillingContext();
+  const [plans, setPlans] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
-    if (!client) {
-      setState({
-        ...initialState,
-        loading: false,
-        error: "No client in context"
-      });
-      return;
-    }
     let cancelled = false;
-    setState(initialState);
-    async function checkEntitlement() {
-      try {
-        const result = await client.can(customerId, featureKey);
-        if (!cancelled) {
-          setState({
-            allowed: result.allowed,
-            remaining: result.remaining,
-            limit: result.limit,
-            loading: false,
-            error: result.error ?? null
-          });
-        }
-      } catch (err) {
-        if (!cancelled) {
-          const message = err instanceof Error ? err.message : "Unknown error";
-          setState({
-            allowed: false,
-            remaining: null,
-            limit: null,
-            loading: false,
-            error: message
-          });
-        }
-      }
-    }
-    void checkEntitlement();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId, featureKey]);
-  useEffect(() => {
-    if (!centrifugoToken || !centrifugoUrl || !workspaceId) {
+    if (!client) {
+      setIsLoading(false);
       return;
     }
-    const cf = new Centrifuge(centrifugoUrl, {
-      token: centrifugoToken
-    });
-    const channel = `workspace:${workspaceId}:entitlements`;
-    const sub = cf.newSubscription(channel);
-    sub.on("publication", (ctx) => {
-      const data = ctx.data;
-      const pubCustomerId = data.customerId ?? data.customer_id;
-      const pubFeatureKey = data.featureKey ?? data.feature_key;
-      if (pubCustomerId === customerId && pubFeatureKey === featureKey) {
-        setState((prev) => ({
-          ...prev,
-          allowed: data.allowed ?? prev.allowed,
-          remaining: data.remaining !== void 0 ? data.remaining : prev.remaining,
-          limit: data.limit !== void 0 ? data.limit : prev.limit
-        }));
-      }
+    void client.catalogFetch("/api/v1/plans").then(async (response) => {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = await response.json();
+      if (!cancelled) setPlans(data.plans ?? []);
+    }).finally(() => {
+      if (!cancelled) setIsLoading(false);
     });
-    sub.subscribe();
-    cf.connect();
     return () => {
-      sub.unsubscribe();
-      cf.disconnect();
+      cancelled = true;
     };
-  }, [centrifugoToken, centrifugoUrl, workspaceId, customerId, featureKey]);
-  return state;
+  }, [client]);
+  return { plans, isLoading };
 }
-function useUsage(customerId, metricKey) {
-  const { client } = useBillingContext();
-  const [state, setState] = useState({
-    value: null,
-    loading: true,
-    error: null
-  });
-  useEffect(() => {
-    if (!client) {
-      setState({ value: null, loading: false, error: "No client in context" });
-      return;
-    }
-    let cancelled = false;
-    async function fetchUsage() {
+
+// src/components/billing/checkout-navigation.ts
+function navigateToCheckout(url, location = window.location) {
+  location.assign(url);
+}
+
+// src/hooks/use-checkout.ts
+function useCheckout() {
+  const { createCheckout } = useBillingContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [checkout, setCheckout] = useState(null);
+  const fetchClientSecret = useCallback(
+    async (planCode, returnUrl) => {
+      setIsLoading(true);
+      setError(null);
       try {
-        const clientInternal = client;
-        const apiKey = clientInternal.apiKey ?? "";
-        const baseUrl = clientInternal.baseUrl ?? "https://api.nozle.app";
-        const timeout = clientInternal.timeout ?? 5e3;
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-        const response = await fetch(
-          `${baseUrl}/api/v1/usage/${customerId}/${metricKey}`,
-          {
-            method: "GET",
-            headers: {
-              Authorization: `Bearer ${apiKey}`
-            },
-            signal: controller.signal
-          }
-        );
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        if (!createCheckout) {
+          throw new Error("BillingProvider createCheckout callback is required for checkout");
         }
-        const data = await response.json();
-        if (!cancelled) {
-          setState({
-            value: data.value ?? data.total ?? null,
-            loading: false,
-            error: null
-          });
+        const result = await createCheckout({
+          planCode,
+          returnUrl: returnUrl ?? window.location.href
+        });
+        setCheckout(result);
+        if ("client_secret" in result || "clientSecret" in result) {
+          const clientSecret = result.client_secret ?? result.clientSecret;
+          if (clientSecret) return clientSecret;
+        }
+        if ("url" in result && result.url) {
+          navigateToCheckout(result.url);
+          return null;
         }
-      } catch (err) {
-        if (!cancelled) {
-          const message = err instanceof Error ? err.message : "Unknown error";
-          setState({ value: null, loading: false, error: message });
+        if ("type" in result && (result.type === "completed" || result.type === "scheduled")) {
+          return null;
         }
+        throw new Error("Checkout response did not include a supported result type");
+      } catch (cause) {
+        const checkoutError = cause instanceof Error ? cause : new Error(String(cause));
+        setError(checkoutError);
+        throw checkoutError;
+      } finally {
+        setIsLoading(false);
       }
-    }
-    void fetchUsage();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId, metricKey]);
-  return state;
+    },
+    [createCheckout]
+  );
+  return { fetchClientSecret, checkout, isLoading, error };
 }
-function useCredits(customerId) {
-  const { client } = useBillingContext();
-  const [state, setState] = useState({
-    balance: null,
-    loading: true,
-    error: null
-  });
-  useEffect(() => {
-    if (!client) {
-      setState({
-        balance: null,
-        loading: false,
-        error: "No client in context"
-      });
+function loadRazorpayScript() {
+  return new Promise((resolve, reject) => {
+    if (document.getElementById("razorpay-js")) {
+      resolve();
       return;
     }
-    let cancelled = false;
-    async function fetchCredits() {
-      try {
-        const clientInternal = client;
-        const apiKey = clientInternal.apiKey ?? "";
-        const baseUrl = clientInternal.baseUrl ?? "https://api.nozle.app";
-        const timeout = clientInternal.timeout ?? 5e3;
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-        const response = await fetch(
-          `${baseUrl}/api/v1/credits/${customerId}/balance`,
-          {
-            method: "GET",
-            headers: {
-              Authorization: `Bearer ${apiKey}`
-            },
-            signal: controller.signal
-          }
-        );
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setState({
-            balance: data.balance ?? data.amount ?? null,
-            loading: false,
-            error: null
-          });
-        }
-      } catch (err) {
-        if (!cancelled) {
-          const message = err instanceof Error ? err.message : "Unknown error";
-          setState({ balance: null, loading: false, error: message });
-        }
-      }
-    }
-    void fetchCredits();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId]);
-  return state;
+    const script = document.createElement("script");
+    script.id = "razorpay-js";
+    script.src = "https://checkout.razorpay.com/v1/checkout.js";
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Razorpay.js"));
+    document.body.appendChild(script);
+  });
 }
-var BillingPortalContext = createContext(
-  null
-);
-function useBillingPortal() {
-  const ctx = useContext(BillingPortalContext);
-  if (!ctx) {
-    throw new Error(
-      "useBillingPortal must be used inside BillingPortalProvider"
-    );
+async function handleCheckoutResult(result, options) {
+  if ("type" in result && result.type === "scheduled") {
+    options.onScheduled?.(result);
+    return;
   }
-  return ctx;
+  if ("type" in result && result.type === "completed") {
+    options.onComplete?.(result);
+    return;
+  }
+  if ("type" in result && result.type === "razorpay") {
+    if (!options.razorpayKeyId) throw new Error("razorpayKeyId is required for Razorpay checkout");
+    await loadRazorpayScript();
+    const checkout = new window.Razorpay({
+      key: options.razorpayKeyId,
+      order_id: result.orderId,
+      handler: (response) => options.onSuccess?.(response.razorpay_payment_id)
+    });
+    checkout.open();
+    return;
+  }
+  if ("url" in result && result.url) {
+    window.location.assign(result.url);
+    return;
+  }
+  if ("type" in result && result.type === "stripe") {
+    const clientSecret = result.clientSecret ?? result.client_secret;
+    if (clientSecret && options.onStripeClientSecret) {
+      options.onStripeClientSecret(clientSecret);
+      return;
+    }
+    if (clientSecret) throw new Error("onStripeClientSecret is required for embedded Stripe checkout");
+    throw new Error("Stripe checkout did not include a URL or client secret");
+  }
+  throw new Error("Unknown checkout response format");
 }
-function BillingPortalProvider({
-  customerId,
-  apiKey,
-  children
+function CheckoutButton({
+  planCode,
+  returnUrl,
+  label = "Get Started",
+  className,
+  style,
+  onError,
+  razorpayKeyId,
+  onStripeClientSecret,
+  onSuccess,
+  onComplete,
+  onScheduled
 }) {
-  return /* @__PURE__ */ jsx(BillingPortalContext.Provider, { value: { customerId, apiKey }, children });
+  const { createCheckout } = useBillingContext();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  async function handleClick() {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!createCheckout) {
+        throw new Error("BillingProvider createCheckout callback is required for checkout");
+      }
+      const result = await createCheckout({
+        planCode,
+        returnUrl: returnUrl ?? window.location.href
+      });
+      await handleCheckoutResult(result, {
+        razorpayKeyId,
+        onStripeClientSecret,
+        onSuccess,
+        onComplete,
+        onScheduled
+      });
+    } catch (cause) {
+      const checkoutError = cause instanceof Error ? cause : new Error("Checkout failed");
+      setError(checkoutError);
+      onError?.(checkoutError);
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void handleClick(),
+        disabled: loading,
+        className,
+        style: {
+          padding: "0.75rem 1.5rem",
+          borderRadius: "var(--nozle-radius, 0.5rem)",
+          border: "none",
+          background: "var(--nozle-primary, var(--primary))",
+          color: "var(--nozle-primary-foreground, var(--primary-foreground))",
+          cursor: loading ? "not-allowed" : "pointer",
+          fontWeight: 500,
+          opacity: loading ? 0.7 : 1,
+          ...style
+        },
+        "aria-busy": loading,
+        children: loading ? "Loading..." : label
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { role: "alert", children: error.message })
+  ] });
 }
 var SYMBOLS = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5" };
 function fmtPrice(cents, cur) {
@@ -547,28 +493,38 @@ function Skeleton() {
   ] }, i)) });
 }
 function PricingTable({
-  customerId,
   currentPlanCode,
   plans: propPlans,
   features,
   onSelect,
+  returnUrl,
+  onStripeClientSecret,
+  onCheckoutResult,
+  onCheckoutError,
   showToggle = true,
   highlightPlan,
   className,
   enterpriseEmail
 }) {
-  const client = useNozleClient();
+  const billing = useOptionalBillingContext();
+  const client = billing?.client;
   const [plans, setPlans] = useState(propPlans ?? []);
   const [currentPlan, setCurrentPlan] = useState(currentPlanCode ?? null);
   const [isAnnual, setIsAnnual] = useState(false);
   const [loading, setLoading] = useState(!propPlans);
+  const [checkoutError, setCheckoutError] = useState(null);
   useEffect(() => {
     if (propPlans) {
       setPlans(propPlans);
       return;
     }
+    if (!client) {
+      setLoading(false);
+      setCheckoutError("BillingProvider with a publishableKey is required to load plans");
+      return;
+    }
     let cancelled = false;
-    client.fetch("/api/v1/plans").then(async (res) => {
+    client.catalogFetch("/api/v1/plans").then(async (res) => {
       if (!cancelled && res.ok) {
         const data = await res.json();
         setPlans(data.plans || []);
@@ -581,23 +537,30 @@ function PricingTable({
     };
   }, [client, propPlans]);
   useEffect(() => {
-    if (currentPlanCode !== void 0) {
-      setCurrentPlan(currentPlanCode);
+    if (currentPlanCode !== void 0) setCurrentPlan(currentPlanCode);
+  }, [currentPlanCode]);
+  async function selectPlan(plan) {
+    setCheckoutError(null);
+    if (onSelect) {
+      onSelect(plan);
       return;
     }
-    if (!customerId) return;
-    let cancelled = false;
-    client.fetch(`/api/v1/billing/status?customer_id=${encodeURIComponent(customerId)}`).then(async (res) => {
-      if (!cancelled && res.ok) {
-        const data = await res.json();
-        setCurrentPlan(data.plan ?? data.planName ?? null);
+    try {
+      if (!billing?.createCheckout) {
+        throw new Error("BillingProvider createCheckout callback is required for checkout");
       }
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId, currentPlanCode]);
+      const result = await billing.createCheckout({
+        planCode: plan.code,
+        returnUrl: returnUrl ?? window.location.href
+      });
+      onCheckoutResult?.(result);
+      await handleCheckoutResult(result, { onStripeClientSecret });
+    } catch (cause) {
+      const error = cause instanceof Error ? cause : new Error("Checkout failed");
+      setCheckoutError(error.message);
+      onCheckoutError?.(error);
+    }
+  }
   const hasAnnual = plans.some((p) => p.interval === "yearly");
   const filtered = showToggle && hasAnnual ? plans.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : plans;
   if (loading) return /* @__PURE__ */ jsx(Skeleton, {});
@@ -607,6 +570,7 @@ function PricingTable({
     background: C.bg
   }, children: [
     showToggle && hasAnnual && /* @__PURE__ */ jsx(Toggle, { isAnnual, onChange: setIsAnnual }),
+    checkoutError && /* @__PURE__ */ jsx("p", { role: "alert", children: checkoutError }),
     /* @__PURE__ */ jsx("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
@@ -620,7 +584,7 @@ function PricingTable({
         isHighlighted: highlightPlan === plan.code,
         isEnt: isEnterprise(plan),
         enterpriseEmail,
-        onSelect: onSelect ? () => onSelect(plan) : void 0
+        onSelect: () => void selectPlan(plan)
       },
       plan.code
     )) })
@@ -635,6 +599,7 @@ function PlanCard({
   description,
   isAnnual,
   isCurrent,
+  returnUrl,
   onSelect
 }) {
   const price = isAnnual ? annualPrice : monthlyPrice;
@@ -750,7 +715,10 @@ function PlanCard({
         onSelect && /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: onSelect,
+            onClick: () => onSelect?.({
+              planCode: id,
+              returnUrl: returnUrl ?? window.location.href
+            }),
             style: {
               background: isCurrent ? "var(--nozle-muted, var(--muted))" : "var(--nozle-primary, var(--primary))",
               color: isCurrent ? "var(--nozle-muted-foreground, var(--muted-foreground))" : "var(--nozle-primary-foreground, var(--primary-foreground))",
@@ -872,113 +840,8 @@ function PlanComparison({
     }
   );
 }
-function loadRazorpayScript() {
-  return new Promise((resolve, reject) => {
-    if (document.getElementById("razorpay-js")) {
-      resolve();
-      return;
-    }
-    const script = document.createElement("script");
-    script.id = "razorpay-js";
-    script.src = "https://checkout.razorpay.com/v1/checkout.js";
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error("Failed to load Razorpay.js"));
-    document.body.appendChild(script);
-  });
-}
-function CheckoutButton({
-  planId,
-  label = "Get Started",
-  apiBaseUrl = "https://api.nozle.app",
-  className,
-  style,
-  onError,
-  razorpayKeyId,
-  onStripeClientSecret,
-  onSuccess
-}) {
-  const { customerId, apiKey } = useBillingPortal();
-  const [loading, setLoading] = useState(false);
-  async function handleClick() {
-    setLoading(true);
-    try {
-      const response = await fetch(`${apiBaseUrl}/api/v1/checkout`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${apiKey}`
-        },
-        body: JSON.stringify({ planId, customerId })
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: Checkout failed`);
-      }
-      const data = await response.json();
-      if ("type" in data && data.type === "razorpay") {
-        if (!razorpayKeyId) {
-          onError?.(
-            new Error("razorpayKeyId prop required for Razorpay checkout")
-          );
-          return;
-        }
-        await loadRazorpayScript();
-        const rzp = new window.Razorpay({
-          key: razorpayKeyId,
-          order_id: data.orderId,
-          handler: (r) => {
-            onSuccess?.(r.razorpay_payment_id);
-          },
-          modal: {
-            ondismiss: () => setLoading(false)
-          }
-        });
-        rzp.open();
-      } else if ("type" in data && data.type === "stripe") {
-        if (data.url) {
-          window.location.href = data.url;
-        } else if (data.clientSecret) {
-          onStripeClientSecret?.(data.clientSecret);
-        } else {
-          onError?.(
-            new Error("Stripe checkout: no url or clientSecret in response")
-          );
-        }
-      } else if ("url" in data && data.url) {
-        window.location.href = data.url;
-      } else {
-        onError?.(new Error("Unknown checkout response format"));
-      }
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error("Checkout failed");
-      onError?.(error);
-    } finally {
-      setLoading(false);
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: () => void handleClick(),
-      disabled: loading,
-      className,
-      style: {
-        padding: "0.75rem 1.5rem",
-        borderRadius: "var(--nozle-radius, 0.5rem)",
-        border: "none",
-        background: "var(--nozle-primary, var(--primary))",
-        color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-        cursor: loading ? "not-allowed" : "pointer",
-        fontWeight: 500,
-        opacity: loading ? 0.7 : 1,
-        ...style
-      },
-      "aria-busy": loading,
-      children: loading ? "Loading..." : label
-    }
-  );
-}
 var CheckoutContext = createContext(null);
-function useCheckout() {
+function useCheckout2() {
   const ctx = useContext(CheckoutContext);
   if (ctx === null) {
     throw new Error("useCheckout must be used inside a <Checkout> component");
@@ -1009,7 +872,8 @@ function CheckoutInner({
   onError,
   onReady,
   className,
-  style
+  style,
+  children
 }) {
   const stripe = useStripe();
   const elements = useElements();
@@ -1059,7 +923,7 @@ function CheckoutInner({
       }
     ),
     error !== null && /* @__PURE__ */ jsx("p", { style: { color: "var(--nozle-destructive, #dc2626)", margin: "0.5rem 0 0" }, children: error.message }),
-    /* @__PURE__ */ jsx(
+    children ?? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1089,16 +953,25 @@ function Checkout({
   stripeAccount,
   submitLabel,
   onSuccess,
+  onComplete,
   onError,
   onReady,
   className,
-  style
+  style,
+  children
 }) {
   const stripePromise = useMemo(
     () => loadStripe(publishableKey, stripeAccount ? { stripeAccount } : void 0),
     [publishableKey, stripeAccount]
   );
   const appearance = useMemo(() => buildStripeAppearance(), []);
+  const embeddedOptions = useMemo(
+    () => ({ clientSecret, onComplete }),
+    [clientSecret, onComplete]
+  );
+  if (clientSecret.startsWith("cs_")) {
+    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(EmbeddedCheckoutProvider, { stripe: stripePromise, options: embeddedOptions, children: /* @__PURE__ */ jsx(EmbeddedCheckout, {}) }) });
+  }
   const options = { clientSecret, appearance };
   return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options, children: /* @__PURE__ */ jsx(
     CheckoutInner,
@@ -1108,278 +981,150 @@ function Checkout({
       onError,
       onReady,
       className,
-      style
+      style,
+      children
     }
   ) }, clientSecret);
 }
 function UpgradeModal({
   isOpen,
-  targetPlanId,
-  customerId,
-  apiBaseUrl = "https://api.nozle.app",
-  apiKey = "",
+  planCode,
+  returnUrl,
+  preview,
+  onStripeClientSecret,
+  onCheckoutStarted,
+  onCompleted,
+  onScheduled,
   onConfirm,
-  onCancel
+  onCancel,
+  onError
 }) {
-  const [preview, setPreview] = useState(null);
-  const [loading, setLoading] = useState(false);
+  const { createCheckout } = useBillingContext();
   const [error, setError] = useState(null);
   const [confirming, setConfirming] = useState(false);
-  useEffect(() => {
-    if (!isOpen || !targetPlanId || !customerId) {
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setPreview(null);
-    async function fetchPreview() {
-      try {
-        const response = await fetch(
-          `${apiBaseUrl}/api/v1/subscriptions/preview`,
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${apiKey}`
-            },
-            body: JSON.stringify({ targetPlanId, customerId })
-          }
-        );
-        if (!response.ok) {
-          throw new Error(
-            `HTTP ${response.status}: Failed to load proration preview`
-          );
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setPreview(data);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          const message = err instanceof Error ? err.message : "Failed to load preview";
-          setError(message);
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    }
-    void fetchPreview();
-    return () => {
-      cancelled = true;
-    };
-  }, [isOpen, targetPlanId, customerId, apiBaseUrl, apiKey]);
   async function handleConfirm() {
     setConfirming(true);
+    setError(null);
     try {
-      const response = await fetch(
-        `${apiBaseUrl}/api/v1/subscriptions/change`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${apiKey}`
-          },
-          body: JSON.stringify({ targetPlanId, customerId })
-        }
-      );
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: Upgrade failed`);
+      if (!createCheckout) {
+        throw new Error("BillingProvider createCheckout callback is required for checkout");
       }
-      onConfirm?.();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Upgrade failed";
-      setError(message);
-    } finally {
+      const result = await createCheckout({
+        planCode,
+        returnUrl: returnUrl ?? window.location.href
+      });
+      await handleCheckoutResult(result, {
+        onStripeClientSecret: (clientSecret) => {
+          onStripeClientSecret?.(clientSecret);
+          onCheckoutStarted?.();
+        },
+        onComplete: () => onCompleted?.(),
+        onScheduled: () => onScheduled?.()
+      });
+      onConfirm?.();
+    } catch (cause) {
+      const checkoutError = cause instanceof Error ? cause : new Error("Checkout failed");
+      setError(checkoutError.message);
+      onError?.(checkoutError);
+    } finally {
       setConfirming(false);
     }
   }
-  if (!isOpen) {
-    return null;
-  }
-  const overlayStyle = {
-    position: "fixed",
-    inset: 0,
-    background: "oklch(0 0 0 / 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3
-  };
-  const modalStyle = {
-    background: "var(--nozle-background, var(--background))",
-    color: "var(--nozle-foreground, var(--foreground))",
-    border: "1px solid var(--nozle-border, var(--border))",
-    borderRadius: "var(--nozle-radius, 0.5rem)",
-    padding: "2rem",
-    maxWidth: "28rem",
-    width: "100%",
-    boxShadow: "var(--nozle-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1))"
-  };
+  if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style: overlayStyle,
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "oklch(0 0 0 / 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": "Upgrade plan",
-      children: /* @__PURE__ */ jsxs("div", { style: modalStyle, children: [
-        /* @__PURE__ */ jsx(
-          "h2",
-          {
-            style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 1rem" },
-            children: "Confirm Plan Upgrade"
-          }
-        ),
-        loading && /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-            },
-            children: "Loading proration preview..."
-          }
-        ),
-        error && /* @__PURE__ */ jsx("p", { style: { color: "oklch(0.6 0.2 25)", marginBottom: "1rem" }, children: error }),
-        preview && !loading && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                background: "var(--nozle-muted, var(--muted))",
-                borderRadius: "var(--nozle-radius, 0.5rem)",
-                padding: "1rem",
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.5rem"
-              },
-              children: [
-                preview.credit > 0 && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: { display: "flex", justifyContent: "space-between" },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { children: "Credit from current plan" }),
-                      /* @__PURE__ */ jsxs("span", { style: { color: "oklch(0.6 0.15 150)" }, children: [
-                        "-$",
-                        preview.credit.toFixed(2)
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ jsx("span", { children: "New plan charge" }),
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    "$",
-                    preview.debit.toFixed(2)
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      fontWeight: 600,
-                      borderTop: "1px solid var(--nozle-border, var(--border))",
-                      paddingTop: "0.5rem",
-                      marginTop: "0.25rem"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { children: "You'll be charged today" }),
-                      /* @__PURE__ */ jsxs("span", { children: [
-                        "$",
-                        preview.net.toFixed(2)
-                      ] })
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "p",
-            {
-              style: {
-                fontSize: "0.875rem",
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                marginTop: "0.75rem"
-              },
-              children: [
-                "Your next billing date is",
-                " ",
-                new Date(preview.nextBillingDate).toLocaleDateString(),
-                "."
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: "0.75rem",
-              justifyContent: "flex-end"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "button",
+      "aria-label": "Change plan",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "var(--nozle-background, var(--background))",
+            color: "var(--nozle-foreground, var(--foreground))",
+            border: "1px solid var(--nozle-border, var(--border))",
+            borderRadius: "var(--nozle-radius, 0.5rem)",
+            padding: "2rem",
+            maxWidth: "28rem",
+            width: "100%",
+            boxShadow: "var(--nozle-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1))"
+          },
+          children: [
+            /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 1rem" }, children: "Confirm plan change" }),
+            error && /* @__PURE__ */ jsx("p", { role: "alert", style: { color: "oklch(0.6 0.2 25)" }, children: error }),
+            preview && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.5rem" }, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  onClick: onCancel,
                   style: {
-                    padding: "0.5rem 1rem",
+                    background: "var(--nozle-muted, var(--muted))",
                     borderRadius: "var(--nozle-radius, 0.5rem)",
-                    border: "1px solid var(--nozle-border, var(--border))",
-                    background: "transparent",
-                    color: "var(--nozle-foreground, var(--foreground))",
-                    cursor: "pointer"
+                    padding: "1rem",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.5rem"
                   },
-                  disabled: confirming,
-                  children: "Cancel"
+                  children: [
+                    preview.credit > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                      "Credits applied: -$",
+                      preview.credit.toFixed(2)
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      "New plan charge: $",
+                      preview.debit.toFixed(2)
+                    ] }),
+                    /* @__PURE__ */ jsxs("strong", { children: [
+                      "Due today: $",
+                      preview.net.toFixed(2)
+                    ] })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => void handleConfirm(),
-                  style: {
-                    padding: "0.5rem 1rem",
-                    borderRadius: "var(--nozle-radius, 0.5rem)",
-                    border: "none",
-                    background: "var(--nozle-primary, var(--primary))",
-                    color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-                    cursor: confirming || loading ? "not-allowed" : "pointer",
-                    fontWeight: 500,
-                    opacity: confirming || loading ? 0.7 : 1
-                  },
-                  disabled: confirming || loading || !!error,
-                  children: confirming ? "Upgrading..." : "Confirm Upgrade"
-                }
-              )
-            ]
-          }
-        )
-      ] })
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.875rem" }, children: [
+                "Next billing date: ",
+                new Date(preview.nextBillingDate).toLocaleDateString(),
+                "."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, disabled: confirming, children: "Cancel" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void handleConfirm(), disabled: confirming, children: confirming ? "Starting checkout..." : "Confirm" })
+            ] })
+          ]
+        }
+      )
     }
   );
 }
 function UpgradeButton({
-  targetPlanId,
+  planCode,
+  returnUrl,
+  preview,
   label = "Upgrade",
-  apiBaseUrl = "https://api.nozle.app",
   className,
   style,
-  onUpgraded
+  onStripeClientSecret,
+  onCheckoutStarted,
+  onDowngradeScheduled,
+  onUpgraded,
+  onError
 }) {
-  const { customerId, apiKey } = useBillingPortal();
   const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
+        type: "button",
         onClick: () => setIsOpen(true),
         className,
         style: {
@@ -1399,275 +1144,36 @@ function UpgradeButton({
       UpgradeModal,
       {
         isOpen,
-        targetPlanId,
-        customerId,
-        apiBaseUrl,
-        apiKey,
-        onConfirm: () => {
+        planCode,
+        returnUrl,
+        preview,
+        onStripeClientSecret,
+        onCheckoutStarted: () => {
           setIsOpen(false);
-          onUpgraded?.();
+          onCheckoutStarted?.();
         },
-        onCancel: () => setIsOpen(false)
-      }
-    )
-  ] });
-}
-var PRESET_AMOUNTS = [10, 25, 50, 100, 250];
-function CreditTopUpButton({
-  label = "Add Credits",
-  apiBaseUrl = "https://api.nozle.app",
-  className,
-  style,
-  onSuccess,
-  onError
-}) {
-  const { customerId, apiKey } = useBillingPortal();
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedAmount, setSelectedAmount] = useState(25);
-  const [customAmount, setCustomAmount] = useState("");
-  const [useCustom, setUseCustom] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const finalAmount = useCustom ? parseFloat(customAmount) || 0 : selectedAmount;
-  async function handlePurchase() {
-    if (finalAmount <= 0) {
-      setError("Please enter a valid amount");
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetch(`${apiBaseUrl}/api/v1/credits/purchase`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${apiKey}`
+        onCompleted: () => {
+          setIsOpen(false);
+          onUpgraded?.();
         },
-        body: JSON.stringify({ customerId, amount: finalAmount })
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: Credit purchase failed`);
-      }
-      setIsOpen(false);
-      onSuccess?.(finalAmount);
-    } catch (err) {
-      const purchaseError = err instanceof Error ? err : new Error("Credit purchase failed");
-      setError(purchaseError.message);
-      onError?.(purchaseError);
-    } finally {
-      setLoading(false);
-    }
-  }
-  const overlayStyle = {
-    position: "fixed",
-    inset: 0,
-    background: "oklch(0 0 0 / 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3
-  };
-  const dialogStyle = {
-    background: "var(--nozle-background, var(--background))",
-    color: "var(--nozle-foreground, var(--foreground))",
-    border: "1px solid var(--nozle-border, var(--border))",
-    borderRadius: "var(--nozle-radius, 0.5rem)",
-    padding: "2rem",
-    maxWidth: "24rem",
-    width: "100%"
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => setIsOpen(true),
-        className,
-        style: {
-          padding: "0.75rem 1.5rem",
-          borderRadius: "var(--nozle-radius, 0.5rem)",
-          border: "none",
-          background: "var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-          cursor: "pointer",
-          fontWeight: 500,
-          ...style
+        onScheduled: () => {
+          setIsOpen(false);
+          onDowngradeScheduled?.();
         },
-        children: label
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: overlayStyle,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Add credits",
-        children: /* @__PURE__ */ jsxs("div", { style: dialogStyle, children: [
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              style: {
-                fontSize: "1.25rem",
-                fontWeight: 600,
-                margin: "0 0 1.25rem"
-              },
-              children: "Add Credits"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "0.5rem",
-                marginBottom: "1rem"
-              },
-              children: PRESET_AMOUNTS.map((amount) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    setUseCustom(false);
-                    setSelectedAmount(amount);
-                  },
-                  style: {
-                    padding: "0.5rem 1rem",
-                    borderRadius: "var(--nozle-radius, 0.5rem)",
-                    border: "1px solid var(--nozle-border, var(--border))",
-                    background: !useCustom && selectedAmount === amount ? "var(--nozle-primary, var(--primary))" : "transparent",
-                    color: !useCustom && selectedAmount === amount ? "var(--nozle-primary-foreground, var(--primary-foreground))" : "var(--nozle-foreground, var(--foreground))",
-                    cursor: "pointer"
-                  },
-                  "aria-pressed": !useCustom && selectedAmount === amount,
-                  children: [
-                    "$",
-                    amount
-                  ]
-                },
-                amount
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem" }, children: [
-            /* @__PURE__ */ jsxs(
-              "label",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                  marginBottom: "0.5rem",
-                  fontSize: "0.875rem",
-                  color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: useCustom,
-                      onChange: (e) => setUseCustom(e.target.checked)
-                    }
-                  ),
-                  "Custom amount"
-                ]
-              }
-            ),
-            useCustom && /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                value: customAmount,
-                onChange: (e) => setCustomAmount(e.target.value),
-                placeholder: "Enter amount",
-                min: 1,
-                style: {
-                  width: "100%",
-                  padding: "0.5rem 0.75rem",
-                  borderRadius: "var(--nozle-radius, 0.5rem)",
-                  border: "1px solid var(--nozle-border, var(--border))",
-                  background: "var(--nozle-background, var(--background))",
-                  color: "var(--nozle-foreground, var(--foreground))",
-                  boxSizing: "border-box"
-                }
-              }
-            )
-          ] }),
-          error && /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                color: "oklch(0.6 0.2 25)",
-                marginBottom: "1rem",
-                fontSize: "0.875rem"
-              },
-              children: error
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: "0.75rem",
-                justifyContent: "flex-end"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => setIsOpen(false),
-                    style: {
-                      padding: "0.5rem 1rem",
-                      borderRadius: "var(--nozle-radius, 0.5rem)",
-                      border: "1px solid var(--nozle-border, var(--border))",
-                      background: "transparent",
-                      color: "var(--nozle-foreground, var(--foreground))",
-                      cursor: "pointer"
-                    },
-                    disabled: loading,
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => void handlePurchase(),
-                    style: {
-                      padding: "0.5rem 1rem",
-                      borderRadius: "var(--nozle-radius, 0.5rem)",
-                      border: "none",
-                      background: "var(--nozle-primary, var(--primary))",
-                      color: "var(--nozle-primary-foreground, var(--primary-foreground))",
-                      cursor: loading ? "not-allowed" : "pointer",
-                      fontWeight: 500,
-                      opacity: loading ? 0.7 : 1
-                    },
-                    disabled: loading || finalAmount <= 0,
-                    children: loading ? "Processing..." : `Add $${finalAmount}`
-                  }
-                )
-              ]
-            }
-          )
-        ] })
+        onError,
+        onCancel: () => setIsOpen(false)
       }
     )
   ] });
 }
 function FeatureGate({
-  customerId,
-  feature,
+  allowed,
+  loading = false,
   fallback = null,
   children
 }) {
-  const { allowed, loading } = useCan(customerId, feature);
-  if (loading) {
-    return null;
-  }
-  if (!allowed) {
-    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
-  }
+  if (loading) return null;
+  if (!allowed) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function UsageGate({
@@ -1932,288 +1438,26 @@ function UsageAlert({
     f.key
   )) });
 }
-function CreditBalance({
-  customerId,
-  currency = "USD"
-}) {
-  const { balance, loading, error } = useCredits(customerId);
-  if (loading) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "animate-pulse h-8 w-24 rounded",
-        style: { background: "var(--nozle-border, var(--border))" }
-      }
-    );
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: { color: "var(--nozle-destructive, var(--destructive))" },
-        className: "text-sm",
-        children: "Failed to load balance"
-      }
-    );
-  }
-  const amount = balance ?? 0;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { "aria-label": "wallet icon", style: { fontSize: "1.25rem" }, role: "img", children: "\u{1F4B3}" }),
-    amount === 0 ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: {
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-        },
-        className: "text-sm",
-        children: "No credits"
-      }
-    ) : /* @__PURE__ */ jsx("span", { className: "font-semibold", children: new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency,
-      minimumFractionDigits: 2
-    }).format(amount) })
-  ] });
-}
-var TYPE_BADGE_STYLES = {
-  grant: {
-    background: "var(--nozle-success-bg, #dcfce7)",
-    color: "var(--nozle-success, #16a34a)"
+var TIER_STYLES = {
+  free: {
+    background: "var(--nozle-muted, var(--muted, #f1f5f9))",
+    color: "var(--nozle-muted-foreground, var(--muted-foreground, #64748b))",
+    border: "1px solid var(--nozle-border, var(--border, #e2e8f0))"
   },
-  deduct: {
-    background: "var(--nozle-destructive-bg, #fee2e2)",
-    color: "var(--nozle-destructive, #dc2626)"
+  starter: {
+    background: "color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 10%, transparent)",
+    color: "var(--nozle-primary, var(--primary, #3b82f6))",
+    border: "1px solid color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 30%, transparent)"
   },
-  purchase: {
-    background: "var(--nozle-info-bg, #dbeafe)",
-    color: "var(--nozle-info, #2563eb)"
+  pro: {
+    background: "var(--nozle-primary, var(--primary, #3b82f6))",
+    color: "var(--nozle-primary-foreground, var(--primary-foreground, #ffffff))",
+    border: "1px solid transparent"
   },
-  application: {
-    background: "var(--nozle-muted, #f1f5f9)",
-    color: "var(--nozle-muted-foreground, #64748b)"
-  }
-};
-function getTypeBadgeStyle(type) {
-  return TYPE_BADGE_STYLES[type] ?? TYPE_BADGE_STYLES.application;
-}
-function formatDate(iso) {
-  try {
-    return new Date(iso).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
-    });
-  } catch {
-    return iso;
-  }
-}
-function CreditHistory({
-  customerId,
-  viewAllHref = "/billing/credits"
-}) {
-  const { client } = useBillingContext();
-  const [transactions, setTransactions] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!client) {
-      setError("No client in context");
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    async function fetchHistory() {
-      try {
-        const clientInternal = client;
-        const apiKey = clientInternal.apiKey ?? "";
-        const baseUrl = clientInternal.baseUrl ?? "https://api.nozle.app";
-        const timeout = clientInternal.timeout ?? 5e3;
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-        const response = await fetch(
-          `${baseUrl}/api/v1/credits/${customerId}/transactions`,
-          {
-            headers: { Authorization: `Bearer ${apiKey}` },
-            signal: controller.signal
-          }
-        );
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setTransactions(
-            (data.transactions ?? []).slice().sort(
-              (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-            )
-          );
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Unknown error");
-          setLoading(false);
-        }
-      }
-    }
-    void fetchHistory();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId]);
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "animate-pulse space-y-2", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-6 rounded",
-        style: { background: "var(--nozle-border, var(--border))" }
-      },
-      i
-    )) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: { color: "var(--nozle-destructive, var(--destructive))" },
-        className: "text-sm",
-        children: "Failed to load transactions"
-      }
-    );
-  }
-  const displayed = transactions.slice(0, 20);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          style: {
-            borderBottom: "1px solid var(--nozle-border, var(--border))",
-            fontSize: "0.75rem",
-            color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-          },
-          children: [
-            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.25rem 0.5rem" }, children: "Type" }),
-            /* @__PURE__ */ jsx("th", { style: { textAlign: "right", padding: "0.25rem 0.5rem" }, children: "Amount" }),
-            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.25rem 0.5rem" }, children: "Description" }),
-            /* @__PURE__ */ jsx("th", { style: { textAlign: "right", padding: "0.25rem 0.5rem" }, children: "Date" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx("tbody", { children: displayed.map((tx) => /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          style: {
-            borderBottom: "1px solid var(--nozle-border, var(--border))",
-            fontSize: "0.875rem"
-          },
-          children: [
-            /* @__PURE__ */ jsx("td", { style: { padding: "0.5rem" }, children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  ...getTypeBadgeStyle(tx.type),
-                  padding: "0.125rem 0.5rem",
-                  borderRadius: "9999px",
-                  fontSize: "0.75rem",
-                  fontWeight: 500
-                },
-                children: tx.type
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(
-              "td",
-              {
-                style: {
-                  textAlign: "right",
-                  padding: "0.5rem",
-                  fontVariantNumeric: "tabular-nums",
-                  color: tx.type === "deduct" ? "var(--nozle-destructive, var(--destructive))" : "var(--nozle-success, #16a34a)"
-                },
-                children: [
-                  tx.type === "deduct" ? "-" : "+",
-                  Math.abs(tx.amount).toLocaleString()
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "td",
-              {
-                style: {
-                  padding: "0.5rem",
-                  color: "var(--nozle-foreground, var(--foreground))"
-                },
-                children: tx.description
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "td",
-              {
-                style: {
-                  textAlign: "right",
-                  padding: "0.5rem",
-                  color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                  fontSize: "0.75rem"
-                },
-                children: formatDate(tx.createdAt)
-              }
-            )
-          ]
-        },
-        tx.id
-      )) })
-    ] }),
-    transactions.length > 20 && /* @__PURE__ */ jsx("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: viewAllHref,
-        style: {
-          color: "var(--nozle-primary, var(--primary))",
-          fontSize: "0.875rem",
-          textDecoration: "underline"
-        },
-        children: [
-          "View all (",
-          transactions.length,
-          ")"
-        ]
-      }
-    ) }),
-    displayed.length === 0 && /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-          fontSize: "0.875rem",
-          textAlign: "center",
-          padding: "1rem"
-        },
-        children: "No credit transactions yet."
-      }
-    )
-  ] });
-}
-var TIER_STYLES = {
-  free: {
-    background: "var(--nozle-muted, var(--muted, #f1f5f9))",
-    color: "var(--nozle-muted-foreground, var(--muted-foreground, #64748b))",
-    border: "1px solid var(--nozle-border, var(--border, #e2e8f0))"
-  },
-  starter: {
-    background: "color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 10%, transparent)",
-    color: "var(--nozle-primary, var(--primary, #3b82f6))",
-    border: "1px solid color-mix(in srgb, var(--nozle-primary, var(--primary, #3b82f6)) 30%, transparent)"
-  },
-  pro: {
-    background: "var(--nozle-primary, var(--primary, #3b82f6))",
-    color: "var(--nozle-primary-foreground, var(--primary-foreground, #ffffff))",
-    border: "1px solid transparent"
-  },
-  enterprise: {
-    background: "var(--nozle-accent, var(--accent, #8b5cf6))",
-    color: "var(--nozle-accent-foreground, var(--accent-foreground, #ffffff))",
-    border: "1px solid transparent"
+  enterprise: {
+    background: "var(--nozle-accent, var(--accent, #8b5cf6))",
+    color: "var(--nozle-accent-foreground, var(--accent-foreground, #ffffff))",
+    border: "1px solid transparent"
   }
 };
 function PlanBadge({ plan, tier = "free" }) {
@@ -2236,429 +1480,6 @@ function PlanBadge({ plan, tier = "free" }) {
     }
   );
 }
-function formatDate2(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric"
-    });
-  } catch {
-    return iso;
-  }
-}
-function CurrentPlan({
-  customerId,
-  onChangePlan,
-  changePlanHref = "/plans"
-}) {
-  const { client } = useBillingContext();
-  const [plan, setPlan] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!client) {
-      setError("No client in context");
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    async function fetchPlan() {
-      try {
-        const clientInternal = client;
-        const apiKey = clientInternal.apiKey ?? "";
-        const baseUrl = clientInternal.baseUrl ?? "https://api.nozle.app";
-        const timeout = clientInternal.timeout ?? 5e3;
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-        const response = await fetch(
-          `${baseUrl}/api/v1/subscriptions/current?customer_id=${customerId}`,
-          {
-            headers: { Authorization: `Bearer ${apiKey}` },
-            signal: controller.signal
-          }
-        );
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setPlan(data);
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Unknown error");
-          setLoading(false);
-        }
-      }
-    }
-    void fetchPlan();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId]);
-  if (loading) {
-    return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-2", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "h-6 w-32 rounded",
-          style: { background: "var(--nozle-border, var(--border))" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "h-4 w-48 rounded",
-          style: { background: "var(--nozle-border, var(--border))" }
-        }
-      )
-    ] });
-  }
-  if (error || !plan) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: { color: "var(--nozle-destructive, var(--destructive))" },
-        className: "text-sm",
-        children: "Failed to load current plan"
-      }
-    );
-  }
-  const handleChangePlan = () => {
-    if (onChangePlan) {
-      onChangePlan();
-    } else {
-      window.location.href = changePlanHref;
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx(PlanBadge, { plan: plan.planName, tier: plan.tier }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-            fontSize: "0.875rem"
-          },
-          children: plan.interval
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          style: {
-            color: plan.status === "active" ? "var(--nozle-success, #16a34a)" : "var(--nozle-warning, var(--warning))",
-            fontSize: "0.875rem",
-            fontWeight: 500
-          },
-          children: plan.status
-        }
-      )
-    ] }),
-    plan.nextBillingDate && /* @__PURE__ */ jsxs(
-      "p",
-      {
-        style: {
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-          fontSize: "0.875rem"
-        },
-        children: [
-          "Next billing: ",
-          formatDate2(plan.nextBillingDate)
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleChangePlan,
-        style: {
-          background: "transparent",
-          border: "1px solid var(--nozle-primary, var(--primary))",
-          color: "var(--nozle-primary, var(--primary))",
-          padding: "0.375rem 0.875rem",
-          borderRadius: "0.375rem",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          cursor: "pointer"
-        },
-        children: "Change Plan"
-      }
-    )
-  ] });
-}
-var STATUS_STYLES = {
-  paid: {
-    background: "var(--nozle-success-bg, #dcfce7)",
-    color: "var(--nozle-success, #16a34a)"
-  },
-  open: {
-    background: "var(--nozle-info-bg, #dbeafe)",
-    color: "var(--nozle-info, #2563eb)"
-  },
-  draft: {
-    background: "var(--nozle-muted, #f1f5f9)",
-    color: "var(--nozle-muted-foreground, #64748b)"
-  },
-  void: {
-    background: "var(--nozle-muted, #f1f5f9)",
-    color: "var(--nozle-muted-foreground, #64748b)"
-  },
-  uncollectible: {
-    background: "var(--nozle-destructive-bg, #fee2e2)",
-    color: "var(--nozle-destructive, #dc2626)"
-  }
-};
-function formatDate3(iso) {
-  try {
-    return new Date(iso).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
-    });
-  } catch {
-    return iso;
-  }
-}
-function InvoiceList({ customerId }) {
-  const { client } = useBillingContext();
-  const [invoices, setInvoices] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!client) {
-      setError("No client in context");
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    async function fetchInvoices() {
-      try {
-        const clientInternal = client;
-        const apiKey = clientInternal.apiKey ?? "";
-        const baseUrl = clientInternal.baseUrl ?? "https://api.nozle.app";
-        const timeout = clientInternal.timeout ?? 5e3;
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-        const response = await fetch(
-          `${baseUrl}/api/v1/invoices?customer_id=${customerId}`,
-          {
-            headers: { Authorization: `Bearer ${apiKey}` },
-            signal: controller.signal
-          }
-        );
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setInvoices(data.invoices ?? data.data ?? []);
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : "Unknown error");
-          setLoading(false);
-        }
-      }
-    }
-    void fetchInvoices();
-    return () => {
-      cancelled = true;
-    };
-  }, [client, customerId]);
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "animate-pulse space-y-2", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-8 rounded",
-        style: { background: "var(--nozle-border, var(--border))" }
-      },
-      i
-    )) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: { color: "var(--nozle-destructive, var(--destructive))" },
-        className: "text-sm",
-        children: "Failed to load invoices"
-      }
-    );
-  }
-  if (invoices.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-          fontSize: "0.875rem",
-          textAlign: "center",
-          padding: "1.5rem"
-        },
-        children: "No invoices yet."
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        style: {
-          borderBottom: "1px solid var(--nozle-border, var(--border))",
-          fontSize: "0.75rem",
-          color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-        },
-        children: [
-          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.5rem" }, children: "#" }),
-          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.5rem" }, children: "Date" }),
-          /* @__PURE__ */ jsx("th", { style: { textAlign: "right", padding: "0.5rem" }, children: "Amount" }),
-          /* @__PURE__ */ jsx("th", { style: { textAlign: "center", padding: "0.5rem" }, children: "Status" }),
-          /* @__PURE__ */ jsx("th", { style: { textAlign: "center", padding: "0.5rem" }, children: "PDF" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("tbody", { children: invoices.map((inv) => /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        style: {
-          borderBottom: "1px solid var(--nozle-border, var(--border))",
-          fontSize: "0.875rem"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "td",
-            {
-              style: {
-                padding: "0.5rem",
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))"
-              },
-              children: inv.number
-            }
-          ),
-          /* @__PURE__ */ jsx("td", { style: { padding: "0.5rem" }, children: formatDate3(inv.date) }),
-          /* @__PURE__ */ jsx(
-            "td",
-            {
-              style: {
-                textAlign: "right",
-                padding: "0.5rem",
-                fontVariantNumeric: "tabular-nums"
-              },
-              children: new Intl.NumberFormat("en-US", {
-                style: "currency",
-                currency: inv.currency ?? "USD"
-              }).format(inv.amount / 100)
-            }
-          ),
-          /* @__PURE__ */ jsx("td", { style: { textAlign: "center", padding: "0.5rem" }, children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                ...STATUS_STYLES[inv.status] ?? STATUS_STYLES.draft,
-                padding: "0.125rem 0.5rem",
-                borderRadius: "9999px",
-                fontSize: "0.75rem",
-                fontWeight: 500
-              },
-              children: inv.status
-            }
-          ) }),
-          /* @__PURE__ */ jsx("td", { style: { textAlign: "center", padding: "0.5rem" }, children: inv.pdf_url ? /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: inv.pdf_url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              "aria-label": `Download invoice ${inv.number}`,
-              style: {
-                color: "var(--nozle-primary, var(--primary))",
-                textDecoration: "underline",
-                fontSize: "0.75rem"
-              },
-              children: "Download"
-            }
-          ) : /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                fontSize: "0.75rem"
-              },
-              children: "\u2014"
-            }
-          ) })
-        ]
-      },
-      inv.id
-    )) })
-  ] });
-}
-function Section({
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        padding: "1.25rem",
-        border: "1px solid var(--nozle-border, var(--border))",
-        borderRadius: "0.75rem",
-        background: "var(--nozle-card, var(--card, #ffffff))"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "h3",
-          {
-            style: {
-              fontSize: "0.875rem",
-              fontWeight: 600,
-              color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: "1rem"
-            },
-            children: title
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function BillingPortal({
-  customerId,
-  usageFeatures,
-  usageLoading = false,
-  onChangePlan
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "1.25rem",
-        fontFamily: "var(--nozle-font-sans, var(--font-sans, system-ui, sans-serif))",
-        color: "var(--nozle-foreground, var(--foreground))"
-      },
-      children: [
-        /* @__PURE__ */ jsx(Section, { title: "Current Plan", children: /* @__PURE__ */ jsx(CurrentPlan, { customerId, onChangePlan }) }),
-        /* @__PURE__ */ jsx(Section, { title: "Usage", children: /* @__PURE__ */ jsx(UsageDashboard, { features: usageFeatures, loading: usageLoading }) }),
-        /* @__PURE__ */ jsx(Section, { title: "Invoices", children: /* @__PURE__ */ jsx(InvoiceList, { customerId }) }),
-        /* @__PURE__ */ jsx(Section, { title: "Credits", children: /* @__PURE__ */ jsx(CreditBalance, { customerId }) })
-      ]
-    }
-  );
-}
 var BRAND_LABELS = {
   visa: "Visa",
   mastercard: "Mastercard",
@@ -2762,327 +1583,7 @@ function PaymentMethodDisplay({
     )
   ] });
 }
-var CANCEL_REASONS = [
-  "Too expensive",
-  "Missing features",
-  "Switching to competitor",
-  "Not using it enough",
-  "Other"
-];
-function CancelSubscriptionButton({
-  subscriptionId,
-  onCancelled
-}) {
-  const [step, setStep] = useState("idle");
-  const [selectedReason, setSelectedReason] = useState("");
-  const [otherText, setOtherText] = useState("");
-  const [loading, setLoading] = useState(false);
-  const handleDismiss = () => {
-    setStep("idle");
-    setSelectedReason("");
-    setOtherText("");
-  };
-  const handleConfirmCancel = () => {
-    setStep("reason");
-  };
-  const handleSubmitCancellation = async () => {
-    const reason = selectedReason === "Other" ? otherText : selectedReason;
-    setLoading(true);
-    await fetch(`/api/v1/subscriptions/${subscriptionId}`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ reason })
-    });
-    setLoading(false);
-    handleDismiss();
-    onCancelled?.();
-  };
-  const isSubmitDisabled = loading || !selectedReason || selectedReason === "Other" && !otherText.trim();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => setStep("confirm"),
-        style: {
-          background: "transparent",
-          border: "1px solid var(--nozle-destructive, var(--destructive, #dc2626))",
-          color: "var(--nozle-destructive, var(--destructive, #dc2626))",
-          padding: "0.375rem 0.875rem",
-          borderRadius: "0.375rem",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          cursor: "pointer"
-        },
-        children: "Cancel Subscription"
-      }
-    ),
-    step === "confirm" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Cancel subscription confirmation",
-        style: {
-          position: "fixed",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "rgba(0,0,0,0.4)",
-          zIndex: 50
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              background: "var(--nozle-background, var(--background, #fff))",
-              border: "1px solid var(--nozle-border, var(--border))",
-              borderRadius: "0.75rem",
-              padding: "1.5rem",
-              maxWidth: "28rem",
-              width: "90%",
-              boxShadow: "0 20px 60px rgba(0,0,0,0.15)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  style: {
-                    fontSize: "1.125rem",
-                    fontWeight: 600,
-                    marginBottom: "0.75rem"
-                  },
-                  children: "Cancel Subscription?"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                    fontSize: "0.875rem",
-                    marginBottom: "1.5rem"
-                  },
-                  children: "Your access will end at the end of the billing period."
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "0.75rem",
-                    justifyContent: "flex-end"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleDismiss,
-                        style: {
-                          background: "transparent",
-                          border: "1px solid var(--nozle-border, var(--border))",
-                          color: "var(--nozle-foreground, var(--foreground))",
-                          padding: "0.375rem 0.875rem",
-                          borderRadius: "0.375rem",
-                          fontSize: "0.875rem",
-                          cursor: "pointer"
-                        },
-                        children: "Keep Subscription"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleConfirmCancel,
-                        style: {
-                          background: "var(--nozle-destructive, var(--destructive, #dc2626))",
-                          border: "1px solid transparent",
-                          color: "#fff",
-                          padding: "0.375rem 0.875rem",
-                          borderRadius: "0.375rem",
-                          fontSize: "0.875rem",
-                          fontWeight: 500,
-                          cursor: "pointer"
-                        },
-                        children: "Confirm Cancel"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    step === "reason" && /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Cancellation reason survey",
-        style: {
-          position: "fixed",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "rgba(0,0,0,0.4)",
-          zIndex: 50
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              background: "var(--nozle-background, var(--background, #fff))",
-              border: "1px solid var(--nozle-border, var(--border))",
-              borderRadius: "0.75rem",
-              padding: "1.5rem",
-              maxWidth: "28rem",
-              width: "90%",
-              boxShadow: "0 20px 60px rgba(0,0,0,0.15)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  style: {
-                    fontSize: "1.125rem",
-                    fontWeight: 600,
-                    marginBottom: "0.5rem"
-                  },
-                  children: "Why are you cancelling?"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    color: "var(--nozle-muted-foreground, var(--muted-foreground))",
-                    fontSize: "0.875rem",
-                    marginBottom: "1rem"
-                  },
-                  children: "Your feedback helps us improve."
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "fieldset",
-                {
-                  style: {
-                    border: "none",
-                    padding: 0,
-                    margin: 0,
-                    marginBottom: "1rem"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Cancellation reason" }),
-                    CANCEL_REASONS.map((r) => /* @__PURE__ */ jsxs(
-                      "label",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "0.5rem",
-                          padding: "0.375rem 0",
-                          fontSize: "0.875rem",
-                          cursor: "pointer"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              type: "radio",
-                              name: "cancel-reason",
-                              value: r,
-                              checked: selectedReason === r,
-                              onChange: () => setSelectedReason(r),
-                              "aria-label": r
-                            }
-                          ),
-                          r
-                        ]
-                      },
-                      r
-                    ))
-                  ]
-                }
-              ),
-              selectedReason === "Other" && /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  placeholder: "Please describe your reason",
-                  value: otherText,
-                  onChange: (e) => setOtherText(e.target.value),
-                  "aria-label": "Other reason",
-                  style: {
-                    width: "100%",
-                    border: "1px solid var(--nozle-border, var(--border))",
-                    borderRadius: "0.375rem",
-                    padding: "0.5rem 0.75rem",
-                    fontSize: "0.875rem",
-                    marginBottom: "1rem",
-                    background: "var(--nozle-background, var(--background, #fff))",
-                    color: "var(--nozle-foreground, var(--foreground))",
-                    boxSizing: "border-box"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "0.75rem",
-                    justifyContent: "flex-end"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleDismiss,
-                        style: {
-                          background: "transparent",
-                          border: "1px solid var(--nozle-border, var(--border))",
-                          color: "var(--nozle-foreground, var(--foreground))",
-                          padding: "0.375rem 0.875rem",
-                          borderRadius: "0.375rem",
-                          fontSize: "0.875rem",
-                          cursor: "pointer"
-                        },
-                        children: "Keep Subscription"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: handleSubmitCancellation,
-                        disabled: isSubmitDisabled,
-                        style: {
-                          background: isSubmitDisabled ? "var(--nozle-muted, var(--muted, #f1f5f9))" : "var(--nozle-destructive, var(--destructive, #dc2626))",
-                          border: "1px solid transparent",
-                          color: isSubmitDisabled ? "var(--nozle-muted-foreground, var(--muted-foreground))" : "#fff",
-                          padding: "0.375rem 0.875rem",
-                          borderRadius: "0.375rem",
-                          fontSize: "0.875rem",
-                          fontWeight: 500,
-                          cursor: isSubmitDisabled ? "not-allowed" : "pointer"
-                        },
-                        children: loading ? "Cancelling..." : "Submit Cancellation"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    )
-  ] });
-}
 
-export { BillingContext, BillingPortal, BillingPortalProvider, BillingProvider, CANCEL_REASONS, CancelSubscriptionButton, Checkout, CheckoutButton, CreditBalance, CreditHistory, CreditTopUpButton, CurrentPlan, FeatureGate, InvoiceList, LockedOverlay, PaymentMethodDisplay, PlanBadge, PlanCard, PlanComparison, PlanGate, PricingTable, UpgradeButton, UpgradeModal, UpgradePrompt, UsageAlert, UsageDashboard, UsageGate, UsageMeter, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };
+export { BillingContext, BillingProvider, Checkout, CheckoutButton, FeatureGate, LockedOverlay, PaymentMethodDisplay, PlanBadge, PlanCard, PlanComparison, PlanGate, PricingTable, UpgradeButton, UpgradeModal, UpgradePrompt, UsageAlert, UsageDashboard, UsageGate, UsageMeter, getUsageMeterColor, useBillingContext, useCheckout2 as useCheckout, useCheckout as useCheckoutSession, useNozleClient, useOptionalBillingContext, usePlans };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map