@nozle-js/react 0.5.1 → 0.5.2

package/dist/index.d.cts

@@ -124,6 +124,27 @@ interface BillingPortalProviderProps {
  */
 declare function BillingPortalProvider({ customerId, apiKey, children, }: BillingPortalProviderProps): React.ReactElement;
 
+interface PricingPlan {
+    code: string;
+    name: string;
+    amount_cents: number;
+    amount_currency: string;
+    interval: string;
+    description?: string;
+}
+interface PricingTableProps {
+    customerId?: string;
+    currentPlanCode?: string;
+    plans?: PricingPlan[];
+    features?: string[][];
+    onSelect?: (plan: PricingPlan) => void;
+    showToggle?: boolean;
+    highlightPlan?: string;
+    className?: string;
+    enterpriseEmail?: string;
+}
+declare function PricingTable({ customerId, currentPlanCode, plans: propPlans, features, onSelect, showToggle, highlightPlan, className, enterpriseEmail, }: PricingTableProps): React.ReactElement;
+
 /**
  * PlanCard — Individual pricing plan card component.
  * UI-01: Shows plan name, price, interval, features list, and CTA button.
@@ -150,32 +171,6 @@ interface PlanCardProps extends Plan {
  */
 declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, onSelect, }: PlanCardProps): React.ReactElement;
 
-/**
- * PricingTable — Renders plan cards with monthly/annual toggle.
- * UI-01: Responsive grid, monthly/annual toggle, highlights currentPlanId.
- * Uses CSS variable theming with --nozle-* namespace.
- */
-
-interface PricingTableProps {
-    plans: Plan[];
-    currentPlanId?: string;
-    onSelect?: (planId: string) => void;
-}
-/**
- * PricingTable renders plan cards in a responsive grid with monthly/annual toggle.
- * The current plan is highlighted with aria-current="true" and border-primary class.
- *
- * Usage:
- * ```tsx
- * <PricingTable
- *   plans={plans}
- *   currentPlanId="pro"
- *   onSelect={(planId) => handleUpgrade(planId)}
- * />
- * ```
- */
-declare function PricingTable({ plans, currentPlanId, onSelect, }: PricingTableProps): React.ReactElement;
-
 /**
  * PlanComparison — Side-by-side feature comparison table.
  * UI-01: Renders shadcn-style table with plan names as headers and features as rows.
@@ -633,4 +628,4 @@ interface CancelSubscriptionButtonProps {
 }
 declare function CancelSubscriptionButton({ subscriptionId, onCancelled, }: CancelSubscriptionButtonProps): react_jsx_runtime.JSX.Element;
 
-export { BillingContext, type BillingContextValue, BillingPortal, type BillingPortalContextValue, type BillingPortalProps, BillingPortalProvider, type BillingPortalProviderProps, BillingProvider, type BillingProviderProps, CANCEL_REASONS, type CanState, CancelSubscriptionButton, type CancelSubscriptionButtonProps, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type ComparisonFeature, CreditBalance, type CreditBalanceProps, CreditHistory, type CreditHistoryProps, CreditTopUpButton, type CreditTopUpButtonProps, type CreditTransaction, type CreditsState, CurrentPlan, type CurrentPlanData, type CurrentPlanProps, FeatureGate, type FeatureGateProps, type Invoice, InvoiceList, type InvoiceListProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, PricingTable, type PricingTableProps, type ProrationPreview, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageState, type UseCheckoutResult, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };
+export { BillingContext, type BillingContextValue, BillingPortal, type BillingPortalContextValue, type BillingPortalProps, BillingPortalProvider, type BillingPortalProviderProps, BillingProvider, type BillingProviderProps, CANCEL_REASONS, type CanState, CancelSubscriptionButton, type CancelSubscriptionButtonProps, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type ComparisonFeature, CreditBalance, type CreditBalanceProps, CreditHistory, type CreditHistoryProps, CreditTopUpButton, type CreditTopUpButtonProps, type CreditTransaction, type CreditsState, CurrentPlan, type CurrentPlanData, type CurrentPlanProps, FeatureGate, type FeatureGateProps, type Invoice, InvoiceList, type InvoiceListProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PricingPlan, PricingTable, type PricingTableProps, type ProrationPreview, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageState, type UseCheckoutResult, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };

package/dist/index.d.ts

@@ -124,6 +124,27 @@ interface BillingPortalProviderProps {
  */
 declare function BillingPortalProvider({ customerId, apiKey, children, }: BillingPortalProviderProps): React.ReactElement;
 
