@meetreeve/billing-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,935 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AutoCheckout: () => AutoCheckout,
+  BillingSettingsPanel: () => BillingSettingsPanel,
+  BuyMorePacks: () => BuyMorePacks,
+  CreditsMeter: () => CreditsMeter,
+  LowBalanceBanner: () => LowBalanceBanner,
+  PlanCard: () => PlanCard2,
+  PricingTable: () => PricingTable,
+  UpgradePaywall: () => UpgradePaywall,
+  dollarsFromCents: () => dollarsFromCents,
+  formatCredits: () => formatCredits,
+  formatPrice: () => formatPrice,
+  isFeatureUnlocked: () => isFeatureUnlocked,
+  isUnlimited: () => isUnlimited,
+  resolveUnlockingPlan: () => resolveUnlockingPlan
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/format.ts
+function dollarsFromCents(cents) {
+  return Math.round(cents / 100);
+}
+function formatPrice(cents, currency = "usd") {
+  const symbol = currency.toLowerCase() === "usd" ? "$" : `${currency.toUpperCase()} `;
+  return `${symbol}${dollarsFromCents(cents)}`;
+}
+function formatCredits(n) {
+  return n.toLocaleString();
+}
+
+// src/entitlements.ts
+function resolveUnlockingPlan(plans, featureKey) {
+  for (const plan of plans) {
+    const limit = plan.feature_limits?.[featureKey];
+    if (limit !== void 0 && limit !== 0) return plan;
+  }
+  return null;
+}
+function isFeatureUnlocked(plan, featureKey) {
+  if (!plan) return false;
+  const limit = plan.feature_limits?.[featureKey];
+  return limit !== void 0 && limit !== 0;
+}
+function isUnlimited(limit) {
+  return limit === -1;
+}
+
+// src/PricingTable.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ctaLabel(plan, currentPlanId, override) {
+  if (override) return override;
+  if (plan.id === currentPlanId) return "Current plan";
+  return `Get ${plan.name}`;
+}
+function PlanCard({
+  plan,
+  currentPlanId,
+  presentation,
+  onSelectPlan
+}) {
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const isCurrent = plan.id === currentPlanId;
+  const highlighted = presentation?.highlighted ?? plan.popular ?? false;
+  const purchasable = plan.purchasable ?? true;
+  const badgeText = isCurrent ? null : presentation?.badge ?? (plan.popular ? "Most popular" : null);
+  const creditsLabel = plan.credits_grant_monthly != null ? `${formatCredits(plan.credits_grant_monthly)} credits / month` : plan.credits_grant_lifetime != null ? `${formatCredits(plan.credits_grant_lifetime)} credits, lifetime` : null;
+  const handleClick = async () => {
+    if (!onSelectPlan || isCurrent || !purchasable) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await onSelectPlan(plan);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not start checkout.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-testid": `pricing-plan-${plan.id}`,
+      className: "relative flex flex-col rounded-2xl border p-6 " + (highlighted ? "border-primary bg-card shadow-lg" : "border-border bg-card") + (presentation?.className ? ` ${presentation.className}` : ""),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: plan.name }),
+          isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              "data-testid": `pricing-plan-${plan.id}-current-badge`,
+              className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary",
+              children: "Your plan"
+            }
+          ) : badgeText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary", children: badgeText }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-baseline gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-3xl font-bold text-foreground", children: formatPrice(plan.price_cents, plan.currency) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+            "/",
+            plan.interval
+          ] })
+        ] }),
+        creditsLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: creditsLabel }),
+        presentation?.tagline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-2 text-sm text-muted-foreground", children: presentation.tagline }),
+        plan.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mt-4 flex-1 space-y-2 text-sm", children: plan.features.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "text-muted-foreground", children: f }, f)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            disabled: isCurrent || busy || !purchasable,
+            className: "mt-6 w-full rounded-md bg-foreground px-4 py-2.5 text-sm font-semibold text-background transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+            children: busy ? "Starting\u2026" : ctaLabel(plan, currentPlanId, presentation?.cta)
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "mt-2 text-xs text-destructive", children: error }),
+        !purchasable && !isCurrent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-2 text-xs text-muted-foreground", children: "Not available for new subscriptions." })
+      ]
+    }
+  );
+}
+function PackCard({
+  pack,
+  best,
+  onBuyPack
+}) {
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const dollars = formatPrice(pack.price_cents, pack.currency);
+  const perCredit = `$${(dollarsFromCents(pack.price_cents) / pack.credits).toFixed(3)}`;
+  const handleClick = async () => {
+    if (!onBuyPack) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await onBuyPack(pack);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not start checkout.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-testid": `pricing-pack-${pack.id}`,
+      className: "flex flex-col gap-4 rounded-2xl border p-5 " + (best ? "border-primary" : "border-border"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "text-base font-semibold text-foreground", children: pack.name }),
+              best && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wide text-primary", children: "Best value" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+              formatCredits(pack.credits),
+              " credits"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xl font-bold text-foreground", children: dollars }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+              perCredit,
+              " / credit"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            disabled: busy,
+            className: "w-full rounded-md border border-border px-4 py-2 text-sm font-semibold text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+            children: busy ? "Starting\u2026" : `Buy ${pack.name}`
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "text-xs text-destructive", children: error })
+      ]
+    }
+  );
+}
+function PackGrid({
+  packs,
+  onBuyPack
+}) {
+  if (!packs.length) return null;
+  const maxCredits = Math.max(...packs.map((p) => p.credits));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": "pricing-packs", className: "mt-10 grid gap-4 md:grid-cols-2 md:gap-6", children: packs.map((pack) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PackCard,
+    {
+      pack,
+      best: packs.length > 1 && pack.credits === maxCredits,
+      onBuyPack
+    },
+    pack.id
+  )) });
+}
+function PricingTable({
+  catalog,
+  variant = "grid",
+  bandPlanId,
+  showPacks,
+  currentPlanId,
+  presentation,
+  onSelectPlan,
+  onBuyPack,
+  className
+}) {
+  const plans = catalog.plans ?? [];
+  const packs = catalog.packs ?? [];
+  const shouldShowPacks = showPacks ?? packs.length > 0;
+  const bandPlan = (0, import_react.useMemo)(() => {
+    if (variant !== "band") return null;
+    return plans.find((p) => p.id === bandPlanId) ?? plans.find((p) => p.id === currentPlanId) ?? plans.find((p) => p.popular) ?? plans[0] ?? null;
+  }, [variant, catalog.plans, bandPlanId, currentPlanId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, "data-testid": "pricing-table", "data-variant": variant, children: [
+    variant === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-6 md:grid-cols-3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PlanCard,
+      {
+        plan,
+        currentPlanId,
+        presentation: presentation?.[plan.id],
+        onSelectPlan
+      },
+      plan.id
+    )) }) : bandPlan ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PlanCard,
+      {
+        plan: bandPlan,
+        currentPlanId,
+        presentation: presentation?.[bandPlan.id],
+        onSelectPlan
+      }
+    ) }) : null,
+    shouldShowPacks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PackGrid, { packs, onBuyPack })
+  ] });
+}
+
+// src/UpgradePaywall.tsx
+var import_react2 = require("react");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function humanizeFeatureKey(key) {
+  return key.replace(/_max$/, "").replace(/_/g, " ");
+}
+function PaywallBody({
+  featureKey,
+  catalog,
+  currentPlanId,
+  onUpgrade,
+  upgradeOptions = ["plan"],
+  onAddon,
+  addonLabel = "Add capacity",
+  secondaryAction,
+  title,
+  description,
+  onClose,
+  DescriptionTag = "p"
+}) {
+  const [busy, setBusy] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const currentPlan = (0, import_react2.useMemo)(
+    () => catalog.plans.find((p) => p.id === currentPlanId) ?? null,
+    [catalog.plans, currentPlanId]
+  );
+  const alreadyUnlocked = isFeatureUnlocked(currentPlan, featureKey);
+  const targetPlan = (0, import_react2.useMemo)(
+    () => resolveUnlockingPlan(catalog.plans, featureKey),
+    [catalog.plans, featureKey]
+  );
+  const actionPlan = targetPlan ?? catalog.plans[catalog.plans.length - 1] ?? null;
+  const handleUpgrade = async () => {
+    if (!onUpgrade || !actionPlan) return;
+    setBusy("plan");
+    setError(null);
+    try {
+      await onUpgrade(actionPlan);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not start checkout.");
+    } finally {
+      setBusy(null);
+    }
+  };
+  const handleAddon = async () => {
+    if (!onAddon) return;
+    setBusy("addon");
+    setError(null);
+    try {
+      await onAddon();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not start checkout.");
+    } finally {
+      setBusy(null);
+    }
+  };
+  const resolvedTitle = title ?? (alreadyUnlocked ? "You already have this" : targetPlan ? `Upgrade to ${targetPlan.name} to unlock this` : "Upgrade to unlock this");
+  const resolvedDescription = description ?? (alreadyUnlocked ? `Your current plan already includes ${humanizeFeatureKey(featureKey)}.` : targetPlan ? `${targetPlan.name} unlocks ${humanizeFeatureKey(featureKey)} for ${formatPrice(targetPlan.price_cents, targetPlan.currency)}/${targetPlan.interval}.` : `No plan in your current catalog unlocks ${humanizeFeatureKey(featureKey)} yet \u2014 see all plans to find the right fit.`);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-testid": "upgrade-paywall-body", className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: resolvedTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DescriptionTag, { className: "text-sm text-muted-foreground", children: resolvedDescription }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex flex-col gap-2", children: [
+      !alreadyUnlocked && upgradeOptions.includes("plan") && actionPlan && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleUpgrade,
+          disabled: busy !== null,
+          className: "inline-flex items-center justify-center gap-2 rounded-md bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: busy === "plan" ? "Starting\u2026" : `Upgrade to ${actionPlan.name} \xB7 ${formatPrice(actionPlan.price_cents, actionPlan.currency)}/${actionPlan.interval}`
+        }
+      ),
+      !alreadyUnlocked && upgradeOptions.includes("addon") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddon,
+          disabled: busy !== null,
+          className: "inline-flex items-center justify-center gap-2 rounded-md border border-border px-5 py-2.5 text-sm font-medium text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: busy === "addon" ? "Starting\u2026" : addonLabel
+        }
+      ),
+      secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: secondaryAction.onClick,
+          disabled: secondaryAction.disabled,
+          className: "inline-flex items-center justify-center gap-2 rounded-md border border-border/70 bg-transparent px-5 py-2.5 text-sm font-medium text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: secondaryAction.label
+        }
+      ),
+      alreadyUnlocked && onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "inline-flex items-center justify-center gap-2 rounded-md border border-border px-5 py-2.5 text-sm font-medium text-foreground",
+          children: "Close"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "alert", className: "mt-3 text-xs text-destructive", children: error })
+  ] });
+}
+function UpgradePaywall(props) {
+  const { variant = "modal", open = true, onClose, className, ...bodyProps } = props;
+  if (variant === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        "data-testid": "upgrade-paywall-inline",
+        className: "rounded-2xl border border-border bg-card p-6 " + (className ?? ""),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaywallBody, { ...bodyProps, onClose })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open, onOpenChange: (next) => {
+    if (!next) onClose?.();
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Dialog.Content,
+      {
+        className: "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-border bg-card p-7 shadow-2xl " + (className ?? ""),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Title, { className: "sr-only", children: bodyProps.title ?? "Upgrade" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Dialog.Close,
+            {
+              "aria-label": "Close",
+              className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: "\u2715"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaywallBody, { ...bodyProps, onClose, DescriptionTag: Dialog.Description })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/AutoCheckout.tsx
+var import_react3 = require("react");
+function AutoCheckout({
+  packs = [],
+  plans = [],
+  onBuyPack,
+  onSelectPlan,
+  packParam = "credits",
+  planParam = "plan"
+}) {
+  const firedRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    if (firedRef.current) return;
+    if (typeof window === "undefined") return;
+    const search = new URLSearchParams(window.location.search);
+    const packId = search.get(packParam);
+    const planId = search.get(planParam);
+    if (packId && onBuyPack && packs.some((p) => p.id === packId)) {
+      firedRef.current = true;
+      const pack = packs.find((p) => p.id === packId);
+      Promise.resolve(onBuyPack(pack)).catch(() => {
+      });
+    } else if (planId && onSelectPlan && plans.some((p) => p.id === planId)) {
+      firedRef.current = true;
+      const plan = plans.find((p) => p.id === planId);
+      Promise.resolve(onSelectPlan(plan)).catch(() => {
+      });
+    }
+    if (firedRef.current) {
+      search.delete(packParam);
+      search.delete(planParam);
+      const qs = search.toString();
+      const nextUrl = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+      window.history.replaceState(window.history.state, "", nextUrl);
+    }
+  }, [packs, plans, onBuyPack, onSelectPlan]);
+  return null;
+}
+
+// src/PlanCard.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StatusPill({ status }) {
+  const dotColor = status === "active" || status === "trialing" ? "bg-emerald-500" : status === "past_due" ? "bg-amber-500" : status === "canceled" || status === "unpaid" ? "bg-destructive" : "bg-muted-foreground/60";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-testid": "plan-card-status", className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: `h-2 w-2 rounded-full ${dotColor}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: status })
+  ] });
+}
+function PlanCard2({
+  plan,
+  renewalDate,
+  status,
+  isFreePlan = false,
+  onManage,
+  manageLabel = "Manage billing",
+  onChangePlan,
+  changePlanLabel,
+  className
+}) {
+  const [busy, setBusy] = (0, import_react4.useState)(null);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const runAction = async (kind, action) => {
+    setBusy(kind);
+    setError(null);
+    try {
+      await action();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not complete that action.");
+    } finally {
+      setBusy(null);
+    }
+  };
+  if (!plan) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "data-testid": "plan-card",
+        "data-state": "empty",
+        className: "rounded-2xl border border-border bg-card p-6 " + (className ?? ""),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-muted-foreground", children: "No plan on file yet." })
+      }
+    );
+  }
+  const showStatusPill = status && status !== "free";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-testid": "plan-card", "data-plan-id": plan.id, className: "rounded-2xl border border-border bg-card p-6 " + (className ?? ""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-xl font-semibold text-foreground", children: plan.name }),
+          showStatusPill && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusPill, { status })
+        ] }),
+        renewalDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { "data-testid": "plan-card-renewal", className: "mt-1 text-xs uppercase tracking-wide text-muted-foreground", children: [
+          "Renews ",
+          new Date(renewalDate).toLocaleDateString()
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-right", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: formatPrice(plan.price_cents, plan.currency) }),
+        plan.price_cents > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "ml-1 text-xs uppercase tracking-wide text-muted-foreground", children: [
+          "/",
+          plan.interval
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-5 flex flex-wrap gap-3", children: isFreePlan ? onChangePlan && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => runAction("change", onChangePlan),
+        disabled: busy !== null,
+        className: "rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+        children: busy === "change" ? "Loading\u2026" : changePlanLabel ?? "Upgrade"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      onManage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => runAction("manage", onManage),
+          disabled: busy !== null,
+          className: "rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: busy === "manage" ? "Loading\u2026" : manageLabel
+        }
+      ),
+      onChangePlan && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => runAction("change", onChangePlan),
+          disabled: busy !== null,
+          className: "rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: busy === "change" ? "Loading\u2026" : changePlanLabel ?? "Change plan"
+        }
+      )
+    ] }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", className: "mt-2 text-xs text-destructive", children: error })
+  ] });
+}
+
+// src/CreditsMeter.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function daysUntil(iso) {
+  const ms = new Date(iso).getTime() - Date.now();
+  return Math.ceil(ms / (1e3 * 60 * 60 * 24));
+}
+function ExpiryNote({ expireAt }) {
+  const days = daysUntil(expireAt);
+  const label = days < 0 ? "Base credits expired" : days === 0 ? "Base credits expire today" : `Base credits expire in ${days} day${days === 1 ? "" : "s"}`;
+  const tone = days <= 0 ? "text-destructive" : days <= 7 ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { "data-testid": "credits-meter-expiry", className: `mt-2 text-xs ${tone}`, children: [
+    label,
+    " (",
+    new Date(expireAt).toLocaleDateString(),
+    ")."
+  ] });
+}
+function CreditsMeter({ view, balance, className }) {
+  if (view.mode === "unavailable") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-testid": "credits-meter", "data-mode": "unavailable", className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+      "Usage data isn't available yet",
+      view.reason ? ` (${view.reason})` : "",
+      "."
+    ] }) });
+  }
+  if (view.mode === "percentage") {
+    const pct = Math.max(0, Math.min(100, view.percentage_used ?? 0));
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-testid": "credits-meter", "data-mode": "percentage", className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-medium text-foreground", children: "Usage this period" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { "data-testid": "credits-meter-percentage-value", className: "text-sm text-muted-foreground", children: [
+          Math.round(pct),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: "h-full rounded-full bg-primary transition-all",
+          style: { width: `${pct}%` }
+        }
+      ) }),
+      view.reset_at && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { "data-testid": "credits-meter-reset", className: "mt-2 text-xs text-muted-foreground", children: [
+        "Resets ",
+        new Date(view.reset_at).toLocaleDateString()
+      ] })
+    ] });
+  }
+  const total = balance?.total ?? view.balance ?? 0;
+  const expiringSoon = balance?.expiring_soon ?? view.expiring_soon;
+  const expireAt = balance?.base_credits_expire_at;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-testid": "credits-meter", "data-mode": "balance", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-baseline gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-testid": "credits-meter-total", className: "text-3xl font-semibold text-foreground", children: formatCredits(total) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "credits available" }),
+      balance?.byok_available && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "span",
+        {
+          "data-testid": "credits-meter-byok-badge",
+          className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary",
+          children: "BYOK"
+        }
+      )
+    ] }),
+    balance && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("dl", { className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Plan credits" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { "data-testid": "credits-meter-base", className: "text-foreground", children: formatCredits(balance.base_credits) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Top-up credits" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dd", { "data-testid": "credits-meter-topup", className: "text-foreground", children: formatCredits(balance.top_up_credits) })
+      ] })
+    ] }),
+    typeof expiringSoon === "number" && expiringSoon > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { "data-testid": "credits-meter-expiring-soon", className: "mt-2 text-xs text-amber-600 dark:text-amber-400", children: [
+      formatCredits(expiringSoon),
+      " credits expiring soon."
+    ] }),
+    expireAt && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExpiryNote, { expireAt })
+  ] });
+}
+
+// src/BuyMorePacks.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var REPOLL_DELAYS_MS = [0, 2e3, 5e3];
+function PackButton({
+  pack,
+  compact,
+  onPurchase
+}) {
+  const [busy, setBusy] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const handleClick = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await onPurchase(pack);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not start checkout.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "inline-flex flex-col items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-testid": `buy-more-packs-chip-${pack.id}`,
+          onClick: handleClick,
+          disabled: busy,
+          className: "rounded-full border border-border px-4 py-1.5 text-sm font-medium text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+          children: busy ? "Starting\u2026" : `${formatCredits(pack.credits)} \xB7 ${formatPrice(pack.price_cents, pack.currency)}`
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { role: "alert", className: "mt-1 text-xs text-destructive", children: error })
+    ] });
+  }
+  const perCredit = pack.credits > 0 ? `$${(dollarsFromCents(pack.price_cents) / pack.credits).toFixed(3)}` : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      "data-testid": `buy-more-packs-card-${pack.id}`,
+      className: "flex flex-col gap-3 rounded-2xl border border-border bg-card p-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { className: "text-base font-semibold text-foreground", children: pack.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+              formatCredits(pack.credits),
+              " credits"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg font-bold text-foreground", children: formatPrice(pack.price_cents, pack.currency) }),
+            perCredit && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+              perCredit,
+              " / credit"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            disabled: busy,
+            className: "w-full rounded-md border border-border px-4 py-2 text-sm font-semibold text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+            children: busy ? "Starting\u2026" : `Buy ${pack.name}`
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { role: "alert", className: "text-xs text-destructive", children: error })
+      ]
+    }
+  );
+}
+function BuyMorePacks({
+  packs,
+  purchaseModel = "fixed-pack",
+  onPurchase,
+  successParam = "topup",
+  onTopupSuccess,
+  className
+}) {
+  const firedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (firedRef.current) return;
+    if (typeof window === "undefined") return;
+    const search = new URLSearchParams(window.location.search);
+    if (search.get(successParam) !== "success") return;
+    firedRef.current = true;
+    search.delete(successParam);
+    const qs = search.toString();
+    const nextUrl = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+    window.history.replaceState(window.history.state, "", nextUrl);
+    if (!onTopupSuccess) return;
+    const timers = REPOLL_DELAYS_MS.map(
+      (delay) => setTimeout(() => {
+        Promise.resolve(onTopupSuccess()).catch(() => {
+        });
+      }, delay)
+    );
+    return () => timers.forEach(clearTimeout);
+  }, [successParam, onTopupSuccess]);
+  if (!packs.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-testid": "buy-more-packs", "data-purchase-model": purchaseModel, className, children: purchaseModel === "presets" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-wrap gap-3", children: packs.map((pack) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PackButton, { pack, compact: true, onPurchase }, pack.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid gap-4 md:grid-cols-2", children: packs.map((pack) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PackButton, { pack, compact: false, onPurchase }, pack.id)) }) });
+}
+
+// src/LowBalanceBanner.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LowBalanceBanner({
+  balance,
+  burnRate,
+  threshold = 5,
+  variant = "default",
+  onAddCredits,
+  addCreditsLabel = "Add credits",
+  onAddByok,
+  addByokLabel = "Add a BYOK API key",
+  className
+}) {
+  const [dismissed, setDismissed] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    if (balance.total <= 0 && dismissed) setDismissed(false);
+  }, [balance.total, dismissed]);
+  if (balance.byok_available) return null;
+  if (dismissed) return null;
+  const isEmpty = balance.total <= 0;
+  const isLow = balance.total > 0 && balance.total < threshold;
+  const isNearBurnout = !isEmpty && !isLow && burnRate != null && burnRate > 0 && balance.total / burnRate <= 1;
+  if (!isEmpty && !isLow && !isNearBurnout) return null;
+  const compactCls = variant === "compact" ? "text-xs" : "";
+  if (isEmpty) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        "data-testid": "low-balance-banner",
+        "data-state": "empty",
+        className: `flex items-center gap-3 rounded-lg border border-primary/20 bg-primary/10 px-4 py-3 ${compactCls} ${className ?? ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: `font-medium text-primary ${variant === "compact" ? "text-xs" : "text-sm"}`, children: "Out of credits." }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: `text-primary/80 ${variant === "compact" ? "text-xs" : "text-sm"}`, children: [
+              onAddByok && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onAddByok, className: "font-medium underline hover:text-primary", children: addByokLabel }),
+                " ",
+                "or",
+                " "
+              ] }),
+              onAddCredits && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onAddCredits, className: "font-medium underline hover:text-primary", children: addCreditsLabel })
+            ] })
+          ] }),
+          onAddCredits && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onAddCredits,
+              className: "inline-flex flex-shrink-0 items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90",
+              children: addCreditsLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-testid": "low-balance-banner",
+      "data-state": "low",
+      className: `flex items-center gap-3 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-3 ${compactCls} ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: `text-amber-700 dark:text-amber-400 ${variant === "compact" ? "text-xs" : "text-sm"}`, children: [
+          "Low credit balance (",
+          formatCredits(balance.total),
+          " remaining).",
+          " ",
+          onAddCredits && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onAddCredits, className: "font-medium underline hover:text-amber-800 dark:hover:text-amber-300", children: addCreditsLabel })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDismissed(true),
+            "aria-label": "Dismiss",
+            className: "flex-shrink-0 text-amber-500/50 transition-colors hover:text-amber-500",
+            children: "\u2715"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/BillingSettingsPanel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BillingSettingsPanel({
+  plan,
+  renewalDate,
+  planStatus,
+  isFreePlan = false,
+  onManagePlan,
+  manageLabel,
+  onChangePlan,
+  changePlanLabel,
+  creditsView,
+  creditsBalance,
+  showLowBalanceBanner = true,
+  lowBalanceThreshold,
+  burnRate,
+  onAddCredits,
+  addCreditsLabel,
+  onAddByok,
+  packs = [],
+  purchaseModel = "fixed-pack",
+  onBuyPack,
+  topupSuccessParam,
+  onTopupSuccess,
+  catalog,
+  showUpgradeSection,
+  upgradeVariant,
+  upgradePresentation,
+  onSelectPlan,
+  historySlot,
+  className
+}) {
+  const renderUpgrade = showUpgradeSection ?? Boolean(catalog);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": "billing-settings-panel", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { "data-testid": "billing-settings-panel-plan", className: "flex flex-col gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      PlanCard2,
+      {
+        plan,
+        renewalDate,
+        status: planStatus,
+        isFreePlan,
+        onManage: onManagePlan,
+        manageLabel,
+        onChangePlan,
+        changePlanLabel
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "data-testid": "billing-settings-panel-credits", className: "mt-8 flex flex-col gap-3", children: [
+      showLowBalanceBanner && creditsBalance && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        LowBalanceBanner,
+        {
+          balance: creditsBalance,
+          threshold: lowBalanceThreshold,
+          burnRate,
+          onAddCredits,
+          addCreditsLabel,
+          onAddByok
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CreditsMeter, { view: creditsView, balance: creditsBalance })
+    ] }),
+    packs.length > 0 && onBuyPack && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { "data-testid": "billing-settings-panel-buy-more", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      BuyMorePacks,
+      {
+        packs,
+        purchaseModel,
+        onPurchase: onBuyPack,
+        successParam: topupSuccessParam,
+        onTopupSuccess
+      }
+    ) }),
+    renderUpgrade && catalog && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { "data-testid": "billing-settings-panel-upgrade", className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      PricingTable,
+      {
+        catalog,
+        variant: upgradeVariant,
+        currentPlanId: plan?.id ?? null,
+        presentation: upgradePresentation,
+        onSelectPlan,
+        showPacks: false
+      }
+    ) }),
+    historySlot && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("section", { "data-testid": "billing-settings-panel-history", className: "mt-8", children: historySlot })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoCheckout,
+  BillingSettingsPanel,
+  BuyMorePacks,
+  CreditsMeter,
+  LowBalanceBanner,
+  PlanCard,
+  PricingTable,
+  UpgradePaywall,
+  dollarsFromCents,
+  formatCredits,
+  formatPrice,
+  isFeatureUnlocked,
+  isUnlimited,
+  resolveUnlockingPlan
+});