@kerne/react 0.1.3 → 1.1.0

package/dist/ui/index.cjs

@@ -16,7 +16,8 @@
 
 
 
-var _chunk7U3QBMA7cjs = require('../chunk-7U3QBMA7.cjs');
+
+var _chunkTYNZ2WU7cjs = require('../chunk-TYNZ2WU7.cjs');
 
 // src/ui/AuthFlow.tsx
 var _react = require('react');
@@ -246,6 +247,7 @@ var CSS = `
 
 /* ---------- Stack ---------- */
 .kerne-stack { display: flex; flex-direction: column; gap: 16px; }
+.kerne-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .kerne-form { display: flex; flex-direction: column; gap: 12px; }
 .kerne-field { display: flex; flex-direction: column; gap: 6px; }
 .kerne-label { font-size: 14px; font-weight: 500; color: var(--kerne-fg); }
@@ -512,6 +514,126 @@ var CSS = `
 .kerne-meter-note { font-size: 12px; color: var(--kerne-fg-subtle); margin: 0; }
 @media (prefers-reduced-motion: reduce) { .kerne-meter-fill { transition: none; } }
 
+/* ---------- Pricing table ---------- */
+.kerne-pricing-skeleton { width: 100%; }
+
+.kerne-pricing-switch-wrap { display: flex; justify-content: center; }
+.kerne-pricing-switch {
+  position: relative;
+  display: inline-flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--kerne-panel);
+  border-radius: 999px;
+}
+.kerne-pricing-switch-thumb {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  border-radius: 999px;
+  background: var(--kerne-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.kerne-pricing-switch-option {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--kerne-fg-muted);
+  background: none;
+  border: none;
+  border-radius: 999px;
+  padding: 7px 16px;
+  cursor: pointer;
+  transition: color 0.18s ease;
+}
+.kerne-pricing-switch-option[aria-pressed="true"] { color: var(--kerne-fg); }
+.kerne-pricing-switch-option:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+.kerne-pricing-switch-save {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--kerne-success);
+  background: color-mix(in srgb, var(--kerne-success) 14%, transparent);
+  padding: 2px 6px;
+  border-radius: 999px;
+}
+
+.kerne-pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+  gap: 20px;
+  align-items: stretch;
+}
+
+.kerne-pricing-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+  padding: 28px 26px;
+  background: var(--kerne-surface);
+  border: 1px solid var(--kerne-border);
+  border-radius: calc(var(--kerne-radius) + 8px);
+}
+.kerne-pricing-card[data-featured="true"] {
+  background: var(--kerne-surface-raised);
+  border-color: var(--kerne-fg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 48px -28px rgba(0, 0, 0, 0.22);
+}
+.kerne-pricing-card[data-current="true"]:not([data-featured="true"]) { border-color: var(--kerne-border-strong); }
+
+/* A quiet inline pill, not a loud badge escaping the card border - that
+   shouted-uppercase-chip-on-the-edge look is the single most template-y
+   tell a pricing page can have. Reads as confirmation of what the card's
+   own elevation already signals, never as the primary signal itself. */
+.kerne-pricing-badge {
+  align-self: flex-start;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--kerne-fg);
+  background: var(--kerne-panel);
+  padding: 3px 9px;
+  border-radius: 999px;
+}
+
+.kerne-pricing-card-head { display: flex; flex-direction: column; gap: 8px; }
+.kerne-pricing-card-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
+.kerne-pricing-card-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kerne-fg-muted); }
+
+.kerne-pricing-price { display: flex; flex-direction: column; gap: 3px; min-height: 52px; justify-content: center; }
+.kerne-pricing-price-row { display: flex; align-items: baseline; gap: 5px; }
+.kerne-pricing-amount {
+  font-size: 38px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.kerne-pricing-interval { font-size: 14px; color: var(--kerne-fg-muted); }
+.kerne-pricing-billed { margin: 0; font-size: 12px; color: var(--kerne-fg-subtle); }
+
+.kerne-pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
+.kerne-pricing-feature { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--kerne-fg); }
+.kerne-pricing-feature svg { flex-shrink: 0; margin-top: 2px; color: var(--kerne-fg-subtle); }
+.kerne-pricing-feature-more { font-size: 12.5px; color: var(--kerne-fg-subtle); padding-left: 24px; }
+
+.kerne-pricing-cta { margin-top: auto; }
+.kerne-pricing-cta .kerne-button { width: 100%; }
+
+@media (prefers-reduced-motion: reduce) {
+  .kerne-pricing-switch-thumb { transition: none; }
+}
+
 /* ---------- Sections (profile, settings) ---------- */
 .kerne-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
 .kerne-section-title { font-size: 15px; font-weight: 600; margin: 0; }