+interface PricingPlan {
+    code: string;
+    name: string;
+    amount_cents: number;
+    amount_currency: string;
+    interval: string;
+    description?: string;
+}
+interface PricingTableProps {
+    customerId?: string;
+    currentPlanCode?: string;
+    plans?: PricingPlan[];
+    features?: string[][];
+    onSelect?: (plan: PricingPlan) => void;
+    showToggle?: boolean;
+    highlightPlan?: string;
+    className?: string;
+    enterpriseEmail?: string;
+}
+declare function PricingTable({ customerId, currentPlanCode, plans: propPlans, features, onSelect, showToggle, highlightPlan, className, enterpriseEmail, }: PricingTableProps): React.ReactElement;
+
 /**
  * PlanCard — Individual pricing plan card component.
  * UI-01: Shows plan name, price, interval, features list, and CTA button.
@@ -150,32 +171,6 @@ interface PlanCardProps extends Plan {
  */
 declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, onSelect, }: PlanCardProps): React.ReactElement;
 
-/**
- * PricingTable — Renders plan cards with monthly/annual toggle.
- * UI-01: Responsive grid, monthly/annual toggle, highlights currentPlanId.
- * Uses CSS variable theming with --nozle-* namespace.
- */
-
-interface PricingTableProps {
-    plans: Plan[];
-    currentPlanId?: string;
-    onSelect?: (planId: string) => void;
-}
-/**
- * PricingTable renders plan cards in a responsive grid with monthly/annual toggle.
- * The current plan is highlighted with aria-current="true" and border-primary class.
- *
- * Usage:
- * ```tsx
- * <PricingTable
- *   plans={plans}
- *   currentPlanId="pro"
- *   onSelect={(planId) => handleUpgrade(planId)}
- * />
- * ```
- */
-declare function PricingTable({ plans, currentPlanId, onSelect, }: PricingTableProps): React.ReactElement;
-
 /**
  * PlanComparison — Side-by-side feature comparison table.
  * UI-01: Renders shadcn-style table with plan names as headers and features as rows.
@@ -633,4 +628,4 @@ interface CancelSubscriptionButtonProps {
 }
 declare function CancelSubscriptionButton({ subscriptionId, onCancelled, }: CancelSubscriptionButtonProps): react_jsx_runtime.JSX.Element;
 
-export { BillingContext, type BillingContextValue, BillingPortal, type BillingPortalContextValue, type BillingPortalProps, BillingPortalProvider, type BillingPortalProviderProps, BillingProvider, type BillingProviderProps, CANCEL_REASONS, type CanState, CancelSubscriptionButton, type CancelSubscriptionButtonProps, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type ComparisonFeature, CreditBalance, type CreditBalanceProps, CreditHistory, type CreditHistoryProps, CreditTopUpButton, type CreditTopUpButtonProps, type CreditTransaction, type CreditsState, CurrentPlan, type CurrentPlanData, type CurrentPlanProps, FeatureGate, type FeatureGateProps, type Invoice, InvoiceList, type InvoiceListProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, PricingTable, type PricingTableProps, type ProrationPreview, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageState, type UseCheckoutResult, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };
+export { BillingContext, type BillingContextValue, BillingPortal, type BillingPortalContextValue, type BillingPortalProps, BillingPortalProvider, type BillingPortalProviderProps, BillingProvider, type BillingProviderProps, CANCEL_REASONS, type CanState, CancelSubscriptionButton, type CancelSubscriptionButtonProps, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type ComparisonFeature, CreditBalance, type CreditBalanceProps, CreditHistory, type CreditHistoryProps, CreditTopUpButton, type CreditTopUpButtonProps, type CreditTransaction, type CreditsState, CurrentPlan, type CurrentPlanData, type CurrentPlanProps, FeatureGate, type FeatureGateProps, type Invoice, InvoiceList, type InvoiceListProps, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PricingPlan, PricingTable, type PricingTableProps, type ProrationPreview, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageState, type UseCheckoutResult, getUsageMeterColor, useBillingContext, useBillingPortal, useCan, useCheckout, useCredits, useNozleClient, useUsage };

package/dist/index.js

@@ -297,6 +297,335 @@ function BillingPortalProvider({
 }) {
   return /* @__PURE__ */ jsx(BillingPortalContext.Provider, { value: { customerId, apiKey }, children });
 }
