@kerne/react 0.1.2 → 1.0.0

package/dist/ui/index.js

@@ -6,6 +6,7 @@ import {
   useAccess,
   useAuth,
   useAuthConfig,
+  useCancelSubscription,
   useCheckout,
   useClient,
   useEntitlements,
@@ -16,10 +17,10 @@ import {
   useSubscription,
   useUser,
   useWaitlist
-} from "../chunk-AIUIBAYB.js";
+} from "../chunk-NFJ2S5VJ.js";
 
 // src/ui/AuthFlow.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 
 // src/ui/useUrlToken.ts
 import { useState, useEffect } from "react";
@@ -37,10 +38,10 @@ function useUrlToken(param = "token", override) {
 }
 
 // src/ui/LoginForm.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/ui/primitives.tsx
-import { useId, useContext, createContext } from "react";
+import { useId, useState as useState2, useContext, createContext } from "react";
 
 // src/ui/styles.ts
 var STYLE_ELEMENT_ID = "kerne-ui-styles";
@@ -53,6 +54,7 @@ var DARK_TOKENS = `
   --kerne-panel: #1b1f26;
   --kerne-surface: #14171c;
   --kerne-surface-raised: #2a2f38;
+  --kerne-track: #313743;
   --kerne-primary: #f0f1f3;
   --kerne-primary-fg: #16181d;
   --kerne-primary-hover: #d8dade;
@@ -81,6 +83,11 @@ var CSS = `
      variant, the dropdown floating over host content, a pressed segment. */
   --kerne-surface: #ffffff;
   --kerne-surface-raised: #ffffff;
+  /* Unfilled part of a meter, and the ground of a disabled button. Distinct
+     from --kerne-panel, which is tuned to sit on the page: on a card the two
+     are nearly the same colour, so a meter drawn in panel had invisible empty
+     segments and read as having fewer steps than it has. */
+  --kerne-track: #e3e5e9;
   --kerne-primary: #16171a;
   --kerne-primary-fg: #ffffff;
   --kerne-primary-hover: #2c2e33;
@@ -226,13 +233,29 @@ var CSS = `
 }
 .kerne-subtitle { margin: 0; font-size: 14px; color: var(--kerne-fg-muted); line-height: 1.5; }
 
+/* Moving between steps (sign-in -> sign-up -> forgot password) used to be an
+   instant swap: the content and the height both jumped at once, which reads
+   as a page reload rather than one flow. */
+@keyframes kerne-step-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+.kerne-step { animation: kerne-step-in .18s ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-step { animation: none; }
+}
+
 /* ---------- 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); }
 .kerne-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
 
+/* Positioning context for the reveal toggle, which sits inside the input box. */
+.kerne-control { position: relative; display: flex; }
+
 .kerne-input {
   font: inherit;
   font-size: 14px;
@@ -245,6 +268,57 @@ var CSS = `
   width: 100%;
   transition: border-color .12s ease, box-shadow .12s ease;
 }
+/* Room for the toggle, so a long password never runs underneath it. */
+.kerne-input[data-kerne-reveal="true"] { padding-right: 42px; }
+
+.kerne-reveal {
+  position: absolute;
+  top: 0; right: 0; bottom: 0;
+  width: 40px;
+  display: flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 0; cursor: pointer;
+  color: var(--kerne-fg-subtle);
+  border-radius: var(--kerne-radius);
+  transition: color .12s ease;
+}
+.kerne-reveal:hover:not(:disabled) { color: var(--kerne-fg); }
+.kerne-reveal:disabled { cursor: not-allowed; opacity: .5; }
+.kerne-reveal:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: -2px; }
+
+.kerne-field-note { font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted); margin: 0; }
+.kerne-field-error { font-size: 12.5px; line-height: 1.4; color: var(--kerne-danger); margin: 0; }
+/* Caps Lock is a "you are about to get this wrong" signal, not background
+   guidance - in muted grey it sat at the same weight as a hint and got read
+   as one. */
+.kerne-field-note[data-kerne-warn="true"] { color: var(--kerne-warning); }
+
+/* ---------- Password rules ---------- */
+/* Unmet stays at hint weight rather than turning red: nothing is wrong yet,
+   the user is still typing. Only the tick earns a color. */
+.kerne-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.kerne-rule {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted);
+}
+.kerne-rule[data-met] { color: var(--kerne-success); }
+
+/* ---------- Password strength ---------- */
+.kerne-strength { display: flex; flex-direction: column; gap: 5px; }
+.kerne-strength-track { display: flex; gap: 4px; }
+.kerne-strength-step {
+  flex: 1; height: 3px; border-radius: 999px;
+  background: var(--kerne-track);
+  transition: background-color .18s ease;
+}
+.kerne-strength-label { font-size: 12px; color: var(--kerne-fg-muted); }
+.kerne-strength[data-score="0"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="1"] .kerne-strength-step[data-on] { background: var(--kerne-danger); }
+.kerne-strength[data-score="2"] .kerne-strength-step[data-on] { background: var(--kerne-warning); }
+.kerne-strength[data-score="3"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="4"] .kerne-strength-step[data-on] { background: var(--kerne-success); }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-strength-step { transition: none; }
+}
 .kerne-input::placeholder { color: var(--kerne-fg-subtle); }
 .kerne-input:hover:not(:disabled):not(:focus) { border-color: var(--kerne-fg-subtle); }
 .kerne-input:focus {
@@ -279,6 +353,20 @@ var CSS = `
 }
 .kerne-button:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
 .kerne-button:disabled { opacity: .5; cursor: not-allowed; }
+/* A disabled primary drops the brand entirely rather than wearing it at half
+   opacity: on a dark theme the light primary faded into an opaque grey slab
+   that read as an enabled button, and a brand colour has no business marking
+   an action you cannot take. Loading is excluded - it is still the real
+   button, just busy. */
+.kerne-button-primary:disabled:not([data-kerne-loading="true"]) {
+  opacity: 1;
+  background: var(--kerne-track);
+  color: var(--kerne-fg-subtle);
+}
+/* A button mid-request is busy, not unavailable - dimming it to the disabled
+   opacity reads as "this stopped working". */
+.kerne-button[data-kerne-loading="true"] { opacity: 1; cursor: progress; }
+.kerne-button .kerne-spinner { width: 15px; height: 15px; border-width: 2px; }
 .kerne-button-primary { background: var(--kerne-primary); color: var(--kerne-primary-fg); }
 .kerne-button-primary:hover:not(:disabled) { background: var(--kerne-primary-hover); }
 .kerne-button-outline {
@@ -417,7 +505,7 @@ var CSS = `
   /* Digits line up between rows instead of jittering as counts change. */
   font-variant-numeric: tabular-nums;
 }
-.kerne-meter-track { height: 6px; border-radius: 999px; background: var(--kerne-panel); overflow: hidden; }
+.kerne-meter-track { height: 6px; border-radius: 999px; background: var(--kerne-track); overflow: hidden; }
 .kerne-meter-fill { height: 100%; border-radius: 999px; background: var(--kerne-fg); transition: width .3s ease; }
 .kerne-meter[data-level="warning"] .kerne-meter-fill { background: var(--kerne-warning); }
 .kerne-meter[data-level="critical"] .kerne-meter-fill { background: var(--kerne-danger); }
@@ -426,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; }
@@ -577,6 +785,43 @@ function resolveTheme(appearance) {
   return appearance?.theme ?? "light";
 }
 