@@ -781,7 +903,7 @@ function Field({
   const id = _react.useId.call(void 0, );
   const errorId = `${id}-error`;
   const noteId = `${id}-note`;
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const isPassword = type === "password";
   const [revealed, setRevealed] = _react.useState.call(void 0, false);
   const [capsLock, setCapsLock] = _react.useState.call(void 0, false);
@@ -909,11 +1031,11 @@ function PasswordStrength({
   password,
   policy
 }) {
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const resolved = _nullishCoalesce(policy, () => ( resolvePolicy(null)));
   if (!meetsPolicy(password, resolved)) {
     const labels2 = {
-      min_length: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.common.passwordHint, { count: resolved.min_length }),
+      min_length: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.common.passwordHint, { count: resolved.min_length }),
       require_uppercase: l10n.common.passwordRequireUppercase,
       require_number: l10n.common.passwordRequireNumber,
       require_symbol: l10n.common.passwordRequireSymbol
@@ -1109,10 +1231,10 @@ function OAuthButtons({
   disabled,
   onSelect
 }) {
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   if (providers.length === 0) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-oauth-group", children: providers.map((provider) => {
-    const label = _chunk7U3QBMA7cjs.fill.call(void 0, l10n.common.continueWith, {
+    const label = _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.common.continueWith, {
       provider: _nullishCoalesce(OAUTH_LABELS[provider], () => ( provider))
     });
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -1133,12 +1255,12 @@ function OAuthButtons({
   }) });
 }
 function KerneBranding({ show }) {
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   if (!show) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "kerne-branding", href: "https://kerne.io", target: "_blank", rel: "noopener noreferrer", children: l10n.common.securedByKerne });
 }
 function FormSkeleton() {
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-form", "aria-busy": "true", "aria-label": l10n.common.loading, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" })
@@ -1163,11 +1285,11 @@ function LoginForm({
   logo,
   className
 }) {
-  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
-  const { login, startPasswordless } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const client = _chunkTYNZ2WU7cjs.useClient.call(void 0, );
+  const { login, startPasswordless } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1231,7 +1353,7 @@ function LoginForm({
   const signUpLine = canSignUp && (signUpUrl || onSignUpClick) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signIn.signUpPrompt,
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
     "."
   ] }) : void 0;
   const submitLabel = submitting ? usePassword ? l10n.signIn.submitting : l10n.signIn.magicSubmitting : usePassword ? l10n.signIn.submit : l10n.signIn.magicSubmit;
