@nozle-js/react 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,997 +1,2844 @@
-import { createContext, useRef, useMemo, useEffect, useContext, useSyncExternalStore, useState, useCallback } from 'react';
-import { loadStripe } from '@stripe/stripe-js';
+import React, { createContext, useMemo, useState, useEffect, useContext } from 'react';
 import { Centrifuge } from 'centrifuge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
 
 // src/provider.tsx
-
-// src/store.ts
-var BillingStore = class {
-  baseUrl;
-  apiKey;
-  customerId;
-  state = {
-    entitlements: null,
-    credits: null,
-    usage: {},
-    connectionState: "connecting",
-    error: null
+function createClient(apiKey, 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,
+    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();
+    }
   };
-  listeners = /* @__PURE__ */ new Set();
-  constructor(baseUrl, apiKey, customerId) {
-    this.baseUrl = baseUrl;
-    this.apiKey = apiKey;
-    this.customerId = customerId;
-  }
-  getSnapshot = () => this.state;
-  getServerSnapshot = () => this.state;
-  subscribe = (listener) => {
-    this.listeners.add(listener);
+}
+var BillingContext = createContext({
+  client: null,
+  workspaceId: "",
+  centrifugoUrl: "",
+  centrifugoToken: null
+});
+function BillingProvider({
+  apiKey,
+  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 () => {
-      this.listeners.delete(listener);
+      cancelled = true;
     };
+  }, [client]);
+  const contextValue = {
+    client,
+    workspaceId,
+    centrifugoUrl: resolvedCentrifugoUrl,
+    centrifugoToken
   };
-  emit() {
-    for (const listener of this.listeners) {
-      listener();
+  return React.createElement(BillingContext.Provider, { value: contextValue }, children);
+}
+function useBillingContext() {
+  return useContext(BillingContext);
+}
+function useNozleClient() {
+  const { client } = useBillingContext();
+  if (!client) throw new Error("useNozleClient must be used within <BillingProvider>");
+  return 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);
+  useEffect(() => {
+    if (!client) {
+      setState({
+        ...initialState,
+        loading: false,
+        error: "No client in context"
+      });
+      return;
     }
-  }
-  setConnectionState(state) {
-    this.state = { ...this.state, connectionState: state };
-    this.emit();
-  }
-  setError(error) {
-    this.state = { ...this.state, error };
-    this.emit();
-  }
-  updateUsage(metric, used, limit, remaining) {
-    this.state = {
-      ...this.state,
-      usage: {
-        ...this.state.usage,
-        [metric]: { used, limit, remaining }
+    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;
     };
-    this.emit();
-  }
-  async fetchUsage(feature) {
-    try {
-      const res = await fetch(
-        `${this.baseUrl}/v1/can?customer_id=${this.customerId}&feature=${feature}`,
-        { headers: { Authorization: `Bearer ${this.apiKey}` } }
-      );
-      if (!res.ok) return;
-      const data = await res.json();
-      this.updateUsage(feature, data.used, data.limit, data.remaining);
-      this.state = {
-        ...this.state,
-        entitlements: {
-          plan_slug: "pro",
-          subscription_status: "active",
-          features: { [feature]: { enabled: data.allowed } },
-          limits: { [feature]: { limit: data.limit, used: data.used, source: "entitlement" } }
-        }
-      };
-      this.emit();
-    } catch (err) {
-      this.state = {
-        ...this.state,
-        error: err instanceof Error ? err : new Error(String(err))
-      };
-      this.emit();
+  }, [client, customerId, featureKey]);
+  useEffect(() => {
+    if (!centrifugoToken || !centrifugoUrl || !workspaceId) {
+      return;
     }
-  }
-  async fetchCheckoutSecret(planCode, successUrl) {
-    const res = await fetch(`${this.baseUrl}/v1/checkout`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${this.apiKey}`,
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        plan_code: planCode,
-        customer_id: this.customerId,
-        success_url: successUrl || `${window.location.origin}/checkout/complete?session_id={CHECKOUT_SESSION_ID}`
-      })
+    const cf = new Centrifuge(centrifugoUrl, {
+      token: centrifugoToken
     });
-    if (!res.ok) throw new Error("Failed to create checkout session");
-    const data = await res.json();
-    return data.client_secret;
-  }
-  async fetchPlans() {
-    const res = await fetch(`${this.baseUrl}/v1/plans`, {
-      headers: { Authorization: `Bearer ${this.apiKey}` }
+    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
+        }));
+      }
     });
-    if (!res.ok) return [];
-    const data = await res.json();
-    return data.plans || [];
-  }
-  handleEvent(event) {
-    if (event.type === "usage.updated") {
-      const metric = event.metric;
-      const used = event.used;
-      const limit = event.limit;
-      const remaining = event.remaining;
-      this.updateUsage(metric, used, limit, remaining);
-    }
-  }
-};
-function connectCentrifugo(store, customerId, wsUrl) {
-  const centrifuge = new Centrifuge(wsUrl, {});
-  const sub = centrifuge.newSubscription(
-    `customer:${customerId}`
-  );
-  sub.on("publication", (ctx) => {
-    store.handleEvent(
-      ctx.data
-    );
-  });
-  sub.on("subscribed", () => {
-    store.setConnectionState("connected");
-  });
-  centrifuge.on("connected", () => {
-    store.setConnectionState("connected");
-  });
-  centrifuge.on("disconnected", () => {
-    store.setConnectionState("disconnected");
-  });
-  sub.subscribe();
-  centrifuge.connect();
-  store.setConnectionState("connecting");
-  return {
-    disconnect: () => {
+    sub.subscribe();
+    cf.connect();
+    return () => {
       sub.unsubscribe();
-      centrifuge.disconnect();
+      cf.disconnect();
+    };
+  }, [centrifugoToken, centrifugoUrl, workspaceId, customerId, featureKey]);
+  return state;
+}
+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() {
+      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}`);
+        }
+        const data = await response.json();
+        if (!cancelled) {
+          setState({
+            value: data.value ?? data.total ?? null,
+            loading: false,
+            error: null
+          });
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : "Unknown error";
+          setState({ value: null, loading: false, error: message });
+        }
+      }
+    }
+    void fetchUsage();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, customerId, metricKey]);
+  return state;
 }