+// src/ui/password.ts
+var MIN_PASSWORD_LENGTH = 8;
+var BASELINE_POLICY = {
+  min_length: MIN_PASSWORD_LENGTH,
+  require_uppercase: false,
+  require_number: false,
+  require_symbol: false
+};
+function resolvePolicy(config) {
+  return config?.password_policy ?? BASELINE_POLICY;
+}
+function passwordRules(password, policy) {
+  const rules = [{ key: "min_length", met: password.length >= policy.min_length }];
+  if (policy.require_uppercase) {
+    rules.push({ key: "require_uppercase", met: /[A-Z]/.test(password) });
+  }
+  if (policy.require_number) {
+    rules.push({ key: "require_number", met: /\d/.test(password) });
+  }
+  if (policy.require_symbol) {
+    rules.push({ key: "require_symbol", met: /[^A-Za-z0-9]/.test(password) });
+  }
+  return rules;
+}
+function meetsPolicy(password, policy) {
+  return passwordRules(password, policy).every((rule) => rule.met);
+}
+function passwordStrength(password) {
+  if (password.length < MIN_PASSWORD_LENGTH) return 0;
+  const variety = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((re) => re.test(password)).length;
+  let score = 1;
+  if (password.length >= 12) score++;
+  if (password.length >= 16) score++;
+  if (variety >= 3) score++;
+  return Math.min(score, 4);
+}
+
 // src/ui/primitives.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var InsideShell = createContext(false);
@@ -635,6 +880,10 @@ function Masthead({
     ] })
   ] });
 }
+function prefersAutoFocus() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(pointer: fine)").matches;
+}
 function Field({
   label,
   type,
@@ -645,55 +894,185 @@ function Field({
   disabled,
   required,
   invalid,
+  error,
   action,
   code,
-  autoFocus
+  autoFocus,
+  children
 }) {
   const id = useId();
+  const errorId = `${id}-error`;
+  const noteId = `${id}-note`;
+  const l10n = useLocalization();
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState2(false);
+  const [capsLock, setCapsLock] = useState2(false);
+  const trackCapsLock = (e) => {
+    if (!isPassword) return;
+    setCapsLock(e.getModifierState?.("CapsLock") ?? false);
+  };
+  const describedBy = [error ? errorId : null, children ? noteId : null].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: "kerne-field", children: [
     action ? /* @__PURE__ */ jsxs("div", { className: "kerne-label-row", children: [
       /* @__PURE__ */ jsx("label", { className: "kerne-label", htmlFor: id, children: label }),
       action
     ] }) : /* @__PURE__ */ jsx("label", { className: "kerne-label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id,
-        className: "kerne-input",
-        type,
-        value,
-        onChange: (e) => onChange(e.target.value),
-        autoComplete,
-        placeholder,
-        disabled,
-        required,
-        "aria-invalid": invalid || void 0,
-        "data-kerne-code": code ? "true" : void 0,
-        autoFocus
-      }
-    )
+    /* @__PURE__ */ jsxs("div", { className: "kerne-control", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          className: "kerne-input",
+          type: isPassword && revealed ? "text" : type,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          onKeyUp: trackCapsLock,
+          onBlur: () => setCapsLock(false),
+          autoComplete,
+          placeholder,
+          disabled,
+          required,
+          "aria-invalid": invalid || !!error || void 0,
+          "aria-describedby": describedBy || void 0,
+          "data-kerne-code": code ? "true" : void 0,
+          "data-kerne-reveal": isPassword ? "true" : void 0,
+          autoFocus: autoFocus && prefersAutoFocus()
+        }
+      ),
+      isPassword ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "kerne-reveal",
+          onClick: () => setRevealed((v) => !v),
+          disabled,
+          "aria-label": revealed ? l10n.common.hidePassword : l10n.common.showPassword,
+          "aria-pressed": revealed,
+          tabIndex: -1,
+          children: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+        }
+      ) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { id: noteId, children }) : null,
+    capsLock ? /* @__PURE__ */ jsx("p", { className: "kerne-field-note", "data-kerne-warn": "true", role: "status", children: l10n.common.capsLockOn }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "kerne-field-error", id: errorId, role: "alert", children: error }) : null
   ] });
 }
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.6 6.2A9.9 9.9 0 0 1 12 6c6.4 0 10 7 10 7a15.7 15.7 0 0 1-3 3.7M6.2 7.4A15.6 15.6 0 0 0 2 13s3.6 7 10 7a9.7 9.7 0 0 0 4.3-1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "m3 3 18 18", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
 function Button({
   children,
   variant = "primary",
   disabled,
+  loading,
   type = "submit",
   onClick,
   ariaLabel
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type,
       className: `kerne-button kerne-button-${variant}`,
-      disabled,
+      disabled: disabled || loading,
       onClick,
       "aria-label": ariaLabel,
-      children
+      "aria-busy": loading || void 0,
+      "data-kerne-loading": loading ? "true" : void 0,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "kerne-spinner", "aria-hidden": "true" }) : null,
+        children
+      ]
     }
   );
 }