@@ -1240,7 +1362,7 @@ function LoginForm({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( signUpLine)) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkTYNZ2WU7cjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1316,13 +1438,13 @@ function RegisterForm({
   logo,
   className
 }) {
-  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
-  const { register, startPasswordless } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const client = _chunkTYNZ2WU7cjs.useClient.call(void 0, );
+  const { register, startPasswordless } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const invitationToken = useUrlToken("token", invitationTokenProp) || void 0;
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
@@ -1333,7 +1455,7 @@ function RegisterForm({
   const [passwordMode, setPasswordMode] = _react.useState.call(void 0, false);
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children });
   const appName = _optionalChain([config, 'optionalAccess', _13 => _13.app_name]);
-  const heading = _nullishCoalesce(title, () => ( (appName ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
+  const heading = _nullishCoalesce(title, () => ( (appName ? _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
   const signInLine = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signUp.signInPrompt,
     " ",
@@ -1360,7 +1482,7 @@ function RegisterForm({
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: l10n.signUp.closedTitle, subtitle: signInLine }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: config.show_kerne_branding })
       ] })
     );
@@ -1422,7 +1544,7 @@ function RegisterForm({
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkTYNZ2WU7cjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           needsCode ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1527,10 +1649,10 @@ function ForgotPasswordForm({
   logo,
   className
 }) {
-  const { requestPasswordReset } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const { requestPasswordReset } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -1566,7 +1688,7 @@ function ForgotPasswordForm({
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
       error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunkTYNZ2WU7cjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Field,
           {
@@ -1603,12 +1725,12 @@ function ResetPasswordForm({
   logo,
   className
 }) {
-  const { confirmPasswordReset } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const { confirmPasswordReset } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [confirm, setConfirm] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1723,12 +1845,12 @@ function MagicLinkCallback({
   logo,
   className
 }) {
-  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
-  const { loginWithMagicLink } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const client = _chunkTYNZ2WU7cjs.useClient.call(void 0, );
+  const { loginWithMagicLink } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "pending");
   const [message, setMessage] = _react.useState.call(void 0, null);
   const consumed = _react.useRef.call(void 0, false);
@@ -1782,11 +1904,11 @@ function VerifyEmailForm({
   logo,
   className
 }) {
-  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [code, setCode] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -1908,13 +2030,13 @@ function ActivateAccountForm({
   logo,
   className
 }) {
-  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
-  const { getActivationContext, completeActivation } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const client = _chunkTYNZ2WU7cjs.useClient.call(void 0, );
+  const { getActivationContext, completeActivation } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [context, setContext] = _react.useState.call(void 0, null);
   const [loadError, setLoadError] = _react.useState.call(void 0, null);
   const [password, setPassword] = _react.useState.call(void 0, "");
@@ -1984,7 +2106,7 @@ function ActivateAccountForm({
       {
         logo,
         title: heading,
-        subtitle: _chunk7U3QBMA7cjs.fillNode.call(void 0, 
+        subtitle: _chunkTYNZ2WU7cjs.fillNode.call(void 0, 
           credentialsMode ? l10n.activate.credentialsSubtitle : l10n.activate.magicSubtitle,
           { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: context.email }) }
         )
@@ -2056,7 +2178,7 @@ function AuthFlow({
   logo,
   className
 }) {
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token");
   const [internalStep, setInternalStep] = _react.useState.call(void 0, null);
   const go = (next) => {
@@ -2143,11 +2265,11 @@ function ChangePasswordForm({
   appearance,
   className
 }) {
-  const { updatePassword } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const { updatePassword } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
   const policy = resolvePolicy(config);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.security.submit));
   const [currentPassword, setCurrentPassword] = _react.useState.call(void 0, "");
   const [newPassword, setNewPassword] = _react.useState.call(void 0, "");
@@ -2253,10 +2375,10 @@ function WaitlistForm({
   logo,
   className
 }) {
-  const { join } = _chunk7U3QBMA7cjs.useWaitlist.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const { join } = _chunkTYNZ2WU7cjs.useWaitlist.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -2337,8 +2459,8 @@ function SignOutButton({
   appearance
 }) {
   ensureStylesInjected();
-  const { logout } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const { logout } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const handle = () => {
     logout();
     _optionalChain([onSignedOut, 'optionalCall', _36 => _36()]);
@@ -2372,9 +2494,9 @@ function UserButton({
   className
 }) {
   ensureStylesInjected();
-  const { logout, isAuthenticated } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunk7U3QBMA7cjs.useUser.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const { logout, isAuthenticated } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunkTYNZ2WU7cjs.useUser.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const wrapRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
@@ -2465,10 +2587,10 @@ function UserButton({
 
 
 function ProfileSection({ verificationCallbackUrl, onSaved }) {
-  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunk7U3QBMA7cjs.useUser.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunkTYNZ2WU7cjs.useUser.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [firstName, setFirstName] = _react.useState.call(void 0, "");
   const [lastName, setLastName] = _react.useState.call(void 0, "");
   const [saving, setSaving] = _react.useState.call(void 0, false);
@@ -2579,10 +2701,10 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
 
 
 function SecuritySection({ showDeleteAccount = true, onDeleted }) {
-  const { requestAccountDeletion } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const { requestAccountDeletion } = _chunkTYNZ2WU7cjs.useAuth.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const [error, setError] = _react.useState.call(void 0, null);
   const [confirmingDelete, setConfirmingDelete] = _react.useState.call(void 0, false);
   const [deleting, setDeleting] = _react.useState.call(void 0, false);
@@ -2677,15 +2799,83 @@ function formatInterval(interval, labels) {
       return interval;
   }
 }
+var ENCODED_INTERVAL_UNIT = { D: 12 / 365, M: 1, Y: 12 };
+function approxMonths(value) {
+  const match = ENCODED_INTERVAL.exec(value);
+  if (!match) return 0;
+  return parseInt(match[1], 10) * ENCODED_INTERVAL_UNIT[match[2]];
+}
+function resolvePriceDisplay(price, displayInterval) {
+  if (!displayInterval || displayInterval === price.interval) {
+    return {
+      billedAmount: price.amount,
+      billedInterval: price.interval,
+      displayAmount: price.amount,
+      displayInterval: price.interval
+    };
+  }
+  const ratio = approxMonths(displayInterval) / approxMonths(price.interval);
+  return {
+    billedAmount: price.amount,
+    billedInterval: price.interval,
+    displayAmount: Math.round(price.amount * ratio),
+    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(_nullishCoalesce(_optionalChain([priceFor, 'call', _51 => _51(a.slug), 'optionalAccess', _52 => _52.interval]), () => ( "1M"))) - approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _53 => _53(b.slug), 'optionalAccess', _54 => _54.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 (!_optionalChain([shortPrice, 'optionalAccess', _55 => _55.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
 
-function levelFor(ratio, overageAllowed) {
-  if (overageAllowed) return ratio >= 1 ? "warning" : "normal";
+function isSoftOverage(overage) {
+  return overage === "ALLOW" || overage === "BILL";
+}
+function levelFor(ratio, softOverage) {
+  if (softOverage) return ratio >= 1 ? "warning" : "normal";
   if (ratio >= 0.9) return "critical";
   if (ratio >= 0.75) return "warning";
   return "normal";
 }
+function quotaRatio(used, limit) {
+  if (limit <= 0) return used > 0 ? 1 : 0;
+  return Math.min(used / limit, 1);
+}
 function UsageMeters({
   title,
   featureKeys,
@@ -2696,13 +2886,13 @@ function UsageMeters({
   appearance,
   className
 }) {
-  const { entitlements, isLoading, error } = _chunk7U3QBMA7cjs.useEntitlements.call(void 0, );
-  const { subscription } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const { entitlements, isLoading, error } = _chunkTYNZ2WU7cjs.useEntitlements.call(void 0, );
+  const { subscription } = _chunkTYNZ2WU7cjs.useSubscription.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.usage.title));
   const nameFor = (key) => {
-    if (_optionalChain([labels, 'optionalAccess', _51 => _51[key]])) return labels[key];
-    const fromPlan = _optionalChain([subscription, 'optionalAccess', _52 => _52.entitlements, 'access', _53 => _53.find, 'call', _54 => _54((e) => e.feature_key === key), 'optionalAccess', _55 => _55.feature_name]);
+    if (_optionalChain([labels, 'optionalAccess', _56 => _56[key]])) return labels[key];
+    const fromPlan = _optionalChain([subscription, 'optionalAccess', _57 => _57.entitlements, 'access', _58 => _58.find, 'call', _59 => _59((e) => e.feature_key === key), 'optionalAccess', _60 => _60.feature_name]);
     return _nullishCoalesce(fromPlan, () => ( humanizeFeatureKey(key)));
   };
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
@@ -2739,14 +2929,17 @@ function UsageMeters({
   return shell(
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meters", children: rows.map((e) => {
       const unlimited = e.limit === null || e.limit === void 0;
-      const overageAllowed = e.overage_behavior === "ALLOW";
-      const ratio = unlimited ? 0 : Math.min(e.used / e.limit, 1);
-      const level = unlimited ? "normal" : levelFor(e.used / e.limit, overageAllowed);
+      const softOverage = isSoftOverage(e.overage_behavior);
+      const billed = e.overage_behavior === "BILL";
+      const ratio = unlimited ? 0 : quotaRatio(e.used, e.limit);
+      const level = unlimited ? "normal" : levelFor(ratio, softOverage);
       const over = !unlimited && e.used > e.limit;
+      const standing = billed ? _optionalChain([subscription, 'optionalAccess', _61 => _61.entitlements, 'access', _62 => _62.find, 'call', _63 => _63((se) => se.feature_key === e.feature_key)]) : void 0;
+      const capReached = billed && (_nullishCoalesce(_optionalChain([standing, 'optionalAccess', _64 => _64.cap_reached]), () => ( false)));
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter", "data-level": level, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter-head", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-name", children: nameFor(e.feature_key) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
         ] }),
         !unlimited ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
@@ -2760,9 +2953,18 @@ function UsageMeters({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meter-fill", style: { width: `${ratio * 100}%` } })
           }
         ) : null,
-        over && overageAllowed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.usage.overage, {
-          count: formatNumber(e.used - e.limit)
-        }) }) : over ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
+        over && softOverage ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunkTYNZ2WU7cjs.fill.call(void 0, 
+            // capReached inverts overageBilled's meaning (billing stopped,
+            // access didn't) - a variant string would say the opposite of
+            // the truth for the one plan that just stopped costing money.
+            capReached ? l10n.usage.capReached : billed ? l10n.usage.overageBilled : l10n.usage.overage,
+            { count: formatNumber(e.used - e.limit) }
+          ) }),
+          billed && _optionalChain([standing, 'optionalAccess', _65 => _65.billed_amount]) != null && standing.currency ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note kerne-meter-cost", children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.usage.billedAmount, {
+            amount: formatMoney(standing.billed_amount, standing.currency)
+          }) }) : null
+        ] }) : over ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
       ] }, e.feature_key);
     }) })
   );
@@ -2786,13 +2988,15 @@ function SubscriptionCard({
   upgradeUrl,
   onUpgradeClick,
   hidePortalButton = false,
+  hideCancelButton = false,
   appearance,
   className
 }) {
-  const { subscription, isLoading, error } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, productSlug);
-  const { openPortal } = _chunk7U3QBMA7cjs.usePortal.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
+  const { subscription, isLoading, error, refetch } = _chunkTYNZ2WU7cjs.useSubscription.call(void 0, productSlug);
+  const { openPortal } = _chunkTYNZ2WU7cjs.usePortal.call(void 0, );
+  const { cancelSubscription, isCanceling } = _chunkTYNZ2WU7cjs.useCancelSubscription.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.billing.plan));
   const statusLabels = {
     ACTIVE: l10n.billing.statusActive,
@@ -2804,6 +3008,8 @@ function SubscriptionCard({
   };
   const [opening, setOpening] = _react.useState.call(void 0, false);
   const [portalError, setPortalError] = _react.useState.call(void 0, null);
+  const [confirmingCancel, setConfirmingCancel] = _react.useState.call(void 0, false);
+  const [cancelError, setCancelError] = _react.useState.call(void 0, null);
   const handlePortal = async () => {
     setPortalError(null);
     setOpening(true);
@@ -2814,6 +3020,17 @@ function SubscriptionCard({
       setOpening(false);
     }
   };
+  const handleCancel = async () => {
+    if (!subscription) return;
+    setCancelError(null);
+    try {
+      await cancelSubscription(subscription.id, false);
+      setConfirmingCancel(false);
+      refetch();
+    } catch (e) {
+      setCancelError(showError(e));
+    }
+  };
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
     heading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", children: heading }) : null,
     children
@@ -2879,7 +3096,27 @@ function SubscriptionCard({
         ] }) : null
       ] }),
       canceled_at ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: l10n.billing.cancelNotice }) : null,
-      !hidePortalButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handlePortal, loading: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null
+      cancelError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: cancelError }) : null,
+      confirmingCancel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: l10n.billing.cancelConfirmTitle }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.cancelConfirmBody }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            Button,
+            {
+              variant: "outline",
+              type: "button",
+              onClick: () => setConfirmingCancel(false),
+              disabled: isCanceling,
+              children: l10n.billing.cancelConfirmDismiss
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: handleCancel, loading: isCanceling, children: isCanceling ? l10n.billing.canceling : l10n.billing.cancelConfirmButton })
+        ] })
+      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        !hidePortalButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handlePortal, loading: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null,
+        !hideCancelButton && !canceled_at && status !== "CANCELED" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: () => setConfirmingCancel(true), children: l10n.billing.cancelSubscription }) : null
+      ] })
     ] })
   );
 }
