@kerne/react 1.0.0 → 1.2.0

package/dist/ui/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { PublicPlan, PublicPlanPrice, PublicPriceLabel, SubscriptionWithPlan } from '@kerne/types';
-export { K as KerneLocalization, d as defaultLocalization, u as useLocalization } from '../i18n-Di5qlnL1.cjs';
+import { PublicPlan, PublicPriceLabel, PublicPlanPrice, SubscriptionWithPlan } from '@kerne/types';
+import { K as KerneLocalization } from '../i18n-CXEhPK58.cjs';
+export { d as defaultLocalization, u as useLocalization } from '../i18n-CXEhPK58.cjs';
 
 /**
  * Per-instance overrides of the same custom properties the stylesheet reads,
@@ -299,9 +300,9 @@ declare function SecuritySection({ showDeleteAccount, onDeleted }: SecuritySecti
  * lists what this scope can move to and starts a checkout, and deliberately
  * does not sell. `<PricingTable>` is the surface that sells.
  *
- * Interval handling is the honest minimum until PriceLabel exists (see
- * 34-ENTITLEMENT-ENGINE.md §9.2): prices are grouped by `interval`, and the
- * segmented control only renders when a plan genuinely has more than one. A
+ * Interval handling is the honest minimum until PriceLabel exists here too:
+ * prices are grouped by `interval`, and the segmented control only renders
+ * when a plan genuinely has more than one. A
  * plan carrying a third price (early-bird, non-profit) still has no way to be
  * described here - which is exactly the gap PriceLabel closes.
  */