-var BillingContext = createContext(null);
-function BillingProvider({
-  apiKey,
-  customerId,
-  baseUrl = "http://localhost:8080",
-  wsUrl = "ws://localhost:8001/connection/websocket",
-  stripeKey,
-  features = [],
-  children
-}) {
-  const storeRef = useRef(null);
-  if (!storeRef.current) {
-    storeRef.current = new BillingStore(baseUrl, apiKey, customerId);
-  }
-  const stripePromise = useMemo(
-    () => stripeKey ? loadStripe(stripeKey) : null,
-    [stripeKey]
-  );
+function useCredits(customerId) {
+  const { client } = useBillingContext();
+  const [state, setState] = useState({
+    balance: null,
+    loading: true,
+    error: null
+  });
   useEffect(() => {
-    const store = storeRef.current;
-    for (const feature of features) {
-      store.fetchUsage(feature);
-    }
-    const connection = connectCentrifugo(
-      store,
-      customerId,
-      wsUrl
-    );
+    if (!client) {
+      setState({
+        balance: null,
+        loading: false,
+        error: "No client in context"
+      });
+      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 () => {
-      connection.disconnect();
+      cancelled = true;
     };
-  }, [apiKey, customerId, baseUrl, wsUrl, features]);
-  return /* @__PURE__ */ jsx(BillingContext.Provider, { value: { store: storeRef.current, stripePromise }, children });
+  }, [client, customerId]);
+  return state;
 }
-function useBillingContext() {
-  const ctx = useContext(BillingContext);
+var BillingPortalContext = createContext(
+  null
+);
+function useBillingPortal() {
+  const ctx = useContext(BillingPortalContext);
   if (!ctx) {
-    throw new Error("useBillingContext must be used within a BillingProvider");
+    throw new Error(
+      "useBillingPortal must be used inside BillingPortalProvider"
+    );
   }
   return ctx;
 }
-function useCan(feature) {
-  const { store } = useBillingContext();
-  const state = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getServerSnapshot
-  );
-  if (state.error) {
-    return { allowed: false, isLoading: false, error: state.error };
-  }
-  if (state.entitlements === null) {
-    return { allowed: false, isLoading: true, error: null };
-  }
-  const featureState = state.entitlements.features[feature];
-  return {
-    allowed: featureState?.enabled ?? false,
-    isLoading: false,
-    error: null
-  };
+function BillingPortalProvider({
+  customerId,
+  apiKey,
+  children
+}) {
+  return /* @__PURE__ */ jsx(BillingPortalContext.Provider, { value: { customerId, apiKey }, children });
 }
-function useUsage(metric) {
-  const { store } = useBillingContext();
-  const state = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getServerSnapshot
+function PlanCard({
+  id,
+  name,
+  monthlyPrice,
+  annualPrice,
+  features,
+  description,
+  isAnnual,
+  isCurrent,
+  onSelect
+}) {
+  const price = isAnnual ? annualPrice : monthlyPrice;
+  const interval = isAnnual ? "year" : "month";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": `plan-card-${id}`,
+      "aria-current": isCurrent ? "true" : void 0,
+      style: {
+        background: "var(--nozle-background, var(--background))",
+        border: isCurrent ? "2px solid var(--nozle-primary, var(--primary))" : "1px solid var(--nozle-border, var(--border))",
+        borderRadius: "var(--nozle-radius, 0.5rem)",
+        padding: "1.5rem",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem"
+      },
+      className: isCurrent ? "border-primary" : "",
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                fontSize: "1.25rem",
+                fontWeight: 600,
+                color: "var(--nozle-foreground, var(--foreground))",
+                margin: 0
+              },
+              children: name
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+                fontSize: "0.875rem",
+                margin: "0.25rem 0 0"
+              },
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                fontSize: "2rem",
+                fontWeight: 700,
+                color: "var(--nozle-foreground, var(--foreground))"
+              },
+              children: [
+                "$",
+                price
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+                marginLeft: "0.25rem"
+              },
+              children: [
+                "/",
+                interval
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            style: {
+              listStyle: "none",
+              padding: 0,
+              margin: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem",
+              flex: 1
+            },
+            children: features.map((feature) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  color: "var(--nozle-foreground, var(--foreground))",
+                  fontSize: "0.875rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: { color: "var(--nozle-primary, var(--primary))" },
+                      "aria-hidden": "true",
+                      children: "\u2713"
+                    }
+                  ),
+                  feature
+                ]
+              },
+              feature
+            ))
+          }
+        ),
+        onSelect && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onSelect,
+            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))",
+              border: "none",
+              borderRadius: "var(--nozle-radius, 0.5rem)",
+              padding: "0.75rem 1.5rem",
+              cursor: isCurrent ? "default" : "pointer",
+              fontWeight: 500,
+              width: "100%"
+            },
+            disabled: isCurrent,
+            "aria-label": isCurrent ? `Current plan: ${name}` : `Select ${name}`,
+            children: isCurrent ? "Current Plan" : "Get Started"
+          }
+        )
+      ]
+    }
   );
-  if (state.error) {
-    return { data: null, isLoading: false, error: state.error };
-  }
-  if (state.entitlements === null) {
-    return { data: null, isLoading: true, error: null };
-  }
-  const usage = state.usage[metric] ?? null;
-  return { data: usage, isLoading: false, error: null };
 }