@@ -2906,31 +3143,37 @@ function BillingSection({
   usageFeatureKeys,
   usageLabels
 }) {
-  const { subscription } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, productSlug);
-  const { plans, isLoading: plansLoading } = _chunk7U3QBMA7cjs.usePlans.call(void 0, pricingProductIdOrSlug);
-  const { openCheckout } = _chunk7U3QBMA7cjs.useCheckout.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
-  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
-  const [busy, setBusy] = _react.useState.call(void 0, null);
-  const [error, setError] = _react.useState.call(void 0, null);
+  const { subscription, refetch: refetchSubscription } = _chunkTYNZ2WU7cjs.useSubscription.call(void 0, productSlug);
+  const { plans, isLoading: plansLoading } = _chunkTYNZ2WU7cjs.usePlans.call(void 0, pricingProductIdOrSlug);
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
+  const {
+    pending: pendingPlan,
+    switching,
+    switchError,
+    checkoutPriceId: busy,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = _chunkTYNZ2WU7cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const error = _nullishCoalesce(checkoutError, () => ( switchError));
   const intervals = _react.useMemo.call(void 0, () => intervalsOf(plans), [plans]);
   const [interval, setInterval] = _react.useState.call(void 0, null);
-  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _56 => _56.plan_price, 'access', _57 => _57.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);
-    }
-  };
+  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _66 => _66.plan_price, 'access', _67 => _67.interval]))), () => ( intervals[0])), () => ( null));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
+    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(error) }) : null,
+    pendingPlan ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingPlan.plan.name }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: dismissSwitch, disabled: switching, children: l10n.billing.switchConfirmDismiss }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       SubscriptionCard,
       {
@@ -2969,7 +3212,7 @@ function BillingSection({
       ) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-plan-list", children: plans.map((plan) => {
         const price = _nullishCoalesce(plan.prices.find((p) => p.interval === activeInterval), () => ( plan.prices[0]));
-        const isCurrent = _optionalChain([subscription, 'optionalAccess', _58 => _58.plan, 'access', _59 => _59.slug]) === plan.slug;
+        const isCurrent = _optionalChain([subscription, 'optionalAccess', _68 => _68.plan, 'access', _69 => _69.slug]) === plan.slug;
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
@@ -2988,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
@@ -3027,7 +3270,7 @@ function UserProfile({
   appearance,
   className
 }) {
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const builtins = {
     profile: {
       label: l10n.profile.tabProfile,
@@ -3054,15 +3297,15 @@ function UserProfile({
       description: t.description
     }))
   ];
-  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _60 => _60[0], 'optionalAccess', _61 => _61.id]))), () => ( "profile")));
+  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _70 => _70[0], 'optionalAccess', _71 => _71.id]))), () => ( "profile")));
   const current = _nullishCoalesce(controlledTab, () => ( internalTab));
   const select = (id) => {
     if (controlledTab === void 0) setInternalTab(id);
-    _optionalChain([onTabChange, 'optionalCall', _62 => _62(id)]);
+    _optionalChain([onTabChange, 'optionalCall', _72 => _72(id)]);
   };
   const active = _nullishCoalesce(allTabs.find((t) => t.id === current), () => ( allTabs[0]));
   const renderPane = () => {
-    switch (_optionalChain([active, 'optionalAccess', _63 => _63.id])) {
+    switch (_optionalChain([active, 'optionalAccess', _73 => _73.id])) {
       case "profile":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProfileSection, { verificationCallbackUrl, onSaved });
       case "security":
@@ -3083,7 +3326,7 @@ function UserProfile({
           }
         );
       default:
-        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _64 => _64.find, 'call', _65 => _65((t) => t.id === _optionalChain([active, 'optionalAccess', _66 => _66.id])), 'optionalAccess', _67 => _67.content]), () => ( null));
+        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _74 => _74.find, 'call', _75 => _75((t) => t.id === _optionalChain([active, 'optionalAccess', _76 => _76.id])), 'optionalAccess', _77 => _77.content]), () => ( null));
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-profile", children: [
@@ -3092,7 +3335,7 @@ function UserProfile({
       {
         type: "button",
         className: "kerne-nav-item",
-        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _68 => _68.id]) ? "page" : void 0,
+        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _78 => _78.id]) ? "page" : void 0,
         onClick: () => select(tab.id),
         children: tab.label
       },