@@ -353,15 +354,86 @@ interface UsageMetersProps extends Omit<KerneUIProps, 'logo'> {
 }
 declare function UsageMeters({ title, featureKeys, showUnlimited, limit: maxRows, labels, emptyState, appearance, className, }: UsageMetersProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Display helpers shared by the billing and usage components.
+ */
+
+/**
+ * Last-resort label for a feature.
+ *
+ * `GET /v1/billing/entitlements` returns `feature_key` but no `feature_name`
+ * (see EntitlementSummary), while the subscription payload does carry names -
+ * so components cross-reference the subscription first and only fall back
+ * here for a scope on a default pack, which has no subscription to read names
+ * from. Turning `api_calls` into "Api calls" is not as good as the real name;
+ * it is only better than showing a raw key to an end user.
+ */
+declare function humanizeFeatureKey(key: string): string;
+/** Amounts are stored in minor units (cents), as the provider APIs return them. */
+declare function formatMoney(amountMinorUnits: number, currency: string): string;
+declare function formatNumber(value: number): string;
+declare function formatDate(iso: string | null): string | null;
+/**
+ * Normalises the provider's interval wording, then localizes it.
+ *
+ * `PlanPrice.interval` is Kerne's own "N+cycle" encoding ("1M", "3M", "1Y",
+ * "30D"), checked first since it's what every
+ * subscription/plan payload actually carries. The word-based fallback below
+ * stays for any raw provider string passed directly (Stripe says `month`,
+ * Polar says `monthly` - same thing to a reader). An interval matching
+ * neither falls through unchanged rather than being dropped: better a raw
+ * value than a price with no period attached.
+ */
+declare function formatInterval(interval: string, labels: IntervalLabels): string;
+type IntervalLabels = Pick<KerneLocalization['billing'], 'intervalMonth' | 'intervalYear' | 'intervalWeek' | 'intervalDay'>;
+interface PriceDisplay {
+    /** What's actually charged - show this alongside displayAmount, never hide it. */
+    billedAmount: number;
+    billedInterval: string;
+    /** The headline number a PriceLabel.display_interval asks to show instead. */
+    displayAmount: number;
+    displayInterval: string;
+}
+/**
+ * Resolves what to show for a price under a label's `display_interval` -
+ * e.g. an annual price shown as its monthly equivalent while still billing
+ * annually. `null`/`undefined`/equal-to-billed pass through unchanged. Divides
+ * once via approxMonths()'s ratio, never divide-then-multiply back to
+ * "verify" - a price rarely divides evenly (100 EUR/year -> 8.33 EUR/month,
+ * and 8.33 * 12 = 99.96, not 100).
+ */
+declare function resolvePriceDisplay(price: {
+    amount: number;
+    interval: string;
+}, displayInterval: string | null | undefined): PriceDisplay;
+/**
+ * One entry per distinct PriceLabel across a plan catalog, in owner order
+ * (PriceLabel.sort_order, never alphabetical) - shared by every surface that
+ * renders a label switch ("Monthly"/"Annual" and similar).
+ */
+declare function collectPriceLabels(plans: PublicPlan[]): PublicPriceLabel[];
+interface LabelSavings {
+    labelSlug: string;
+    percent: number;
+}
+/**
+ * Per-month discount of the longest-billed label vs the shortest-billed one -
+ * the "Save X%" hint on a label switch. Compares what's actually charged
+ * (interval/amount), never the display_interval cosmetic - a label showing
+ * "10 EUR/mo" for an annual price still bills the year, and that's what the
+ * saving has to stay true about. Only returned once an actual plan prices
+ * both ends of the range: nothing is inferred from a single price, and a
+ * catalog that only sells the longest label can't claim a discount that
+ * doesn't apply to it.
+ */
+declare function resolveLabelSavings(plans: PublicPlan[], labels: PublicPriceLabel[]): LabelSavings | null;
+
 interface PricingTableContextValue {
     plans: PublicPlan[];
     labels: PublicPriceLabel[];
     selectedLabelSlug: string | null;
     setSelectedLabelSlug: (slug: string) => void;
-    savings: {
-        labelSlug: string;
-        percent: number;
-    } | null;
+    savings: LabelSavings | null;
     currentPlanId: string | null;
     busyPriceId: string | null;
     onSelectPlan: (plan: PublicPlan) => void;
@@ -451,4 +523,4 @@ interface UpgradePromptProps extends Omit<KerneUIProps, 'logo'> {
 }
 declare function UpgradePrompt({ featureKey, requested, featureName, children, upgradeUrl, onUpgradeClick, upgradeLabel, title, description, hideWhileLoading, appearance, className, }: UpgradePromptProps): react_jsx_runtime.JSX.Element | null;
 
-export { ActivateAccountForm, type ActivateAccountFormProps, AuthFlow, type AuthFlowProps, type AuthFlowStep, BillingSection, type BillingSectionProps, ChangePasswordForm, type ChangePasswordFormProps, CheckoutResult, type CheckoutResultProps, ForgotPasswordForm, type ForgotPasswordFormProps, type KerneAppearance, LoginForm, type LoginFormProps, MagicLinkCallback, type MagicLinkCallbackProps, PricingTable, type PricingTablePlanProps, type PricingTablePlansProps, type PricingTableProps, ProfileSection, type ProfileSectionProps, RegisterForm, type RegisterFormProps, ResetPasswordForm, type ResetPasswordFormProps, SecuritySection, type SecuritySectionProps, SignOutButton, type SignOutButtonProps, SubscriptionCard, type SubscriptionCardProps, UpgradePrompt, type UpgradePromptProps, UsageMeters, type UsageMetersProps, UserButton, type UserButtonMenuItem, type UserButtonProps, UserProfile, type UserProfileExtraTab, type UserProfileProps, type UserProfileTab, VerifyEmailForm, type VerifyEmailFormProps, WaitlistForm, type WaitlistFormProps, usePricingTable };
+export { ActivateAccountForm, type ActivateAccountFormProps, AuthFlow, type AuthFlowProps, type AuthFlowStep, BillingSection, type BillingSectionProps, ChangePasswordForm, type ChangePasswordFormProps, CheckoutResult, type CheckoutResultProps, ForgotPasswordForm, type ForgotPasswordFormProps, type KerneAppearance, KerneLocalization, type LabelSavings, LoginForm, type LoginFormProps, MagicLinkCallback, type MagicLinkCallbackProps, type PriceDisplay, PricingTable, type PricingTablePlanProps, type PricingTablePlansProps, type PricingTableProps, ProfileSection, type ProfileSectionProps, RegisterForm, type RegisterFormProps, ResetPasswordForm, type ResetPasswordFormProps, SecuritySection, type SecuritySectionProps, SignOutButton, type SignOutButtonProps, SubscriptionCard, type SubscriptionCardProps, UpgradePrompt, type UpgradePromptProps, UsageMeters, type UsageMetersProps, UserButton, type UserButtonMenuItem, type UserButtonProps, UserProfile, type UserProfileExtraTab, type UserProfileProps, type UserProfileTab, VerifyEmailForm, type VerifyEmailFormProps, WaitlistForm, type WaitlistFormProps, collectPriceLabels, formatDate, formatInterval, formatMoney, formatNumber, humanizeFeatureKey, resolveLabelSavings, resolvePriceDisplay, usePricingTable };

package/dist/ui/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { PublicPlan, PublicPlanPrice, PublicPriceLabel, SubscriptionWithPlan } from '@kerne/types';
-export { K as KerneLocalization, d as defaultLocalization, u as useLocalization } from '../i18n-Di5qlnL1.js';
+import { PublicPlan, PublicPriceLabel, PublicPlanPrice, SubscriptionWithPlan } from '@kerne/types';
+import { K as KerneLocalization } from '../i18n-CXEhPK58.js';
+export { d as defaultLocalization, u as useLocalization } from '../i18n-CXEhPK58.js';
 
 /**
  * Per-instance overrides of the same custom properties the stylesheet reads,
@@ -299,9 +300,9 @@ declare function SecuritySection({ showDeleteAccount, onDeleted }: SecuritySecti
  * lists what this scope can move to and starts a checkout, and deliberately
  * does not sell. `<PricingTable>` is the surface that sells.
  *
- * Interval handling is the honest minimum until PriceLabel exists (see
- * 34-ENTITLEMENT-ENGINE.md §9.2): prices are grouped by `interval`, and the
- * segmented control only renders when a plan genuinely has more than one. A
+ * Interval handling is the honest minimum until PriceLabel exists here too:
+ * prices are grouped by `interval`, and the segmented control only renders
+ * when a plan genuinely has more than one. A
  * plan carrying a third price (early-bird, non-profit) still has no way to be
  * described here - which is exactly the gap PriceLabel closes.
  */
@@ -353,15 +354,86 @@ interface UsageMetersProps extends Omit<KerneUIProps, 'logo'> {
 }
 declare function UsageMeters({ title, featureKeys, showUnlimited, limit: maxRows, labels, emptyState, appearance, className, }: UsageMetersProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Display helpers shared by the billing and usage components.
+ */
+
+/**
+ * Last-resort label for a feature.
+ *
+ * `GET /v1/billing/entitlements` returns `feature_key` but no `feature_name`
+ * (see EntitlementSummary), while the subscription payload does carry names -
+ * so components cross-reference the subscription first and only fall back
+ * here for a scope on a default pack, which has no subscription to read names
+ * from. Turning `api_calls` into "Api calls" is not as good as the real name;
+ * it is only better than showing a raw key to an end user.
+ */
+declare function humanizeFeatureKey(key: string): string;
+/** Amounts are stored in minor units (cents), as the provider APIs return them. */
+declare function formatMoney(amountMinorUnits: number, currency: string): string;
+declare function formatNumber(value: number): string;
+declare function formatDate(iso: string | null): string | null;
+/**
+ * Normalises the provider's interval wording, then localizes it.
+ *
+ * `PlanPrice.interval` is Kerne's own "N+cycle" encoding ("1M", "3M", "1Y",
+ * "30D"), checked first since it's what every
+ * subscription/plan payload actually carries. The word-based fallback below
+ * stays for any raw provider string passed directly (Stripe says `month`,
+ * Polar says `monthly` - same thing to a reader). An interval matching
+ * neither falls through unchanged rather than being dropped: better a raw
+ * value than a price with no period attached.
+ */
+declare function formatInterval(interval: string, labels: IntervalLabels): string;
+type IntervalLabels = Pick<KerneLocalization['billing'], 'intervalMonth' | 'intervalYear' | 'intervalWeek' | 'intervalDay'>;
+interface PriceDisplay {
+    /** What's actually charged - show this alongside displayAmount, never hide it. */
+    billedAmount: number;
+    billedInterval: string;
+    /** The headline number a PriceLabel.display_interval asks to show instead. */
+    displayAmount: number;
+    displayInterval: string;
+}
+/**
+ * Resolves what to show for a price under a label's `display_interval` -
+ * e.g. an annual price shown as its monthly equivalent while still billing
+ * annually. `null`/`undefined`/equal-to-billed pass through unchanged. Divides
+ * once via approxMonths()'s ratio, never divide-then-multiply back to
+ * "verify" - a price rarely divides evenly (100 EUR/year -> 8.33 EUR/month,
+ * and 8.33 * 12 = 99.96, not 100).
+ */
+declare function resolvePriceDisplay(price: {
+    amount: number;
+    interval: string;
+}, displayInterval: string | null | undefined): PriceDisplay;
+/**
+ * One entry per distinct PriceLabel across a plan catalog, in owner order
+ * (PriceLabel.sort_order, never alphabetical) - shared by every surface that
+ * renders a label switch ("Monthly"/"Annual" and similar).
+ */
+declare function collectPriceLabels(plans: PublicPlan[]): PublicPriceLabel[];
+interface LabelSavings {
+    labelSlug: string;
+    percent: number;
+}
+/**
+ * Per-month discount of the longest-billed label vs the shortest-billed one -
+ * the "Save X%" hint on a label switch. Compares what's actually charged
+ * (interval/amount), never the display_interval cosmetic - a label showing
+ * "10 EUR/mo" for an annual price still bills the year, and that's what the
+ * saving has to stay true about. Only returned once an actual plan prices
+ * both ends of the range: nothing is inferred from a single price, and a
+ * catalog that only sells the longest label can't claim a discount that
+ * doesn't apply to it.
+ */
+declare function resolveLabelSavings(plans: PublicPlan[], labels: PublicPriceLabel[]): LabelSavings | null;
+
 interface PricingTableContextValue {
     plans: PublicPlan[];
     labels: PublicPriceLabel[];
     selectedLabelSlug: string | null;
     setSelectedLabelSlug: (slug: string) => void;
-    savings: {
-        labelSlug: string;
-        percent: number;
-    } | null;
+    savings: LabelSavings | null;
     currentPlanId: string | null;
     busyPriceId: string | null;
     onSelectPlan: (plan: PublicPlan) => void;
@@ -451,4 +523,4 @@ interface UpgradePromptProps extends Omit<KerneUIProps, 'logo'> {
 }
 declare function UpgradePrompt({ featureKey, requested, featureName, children, upgradeUrl, onUpgradeClick, upgradeLabel, title, description, hideWhileLoading, appearance, className, }: UpgradePromptProps): react_jsx_runtime.JSX.Element | null;
 
-export { ActivateAccountForm, type ActivateAccountFormProps, AuthFlow, type AuthFlowProps, type AuthFlowStep, BillingSection, type BillingSectionProps, ChangePasswordForm, type ChangePasswordFormProps, CheckoutResult, type CheckoutResultProps, ForgotPasswordForm, type ForgotPasswordFormProps, type KerneAppearance, LoginForm, type LoginFormProps, MagicLinkCallback, type MagicLinkCallbackProps, PricingTable, type PricingTablePlanProps, type PricingTablePlansProps, type PricingTableProps, ProfileSection, type ProfileSectionProps, RegisterForm, type RegisterFormProps, ResetPasswordForm, type ResetPasswordFormProps, SecuritySection, type SecuritySectionProps, SignOutButton, type SignOutButtonProps, SubscriptionCard, type SubscriptionCardProps, UpgradePrompt, type UpgradePromptProps, UsageMeters, type UsageMetersProps, UserButton, type UserButtonMenuItem, type UserButtonProps, UserProfile, type UserProfileExtraTab, type UserProfileProps, type UserProfileTab, VerifyEmailForm, type VerifyEmailFormProps, WaitlistForm, type WaitlistFormProps, usePricingTable };
+export { ActivateAccountForm, type ActivateAccountFormProps, AuthFlow, type AuthFlowProps, type AuthFlowStep, BillingSection, type BillingSectionProps, ChangePasswordForm, type ChangePasswordFormProps, CheckoutResult, type CheckoutResultProps, ForgotPasswordForm, type ForgotPasswordFormProps, type KerneAppearance, KerneLocalization, type LabelSavings, LoginForm, type LoginFormProps, MagicLinkCallback, type MagicLinkCallbackProps, type PriceDisplay, PricingTable, type PricingTablePlanProps, type PricingTablePlansProps, type PricingTableProps, ProfileSection, type ProfileSectionProps, RegisterForm, type RegisterFormProps, ResetPasswordForm, type ResetPasswordFormProps, SecuritySection, type SecuritySectionProps, SignOutButton, type SignOutButtonProps, SubscriptionCard, type SubscriptionCardProps, UpgradePrompt, type UpgradePromptProps, UsageMeters, type UsageMetersProps, UserButton, type UserButtonMenuItem, type UserButtonProps, UserProfile, type UserProfileExtraTab, type UserProfileProps, type UserProfileTab, VerifyEmailForm, type VerifyEmailFormProps, WaitlistForm, type WaitlistFormProps, collectPriceLabels, formatDate, formatInterval, formatMoney, formatNumber, humanizeFeatureKey, resolveLabelSavings, resolvePriceDisplay, usePricingTable };

package/dist/ui/index.js

@@ -7,17 +7,17 @@ import {
   useAuth,
   useAuthConfig,
   useCancelSubscription,
-  useCheckout,
   useClient,
   useEntitlements,
   useErrorResolver,
   useLocalization,
+  usePlanSwitch,
   usePlans,
   usePortal,
   useSubscription,
   useUser,
   useWaitlist
-} from "../chunk-NFJ2S5VJ.js";
+} from "../chunk-IHNWY4ML.js";
 
 // src/ui/AuthFlow.tsx
 import { useState as useState10 } from "react";
@@ -2822,6 +2822,44 @@ function resolvePriceDisplay(price, displayInterval) {
     displayInterval
   };
 }
+function collectPriceLabels(plans) {
+  const bySlug = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    for (const price of plan.prices) {
+      if (!bySlug.has(price.label.slug)) bySlug.set(price.label.slug, price.label);
+    }
+  }
+  return Array.from(bySlug.values()).sort(
+    (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)
+  );
+}
+function resolveLabelSavings(plans, labels) {
+  if (labels.length < 2) return null;
+  const priceFor = (labelSlug) => {
+    for (const plan of plans) {
+      const price = plan.prices.find((p) => p.label.slug === labelSlug);
+      if (price) return price;
+    }
+    return void 0;
+  };
+  const sorted = [...labels].sort(
+    (a, b) => approxMonths(priceFor(a.slug)?.interval ?? "1M") - approxMonths(priceFor(b.slug)?.interval ?? "1M")
+  );
+  const shortest = sorted[0];
+  const longest = sorted[sorted.length - 1];
+  if (shortest.slug === longest.slug) return null;
+  for (const plan of plans) {
+    const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
+    const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
+    if (!shortPrice?.amount || !longPrice) continue;
+    const shortMonths = approxMonths(shortPrice.interval);
+    const longMonths = approxMonths(longPrice.interval);
+    if (!shortMonths || !longMonths) continue;
+    const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
+    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
+  }
+  return null;
+}
 
 // src/ui/UsageMeters.tsx
 import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -3105,31 +3143,37 @@ function BillingSection({
   usageFeatureKeys,
   usageLabels
 }) {
-  const { subscription } = useSubscription(productSlug);
+  const { subscription, refetch: refetchSubscription } = useSubscription(productSlug);
   const { plans, isLoading: plansLoading } = usePlans(pricingProductIdOrSlug);
-  const { openCheckout } = useCheckout();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [busy, setBusy] = useState17(null);
-  const [error, setError] = useState17(null);
+  const {
+    pending: pendingPlan,
+    switching,
+    switchError,
+    checkoutPriceId: busy,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = usePlanSwitch(subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const error = checkoutError ?? switchError;
   const intervals = useMemo(() => intervalsOf(plans), [plans]);
   const [interval, setInterval] = useState17(null);
   const activeInterval = interval ?? subscription?.plan_price.interval ?? intervals[0] ?? null;
-  const handleSwitch = async (planPriceId) => {
-    setError(null);
-    setBusy(planPriceId);
-    try {
-      await openCheckout(planPriceId, {
-        successUrl: checkoutSuccessUrl,
-        cancelUrl: checkoutCancelUrl
-      });
-    } catch (e) {
-      setError(showError(e));
-      setBusy(null);
-    }
-  };
   return /* @__PURE__ */ jsxs16(Fragment10, { children: [
-    error ? /* @__PURE__ */ jsx17(Panel, { variant: "danger", children: error }) : null,
+    error ? /* @__PURE__ */ jsx17(Panel, { variant: "danger", children: showError(error) }) : null,
+    pendingPlan ? /* @__PURE__ */ jsxs16(Panel, { children: [
+      /* @__PURE__ */ jsx17("p", { children: fill(l10n.billing.switchConfirmTitle, { plan: pendingPlan.plan.name }) }),
+      /* @__PURE__ */ jsx17("p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      /* @__PURE__ */ jsxs16("div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ jsx17(Button, { variant: "outline", type: "button", onClick: dismissSwitch, disabled: switching, children: l10n.billing.switchConfirmDismiss }),
+        /* @__PURE__ */ jsx17(Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
     /* @__PURE__ */ jsx17(Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ jsx17(
       SubscriptionCard,
       {
@@ -3187,7 +3231,7 @@ function BillingSection({
                 {
                   variant: "outline",
                   type: "button",
-                  onClick: () => handleSwitch(price.id),
+                  onClick: () => selectPlan(plan, price),
                   loading: busy === price.id,
                   disabled: busy !== null,
                   children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
@@ -3318,50 +3362,6 @@ function formatEntitlement(e, unlimitedLabel) {
   if (e.limit === -1) return `${unlimitedLabel} ${e.feature_name.toLowerCase()}`;
   return `${formatNumber(e.limit)} ${e.feature_name.toLowerCase()}`;
 }
-function collectLabels(plans) {
-  const bySlug = /* @__PURE__ */ new Map();
-  for (const plan of plans) {
-    for (const price of plan.prices) {
-      if (!bySlug.has(price.label.slug)) bySlug.set(price.label.slug, price.label);
-    }
-  }
-  return Array.from(bySlug.values()).sort(
-    (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)
-  );
-}
-var ENCODED_INTERVAL_MONTHS = { D: 12 / 365, M: 1, Y: 12 };
-function approxMonths2(value) {
-  const match = /^([1-9]\d*)([DMY])$/.exec(value);
-  if (!match) return 0;
-  return parseInt(match[1], 10) * ENCODED_INTERVAL_MONTHS[match[2]];
-}
-function labelSavings(plans, labels) {
-  if (labels.length < 2) return null;
-  const priceFor = (labelSlug) => {
-    for (const plan of plans) {
-      const price = plan.prices.find((p) => p.label.slug === labelSlug);
-      if (price) return price;
-    }
-    return void 0;
-  };
-  const sorted = [...labels].sort(
-    (a, b) => approxMonths2(priceFor(a.slug)?.interval ?? "1M") - approxMonths2(priceFor(b.slug)?.interval ?? "1M")
-  );
-  const shortest = sorted[0];
-  const longest = sorted[sorted.length - 1];
-  if (shortest.slug === longest.slug) return null;
-  for (const plan of plans) {
-    const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
-    const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
-    if (!shortPrice?.amount || !longPrice) continue;
-    const shortMonths = approxMonths2(shortPrice.interval);
-    const longMonths = approxMonths2(longPrice.interval);
-    if (!shortMonths || !longMonths) continue;
-    const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
-    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
-  }
-  return null;
-}
 var PricingTableContext = createContext2(null);
 function usePricingTable() {
   const ctx = useContext2(PricingTableContext);
@@ -3381,38 +3381,38 @@ function PricingTable({
   children
 }) {
   const { plans, isLoading, error } = usePlans(product);
-  const { subscription } = useSubscription(product);
-  const { openCheckout } = useCheckout();
+  const { subscription, refetch: refetchSubscription } = useSubscription(product);
   const l10n = useLocalization();
   const showError = useErrorResolver();
   const [selectedLabelSlug, setSelectedLabelSlug] = useState19(defaultLabel ?? null);
-  const [busyPriceId, setBusyPriceId] = useState19(null);
-  const [checkoutError, setCheckoutError] = useState19(null);
-  const labels = useMemo2(() => collectLabels(plans), [plans]);
-  const savings = useMemo2(() => labelSavings(plans, labels), [plans, labels]);
+  const {
+    pending: pendingSwitch,
+    switching,
+    switchError,
+    checkoutPriceId: busyPriceId,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = usePlanSwitch(subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const labels = useMemo2(() => collectPriceLabels(plans), [plans]);
+  const savings = useMemo2(() => resolveLabelSavings(plans, labels), [plans, labels]);
   useEffect7(() => {
     if (labels.length === 0) return;
     if (selectedLabelSlug && labels.some((l) => l.slug === selectedLabelSlug)) return;
     setSelectedLabelSlug(labels[0].slug);
   }, [labels]);
-  const handleSelectPlan = async (plan) => {
+  const handleSelectPlan = (plan) => {
     const price = plan.prices.find((p) => p.label.slug === selectedLabelSlug) ?? plan.prices[0];
     if (!price) return;
     if (onSelectPlan) {
       onSelectPlan(plan, price);
       return;
     }
-    setCheckoutError(null);
-    setBusyPriceId(price.id);
-    try {
-      await openCheckout(price.id, {
-        successUrl: checkoutSuccessUrl,
-        cancelUrl: checkoutCancelUrl
-      });
-    } catch (e) {
-      setCheckoutError(showError(e));
-      setBusyPriceId(null);
-    }
+    void selectPlan(plan, price);
   };
   const ctx = {
     plans,
@@ -3425,7 +3425,25 @@ function PricingTable({
     onSelectPlan: handleSelectPlan
   };
   return /* @__PURE__ */ jsx19(Shell, { appearance, className, size: "wide", children: isLoading ? /* @__PURE__ */ jsx19("div", { className: "kerne-pricing-skeleton", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: /* @__PURE__ */ jsx19("div", { className: "kerne-skeleton", style: { height: 320 } }) }) : error ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ jsxs18(PricingTableContext.Provider, { value: ctx, children: [
-    checkoutError ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: checkoutError }) : null,
+    checkoutError ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: showError(checkoutError) }) : null,
+    pendingSwitch ? /* @__PURE__ */ jsxs18(Panel, { children: [
+      /* @__PURE__ */ jsx19("p", { children: fill(l10n.billing.switchConfirmTitle, { plan: pendingSwitch.plan.name }) }),
+      /* @__PURE__ */ jsx19("p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      switchError ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: showError(switchError) }) : null,
+      /* @__PURE__ */ jsxs18("div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ jsx19(
+          Button,
+          {
+            variant: "outline",
+            type: "button",
+            onClick: dismissSwitch,
+            disabled: switching,
+            children: l10n.billing.switchConfirmDismiss
+          }
+        ),
+        /* @__PURE__ */ jsx19(Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
     children
   ] }) });
 }
@@ -3774,7 +3792,15 @@ export {
   UserProfile,
   VerifyEmailForm,
   WaitlistForm,
+  collectPriceLabels,
   defaultLocalization,
+  formatDate,
+  formatInterval,
+  formatMoney,
+  formatNumber,
+  humanizeFeatureKey,
+  resolveLabelSavings,
+  resolvePriceDisplay,
   useLocalization,
   usePricingTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerne/react",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Kerne React SDK",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -32,8 +32,8 @@
     "dist"
   ],
   "dependencies": {
-    "@kerne/server": "1.0.0",
-    "@kerne/types": "1.0.0"
+    "@kerne/server": "1.2.0",
+    "@kerne/types": "1.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
@@ -41,19 +41,25 @@
   "devDependencies": {
     "@types/jest": "^29.5.12",
     "@types/react": "^18.0.0 || ^19.0.0",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "ts-jest": "^29.2.5",
     "tsup": "^8.3.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "typescript-eslint": "^8.0.1",
+    "eslint-plugin-kerne": "0.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && pnpm check:dist-hygiene",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "check:dist-hygiene": "node ./node_modules/eslint-plugin-kerne/check-dist-hygiene.js dist",
     "test": "jest"
   }
 }