@kerne/react 0.1.1 → 0.1.2

package/dist/ui/index.js

@@ -0,0 +1,2984 @@
+"use client";
+import {
+  defaultLocalization,
+  fill,
+  fillNode,
+  useAccess,
+  useAuth,
+  useAuthConfig,
+  useCheckout,
+  useClient,
+  useEntitlements,
+  useErrorResolver,
+  useLocalization,
+  usePlans,
+  usePortal,
+  useSubscription,
+  useUser,
+  useWaitlist
+} from "../chunk-AIUIBAYB.js";
+
+// src/ui/AuthFlow.tsx
+import { useState as useState9 } from "react";
+
+// src/ui/useUrlToken.ts
+import { useState, useEffect } from "react";
+function useUrlToken(param = "token", override) {
+  const [token, setToken] = useState(override ?? null);
+  useEffect(() => {
+    if (override) {
+      setToken(override);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    setToken(new URLSearchParams(window.location.search).get(param) ?? "");
+  }, [param, override]);
+  return token;
+}
+
+// src/ui/LoginForm.tsx
+import { useState as useState2 } from "react";
+
+// src/ui/primitives.tsx
+import { useId, useContext, createContext } from "react";
+
+// src/ui/styles.ts
+var STYLE_ELEMENT_ID = "kerne-ui-styles";
+var DARK_TOKENS = `
+  --kerne-fg: #f0f1f3;
+  --kerne-fg-muted: #9ba2ad;
+  --kerne-fg-subtle: #838b96;
+  --kerne-border: #2a2e36;
+  --kerne-border-strong: #363b45;
+  --kerne-panel: #1b1f26;
+  --kerne-surface: #14171c;
+  --kerne-surface-raised: #2a2f38;
+  --kerne-primary: #f0f1f3;
+  --kerne-primary-fg: #16181d;
+  --kerne-primary-hover: #d8dade;
+  --kerne-accent: #91a7ff;
+  --kerne-danger: #f0837a;
+  --kerne-success: #5cbd8d;
+  --kerne-warning: #d9ab5e;
+  --kerne-shadow: 0 4px 6px -2px rgba(0,0,0,.4), 0 12px 24px -8px rgba(0,0,0,.6);
+`;
+var CSS = `
+.kerne-root {
+  --kerne-fg: #16171a;
+  --kerne-fg-muted: #6b7280;
+  /* Meets 4.5:1 on white - this carries placeholders and the legal footnote,
+     which used to sit around 2.5:1. */
+  --kerne-fg-subtle: #6f7681;
+  --kerne-border: #e3e5e9;
+  --kerne-border-strong: #d6dade;
+  --kerne-field-bg: transparent;
+  --kerne-panel: #f4f5f7;
+  /* The ground the component sits on. Transparent so an embedded instance
+     inherits the host's page; set it (appearance.background) when the component
+     owns the viewport, so text and background can never resolve independently. */
+  --kerne-bg: transparent;
+  /* An opaque surface for the things that must not show through: the card
+     variant, the dropdown floating over host content, a pressed segment. */
+  --kerne-surface: #ffffff;
+  --kerne-surface-raised: #ffffff;
+  --kerne-primary: #16171a;
+  --kerne-primary-fg: #ffffff;
+  --kerne-primary-hover: #2c2e33;
+  --kerne-accent: #3b5bdb;
+  --kerne-danger: #c0392f;
+  --kerne-success: #1f7a4d;
+  --kerne-warning: #9a6b12;
+  --kerne-radius: 8px;
+  --kerne-control-height: 44px;
+  --kerne-shadow: 0 4px 6px -2px rgba(0,0,0,.06), 0 12px 24px -8px rgba(0,0,0,.16);
+  --kerne-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  box-sizing: border-box;
+  font-family: var(--kerne-font);
+  color: var(--kerne-fg);
+  background: var(--kerne-bg);
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.kerne-root *, .kerne-root *::before, .kerne-root *::after { box-sizing: inherit; }
+
+.kerne-root[data-kerne-theme="dark"] {${DARK_TOKENS}}
+/* Only an explicit opt-in follows the visitor's OS. Defaulting to it meant a
+   light-only host got a dark form on any machine set to dark, without ever
+   asking for one - and with no way for the host to know it had happened. */
+@media (prefers-color-scheme: dark) {
+  .kerne-root[data-kerne-theme="system"] {${DARK_TOKENS}}
+}
+
+.kerne-shell {
+  width: 100%;
+  max-width: 384px;
+  display: flex;
+  flex-direction: column;
+}
+/* Auth screens are a single column of fields; an account manager is a
+   navigation plus a content pane and suffocates at 384px. */
+.kerne-shell[data-kerne-size="wide"] { max-width: 800px; }
+
+.kerne-shell[data-kerne-surface="card"] {
+  background: var(--kerne-surface);
+  border: 1px solid var(--kerne-border);
+  border-radius: calc(var(--kerne-radius) + 6px);
+  box-shadow: var(--kerne-shadow);
+  padding: 32px 28px;
+  /* The card is the ground from here down, so nested surfaces stop inheriting
+     the page behind it. */
+  --kerne-bg: var(--kerne-surface);
+}
+@media (max-width: 480px) {
+  /* Full-bleed on a phone: a card with 16px of page showing on each side wastes
+     the only axis a login form has. */
+  .kerne-shell[data-kerne-surface="card"] {
+    border: none;
+    box-shadow: none;
+    padding: 8px 0;
+    background: transparent;
+    /* The card no longer paints, so the ground is the page again. */
+    --kerne-bg: transparent;
+  }
+}
+
+/* ---------- Tabbed account manager ---------- */
+.kerne-profile { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 40px; align-items: start; }
+@media (max-width: 640px) { .kerne-profile { grid-template-columns: 1fr; gap: 20px; } }
+
+.kerne-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
+@media (max-width: 640px) {
+  .kerne-nav {
+    position: static;
+    flex-direction: row;
+    overflow-x: auto;
+    gap: 4px;
+    border-bottom: 1px solid var(--kerne-border);
+    padding-bottom: 8px;
+  }
+}
+.kerne-nav-item {
+  font: inherit; font-size: 14px; text-align: left;
+  background: none; border: none; cursor: pointer;
+  padding: 8px 12px; border-radius: 6px;
+  color: var(--kerne-fg-muted); white-space: nowrap;
+  transition: background-color .12s ease, color .12s ease;
+}
+.kerne-nav-item:hover { color: var(--kerne-fg); }
+.kerne-nav-item[aria-current="page"] { background: var(--kerne-panel); color: var(--kerne-fg); font-weight: 500; }
+.kerne-nav-item:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+
+.kerne-pane { display: flex; flex-direction: column; min-width: 0; }
+.kerne-pane-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
+.kerne-pane-desc { font-size: 14px; color: var(--kerne-fg-muted); margin: 0 0 8px; }
+
+.kerne-subsection { padding: 24px 0; display: flex; flex-direction: column; gap: 16px; }
+.kerne-subsection:first-of-type { padding-top: 16px; }
+.kerne-subsection + .kerne-subsection { border-top: 1px solid var(--kerne-border); }
+.kerne-subsection-head { display: flex; flex-direction: column; gap: 3px; }
+.kerne-subsection-title { font-size: 15px; font-weight: 600; margin: 0; }
+.kerne-subsection-desc { font-size: 13px; color: var(--kerne-fg-muted); margin: 0; }
+/* Buttons inside a settings pane are actions, not page-wide calls to action. */
+.kerne-subsection .kerne-button { width: auto; align-self: flex-start; }
+
+/* ---------- Plan options ---------- */
+.kerne-plan-list { display: flex; flex-direction: column; gap: 10px; }
+.kerne-plan-option {
+  display: flex; justify-content: space-between; align-items: center; gap: 16px;
+  padding: 14px 16px; border: 1px solid var(--kerne-border); border-radius: var(--kerne-radius);
+}
+.kerne-plan-option[data-current="true"] { border-color: var(--kerne-fg); }
+.kerne-plan-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.kerne-plan-option-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
+.kerne-plan-option-price { font-size: 13px; color: var(--kerne-fg-muted); font-variant-numeric: tabular-nums; }
+.kerne-plan-option .kerne-button { width: auto; flex-shrink: 0; height: 36px; font-size: 13px; }
+
+/* Segmented control for billing interval. */
+.kerne-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--kerne-panel); border-radius: var(--kerne-radius); align-self: flex-start; }
+.kerne-segment {
+  font: inherit; font-size: 13px; border: none; background: none; cursor: pointer;
+  padding: 5px 12px; border-radius: calc(var(--kerne-radius) - 3px); color: var(--kerne-fg-muted);
+}
+.kerne-segment[aria-pressed="true"] { background: var(--kerne-surface-raised); color: var(--kerne-fg); font-weight: 500; }
+.kerne-segment:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+
+/* ---------- Masthead ---------- */
+.kerne-masthead {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  margin-bottom: 32px;
+}
+.kerne-logo { display: flex; align-items: center; justify-content: center; }
+.kerne-heading { display: flex; flex-direction: column; gap: 6px; }
+.kerne-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -.02em;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+.kerne-subtitle { margin: 0; font-size: 14px; color: var(--kerne-fg-muted); line-height: 1.5; }
+
+/* ---------- Stack ---------- */
+.kerne-stack { display: flex; flex-direction: column; gap: 16px; }
+.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; }
+
+.kerne-input {
+  font: inherit;
+  font-size: 14px;
+  height: var(--kerne-control-height);
+  color: var(--kerne-fg);
+  background: var(--kerne-field-bg);
+  border: 1px solid var(--kerne-border-strong);
+  border-radius: var(--kerne-radius);
+  padding: 0 13px;
+  width: 100%;
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.kerne-input::placeholder { color: var(--kerne-fg-subtle); }
+.kerne-input:hover:not(:disabled):not(:focus) { border-color: var(--kerne-fg-subtle); }
+.kerne-input:focus {
+  outline: none;
+  border-color: var(--kerne-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kerne-accent) 15%, transparent);
+}
+.kerne-input:disabled { opacity: .6; cursor: not-allowed; }
+.kerne-input[aria-invalid="true"] { border-color: var(--kerne-danger); }
+.kerne-input[data-kerne-code="true"] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: .3em;
+  text-transform: uppercase;
+}
+
+/* ---------- Buttons ---------- */
+.kerne-button {
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  height: var(--kerne-control-height);
+  border-radius: var(--kerne-radius);
+  padding: 0 16px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
+}
+.kerne-button:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+.kerne-button:disabled { opacity: .5; cursor: not-allowed; }
+.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 {
+  background: transparent;
+  color: var(--kerne-fg);
+  border-color: var(--kerne-border-strong);
+}
+.kerne-button-outline:hover:not(:disabled) { background: var(--kerne-panel); }
+
+/* Method switch - a quiet text control, not a second call to action competing
+   with the primary button above it. */
+.kerne-switch {
+  font: inherit;
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  background: none;
+  border: none;
+  padding: 4px 0;
+  cursor: pointer;
+  color: var(--kerne-fg-muted);
+  text-underline-offset: 4px;
+  transition: color .12s ease;
+}
+.kerne-switch:hover { color: var(--kerne-fg); text-decoration: underline; }
+.kerne-switch:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; border-radius: 4px; }
+
+.kerne-link {
+  font-size: inherit;
+  color: var(--kerne-accent);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+  text-underline-offset: 3px;
+}
+.kerne-link:hover { text-decoration: underline; }
+.kerne-link:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; border-radius: 2px; }
+
+/* ---------- Divider ---------- */
+.kerne-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--kerne-fg-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  padding: 2px 0;
+}
+.kerne-divider::before, .kerne-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--kerne-border);
+}
+
+/* ---------- Panels ---------- */
+.kerne-panel {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 12px 14px;
+  border-radius: var(--kerne-radius);
+  background: var(--kerne-panel);
+  color: var(--kerne-fg-muted);
+}
+.kerne-panel-danger { color: var(--kerne-danger); }
+.kerne-panel-success { color: var(--kerne-success); }
+.kerne-panel svg { flex-shrink: 0; margin-top: 1px; }
+.kerne-panel strong { color: var(--kerne-fg); font-weight: 500; }
+
+.kerne-oauth-group { display: flex; flex-direction: column; gap: 10px; }
+
+/* A closing line under a form, e.g. "Remembered it? Back to sign in". */
+.kerne-footer { font-size: 14px; color: var(--kerne-fg-muted); text-align: center; margin: 4px 0 0; }
+
+/* ---------- Footnotes ---------- */
+.kerne-legal {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--kerne-fg-subtle);
+  text-align: center;
+  margin: 32px 0 0;
+}
+.kerne-branding {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 24px;
+  font-size: 12px;
+  color: var(--kerne-fg-subtle);
+  text-decoration: none;
+}
+.kerne-branding:hover { color: var(--kerne-fg-muted); }
+
+/* Centred outcome screen for the flows that resolve on their own (magic-link
+   landing, email verification by link) - there is no form to show, only what
+   happened. */
+.kerne-status { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
+.kerne-status-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kerne-panel); }
+.kerne-status-icon[data-tone="danger"] { color: var(--kerne-danger); }
+.kerne-status-icon[data-tone="success"] { color: var(--kerne-success); }
+.kerne-status-icon[data-tone="muted"] { color: var(--kerne-fg-muted); }
+.kerne-status-text { font-size: 14px; color: var(--kerne-fg-muted); line-height: 1.5; margin: 0; max-width: 34ch; }
+
+.kerne-spinner {
+  width: 20px; height: 20px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: kerne-spin .6s linear infinite;
+}
+@keyframes kerne-spin { to { transform: rotate(360deg); } }
+
+.kerne-button-danger {
+  background: transparent;
+  color: var(--kerne-danger);
+  border-color: color-mix(in srgb, var(--kerne-danger) 40%, transparent);
+}
+.kerne-button-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--kerne-danger) 8%, transparent); }
+
+/* ---------- Usage meters ---------- */
+.kerne-meters { display: flex; flex-direction: column; gap: 18px; }
+.kerne-meter { display: flex; flex-direction: column; gap: 7px; }
+.kerne-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.kerne-meter-name { font-size: 14px; font-weight: 500; }
+.kerne-meter-value {
+  font-size: 13px;
+  color: var(--kerne-fg-muted);
+  /* 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-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); }
+.kerne-meter[data-level="warning"] .kerne-meter-value { color: var(--kerne-warning); }
+.kerne-meter[data-level="critical"] .kerne-meter-value { color: var(--kerne-danger); }
+.kerne-meter-note { font-size: 12px; color: var(--kerne-fg-subtle); margin: 0; }
+@media (prefers-reduced-motion: reduce) { .kerne-meter-fill { 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; }
+
+.kerne-rows { display: flex; flex-direction: column; gap: 10px; }
+.kerne-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
+.kerne-row dt { color: var(--kerne-fg-muted); margin: 0; }
+.kerne-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
+
+.kerne-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--kerne-panel);
+  color: var(--kerne-fg-muted);
+  white-space: nowrap;
+}
+.kerne-badge[data-tone="success"] { color: var(--kerne-success); }
+.kerne-badge[data-tone="warning"] { color: var(--kerne-warning); }
+.kerne-badge[data-tone="danger"] { color: var(--kerne-danger); }
+
+/* ---------- Identity ---------- */
+.kerne-avatar {
+  width: 32px; height: 32px; border-radius: 50%;
+  background: var(--kerne-panel); color: var(--kerne-fg-muted);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 600; letter-spacing: .02em; flex-shrink: 0;
+  object-fit: cover;
+}
+.kerne-identity { display: flex; align-items: center; gap: 12px; }
+.kerne-identity-text { display: flex; flex-direction: column; min-width: 0; }
+.kerne-identity-name { font-size: 14px; font-weight: 500; }
+.kerne-identity-mail { font-size: 13px; color: var(--kerne-fg-muted); overflow: hidden; text-overflow: ellipsis; }
+
+.kerne-menu-wrap { position: relative; display: inline-flex; }
+.kerne-menu-trigger {
+  background: none; border: none; padding: 0; cursor: pointer;
+  border-radius: 50%; display: inline-flex; font: inherit;
+}
+.kerne-menu-trigger:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+.kerne-menu {
+  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
+  min-width: 240px; padding: 8px;
+  display: flex; flex-direction: column; gap: 2px;
+  /* Needs an opaque ground of its own: it floats over host content. */
+  background: var(--kerne-surface);
+  border: 1px solid var(--kerne-border);
+  border-radius: var(--kerne-radius);
+  box-shadow: var(--kerne-shadow);
+}
+.kerne-menu-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--kerne-border); margin-bottom: 6px; }
+.kerne-menu-item {
+  font: inherit; font-size: 14px; text-align: left;
+  background: none; border: none; cursor: pointer;
+  padding: 8px 10px; border-radius: 6px; color: var(--kerne-fg);
+  display: block; width: 100%; text-decoration: none;
+}
+.kerne-menu-item:hover { background: var(--kerne-panel); }
+.kerne-menu-item:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: -2px; }
+.kerne-menu-item[data-tone="danger"] { color: var(--kerne-danger); }
+
+/* ---------- Loading ---------- */
+.kerne-skeleton {
+  background: var(--kerne-panel);
+  border-radius: var(--kerne-radius);
+  height: var(--kerne-control-height);
+  animation: kerne-pulse 1.6s ease-in-out infinite;
+}
+@keyframes kerne-pulse { 50% { opacity: .55; } }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-skeleton { animation: none; }
+  .kerne-spinner { animation-duration: 2s; }
+  .kerne-input, .kerne-button, .kerne-switch { transition: none; }
+}
+`;
+function ensureStylesInjected() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ELEMENT_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ELEMENT_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+}
+function parseColor(input) {
+  const value = input.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value);
+  if (hex) {
+    const digits = hex[1].length === 3 ? hex[1].split("").map((c) => c + c).join("") : hex[1];
+    return [
+      parseInt(digits.slice(0, 2), 16),
+      parseInt(digits.slice(2, 4), 16),
+      parseInt(digits.slice(4, 6), 16)
+    ];
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(value);
+  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+  return null;
+}
+function luminance([r, g, b]) {
+  const channel = (v) => {
+    const s = Math.min(Math.max(v, 0), 255) / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function toHex([r, g, b]) {
+  const pair = (v) => Math.round(Math.min(Math.max(v, 0), 255)).toString(16).padStart(2, "0");
+  return `#${pair(r)}${pair(g)}${pair(b)}`;
+}
+function mix(color, toward, amount) {
+  return color.map((c) => c + (toward - c) * amount);
+}
+var LABEL_CROSSOVER = 0.2;
+function appearanceToStyle(appearance) {
+  if (!appearance) return {};
+  const vars = {};
+  if (appearance.primaryColor) {
+    vars["--kerne-primary"] = appearance.primaryColor;
+    vars["--kerne-accent"] = appearance.accentColor ?? appearance.primaryColor;
+    const rgb = parseColor(appearance.primaryColor);
+    if (rgb) {
+      const light = luminance(rgb) > LABEL_CROSSOVER;
+      vars["--kerne-primary-fg"] = appearance.primaryTextColor ?? (light ? "#16171a" : "#ffffff");
+      vars["--kerne-primary-hover"] = toHex(mix(rgb, light ? 0 : 255, 0.14));
+    } else if (appearance.primaryTextColor) {
+      vars["--kerne-primary-fg"] = appearance.primaryTextColor;
+    }
+  } else {
+    if (appearance.accentColor) vars["--kerne-accent"] = appearance.accentColor;
+    if (appearance.primaryTextColor) vars["--kerne-primary-fg"] = appearance.primaryTextColor;
+  }
+  if (appearance.textColor) vars["--kerne-fg"] = appearance.textColor;
+  if (appearance.borderColor) vars["--kerne-border-strong"] = appearance.borderColor;
+  if (appearance.panelColor) vars["--kerne-panel"] = appearance.panelColor;
+  if (appearance.background) vars["--kerne-bg"] = appearance.background;
+  if (appearance.surfaceColor) {
+    vars["--kerne-surface"] = appearance.surfaceColor;
+    vars["--kerne-surface-raised"] = appearance.surfaceColor;
+  }
+  if (appearance.fontFamily) vars["--kerne-font"] = appearance.fontFamily;
+  if (appearance.radius) vars["--kerne-radius"] = appearance.radius;
+  if (appearance.controlHeight) vars["--kerne-control-height"] = appearance.controlHeight;
+  return vars;
+}
+function resolveTheme(appearance) {
+  return appearance?.theme ?? "light";
+}
+
+// src/ui/primitives.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InsideShell = createContext(false);
+function Shell({
+  appearance,
+  className,
+  size = "auth",
+  children
+}) {
+  ensureStylesInjected();
+  const nested = useContext(InsideShell);
+  if (nested) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsx(InsideShell.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `kerne-root${className ? ` ${className}` : ""}`,
+      style: appearanceToStyle(appearance),
+      "data-kerne-theme": resolveTheme(appearance),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "kerne-shell",
+          "data-kerne-size": size === "wide" ? "wide" : void 0,
+          "data-kerne-surface": appearance?.surface === "card" ? "card" : void 0,
+          children
+        }
+      )
+    }
+  ) });
+}
+function Subsection({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "kerne-subsection", children: [
+    /* @__PURE__ */ jsxs("div", { className: "kerne-subsection-head", children: [
+      /* @__PURE__ */ jsx("h3", { className: "kerne-subsection-title", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "kerne-subsection-desc", children: description }) : null
+    ] }),
+    children
+  ] });
+}
+function Masthead({
+  logo,
+  title,
+  subtitle
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-masthead", children: [
+    logo ? /* @__PURE__ */ jsx("div", { className: "kerne-logo", children: logo }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "kerne-heading", children: [
+      /* @__PURE__ */ jsx("h1", { className: "kerne-title", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("p", { className: "kerne-subtitle", children: subtitle }) : null
+    ] })
+  ] });
+}
+function Field({
+  label,
+  type,
+  value,
+  onChange,
+  autoComplete,
+  placeholder,
+  disabled,
+  required,
+  invalid,
+  action,
+  code,
+  autoFocus
+}) {
+  const id = useId();
+  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
+      }
+    )
+  ] });
+}
+function Button({
+  children,
+  variant = "primary",
+  disabled,
+  type = "submit",
+  onClick,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      className: `kerne-button kerne-button-${variant}`,
+      disabled,
+      onClick,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+function MethodSwitch({
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "kerne-switch", onClick, children });
+}
+function AlertIcon() {
+  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("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function MailIcon() {
+  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("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "m2 7 10 6 10-6", strokeLinecap: "round", strokeLinejoin: "round" })
+      ]
+    }
+  );
+}
+function Panel({
+  children,
+  variant = "info"
+}) {
+  const danger = variant === "danger";
+  const icon = danger ? /* @__PURE__ */ jsx(AlertIcon, {}) : variant === "success" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(MailIcon, {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `kerne-panel${danger ? " kerne-panel-danger" : ""}${variant === "success" ? " kerne-panel-success" : ""}`,
+      ...danger ? { role: "alert" } : {},
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function Status({
+  tone,
+  title,
+  children,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-status", ...tone === "danger" ? { role: "alert" } : {}, children: [
+    /* @__PURE__ */ jsx("div", { className: "kerne-status-icon", "data-tone": tone === "loading" ? "muted" : tone, children: tone === "loading" ? /* @__PURE__ */ jsx("span", { className: "kerne-spinner", "aria-hidden": "true" }) : tone === "success" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(AlertIcon, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: "kerne-heading", children: [
+      /* @__PURE__ */ jsx("h1", { className: "kerne-title", children: title }),
+      children ? /* @__PURE__ */ jsx("p", { className: "kerne-status-text", children }) : null
+    ] }),
+    action
+  ] });
+}
+function Divider({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "kerne-divider", children: label });
+}
+function TextLink({
+  href,
+  onClick,
+  children
+}) {
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: "kerne-link", onClick, children });
+  }
+  return /* @__PURE__ */ jsx("a", { className: "kerne-link", href: href ?? "#", children });
+}
+var OAUTH_LABELS = {
+  google: "Google",
+  github: "GitHub",
+  microsoft: "Microsoft",
+  apple: "Apple",
+  gitlab: "GitLab",
+  discord: "Discord"
+};
+function OAuthIcon({ provider }) {
+  const common = { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true };
+  switch (provider) {
+    case "google":
+      return /* @__PURE__ */ jsxs("svg", { ...common, children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#4285F4",
+            d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#34A853",
+            d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#FBBC05",
+            d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#EA4335",
+            d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+          }
+        )
+      ] });
+    case "github":
+      return /* @__PURE__ */ jsx("svg", { ...common, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.26.8-.57v-2c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .31.2.68.81.57A12 12 0 0 0 12 .3z" }) });
+    case "apple":
+      return /* @__PURE__ */ jsx("svg", { ...common, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.05 12.75c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.09-2.01-3.76-2.04-1.6-.16-3.12.94-3.93.94-.81 0-2.06-.92-3.39-.9-1.74.03-3.35 1.01-4.25 2.57-1.81 3.14-.46 7.79 1.3 10.34.86 1.25 1.89 2.65 3.24 2.6 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.38.81 1.4-.02 2.28-1.27 3.13-2.53.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.72-1.04-2.75-4.13zM14.5 4.9c.71-.87 1.19-2.07 1.06-3.27-1.02.04-2.26.68-3 1.55-.66.76-1.24 1.98-1.09 3.15 1.14.09 2.31-.58 3.03-1.43z" }) });
+    default:
+      return null;
+  }
+}
+function OAuthButtons({
+  providers,
+  disabled,
+  onSelect
+}) {
+  const l10n = useLocalization();
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "kerne-oauth-group", children: providers.map((provider) => {
+    const label = fill(l10n.common.continueWith, {
+      provider: OAUTH_LABELS[provider] ?? provider
+    });
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "kerne-button kerne-button-outline",
+        disabled,
+        onClick: () => onSelect?.(provider),
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ jsx(OAuthIcon, { provider }),
+          label
+        ]
+      },
+      provider
+    );
+  }) });
+}
+function KerneBranding({ show }) {
+  const l10n = useLocalization();
+  if (!show) return null;
+  return /* @__PURE__ */ jsx("a", { className: "kerne-branding", href: "https://kerne.io", target: "_blank", rel: "noopener noreferrer", children: l10n.common.securedByKerne });
+}
+function FormSkeleton() {
+  const l10n = useLocalization();
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-form", "aria-busy": "true", "aria-label": l10n.common.loading, children: [
+    /* @__PURE__ */ jsx("div", { className: "kerne-skeleton" }),
+    /* @__PURE__ */ jsx("div", { className: "kerne-skeleton" })
+  ] });
+}
+
+// src/ui/LoginForm.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LoginForm({
+  onSuccess,
+  redirectUrl,
+  magicLinkCallbackUrl,
+  signUpUrl,
+  onSignUpClick,
+  forgotPasswordUrl,
+  onForgotPasswordClick,
+  onOAuthSelect,
+  title,
+  subtitle,
+  legal,
+  appearance,
+  logo,
+  className
+}) {
+  const client = useClient();
+  const { login, startPasswordless } = useAuth();
+  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 shell = (children) => /* @__PURE__ */ jsx2(Shell, { appearance, className, children });
+  const hasOAuth = (config?.oauth_providers.length ?? 0) > 0;
+  const hasCredentials = config?.enable_credentials ?? false;
+  const hasMagicLink = config?.enable_magic_link ?? false;
+  const hasEmailMethod = hasCredentials || hasMagicLink;
+  const usePassword = passwordMode || !hasMagicLink && hasCredentials;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      if (usePassword) {
+        await login({ email, password });
+        if (redirectUrl) {
+          await client.redirectWithSession(redirectUrl);
+        } else {
+          onSuccess?.();
+        }
+      } else {
+        await startPasswordless(email, magicLinkCallbackUrl);
+        setLinkSentTo(email);
+      }
+    } catch (err) {
+      setError(showError(err));
+      setSubmitting(false);
+    }
+  };
+  const appName = config?.app_name;
+  const heading = title ?? l10n.signIn.title;
+  if (configLoading) {
+    return shell(
+      /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx2(FormSkeleton, {})
+      ] })
+    );
+  }
+  if (configError || !config) {
+    return shell(
+      /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx2(Panel, { variant: "danger", children: l10n.signIn.loadFailed })
+      ] })
+    );
+  }
+  if (!hasEmailMethod && !hasOAuth) {
+    return shell(
+      /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx2(Panel, { variant: "danger", children: l10n.signIn.unavailable })
+      ] })
+    );
+  }
+  const canSignUp = config.registration_mode !== "CLOSED";
+  const signUpLine = canSignUp && (signUpUrl || onSignUpClick) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    l10n.signIn.signUpPrompt,
+    " ",
+    /* @__PURE__ */ jsx2(TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? fill(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;
+  return shell(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Masthead, { logo, title: heading, subtitle: subtitle ?? signUpLine }),
+      /* @__PURE__ */ jsxs2("div", { className: "kerne-stack", children: [
+        error ? /* @__PURE__ */ jsx2(Panel, { variant: "danger", children: error }) : null,
+        linkSentTo ? /* @__PURE__ */ jsx2(Panel, { children: fillNode(l10n.signIn.linkSent, { email: /* @__PURE__ */ jsx2("strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ jsxs2("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx2(
+            Field,
+            {
+              label: l10n.common.email,
+              type: "email",
+              value: email,
+              onChange: setEmail,
+              autoComplete: "email",
+              placeholder: l10n.common.emailPlaceholder,
+              disabled: submitting,
+              required: true,
+              autoFocus: true
+            }
+          ),
+          usePassword ? /* @__PURE__ */ jsx2(
+            Field,
+            {
+              label: l10n.common.password,
+              type: "password",
+              value: password,
+              onChange: setPassword,
+              autoComplete: "current-password",
+              placeholder: l10n.common.passwordPlaceholder,
+              disabled: submitting,
+              required: true,
+              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 }),
+          hasCredentials && hasMagicLink ? /* @__PURE__ */ jsx2(
+            MethodSwitch,
+            {
+              onClick: () => {
+                setPasswordMode((v) => !v);
+                setError(null);
+              },
+              children: usePassword ? l10n.signIn.useMagicLink : l10n.signIn.usePassword
+            }
+          ) : null
+        ] }) : null,
+        hasOAuth && hasEmailMethod ? /* @__PURE__ */ jsx2(Divider, { label: l10n.common.or }) : null,
+        /* @__PURE__ */ jsx2(
+          OAuthButtons,
+          {
+            providers: config.oauth_providers,
+            disabled: submitting,
+            onSelect: onOAuthSelect
+          }
+        )
+      ] }),
+      legal ? /* @__PURE__ */ jsx2("p", { className: "kerne-legal", children: legal }) : null,
+      /* @__PURE__ */ jsx2(KerneBranding, { show: config.show_kerne_branding })
+    ] })
+  );
+}
+
+// src/ui/RegisterForm.tsx
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function RegisterForm({
+  onSuccess,
+  redirectUrl,
+  magicLinkCallbackUrl,
+  invitationToken: invitationTokenProp,
+  signInUrl,
+  onSignInClick,
+  onOAuthSelect,
+  title,
+  subtitle,
+  legal,
+  collectName = true,
+  appearance,
+  logo,
+  className
+}) {
+  const client = useClient();
+  const { register, startPasswordless } = useAuth();
+  const { config, isLoading: configLoading, error: configError } = useAuthConfig();
+  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 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);
+  const signInLine = signInUrl || onSignInClick ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    l10n.signUp.signInPrompt,
+    " ",
+    /* @__PURE__ */ jsx3(TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.signUp.signInLink }),
+    "."
+  ] }) : void 0;
+  if (configLoading) {
+    return shell(
+      /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx3(FormSkeleton, {})
+      ] })
+    );
+  }
+  if (configError || !config) {
+    return shell(
+      /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx3(Panel, { variant: "danger", children: l10n.signUp.loadFailed })
+      ] })
+    );
+  }
+  if (config.registration_mode === "CLOSED") {
+    return shell(
+      /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Masthead, { logo, title: l10n.signUp.closedTitle, subtitle: signInLine }),
+        /* @__PURE__ */ jsx3(Panel, { children: fill(l10n.signUp.closedBody, { app: appName ?? l10n.common.thisApp }) }),
+        /* @__PURE__ */ jsx3(KerneBranding, { show: config.show_kerne_branding })
+      ] })
+    );
+  }
+  const hasOAuth = config.oauth_providers.length > 0;
+  const hasCredentials = config.enable_credentials;
+  const hasMagicLink = config.enable_magic_link;
+  const hasEmailMethod = hasCredentials || hasMagicLink;
+  const usePassword = passwordMode || !hasMagicLink && hasCredentials;
+  const needsCode = config.registration_mode === "INVITE_ONLY" && !invitationToken;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      if (usePassword) {
+        await register({
+          email,
+          password,
+          name: collectName && name ? name : void 0,
+          invitationToken,
+          invitationCode: invitationCode || void 0
+        });
+        if (redirectUrl) {
+          await client.redirectWithSession(redirectUrl);
+        } else {
+          onSuccess?.();
+        }
+      } else {
+        await startPasswordless(email, magicLinkCallbackUrl, {
+          invitationToken,
+          invitationCode: invitationCode || void 0
+        });
+        setLinkSentTo(email);
+      }
+    } catch (err) {
+      setError(showError(err));
+      setSubmitting(false);
+    }
+  };
+  if (!hasEmailMethod && !hasOAuth) {
+    return shell(
+      /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Masthead, { logo, title: heading }),
+        /* @__PURE__ */ jsx3(Panel, { variant: "danger", children: l10n.signUp.unavailable })
+      ] })
+    );
+  }
+  const submitLabel = submitting ? usePassword ? l10n.signUp.submitting : l10n.signUp.magicSubmitting : usePassword ? l10n.signUp.submit : l10n.signUp.magicSubmit;
+  return shell(
+    /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(
+        Masthead,
+        {
+          logo,
+          title: heading,
+          subtitle: subtitle ?? (needsCode ? l10n.signUp.invitationNeeded : signInLine)
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "kerne-stack", children: [
+        error ? /* @__PURE__ */ jsx3(Panel, { variant: "danger", children: error }) : null,
+        linkSentTo ? /* @__PURE__ */ jsx3(Panel, { children: fillNode(l10n.signUp.linkSent, { email: /* @__PURE__ */ jsx3("strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ jsxs3("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+          needsCode ? /* @__PURE__ */ jsx3(
+            Field,
+            {
+              label: l10n.signUp.invitationCode,
+              type: "text",
+              value: invitationCode,
+              onChange: setInvitationCode,
+              placeholder: "XXXXXX",
+              autoComplete: "one-time-code",
+              disabled: submitting,
+              required: true,
+              code: true,
+              autoFocus: true
+            }
+          ) : null,
+          collectName && usePassword ? /* @__PURE__ */ jsx3(
+            Field,
+            {
+              label: l10n.common.name,
+              type: "text",
+              value: name,
+              onChange: setName,
+              autoComplete: "name",
+              placeholder: l10n.common.namePlaceholder,
+              disabled: submitting
+            }
+          ) : null,
+          /* @__PURE__ */ jsx3(
+            Field,
+            {
+              label: l10n.common.email,
+              type: "email",
+              value: email,
+              onChange: setEmail,
+              autoComplete: "email",
+              placeholder: l10n.common.emailPlaceholder,
+              disabled: submitting,
+              required: true,
+              autoFocus: !needsCode
+            }
+          ),
+          usePassword ? /* @__PURE__ */ jsx3(
+            Field,
+            {
+              label: l10n.common.password,
+              type: "password",
+              value: password,
+              onChange: setPassword,
+              autoComplete: "new-password",
+              placeholder: l10n.common.passwordPlaceholder,
+              disabled: submitting,
+              required: true
+            }
+          ) : null,
+          /* @__PURE__ */ jsx3(
+            Button,
+            {
+              disabled: submitting || !email || needsCode && !invitationCode || usePassword && !password,
+              children: submitLabel
+            }
+          ),
+          hasCredentials && hasMagicLink ? /* @__PURE__ */ jsx3(
+            MethodSwitch,
+            {
+              onClick: () => {
+                setPasswordMode((v) => !v);
+                setError(null);
+              },
+              children: usePassword ? l10n.signUp.useMagicLink : l10n.signUp.usePassword
+            }
+          ) : null
+        ] }) : null,
+        hasOAuth && hasEmailMethod ? /* @__PURE__ */ jsx3(Divider, { label: l10n.common.or }) : null,
+        /* @__PURE__ */ jsx3(
+          OAuthButtons,
+          {
+            providers: config.oauth_providers,
+            disabled: submitting,
+            onSelect: onOAuthSelect
+          }
+        )
+      ] }),
+      legal ? /* @__PURE__ */ jsx3("p", { className: "kerne-legal", children: legal }) : null,
+      /* @__PURE__ */ jsx3(KerneBranding, { show: config.show_kerne_branding })
+    ] })
+  );
+}
+
+// src/ui/ForgotPasswordForm.tsx
+import { useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ForgotPasswordForm({
+  callbackUrl,
+  signInUrl,
+  onSignInClick,
+  onSent,
+  title,
+  subtitle,
+  appearance,
+  logo,
+  className
+}) {
+  const { requestPasswordReset } = useAuth();
+  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 handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await requestPasswordReset(email, callbackUrl);
+      setSentTo(email);
+      onSent?.(email);
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const backLine = signInUrl || onSignInClick ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    l10n.resetPassword.rememberedPrompt,
+    " ",
+    /* @__PURE__ */ jsx4(TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }),
+    "."
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs4(Shell, { appearance, className, children: [
+    /* @__PURE__ */ jsx4(
+      Masthead,
+      {
+        logo,
+        title: title ?? l10n.resetPassword.requestTitle,
+        subtitle: subtitle ?? (sentTo ? backLine : l10n.resetPassword.requestSubtitle)
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx4(Panel, { variant: "danger", children: error }) : null,
+      sentTo ? /* @__PURE__ */ jsx4(Panel, { children: fillNode(l10n.resetPassword.requestSent, { email: /* @__PURE__ */ jsx4("strong", { children: sentTo }) }) }) : /* @__PURE__ */ jsxs4("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx4(
+          Field,
+          {
+            label: l10n.common.email,
+            type: "email",
+            value: email,
+            onChange: setEmail,
+            autoComplete: "email",
+            placeholder: l10n.common.emailPlaceholder,
+            disabled: submitting,
+            required: true,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx4(Button, { disabled: submitting || !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
+        backLine ? /* @__PURE__ */ jsx4("p", { className: "kerne-footer", children: backLine }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/ResetPasswordForm.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ResetPasswordForm({
+  token: tokenProp,
+  signInUrl,
+  onSignInClick,
+  onSuccess,
+  title,
+  subtitle,
+  appearance,
+  logo,
+  className
+}) {
+  const { confirmPasswordReset } = useAuth();
+  const { config } = useAuthConfig();
+  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 heading = title ?? l10n.resetPassword.title;
+  const mismatch = confirm.length > 0 && password !== confirm;
+  const signInAction = signInUrl || onSignInClick ? /* @__PURE__ */ jsx5(
+    Button,
+    {
+      type: "button",
+      onClick: onSignInClick ?? (() => {
+        if (signInUrl) window.location.href = signInUrl;
+      }),
+      children: l10n.signIn.submit
+    }
+  ) : void 0;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (mismatch || !token) return;
+    setError(null);
+    setSubmitting(true);
+    try {
+      await confirmPasswordReset(token, password);
+      setDone(true);
+      onSuccess?.();
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (token === null) {
+    return /* @__PURE__ */ jsxs5(Shell, { appearance, className, children: [
+      /* @__PURE__ */ jsx5(Masthead, { logo, title: heading }),
+      /* @__PURE__ */ jsx5(FormSkeleton, {})
+    ] });
+  }
+  if (token === "") {
+    return /* @__PURE__ */ jsxs5(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx5("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx5(Status, { tone: "danger", title: l10n.resetPassword.incompleteTitle, action: signInAction, children: l10n.resetPassword.incompleteBody }),
+      /* @__PURE__ */ jsx5(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    ] });
+  }
+  if (done) {
+    return /* @__PURE__ */ jsxs5(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx5("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx5(Status, { tone: "success", title: l10n.resetPassword.doneTitle, action: signInAction, children: l10n.resetPassword.doneBody }),
+      /* @__PURE__ */ jsx5(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(Shell, { appearance, className, children: [
+    /* @__PURE__ */ jsx5(Masthead, { logo, title: heading, subtitle: subtitle ?? l10n.resetPassword.subtitle }),
+    /* @__PURE__ */ jsxs5("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx5(Panel, { variant: "danger", children: error }) : null,
+      /* @__PURE__ */ jsxs5("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx5(
+          Field,
+          {
+            label: l10n.resetPassword.newPassword,
+            type: "password",
+            value: password,
+            onChange: setPassword,
+            autoComplete: "new-password",
+            placeholder: l10n.common.passwordPlaceholder,
+            disabled: submitting,
+            required: true,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Field,
+          {
+            label: l10n.resetPassword.confirmPassword,
+            type: "password",
+            value: confirm,
+            onChange: setConfirm,
+            autoComplete: "new-password",
+            placeholder: l10n.common.passwordPlaceholder,
+            disabled: submitting,
+            required: true,
+            invalid: mismatch
+          }
+        ),
+        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
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/MagicLinkCallback.tsx
+import { useEffect as useEffect2, useRef, useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function MagicLinkCallback({
+  token: tokenProp,
+  onSuccess,
+  redirectUrl,
+  signInUrl,
+  onSignInClick,
+  appearance,
+  logo,
+  className
+}) {
+  const client = useClient();
+  const { loginWithMagicLink } = useAuth();
+  const { config } = useAuthConfig();
+  const token = useUrlToken("token", tokenProp);
+  const l10n = useLocalization();
+  const showError = useErrorResolver();
+  const [state, setState] = useState6("pending");
+  const [message, setMessage] = useState6(null);
+  const consumed = useRef(false);
+  useEffect2(() => {
+    if (token === null || consumed.current) return;
+    if (token === "") {
+      setState("failed");
+      return;
+    }
+    consumed.current = true;
+    loginWithMagicLink(token).then(async () => {
+      setState("done");
+      if (redirectUrl) {
+        await client.redirectWithSession(redirectUrl);
+      } else {
+        onSuccess?.();
+      }
+    }).catch((e) => {
+      setState("failed");
+      setMessage(showError(e));
+    });
+  }, [token, loginWithMagicLink, redirectUrl, client, onSuccess]);
+  const retry = signInUrl || onSignInClick ? /* @__PURE__ */ jsx6(
+    Button,
+    {
+      variant: "outline",
+      type: "button",
+      onClick: onSignInClick ?? (() => {
+        if (signInUrl) window.location.href = signInUrl;
+      }),
+      children: l10n.common.backToSignIn
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsxs6(Shell, { appearance, className, children: [
+    logo ? /* @__PURE__ */ jsx6("div", { className: "kerne-masthead", children: logo }) : null,
+    state === "pending" ? /* @__PURE__ */ jsx6(Status, { tone: "loading", title: l10n.magicLink.pendingTitle, children: l10n.magicLink.pendingBody }) : state === "done" ? /* @__PURE__ */ jsx6(Status, { tone: "success", title: l10n.magicLink.doneTitle, children: l10n.magicLink.doneBody }) : /* @__PURE__ */ jsx6(Status, { tone: "danger", title: l10n.magicLink.failedTitle, action: retry, children: message ?? l10n.magicLink.missingToken }),
+    /* @__PURE__ */ jsx6(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/VerifyEmailForm.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState7 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function VerifyEmailForm({
+  token: tokenProp,
+  callbackUrl,
+  onVerified,
+  title,
+  subtitle,
+  appearance,
+  logo,
+  className
+}) {
+  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = useAuth();
+  const { config } = useAuthConfig();
+  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 consumed = useRef2(false);
+  const heading = title ?? l10n.verifyEmail.title;
+  const settle = async (needsTokenRefresh) => {
+    if (needsTokenRefresh) {
+      await refreshToken().catch(() => void 0);
+    }
+    setVerified(true);
+    onVerified?.();
+  };
+  useEffect3(() => {
+    if (token === null || token === "" || consumed.current) return;
+    consumed.current = true;
+    setLinkState("pending");
+    verifyEmailWithLink(token).then(async (r) => {
+      await settle(r.needsTokenRefresh);
+      setLinkState("done");
+    }).catch((e) => {
+      setLinkState("failed");
+      setError(showError(e));
+    });
+  }, [token, verifyEmailWithLink]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const r = await verifyEmailWithCode(code);
+      await settle(r.needsTokenRefresh);
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleResend = async () => {
+    setError(null);
+    try {
+      await sendVerificationEmail("code", callbackUrl);
+      setResent(true);
+    } catch (err) {
+      setError(showError(err));
+    }
+  };
+  if (verified) {
+    return /* @__PURE__ */ jsxs7(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx7("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx7(Status, { tone: "success", title: l10n.verifyEmail.doneTitle, children: l10n.verifyEmail.doneBody }),
+      /* @__PURE__ */ jsx7(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    ] });
+  }
+  if (linkState === "pending") {
+    return /* @__PURE__ */ jsxs7(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx7("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx7(Status, { tone: "loading", title: l10n.verifyEmail.verifyingTitle, children: l10n.verifyEmail.verifyingBody })
+    ] });
+  }
+  if (linkState === "failed") {
+    return /* @__PURE__ */ jsxs7(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx7("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx7(
+        Status,
+        {
+          tone: "danger",
+          title: l10n.verifyEmail.failedTitle,
+          action: /* @__PURE__ */ jsx7(Button, { variant: "outline", type: "button", onClick: handleResend, children: l10n.verifyEmail.newCode }),
+          children: error
+        }
+      ),
+      resent ? /* @__PURE__ */ jsx7(Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
+      /* @__PURE__ */ jsx7(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Shell, { appearance, className, children: [
+    /* @__PURE__ */ jsx7(Masthead, { logo, title: heading, subtitle: subtitle ?? l10n.verifyEmail.subtitle }),
+    /* @__PURE__ */ jsxs7("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx7(Panel, { variant: "danger", children: error }) : null,
+      resent ? /* @__PURE__ */ jsx7(Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
+      /* @__PURE__ */ jsxs7("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx7(
+          Field,
+          {
+            label: l10n.verifyEmail.code,
+            type: "text",
+            value: code,
+            onChange: setCode,
+            autoComplete: "one-time-code",
+            placeholder: "000000",
+            disabled: submitting,
+            required: true,
+            code: true,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx7(Button, { disabled: submitting || !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
+        /* @__PURE__ */ jsx7(MethodSwitch, { onClick: handleResend, children: l10n.verifyEmail.resend })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/ActivateAccountForm.tsx
+import { useEffect as useEffect4, useState as useState8 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ActivateAccountForm({
+  token: tokenProp,
+  onSuccess,
+  redirectUrl,
+  signInUrl,
+  onSignInClick,
+  title,
+  appearance,
+  logo,
+  className
+}) {
+  const client = useClient();
+  const { getActivationContext, completeActivation } = useAuth();
+  const { config } = useAuthConfig();
+  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 heading = title ?? l10n.activate.title;
+  const mismatch = confirm.length > 0 && password !== confirm;
+  useEffect4(() => {
+    if (!token) return;
+    let mounted = true;
+    getActivationContext(token).then((c) => mounted && setContext(c)).catch((e) => mounted && setLoadError(showError(e)));
+    return () => {
+      mounted = false;
+    };
+  }, [token, getActivationContext]);
+  const signInAction = signInUrl || onSignInClick ? /* @__PURE__ */ jsx8(
+    Button,
+    {
+      type: "button",
+      onClick: onSignInClick ?? (() => {
+        if (signInUrl) window.location.href = signInUrl;
+      }),
+      children: l10n.activate.goToSignIn
+    }
+  ) : void 0;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!token || mismatch) return;
+    setError(null);
+    setSubmitting(true);
+    try {
+      await completeActivation(token, context?.mode === "credentials" ? password : void 0);
+      if (redirectUrl) {
+        await client.redirectWithSession(redirectUrl);
+      } else {
+        onSuccess?.();
+      }
+    } catch (err) {
+      setError(showError(err));
+      setSubmitting(false);
+    }
+  };
+  if (token === null) {
+    return /* @__PURE__ */ jsxs8(Shell, { appearance, className, children: [
+      /* @__PURE__ */ jsx8(Masthead, { logo, title: heading }),
+      /* @__PURE__ */ jsx8(FormSkeleton, {})
+    ] });
+  }
+  if (token === "" || loadError) {
+    return /* @__PURE__ */ jsxs8(Shell, { appearance, className, children: [
+      logo ? /* @__PURE__ */ jsx8("div", { className: "kerne-masthead", children: logo }) : null,
+      /* @__PURE__ */ jsx8(Status, { tone: "danger", title: l10n.activate.failedTitle, action: signInAction, children: loadError ?? l10n.activate.missingToken }),
+      /* @__PURE__ */ jsx8(KerneBranding, { show: config?.show_kerne_branding ?? false })
+    ] });
+  }
+  if (!context) {
+    return /* @__PURE__ */ jsxs8(Shell, { appearance, className, children: [
+      /* @__PURE__ */ jsx8(Masthead, { logo, title: heading }),
+      /* @__PURE__ */ jsx8(FormSkeleton, {})
+    ] });
+  }
+  const credentialsMode = context.mode === "credentials";
+  return /* @__PURE__ */ jsxs8(Shell, { appearance, className, children: [
+    /* @__PURE__ */ jsx8(
+      Masthead,
+      {
+        logo,
+        title: heading,
+        subtitle: fillNode(
+          credentialsMode ? l10n.activate.credentialsSubtitle : l10n.activate.magicSubtitle,
+          { email: /* @__PURE__ */ jsx8("strong", { children: context.email }) }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx8(Panel, { variant: "danger", children: error }) : null,
+      /* @__PURE__ */ jsxs8("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        credentialsMode ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(
+            Field,
+            {
+              label: l10n.common.password,
+              type: "password",
+              value: password,
+              onChange: setPassword,
+              autoComplete: "new-password",
+              placeholder: l10n.common.passwordPlaceholder,
+              disabled: submitting,
+              required: true,
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Field,
+            {
+              label: l10n.activate.confirmPassword,
+              type: "password",
+              value: confirm,
+              onChange: setConfirm,
+              autoComplete: "new-password",
+              placeholder: l10n.common.passwordPlaceholder,
+              disabled: submitting,
+              required: true,
+              invalid: mismatch
+            }
+          ),
+          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(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/AuthFlow.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TOKEN_STEPS = ["reset-password", "magic-link", "activate", "verify-email"];
+function AuthFlow({
+  initialStep,
+  step: controlledStep,
+  onStepChange,
+  onSuccess,
+  redirectUrl,
+  magicLinkCallbackUrl,
+  resetPasswordCallbackUrl,
+  verificationCallbackUrl,
+  allowSignUp = true,
+  legal,
+  appearance,
+  logo,
+  className
+}) {
+  const { config } = useAuthConfig();
+  const token = useUrlToken("token");
+  const [internalStep, setInternalStep] = useState9(null);
+  const go = (next) => {
+    if (controlledStep === void 0) setInternalStep(next);
+    onStepChange?.(next);
+  };
+  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 };
+  switch (step) {
+    case "sign-up":
+      return /* @__PURE__ */ jsx9(
+        RegisterForm,
+        {
+          ...shared,
+          onSuccess,
+          redirectUrl,
+          magicLinkCallbackUrl,
+          onSignInClick: () => go("sign-in"),
+          legal
+        }
+      );
+    case "forgot-password":
+      return /* @__PURE__ */ jsx9(
+        ForgotPasswordForm,
+        {
+          ...shared,
+          callbackUrl: resetPasswordCallbackUrl,
+          onSignInClick: () => go("sign-in")
+        }
+      );
+    case "reset-password":
+      return /* @__PURE__ */ jsx9(ResetPasswordForm, { ...shared, onSignInClick: () => go("sign-in"), onSuccess });
+    case "magic-link":
+      return /* @__PURE__ */ jsx9(
+        MagicLinkCallback,
+        {
+          ...shared,
+          onSuccess,
+          redirectUrl,
+          onSignInClick: () => go("sign-in")
+        }
+      );
+    case "verify-email":
+      return /* @__PURE__ */ jsx9(VerifyEmailForm, { ...shared, callbackUrl: verificationCallbackUrl, onVerified: onSuccess });
+    case "activate":
+      return /* @__PURE__ */ jsx9(
+        ActivateAccountForm,
+        {
+          ...shared,
+          onSuccess,
+          redirectUrl,
+          onSignInClick: () => go("sign-in")
+        }
+      );
+    case "sign-in":
+    default:
+      return /* @__PURE__ */ jsx9(
+        LoginForm,
+        {
+          ...shared,
+          onSuccess,
+          redirectUrl,
+          magicLinkCallbackUrl,
+          onSignUpClick: canSignUp ? () => go("sign-up") : void 0,
+          onForgotPasswordClick: () => go("forgot-password"),
+          legal
+        }
+      );
+  }
+}
+
+// src/ui/ChangePasswordForm.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function ChangePasswordForm({
+  onSuccess,
+  title,
+  appearance,
+  className
+}) {
+  const { updatePassword } = useAuth();
+  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 mismatch = confirm.length > 0 && newPassword !== confirm;
+  const unchanged = newPassword.length > 0 && newPassword === currentPassword;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (mismatch || unchanged) return;
+    setError(null);
+    setDone(false);
+    setSubmitting(true);
+    try {
+      await updatePassword({ currentPassword, newPassword });
+      setDone(true);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirm("");
+      onSuccess?.();
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs9(Shell, { appearance, className, children: [
+    heading ? /* @__PURE__ */ jsx10("div", { className: "kerne-heading", style: { marginBottom: 20 }, children: /* @__PURE__ */ jsx10("h1", { className: "kerne-title", children: heading }) }) : null,
+    /* @__PURE__ */ jsxs9("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx10(Panel, { variant: "danger", children: error }) : null,
+      done ? /* @__PURE__ */ jsx10(Panel, { variant: "success", children: l10n.security.changed }) : null,
+      /* @__PURE__ */ jsxs9("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx10(
+          Field,
+          {
+            label: l10n.security.currentPassword,
+            type: "password",
+            value: currentPassword,
+            onChange: setCurrentPassword,
+            autoComplete: "current-password",
+            placeholder: l10n.common.passwordPlaceholder,
+            disabled: submitting,
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          Field,
+          {
+            label: l10n.security.newPassword,
+            type: "password",
+            value: newPassword,
+            onChange: setNewPassword,
+            autoComplete: "new-password",
+            placeholder: l10n.common.passwordPlaceholder,
+            disabled: submitting,
+            required: true,
+            invalid: unchanged
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          Field,
+          {
+            label: l10n.security.confirmPassword,
+            type: "password",
+            value: confirm,
+            onChange: setConfirm,
+            autoComplete: "new-password",
+            placeholder: l10n.common.passwordPlaceholder,
+            disabled: submitting,
+            required: true,
+            invalid: mismatch
+          }
+        ),
+        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,
+            children: submitting ? l10n.security.submitting : l10n.security.submit
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/WaitlistForm.tsx
+import { useState as useState11 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function WaitlistForm({
+  title,
+  subtitle,
+  collectName = false,
+  metadata,
+  submitLabel,
+  successMessage,
+  onJoined,
+  legal,
+  appearance,
+  logo,
+  className
+}) {
+  const { join } = useWaitlist();
+  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 handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await join({
+        email,
+        name: collectName && name ? name : void 0,
+        metadata
+      });
+      setJoined(true);
+      onJoined?.(email);
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs10(Shell, { appearance, className, children: [
+    /* @__PURE__ */ jsx11(
+      Masthead,
+      {
+        logo,
+        title: title ?? l10n.waitlist.title,
+        subtitle: joined ? void 0 : subtitle ?? l10n.waitlist.subtitle
+      }
+    ),
+    /* @__PURE__ */ jsxs10("div", { className: "kerne-stack", children: [
+      error ? /* @__PURE__ */ jsx11(Panel, { variant: "danger", children: error }) : null,
+      joined ? /* @__PURE__ */ jsx11(Panel, { variant: "success", children: successMessage ?? l10n.waitlist.joined }) : /* @__PURE__ */ jsxs10("form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        collectName ? /* @__PURE__ */ jsx11(
+          Field,
+          {
+            label: l10n.common.name,
+            type: "text",
+            value: name,
+            onChange: setName,
+            autoComplete: "name",
+            placeholder: l10n.common.namePlaceholder,
+            disabled: submitting
+          }
+        ) : null,
+        /* @__PURE__ */ jsx11(
+          Field,
+          {
+            label: l10n.common.email,
+            type: "email",
+            value: email,
+            onChange: setEmail,
+            autoComplete: "email",
+            placeholder: l10n.common.emailPlaceholder,
+            disabled: submitting,
+            required: true,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx11(Button, { disabled: submitting || !email, children: submitting ? l10n.waitlist.submitting : submitLabel ?? l10n.waitlist.submit })
+      ] })
+    ] }),
+    legal ? /* @__PURE__ */ jsx11("p", { className: "kerne-legal", children: legal }) : null,
+    /* @__PURE__ */ jsx11(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+}
+
+// src/ui/UserButton.tsx
+import { useEffect as useEffect5, useRef as useRef3, useState as useState12 } from "react";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function SignOutButton({
+  children,
+  onSignedOut,
+  redirectUrl,
+  className,
+  appearance
+}) {
+  ensureStylesInjected();
+  const { logout } = useAuth();
+  const l10n = useLocalization();
+  const handle = () => {
+    logout();
+    onSignedOut?.();
+    if (redirectUrl && typeof window !== "undefined") window.location.href = redirectUrl;
+  };
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "kerne-root",
+      style: { ...appearanceToStyle(appearance), display: "inline-flex", width: "auto" },
+      "data-kerne-theme": resolveTheme(appearance),
+      children: /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: `kerne-button kerne-button-outline${className ? ` ${className}` : ""}`,
+          style: { width: "auto" },
+          onClick: handle,
+          children: children ?? l10n.account.signOut
+        }
+      )
+    }
+  );
+}
+function UserButton({
+  items = [],
+  onSignedOut,
+  signOutRedirectUrl,
+  signedOutFallback = null,
+  appearance,
+  className
+}) {
+  ensureStylesInjected();
+  const { logout, isAuthenticated } = useAuth();
+  const { user, fullName, initials, email } = useUser();
+  const l10n = useLocalization();
+  const [open, setOpen] = useState12(false);
+  const wrapRef = useRef3(null);
+  useEffect5(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  if (!isAuthenticated) return /* @__PURE__ */ jsx12(Fragment5, { children: signedOutFallback });
+  const handleSignOut = () => {
+    setOpen(false);
+    logout();
+    onSignedOut?.();
+    if (signOutRedirectUrl && typeof window !== "undefined") {
+      window.location.href = signOutRedirectUrl;
+    }
+  };
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: `kerne-root${className ? ` ${className}` : ""}`,
+      style: { ...appearanceToStyle(appearance), display: "inline-flex", width: "auto" },
+      "data-kerne-theme": resolveTheme(appearance),
+      children: /* @__PURE__ */ jsxs11("div", { className: "kerne-menu-wrap", ref: wrapRef, children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: "kerne-menu-trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-label": l10n.account.menuLabel,
+            onClick: () => setOpen((v) => !v),
+            children: user?.avatar ? /* @__PURE__ */ jsx12("img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ jsx12("span", { className: "kerne-avatar", children: initials || email?.[0]?.toUpperCase() || "?" })
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs11("div", { className: "kerne-menu", role: "menu", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "kerne-menu-header", children: [
+            fullName ? /* @__PURE__ */ jsx12("div", { className: "kerne-identity-name", children: fullName }) : null,
+            /* @__PURE__ */ jsx12("div", { className: "kerne-identity-mail", children: email })
+          ] }),
+          items.map(
+            (item) => item.href ? /* @__PURE__ */ jsx12("a", { role: "menuitem", className: "kerne-menu-item", href: item.href, children: item.label }, item.label) : /* @__PURE__ */ jsx12(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "kerne-menu-item",
+                onClick: () => {
+                  setOpen(false);
+                  item.onClick?.();
+                },
+                children: item.label
+              },
+              item.label
+            )
+          ),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "kerne-menu-item",
+              "data-tone": "danger",
+              onClick: handleSignOut,
+              children: l10n.account.signOut
+            }
+          )
+        ] }) : null
+      ] })
+    }
+  );
+}
+
+// src/ui/UserProfile.tsx
+import { useState as useState17 } from "react";
+
+// src/ui/profile/ProfileSection.tsx
+import { useEffect as useEffect6, useState as useState13 } 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);
+  useEffect6(() => {
+    if (!user) return;
+    setFirstName(user.first_name ?? "");
+    setLastName(user.last_name ?? "");
+  }, [user]);
+  useEffect6(() => {
+    let mounted = true;
+    getVerificationStatus().then((s) => mounted && setVerified(s.emailVerified)).catch(() => mounted && setVerified(null));
+    return () => {
+      mounted = false;
+    };
+  }, [getVerificationStatus]);
+  const handleSave = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSaved(false);
+    setSaving(true);
+    try {
+      await updateProfile({ first_name: firstName, last_name: lastName });
+      setSaved(true);
+      onSaved?.();
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleResend = async () => {
+    setError(null);
+    setSending(true);
+    try {
+      await sendVerificationEmail("link", verificationCallbackUrl);
+      setSent(true);
+    } catch (err) {
+      setError(showError(err));
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsxs12(Subsection, { title: l10n.profile.profileTitle, children: [
+      /* @__PURE__ */ jsxs12("div", { className: "kerne-identity", children: [
+        user?.avatar ? /* @__PURE__ */ jsx13("img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ jsx13("div", { className: "kerne-avatar", "aria-hidden": "true", children: initials || email?.[0]?.toUpperCase() || "?" }),
+        /* @__PURE__ */ jsxs12("div", { className: "kerne-identity-text", children: [
+          /* @__PURE__ */ jsx13("span", { className: "kerne-identity-name", children: fullName || l10n.profile.unnamed }),
+          /* @__PURE__ */ jsx13("span", { className: "kerne-identity-mail", children: email })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ jsx13(Panel, { variant: "danger", children: error }) : null,
+      saved ? /* @__PURE__ */ jsx13(Panel, { variant: "success", children: l10n.profile.saved }) : null,
+      /* @__PURE__ */ jsxs12("form", { className: "kerne-form", onSubmit: handleSave, children: [
+        /* @__PURE__ */ jsx13(
+          Field,
+          {
+            label: l10n.profile.firstName,
+            type: "text",
+            value: firstName,
+            onChange: setFirstName,
+            autoComplete: "given-name",
+            placeholder: l10n.profile.firstNamePlaceholder,
+            disabled: saving
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          Field,
+          {
+            label: l10n.profile.lastName,
+            type: "text",
+            value: lastName,
+            onChange: setLastName,
+            autoComplete: "family-name",
+            placeholder: l10n.profile.lastNamePlaceholder,
+            disabled: saving
+          }
+        ),
+        /* @__PURE__ */ jsx13(Button, { disabled: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs12(
+      Subsection,
+      {
+        title: l10n.profile.emailSectionTitle,
+        description: l10n.profile.emailSectionDesc,
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: "kerne-plan-option", children: [
+            /* @__PURE__ */ jsx13("div", { className: "kerne-plan-option-text", children: /* @__PURE__ */ jsxs12("span", { className: "kerne-plan-option-name", children: [
+              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
+          ] }),
+          sent ? /* @__PURE__ */ jsx13(Panel, { variant: "success", children: l10n.profile.verificationSent }) : null
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/profile/SecuritySection.tsx
+import { useState as useState14 } 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 hasPassword = config?.enable_credentials ?? true;
+  const handleDelete = async () => {
+    setError(null);
+    setDeleting(true);
+    try {
+      await requestAccountDeletion();
+      onDeleted?.();
+    } catch (err) {
+      setError(showError(err));
+      setDeleting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
+    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: "outline",
+          type: "button",
+          onClick: () => setConfirmingDelete(false),
+          disabled: deleting,
+          children: l10n.common.cancel
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx14(Button, { variant: "danger", type: "button", onClick: () => setConfirmingDelete(true), children: l10n.security.deleteAction }) }) : null
+  ] });
+}
+
+// src/ui/profile/BillingSection.tsx
+import { useMemo, useState as useState16 } from "react";
+
+// src/ui/format.ts
+function humanizeFeatureKey(key) {
+  const words = key.replace(/[_-]+/g, " ").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function formatMoney(amountMinorUnits, currency) {
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency.toUpperCase(),
+      // Whole amounts read better without ".00" on a pricing surface, but a
+      // real fractional price must never be rounded away.
+      minimumFractionDigits: amountMinorUnits % 100 === 0 ? 0 : 2
+    }).format(amountMinorUnits / 100);
+  } catch {
+    return `${(amountMinorUnits / 100).toFixed(2)} ${currency.toUpperCase()}`;
+  }
+}
+function formatNumber(value) {
+  return new Intl.NumberFormat().format(value);
+}
+function formatDate(iso) {
+  if (!iso) return null;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return null;
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(d);
+}
+var ENCODED_INTERVAL = /^([1-9]\d*)([DMY])$/;
+function formatInterval(interval, labels) {
+  const encoded = ENCODED_INTERVAL.exec(interval);
+  if (encoded) {
+    const count = parseInt(encoded[1], 10);
+    const unitLabel = { D: labels.intervalDay, M: labels.intervalMonth, Y: labels.intervalYear }[encoded[2]];
+    return count === 1 ? unitLabel : `${count} ${unitLabel}`;
+  }
+  switch (interval.toLowerCase()) {
+    case "month":
+    case "monthly":
+      return labels.intervalMonth;
+    case "year":
+    case "yearly":
+    case "annual":
+      return labels.intervalYear;
+    case "week":
+    case "weekly":
+      return labels.intervalWeek;
+    case "day":
+    case "daily":
+      return labels.intervalDay;
+    default:
+      return interval;
+  }
+}
+
+// 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";
+  if (ratio >= 0.9) return "critical";
+  if (ratio >= 0.75) return "warning";
+  return "normal";
+}
+function UsageMeters({
+  title,
+  featureKeys,
+  showUnlimited = false,
+  limit: maxRows,
+  labels,
+  emptyState,
+  appearance,
+  className
+}) {
+  const { entitlements, isLoading, error } = useEntitlements();
+  const { subscription } = useSubscription();
+  const l10n = useLocalization();
+  const heading = title === null ? null : title ?? l10n.usage.title;
+  const nameFor = (key) => {
+    if (labels?.[key]) return labels[key];
+    const fromPlan = subscription?.entitlements.find((e) => e.feature_key === key)?.feature_name;
+    return fromPlan ?? humanizeFeatureKey(key);
+  };
+  const shell = (children) => /* @__PURE__ */ jsxs14(Shell, { appearance, className, children: [
+    heading ? /* @__PURE__ */ jsx15("div", { className: "kerne-section-head", style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx15("h2", { className: "kerne-section-title", children: heading }) }) : null,
+    children
+  ] });
+  if (isLoading) {
+    return shell(
+      /* @__PURE__ */ jsxs14("div", { className: "kerne-meters", "aria-busy": "true", "aria-label": l10n.usage.loading, children: [
+        /* @__PURE__ */ jsx15("div", { className: "kerne-skeleton", style: { height: 34 } }),
+        /* @__PURE__ */ jsx15("div", { className: "kerne-skeleton", style: { height: 34 } })
+      ] })
+    );
+  }
+  if (error || !entitlements) {
+    return shell(/* @__PURE__ */ jsx15(Panel, { variant: "danger", children: l10n.usage.loadFailed }));
+  }
+  const metered = entitlements.entitlements.filter((e) => {
+    if (e.feature_type !== "QUOTA") return false;
+    if (featureKeys && !featureKeys.includes(e.feature_key)) return false;
+    if (!showUnlimited && (e.limit === null || e.limit === void 0)) return false;
+    return typeof e.used === "number";
+  }).sort((a, b) => {
+    if (featureKeys) {
+      return featureKeys.indexOf(a.feature_key) - featureKeys.indexOf(b.feature_key);
+    }
+    const ratio = (e) => e.limit ? e.used / e.limit : -1;
+    return ratio(b) - ratio(a);
+  });
+  const rows = maxRows ? metered.slice(0, maxRows) : metered;
+  if (rows.length === 0) {
+    return shell(emptyState ?? /* @__PURE__ */ jsx15("p", { className: "kerne-meter-note", children: l10n.usage.nothingMetered }));
+  }
+  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 over = !unlimited && e.used > e.limit;
+      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) }),
+          /* @__PURE__ */ jsx15("span", { className: "kerne-meter-value", children: unlimited ? fill(l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
+        ] }),
+        !unlimited ? /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "kerne-meter-track",
+            role: "progressbar",
+            "aria-valuenow": e.used,
+            "aria-valuemin": 0,
+            "aria-valuemax": e.limit,
+            "aria-label": nameFor(e.feature_key),
+            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
+      ] }, 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";
+var STATUS_TONES = {
+  ACTIVE: "success",
+  TRIALING: "success",
+  PAST_DUE: "warning",
+  CANCELED: void 0,
+  UNPAID: "danger",
+  PAUSED: "warning"
+};
+function SubscriptionCard({
+  productSlug,
+  title,
+  portalReturnUrl,
+  upgradeUrl,
+  onUpgradeClick,
+  hidePortalButton = false,
+  appearance,
+  className
+}) {
+  const { subscription, isLoading, error } = useSubscription(productSlug);
+  const { openPortal } = usePortal();
+  const l10n = useLocalization();
+  const showError = useErrorResolver();
+  const heading = title === null ? null : title ?? l10n.billing.plan;
+  const statusLabels = {
+    ACTIVE: l10n.billing.statusActive,
+    TRIALING: l10n.billing.statusTrialing,
+    PAST_DUE: l10n.billing.statusPastDue,
+    CANCELED: l10n.billing.statusCanceled,
+    UNPAID: l10n.billing.statusUnpaid,
+    PAUSED: l10n.billing.statusPaused
+  };
+  const [opening, setOpening] = useState15(false);
+  const [portalError, setPortalError] = useState15(null);
+  const handlePortal = async () => {
+    setPortalError(null);
+    setOpening(true);
+    try {
+      await openPortal(portalReturnUrl);
+    } catch (e) {
+      setPortalError(showError(e));
+      setOpening(false);
+    }
+  };
+  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
+  ] }) });
+  if (isLoading) {
+    return shell(
+      /* @__PURE__ */ jsxs15("div", { className: "kerne-rows", "aria-busy": "true", "aria-label": l10n.billing.loadingPlan, children: [
+        /* @__PURE__ */ jsx16("div", { className: "kerne-skeleton", style: { height: 20 } }),
+        /* @__PURE__ */ jsx16("div", { className: "kerne-skeleton", style: { height: 20 } })
+      ] })
+    );
+  }
+  if (error) {
+    return shell(/* @__PURE__ */ jsx16(Panel, { variant: "danger", children: l10n.billing.loadFailed }));
+  }
+  if (!subscription) {
+    return shell(
+      /* @__PURE__ */ jsxs15(Fragment8, { children: [
+        /* @__PURE__ */ jsx16("p", { className: "kerne-subsection-desc", children: l10n.billing.freePlan }),
+        upgradeUrl || onUpgradeClick ? /* @__PURE__ */ jsx16(
+          Button,
+          {
+            type: "button",
+            onClick: onUpgradeClick ?? (() => {
+              if (upgradeUrl) window.location.href = upgradeUrl;
+            }),
+            children: l10n.billing.seePlans
+          }
+        ) : null
+      ] })
+    );
+  }
+  const { plan, plan_price, status, current_period_end, trial_end, canceled_at } = subscription;
+  const renews = formatDate(current_period_end);
+  const trialEnds = formatDate(trial_end);
+  return shell(
+    /* @__PURE__ */ jsxs15(Fragment8, { children: [
+      portalError ? /* @__PURE__ */ jsx16(Panel, { variant: "danger", children: portalError }) : null,
+      /* @__PURE__ */ jsxs15("dl", { className: "kerne-rows", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
+          /* @__PURE__ */ jsx16("dt", { children: l10n.billing.plan }),
+          /* @__PURE__ */ jsx16("dd", { children: plan.name })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
+          /* @__PURE__ */ jsx16("dt", { children: l10n.billing.price }),
+          /* @__PURE__ */ jsxs15("dd", { children: [
+            formatMoney(plan_price.amount, plan_price.currency),
+            " /",
+            " ",
+            formatInterval(plan_price.interval, l10n.billing)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
+          /* @__PURE__ */ jsx16("dt", { children: l10n.billing.status }),
+          /* @__PURE__ */ jsx16("dd", { children: /* @__PURE__ */ jsx16("span", { className: "kerne-badge", "data-tone": STATUS_TONES[status], children: statusLabels[status] ?? status }) })
+        ] }),
+        status === "TRIALING" && trialEnds ? /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
+          /* @__PURE__ */ jsx16("dt", { children: l10n.billing.trialEnds }),
+          /* @__PURE__ */ jsx16("dd", { children: trialEnds })
+        ] }) : renews ? /* @__PURE__ */ jsxs15("div", { className: "kerne-row", children: [
+          /* @__PURE__ */ jsx16("dt", { children: canceled_at ? l10n.billing.ends : l10n.billing.renews }),
+          /* @__PURE__ */ jsx16("dd", { children: renews })
+        ] }) : 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
+    ] })
+  );
+}
+
+// src/ui/profile/BillingSection.tsx
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function intervalsOf(plans) {
+  const seen = [];
+  for (const plan of plans) {
+    for (const price of plan.prices) {
+      if (!seen.includes(price.interval)) seen.push(price.interval);
+    }
+  }
+  return seen;
+}
+function BillingSection({
+  productSlug,
+  pricingProductIdOrSlug,
+  portalReturnUrl,
+  checkoutSuccessUrl,
+  checkoutCancelUrl,
+  showPlanSwitcher = true,
+  showUsage = true,
+  usageFeatureKeys,
+  usageLabels
+}) {
+  const { subscription } = useSubscription(productSlug);
+  const { plans, isLoading: plansLoading } = usePlans(pricingProductIdOrSlug);
+  const { openCheckout } = useCheckout();
+  const l10n = useLocalization();
+  const showError = useErrorResolver();
+  const [busy, setBusy] = useState16(null);
+  const [error, setError] = useState16(null);
+  const intervals = useMemo(() => intervalsOf(plans), [plans]);
+  const [interval, setInterval] = useState16(null);
+  const activeInterval = interval ?? subscription?.plan_price.interval ?? intervals[0] ?? null;
+  const handleSwitch = async (planPriceId) => {
+    setError(null);
+    setBusy(planPriceId);
+    try {
+      await openCheckout(planPriceId, {
+        successUrl: checkoutSuccessUrl,
+        cancelUrl: checkoutCancelUrl
+      });
+    } catch (e) {
+      setError(showError(e));
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
+    error ? /* @__PURE__ */ jsx17(Panel, { variant: "danger", children: error }) : null,
+    /* @__PURE__ */ jsx17(Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ jsx17(
+      SubscriptionCard,
+      {
+        title: null,
+        productSlug,
+        portalReturnUrl
+      }
+    ) }),
+    showUsage ? /* @__PURE__ */ jsx17(Subsection, { title: l10n.usage.title, description: l10n.usage.subtitle, children: /* @__PURE__ */ jsx17(UsageMeters, { title: null, featureKeys: usageFeatureKeys, labels: usageLabels }) }) : null,
+    showPlanSwitcher ? /* @__PURE__ */ jsx17(Subsection, { title: l10n.billing.changePlan, children: plansLoading ? /* @__PURE__ */ jsx17(
+      "div",
+      {
+        className: "kerne-skeleton",
+        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: [
+      intervals.length > 1 ? /* @__PURE__ */ jsx17(
+        "div",
+        {
+          className: "kerne-segmented",
+          role: "group",
+          "aria-label": l10n.billing.intervalGroupLabel,
+          children: intervals.map((i) => /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              className: "kerne-segment",
+              "aria-pressed": i === activeInterval,
+              onClick: () => setInterval(i),
+              children: formatInterval(i, l10n.billing)
+            },
+            i
+          ))
+        }
+      ) : null,
+      /* @__PURE__ */ jsx17("div", { className: "kerne-plan-list", children: plans.map((plan) => {
+        const price = plan.prices.find((p) => p.interval === activeInterval) ?? plan.prices[0];
+        const isCurrent = subscription?.plan.slug === plan.slug;
+        return /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            className: "kerne-plan-option",
+            "data-current": isCurrent ? "true" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs16("div", { className: "kerne-plan-option-text", children: [
+                /* @__PURE__ */ jsxs16("span", { className: "kerne-plan-option-name", children: [
+                  plan.name,
+                  isCurrent ? /* @__PURE__ */ jsx17("span", { className: "kerne-badge", children: l10n.billing.current }) : null
+                ] }),
+                /* @__PURE__ */ jsx17("span", { className: "kerne-plan-option-price", children: price ? `${formatMoney(price.amount, price.currency)} / ${formatInterval(price.interval, l10n.billing)}` : l10n.billing.notOnInterval })
+              ] }),
+              !isCurrent && price ? /* @__PURE__ */ jsx17(
+                Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  onClick: () => handleSwitch(price.id),
+                  disabled: busy !== null,
+                  children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
+                }
+              ) : null
+            ]
+          },
+          plan.id
+        );
+      }) })
+    ] }) }) : null
+  ] });
+}
+
+// src/ui/UserProfile.tsx
+import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function UserProfile({
+  tabs = ["profile", "security", "billing"],
+  extraTabs = [],
+  defaultTab,
+  activeTab: controlledTab,
+  onTabChange,
+  showDeleteAccount = true,
+  onSaved,
+  onDeleted,
+  productSlug,
+  pricingProductIdOrSlug,
+  portalReturnUrl,
+  checkoutSuccessUrl,
+  checkoutCancelUrl,
+  showPlanSwitcher = true,
+  showUsage = true,
+  usageFeatureKeys,
+  usageLabels,
+  verificationCallbackUrl,
+  appearance,
+  className
+}) {
+  const l10n = useLocalization();
+  const builtins = {
+    profile: {
+      label: l10n.profile.tabProfile,
+      title: l10n.profile.profileTitle,
+      description: l10n.profile.profileDesc
+    },
+    security: {
+      label: l10n.profile.tabSecurity,
+      title: l10n.profile.securityTitle,
+      description: l10n.profile.securityDesc
+    },
+    billing: {
+      label: l10n.profile.tabBilling,
+      title: l10n.profile.billingTitle,
+      description: l10n.profile.billingDesc
+    }
+  };
+  const allTabs = [
+    ...tabs.map((id) => ({ id, ...builtins[id] })),
+    ...extraTabs.map((t) => ({
+      id: t.id,
+      label: t.label,
+      title: t.title ?? t.label,
+      description: t.description
+    }))
+  ];
+  const [internalTab, setInternalTab] = useState17(defaultTab ?? allTabs[0]?.id ?? "profile");
+  const current = controlledTab ?? internalTab;
+  const select = (id) => {
+    if (controlledTab === void 0) setInternalTab(id);
+    onTabChange?.(id);
+  };
+  const active = allTabs.find((t) => t.id === current) ?? allTabs[0];
+  const renderPane = () => {
+    switch (active?.id) {
+      case "profile":
+        return /* @__PURE__ */ jsx18(ProfileSection, { verificationCallbackUrl, onSaved });
+      case "security":
+        return /* @__PURE__ */ jsx18(SecuritySection, { showDeleteAccount, onDeleted });
+      case "billing":
+        return /* @__PURE__ */ jsx18(
+          BillingSection,
+          {
+            productSlug,
+            pricingProductIdOrSlug,
+            portalReturnUrl,
+            checkoutSuccessUrl,
+            checkoutCancelUrl,
+            showPlanSwitcher,
+            showUsage,
+            usageFeatureKeys,
+            usageLabels
+          }
+        );
+      default:
+        return extraTabs.find((t) => t.id === active?.id)?.content ?? null;
+    }
+  };
+  return /* @__PURE__ */ jsx18(Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ jsxs17("div", { className: "kerne-profile", children: [
+    /* @__PURE__ */ jsx18("nav", { className: "kerne-nav", "aria-label": l10n.profile.navLabel, children: allTabs.map((tab) => /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        className: "kerne-nav-item",
+        "aria-current": tab.id === active?.id ? "page" : void 0,
+        onClick: () => select(tab.id),
+        children: tab.label
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ jsxs17("div", { className: "kerne-pane", children: [
+      active ? /* @__PURE__ */ jsxs17(Fragment10, { 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,
+      renderPane()
+    ] })
+  ] }) });
+}
+
+// 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";
+var POLL_INTERVAL_MS = 1500;
+function CheckoutResult({
+  outcome = "success",
+  productSlug,
+  continueUrl,
+  onContinue,
+  pricingUrl,
+  onRetry,
+  onConfirmed,
+  confirmTimeoutMs = 15e3,
+  appearance,
+  logo,
+  className
+}) {
+  const client = useClient();
+  const { config } = useAuthConfig();
+  const l10n = useLocalization();
+  const [state, setState] = useState18("checking");
+  const confirmed = useRef4(false);
+  useEffect7(() => {
+    if (outcome !== "success") return;
+    let stopped = false;
+    const startedAt = Date.now();
+    const poll = async () => {
+      if (stopped || confirmed.current) return;
+      try {
+        const sub = await client.getSubscription(productSlug);
+        if (sub && !stopped) {
+          confirmed.current = true;
+          setState("confirmed");
+          onConfirmed?.(sub);
+          return;
+        }
+      } catch {
+      }
+      if (stopped) return;
+      if (Date.now() - startedAt >= confirmTimeoutMs) {
+        setState("pending");
+        return;
+      }
+      window.setTimeout(poll, POLL_INTERVAL_MS);
+    };
+    void poll();
+    return () => {
+      stopped = true;
+    };
+  }, [outcome, productSlug, client, confirmTimeoutMs, onConfirmed]);
+  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,
+    children,
+    /* @__PURE__ */ jsx19(KerneBranding, { show: config?.show_kerne_branding ?? false })
+  ] });
+  if (outcome === "cancel") {
+    return shell(
+      /* @__PURE__ */ jsx19(
+        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,
+          children: l10n.checkout.cancelBody
+        }
+      )
+    );
+  }
+  if (state === "checking") {
+    return shell(
+      /* @__PURE__ */ jsx19(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 })
+    );
+  }
+  return shell(
+    /* @__PURE__ */ jsx19(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";
+function UpgradePrompt({
+  featureKey,
+  requested,
+  featureName,
+  children,
+  upgradeUrl,
+  onUpgradeClick,
+  upgradeLabel,
+  title,
+  description,
+  hideWhileLoading = false,
+  appearance,
+  className
+}) {
+  const { details, allowed, isLoading } = useAccess(featureKey, requested);
+  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 }) });
+  }
+  if (allowed) return /* @__PURE__ */ jsx20(Fragment11, { 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)
+  }) : 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 })
+    ] }),
+    upgradeUrl || onUpgradeClick ? /* @__PURE__ */ jsx20(
+      Button,
+      {
+        type: "button",
+        onClick: onUpgradeClick ?? (() => {
+          if (upgradeUrl) window.location.href = upgradeUrl;
+        }),
+        children: upgradeLabel ?? l10n.upgrade.action
+      }
+    ) : null
+  ] }) });
+}
+export {
+  ActivateAccountForm,
+  AuthFlow,
+  BillingSection,
+  ChangePasswordForm,
+  CheckoutResult,
+  ForgotPasswordForm,
+  LoginForm,
+  MagicLinkCallback,
+  ProfileSection,
+  RegisterForm,
+  ResetPasswordForm,
+  SecuritySection,
+  SignOutButton,
+  SubscriptionCard,
+  UpgradePrompt,
+  UsageMeters,
+  UserButton,
+  UserProfile,
+  VerifyEmailForm,
+  WaitlistForm,
+  defaultLocalization,
+  useLocalization
+};