@@ -3108,6 +3351,288 @@ function UserProfile({
   ] }) });
 }
 
+// src/ui/PricingTable.tsx
+
+
+function formatEntitlement(e, unlimitedLabel) {
+  if (e.feature_type === "BOOLEAN") return e.feature_name;
+  if (e.feature_type === "STATIC")
+    return e.value ? `${e.feature_name}: ${e.value}` : e.feature_name;
+  if (e.limit === null) return e.feature_name;
+  if (e.limit === -1) return `${unlimitedLabel} ${e.feature_name.toLowerCase()}`;
+  return `${formatNumber(e.limit)} ${e.feature_name.toLowerCase()}`;
+}
+var PricingTableContext = _react.createContext.call(void 0, null);
+function usePricingTable() {
+  const ctx = _react.useContext.call(void 0, PricingTableContext);
+  if (!ctx) {
+    throw new Error("usePricingTable() must be called inside <PricingTable>.");
+  }
+  return ctx;
+}
+function PricingTable({
+  product,
+  defaultLabel,
+  checkoutSuccessUrl,
+  checkoutCancelUrl,
+  onSelectPlan,
+  appearance,
+  className,
+  children
+}) {
+  const { plans, isLoading, error } = _chunkTYNZ2WU7cjs.usePlans.call(void 0, product);
+  const { subscription, refetch: refetchSubscription } = _chunkTYNZ2WU7cjs.useSubscription.call(void 0, product);
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const showError = _chunkTYNZ2WU7cjs.useErrorResolver.call(void 0, );
+  const [selectedLabelSlug, setSelectedLabelSlug] = _react.useState.call(void 0, _nullishCoalesce(defaultLabel, () => ( null)));
+  const {
+    pending: pendingSwitch,
+    switching,
+    switchError,
+    checkoutPriceId: busyPriceId,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  } = _chunkTYNZ2WU7cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
+    successUrl: checkoutSuccessUrl,
+    cancelUrl: checkoutCancelUrl
+  });
+  const labels = _react.useMemo.call(void 0, () => collectPriceLabels(plans), [plans]);
+  const savings = _react.useMemo.call(void 0, () => resolveLabelSavings(plans, labels), [plans, labels]);
+  _react.useEffect.call(void 0, () => {
+    if (labels.length === 0) return;
+    if (selectedLabelSlug && labels.some((l) => l.slug === selectedLabelSlug)) return;
+    setSelectedLabelSlug(labels[0].slug);
+  }, [labels]);
+  const handleSelectPlan = (plan) => {
+    const price = _nullishCoalesce(plan.prices.find((p) => p.label.slug === selectedLabelSlug), () => ( plan.prices[0]));
+    if (!price) return;
+    if (onSelectPlan) {
+      onSelectPlan(plan, price);
+      return;
+    }
+    void selectPlan(plan, price);
+  };
+  const ctx = {
+    plans,
+    labels,
+    selectedLabelSlug,
+    setSelectedLabelSlug,
+    savings,
+    currentPlanId: _nullishCoalesce(_optionalChain([subscription, 'optionalAccess', _79 => _79.plan, 'optionalAccess', _80 => _80.id]), () => ( null)),
+    busyPriceId,
+    onSelectPlan: handleSelectPlan
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-skeleton", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 320 } }) }) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PricingTableContext.Provider, { value: ctx, children: [
+    checkoutError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(checkoutError) }) : null,
+    pendingSwitch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingSwitch.plan.name }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
+      switchError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(switchError) }) : null,
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            variant: "outline",
+            type: "button",
+            onClick: dismissSwitch,
+            disabled: switching,
+            children: l10n.billing.switchConfirmDismiss
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+      ] })
+    ] }) : null,
+    children
+  ] }) });
+}
+function LabelSwitch() {
+  const { labels, selectedLabelSlug, setSelectedLabelSlug, savings } = usePricingTable();
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const containerRef = _react.useRef.call(void 0, null);
+  const buttonRefs = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const [thumb, setThumb] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const measure = () => {
+      const container = containerRef.current;
+      const button = selectedLabelSlug ? buttonRefs.current.get(selectedLabelSlug) : null;
+      if (!container || !button) return;
+      const containerBox = container.getBoundingClientRect();
+      const buttonBox = button.getBoundingClientRect();
+      setThumb({ left: buttonBox.left - containerBox.left, width: buttonBox.width });
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [selectedLabelSlug, labels]);
+  if (labels.length < 2) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-switch-wrap", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      ref: containerRef,
+      className: "kerne-pricing-switch",
+      role: "group",
+      "aria-label": l10n.billing.intervalGroupLabel,
+      children: [
+        thumb ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            className: "kerne-pricing-switch-thumb",
+            style: { transform: `translateX(${thumb.left}px)`, width: `${thumb.width}px` },
+            "aria-hidden": "true"
+          }
+        ) : null,
+        labels.map((label) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            ref: (el) => {
+              if (el) buttonRefs.current.set(label.slug, el);
+              else buttonRefs.current.delete(label.slug);
+            },
+            type: "button",
+            className: "kerne-pricing-switch-option",
+            "aria-pressed": label.slug === selectedLabelSlug,
+            onClick: () => setSelectedLabelSlug(label.slug),
+            children: [
+              label.name,
+              savings && savings.labelSlug === label.slug ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-switch-save", children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.pricing.save, { percent: savings.percent }) }) : null
+            ]
+          },
+          label.slug
+        ))
+      ]
+    }
+  ) });
+}
+function useAnimatedAmount(target, durationMs = 420) {
+  const [displayed, setDisplayed] = _react.useState.call(void 0, target);
+  const displayedRef = _react.useRef.call(void 0, target);
+  const frameRef = _react.useRef.call(void 0, );
+  _react.useEffect.call(void 0, () => {
+    if (displayedRef.current === target) return;
+    const reduceMotion = typeof window !== "undefined" && _optionalChain([window, 'access', _81 => _81.matchMedia, 'optionalCall', _82 => _82("(prefers-reduced-motion: reduce)"), 'access', _83 => _83.matches]);
+    if (reduceMotion) {
+      displayedRef.current = target;
+      setDisplayed(target);
+      return;
+    }
+    const from = displayedRef.current;
+    const start = performance.now();
+    const tick = (now) => {
+      const t = Math.min((now - start) / durationMs, 1);
+      const eased = 1 - Math.pow(1 - t, 3);
+      const value = Math.round(from + (target - from) * eased);
+      displayedRef.current = value;
+      setDisplayed(value);
+      if (t < 1) frameRef.current = requestAnimationFrame(tick);
+    };
+    frameRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
+  }, [target, durationMs]);
+  return displayed;
+}
+function Plan({ slug, featured, badge, maxFeatures }) {
+  const { plans, selectedLabelSlug, currentPlanId, busyPriceId, onSelectPlan } = usePricingTable();
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
+  const plan = plans.find((p) => p.slug === slug);
+  _react.useEffect.call(void 0, () => {
+    if (!plan && process.env.NODE_ENV === "development") {
+      console.warn(
+        `[Kerne] <PricingTable.Plan slug="${slug}"> - no plan with this slug on the loaded product.`
+      );
+    }
+  }, [plan, slug]);
+  const price = _nullishCoalesce(_optionalChain([plan, 'optionalAccess', _84 => _84.prices, 'access', _85 => _85.find, 'call', _86 => _86((p) => p.label.slug === selectedLabelSlug)]), () => ( _optionalChain([plan, 'optionalAccess', _87 => _87.prices, 'access', _88 => _88[0]])));
+  const resolved = price ? resolvePriceDisplay(price, price.label.display_interval) : null;
+  const animatedAmount = useAnimatedAmount(_nullishCoalesce(_optionalChain([resolved, 'optionalAccess', _89 => _89.displayAmount]), () => ( 0)));
+  if (!plan) return null;
+  const isCurrent = plan.id === currentPlanId;
+  const isBusy = !!price && busyPriceId === price.id;
+  const shownEntitlements = maxFeatures ? plan.entitlements.slice(0, maxFeatures) : plan.entitlements;
+  const remaining = plan.entitlements.length - shownEntitlements.length;
+  const billedCaption = resolved && resolved.displayInterval !== resolved.billedInterval ? _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.pricing.billedAt, {
+    amount: formatMoney(resolved.billedAmount, price.currency),
+    interval: formatInterval(resolved.billedInterval, l10n.billing)
+  }) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: "kerne-pricing-card",
+      "data-featured": featured ? "true" : void 0,
+      "data-current": isCurrent ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-card-head", children: [
+          badge ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-badge", children: badge }) : null,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-card-name", children: plan.name }),
+          plan.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-card-desc", children: plan.description }) : null
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-price", children: resolved ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-price-row", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-amount", children: formatMoney(animatedAmount, price.currency) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-interval", children: [
+              "/ ",
+              formatInterval(resolved.displayInterval, l10n.billing)
+            ] })
+          ] }),
+          billedCaption ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: billedCaption }) : null
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: l10n.billing.notOnInterval }) }),
+        shownEntitlements.length > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { className: "kerne-pricing-features", children: [
+          shownEntitlements.map((e) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "kerne-pricing-feature", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon2, {}),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: formatEntitlement(e, l10n.pricing.unlimited) })
+          ] }, e.feature_key)),
+          remaining > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-more", children: _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.pricing.moreFeatures, { count: remaining }) }) : null
+        ] }) : null,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-cta", children: isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", disabled: true, children: l10n.billing.current }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            variant: featured ? "primary" : "outline",
+            type: "button",
+            disabled: !price || busyPriceId !== null && !isBusy,
+            loading: isBusy,
+            onClick: () => onSelectPlan(plan),
+            children: currentPlanId ? l10n.billing.switchTo : l10n.pricing.getStarted
+          }
+        ) })
+      ]
+    }
+  );
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m5 13 4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function Plans({ featuredSlug, featuredBadge, maxFeatures }) {
+  const { plans } = usePricingTable();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-grid", children: plans.map((plan) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Plan,
+    {
+      slug: plan.slug,
+      featured: plan.slug === featuredSlug,
+      badge: plan.slug === featuredSlug ? featuredBadge : void 0,
+      maxFeatures
+    },
+    plan.id
+  )) });
+}
+PricingTable.LabelSwitch = LabelSwitch;
+PricingTable.Plan = Plan;
+PricingTable.Plans = Plans;
+
 // src/ui/CheckoutResult.tsx
 
 