+var SYMBOLS = { USD: "$", EUR: "\u20AC", GBP: "\xA3", JPY: "\xA5" };
+function fmtPrice(cents, cur) {
+  const s = SYMBOLS[cur] ?? cur + " ";
+  const val = cents % 100 === 0 ? String(cents / 100) : (cents / 100).toFixed(2);
+  return `${s}${val}`;
+}
+function isEnterprise(p) {
+  return /enterprise|custom/i.test(p.name + p.code);
+}
+function v(name, fb) {
+  return `var(${name}, ${fb})`;
+}
+var C = {
+  bg: v("--nozle-pricing-bg", v("--nozle-background", "#ffffff")),
+  cardBg: v("--nozle-pricing-card-bg", v("--nozle-card", "#ffffff")),
+  hl: v("--nozle-pricing-highlight", v("--nozle-primary", "#6366f1")),
+  border: v("--nozle-pricing-border", v("--nozle-border", "#e5e7eb")),
+  radius: v("--nozle-pricing-radius", v("--nozle-radius", "12px")),
+  text: v("--nozle-foreground", "#111827"),
+  muted: v("--nozle-muted-foreground", "#6b7280"),
+  mutedBg: v("--nozle-muted", "#f3f4f6"),
+  hlFg: v("--nozle-primary-foreground", "#ffffff")
+};
+function Check() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Toggle({ isAnnual, onChange }) {
+  const pill = {
+    display: "inline-flex",
+    borderRadius: "9999px",
+    padding: "4px",
+    background: C.mutedBg,
+    gap: "2px"
+  };
+  const tab = (active) => ({
+    padding: "8px 20px",
+    borderRadius: "9999px",
+    border: "none",
+    background: active ? C.cardBg : "transparent",
+    color: active ? C.text : C.muted,
+    fontWeight: active ? 600 : 400,
+    fontSize: "0.875rem",
+    cursor: "pointer",
+    boxShadow: active ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+    transition: "all 0.15s ease"
+  });
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "2.5rem" }, children: /* @__PURE__ */ jsxs("div", { style: pill, children: [
+    /* @__PURE__ */ jsx("button", { onClick: () => onChange(false), style: tab(!isAnnual), "aria-pressed": !isAnnual, children: "Monthly" }),
+    /* @__PURE__ */ jsxs("button", { onClick: () => onChange(true), style: tab(isAnnual), "aria-pressed": isAnnual, children: [
+      "Annual",
+      /* @__PURE__ */ jsx("span", { style: {
+        marginLeft: "6px",
+        fontSize: "0.7rem",
+        fontWeight: 600,
+        color: isAnnual ? C.hl : C.muted
+      }, children: "Save 20%" })
+    ] })
+  ] }) });
+}
+function Card({
+  plan,
+  features,
+  isCurrent,
+  isHighlighted,
+  isEnt,
+  enterpriseEmail,
+  onSelect
+}) {
+  const [hover, setHover] = useState(false);
+  const shadow = isHighlighted ? "0 8px 28px rgba(99,102,241,0.12), 0 2px 8px rgba(99,102,241,0.06)" : hover ? "0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03)" : "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03)";
+  const interval = plan.interval === "yearly" ? "/year" : "/month";
+  const handleClick = () => {
+    if (isCurrent) return;
+    if (isEnt && enterpriseEmail) {
+      window.location.href = `mailto:${enterpriseEmail}?subject=Enterprise Plan Inquiry`;
+      return;
+    }
+    onSelect?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        background: C.cardBg,
+        border: `1px solid ${isHighlighted ? C.hl : C.border}`,
+        borderTopWidth: isHighlighted ? "3px" : "1px",
+        borderRadius: C.radius,
+        padding: "2rem",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        boxShadow: shadow,
+        transform: hover && !isCurrent ? "translateY(-2px)" : "none"
+      },
+      children: [
+        isHighlighted && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          top: "-1px",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          background: C.hl,
+          color: C.hlFg,
+          fontSize: "0.7rem",
+          fontWeight: 700,
+          padding: "4px 12px",
+          borderRadius: "9999px",
+          letterSpacing: "0.025em",
+          textTransform: "uppercase",
+          whiteSpace: "nowrap"
+        }, children: isCurrent ? "Current Plan" : "Most Popular" }),
+        isCurrent && !isHighlighted && /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          top: "0",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          background: C.mutedBg,
+          color: C.muted,
+          fontSize: "0.7rem",
+          fontWeight: 700,
+          padding: "4px 12px",
+          borderRadius: "9999px",
+          letterSpacing: "0.025em",
+          textTransform: "uppercase",
+          whiteSpace: "nowrap"
+        }, children: "Current Plan" }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.25rem", marginTop: isHighlighted || isCurrent ? "0.5rem" : 0 }, children: [
+          /* @__PURE__ */ jsx("h3", { style: {
+            fontSize: "1.25rem",
+            fontWeight: 700,
+            color: C.text,
+            margin: 0,
+            lineHeight: 1.3
+          }, children: plan.name }),
+          plan.description && /* @__PURE__ */ jsx("p", { style: {
+            fontSize: "0.875rem",
+            color: C.muted,
+            margin: "6px 0 0",
+            lineHeight: 1.5
+          }, children: plan.description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { marginBottom: "1.5rem" }, children: isEnt ? /* @__PURE__ */ jsx("span", { style: { fontSize: "2.25rem", fontWeight: 700, color: C.text, lineHeight: 1 }, children: "Custom" }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "2px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "2.75rem", fontWeight: 700, color: C.text, lineHeight: 1, letterSpacing: "-0.025em" }, children: fmtPrice(plan.amount_cents, plan.amount_currency) }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", color: C.muted, marginLeft: "4px" }, children: interval })
+        ] }) }),
+        features && features.length > 0 && /* @__PURE__ */ jsx("ul", { style: {
+          listStyle: "none",
+          padding: 0,
+          margin: "0 0 2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          flex: 1
+        }, children: features.map((feat) => /* @__PURE__ */ jsxs("li", { style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: "10px",
+          fontSize: "0.875rem",
+          color: C.text,
+          lineHeight: 1.5
+        }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: C.hl, marginTop: "2px" }, children: /* @__PURE__ */ jsx(Check, {}) }),
+          /* @__PURE__ */ jsx("span", { children: feat })
+        ] }, feat)) }),
+        (!features || features.length === 0) && /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        onSelect && /* @__PURE__ */ jsx(
+          CTAButton,
+          {
+            onClick: handleClick,
+            disabled: isCurrent,
+            variant: isCurrent ? "current" : isEnt ? "outline" : isHighlighted ? "primary" : "secondary",
+            children: isCurrent ? "Current Plan" : isEnt ? "Contact Sales" : `Get ${plan.name}`
+          }
+        )
+      ]
+    }
+  );
+}
+function CTAButton({
+  children,
+  onClick,
+  disabled,
+  variant
+}) {
+  const [hover, setHover] = useState(false);
+  const base = {
+    width: "100%",
+    padding: "12px 24px",
+    borderRadius: "10px",
+    fontSize: "0.9375rem",
+    fontWeight: 600,
+    cursor: disabled ? "default" : "pointer",
+    border: "none",
+    transition: "all 0.15s ease",
+    lineHeight: 1.4
+  };
+  const variants = {
+    primary: {
+      background: hover && !disabled ? "#4f46e5" : C.hl,
+      color: C.hlFg
+    },
+    secondary: {
+      background: hover && !disabled ? "#f0f0f3" : C.mutedBg,
+      color: C.text,
+      border: `1px solid ${C.border}`
+    },
+    outline: {
+      background: hover && !disabled ? "rgba(99,102,241,0.04)" : "transparent",
+      color: C.hl,
+      border: `1.5px solid ${C.hl}`
+    },
+    current: {
+      background: C.mutedBg,
+      color: C.muted
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: { ...base, ...variants[variant] },
+      children
+    }
+  );
+}
+function Skeleton() {
+  return /* @__PURE__ */ jsx("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+    gap: "1.5rem"
+  }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs("div", { style: {
+    background: C.cardBg,
+    border: `1px solid ${C.border}`,
+    borderRadius: C.radius,
+    padding: "2rem",
+    height: "380px"
+  }, children: [
+    /* @__PURE__ */ jsx("div", { style: { height: 20, width: "40%", borderRadius: 6, background: "#f0f0f0", marginBottom: 12 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 40, width: "50%", borderRadius: 6, background: "#f0f0f0", marginBottom: 24 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "80%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "70%", borderRadius: 6, background: "#f0f0f0", marginBottom: 10 } }),
+    /* @__PURE__ */ jsx("div", { style: { height: 14, width: "60%", borderRadius: 6, background: "#f0f0f0" } })
+  ] }, i)) });
+}
+function PricingTable({
+  customerId,
+  currentPlanCode,
+  plans: propPlans,
+  features,
+  onSelect,
+  showToggle = true,
+  highlightPlan,
+  className,
+  enterpriseEmail
+}) {
+  const client = useNozleClient();
+  const [plans, setPlans] = useState(propPlans ?? []);
+  const [currentPlan, setCurrentPlan] = useState(currentPlanCode ?? null);
+  const [isAnnual, setIsAnnual] = useState(false);
+  const [loading, setLoading] = useState(!propPlans);
+  useEffect(() => {
+    if (propPlans) {
+      setPlans(propPlans);
+      return;
+    }
+    let cancelled = false;
+    client.fetch("/api/v1/plans").then(async (res) => {
+      if (!cancelled && res.ok) {
+        const data = await res.json();
+        setPlans(data.plans || []);
+      }
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, propPlans]);
+  useEffect(() => {
+    if (currentPlanCode !== void 0) {
+      setCurrentPlan(currentPlanCode);
+      return;
+    }
+    if (!customerId) return;
+    let cancelled = false;
+    client.fetch(`/api/v1/billing/status?customer_id=${encodeURIComponent(customerId)}`).then(async (res) => {
+      if (!cancelled && res.ok) {
+        const data = await res.json();
+        setCurrentPlan(data.plan ?? data.planName ?? null);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, customerId, currentPlanCode]);
+  const hasAnnual = plans.some((p) => p.interval === "yearly");
+  const filtered = showToggle && hasAnnual ? plans.filter((p) => p.interval === (isAnnual ? "yearly" : "monthly") || isEnterprise(p)) : plans;
+  if (loading) return /* @__PURE__ */ jsx(Skeleton, {});
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    color: C.text,
+    background: C.bg
+  }, children: [
+    showToggle && hasAnnual && /* @__PURE__ */ jsx(Toggle, { isAnnual, onChange: setIsAnnual }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+      gap: "1.5rem"
+    }, children: filtered.map((plan, i) => /* @__PURE__ */ jsx(
+      Card,
+      {
+        plan,
+        features: features?.[i],
+        isCurrent: currentPlan === plan.code,
+        isHighlighted: highlightPlan === plan.code,
+        isEnt: isEnterprise(plan),
+        enterpriseEmail,
+        onSelect: onSelect ? () => onSelect(plan) : void 0
+      },
+      plan.code
+    )) })
+  ] });
+}
 function PlanCard({
   id,
   name,
@@ -441,91 +770,6 @@ function PlanCard({
     }
   );
 }
-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
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
 function PlanComparison({
   plans,
   features