-function usePlan() {
-  const { store } = useBillingContext();
-  const state = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getServerSnapshot
+function PricingTable({
+  plans,
+  currentPlanId,
+  onSelect
+}) {
+  const [isAnnual, setIsAnnual] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: "var(--nozle-background, var(--background))",
+        color: "var(--nozle-foreground, var(--foreground))"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "0.5rem",
+              justifyContent: "center",
+              marginBottom: "1.5rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsAnnual(false),
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "var(--nozle-radius, 0.5rem)",
+                    border: "1px solid var(--nozle-border, var(--border))",
+                    background: !isAnnual ? "var(--nozle-primary, var(--primary))" : "transparent",
+                    color: !isAnnual ? "var(--nozle-primary-foreground, var(--primary-foreground))" : "var(--nozle-foreground, var(--foreground))",
+                    cursor: "pointer",
+                    fontWeight: !isAnnual ? 600 : 400
+                  },
+                  "aria-pressed": !isAnnual,
+                  children: "Monthly"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsAnnual(true),
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "var(--nozle-radius, 0.5rem)",
+                    border: "1px solid var(--nozle-border, var(--border))",
+                    background: isAnnual ? "var(--nozle-primary, var(--primary))" : "transparent",
+                    color: isAnnual ? "var(--nozle-primary-foreground, var(--primary-foreground))" : "var(--nozle-foreground, var(--foreground))",
+                    cursor: "pointer",
+                    fontWeight: isAnnual ? 600 : 400
+                  },
+                  "aria-pressed": isAnnual,
+                  children: "Annual"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
+              gap: "1rem"
+            },
+            children: plans.map((plan) => /* @__PURE__ */ jsx(
+              PlanCard,
+              {
+                ...plan,
+                isAnnual,
+                isCurrent: plan.id === currentPlanId,
+                onSelect: onSelect ? () => onSelect(plan.id) : void 0
+              },
+              plan.id
+            ))
+          }
+        )
+      ]
+    }
   );
-  if (state.error) {
-    return { data: null, isLoading: false, error: state.error };
-  }
-  if (state.entitlements === null) {
-    return { data: null, isLoading: true, error: null };
-  }
-  return {
-    data: {
-      plan_slug: state.entitlements.plan_slug,
-      subscription_status: state.entitlements.subscription_status
-    },
-    isLoading: false,
-    error: null
-  };
 }
-function useCheckout() {
-  const { store, stripePromise } = useBillingContext();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const fetchClientSecret = useCallback(
-    async (planCode, successUrl) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        return await store.fetchCheckoutSecret(planCode, successUrl);
-      } catch (err) {
-        const e = err instanceof Error ? err : new Error(String(err));
-        setError(e);
-        throw e;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [store]
+function PlanComparison({
+  plans,
+  features
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        overflowX: "auto",
+        background: "var(--nozle-background, var(--background))"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            fontSize: "0.875rem",
+            color: "var(--nozle-foreground, var(--foreground))"
+          },
+          children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx(
+                "th",
+                {
+                  style: {
+                    padding: "0.75rem 1rem",
+                    textAlign: "left",
+                    borderBottom: "1px solid var(--nozle-border, var(--border))",
+                    color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+                    fontWeight: 500
+                  },
+                  children: "Feature"
+                }
+              ),
+              plans.map((plan) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  style: {
+                    padding: "0.75rem 1rem",
+                    textAlign: "center",
+                    borderBottom: "1px solid var(--nozle-border, var(--border))",
+                    fontWeight: 600,
+                    color: "var(--nozle-foreground, var(--foreground))"
+                  },
+                  children: plan.name
+                },
+                plan.id
+              ))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: features.map((feature) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx(
+                "td",
+                {
+                  style: {
+                    padding: "0.75rem 1rem",
+                    borderBottom: "1px solid var(--nozle-border, var(--border))",
+                    color: "var(--nozle-foreground, var(--foreground))"
+                  },
+                  children: feature.label
+                }
+              ),
+              plans.map((plan) => {
+                const value = feature.values[plan.id];
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "center",
+                      borderBottom: "1px solid var(--nozle-border, var(--border))"
+                    },
+                    children: typeof value === "boolean" ? value ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--nozle-primary, var(--primary))"
+                        },
+                        "aria-label": "Included",
+                        children: "\u2713"
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--nozle-muted-foreground, var(--muted-foreground))"
+                        },
+                        "aria-label": "Not included",
+                        children: "\u2715"
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { children: value ?? "\u2014" })
+                  },
+                  plan.id
+                );
+              })
+            ] }, feature.key)) })
+          ]
+        }
+      )
+    }
   );
-  return { fetchClientSecret, stripePromise, isLoading, error };
 }
