@kerne/react 0.1.2 → 1.0.0

package/README.md

@@ -44,20 +44,32 @@ function LoginForm() {
 
 ## Gating a feature
 
-`Allows` (and the underlying `useAccess` hook) check the logged-in user automatically - no scope to pass, the SDK already knows who's authenticated.
+`Access` (and the underlying `useAccess` hook) check the logged-in user automatically - no scope to pass, the SDK already knows who's authenticated.
 
 ```tsx
-import { Allows } from '@kerne/react';
+import { Access } from '@kerne/react';
 
 function ExportButton() {
   return (
-    <Allows featureKey="export_pdf" fallback={<UpgradePrompt />}>
+    <Access featureKey="export_pdf" fallback={<UpgradePrompt />}>
       <button onClick={exportPdf}>Export as PDF</button>
-    </Allows>
+    </Access>
   );
 }
 ```
 
+Pass `requested` to check a quantity before it's spent, not after - useful right before a batch action:
+
+```tsx
+<Access
+  featureKey="ai_credits"
+  requested={5}
+  fallback={<UpgradePrompt reason="Not enough credits for batch processing" />}
+>
+  <BatchProcessButton count={5} />
+</Access>
+```
+
 For the full detail behind a check (limit/used/remaining, not just a boolean), read `details` from the same hook - `const { allowed, details } = useAccess('api_calls')`.
 
 ## Checkout & billing portal
@@ -75,8 +87,9 @@ const { openPortal } = usePortal();
 - `useUser`: the current authenticated user's profile.
 - `useAccess`: feature access - `allowed` for the go/no-go, `details` for limit/used/remaining.
 - `useUsage`, `useEntitlements`: usage and full entitlement lists for the current user.
-- `useSubscription`, `usePlans`: the current subscription and the tenant's public plan catalog.
+- `useSubscription`, `usePlans`: the current subscription (with `refetch`) and the tenant's public plan catalog.
 - `useCheckout`, `usePortal`: hosted checkout and billing-portal sessions.
+- `useCancelSubscription`, `useChangePlan`: cancel or switch plan. Both act on the payment provider first, then on Kerne, so a cancellation really stops the next invoice.
 
 ## Documentation
 

package/dist/{chunk-3PROPZWW.cjs → chunk-IMZFZ3P5.cjs}

@@ -18,7 +18,19 @@ var defaultLocalization = {
     sending: "Sending...",
     continueWith: "Continue with {provider}",
     securedByKerne: "Secured by Kerne",
-    loading: "Loading"
+    loading: "Loading",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
+    capsLockOn: "Caps Lock is on",
+    passwordHint: "At least {count} characters",
+    passwordRequireUppercase: "One uppercase letter",
+    passwordRequireNumber: "One number",
+    passwordRequireSymbol: "One special character",
+    strengthLabel: "Password strength",
+    strengthWeak: "Weak",
+    strengthFair: "Fair",
+    strengthGood: "Good",
+    strengthStrong: "Strong"
   },
   signIn: {
     title: "Welcome back",
@@ -173,6 +185,12 @@ var defaultLocalization = {
     freePlan: "You are on the free plan.",
     seePlans: "See plans",
     cancelNotice: "Your plan is set to end - you keep access until the date above.",
+    cancelSubscription: "Cancel subscription",
+    canceling: "Canceling...",
+    cancelConfirmTitle: "Cancel your subscription?",
+    cancelConfirmBody: "You'll keep access until the end of the current billing period.",
+    cancelConfirmButton: "Yes, cancel",
+    cancelConfirmDismiss: "Never mind",
     changePlan: "Change plan",
     current: "Current",
     switchTo: "Switch",
@@ -200,11 +218,23 @@ var defaultLocalization = {
     subtitle: "Counted against your plan for the current period.",
     used: "{count} used",
     nothingMetered: "Nothing metered on your plan - you have no usage limits to watch.",
-    overage: "{count} over your included amount - billed as overage.",
+    overage: "{count} over your included amount - at no extra charge.",
+    overageBilled: "{count} over your included amount - the extra is billed on top of your plan.",
     limitReached: "You have reached your limit.",
+    capReached: "You've reached your billing cap for this period - everything past this is free.",
+    billedAmount: "{amount} billed this period.",
     loading: "Loading usage",
     loadFailed: "Could not load your usage right now."
   },
+  pricing: {
+    getStarted: "Get started",
+    billedAt: "Billed {amount} / {interval}",
+    save: "Save {percent}%",
+    unlimited: "Unlimited",
+    moreFeatures: "+{count} more",
+    loading: "Loading plans",
+    loadFailed: "Could not load plans right now."
+  },
   checkout: {
     confirmingTitle: "Confirming your payment",
     confirmingBody: "This takes a few seconds - please keep this tab open.",
@@ -319,6 +349,7 @@ var KerneClient = (_class = class {
   
   
   
+  
   __init() {this.refreshTimer = null}
   __init2() {this.listeners = /* @__PURE__ */ new Set()}
   __init3() {this._user = null}
@@ -335,6 +366,7 @@ var KerneClient = (_class = class {
     this.storage = _nullishCoalesce(config.storage, () => ( (typeof window !== "undefined" ? localStorage : null)));
     this.storageKey = _nullishCoalesce(config.storageKey, () => ( DEFAULT_STORAGE_KEY));
     this.onAuthChange = config.onAuthChange;
+    this.onHandoffError = config.onHandoffError;
     this.autoRefresh = _nullishCoalesce(config.autoRefresh, () => ( true));
     this.refreshBuffer = _nullishCoalesce(config.refreshBuffer, () => ( DEFAULT_REFRESH_BUFFER));
     this.kerne = new (0, _server.Kerne)({
@@ -455,6 +487,7 @@ var KerneClient = (_class = class {
             continue;
           }
           console.warn("[Kerne] Handoff exchange failed:", e);
+          _optionalChain([this, 'access', _4 => _4.onHandoffError, 'optionalCall', _5 => _5(e)]);
           return;
         }
       }
@@ -473,7 +506,7 @@ var KerneClient = (_class = class {
     } catch (e) {
       console.warn("[Kerne] Startup refresh failed, clearing session:", e);
       this._refreshToken = null;
-      _optionalChain([this, 'access', _4 => _4.storage, 'optionalAccess', _5 => _5.removeItem, 'call', _6 => _6(this.storageKey)]);
+      _optionalChain([this, 'access', _6 => _6.storage, 'optionalAccess', _7 => _7.removeItem, 'call', _8 => _8(this.storageKey)]);
     } finally {
       this._isLoading = false;
       this.notify();
@@ -491,7 +524,13 @@ var KerneClient = (_class = class {
     this._refreshToken = response.refresh_token;
     this._expiresAt = response.expires_at ? new Date(response.expires_at) : null;
     this.kerne = this.kerne.withToken(response.token);
-    this._user = await this.kerne.users.me();
+    try {
+      this._user = await this.kerne.users.me();
+    } catch (e) {
+      const sameUser = _optionalChain([this, 'access', _9 => _9._user, 'optionalAccess', _10 => _10.id]) === _optionalChain([response, 'access', _11 => _11.user, 'optionalAccess', _12 => _12.id]);
+      console.error("[Kerne] Failed to load the user profile:", e);
+      this._user = sameUser ? this._user : null;
+    }
     if (this.storage) {
       this.storage.setItem(
         this.storageKey,
@@ -504,7 +543,7 @@ var KerneClient = (_class = class {
       );
     }
     this.scheduleRefresh();
-    _optionalChain([this, 'access', _7 => _7.onAuthChange, 'optionalCall', _8 => _8(this._user)]);
+    _optionalChain([this, 'access', _13 => _13.onAuthChange, 'optionalCall', _14 => _14(this._user)]);
     this.notify();
   }
   clearSession() {
@@ -516,7 +555,7 @@ var KerneClient = (_class = class {
     if (this.storage) {
       this.storage.removeItem(this.storageKey);
     }
-    _optionalChain([this, 'access', _9 => _9.onAuthChange, 'optionalCall', _10 => _10(null)]);
+    _optionalChain([this, 'access', _15 => _15.onAuthChange, 'optionalCall', _16 => _16(null)]);
     this.notify();
   }
   scheduleRefresh() {
@@ -579,7 +618,7 @@ var KerneClient = (_class = class {
     try {
       const user = await this.kerne.users.me();
       this._user = user;
-      _optionalChain([this, 'access', _11 => _11.onAuthChange, 'optionalCall', _12 => _12(user)]);
+      _optionalChain([this, 'access', _17 => _17.onAuthChange, 'optionalCall', _18 => _18(user)]);
       this.notify();
       return user;
     } catch (e2) {
@@ -604,7 +643,7 @@ var KerneClient = (_class = class {
       } catch (e) {
       }
     }
-    _optionalChain([this, 'access', _13 => _13.onAuthChange, 'optionalCall', _14 => _14(updated)]);
+    _optionalChain([this, 'access', _19 => _19.onAuthChange, 'optionalCall', _20 => _20(updated)]);
     this.notify();
     return updated;
   }
@@ -693,7 +732,7 @@ var KerneClient = (_class = class {
    * caught everything and returned `false`) - a 401/500 must not be
    * indistinguishable from a real denial, that's exactly what let the
    * `has_access`/`allowed` mismatch below ship unnoticed. Callers that want
-   * a fail-closed boolean regardless of the reason (e.g. `<Allows>`)
+   * a fail-closed boolean regardless of the reason (e.g. `<Access>`)
    * catch around this themselves.
    */
   async allows(featureKey, requested) {
@@ -723,13 +762,21 @@ var KerneClient = (_class = class {
   async getSubscription(productSlug) {
     const subs = await this.kerne.billing.subscriptions.list({
       productSlug,
-      scopeType: "USER"
+      subjectType: "USER"
     });
     const active = subs.find(
       (s) => s.status === "ACTIVE" || s.status === "TRIALING" || s.status === "PAST_DUE"
     );
     return _nullishCoalesce(active, () => ( null));
   }
+  /** `immediately: true` ends it now; otherwise cancels at period end (API default). */
+  async cancelSubscription(subscriptionId, immediately) {
+    return this.kerne.billing.subscriptions.cancel(subscriptionId, immediately);
+  }
+  /** Swaps the plan/price, effective immediately - deferring a downgrade isn't supported yet. */
+  async changeSubscriptionPlan(subscriptionId, planPriceId, options) {
+    return this.kerne.billing.subscriptions.changePlanPrice(subscriptionId, planPriceId, options);
+  }
   /** Public pricing data - omit `productIdOrSlug` for the tenant's default product. */
   async getPlans(productIdOrSlug) {
     return this.kerne.billing.plans(productIdOrSlug);
@@ -777,7 +824,7 @@ function KerneProvider({ children, localization, ...config }) {
   }, [config.appId, config.baseUrl]);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([client, 'access', _15 => _15.cancelRefresh, 'optionalCall', _16 => _16()]);
+      _optionalChain([client, 'access', _21 => _21.cancelRefresh, 'optionalCall', _22 => _22()]);
     };
   }, [client]);
   const l10n = _react.useMemo.call(void 0, () => mergeLocalization(localization), [localization]);
@@ -902,6 +949,38 @@ function usePortal() {
     openPortal: _react.useCallback.call(void 0, (returnUrl) => client.openPortal(returnUrl), [client])
   };
 }
+function useCancelSubscription() {
+  const client = useClient();
+  const [isCanceling, setIsCanceling] = _react.useState.call(void 0, false);
+  const cancelSubscription = _react.useCallback.call(void 0, 
+    async (subscriptionId, immediately) => {
+      setIsCanceling(true);
+      try {
+        return await client.cancelSubscription(subscriptionId, immediately);
+      } finally {
+        setIsCanceling(false);
+      }
+    },
+    [client]
+  );
+  return { cancelSubscription, isCanceling };
+}
+function useChangePlan() {
+  const client = useClient();
+  const [isChanging, setIsChanging] = _react.useState.call(void 0, false);
+  const changePlan = _react.useCallback.call(void 0, 
+    async (subscriptionId, planPriceId, options) => {
+      setIsChanging(true);
+      try {
+        return await client.changeSubscriptionPlan(subscriptionId, planPriceId, options);
+      } finally {
+        setIsChanging(false);
+      }
+    },
+    [client]
+  );
+  return { changePlan, isChanging };
+}
 function useAccess(featureKey, requested) {
   const client = useClient();
   const [state, setState] = _react.useState.call(void 0, {
@@ -936,27 +1015,38 @@ function useSubscription(productSlug) {
     isLoading: true,
     error: null
   });
+  const fetchOnce = _react.useCallback.call(void 0, 
+    (mountedRef) => {
+      client.getSubscription(productSlug).then((subscription) => {
+        if (mountedRef.current) {
+          setState({ subscription, isLoading: false, error: null });
+        }
+      }).catch((error) => {
+        if (mountedRef.current) {
+          setState({ subscription: null, isLoading: false, error });
+        }
+      });
+    },
+    [client, productSlug]
+  );
   _react.useEffect.call(void 0, () => {
-    let mounted = true;
-    client.getSubscription(productSlug).then((subscription) => {
-      if (mounted) {
-        setState({ subscription, isLoading: false, error: null });
-      }
-    }).catch((error) => {
-      if (mounted) {
-        setState({ subscription: null, isLoading: false, error });
-      }
-    });
+    const mountedRef = { current: true };
+    fetchOnce(mountedRef);
     return () => {
-      mounted = false;
+      mountedRef.current = false;
     };
-  }, [client, productSlug]);
-  const isActive = _optionalChain([state, 'access', _17 => _17.subscription, 'optionalAccess', _18 => _18.status]) === "ACTIVE" || _optionalChain([state, 'access', _19 => _19.subscription, 'optionalAccess', _20 => _20.status]) === "TRIALING";
-  const planSlug = _optionalChain([state, 'access', _21 => _21.subscription, 'optionalAccess', _22 => _22.plan, 'optionalAccess', _23 => _23.slug]);
+  }, [fetchOnce]);
+  const refetch = _react.useCallback.call(void 0, () => {
+    setState((prev) => ({ ...prev, isLoading: true }));
+    fetchOnce({ current: true });
+  }, [fetchOnce]);
+  const isActive = _optionalChain([state, 'access', _23 => _23.subscription, 'optionalAccess', _24 => _24.status]) === "ACTIVE" || _optionalChain([state, 'access', _25 => _25.subscription, 'optionalAccess', _26 => _26.status]) === "TRIALING";
+  const planSlug = _optionalChain([state, 'access', _27 => _27.subscription, 'optionalAccess', _28 => _28.plan, 'optionalAccess', _29 => _29.slug]);
   return {
     ...state,
     isActive,
-    planSlug
+    planSlug,
+    refetch
   };
 }
 function usePlans(productIdOrSlug) {
@@ -1099,9 +1189,9 @@ function useUser() {
     update: updateProfile,
     // Computed properties
     fullName: user ? `${user.first_name || ""} ${user.last_name || ""}`.trim() : null,
-    initials: user ? `${_optionalChain([user, 'access', _24 => _24.first_name, 'optionalAccess', _25 => _25[0]]) || ""}${_optionalChain([user, 'access', _26 => _26.last_name, 'optionalAccess', _27 => _27[0]]) || ""}`.toUpperCase() : null,
-    email: _optionalChain([user, 'optionalAccess', _28 => _28.email]) || null,
-    emailVerified: _optionalChain([user, 'optionalAccess', _29 => _29.email_verified]) || false
+    initials: user ? `${_optionalChain([user, 'access', _30 => _30.first_name, 'optionalAccess', _31 => _31[0]]) || ""}${_optionalChain([user, 'access', _32 => _32.last_name, 'optionalAccess', _33 => _33[0]]) || ""}`.toUpperCase() : null,
+    email: _optionalChain([user, 'optionalAccess', _34 => _34.email]) || null,
+    emailVerified: _optionalChain([user, 'optionalAccess', _35 => _35.email_verified]) || false
   };
 }
 
@@ -1127,4 +1217,6 @@ function useUser() {
 
 
 
-exports.defaultLocalization = defaultLocalization; exports.useLocalization = useLocalization; exports.fill = fill; exports.fillNode = fillNode; exports.useErrorResolver = useErrorResolver; exports.KerneClient = KerneClient; exports.KerneContext = KerneContext; exports.KerneProvider = KerneProvider; exports.useClient = useClient; exports.useAuth = useAuth; exports.useCheckout = useCheckout; exports.usePortal = usePortal; exports.useAccess = useAccess; exports.useSubscription = useSubscription; exports.usePlans = usePlans; exports.useAuthConfig = useAuthConfig; exports.useEntitlements = useEntitlements; exports.useUsage = useUsage; exports.useWaitlist = useWaitlist; exports.useInvitation = useInvitation; exports.useUser = useUser;
+
+
+exports.defaultLocalization = defaultLocalization; exports.useLocalization = useLocalization; exports.fill = fill; exports.fillNode = fillNode; exports.useErrorResolver = useErrorResolver; exports.KerneClient = KerneClient; exports.KerneContext = KerneContext; exports.KerneProvider = KerneProvider; exports.useClient = useClient; exports.useAuth = useAuth; exports.useCheckout = useCheckout; exports.usePortal = usePortal; exports.useCancelSubscription = useCancelSubscription; exports.useChangePlan = useChangePlan; exports.useAccess = useAccess; exports.useSubscription = useSubscription; exports.usePlans = usePlans; exports.useAuthConfig = useAuthConfig; exports.useEntitlements = useEntitlements; exports.useUsage = useUsage; exports.useWaitlist = useWaitlist; exports.useInvitation = useInvitation; exports.useUser = useUser;

package/dist/{chunk-AIUIBAYB.js → chunk-NFJ2S5VJ.js}

@@ -18,7 +18,19 @@ var defaultLocalization = {
     sending: "Sending...",
     continueWith: "Continue with {provider}",
     securedByKerne: "Secured by Kerne",
-    loading: "Loading"
+    loading: "Loading",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
+    capsLockOn: "Caps Lock is on",
+    passwordHint: "At least {count} characters",
+    passwordRequireUppercase: "One uppercase letter",
+    passwordRequireNumber: "One number",
+    passwordRequireSymbol: "One special character",
+    strengthLabel: "Password strength",
+    strengthWeak: "Weak",
+    strengthFair: "Fair",
+    strengthGood: "Good",
+    strengthStrong: "Strong"
   },
   signIn: {
     title: "Welcome back",
@@ -173,6 +185,12 @@ var defaultLocalization = {
     freePlan: "You are on the free plan.",
     seePlans: "See plans",
     cancelNotice: "Your plan is set to end - you keep access until the date above.",
+    cancelSubscription: "Cancel subscription",
+    canceling: "Canceling...",
+    cancelConfirmTitle: "Cancel your subscription?",
+    cancelConfirmBody: "You'll keep access until the end of the current billing period.",
+    cancelConfirmButton: "Yes, cancel",
+    cancelConfirmDismiss: "Never mind",
     changePlan: "Change plan",
     current: "Current",
     switchTo: "Switch",
@@ -200,11 +218,23 @@ var defaultLocalization = {
     subtitle: "Counted against your plan for the current period.",
     used: "{count} used",
     nothingMetered: "Nothing metered on your plan - you have no usage limits to watch.",
-    overage: "{count} over your included amount - billed as overage.",
+    overage: "{count} over your included amount - at no extra charge.",
+    overageBilled: "{count} over your included amount - the extra is billed on top of your plan.",
     limitReached: "You have reached your limit.",
+    capReached: "You've reached your billing cap for this period - everything past this is free.",
+    billedAmount: "{amount} billed this period.",
     loading: "Loading usage",
     loadFailed: "Could not load your usage right now."
   },
+  pricing: {
+    getStarted: "Get started",
+    billedAt: "Billed {amount} / {interval}",
+    save: "Save {percent}%",
+    unlimited: "Unlimited",
+    moreFeatures: "+{count} more",
+    loading: "Loading plans",
+    loadFailed: "Could not load plans right now."
+  },
   checkout: {
     confirmingTitle: "Confirming your payment",
     confirmingBody: "This takes a few seconds - please keep this tab open.",
@@ -317,6 +347,7 @@ var KerneClient = class {
   storage;
   storageKey;
   onAuthChange;
+  onHandoffError;
   autoRefresh;
   refreshBuffer;
   refreshTimer = null;
@@ -335,6 +366,7 @@ var KerneClient = class {
     this.storage = config.storage ?? (typeof window !== "undefined" ? localStorage : null);
     this.storageKey = config.storageKey ?? DEFAULT_STORAGE_KEY;
     this.onAuthChange = config.onAuthChange;
+    this.onHandoffError = config.onHandoffError;
     this.autoRefresh = config.autoRefresh ?? true;
     this.refreshBuffer = config.refreshBuffer ?? DEFAULT_REFRESH_BUFFER;
     this.kerne = new Kerne({
@@ -455,6 +487,7 @@ var KerneClient = class {
             continue;
           }
           console.warn("[Kerne] Handoff exchange failed:", e);
+          this.onHandoffError?.(e);
           return;
         }
       }
@@ -491,7 +524,13 @@ var KerneClient = class {
     this._refreshToken = response.refresh_token;
     this._expiresAt = response.expires_at ? new Date(response.expires_at) : null;
     this.kerne = this.kerne.withToken(response.token);
-    this._user = await this.kerne.users.me();
+    try {
+      this._user = await this.kerne.users.me();
+    } catch (e) {
+      const sameUser = this._user?.id === response.user?.id;
+      console.error("[Kerne] Failed to load the user profile:", e);
+      this._user = sameUser ? this._user : null;
+    }
     if (this.storage) {
       this.storage.setItem(
         this.storageKey,
@@ -693,7 +732,7 @@ var KerneClient = class {
    * caught everything and returned `false`) - a 401/500 must not be
    * indistinguishable from a real denial, that's exactly what let the
    * `has_access`/`allowed` mismatch below ship unnoticed. Callers that want
-   * a fail-closed boolean regardless of the reason (e.g. `<Allows>`)
+   * a fail-closed boolean regardless of the reason (e.g. `<Access>`)
    * catch around this themselves.
    */
   async allows(featureKey, requested) {
@@ -723,13 +762,21 @@ var KerneClient = class {
   async getSubscription(productSlug) {
     const subs = await this.kerne.billing.subscriptions.list({
       productSlug,
-      scopeType: "USER"
+      subjectType: "USER"
     });
     const active = subs.find(
       (s) => s.status === "ACTIVE" || s.status === "TRIALING" || s.status === "PAST_DUE"
     );
     return active ?? null;
   }
+  /** `immediately: true` ends it now; otherwise cancels at period end (API default). */
+  async cancelSubscription(subscriptionId, immediately) {
+    return this.kerne.billing.subscriptions.cancel(subscriptionId, immediately);
+  }
+  /** Swaps the plan/price, effective immediately - deferring a downgrade isn't supported yet. */
+  async changeSubscriptionPlan(subscriptionId, planPriceId, options) {
+    return this.kerne.billing.subscriptions.changePlanPrice(subscriptionId, planPriceId, options);
+  }
   /** Public pricing data - omit `productIdOrSlug` for the tenant's default product. */
   async getPlans(productIdOrSlug) {
     return this.kerne.billing.plans(productIdOrSlug);
@@ -902,6 +949,38 @@ function usePortal() {
     openPortal: useCallback2((returnUrl) => client.openPortal(returnUrl), [client])
   };
 }
+function useCancelSubscription() {
+  const client = useClient();
+  const [isCanceling, setIsCanceling] = useState(false);
+  const cancelSubscription = useCallback2(
+    async (subscriptionId, immediately) => {
+      setIsCanceling(true);
+      try {
+        return await client.cancelSubscription(subscriptionId, immediately);
+      } finally {
+        setIsCanceling(false);
+      }
+    },
+    [client]
+  );
+  return { cancelSubscription, isCanceling };
+}
+function useChangePlan() {
+  const client = useClient();
+  const [isChanging, setIsChanging] = useState(false);
+  const changePlan = useCallback2(
+    async (subscriptionId, planPriceId, options) => {
+      setIsChanging(true);
+      try {
+        return await client.changeSubscriptionPlan(subscriptionId, planPriceId, options);
+      } finally {
+        setIsChanging(false);
+      }
+    },
+    [client]
+  );
+  return { changePlan, isChanging };
+}
 function useAccess(featureKey, requested) {
   const client = useClient();
   const [state, setState] = useState({
@@ -936,27 +1015,38 @@ function useSubscription(productSlug) {
     isLoading: true,
     error: null
   });
+  const fetchOnce = useCallback2(
+    (mountedRef) => {
+      client.getSubscription(productSlug).then((subscription) => {
+        if (mountedRef.current) {
+          setState({ subscription, isLoading: false, error: null });
+        }
+      }).catch((error) => {
+        if (mountedRef.current) {
+          setState({ subscription: null, isLoading: false, error });
+        }
+      });
+    },
+    [client, productSlug]
+  );
   useEffect2(() => {
-    let mounted = true;
-    client.getSubscription(productSlug).then((subscription) => {
-      if (mounted) {
-        setState({ subscription, isLoading: false, error: null });
-      }
-    }).catch((error) => {
-      if (mounted) {
-        setState({ subscription: null, isLoading: false, error });
-      }
-    });
+    const mountedRef = { current: true };
+    fetchOnce(mountedRef);
     return () => {
-      mounted = false;
+      mountedRef.current = false;
     };
-  }, [client, productSlug]);
+  }, [fetchOnce]);
+  const refetch = useCallback2(() => {
+    setState((prev) => ({ ...prev, isLoading: true }));
+    fetchOnce({ current: true });
+  }, [fetchOnce]);
   const isActive = state.subscription?.status === "ACTIVE" || state.subscription?.status === "TRIALING";
   const planSlug = state.subscription?.plan?.slug;
   return {
     ...state,
     isActive,
-    planSlug
+    planSlug,
+    refetch
   };
 }
 function usePlans(productIdOrSlug) {
@@ -1118,6 +1208,8 @@ export {
   useAuth,
   useCheckout,
   usePortal,
+  useCancelSubscription,
+  useChangePlan,
   useAccess,
   useSubscription,
   usePlans,

package/dist/{i18n-Qketn1RF.d.cts → i18n-Di5qlnL1.d.cts}

@@ -16,6 +16,22 @@ interface KerneLocalization {
         continueWith: string;
         securedByKerne: string;
         loading: string;
+        showPassword: string;
+        hidePassword: string;
+        capsLockOn: string;
+        /**
+         * The tenant's password rules, stated before the server can reject them.
+         * Only the rules that tenant actually enforces are rendered.
+         */
+        passwordHint: string;
+        passwordRequireUppercase: string;
+        passwordRequireNumber: string;
+        passwordRequireSymbol: string;
+        strengthLabel: string;
+        strengthWeak: string;
+        strengthFair: string;
+        strengthGood: string;
+        strengthStrong: string;
     };
     signIn: {
         title: string;
@@ -170,6 +186,12 @@ interface KerneLocalization {
         freePlan: string;
         seePlans: string;
         cancelNotice: string;
+        cancelSubscription: string;
+        canceling: string;
+        cancelConfirmTitle: string;
+        cancelConfirmBody: string;
+        cancelConfirmButton: string;
+        cancelConfirmDismiss: string;
         changePlan: string;
         current: string;
         switchTo: string;
@@ -195,8 +217,30 @@ interface KerneLocalization {
         subtitle: string;
         used: string;
         nothingMetered: string;
+        /** Overage ALLOW: past the included amount, tolerated and free. */
         overage: string;
+        /** Overage BILL: past the included amount, charged on top of the plan. */
+        overageBilled: string;
+        /** Overage BLOCK only - ALLOW and BILL never "reach" a limit, they keep going. */
         limitReached: string;
+        /** Overage BILL whose billing cap was hit: charging stopped, access didn't - the opposite of limitReached, not a variant of overageBilled. */
+        capReached: string;
+        /** Shown under a BILL entitlement once something has actually been billed this period. */
+        billedAmount: string;
+        loading: string;
+        loadFailed: string;
+    };
+    /** `<PricingTable>` - the marketing surface. Distinct from `billing.*`, the settings-page plan switcher. */
+    pricing: {
+        getStarted: string;
+        /** "{amount} / {interval}" - the caption under a price shown at a different cadence than it's billed. */
+        billedAt: string;
+        /** "Save {percent}%" - the label-switch hint. */
+        save: string;
+        /** Prefixes a QUOTA entitlement with no ceiling, e.g. "Unlimited projects". */
+        unlimited: string;
+        /** "+{count} more" - shown when `maxFeatures` truncates a plan's entitlement list. */
+        moreFeatures: string;
         loading: string;
         loadFailed: string;
     };