@@ -3125,9 +3650,9 @@ function CheckoutResult({
   logo,
   className
 }) {
-  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
-  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const client = _chunkTYNZ2WU7cjs.useClient.call(void 0, );
+  const { config } = _chunkTYNZ2WU7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "checking");
   const confirmed = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
@@ -3141,7 +3666,7 @@ function CheckoutResult({
         if (sub && !stopped) {
           confirmed.current = true;
           setState("confirmed");
-          _optionalChain([onConfirmed, 'optionalCall', _69 => _69(sub)]);
+          _optionalChain([onConfirmed, 'optionalCall', _90 => _90(sub)]);
           return;
         }
       } catch (e3) {
@@ -3165,7 +3690,7 @@ function CheckoutResult({
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
     logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
     children,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _70 => _70.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _91 => _91.show_kerne_branding]), () => ( false)) })
   ] });
   if (outcome === "cancel") {
     return shell(
@@ -3211,20 +3736,23 @@ function UpgradePrompt({
   appearance,
   className
 }) {
-  const { details, allowed, isLoading } = _chunk7U3QBMA7cjs.useAccess.call(void 0, featureKey, requested);
-  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const { details, allowed, isLoading } = _chunkTYNZ2WU7cjs.useAccess.call(void 0, featureKey, requested);
+  const l10n = _chunkTYNZ2WU7cjs.useLocalization.call(void 0, );
   if (isLoading) {
     if (hideWhileLoading) return null;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 80 }, "aria-label": l10n.upgrade.checking }) });
   }
   if (allowed) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   const name = _nullishCoalesce(featureName, () => ( humanizeFeatureKey(featureKey).toLowerCase()));