-function useSubscribe() {
-  const { store } = useBillingContext();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const subscribe = useCallback(
-    async (planCode) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const res = await fetch(`${store.baseUrl}/v1/subscribe`, {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${store.apiKey}`,
-            "Content-Type": "application/json"
+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);
           },
-          body: JSON.stringify({
-            plan_code: planCode,
-            customer_id: store.customerId
-          })
+          modal: {
+            ondismiss: () => setLoading(false)
+          }
         });
-        if (!res.ok) throw new Error("Failed to create subscription");
-        return await res.json();
-      } catch (err) {
-        const e = err instanceof Error ? err : new Error(String(err));
-        setError(e);
-        throw e;
-      } finally {
-        setIsLoading(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"));
       }
-    },
-    [store]
+    } 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
+    }
   );
-  return { subscribe, isLoading, error };
 }
-function usePlans() {
-  const { store } = useBillingContext();
-  const [plans, setPlans] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    store.fetchPlans().then(setPlans).finally(() => setIsLoading(false));
-  }, [store]);
-  return { plans, isLoading };
-}
-var fontFamily = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-var levelColors = {
-  normal: {
-    fg: "#6366f1",
-    bg: "rgba(99, 102, 241, 0.08)",
-    trackBg: "#e5e7eb"
-  },
-  warning: {
-    fg: "#f59e0b",
-    bg: "rgba(245, 158, 11, 0.08)",
-    trackBg: "#e5e7eb"
-  },
-  critical: {
-    fg: "#ef4444",
-    bg: "rgba(239, 68, 68, 0.08)",
-    trackBg: "#e5e7eb"
+var CheckoutContext = createContext(null);
+function useCheckout() {
+  const ctx = useContext(CheckoutContext);
+  if (ctx === null) {
+    throw new Error("useCheckout must be used inside a <Checkout> component");
   }
-};
-var skeletonStyleInjected = false;
-function ensureKeyframes() {
-  if (skeletonStyleInjected || typeof document === "undefined") return;
-  const sheet = document.createElement("style");
-  sheet.textContent = `@keyframes nozle-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
-  document.head.appendChild(sheet);
-  skeletonStyleInjected = true;
+  return ctx;
 }
-function UsageMeter({
-  metric,
-  variant = "bar",
+function buildStripeAppearance() {
+  if (typeof document === "undefined") {
+    return { theme: "stripe" };
+  }
+  const style = getComputedStyle(document.documentElement);
+  const get = (prop, fallback) => style.getPropertyValue(prop).trim() || fallback;
+  return {
+    theme: "stripe",
+    variables: {
+      colorPrimary: get("--nozle-primary", "#16a34a"),
+      colorBackground: get("--nozle-background", "#f8fafc"),
+      colorText: get("--nozle-foreground", "#1e293b"),
+      colorDanger: get("--nozle-destructive", "#dc2626"),
+      borderRadius: get("--nozle-radius", "0.5rem"),
+      fontFamily: "inherit"
+    }
+  };
+}
+function CheckoutInner({
+  submitLabel,
+  onSuccess,
+  onError,
+  onReady,
   className,
-  style,
-  ...props
+  style
 }) {
-  const { data, isLoading, error } = useUsage(metric);
-  if (isLoading) {
-    ensureKeyframes();
-    if (variant === "minimal") {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-nozle": "usage-meter",
-          "data-variant": "minimal",
-          className,
-          style: {
-            display: "inline-block",
-            width: 80,
-            height: 16,
-            borderRadius: 4,
-            background: "#e5e7eb",
-            animation: "nozle-pulse 1.5s ease-in-out infinite",
-            ...style
-          },
-          ...props
+  const stripe = useStripe();
+  const elements = useElements();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  async function confirmPayment() {
+    if (!stripe || !elements) return;
+    setIsProcessing(true);
+    setError(null);
+    const result = await stripe.confirmPayment({
+      elements,
+      confirmParams: { return_url: window.location.href },
+      redirect: "if_required"
+    });
+    setIsProcessing(false);
+    if (result.error) {
+      const err = new Error(result.error.message ?? "Payment failed");
+      setError(err);
+      onError?.(err);
+    } else if (result.paymentIntent?.status === "succeeded") {
+      onSuccess?.(result.paymentIntent.id);
+    }
+  }
+  return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value: { confirmPayment, isProcessing, error }, children: /* @__PURE__ */ jsxs("div", { className, style, children: [
+    /* @__PURE__ */ jsx("style", { children: `@keyframes nozle-skeleton-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }` }),
+    !isReady && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "checkout-skeleton",
+        style: {
+          height: "200px",
+          borderRadius: "var(--nozle-radius, 0.5rem)",
+          background: "linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)",
+          backgroundSize: "200% 100%",
+          animation: "nozle-skeleton-pulse 1.5s ease-in-out infinite"
         }
-      );
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaymentElement,
+      {
+        onReady: () => {
+          setIsReady(true);
+          onReady?.();
+        }
+      }
+    ),
+    error !== null && /* @__PURE__ */ jsx("p", { style: { color: "var(--nozle-destructive, #dc2626)", margin: "0.5rem 0 0" }, children: error.message }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void confirmPayment(),
+        disabled: isProcessing || !stripe,
+        "aria-busy": isProcessing,
+        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: isProcessing ? "not-allowed" : "pointer",
+          fontWeight: 500,
+          opacity: isProcessing ? 0.7 : 1,
+          marginTop: "1rem",
+          width: "100%"
+        },
+        children: isProcessing ? "Processing..." : submitLabel ?? "Pay now"
+      }
+    )
+  ] }) });
+}
+function Checkout({
+  clientSecret,
+  publishableKey,
+  stripeAccount,
+  submitLabel,
+  onSuccess,
+  onError,
+  onReady,
+  className,
+  style
+}) {
+  const stripePromise = useMemo(
+    () => loadStripe(publishableKey, stripeAccount ? { stripeAccount } : void 0),
+    [publishableKey, stripeAccount]
+  );
+  const appearance = useMemo(() => buildStripeAppearance(), []);
+  const options = { clientSecret, appearance };
+  return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options, children: /* @__PURE__ */ jsx(
+    CheckoutInner,
+    {
+      submitLabel,
+      onSuccess,
+      onError,
+      onReady,
+      className,
+      style
+    }
+  ) }, clientSecret);
+}
+function UpgradeModal({
+  isOpen,
+  targetPlanId,
+  customerId,
+  apiBaseUrl = "https://api.nozle.app",
+  apiKey = "",
+  onConfirm,
+  onCancel
+}) {
+  const [preview, setPreview] = useState(null);
+  const [loading, setLoading] = useState(false);
+  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);
+    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`);
+      }
+      onConfirm?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upgrade failed";
+      setError(message);
+    } 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))"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: overlayStyle,
+      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",
+                {
+                  onClick: onCancel,
+                  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: confirming,
+                  children: "Cancel"
+                }
+              ),
+              /* @__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"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function UpgradeButton({
+  targetPlanId,
+  label = "Upgrade",
+  apiBaseUrl = "https://api.nozle.app",
+  className,
+  style,
+  onUpgraded
+}) {
+  const { customerId, apiKey } = useBillingPortal();
+  const [isOpen, setIsOpen] = useState(false);
+  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
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      UpgradeModal,
+      {
+        isOpen,
+        targetPlanId,
+        customerId,
+        apiBaseUrl,
+        apiKey,
+        onConfirm: () => {
+          setIsOpen(false);
+          onUpgraded?.();
+        },
+        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}`
+        },
+        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
+        },
+        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}`
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function FeatureGate({
+  customerId,
+  feature,
+  fallback = null,
+  children
+}) {
+  const { allowed, loading } = useCan(customerId, feature);
+  if (loading) {
+    return null;
+  }
+  if (!allowed) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function UsageGate({
+  usage,
+  limit,
+  fallback = null,
+  children
+}) {
+  if (usage >= limit) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function PlanGate({
+  currentPlan,
+  allowedPlans,
+  fallback = null,
+  children
+}) {
+  if (!allowedPlans.includes(currentPlan)) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function UpgradePrompt({
+  text = "Upgrade to access this feature",
+  planName,
+  onUpgrade
+}) {
+  const displayText = planName ? `Upgrade to ${planName} to access this feature` : text;
+  function handleUpgrade() {
+    if (onUpgrade) {
+      onUpgrade();
+    } else {
+      window.location.href = "/upgrade";
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.75rem",
+        padding: "1rem",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              color: "var(--nozle-foreground, var(--foreground))",
+              fontSize: "0.875rem",
+              margin: 0
+            },
+            children: displayText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleUpgrade,
+            style: {
+              padding: "0.5rem 1.25rem",
+              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,
+              fontSize: "0.875rem"
+            },
+            children: "Upgrade"
+          }
+        )
+      ]
+    }
+  );
+}
+function LockedOverlay({
+  locked,
+  upgradeText,
+  upgradePlanName,
+  onUpgrade,
+  children
+}) {
+  if (!locked) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          filter: "blur(4px)",
+          pointerEvents: "none",
+          userSelect: "none"
+        },
+        "aria-hidden": "true",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--nozle-background, var(--background))",
+          opacity: 0.92,
+          borderRadius: "var(--nozle-radius, 0.5rem)"
+        },
+        role: "dialog",
+        "aria-label": "Feature locked \u2014 upgrade required",
+        children: /* @__PURE__ */ jsx(
+          UpgradePrompt,
+          {
+            text: upgradeText,
+            planName: upgradePlanName,
+            onUpgrade
+          }
+        )
+      }
+    )
+  ] });
+}
+function getUsageMeterColor(percentage) {
+  if (percentage >= 95) return "var(--nozle-destructive, var(--destructive))";
+  if (percentage >= 80) return "var(--nozle-warning, var(--warning))";
+  return "var(--nozle-primary, var(--primary))";
+}
+function UsageMeter({
+  used,
+  limit,
+  label,
+  showText = true
+}) {
+  const percentage = limit > 0 ? Math.min(100, used / limit * 100) : 0;
+  const color = getUsageMeterColor(percentage);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      showText && /* @__PURE__ */ jsxs("span", { style: { color }, children: [
+        used.toLocaleString(),
+        " / ",
+        limit.toLocaleString()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-2 rounded-full overflow-hidden",
+        style: { background: "var(--nozle-border, var(--border))" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: {
+              width: `${percentage}%`,
+              background: color,
+              transition: "width 0.3s ease"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function UsageDashboard({
+  features = [],
+  loading = false
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "animate-pulse space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-8 rounded",
+        style: { background: "var(--nozle-border, var(--border))" }
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: features.map((f) => /* @__PURE__ */ jsx(UsageMeter, { used: f.used, limit: f.limit, label: f.label }, f.key)) });
+}
+function UsageAlert({
+  features,
+  threshold = 80,
+  upgradeHref = "/plans"
+}) {
+  const [dismissed, setDismissed] = useState(/* @__PURE__ */ new Set());
+  const alertFeatures = features.filter(
+    (f) => f.percentage >= threshold && !dismissed.has(f.key)
+  );
+  if (alertFeatures.length === 0) {
+    return null;
+  }
+  const handleDismiss = (key) => {
+    setDismissed((prev) => new Set(prev).add(key));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: alertFeatures.map((f) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: "flex items-center justify-between rounded-md px-4 py-3 text-sm",
+      style: {
+        background: "var(--nozle-warning-bg, var(--warning-bg, #fef9c3))",
+        color: "var(--nozle-warning-text, var(--warning-text, #854d0e))",
+        border: "1px solid var(--nozle-warning-border, var(--warning-border, #fde047))"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: { marginRight: "0.5rem", fontSize: "1rem" },
+              children: "\u26A0"
+            }
+          ),
+          "You're approaching your ",
+          /* @__PURE__ */ jsx("strong", { children: f.label }),
+          " limit (",
+          Math.round(f.percentage),
+          "%).",
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: upgradeHref,
+              style: {
+                color: "inherit",
+                fontWeight: 600,
+                textDecoration: "underline"
+              },
+              children: "Upgrade"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleDismiss(f.key),
+            "aria-label": `Dismiss ${f.label} alert`,
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "0 0 0 0.75rem",
+              fontSize: "1rem",
+              color: "inherit"
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    },
+    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)"
+  },
+  deduct: {
+    background: "var(--nozle-destructive-bg, #fee2e2)",
+    color: "var(--nozle-destructive, #dc2626)"
+  },
+  purchase: {
+    background: "var(--nozle-info-bg, #dbeafe)",
+    color: "var(--nozle-info, #2563eb)"
+  },
+  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"
+  }
+};
+function PlanBadge({ plan, tier = "free" }) {
+  const style = TIER_STYLES[tier] ?? TIER_STYLES.free;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        ...style,
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0.125rem 0.5rem",
+        borderRadius: "9999px",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        lineHeight: "1.25rem",
+        whiteSpace: "nowrap"
+      },
+      children: plan
+    }
+  );
+}
+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;
     }
-    if (variant === "ring") {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-nozle": "usage-meter",
-          "data-variant": "ring",
-          className,
-          style: {
-            width: 96,
-            height: 96,
-            borderRadius: "50%",
-            background: "#e5e7eb",
-            animation: "nozle-pulse 1.5s ease-in-out infinite",
-            ...style
-          },
-          ...props
+    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);
+        }
+      }
     }
-    return /* @__PURE__ */ jsx(
+    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",
       {
-        "data-nozle": "usage-meter",
-        "data-variant": "bar",
-        className,
+        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: {
-          maxWidth: 360,
-          fontFamily,
-          ...style
+          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+          fontSize: "0.875rem",
+          textAlign: "center",
+          padding: "1.5rem"
         },
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              height: 8,
-              borderRadius: 4,
-              background: "#e5e7eb",
-              animation: "nozle-pulse 1.5s ease-in-out infinite"
-            }
-          }
-        )
+        children: "No invoices yet."
       }
     );
   }
-  if (error || !data) return null;
-  const percent = data.limit > 0 ? Math.round(data.used / data.limit * 100) : 0;
-  const level = percent >= 90 ? "critical" : percent >= 75 ? "warning" : "normal";
-  const colors = levelColors[level];
-  if (variant === "minimal") {
-    const minimalStyle = {
-      fontFamily,
-      fontSize: 13,
-      fontWeight: 500,
-      color: colors.fg,
-      background: colors.bg,
-      padding: "3px 8px",
-      borderRadius: 6,
-      whiteSpace: "nowrap",
-      ...style
-    };
-    return /* @__PURE__ */ jsxs(
-      "span",
+  return /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(
+      "tr",
       {
-        "data-nozle": "usage-meter",
-        "data-variant": "minimal",
-        "data-level": level,
-        className,
-        style: minimalStyle,
-        ...props,
+        style: {
+          borderBottom: "1px solid var(--nozle-border, var(--border))",
+          fontSize: "0.75rem",
+          color: "var(--nozle-muted-foreground, var(--muted-foreground))"
+        },
         children: [
-          data.used.toLocaleString(),
-          "/",
-          data.limit.toLocaleString()
+          /* @__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" })
         ]
       }
-    );
-  }
-  if (variant === "ring") {
-    const size = 96;
-    const strokeWidth = 7;
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference - percent / 100 * circumference;
-    const containerStyle = {
-      position: "relative",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: size,
-      height: size,
-      fontFamily,
-      ...style
-    };
-    const labelStyle2 = {
-      position: "absolute",
-      inset: 0,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      fontWeight: 700,
-      fontSize: 20,
-      lineHeight: 1,
-      color: colors.fg
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
+    ) }),
+    /* @__PURE__ */ jsx("tbody", { children: invoices.map((inv) => /* @__PURE__ */ jsxs(
+      "tr",
       {
-        "data-nozle": "usage-meter",
-        "data-variant": "ring",
-        "data-level": level,
-        className,
-        style: containerStyle,
-        ...props,
+        style: {
+          borderBottom: "1px solid var(--nozle-border, var(--border))",
+          fontSize: "0.875rem"
+        },
         children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
+          /* @__PURE__ */ jsx(
+            "td",
             {
-              viewBox: `0 0 ${size} ${size}`,
-              width: size,
-              height: size,
-              style: { display: "block", transform: "rotate(-90deg)" },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: size / 2,
-                    cy: size / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: colors.trackBg,
-                    strokeWidth
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: size / 2,
-                    cy: size / 2,
-                    r: radius,
-                    fill: "none",
-                    stroke: colors.fg,
-                    strokeWidth,
-                    strokeDasharray: circumference,
-                    strokeDashoffset: offset,
-                    strokeLinecap: "round",
-                    style: { transition: "stroke-dashoffset 0.4s ease" }
-                  }
-                )
-              ]
+              style: {
+                padding: "0.5rem",
+                color: "var(--nozle-muted-foreground, var(--muted-foreground))"
+              },
+              children: inv.number
             }
           ),
-          /* @__PURE__ */ jsxs("span", { "data-nozle": "usage-meter-label", style: labelStyle2, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              percent,
-              "%"
-            ] }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: 10,
-                  fontWeight: 400,
-                  color: "#6b7280",
-                  marginTop: 2
-                },
-                children: "used"
-              }
-            )
-          ] })
+          /* @__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"
+            }
+          ) })
         ]
-      }
-    );
-  }
-  const cardStyle = {
-    fontFamily,
-    maxWidth: 360,
-    background: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: 12,
-    padding: "16px 20px",
-    boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
-    ...style
-  };
-  const headerStyle = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "baseline",
-    marginBottom: 10
-  };
-  const labelStyle = {
-    fontSize: 13,
-    fontWeight: 500,
-    color: "#374151"
-  };
-  const valueStyle = {
-    fontSize: 13,
-    fontWeight: 600,
-    color: colors.fg
-  };
-  const trackStyle = {
-    height: 8,
-    borderRadius: 4,
-    background: colors.trackBg,
-    overflow: "hidden"
-  };
-  const fillStyle = {
-    height: "100%",
-    borderRadius: 4,
-    background: colors.fg,
-    width: `${Math.min(percent, 100)}%`,
-    transition: "width 0.4s ease"
-  };
+      },
+      inv.id
+    )) })
+  ] });
+}
+function Section({
+  title,
+  children
+}) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-nozle": "usage-meter",
-      "data-variant": "bar",
-      "data-level": level,
-      className,
-      style: cardStyle,
-      ...props,
+      style: {
+        padding: "1.25rem",
+        border: "1px solid var(--nozle-border, var(--border))",
+        borderRadius: "0.75rem",
+        background: "var(--nozle-card, var(--card, #ffffff))"
+      },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
-          /* @__PURE__ */ jsxs("span", { "data-nozle": "usage-meter-label", style: labelStyle, children: [
-            data.used.toLocaleString(),
-            " / ",
-            data.limit.toLocaleString()
-          ] }),
-          /* @__PURE__ */ jsxs("span", { style: valueStyle, children: [
-            percent,
-            "%"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { "data-nozle": "usage-meter-track", style: trackStyle, children: /* @__PURE__ */ jsx("div", { "data-nozle": "usage-meter-fill", style: fillStyle }) })
+        /* @__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
       ]
     }
   );
 }
-var fontFamily2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-var statusColorMap = {
-  active: { dot: "#22c55e", bg: "rgba(34, 197, 94, 0.08)", text: "#15803d" },
-  trialing: { dot: "#6366f1", bg: "rgba(99, 102, 241, 0.08)", text: "#4f46e5" },
-  past_due: { dot: "#f59e0b", bg: "rgba(245, 158, 11, 0.08)", text: "#b45309" },
-  canceled: { dot: "#6b7280", bg: "rgba(107, 114, 128, 0.08)", text: "#4b5563" },
-  unpaid: { dot: "#ef4444", bg: "rgba(239, 68, 68, 0.08)", text: "#dc2626" },
-  incomplete: { dot: "#f59e0b", bg: "rgba(245, 158, 11, 0.08)", text: "#b45309" }
-};
-var defaultStatusColors = { dot: "#6366f1", bg: "rgba(99, 102, 241, 0.08)", text: "#4f46e5" };
-function getStatusColors(status) {
-  return statusColorMap[status] ?? defaultStatusColors;
-}
-var skeletonStyleInjected2 = false;
-function ensureKeyframes2() {
-  if (skeletonStyleInjected2 || typeof document === "undefined") return;
-  const sheet = document.createElement("style");
-  sheet.textContent = `@keyframes nozle-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
-  document.head.appendChild(sheet);
-  skeletonStyleInjected2 = true;
-}
-function PlanBadge({
-  variant = "pill",
-  className,
-  style,
-  ...props
+function BillingPortal({
+  customerId,
+  usageFeatures,
+  usageLoading = false,
+  onChangePlan
 }) {
-  const { data, isLoading, error } = usePlan();
-  if (isLoading) {
-    ensureKeyframes2();
-    if (variant === "icon") {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-nozle": "plan-badge",
-          "data-variant": "icon",
-          className,
-          style: {
-            display: "inline-block",
-            width: 32,
-            height: 32,
-            borderRadius: "50%",
-            background: "#e5e7eb",
-            animation: "nozle-pulse 1.5s ease-in-out infinite",
-            ...style
-          },
-          ...props
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-nozle": "plan-badge",
-        "data-variant": variant,
-        className,
-        style: {
-          display: "inline-block",
-          width: 72,
-          height: 22,
-          borderRadius: variant === "pill" ? 999 : 4,
-          background: "#e5e7eb",
-          animation: "nozle-pulse 1.5s ease-in-out infinite",
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-  if (error || !data) return null;
-  const statusLabel = data.subscription_status.replace(/_/g, " ");
-  const colors = getStatusColors(data.subscription_status);
-  const planName = data.plan_slug;
-  if (variant === "text") {
-    const textStyle = {
-      fontFamily: fontFamily2,
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 6,
-      fontSize: 14,
-      fontWeight: 500,
-      color: "#111827",
-      ...style
-    };
-    const dotStyle2 = {
-      width: 8,
-      height: 8,
-      borderRadius: "50%",
-      background: colors.dot,
-      flexShrink: 0
-    };
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        "data-nozle": "plan-badge",
-        "data-variant": "text",
-        "data-status": data.subscription_status,
-        className,
-        style: textStyle,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { style: dotStyle2, "aria-hidden": "true" }),
-          planName
-        ]
-      }
-    );
-  }
-  if (variant === "icon") {
-    const iconStyle = {
-      fontFamily: fontFamily2,
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: 32,
-      height: 32,
-      borderRadius: "50%",
-      background: colors.bg,
-      color: colors.text,
-      fontSize: 14,
-      fontWeight: 700,
-      lineHeight: 1,
-      flexShrink: 0,
-      ...style
-    };
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-nozle": "plan-badge",
-        "data-variant": "icon",
-        "data-status": data.subscription_status,
-        className,
-        style: iconStyle,
-        title: `${planName} (${statusLabel})`,
-        ...props,
-        children: planName.charAt(0).toUpperCase()
-      }
-    );
-  }
-  const pillStyle = {
-    fontFamily: fontFamily2,
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: 1.4,
-    color: colors.text,
-    background: colors.bg,
-    padding: "4px 12px",
-    borderRadius: 999,
-    whiteSpace: "nowrap",
-    ...style
-  };
-  const dotStyle = {
-    width: 6,
-    height: 6,
-    borderRadius: "50%",
-    background: colors.dot,
-    flexShrink: 0
-  };
   return /* @__PURE__ */ jsxs(
-    "span",
+    "div",
     {
-      "data-nozle": "plan-badge",
-      "data-variant": "pill",
-      "data-status": data.subscription_status,
-      className,
-      style: pillStyle,
-      ...props,
+      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("span", { style: dotStyle, "aria-hidden": "true" }),
-        planName
+        /* @__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 fontFamily3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-var primaryColor = "#6366f1";
-var primaryHover = "#4f46e5";
-function UpgradePrompt({
-  feature,
-  variant = "card",
-  upgradeUrl = "/upgrade",
-  message = "Upgrade your plan to unlock this feature",
-  className,
-  style,
-  ...props
+var BRAND_LABELS = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "American Express",
+  discover: "Discover",
+  jcb: "JCB",
+  diners: "Diners Club",
+  unionpay: "UnionPay"
+};
+function PaymentMethodDisplay({
+  paymentMethod,
+  onUpdatePaymentMethod,
+  updateHref = "/billing/update-payment"
 }) {
-  const { allowed, isLoading } = useCan(feature ?? "");
-  if (isLoading || allowed || !feature) return null;
-  if (variant === "inline") {
-    const inlineStyle = {
-      fontFamily: fontFamily3,
-      fontSize: 13,
-      color: "#6b7280",
-      ...style
-    };
-    const linkStyle = {
-      color: primaryColor,
-      fontWeight: 600,
-      textDecoration: "none",
-      marginLeft: 4
-    };
-    return /* @__PURE__ */ jsxs(
-      "span",
+  const handleUpdate = () => {
+    if (onUpdatePaymentMethod) {
+      onUpdatePaymentMethod();
+    } else {
+      window.location.href = updateHref;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    paymentMethod ? /* @__PURE__ */ jsxs(
+      "div",
       {
-        "data-nozle": "upgrade-prompt",
-        "data-variant": "inline",
-        className,
-        style: inlineStyle,
-        ...props,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75rem",
+          padding: "0.75rem 1rem",
+          border: "1px solid var(--nozle-border, var(--border))",
+          borderRadius: "0.5rem",
+          fontSize: "0.875rem"
+        },
         children: [
-          message,
           /* @__PURE__ */ jsx(
-            "a",
+            "span",
             {
-              href: upgradeUrl,
-              "data-nozle": "upgrade-prompt-link",
-              style: linkStyle,
-              onMouseEnter: (e) => {
-                e.currentTarget.style.textDecoration = "underline";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.textDecoration = "none";
+              style: {
+                fontWeight: 600,
+                color: "var(--nozle-foreground, var(--foreground))"
               },
-              children: "Upgrade"
+              children: BRAND_LABELS[paymentMethod.brand.toLowerCase()] ?? paymentMethod.brand
             }
-          )
-        ]
-      }
-    );
-  }
-  if (variant === "banner") {
-    const bannerStyle = {
-      fontFamily: fontFamily3,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: 16,
-      background: "rgba(99, 102, 241, 0.06)",
-      border: "1px solid rgba(99, 102, 241, 0.15)",
-      borderRadius: 10,
-      padding: "12px 20px",
-      ...style
-    };
-    const msgStyle2 = {
-      fontSize: 14,
-      fontWeight: 500,
-      color: "#374151",
-      flex: 1
-    };
-    const btnStyle2 = {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: 13,
-      fontWeight: 600,
-      color: "#ffffff",
-      background: primaryColor,
-      border: "none",
-      borderRadius: 8,
-      padding: "8px 18px",
-      textDecoration: "none",
-      cursor: "pointer",
-      whiteSpace: "nowrap",
-      transition: "background 0.15s ease"
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-nozle": "upgrade-prompt",
-        "data-variant": "banner",
-        className,
-        style: bannerStyle,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("span", { "data-nozle": "upgrade-prompt-message", style: msgStyle2, children: message }),
-          /* @__PURE__ */ jsx(
-            "a",
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
             {
-              href: upgradeUrl,
-              "data-nozle": "upgrade-prompt-action",
-              style: btnStyle2,
-              onMouseEnter: (e) => {
-                e.currentTarget.style.background = primaryHover;
+              style: {
+                color: "var(--nozle-muted-foreground, var(--muted-foreground))"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.background = primaryColor;
+              children: [
+                "\u2022\u2022\u2022\u2022 ",
+                paymentMethod.last4
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+                fontSize: "0.75rem"
               },
-              children: "Upgrade"
+              children: [
+                "Expires ",
+                String(paymentMethod.expMonth).padStart(2, "0"),
+                "/",
+                String(paymentMethod.expYear).slice(-2)
+              ]
             }
           )
         ]
       }
-    );
-  }
-  const cardStyle = {
-    fontFamily: fontFamily3,
-    maxWidth: 400,
-    background: "#ffffff",
-    border: "1px solid #e5e7eb",
-    borderRadius: 16,
-    padding: 24,
-    boxShadow: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
-    textAlign: "center",
-    ...style
-  };
-  const iconWrapStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 48,
-    height: 48,
-    borderRadius: 12,
-    background: "rgba(99, 102, 241, 0.08)",
-    marginBottom: 16
+    ) : /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          color: "var(--nozle-muted-foreground, var(--muted-foreground))",
+          fontSize: "0.875rem"
+        },
+        children: "No payment method on file."
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleUpdate,
+        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: "Update Payment Method"
+      }
+    )
+  ] });
+}
+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 msgStyle = {
-    fontSize: 15,
-    fontWeight: 500,
-    color: "#374151",
-    lineHeight: 1.5,
-    margin: 0,
-    marginBottom: 20
+  const handleConfirmCancel = () => {
+    setStep("reason");
   };
-  const btnStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: 14,
-    fontWeight: 600,
-    color: "#ffffff",
-    background: primaryColor,
-    border: "none",
-    borderRadius: 10,
-    padding: "10px 24px",
-    textDecoration: "none",
-    cursor: "pointer",
-    transition: "background 0.15s ease",
-    width: "100%"
+  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?.();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-nozle": "upgrade-prompt",
-      "data-variant": "card",
-      className,
-      style: cardStyle,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { "data-nozle": "upgrade-prompt-content", children: [
-          /* @__PURE__ */ jsx("div", { style: iconWrapStyle, children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: primaryColor,
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx("p", { "data-nozle": "upgrade-prompt-message", style: msgStyle, children: message })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "a",
+  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",
           {
-            href: upgradeUrl,
-            "data-nozle": "upgrade-prompt-action",
-            style: btnStyle,
-            onMouseEnter: (e) => {
-              e.currentTarget.style.background = primaryHover;
+            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)"
             },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.background = primaryColor;
+            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: "Upgrade Now"
+            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 { BillingProvider, PlanBadge, UpgradePrompt, UsageMeter, useBillingContext, useCan, useCheckout, usePlan, usePlans, useSubscribe, useUsage };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map