+function PasswordStrength({
+  password,
+  policy
+}) {
+  const l10n = useLocalization();
+  const resolved = policy ?? resolvePolicy(null);
+  if (!meetsPolicy(password, resolved)) {
+    const labels2 = {
+      min_length: fill(l10n.common.passwordHint, { count: resolved.min_length }),
+      require_uppercase: l10n.common.passwordRequireUppercase,
+      require_number: l10n.common.passwordRequireNumber,
+      require_symbol: l10n.common.passwordRequireSymbol
+    };
+    const rules = passwordRules(password, resolved);
+    if (rules.length === 1) {
+      return /* @__PURE__ */ jsx("p", { className: "kerne-field-note", children: labels2[rules[0].key] });
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "kerne-rules", children: rules.map((rule) => /* @__PURE__ */ jsxs("li", { className: "kerne-rule", "data-met": rule.met ? "true" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: rule.met ? "\u2713" : "\xB7" }),
+      labels2[rule.key]
+    ] }, rule.key)) });
+  }
+  const score = passwordStrength(password);
+  const labels = [
+    l10n.common.strengthWeak,
+    l10n.common.strengthWeak,
+    l10n.common.strengthFair,
+    l10n.common.strengthGood,
+    l10n.common.strengthStrong
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-strength", "data-score": score, children: [
+    /* @__PURE__ */ jsx("div", { className: "kerne-strength-track", "aria-hidden": "true", children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "kerne-strength-step",
+        "data-on": score >= step ? "true" : void 0
+      },
+      step
+    )) }),
+    /* @__PURE__ */ jsxs("span", { className: "kerne-strength-label", children: [
+      l10n.common.strengthLabel,
+      ": ",
+      labels[score]
+    ] })
+  ] });
+}
 function MethodSwitch({
   onClick,
   children
@@ -746,7 +1125,7 @@ function Panel({
     "div",
     {
       className: `kerne-panel${danger ? " kerne-panel-danger" : ""}${variant === "success" ? " kerne-panel-success" : ""}`,
-      ...danger ? { role: "alert" } : {},
+      ...danger ? { role: "alert" } : { role: "status", "aria-live": "polite" },
       children: [
         icon,
         /* @__PURE__ */ jsx("span", { children })
@@ -911,12 +1290,12 @@ function LoginForm({
   const { config, isLoading: configLoading, error: configError } = useAuthConfig();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [email, setEmail] = useState2("");
-  const [password, setPassword] = useState2("");
-  const [submitting, setSubmitting] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [linkSentTo, setLinkSentTo] = useState2(null);
-  const [passwordMode, setPasswordMode] = useState2(false);
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [submitting, setSubmitting] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [linkSentTo, setLinkSentTo] = useState3(null);
+  const [passwordMode, setPasswordMode] = useState3(false);
   const shell = (children) => /* @__PURE__ */ jsx2(Shell, { appearance, className, children });
   const hasOAuth = (config?.oauth_providers.length ?? 0) > 0;
   const hasCredentials = config?.enable_credentials ?? false;
@@ -1012,7 +1391,7 @@ function LoginForm({
               action: forgotPasswordUrl || onForgotPasswordClick ? /* @__PURE__ */ jsx2(TextLink, { href: forgotPasswordUrl, onClick: onForgotPasswordClick, children: l10n.signIn.forgotPassword }) : void 0
             }
           ) : null,
-          /* @__PURE__ */ jsx2(Button, { disabled: submitting || !email || usePassword && !password, children: submitLabel }),
+          /* @__PURE__ */ jsx2(Button, { loading: submitting, disabled: !email || usePassword && !password, children: submitLabel }),
           hasCredentials && hasMagicLink ? /* @__PURE__ */ jsx2(
             MethodSwitch,
             {
@@ -1041,7 +1420,7 @@ function LoginForm({
 }
 
 // src/ui/RegisterForm.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function RegisterForm({
   onSuccess,
@@ -1062,17 +1441,18 @@ function RegisterForm({
   const client = useClient();
   const { register, startPasswordless } = useAuth();
   const { config, isLoading: configLoading, error: configError } = useAuthConfig();
+  const policy = resolvePolicy(config);
   const invitationToken = useUrlToken("token", invitationTokenProp) || void 0;
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [email, setEmail] = useState3("");
-  const [password, setPassword] = useState3("");
-  const [name, setName] = useState3("");
-  const [invitationCode, setInvitationCode] = useState3("");
-  const [submitting, setSubmitting] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [linkSentTo, setLinkSentTo] = useState3(null);
-  const [passwordMode, setPasswordMode] = useState3(false);
+  const [email, setEmail] = useState4("");
+  const [password, setPassword] = useState4("");
+  const [name, setName] = useState4("");
+  const [invitationCode, setInvitationCode] = useState4("");
+  const [submitting, setSubmitting] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [linkSentTo, setLinkSentTo] = useState4(null);
+  const [passwordMode, setPasswordMode] = useState4(false);
   const shell = (children) => /* @__PURE__ */ jsx3(Shell, { appearance, className, children });
   const appName = config?.app_name;
   const heading = title ?? (appName ? fill(l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title);
@@ -1216,13 +1596,15 @@ function RegisterForm({
               autoComplete: "new-password",
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
-              required: true
+              required: true,
+              children: /* @__PURE__ */ jsx3(PasswordStrength, { password, policy })
             }
           ) : null,
           /* @__PURE__ */ jsx3(
             Button,
             {
-              disabled: submitting || !email || needsCode && !invitationCode || usePassword && !password,
+              loading: submitting,
+              disabled: !email || needsCode && !invitationCode || usePassword && !meetsPolicy(password, policy),
               children: submitLabel
             }
           ),
@@ -1254,7 +1636,7 @@ function RegisterForm({
 }
 
 // src/ui/ForgotPasswordForm.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ForgotPasswordForm({
   callbackUrl,
@@ -1271,10 +1653,10 @@ function ForgotPasswordForm({
   const { config } = useAuthConfig();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [email, setEmail] = useState4("");
-  const [submitting, setSubmitting] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [sentTo, setSentTo] = useState4(null);
+  const [email, setEmail] = useState5("");
+  const [submitting, setSubmitting] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [sentTo, setSentTo] = useState5(null);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -1321,7 +1703,7 @@ function ForgotPasswordForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ jsx4(Button, { disabled: submitting || !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
+        /* @__PURE__ */ jsx4(Button, { loading: submitting, disabled: !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
         backLine ? /* @__PURE__ */ jsx4("p", { className: "kerne-footer", children: backLine }) : null
       ] })
     ] }),
@@ -1330,7 +1712,7 @@ function ForgotPasswordForm({
 }
 
 // src/ui/ResetPasswordForm.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ResetPasswordForm({
   token: tokenProp,
@@ -1345,14 +1727,15 @@ function ResetPasswordForm({
 }) {
   const { confirmPasswordReset } = useAuth();
   const { config } = useAuthConfig();
+  const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [password, setPassword] = useState5("");
-  const [confirm, setConfirm] = useState5("");
-  const [submitting, setSubmitting] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [done, setDone] = useState5(false);
+  const [password, setPassword] = useState6("");
+  const [confirm, setConfirm] = useState6("");
+  const [submitting, setSubmitting] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [done, setDone] = useState6(false);
   const heading = title ?? l10n.resetPassword.title;
   const mismatch = confirm.length > 0 && password !== confirm;
   const signInAction = signInUrl || onSignInClick ? /* @__PURE__ */ jsx5(
@@ -1416,7 +1799,8 @@ function ResetPasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            autoFocus: true
+            autoFocus: true,
+            children: /* @__PURE__ */ jsx5(PasswordStrength, { password, policy })
           }
         ),
         /* @__PURE__ */ jsx5(
@@ -1430,11 +1814,17 @@ function ResetPasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: mismatch
+            error: mismatch ? l10n.resetPassword.mismatch : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            loading: submitting,
+            disabled: !meetsPolicy(password, policy) || !confirm || mismatch,
+            children: submitting ? l10n.resetPassword.submitting : l10n.resetPassword.submit
           }
         ),
-        mismatch ? /* @__PURE__ */ jsx5("p", { className: "kerne-footer", children: l10n.resetPassword.mismatch }) : null,
-        /* @__PURE__ */ jsx5(Button, { disabled: submitting || !password || !confirm || mismatch, children: submitting ? l10n.resetPassword.submitting : l10n.resetPassword.submit }),
         signInUrl || onSignInClick ? /* @__PURE__ */ jsx5("p", { className: "kerne-footer", children: /* @__PURE__ */ jsx5(TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }) }) : null
       ] })
     ] }),
@@ -1443,7 +1833,7 @@ function ResetPasswordForm({
 }
 
 // src/ui/MagicLinkCallback.tsx
-import { useEffect as useEffect2, useRef, useState as useState6 } from "react";
+import { useEffect as useEffect2, useRef, useState as useState7 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function MagicLinkCallback({
   token: tokenProp,
@@ -1461,8 +1851,8 @@ function MagicLinkCallback({
   const token = useUrlToken("token", tokenProp);
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [state, setState] = useState6("pending");
-  const [message, setMessage] = useState6(null);
+  const [state, setState] = useState7("pending");
+  const [message, setMessage] = useState7(null);
   const consumed = useRef(false);
   useEffect2(() => {
     if (token === null || consumed.current) return;
@@ -1502,7 +1892,7 @@ function MagicLinkCallback({
 }
 
 // src/ui/VerifyEmailForm.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState8 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function VerifyEmailForm({
   token: tokenProp,
@@ -1519,12 +1909,12 @@ function VerifyEmailForm({
   const token = useUrlToken("token", tokenProp);
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [code, setCode] = useState7("");
-  const [submitting, setSubmitting] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [resent, setResent] = useState7(false);
-  const [linkState, setLinkState] = useState7("idle");
-  const [verified, setVerified] = useState7(false);
+  const [code, setCode] = useState8("");
+  const [submitting, setSubmitting] = useState8(false);
+  const [error, setError] = useState8(null);
+  const [resent, setResent] = useState8(false);
+  const [linkState, setLinkState] = useState8("idle");
+  const [verified, setVerified] = useState8(false);
   const consumed = useRef2(false);
   const heading = title ?? l10n.verifyEmail.title;
   const settle = async (needsTokenRefresh) => {
@@ -1618,7 +2008,7 @@ function VerifyEmailForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ jsx7(Button, { disabled: submitting || !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
+        /* @__PURE__ */ jsx7(Button, { loading: submitting, disabled: !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
         /* @__PURE__ */ jsx7(MethodSwitch, { onClick: handleResend, children: l10n.verifyEmail.resend })
       ] })
     ] }),
@@ -1627,7 +2017,7 @@ function VerifyEmailForm({
 }
 
 // src/ui/ActivateAccountForm.tsx
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState9 } from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ActivateAccountForm({
   token: tokenProp,
@@ -1643,15 +2033,16 @@ function ActivateAccountForm({
   const client = useClient();
   const { getActivationContext, completeActivation } = useAuth();
   const { config } = useAuthConfig();
+  const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [context, setContext] = useState8(null);
-  const [loadError, setLoadError] = useState8(null);
-  const [password, setPassword] = useState8("");
-  const [confirm, setConfirm] = useState8("");
-  const [submitting, setSubmitting] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [context, setContext] = useState9(null);
+  const [loadError, setLoadError] = useState9(null);
+  const [password, setPassword] = useState9("");
+  const [confirm, setConfirm] = useState9("");
+  const [submitting, setSubmitting] = useState9(false);
+  const [error, setError] = useState9(null);
   const heading = title ?? l10n.activate.title;
   const mismatch = confirm.length > 0 && password !== confirm;
   useEffect4(() => {
@@ -1736,7 +2127,8 @@ function ActivateAccountForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              autoFocus: true
+              autoFocus: true,
+              children: /* @__PURE__ */ jsx8(PasswordStrength, { password, policy })
             }
           ),
           /* @__PURE__ */ jsx8(
@@ -1750,12 +2142,18 @@ function ActivateAccountForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              invalid: mismatch
+              error: mismatch ? l10n.activate.mismatch : void 0
             }
-          ),
-          mismatch ? /* @__PURE__ */ jsx8("p", { className: "kerne-footer", children: l10n.activate.mismatch }) : null
+          )
         ] }) : null,
-        /* @__PURE__ */ jsx8(Button, { disabled: submitting || credentialsMode && (!password || !confirm || mismatch), children: submitting ? l10n.activate.submitting : l10n.activate.submit })
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            loading: submitting,
+            disabled: credentialsMode && (!meetsPolicy(password, policy) || !confirm || mismatch),
+            children: submitting ? l10n.activate.submitting : l10n.activate.submit
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ jsx8(KerneBranding, { show: config?.show_kerne_branding ?? false })
@@ -1782,7 +2180,7 @@ function AuthFlow({
 }) {
   const { config } = useAuthConfig();
   const token = useUrlToken("token");
-  const [internalStep, setInternalStep] = useState9(null);
+  const [internalStep, setInternalStep] = useState10(null);
   const go = (next) => {
     if (controlledStep === void 0) setInternalStep(next);
     onStepChange?.(next);
@@ -1790,7 +2188,11 @@ function AuthFlow({
   const tokenStep = token && (initialStep === void 0 || TOKEN_STEPS.includes(initialStep)) ? initialStep ?? "magic-link" : null;
   const step = controlledStep ?? internalStep ?? tokenStep ?? initialStep ?? "sign-in";
   const canSignUp = allowSignUp && config?.registration_mode !== "CLOSED";
-  const shared = { appearance, logo, className };
+  const shared = {
+    appearance,
+    logo,
+    className: `kerne-step${className ? ` ${className}` : ""}`
+  };
   switch (step) {
     case "sign-up":
       return /* @__PURE__ */ jsx9(
@@ -1855,7 +2257,7 @@ function AuthFlow({
 }
 
 // src/ui/ChangePasswordForm.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChangePasswordForm({
   onSuccess,
@@ -1864,15 +2266,17 @@ function ChangePasswordForm({
   className
 }) {
   const { updatePassword } = useAuth();
+  const { config } = useAuthConfig();
+  const policy = resolvePolicy(config);
   const l10n = useLocalization();
   const showError = useErrorResolver();
   const heading = title === null ? null : title ?? l10n.security.submit;
-  const [currentPassword, setCurrentPassword] = useState10("");
-  const [newPassword, setNewPassword] = useState10("");
-  const [confirm, setConfirm] = useState10("");
-  const [submitting, setSubmitting] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [done, setDone] = useState10(false);
+  const [currentPassword, setCurrentPassword] = useState11("");
+  const [newPassword, setNewPassword] = useState11("");
+  const [confirm, setConfirm] = useState11("");
+  const [submitting, setSubmitting] = useState11(false);
+  const [error, setError] = useState11(null);
+  const [done, setDone] = useState11(false);
   const mismatch = confirm.length > 0 && newPassword !== confirm;
   const unchanged = newPassword.length > 0 && newPassword === currentPassword;
   const handleSubmit = async (e) => {
@@ -1924,7 +2328,8 @@ function ChangePasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: unchanged
+            error: unchanged ? l10n.security.sameAsCurrent : void 0,
+            children: /* @__PURE__ */ jsx10(PasswordStrength, { password: newPassword, policy })
           }
         ),
         /* @__PURE__ */ jsx10(
@@ -1938,14 +2343,14 @@ function ChangePasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: mismatch
+            error: mismatch ? l10n.security.mismatch : void 0
           }
         ),
-        unchanged ? /* @__PURE__ */ jsx10("p", { className: "kerne-footer", children: l10n.security.sameAsCurrent }) : mismatch ? /* @__PURE__ */ jsx10("p", { className: "kerne-footer", children: l10n.security.mismatch }) : null,
         /* @__PURE__ */ jsx10(
           Button,
           {
-            disabled: submitting || !currentPassword || !newPassword || !confirm || mismatch || unchanged,
+            loading: submitting,
+            disabled: !currentPassword || !meetsPolicy(newPassword, policy) || !confirm || mismatch || unchanged,
             children: submitting ? l10n.security.submitting : l10n.security.submit
           }
         )
@@ -1955,7 +2360,7 @@ function ChangePasswordForm({
 }
 
 // src/ui/WaitlistForm.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function WaitlistForm({
   title,
@@ -1974,11 +2379,11 @@ function WaitlistForm({
   const { config } = useAuthConfig();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [email, setEmail] = useState11("");
-  const [name, setName] = useState11("");
-  const [submitting, setSubmitting] = useState11(false);
-  const [error, setError] = useState11(null);
-  const [joined, setJoined] = useState11(false);
+  const [email, setEmail] = useState12("");
+  const [name, setName] = useState12("");
+  const [submitting, setSubmitting] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [joined, setJoined] = useState12(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -2035,7 +2440,7 @@ function WaitlistForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ jsx11(Button, { disabled: submitting || !email, children: submitting ? l10n.waitlist.submitting : submitLabel ?? l10n.waitlist.submit })
+        /* @__PURE__ */ jsx11(Button, { loading: submitting, disabled: !email, children: submitting ? l10n.waitlist.submitting : submitLabel ?? l10n.waitlist.submit })
       ] })
     ] }),
     legal ? /* @__PURE__ */ jsx11("p", { className: "kerne-legal", children: legal }) : null,
@@ -2044,7 +2449,7 @@ function WaitlistForm({
 }
 
 // src/ui/UserButton.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState12 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState13 } from "react";
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function SignOutButton({
   children,
@@ -2092,7 +2497,7 @@ function UserButton({
   const { logout, isAuthenticated } = useAuth();
   const { user, fullName, initials, email } = useUser();
   const l10n = useLocalization();
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState13(false);
   const wrapRef = useRef3(null);
   useEffect5(() => {
     if (!open) return;
@@ -2176,24 +2581,24 @@ function UserButton({
 }
 
 // src/ui/UserProfile.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 
 // src/ui/profile/ProfileSection.tsx
-import { useEffect as useEffect6, useState as useState13 } from "react";
+import { useEffect as useEffect6, useState as useState14 } from "react";
 import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function ProfileSection({ verificationCallbackUrl, onSaved }) {
   const { updateProfile, sendVerificationEmail, getVerificationStatus } = useAuth();
   const { user, fullName, initials, email } = useUser();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [firstName, setFirstName] = useState13("");
-  const [lastName, setLastName] = useState13("");
-  const [saving, setSaving] = useState13(false);
-  const [saved, setSaved] = useState13(false);
-  const [error, setError] = useState13(null);
-  const [verified, setVerified] = useState13(null);
-  const [sending, setSending] = useState13(false);
-  const [sent, setSent] = useState13(false);
+  const [firstName, setFirstName] = useState14("");
+  const [lastName, setLastName] = useState14("");
+  const [saving, setSaving] = useState14(false);
+  const [saved, setSaved] = useState14(false);
+  const [error, setError] = useState14(null);
+  const [verified, setVerified] = useState14(null);
+  const [sending, setSending] = useState14(false);
+  const [sent, setSent] = useState14(false);
   useEffect6(() => {
     if (!user) return;
     setFirstName(user.first_name ?? "");
@@ -2269,7 +2674,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
             disabled: saving
           }
         ),
-        /* @__PURE__ */ jsx13(Button, { disabled: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
+        /* @__PURE__ */ jsx13(Button, { loading: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
       ] })
     ] }),
     /* @__PURE__ */ jsxs12(
@@ -2283,7 +2688,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
               email,
               verified === true ? /* @__PURE__ */ jsx13("span", { className: "kerne-badge", "data-tone": "success", children: l10n.profile.verified }) : verified === false ? /* @__PURE__ */ jsx13("span", { className: "kerne-badge", "data-tone": "warning", children: l10n.profile.unverified }) : null
             ] }) }),
-            verified === false ? /* @__PURE__ */ jsx13(Button, { variant: "outline", type: "button", onClick: handleResend, disabled: sending, children: sending ? l10n.common.sending : l10n.profile.verify }) : null
+            verified === false ? /* @__PURE__ */ jsx13(Button, { variant: "outline", type: "button", onClick: handleResend, loading: sending, children: sending ? l10n.common.sending : l10n.profile.verify }) : null
           ] }),
           sent ? /* @__PURE__ */ jsx13(Panel, { variant: "success", children: l10n.profile.verificationSent }) : null
         ]
@@ -2293,16 +2698,16 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
 }
 
 // src/ui/profile/SecuritySection.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function SecuritySection({ showDeleteAccount = true, onDeleted }) {
   const { requestAccountDeletion } = useAuth();
   const { config } = useAuthConfig();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [error, setError] = useState14(null);
-  const [confirmingDelete, setConfirmingDelete] = useState14(false);
-  const [deleting, setDeleting] = useState14(false);
+  const [error, setError] = useState15(null);
+  const [confirmingDelete, setConfirmingDelete] = useState15(false);
+  const [deleting, setDeleting] = useState15(false);
   const hasPassword = config?.enable_credentials ?? true;
   const handleDelete = async () => {
     setError(null);
@@ -2319,7 +2724,7 @@ function SecuritySection({ showDeleteAccount = true, onDeleted }) {
     error ? /* @__PURE__ */ jsx14(Panel, { variant: "danger", children: error }) : null,
     hasPassword ? /* @__PURE__ */ jsx14(Subsection, { title: l10n.security.passwordTitle, description: l10n.security.passwordDesc, children: /* @__PURE__ */ jsx14(ChangePasswordForm, { title: null }) }) : null,
     showDeleteAccount ? /* @__PURE__ */ jsx14(Subsection, { title: l10n.security.deleteTitle, description: l10n.security.deleteDesc, children: confirmingDelete ? /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 10, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx14(Button, { variant: "danger", type: "button", onClick: handleDelete, disabled: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
+      /* @__PURE__ */ jsx14(Button, { variant: "danger", type: "button", onClick: handleDelete, loading: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
       /* @__PURE__ */ jsx14(
         Button,
         {
@@ -2335,7 +2740,7 @@ function SecuritySection({ showDeleteAccount = true, onDeleted }) {
 }
 
 // src/ui/profile/BillingSection.tsx
-import { useMemo, useState as useState16 } from "react";
+import { useMemo, useState as useState17 } from "react";
 
 // src/ui/format.ts
 function humanizeFeatureKey(key) {
@@ -2394,15 +2799,45 @@ 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
+  };
+}
 
 // src/ui/UsageMeters.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-function levelFor(ratio, overageAllowed) {
-  if (overageAllowed) return ratio >= 1 ? "warning" : "normal";
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+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,
@@ -2456,10 +2891,13 @@ function UsageMeters({
   return shell(
     /* @__PURE__ */ jsx15("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 ? subscription?.entitlements.find((se) => se.feature_key === e.feature_key) : void 0;
+      const capReached = billed && (standing?.cap_reached ?? false);
       return /* @__PURE__ */ jsxs14("div", { className: "kerne-meter", "data-level": level, children: [
         /* @__PURE__ */ jsxs14("div", { className: "kerne-meter-head", children: [
           /* @__PURE__ */ jsx15("span", { className: "kerne-meter-name", children: nameFor(e.feature_key) }),
@@ -2477,17 +2915,26 @@ function UsageMeters({
             children: /* @__PURE__ */ jsx15("div", { className: "kerne-meter-fill", style: { width: `${ratio * 100}%` } })
           }
         ) : null,
-        over && overageAllowed ? /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note", children: fill(l10n.usage.overage, {
-          count: formatNumber(e.used - e.limit)
-        }) }) : over ? /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
+        over && softOverage ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
+          /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note", children: fill(
+            // 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 && standing?.billed_amount != null && standing.currency ? /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note kerne-meter-cost", children: fill(l10n.usage.billedAmount, {
+            amount: formatMoney(standing.billed_amount, standing.currency)
+          }) }) : null
+        ] }) : over ? /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
       ] }, e.feature_key);
     }) })
   );
 }
 
 // src/ui/SubscriptionCard.tsx
-import { useState as useState15 } from "react";
-import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var STATUS_TONES = {
   ACTIVE: "success",
   TRIALING: "success",
@@ -2503,11 +2950,13 @@ function SubscriptionCard({
   upgradeUrl,
   onUpgradeClick,
   hidePortalButton = false,
+  hideCancelButton = false,
   appearance,
   className
 }) {
-  const { subscription, isLoading, error } = useSubscription(productSlug);
+  const { subscription, isLoading, error, refetch } = useSubscription(productSlug);
   const { openPortal } = usePortal();
+  const { cancelSubscription, isCanceling } = useCancelSubscription();
   const l10n = useLocalization();
   const showError = useErrorResolver();
   const heading = title === null ? null : title ?? l10n.billing.plan;
@@ -2519,8 +2968,10 @@ function SubscriptionCard({
     UNPAID: l10n.billing.statusUnpaid,
     PAUSED: l10n.billing.statusPaused
   };
-  const [opening, setOpening] = useState15(false);
-  const [portalError, setPortalError] = useState15(null);
+  const [opening, setOpening] = useState16(false);
+  const [portalError, setPortalError] = useState16(null);
+  const [confirmingCancel, setConfirmingCancel] = useState16(false);
+  const [cancelError, setCancelError] = useState16(null);
   const handlePortal = async () => {
     setPortalError(null);
     setOpening(true);
@@ -2531,6 +2982,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__ */ jsx16(Shell, { appearance, className, children: /* @__PURE__ */ jsxs15("div", { className: "kerne-stack", children: [
     heading ? /* @__PURE__ */ jsx16("h2", { className: "kerne-section-title", children: heading }) : null,
     children
@@ -2548,7 +3010,7 @@ function SubscriptionCard({
   }
   if (!subscription) {
     return shell(
-      /* @__PURE__ */ jsxs15(Fragment8, { children: [
+      /* @__PURE__ */ jsxs15(Fragment9, { children: [
         /* @__PURE__ */ jsx16("p", { className: "kerne-subsection-desc", children: l10n.billing.freePlan }),
         upgradeUrl || onUpgradeClick ? /* @__PURE__ */ jsx16(
           Button,
@@ -2567,7 +3029,7 @@ function SubscriptionCard({
   const renews = formatDate(current_period_end);
   const trialEnds = formatDate(trial_end);
   return shell(
-    /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsxs15(Fragment9, { children: [
       portalError ? /* @__PURE__ */ jsx16(Panel, { variant: "danger", children: portalError }) : null,
       /* @__PURE__ */ jsxs15("dl", { className: "kerne-rows", children: [
         /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
@@ -2596,13 +3058,33 @@ function SubscriptionCard({
         ] }) : null
       ] }),
       canceled_at ? /* @__PURE__ */ jsx16(Panel, { children: l10n.billing.cancelNotice }) : null,
-      !hidePortalButton ? /* @__PURE__ */ jsx16(Button, { variant: "outline", type: "button", onClick: handlePortal, disabled: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null
+      cancelError ? /* @__PURE__ */ jsx16(Panel, { variant: "danger", children: cancelError }) : null,
+      confirmingCancel ? /* @__PURE__ */ jsxs15(Panel, { children: [
+        /* @__PURE__ */ jsx16("p", { children: l10n.billing.cancelConfirmTitle }),
+        /* @__PURE__ */ jsx16("p", { className: "kerne-subsection-desc", children: l10n.billing.cancelConfirmBody }),
+        /* @__PURE__ */ jsxs15("div", { className: "kerne-inline-actions", children: [
+          /* @__PURE__ */ jsx16(
+            Button,
+            {
+              variant: "outline",
+              type: "button",
+              onClick: () => setConfirmingCancel(false),
+              disabled: isCanceling,
+              children: l10n.billing.cancelConfirmDismiss
+            }
+          ),
+          /* @__PURE__ */ jsx16(Button, { type: "button", onClick: handleCancel, loading: isCanceling, children: isCanceling ? l10n.billing.canceling : l10n.billing.cancelConfirmButton })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs15("div", { className: "kerne-inline-actions", children: [
+        !hidePortalButton ? /* @__PURE__ */ jsx16(Button, { variant: "outline", type: "button", onClick: handlePortal, loading: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null,
+        !hideCancelButton && !canceled_at && status !== "CANCELED" ? /* @__PURE__ */ jsx16(Button, { variant: "outline", type: "button", onClick: () => setConfirmingCancel(true), children: l10n.billing.cancelSubscription }) : null
+      ] })
     ] })
   );
 }
 
 // src/ui/profile/BillingSection.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function intervalsOf(plans) {
   const seen = [];
   for (const plan of plans) {
@@ -2628,10 +3110,10 @@ function BillingSection({
   const { openCheckout } = useCheckout();
   const l10n = useLocalization();
   const showError = useErrorResolver();
-  const [busy, setBusy] = useState16(null);
-  const [error, setError] = useState16(null);
+  const [busy, setBusy] = useState17(null);
+  const [error, setError] = useState17(null);
   const intervals = useMemo(() => intervalsOf(plans), [plans]);
-  const [interval, setInterval] = useState16(null);
+  const [interval, setInterval] = useState17(null);
   const activeInterval = interval ?? subscription?.plan_price.interval ?? intervals[0] ?? null;
   const handleSwitch = async (planPriceId) => {
     setError(null);
@@ -2646,7 +3128,7 @@ function BillingSection({
       setBusy(null);
     }
   };
-  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment10, { children: [
     error ? /* @__PURE__ */ jsx17(Panel, { variant: "danger", children: error }) : null,
     /* @__PURE__ */ jsx17(Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ jsx17(
       SubscriptionCard,
@@ -2664,7 +3146,7 @@ function BillingSection({
         style: { height: 64 },
         "aria-label": l10n.billing.loadingPlans
       }
-    ) : plans.length === 0 ? /* @__PURE__ */ jsx17("p", { className: "kerne-subsection-desc", children: l10n.billing.noPlans }) : /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    ) : plans.length === 0 ? /* @__PURE__ */ jsx17("p", { className: "kerne-subsection-desc", children: l10n.billing.noPlans }) : /* @__PURE__ */ jsxs16(Fragment10, { children: [
       intervals.length > 1 ? /* @__PURE__ */ jsx17(
         "div",
         {
@@ -2706,6 +3188,7 @@ function BillingSection({
                   variant: "outline",
                   type: "button",
                   onClick: () => handleSwitch(price.id),
+                  loading: busy === price.id,
                   disabled: busy !== null,
                   children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
                 }
@@ -2720,7 +3203,7 @@ function BillingSection({
 }
 
 // src/ui/UserProfile.tsx
-import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function UserProfile({
   tabs = ["profile", "security", "billing"],
   extraTabs = [],
@@ -2770,7 +3253,7 @@ function UserProfile({
       description: t.description
     }))
   ];
-  const [internalTab, setInternalTab] = useState17(defaultTab ?? allTabs[0]?.id ?? "profile");
+  const [internalTab, setInternalTab] = useState18(defaultTab ?? allTabs[0]?.id ?? "profile");
   const current = controlledTab ?? internalTab;
   const select = (id) => {
     if (controlledTab === void 0) setInternalTab(id);
@@ -2815,7 +3298,7 @@ function UserProfile({
       tab.id
     )) }),
     /* @__PURE__ */ jsxs17("div", { className: "kerne-pane", children: [
-      active ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
+      active ? /* @__PURE__ */ jsxs17(Fragment11, { children: [
         /* @__PURE__ */ jsx18("h2", { className: "kerne-pane-title", children: active.title }),
         active.description ? /* @__PURE__ */ jsx18("p", { className: "kerne-pane-desc", children: active.description }) : null
       ] }) : null,
@@ -2824,9 +3307,317 @@ function UserProfile({
   ] }) });
 }
 
+// src/ui/PricingTable.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo2, useRef as useRef4, useState as useState19 } from "react";
+import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+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()}`;
+}
+function collectLabels(plans) {
+  const bySlug = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    for (const price of plan.prices) {
+      if (!bySlug.has(price.label.slug)) bySlug.set(price.label.slug, price.label);
+    }
+  }
+  return Array.from(bySlug.values()).sort(
+    (a, b) => a.sort_order - b.sort_order || a.name.localeCompare(b.name)
+  );
+}
+var ENCODED_INTERVAL_MONTHS = { D: 12 / 365, M: 1, Y: 12 };
+function approxMonths2(value) {
+  const match = /^([1-9]\d*)([DMY])$/.exec(value);
+  if (!match) return 0;
+  return parseInt(match[1], 10) * ENCODED_INTERVAL_MONTHS[match[2]];
+}
+function labelSavings(plans, labels) {
+  if (labels.length < 2) return null;
+  const priceFor = (labelSlug) => {
+    for (const plan of plans) {
+      const price = plan.prices.find((p) => p.label.slug === labelSlug);
+      if (price) return price;
+    }
+    return void 0;
+  };
+  const sorted = [...labels].sort(
+    (a, b) => approxMonths2(priceFor(a.slug)?.interval ?? "1M") - approxMonths2(priceFor(b.slug)?.interval ?? "1M")
+  );
+  const shortest = sorted[0];
+  const longest = sorted[sorted.length - 1];
+  if (shortest.slug === longest.slug) return null;
+  for (const plan of plans) {
+    const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
+    const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
+    if (!shortPrice?.amount || !longPrice) continue;
+    const shortMonths = approxMonths2(shortPrice.interval);
+    const longMonths = approxMonths2(longPrice.interval);
+    if (!shortMonths || !longMonths) continue;
+    const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
+    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
+  }
+  return null;
+}
+var PricingTableContext = createContext2(null);
+function usePricingTable() {
+  const ctx = useContext2(PricingTableContext);
+  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 } = usePlans(product);
+  const { subscription } = useSubscription(product);
+  const { openCheckout } = useCheckout();
+  const l10n = useLocalization();
+  const showError = useErrorResolver();
+  const [selectedLabelSlug, setSelectedLabelSlug] = useState19(defaultLabel ?? null);
+  const [busyPriceId, setBusyPriceId] = useState19(null);
+  const [checkoutError, setCheckoutError] = useState19(null);
+  const labels = useMemo2(() => collectLabels(plans), [plans]);
+  const savings = useMemo2(() => labelSavings(plans, labels), [plans, labels]);
+  useEffect7(() => {
+    if (labels.length === 0) return;
+    if (selectedLabelSlug && labels.some((l) => l.slug === selectedLabelSlug)) return;
+    setSelectedLabelSlug(labels[0].slug);
+  }, [labels]);
+  const handleSelectPlan = async (plan) => {
+    const price = plan.prices.find((p) => p.label.slug === selectedLabelSlug) ?? plan.prices[0];
+    if (!price) return;
+    if (onSelectPlan) {
+      onSelectPlan(plan, price);
+      return;
+    }
+    setCheckoutError(null);
+    setBusyPriceId(price.id);
+    try {
+      await openCheckout(price.id, {
+        successUrl: checkoutSuccessUrl,
+        cancelUrl: checkoutCancelUrl
+      });
+    } catch (e) {
+      setCheckoutError(showError(e));
+      setBusyPriceId(null);
+    }
+  };
+  const ctx = {
+    plans,
+    labels,
+    selectedLabelSlug,
+    setSelectedLabelSlug,
+    savings,
+    currentPlanId: subscription?.plan?.id ?? null,
+    busyPriceId,
+    onSelectPlan: handleSelectPlan
+  };
+  return /* @__PURE__ */ jsx19(Shell, { appearance, className, size: "wide", children: isLoading ? /* @__PURE__ */ jsx19("div", { className: "kerne-pricing-skeleton", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: /* @__PURE__ */ jsx19("div", { className: "kerne-skeleton", style: { height: 320 } }) }) : error ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ jsxs18(PricingTableContext.Provider, { value: ctx, children: [
+    checkoutError ? /* @__PURE__ */ jsx19(Panel, { variant: "danger", children: checkoutError }) : null,
+    children
+  ] }) });
+}
+function LabelSwitch() {
+  const { labels, selectedLabelSlug, setSelectedLabelSlug, savings } = usePricingTable();
+  const l10n = useLocalization();
+  const containerRef = useRef4(null);
+  const buttonRefs = useRef4(/* @__PURE__ */ new Map());
+  const [thumb, setThumb] = useState19(null);
+  useEffect7(() => {
+    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__ */ jsx19("div", { className: "kerne-pricing-switch-wrap", children: /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref: containerRef,
+      className: "kerne-pricing-switch",
+      role: "group",
+      "aria-label": l10n.billing.intervalGroupLabel,
+      children: [
+        thumb ? /* @__PURE__ */ jsx19(
+          "span",
+          {
+            className: "kerne-pricing-switch-thumb",
+            style: { transform: `translateX(${thumb.left}px)`, width: `${thumb.width}px` },
+            "aria-hidden": "true"
+          }
+        ) : null,
+        labels.map((label) => /* @__PURE__ */ jsxs18(
+          "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__ */ jsx19("span", { className: "kerne-pricing-switch-save", children: fill(l10n.pricing.save, { percent: savings.percent }) }) : null
+            ]
+          },
+          label.slug
+        ))
+      ]
+    }
+  ) });
+}
+function useAnimatedAmount(target, durationMs = 420) {
+  const [displayed, setDisplayed] = useState19(target);
+  const displayedRef = useRef4(target);
+  const frameRef = useRef4();
+  useEffect7(() => {
+    if (displayedRef.current === target) return;
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").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 = useLocalization();
+  const plan = plans.find((p) => p.slug === slug);
+  useEffect7(() => {
+    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 = plan?.prices.find((p) => p.label.slug === selectedLabelSlug) ?? plan?.prices[0];
+  const resolved = price ? resolvePriceDisplay(price, price.label.display_interval) : null;
+  const animatedAmount = useAnimatedAmount(resolved?.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 ? fill(l10n.pricing.billedAt, {
+    amount: formatMoney(resolved.billedAmount, price.currency),
+    interval: formatInterval(resolved.billedInterval, l10n.billing)
+  }) : null;
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: "kerne-pricing-card",
+      "data-featured": featured ? "true" : void 0,
+      "data-current": isCurrent ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs18("div", { className: "kerne-pricing-card-head", children: [
+          badge ? /* @__PURE__ */ jsx19("span", { className: "kerne-pricing-badge", children: badge }) : null,
+          /* @__PURE__ */ jsx19("span", { className: "kerne-pricing-card-name", children: plan.name }),
+          plan.description ? /* @__PURE__ */ jsx19("p", { className: "kerne-pricing-card-desc", children: plan.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx19("div", { className: "kerne-pricing-price", children: resolved ? /* @__PURE__ */ jsxs18(Fragment12, { children: [
+          /* @__PURE__ */ jsxs18("div", { className: "kerne-pricing-price-row", children: [
+            /* @__PURE__ */ jsx19("span", { className: "kerne-pricing-amount", children: formatMoney(animatedAmount, price.currency) }),
+            /* @__PURE__ */ jsxs18("span", { className: "kerne-pricing-interval", children: [
+              "/ ",
+              formatInterval(resolved.displayInterval, l10n.billing)
+            ] })
+          ] }),
+          billedCaption ? /* @__PURE__ */ jsx19("p", { className: "kerne-pricing-billed", children: billedCaption }) : null
+        ] }) : /* @__PURE__ */ jsx19("p", { className: "kerne-pricing-billed", children: l10n.billing.notOnInterval }) }),
+        shownEntitlements.length > 0 ? /* @__PURE__ */ jsxs18("ul", { className: "kerne-pricing-features", children: [
+          shownEntitlements.map((e) => /* @__PURE__ */ jsxs18("li", { className: "kerne-pricing-feature", children: [
+            /* @__PURE__ */ jsx19(CheckIcon2, {}),
+            /* @__PURE__ */ jsx19("span", { children: formatEntitlement(e, l10n.pricing.unlimited) })
+          ] }, e.feature_key)),
+          remaining > 0 ? /* @__PURE__ */ jsx19("li", { className: "kerne-pricing-feature-more", children: fill(l10n.pricing.moreFeatures, { count: remaining }) }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx19("div", { className: "kerne-pricing-cta", children: isCurrent ? /* @__PURE__ */ jsx19(Button, { variant: "outline", type: "button", disabled: true, children: l10n.billing.current }) : /* @__PURE__ */ jsx19(
+          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__ */ jsx19(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx19("path", { d: "m5 13 4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function Plans({ featuredSlug, featuredBadge, maxFeatures }) {
+  const { plans } = usePricingTable();
+  return /* @__PURE__ */ jsx19("div", { className: "kerne-pricing-grid", children: plans.map((plan) => /* @__PURE__ */ jsx19(
+    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
-import { useEffect as useEffect7, useRef as useRef4, useState as useState18 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef5, useState as useState20 } from "react";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1500;
 function CheckoutResult({
   outcome = "success",
@@ -2844,9 +3635,9 @@ function CheckoutResult({
   const client = useClient();
   const { config } = useAuthConfig();
   const l10n = useLocalization();
-  const [state, setState] = useState18("checking");
-  const confirmed = useRef4(false);
-  useEffect7(() => {
+  const [state, setState] = useState20("checking");
+  const confirmed = useRef5(false);
+  useEffect8(() => {
     if (outcome !== "success") return;
     let stopped = false;
     const startedAt = Date.now();
@@ -2877,20 +3668,20 @@ function CheckoutResult({
   const go = (url, handler) => handler ?? (() => {
     if (url) window.location.href = url;
   });
-  const continueAction = continueUrl || onContinue ? /* @__PURE__ */ jsx19(Button, { type: "button", onClick: go(continueUrl, onContinue), children: l10n.common.continue }) : void 0;
-  const shell = (children) => /* @__PURE__ */ jsxs18(Shell, { appearance, className, children: [
-    logo ? /* @__PURE__ */ jsx19("div", { className: "kerne-masthead", children: logo }) : null,
+  const continueAction = continueUrl || onContinue ? /* @__PURE__ */ jsx20(Button, { type: "button", onClick: go(continueUrl, onContinue), children: l10n.common.continue }) : void 0;
+  const shell = (children) => /* @__PURE__ */ jsxs19(Shell, { appearance, className, children: [
+    logo ? /* @__PURE__ */ jsx20("div", { className: "kerne-masthead", children: logo }) : null,
     children,
-    /* @__PURE__ */ jsx19(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    /* @__PURE__ */ jsx20(KerneBranding, { show: config?.show_kerne_branding ?? false })
   ] });
   if (outcome === "cancel") {
     return shell(
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         Status,
         {
           tone: "danger",
           title: l10n.checkout.cancelTitle,
-          action: pricingUrl || onRetry ? /* @__PURE__ */ jsx19(Button, { variant: "outline", type: "button", onClick: go(pricingUrl, onRetry), children: l10n.checkout.backToPlans }) : void 0,
+          action: pricingUrl || onRetry ? /* @__PURE__ */ jsx20(Button, { variant: "outline", type: "button", onClick: go(pricingUrl, onRetry), children: l10n.checkout.backToPlans }) : void 0,
           children: l10n.checkout.cancelBody
         }
       )
@@ -2898,21 +3689,21 @@ function CheckoutResult({
   }
   if (state === "checking") {
     return shell(
-      /* @__PURE__ */ jsx19(Status, { tone: "loading", title: l10n.checkout.confirmingTitle, children: l10n.checkout.confirmingBody })
+      /* @__PURE__ */ jsx20(Status, { tone: "loading", title: l10n.checkout.confirmingTitle, children: l10n.checkout.confirmingBody })
     );
   }
   if (state === "pending") {
     return shell(
-      /* @__PURE__ */ jsx19(Status, { tone: "success", title: l10n.checkout.pendingTitle, action: continueAction, children: l10n.checkout.pendingBody })
+      /* @__PURE__ */ jsx20(Status, { tone: "success", title: l10n.checkout.pendingTitle, action: continueAction, children: l10n.checkout.pendingBody })
     );
   }
   return shell(
-    /* @__PURE__ */ jsx19(Status, { tone: "success", title: l10n.checkout.doneTitle, action: continueAction, children: l10n.checkout.doneBody })
+    /* @__PURE__ */ jsx20(Status, { tone: "success", title: l10n.checkout.doneTitle, action: continueAction, children: l10n.checkout.doneBody })
   );
 }
 
 // src/ui/UpgradePrompt.tsx
-import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function UpgradePrompt({
   featureKey,
   requested,
@@ -2931,22 +3722,25 @@ function UpgradePrompt({
   const l10n = useLocalization();
   if (isLoading) {
     if (hideWhileLoading) return null;
-    return /* @__PURE__ */ jsx20(Shell, { appearance, className, children: /* @__PURE__ */ jsx20("div", { className: "kerne-skeleton", style: { height: 80 }, "aria-label": l10n.upgrade.checking }) });
+    return /* @__PURE__ */ jsx21(Shell, { appearance, className, children: /* @__PURE__ */ jsx21("div", { className: "kerne-skeleton", style: { height: 80 }, "aria-label": l10n.upgrade.checking }) });
   }
-  if (allowed) return /* @__PURE__ */ jsx20(Fragment11, { children });
+  if (allowed) return /* @__PURE__ */ jsx21(Fragment13, { children });
   const name = featureName ?? humanizeFeatureKey(featureKey).toLowerCase();
   const quotaExhausted = details?.feature_type === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
   const heading = title ?? fill(quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name });
   const body = description ?? (quotaExhausted ? fill(l10n.upgrade.quotaBody, {
     used: formatNumber(details.used),
-    limit: formatNumber(details.limit)
+    // `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(details.access_limit ?? details.limit)
   }) : fill(l10n.upgrade.featureBody, { feature: name }));
-  return /* @__PURE__ */ jsx20(Shell, { appearance, className, children: /* @__PURE__ */ jsxs19("div", { className: "kerne-status", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "kerne-heading", children: [
-      /* @__PURE__ */ jsx20("h2", { className: "kerne-section-title", style: { fontSize: 17 }, children: heading }),
-      /* @__PURE__ */ jsx20("p", { className: "kerne-status-text", children: body })
+  return /* @__PURE__ */ jsx21(Shell, { appearance, className, children: /* @__PURE__ */ jsxs20("div", { className: "kerne-status", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "kerne-heading", children: [
+      /* @__PURE__ */ jsx21("h2", { className: "kerne-section-title", style: { fontSize: 17 }, children: heading }),
+      /* @__PURE__ */ jsx21("p", { className: "kerne-status-text", children: body })
     ] }),
-    upgradeUrl || onUpgradeClick ? /* @__PURE__ */ jsx20(
+    upgradeUrl || onUpgradeClick ? /* @__PURE__ */ jsx21(
       Button,
       {
         type: "button",
@@ -2967,6 +3761,7 @@ export {
   ForgotPasswordForm,
   LoginForm,
   MagicLinkCallback,
+  PricingTable,
   ProfileSection,
   RegisterForm,
   ResetPasswordForm,
@@ -2980,5 +3775,6 @@ export {
   VerifyEmailForm,
   WaitlistForm,
   defaultLocalization,
-  useLocalization
+  useLocalization,
+  usePricingTable
 };