-  const quotaExhausted = _optionalChain([details, 'optionalAccess', _71 => _71.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
-  const heading = _nullishCoalesce(title, () => ( _chunk7U3QBMA7cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
-  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
+  const quotaExhausted = _optionalChain([details, 'optionalAccess', _92 => _92.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
+  const heading = _nullishCoalesce(title, () => ( _chunkTYNZ2WU7cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
+  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
     used: formatNumber(details.used),
-    limit: formatNumber(details.limit)
-  }) : _chunk7U3QBMA7cjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
+    // `access_limit` is where access actually stops; `limit` is only the
+    // included allocation and can understate it past an overage ceiling.
+    // Falls back to `limit` defensively - should never be needed here.
+    limit: formatNumber(_nullishCoalesce(details.access_limit, () => ( details.limit)))
+  }) : _chunkTYNZ2WU7cjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-status", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-heading", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", style: { fontSize: 17 }, children: heading }),
@@ -3265,4 +3793,14 @@ function UpgradePrompt({
 
 
 
-exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.defaultLocalization = _chunk7U3QBMA7cjs.defaultLocalization; exports.useLocalization = _chunk7U3QBMA7cjs.useLocalization;
+
+
+
+
+
+
+
+
+
+
+exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.PricingTable = PricingTable; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.collectPriceLabels = collectPriceLabels; exports.defaultLocalization = _chunkTYNZ2WU7cjs.defaultLocalization; exports.formatDate = formatDate; exports.formatInterval = formatInterval; exports.formatMoney = formatMoney; exports.formatNumber = formatNumber; exports.humanizeFeatureKey = humanizeFeatureKey; exports.resolveLabelSavings = resolveLabelSavings; exports.resolvePriceDisplay = resolvePriceDisplay; exports.useLocalization = _chunkTYNZ2WU7cjs.useLocalization; exports.usePricingTable = usePricingTable;