@kerne/react 1.1.0 → 1.3.0

package/dist/chunk-ZVL47U4B.js

@@ -0,0 +1,3312 @@
+"use client";
+
+// src/ui/i18n.ts
+import { createContext, useContext, useCallback, createElement, Fragment } from "react";
+var defaultLocalization = {
+  common: {
+    email: "E-mail",
+    emailPlaceholder: "you@company.com",
+    password: "Password",
+    passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    name: "Name",
+    namePlaceholder: "Ada Lovelace",
+    cancel: "Cancel",
+    continue: "Continue",
+    or: "or",
+    thisApp: "This app",
+    backToSignIn: "Back to sign in",
+    sending: "Sending...",
+    continueWith: "Continue with {provider}",
+    securedByKerne: "Secured by Kerne",
+    loading: "Loading",
+    showPassword: "Show password",
+    hidePassword: "Hide password",
+    capsLockOn: "Caps Lock is on",
+    passwordHint: "At least {count} characters",
+    passwordRequireUppercase: "One uppercase letter",
+    passwordRequireNumber: "One number",
+    passwordRequireSymbol: "One special character",
+    strengthLabel: "Password strength",
+    strengthWeak: "Weak",
+    strengthFair: "Fair",
+    strengthGood: "Good",
+    strengthStrong: "Strong"
+  },
+  signIn: {
+    title: "Welcome back",
+    signUpPrompt: "First time here?",
+    signUpLink: "Sign up for free",
+    signUpForApp: "Sign up for {app}",
+    submit: "Sign in",
+    submitting: "Signing in...",
+    magicSubmit: "Send me a sign-in link",
+    magicSubmitting: "Sending link...",
+    magicSubtitle: "We will email you a link to sign in.",
+    forgotPassword: "Forgot password?",
+    useMagicLink: "Send me a sign-in link instead",
+    usePassword: "Sign in with a password",
+    linkSent: "Check your inbox - if an account exists for {email}, a sign-in link is on its way.",
+    unavailable: "Sign-in is not available right now. Contact your administrator.",
+    loadFailed: "Could not load sign-in options. Please refresh the page."
+  },
+  signUp: {
+    title: "Create your account",
+    titleWithApp: "Create your {app} account",
+    signInPrompt: "Already registered?",
+    signInLink: "Sign in",
+    submit: "Create account",
+    submitting: "Creating account...",
+    magicSubmit: "Send me a sign-up link",
+    magicSubmitting: "Sending link...",
+    invitationCode: "Invitation code",
+    invitationNeeded: "You need an invitation to sign up.",
+    closedTitle: "Sign-ups are closed",
+    closedBody: "{app} is not accepting new accounts right now.",
+    linkSent: "Check your inbox - we sent a link to {email}. Opening it confirms your address and signs you in.",
+    useMagicLink: "Send me a sign-up link instead",
+    usePassword: "Sign up with a password",
+    unavailable: "Sign-up is not available right now. Contact your administrator.",
+    loadFailed: "Could not load sign-up options. Please refresh the page."
+  },
+  resetPassword: {
+    requestTitle: "Reset your password",
+    requestSubtitle: "We will email you a link to choose a new password.",
+    requestSubmit: "Send me a reset link",
+    requestSubmitting: "Sending link...",
+    requestSent: "Check your inbox - if an account exists for {email}, a reset link is on its way.",
+    rememberedPrompt: "Remembered it?",
+    title: "Choose a new password",
+    subtitle: "Pick something you have not used before.",
+    newPassword: "New password",
+    confirmPassword: "Confirm new password",
+    mismatch: "Both passwords must match.",
+    submit: "Update password",
+    submitting: "Updating...",
+    doneTitle: "Password updated",
+    doneBody: "You can now sign in with your new password.",
+    incompleteTitle: "This link is incomplete",
+    incompleteBody: "It is missing its reset token. Request a new reset email and try again."
+  },
+  magicLink: {
+    pendingTitle: "Signing you in",
+    pendingBody: "One moment while we verify your link.",
+    doneTitle: "You're signed in",
+    doneBody: "You can close this tab if it does not redirect on its own.",
+    failedTitle: "This link didn't work",
+    missingToken: "This link is missing its sign-in token."
+  },
+  verifyEmail: {
+    title: "Verify your email",
+    subtitle: "Enter the 6-digit code we emailed you.",
+    code: "Verification code",
+    submit: "Verify email",
+    submitting: "Verifying...",
+    resend: "Didn't get it? Send a new code",
+    resent: "A new code is on its way.",
+    verifyingTitle: "Verifying your email",
+    verifyingBody: "One moment while we confirm your link.",
+    doneTitle: "Email verified",
+    doneBody: "Your address is confirmed. You can continue.",
+    failedTitle: "This link didn't work",
+    newCode: "Send a new code"
+  },
+  activate: {
+    title: "Activate your account",
+    credentialsSubtitle: "Set a password for {email} to finish.",
+    magicSubtitle: "Confirm {email} to finish setting up your account.",
+    confirmPassword: "Confirm password",
+    mismatch: "Both passwords must match.",
+    submit: "Activate my account",
+    submitting: "Activating...",
+    failedTitle: "This link didn't work",
+    missingToken: "It is missing its activation token. Ask for a new invitation.",
+    goToSignIn: "Go to sign in"
+  },
+  waitlist: {
+    title: "Join the waitlist",
+    subtitle: "We will email you when a spot opens up.",
+    submit: "Join the waitlist",
+    submitting: "Adding you...",
+    joined: "You're on the list. We will be in touch."
+  },
+  profile: {
+    navLabel: "Account sections",
+    tabProfile: "Profile",
+    tabSecurity: "Security",
+    tabBilling: "Billing",
+    profileTitle: "Profile",
+    profileDesc: "Your name and the address you sign in with.",
+    securityTitle: "Security",
+    securityDesc: "Manage your password and your account.",
+    billingTitle: "Billing",
+    billingDesc: "Your plan, what you have used, and how to change it.",
+    firstName: "First name",
+    firstNamePlaceholder: "Ada",
+    lastName: "Last name",
+    lastNamePlaceholder: "Lovelace",
+    save: "Save",
+    saving: "Saving...",
+    saved: "Your profile has been saved.",
+    emailSectionTitle: "Email address",
+    emailSectionDesc: "The address you sign in with. Contact support to change it.",
+    verified: "Verified",
+    unverified: "Unverified",
+    verify: "Verify",
+    verificationSent: "Verification email sent.",
+    unnamed: "Unnamed"
+  },
+  security: {
+    passwordTitle: "Password",
+    passwordDesc: "Used together with your email to sign in.",
+    currentPassword: "Current password",
+    newPassword: "New password",
+    confirmPassword: "Confirm new password",
+    submit: "Change password",
+    submitting: "Changing...",
+    changed: "Your password has been changed.",
+    mismatch: "Both passwords must match.",
+    sameAsCurrent: "Your new password must differ from the current one.",
+    deleteTitle: "Delete account",
+    deleteDesc: "Deactivates your account and signs you out. Contact support if you need it back.",
+    deleteAction: "Delete my account",
+    deleteConfirm: "Yes, delete my account",
+    deleting: "Deleting..."
+  },
+  billing: {
+    currentPlan: "Current plan",
+    plan: "Plan",
+    price: "Price",
+    status: "Status",
+    renews: "Renews",
+    ends: "Ends",
+    trialEnds: "Trial ends",
+    managePortal: "Manage billing",
+    opening: "Opening...",
+    freePlan: "You are on the free plan.",
+    seePlans: "See plans",
+    cancelNotice: "Your plan is set to end - you keep access until the date above.",
+    cancelSubscription: "Cancel subscription",
+    canceling: "Canceling...",
+    cancelConfirmTitle: "Cancel your subscription?",
+    cancelConfirmBody: "You'll keep access until the end of the current billing period.",
+    cancelConfirmButton: "Yes, cancel",
+    cancelConfirmDismiss: "Never mind",
+    changePlan: "Change plan",
+    current: "Current",
+    switchTo: "Switch",
+    switching: "Switching...",
+    switchConfirmTitle: "Switch to {plan}?",
+    switchConfirmBody: "This applies right away, and your next invoice reflects the price difference for the rest of this period.",
+    switchConfirmButton: "Yes, switch",
+    switchConfirmDismiss: "Never mind",
+    noPlans: "No other plans are available right now.",
+    notOnInterval: "Not offered on this plan",
+    differentCurrency: "Different currency - contact support",
+    loadFailed: "Could not load your plan right now.",
+    loadingPlan: "Loading subscription",
+    loadingPlans: "Loading plans",
+    intervalGroupLabel: "Billing interval",
+    // Rendered after a price, as "12 € / month". A language that needs another
+    // shape overrides the whole label rather than these fragments.
+    intervalMonth: "month",
+    intervalYear: "year",
+    intervalWeek: "week",
+    intervalDay: "day",
+    statusActive: "Active",
+    statusTrialing: "Trial",
+    statusPastDue: "Payment due",
+    statusCanceled: "Canceled",
+    statusUnpaid: "Unpaid",
+    statusPaused: "Paused"
+  },
+  usage: {
+    title: "Usage",
+    subtitle: "Counted against your plan for the current period.",
+    used: "{count} used",
+    nothingMetered: "Nothing metered on your plan - you have no usage limits to watch.",
+    overage: "{count} over your included amount - at no extra charge.",
+    overageBilled: "{count} over your included amount - the extra is billed on top of your plan.",
+    limitReached: "You have reached your limit.",
+    capReached: "You've reached your billing cap for this period - everything past this is free.",
+    billedAmount: "{amount} billed this period.",
+    loading: "Loading usage",
+    loadFailed: "Could not load your usage right now."
+  },
+  pricing: {
+    getStarted: "Get started",
+    billedAt: "Billed {amount} / {interval}",
+    save: "Save {percent}%",
+    included: "Included",
+    notIncluded: "\u2014",
+    free: "Free",
+    forever: "forever",
+    startFree: "Start free",
+    trialNote: "{days}-day trial, no card",
+    thenMetered: "then metered",
+    meterTitle: "Metered overage",
+    meterRatePer: "Rate per {thing}",
+    meterShape: "Shape",
+    meterCounted: "Counted",
+    meterResets: "Resets",
+    meterCapped: "Capped",
+    meterTiers: "{count} tiers, cheapest {amount}",
+    meterFlat: "One rate",
+    meterVolume: "whole quantity at the reached rate",
+    meterGraduated: "each slice at its own rate",
+    meterPerSlice: "per {slice}",
+    meterPerCustomer: "per customer",
+    meterRoundedUp: "rounded up",
+    meterRoundedDown: "rounded down",
+    meterResetsEvery: "every {interval}",
+    perSlice: "{amount} per {slice}",
+    meterResetsCycle: "every billing period",
+    meterResetsNever: "never - it rolls over",
+    metered: "metered",
+    from: "from",
+    sizeUpFront: "Size it up front",
+    billedWithPlan: "billed with the plan",
+    includedAmount: "{amount} included",
+    prepaidAmount: "+{amount} prepaid",
+    nothingListed: "Nothing listed on this plan yet.",
+    unlimited: "Unlimited",
+    moreFeatures: "+{count} more",
+    loading: "Loading plans",
+    loadFailed: "Could not load plans right now."
+  },
+  checkout: {
+    confirmingTitle: "Confirming your payment",
+    confirmingBody: "This takes a few seconds - please keep this tab open.",
+    pendingTitle: "Payment received",
+    pendingBody: "Your plan is still being activated. It usually lands within a minute - refresh if it has not appeared by then.",
+    doneTitle: "You're all set",
+    doneBody: "Your subscription is active. Thank you.",
+    cancelTitle: "Checkout cancelled",
+    cancelBody: "Nothing was charged. You can pick a plan whenever you are ready.",
+    backToPlans: "Back to plans"
+  },
+  upgrade: {
+    quotaTitle: "You've used all your {feature}",
+    quotaBody: "You have used {used} of {limit} this period. Upgrade for a higher limit.",
+    featureTitle: "{feature} is not on your plan",
+    featureBody: "Upgrade your plan to unlock {feature}.",
+    action: "See plans",
+    checking: "Checking access"
+  },
+  account: {
+    menuLabel: "Account menu",
+    signOut: "Sign out"
+  },
+  errors: {
+    generic: "Something went wrong. Please try again.",
+    // Auth (K1xxx)
+    K1001: "Registration is not open right now.",
+    K1002: "This app has reached its user limit.",
+    K1003: "This invitation link is no longer valid.",
+    K1004: "That invitation code is not valid.",
+    K1005: "Invalid email or password.",
+    K1006: "This link has expired. Request a new one.",
+    K1007: "This link is missing its token.",
+    K1008: "An account already exists for this email.",
+    K1009: "That email address does not look valid.",
+    K1010: "Please choose a stronger password.",
+    K1011: "Please verify your email address first.",
+    K1012: "You need to sign in to continue.",
+    // Validation (K2xxx)
+    K2001: "Some of the details you entered are not valid.",
+    K2002: "Please fill in every required field.",
+    K2003: "Some of the details you entered are not valid.",
+    K2005: "That value is already taken.",
+    // Permissions (K3xxx)
+    K3002: "You do not have permission to do that.",
+    K3004: "That action is not available on your account.",
+    // Resources (K4xxx)
+    K4001: "We could not find what you were looking for.",
+    K4003: "We could not find that account.",
+    // Billing (K5xxx)
+    K5001: "You've reached the limit included in your plan.",
+    K5002: "Your plan does not include this. Upgrade to continue.",
+    K5003: "Your payment could not be processed.",
+    // Rate limiting (K6xxx)
+    K6001: "Too many attempts. Please wait a moment and try again."
+  }
+};
+var LocalizationContext = createContext(defaultLocalization);
+function mergeLocalization(override, base = defaultLocalization) {
+  if (!override) return base;
+  const merged = { ...base };
+  for (const groupKey of Object.keys(base)) {
+    const group = override[groupKey];
+    if (group) {
+      merged[groupKey] = {
+        ...base[groupKey],
+        ...group
+      };
+    }
+  }
+  return merged;
+}
+function useLocalization() {
+  return useContext(LocalizationContext);
+}
+function fill(template, values) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (match, key) => key in values ? String(values[key]) : match
+  );
+}
+function fillNode(template, values) {
+  return template.split(/(\{\w+\})/g).map((part, index) => {
+    const placeholder = /^\{(\w+)\}$/.exec(part);
+    if (placeholder && placeholder[1] in values) {
+      return createElement(Fragment, { key: index }, values[placeholder[1]]);
+    }
+    return part;
+  });
+}
+function resolveErrorMessage(error, l10n) {
+  const code = typeof error === "object" && error !== null && "code" in error ? String(error.code) : null;
+  if (code && l10n.errors[code]) return l10n.errors[code];
+  return l10n.errors.generic;
+}
+function useErrorResolver() {
+  const l10n = useLocalization();
+  return useCallback((error) => resolveErrorMessage(error, l10n), [l10n]);
+}
+
+// src/ui/styles.ts
+var STYLE_ELEMENT_ID = "kerne-ui-styles";
+var DARK_TOKENS = `
+  --kerne-fg: #f0f0f0;
+  --kerne-fg-muted: #a1a1a1;
+  --kerne-fg-subtle: #8a8a8a;
+  --kerne-border: #2e2e2e;
+  --kerne-border-strong: #3d3d3d;
+  --kerne-panel: #1f1f1f;
+  --kerne-surface: #171717;
+  --kerne-surface-raised: #2e2e2e;
+  --kerne-track: #373737;
+  --kerne-primary: #f0f0f0;
+  --kerne-primary-fg: #171717;
+  --kerne-primary-hover: #d9d9d9;
+  --kerne-accent: #e5e5e5;
+  --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: #171717;
+  --kerne-fg-muted: #6e6e6e;
+  /* Meets 4.5:1 on white - this carries placeholders and the legal footnote,
+     which used to sit around 2.5:1. */
+  --kerne-fg-subtle: #717171;
+  --kerne-border: #e5e5e5;
+  --kerne-border-strong: #d9d9d9;
+  --kerne-field-bg: transparent;
+  --kerne-panel: #f5f5f5;
+  /* 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;
+  /* Unfilled part of a meter, and the ground of a disabled button. Distinct
+     from --kerne-panel, which is tuned to sit on the page: on a card the two
+     are nearly the same colour, so a meter drawn in panel had invisible empty
+     segments and read as having fewer steps than it has. */
+  --kerne-track: #e5e5e5;
+  --kerne-primary: #171717;
+  --kerne-primary-fg: #ffffff;
+  --kerne-primary-hover: #2e2e2e;
+  --kerne-accent: #171717;
+  --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; }
+/* The cheapest tell that a surface was designed rather than assembled - a
+   themed selection color costs one rule and every host page skips it. */
+.kerne-root ::selection { background: color-mix(in srgb, var(--kerne-accent) 30%, transparent); color: var(--kerne-fg); }
+
+.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: 1800px; }
+
+.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-selected="true"] { 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-nav-item:active { opacity: .7; }
+
+.kerne-pane { display: flex; flex-direction: column; min-width: 0; }
+.kerne-pane:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 4px; border-radius: 4px; }
+.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; letter-spacing: -0.012em; margin: 0; }
+.kerne-subsection-desc { font-size: 12.5px; line-height: 1.5; 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; }
+.kerne-segment:active { opacity: .7; }
+
+/* ---------- 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; }
+
+/* Moving between steps (sign-in -> sign-up -> forgot password) used to be an
+   instant swap: the content and the height both jumped at once, which reads
+   as a page reload rather than one flow. */
+@keyframes kerne-step-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+.kerne-step { animation: kerne-step-in .18s ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-step { animation: none; }
+}
+
+/* ---------- Stack ---------- */
+.kerne-stack { display: flex; flex-direction: column; gap: 16px; }
+.kerne-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.kerne-form { display: flex; flex-direction: column; gap: 12px; }
+.kerne-field { display: flex; flex-direction: column; gap: 6px; }
+.kerne-label { font-size: 14px; font-weight: 500; color: var(--kerne-fg); }
+.kerne-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+
+/* Positioning context for the reveal toggle, which sits inside the input box. */
+.kerne-control { position: relative; display: flex; }
+
+.kerne-input {
+  font: inherit;
+  font-size: 14px;
+  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;
+}
+/* Room for the toggle, so a long password never runs underneath it. */
+.kerne-input[data-kerne-reveal="true"] { padding-right: 42px; }
+
+.kerne-reveal {
+  position: absolute;
+  top: 0; right: 0; bottom: 0;
+  width: 40px;
+  display: flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 0; cursor: pointer;
+  color: var(--kerne-fg-subtle);
+  border-radius: var(--kerne-radius);
+  transition: color .12s ease;
+}
+.kerne-reveal:hover:not(:disabled) { color: var(--kerne-fg); }
+.kerne-reveal:disabled { cursor: not-allowed; opacity: .5; }
+.kerne-reveal:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: -2px; }
+
+.kerne-field-note { font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted); margin: 0; }
+.kerne-field-error { font-size: 12.5px; line-height: 1.4; color: var(--kerne-danger); margin: 0; }
+/* Caps Lock is a "you are about to get this wrong" signal, not background
+   guidance - in muted grey it sat at the same weight as a hint and got read
+   as one. */
+.kerne-field-note[data-kerne-warn="true"] { color: var(--kerne-warning); }
+
+/* ---------- Password rules ---------- */
+/* Unmet stays at hint weight rather than turning red: nothing is wrong yet,
+   the user is still typing. Only the tick earns a color. */
+.kerne-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.kerne-rule {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted);
+}
+.kerne-rule[data-met] { color: var(--kerne-success); }
+
+/* ---------- Password strength ---------- */
+.kerne-strength { display: flex; flex-direction: column; gap: 5px; }
+.kerne-strength-track { display: flex; gap: 4px; }
+.kerne-strength-step {
+  flex: 1; height: 3px; border-radius: 999px;
+  background: var(--kerne-track);
+  transition: background-color .18s ease;
+}
+.kerne-strength-label { font-size: 12px; color: var(--kerne-fg-muted); }
+.kerne-strength[data-score="0"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="1"] .kerne-strength-step[data-on] { background: var(--kerne-danger); }
+.kerne-strength[data-score="2"] .kerne-strength-step[data-on] { background: var(--kerne-warning); }
+.kerne-strength[data-score="3"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="4"] .kerne-strength-step[data-on] { background: var(--kerne-success); }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-strength-step { transition: none; }
+}
+.kerne-input::placeholder { color: var(--kerne-fg-subtle); }
+.kerne-input:hover:not(:disabled):not(:focus) { border-color: var(--kerne-fg-subtle); }
+.kerne-input:focus {
+  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, transform .1s ease;
+}
+.kerne-button:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+.kerne-button:disabled { opacity: .5; cursor: not-allowed; }
+/* Tactile press feedback - every control here had hover and focus, none had
+   the third state a real button reports back on. */
+.kerne-button:active:not(:disabled) { transform: scale(.98); }
+/* A disabled primary drops the brand entirely rather than wearing it at half
+   opacity: on a dark theme the light primary faded into an opaque grey slab
+   that read as an enabled button, and a brand colour has no business marking
+   an action you cannot take. Loading is excluded - it is still the real
+   button, just busy. */
+.kerne-button-primary:disabled:not([data-kerne-loading="true"]) {
+  opacity: 1;
+  background: var(--kerne-track);
+  color: var(--kerne-fg-subtle);
+}
+/* A button mid-request is busy, not unavailable - dimming it to the disabled
+   opacity reads as "this stopped working". */
+.kerne-button[data-kerne-loading="true"] { opacity: 1; cursor: progress; }
+.kerne-button .kerne-spinner { width: 15px; height: 15px; border-width: 2px; }
+/* Shadow value matches the existing .kerne-pricing-switch-thumb convention
+   rather than inventing a new one - same soft, barely-there elevation. */
+.kerne-button-primary { background: var(--kerne-primary); color: var(--kerne-primary-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
+.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-switch:active { opacity: .7; }
+
+.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="muted"] { color: var(--kerne-fg-muted); }
+/* The one earned focal moment: checkout confirmed, magic link signed in,
+   password reset, email verified - a real milestone, shared by all five
+   flows through this one component. The circle settles, then the check
+   draws a beat later, so it reads as two beats instead of one flourish. */
+.kerne-status-icon[data-tone="success"] {
+  color: var(--kerne-success);
+  animation: kerne-status-pop .3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.kerne-status-icon[data-tone="success"] svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+  animation: kerne-status-draw .35s ease-out .12s both;
+}
+@keyframes kerne-status-pop { from { opacity: 0; transform: scale(.75); } }
+@keyframes kerne-status-draw { to { stroke-dashoffset: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-status-icon[data-tone="success"] { animation: none; }
+  .kerne-status-icon[data-tone="success"] svg path { animation: none; stroke-dashoffset: 0; }
+}
+.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 ---------- */
+/*
+ * Same grammar as a pricing card's footer, read the other way round: the
+ * figure carries the weight and the feature name recedes under it. The old row
+ * gave both the same size, so "812 / 1,000" and "API calls" competed and the
+ * eye had to choose which one to read first.
+ */
+.kerne-meters { display: flex; flex-direction: column; gap: 22px; }
+.kerne-meter { display: flex; flex-direction: column; gap: 9px; }
+.kerne-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.kerne-meter-name { font-size: 12.5px; font-weight: 400; color: var(--kerne-fg-muted); }
+.kerne-meter-value {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  color: var(--kerne-fg);
+  /* Digits line up between rows instead of jittering as counts change. */
+  font-variant-numeric: tabular-nums;
+}
+.kerne-meter-track { height: 5px; border-radius: 999px; background: var(--kerne-track); overflow: hidden; }
+/* Width still drives live updates (already correct, already tested) - the
+   mount reveal rides a transform instead, since animating width is a layout
+   thrash the fill's own final width never actually needs at first paint. */
+.kerne-meter-fill {
+  height: 100%; border-radius: 999px; background: var(--kerne-fg);
+  transition: width .3s ease;
+  transform-origin: left;
+  animation: kerne-meter-grow-in .5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes kerne-meter-grow-in { from { transform: scaleX(0); } }
+.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: 11.5px; line-height: 1.5; color: var(--kerne-fg-subtle); margin: 0; }
+/* What a soft overage costs is the one number on this screen that is money -
+   it reads at the body weight, not as another footnote. */
+.kerne-meter-cost { color: var(--kerne-fg-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .kerne-meter-fill { transition: none; animation: none; } }
+
+/* ---------- Pricing table ---------- */
+/*
+ * The catalogue grammar, shared with the dashboard's own preview: a card is a
+ * name, one big number, the call to action, and - under a hairline at the very
+ * bottom - what the plan grants as label/value rows.
+ *
+ * The rows are the load-bearing part. A checklist of ticks answers "is it in?"
+ * and hides the number that decides the purchase; a row puts the allowance
+ * where the eye already scans for it, and lets two cards be compared down a
+ * column instead of read one bullet at a time.
+ */
+.kerne-pricing-skeleton { width: 100%; }
+/* A placeholder card has no subgrid to join - it lays its own rows out. */
+.kerne-pricing-card-ghost { display: flex; gap: 18px; }
+.kerne-pricing-ghost-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 14px;
+  border-top: 1px solid var(--kerne-border);
+}
+
+.kerne-pricing-switch-wrap { display: flex; justify-content: center; margin: 24px 0; }
+/*
+ * A filled track with a raised option on it - no outline. The border it used
+ * to carry drew a second edge a few pixels outside the thumb's own, which read
+ * as a control inside a control.
+ */
+.kerne-pricing-switch {
+  position: relative;
+  display: inline-flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--kerne-panel);
+  border-radius: 10px;
+}
+.kerne-pricing-switch-thumb {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  border-radius: 6px;
+  background: var(--kerne-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04);
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.kerne-pricing-switch-option {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--kerne-fg-muted);
+  background: none;
+  border: none;
+  border-radius: 6px;
+  padding: 5px 18px;
+  cursor: pointer;
+  transition: color 0.18s ease;
+}
+.kerne-pricing-switch-option[aria-pressed="true"] { color: var(--kerne-fg); font-weight: 600; }
+.kerne-pricing-switch-option:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
+.kerne-pricing-switch-option:active { opacity: .7; }
+/* Inline in the option, in the brand's own colour - a pill around it made a
+   second control inside the segment, and green claimed a semantic ("success")
+   that a discount does not carry. */
+.kerne-pricing-switch-save {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--kerne-accent);
+}
+
+/* An optional lead-in for a host building a full pricing page. Omitted, the
+   grid is exactly as before - the host's own headline stays the page's. */
+.kerne-pricing-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 11px;
+  text-align: center;
+  margin-bottom: 26px;
+}
+.kerne-pricing-eyebrow {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--kerne-fg-subtle);
+}
+.kerne-pricing-headline {
+  margin: 0;
+  max-width: 22ch;
+  font-size: clamp(26px, 3.4vw, 40px);
+  line-height: 1.06;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  text-wrap: pretty;
+}
+.kerne-pricing-lede {
+  margin: 0;
+  max-width: 48ch;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--kerne-fg-muted);
+  text-wrap: pretty;
+}
+
+/* A plan card carries a name, a price, a button and a feature list, so it needs
+   real width: at 252px the value column collided with its own label and a
+   fourth plan wrapped alone onto a second row. */
+.kerne-pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  align-items: stretch;
+}
+
+.kerne-pricing-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  height: 100%;
+  padding: 26px 24px 22px;
+  background: var(--kerne-surface);
+  border: 1px solid var(--kerne-border);
+  border-radius: calc(var(--kerne-radius) + 6px);
+  transition: border-color .18s ease;
+}
+/*
+ * The featured card is its badge and its filled call to action, nothing more.
+ * A raised background plus a heavier border plus a long shadow said "this one"
+ * three times, and the stack of signals is what made the page read as a
+ * template rather than as a product.
+ */
+.kerne-pricing-card:hover { border-color: var(--kerne-border-strong); }
+.kerne-pricing-card[data-featured="true"] { border-color: var(--kerne-border-strong); }
+.kerne-pricing-card[data-current="true"]:not([data-featured="true"]) { border-color: var(--kerne-border-strong); }
+
+.kerne-pricing-card-head { display: flex; flex-direction: column; gap: 6px; }
+/* The badge shares a line with the NAME, never with the description: a short
+   name leaves it room, and a two-line description keeps the card's full width
+   instead of being squeezed into one word per line. */
+.kerne-pricing-card-titles { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.kerne-pricing-card-name { font-size: 18px; font-weight: 600; letter-spacing: -0.016em; line-height: 1.15; min-width: 0; }
+.kerne-pricing-card-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--kerne-fg-muted); }
+
+/* Inline in the head row, never escaping the card edge: it confirms the filled
+   button below rather than shouting over the plan's own name. */
+.kerne-pricing-badge {
+  flex: none;
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--kerne-accent);
+  background: color-mix(in srgb, var(--kerne-accent) 12%, transparent);
+  padding: 4px 9px;
+  border-radius: 999px;
+}
+
+/* Price, button and trial travel together: the button belongs under the offer
+   it accepts, not pinned to the bottom of a card whose footer is a table. */
+.kerne-pricing-body { display: flex; flex-direction: column; gap: 20px; }
+.kerne-pricing-price { display: flex; flex-direction: column; gap: 4px; }
+.kerne-pricing-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
+.kerne-pricing-amount {
+  font-size: clamp(29px, 3.2vw, 38px);
+  font-weight: 600;
+  letter-spacing: -0.032em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.kerne-pricing-interval { font-size: 12.5px; color: var(--kerne-fg-muted); }
+.kerne-pricing-billed { margin: 0; font-size: 11.5px; color: var(--kerne-fg-subtle); }
+
+.kerne-pricing-cta .kerne-button { width: 100%; }
+
+/* Prepaid sizing: a sunken block inside the card, because what it holds is a
+   control and not a statement. Same grammar as the footer rows above it. */
+.kerne-pricing-sizer {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px 14px 12px;
+  background: var(--kerne-panel);
+  border-radius: var(--kerne-radius);
+}
+.kerne-pricing-sizer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.kerne-pricing-sizer-title {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--kerne-fg-subtle);
+}
+.kerne-pricing-sizer-note { font-size: 11.5px; color: var(--kerne-fg-subtle); }
+.kerne-pricing-sizer-row { display: flex; flex-direction: column; gap: 8px; }
+.kerne-pricing-sizer-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.kerne-pricing-sizer-name { font-size: 12.5px; color: var(--kerne-fg-muted); }
+.kerne-pricing-sizer-value {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--kerne-fg);
+  font-variant-numeric: tabular-nums;
+}
+.kerne-pricing-sizer-foot { font-size: 11.5px; color: var(--kerne-fg-subtle); }
+.kerne-pricing-sizer-foot[data-strong="true"] {
+  color: var(--kerne-fg);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The rail is drawn on the input itself: a wrapper would need the thumb's
+   position mirrored in JS on every frame, and the fill is a gradient stop. */
+.kerne-pricing-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  cursor: ew-resize;
+  display: block;
+}
+.kerne-pricing-range::-webkit-slider-runnable-track {
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--kerne-primary) 0 var(--kerne-fill, 0%),
+    var(--kerne-track) var(--kerne-fill, 0%) 100%
+  );
+}
+.kerne-pricing-range::-moz-range-track {
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--kerne-primary) 0 var(--kerne-fill, 0%),
+    var(--kerne-track) var(--kerne-fill, 0%) 100%
+  );
+}
+.kerne-pricing-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  margin-top: -5px;
+  border-radius: 50%;
+  background: var(--kerne-surface);
+  border: 2px solid var(--kerne-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+.kerne-pricing-range::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--kerne-surface);
+  border: 2px solid var(--kerne-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+.kerne-pricing-range:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 3px; }
+
+/* The value column and its note travel together on the right of a row. */
+.kerne-pricing-feature-side { display: flex; align-items: baseline; gap: 7px; flex: none; }
+.kerne-pricing-feature-note {
+  font: inherit;
+  font-size: 11px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-bottom: 1px dotted var(--kerne-border-strong);
+  color: var(--kerne-fg-subtle);
+  cursor: help;
+}
+.kerne-pricing-feature-note:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 3px; }
+
+/* Opens upward: these notes live in the card's footer, where downward has
+   nowhere to go. Hover AND focus, so a keyboard reaches the same explanation. */
+.kerne-pricing-pop-host { position: relative; display: inline-flex; }
+.kerne-pricing-pop {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 9px);
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  width: 252px;
+  padding: 12px 14px;
+  text-align: left;
+  background: var(--kerne-surface-raised);
+  color: var(--kerne-fg);
+  border: 1px solid var(--kerne-border);
+  border-radius: var(--kerne-radius);
+  box-shadow: var(--kerne-shadow);
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.kerne-pricing-pop-host:hover .kerne-pricing-pop,
+.kerne-pricing-pop-host:focus-within .kerne-pricing-pop {
+  opacity: 1;
+  transform: none;
+}
+.kerne-pricing-pop-title {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--kerne-fg-subtle);
+  padding-bottom: 8px;
+}
+.kerne-pricing-pop-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 4px 0;
+}
+.kerne-pricing-pop-key { font-size: 11.5px; color: var(--kerne-fg-muted); flex: none; }
+.kerne-pricing-pop-value { font-size: 11.5px; font-weight: 500; text-align: right; }
+@media (prefers-reduced-motion: reduce) { .kerne-pricing-pop { transition: none; } }
+/* When nothing is included the rate stands in for the value, so it reads at
+   the value's weight rather than as a footnote. */
+.kerne-pricing-feature-note[data-lead="true"] {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--kerne-fg);
+  font-variant-numeric: tabular-nums;
+}
+.kerne-pricing-trial { margin: -8px 0 0; font-size: 11.5px; text-align: center; color: var(--kerne-fg-subtle); }
+
+/* The footer of the card: one hairline, then what the plan grants. */
+.kerne-pricing-features {
+  list-style: none;
+  margin: auto 0 0;
+  padding: 14px 0 0;
+  border-top: 1px solid var(--kerne-border);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.kerne-pricing-feature {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.kerne-pricing-feature-name { color: var(--kerne-fg-muted); min-width: 0; }
+.kerne-pricing-feature-value {
+  flex: none;
+  font-weight: 500;
+  color: var(--kerne-fg);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.kerne-pricing-feature-more { font-size: 11.5px; color: var(--kerne-fg-subtle); }
+/* A plan that sells at a price but lists nothing is the confusing case - say
+   why instead of leaving a hairline over empty space. */
+.kerne-pricing-feature-empty { font-size: 11.5px; line-height: 1.5; color: var(--kerne-fg-subtle); }
+
+/*
+ * Every card's head and footer sit on the same lines across the row, whatever
+ * each one packs in between. Without it a card with more to say pushes its own
+ * feature table out of line with its neighbours' - the tell that a pricing
+ * table was stacked rather than laid out. Behind @supports: browsers without
+ * subgrid keep the flex column above, which is correct, just not aligned.
+ */
+@supports (grid-template-rows: subgrid) {
+  .kerne-pricing-grid { grid-template-rows: auto auto auto; }
+  .kerne-pricing-card:not(.kerne-pricing-card-ghost) {
+    display: grid;
+    grid-row: span 3;
+    grid-template-rows: subgrid;
+  }
+  /* Four children, and nothing to align with - it keeps the flex column. */
+  .kerne-pricing-card-ghost { grid-row: auto; }
+  /* Heads and footers line up across the row; the body between them keeps its
+     own height, so a plan with nothing to size doesn't get its button dragged
+     down to meet one that has. */
+  .kerne-pricing-body { align-self: start; }
+  .kerne-pricing-features { align-self: end; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kerne-pricing-switch-thumb { transition: none; }
+}
+
+/* ---------- Sections (profile, settings) ---------- */
+.kerne-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.kerne-section-title { font-size: 17px; font-weight: 600; letter-spacing: -0.014em; margin: 0; }
+
+/* One decision per row: the label recedes, the value carries the weight. */
+.kerne-rows { display: flex; flex-direction: column; gap: 11px; }
+.kerne-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13px; }
+.kerne-row dt { color: var(--kerne-fg-muted); margin: 0; }
+.kerne-row dd { margin: 0; font-weight: 500; 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;
+  transition: box-shadow .15s ease;
+}
+/* Focus already gets an outline from .kerne-menu-trigger; hover gets its own
+   ring so the trigger reads as interactive before the menu is even open. */
+.kerne-menu-trigger:hover .kerne-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kerne-accent) 25%, transparent); }
+.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);
+  transform-origin: top right;
+  animation: kerne-menu-in .15s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes kerne-menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .kerne-menu { animation: none; } }
+.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:active { opacity: .7; }
+.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, .kerne-avatar, .kerne-pricing-card { transition: none; }
+  .kerne-button:active:not(:disabled) { transform: none; }
+  .kerne-pricing-card:hover:not([data-featured="true"]) { transform: none; }
+}
+`;
+function extractTokens(css) {
+  const tokens = {};
+  const re = /--kerne-([a-z-]+):\s*([^;]+);/g;
+  let match;
+  while (match = re.exec(css)) {
+    tokens[match[1]] = match[2].trim();
+  }
+  return tokens;
+}
+var ROOT_BLOCK = CSS.match(/\.kerne-root\s*\{([^}]+)\}/)?.[1] ?? "";
+var defaultTokens = {
+  light: extractTokens(ROOT_BLOCK),
+  dark: extractTokens(DARK_TOKENS)
+};
+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/provider.tsx
+import { createContext as createContext3, useEffect, useMemo, useRef } from "react";
+import { Kerne } from "@kerne/server";
+
+// src/ui/primitives.tsx
+import { useId, useState, useContext as useContext2, createContext as createContext2 } from "react";
+
+// src/ui/password.ts
+var MIN_PASSWORD_LENGTH = 8;
+var BASELINE_POLICY = {
+  min_length: MIN_PASSWORD_LENGTH,
+  require_uppercase: false,
+  require_number: false,
+  require_symbol: false
+};
+function resolvePolicy(config) {
+  return config?.password_policy ?? BASELINE_POLICY;
+}
+function passwordRules(password, policy) {
+  const rules = [{ key: "min_length", met: password.length >= policy.min_length }];
+  if (policy.require_uppercase) {
+    rules.push({ key: "require_uppercase", met: /[A-Z]/.test(password) });
+  }
+  if (policy.require_number) {
+    rules.push({ key: "require_number", met: /\d/.test(password) });
+  }
+  if (policy.require_symbol) {
+    rules.push({ key: "require_symbol", met: /[^A-Za-z0-9]/.test(password) });
+  }
+  return rules;
+}
+function meetsPolicy(password, policy) {
+  return passwordRules(password, policy).every((rule) => rule.met);
+}
+function passwordStrength(password) {
+  if (password.length < MIN_PASSWORD_LENGTH) return 0;
+  const variety = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((re) => re.test(password)).length;
+  let score = 1;
+  if (password.length >= 12) score++;
+  if (password.length >= 16) score++;
+  if (variety >= 3) score++;
+  return Math.min(score, 4);
+}
+
+// src/ui/primitives.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InsideShell = createContext2(false);
+var AppearanceContext = createContext2(void 0);
+function useResolvedAppearance(local) {
+  const inherited = useContext2(AppearanceContext);
+  if (!inherited) return local;
+  if (!local) return inherited;
+  return { ...inherited, ...local };
+}
+function Shell({
+  appearance,
+  className,
+  size = "auth",
+  children
+}) {
+  ensureStylesInjected();
+  const nested = useContext2(InsideShell);
+  const resolved = useResolvedAppearance(appearance);
+  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(resolved),
+      "data-kerne-theme": resolveTheme(resolved),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "kerne-shell",
+          "data-kerne-size": size === "wide" ? "wide" : void 0,
+          "data-kerne-surface": resolved?.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 prefersAutoFocus() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(pointer: fine)").matches;
+}
+function Field({
+  label,
+  type,
+  value,
+  onChange,
+  autoComplete,
+  placeholder,
+  disabled,
+  required,
+  invalid,
+  error,
+  action,
+  code,
+  autoFocus,
+  children
+}) {
+  const id = useId();
+  const errorId = `${id}-error`;
+  const noteId = `${id}-note`;
+  const l10n = useLocalization();
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = useState(false);
+  const [capsLock, setCapsLock] = useState(false);
+  const trackCapsLock = (e) => {
+    if (!isPassword) return;
+    setCapsLock(e.getModifierState?.("CapsLock") ?? false);
+  };
+  const describedBy = [error ? errorId : null, children ? noteId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-field", children: [
+    action ? /* @__PURE__ */ jsxs("div", { className: "kerne-label-row", children: [
+      /* @__PURE__ */ jsx("label", { className: "kerne-label", htmlFor: id, children: label }),
+      action
+    ] }) : /* @__PURE__ */ jsx("label", { className: "kerne-label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "kerne-control", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          className: "kerne-input",
+          type: isPassword && revealed ? "text" : type,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          onKeyUp: trackCapsLock,
+          onBlur: () => setCapsLock(false),
+          autoComplete,
+          placeholder,
+          disabled,
+          required,
+          "aria-invalid": invalid || !!error || void 0,
+          "aria-describedby": describedBy || void 0,
+          "data-kerne-code": code ? "true" : void 0,
+          "data-kerne-reveal": isPassword ? "true" : void 0,
+          autoFocus: autoFocus && prefersAutoFocus()
+        }
+      ),
+      isPassword ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "kerne-reveal",
+          onClick: () => setRevealed((v) => !v),
+          disabled,
+          "aria-label": revealed ? l10n.common.hidePassword : l10n.common.showPassword,
+          "aria-pressed": revealed,
+          tabIndex: -1,
+          children: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+        }
+      ) : null
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { id: noteId, children }) : null,
+    capsLock ? /* @__PURE__ */ jsx("p", { className: "kerne-field-note", "data-kerne-warn": "true", role: "status", children: l10n.common.capsLockOn }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "kerne-field-error", id: errorId, role: "alert", children: error }) : null
+  ] });
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.6 6.2A9.9 9.9 0 0 1 12 6c6.4 0 10 7 10 7a15.7 15.7 0 0 1-3 3.7M6.2 7.4A15.6 15.6 0 0 0 2 13s3.6 7 10 7a9.7 9.7 0 0 0 4.3-1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "m3 3 18 18", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function Button({
+  children,
+  variant = "primary",
+  disabled,
+  loading,
+  type = "submit",
+  onClick,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: `kerne-button kerne-button-${variant}`,
+      disabled: disabled || loading,
+      onClick,
+      "aria-label": ariaLabel,
+      "aria-busy": loading || void 0,
+      "data-kerne-loading": loading ? "true" : void 0,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "kerne-spinner", "aria-hidden": "true" }) : null,
+        children
+      ]
+    }
+  );
+}
+function PasswordStrength({
+  password,
+  policy
+}) {
+  const l10n = useLocalization();
+  const resolved = policy ?? resolvePolicy(null);
+  if (!meetsPolicy(password, resolved)) {
+    const labels2 = {
+      min_length: fill(l10n.common.passwordHint, { count: resolved.min_length }),
+      require_uppercase: l10n.common.passwordRequireUppercase,
+      require_number: l10n.common.passwordRequireNumber,
+      require_symbol: l10n.common.passwordRequireSymbol
+    };
+    const rules = passwordRules(password, resolved);
+    if (rules.length === 1) {
+      return /* @__PURE__ */ jsx("p", { className: "kerne-field-note", children: labels2[rules[0].key] });
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "kerne-rules", children: rules.map((rule) => /* @__PURE__ */ jsxs("li", { className: "kerne-rule", "data-met": rule.met ? "true" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: rule.met ? "\u2713" : "\xB7" }),
+      labels2[rule.key]
+    ] }, rule.key)) });
+  }
+  const score = passwordStrength(password);
+  const labels = [
+    l10n.common.strengthWeak,
+    l10n.common.strengthWeak,
+    l10n.common.strengthFair,
+    l10n.common.strengthGood,
+    l10n.common.strengthStrong
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "kerne-strength", "data-score": score, children: [
+    /* @__PURE__ */ jsx("div", { className: "kerne-strength-track", "aria-hidden": "true", children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "kerne-strength-step",
+        "data-on": score >= step ? "true" : void 0
+      },
+      step
+    )) }),
+    /* @__PURE__ */ jsxs("span", { className: "kerne-strength-label", children: [
+      l10n.common.strengthLabel,
+      ": ",
+      labels[score]
+    ] })
+  ] });
+}
+function MethodSwitch({
+  onClick,
+  children
+}) {
+  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" } : { role: "status", "aria-live": "polite" },
+      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/provider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_STORAGE_KEY = "kerne_auth";
+var DEFAULT_REFRESH_BUFFER = 60;
+var HANDOFF_QUERY_PARAM = "kerne_handoff";
+var KerneClient = class {
+  kerne;
+  storage;
+  storageKey;
+  onAuthChange;
+  onHandoffError;
+  autoRefresh;
+  refreshBuffer;
+  refreshTimer = null;
+  listeners = /* @__PURE__ */ new Set();
+  _user = null;
+  _token = null;
+  _refreshToken = null;
+  _expiresAt = null;
+  _isLoading = true;
+  _authConfigPromise = null;
+  baseUrl;
+  appId;
+  constructor(config) {
+    this.baseUrl = config.baseUrl ?? "https://api.kerne.io";
+    this.appId = config.appId;
+    this.storage = config.storage ?? (typeof window !== "undefined" ? localStorage : null);
+    this.storageKey = config.storageKey ?? DEFAULT_STORAGE_KEY;
+    this.onAuthChange = config.onAuthChange;
+    this.onHandoffError = config.onHandoffError;
+    this.autoRefresh = config.autoRefresh ?? true;
+    this.refreshBuffer = config.refreshBuffer ?? DEFAULT_REFRESH_BUFFER;
+    this.kerne = new Kerne({
+      baseUrl: this.baseUrl,
+      appId: this.appId,
+      timeout: config.timeout,
+      // Forwarded so <KerneProvider headers={...}> is actually honored - the
+      // type inherited it from KerneConfig, but the client was dropping it silently.
+      headers: config.headers,
+      onUnauthorized: () => {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("[Kerne] 401 received. Auto-logout disabled in dev.");
+          return;
+        }
+        this.clearSession();
+      }
+    });
+    this.loadSession();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    this.listeners.forEach((l) => l());
+  }
+  get user() {
+    return this._user;
+  }
+  get token() {
+    return this._token;
+  }
+  get isAuthenticated() {
+    return this._token !== null;
+  }
+  get isLoading() {
+    return this._isLoading;
+  }
+  loadSession() {
+    const handoffCode = this.getHandoffCodeFromUrl();
+    if (handoffCode) {
+      void this.exchangeHandoffOnLoad(handoffCode);
+      return;
+    }
+    if (!this.storage) {
+      this._isLoading = false;
+      this.notify();
+      return;
+    }
+    try {
+      const data = this.storage.getItem(this.storageKey);
+      if (data) {
+        const { user, token, refresh_token, expires_at } = JSON.parse(data);
+        const expiresAt = expires_at ? new Date(expires_at) : null;
+        if (!expiresAt || expiresAt > /* @__PURE__ */ new Date()) {
+          this._user = user;
+          this._token = token;
+          this._refreshToken = refresh_token ?? null;
+          this._expiresAt = expiresAt;
+          this.kerne = this.kerne.withToken(token);
+          this.scheduleRefresh();
+        } else if (refresh_token && this.autoRefresh) {
+          this._refreshToken = refresh_token;
+          void this.refreshOnLoad();
+          return;
+        } else {
+          this.storage.removeItem(this.storageKey);
+        }
+      }
+    } catch (e) {
+      console.error("[Kerne] Failed to load session:", e);
+      this.storage?.removeItem(this.storageKey);
+    }
+    this._isLoading = false;
+    this.notify();
+  }
+  getHandoffCodeFromUrl() {
+    if (typeof window === "undefined") return null;
+    return new URLSearchParams(window.location.search).get(HANDOFF_QUERY_PARAM);
+  }
+  /**
+   * Strips only `kerne_handoff` from the URL, leaving the rest of the
+   * path/query (e.g. a `return_to` the host app added) untouched - and
+   * without adding a history entry, so back-navigation doesn't resurrect it.
+   */
+  stripHandoffParamFromUrl() {
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete(HANDOFF_QUERY_PARAM);
+    window.history.replaceState(window.history.state, "", url.toString());
+  }
+  /**
+   * Same shape as `refreshOnLoad`: a bootstrap-only path invoked once from
+   * `loadSession()` when a `kerne_handoff` code is present in the URL,
+   * entirely invisible to the host app - no code on their end required.
+   *
+   * Works no matter which page the browser lands on: `redirectUrl` is a hard
+   * navigation (`window.location.href`), so the destination reloads the SDK
+   * fresh and `loadSession()` reads the code straight off that page's own
+   * URL - there is no dependency on a specific "callback route", as long as
+   * `KerneProvider` wraps whatever the host renders there (normally true when
+   * it is mounted once at the app root).
+   *
+   * One retry on a transient failure (network blip, 5xx) - worth it because
+   * the code was never reached by the server in that case, so it is still
+   * unspent. A 4xx (invalid/expired/already-consumed) is not retried: the
+   * code is gone, retrying only delays the "logged out" outcome.
+   */
+  async exchangeHandoffOnLoad(code) {
+    try {
+      for (let attempt = 0; ; attempt++) {
+        try {
+          const response = await this.kerne.auth.exchangeHandoff(code);
+          await this.saveSession(response);
+          return;
+        } catch (e) {
+          const statusCode = e.statusCode;
+          const transient = statusCode === 0 || typeof statusCode === "number" && statusCode >= 500;
+          if (transient && attempt === 0) {
+            await new Promise((resolve) => setTimeout(resolve, 400));
+            continue;
+          }
+          console.warn("[Kerne] Handoff exchange failed:", e);
+          this.onHandoffError?.(e);
+          return;
+        }
+      }
+    } finally {
+      this.stripHandoffParamFromUrl();
+      this._isLoading = false;
+      this.notify();
+    }
+  }
+  async refreshOnLoad() {
+    try {
+      const response = await this.kerne.auth.refreshToken({
+        refresh_token: this._refreshToken
+      });
+      await this.saveSession(response);
+    } catch (e) {
+      console.warn("[Kerne] Startup refresh failed, clearing session:", e);
+      this._refreshToken = null;
+      this.storage?.removeItem(this.storageKey);
+    } finally {
+      this._isLoading = false;
+      this.notify();
+    }
+  }
+  /**
+   * `AuthResponse.user` is the minimal `{id, email, role}` claim set the
+   * token endpoint returns, not the full profile (`User`) - so this always
+   * follows up with `users.me()` rather than assigning it directly (that
+   * used to leave `_user` looking like a `User` while actually missing
+   * `email_verified`/`first_name`/`avatar`/etc).
+   */
+  async saveSession(response) {
+    this._token = response.token;
+    this._refreshToken = response.refresh_token;
+    this._expiresAt = response.expires_at ? new Date(response.expires_at) : null;
+    this.kerne = this.kerne.withToken(response.token);
+    try {
+      this._user = await this.kerne.users.me();
+    } catch (e) {
+      const sameUser = this._user?.id === response.user?.id;
+      console.error("[Kerne] Failed to load the user profile:", e);
+      this._user = sameUser ? this._user : null;
+    }
+    if (this.storage) {
+      this.storage.setItem(
+        this.storageKey,
+        JSON.stringify({
+          user: this._user,
+          token: response.token,
+          refresh_token: response.refresh_token,
+          expires_at: response.expires_at
+        })
+      );
+    }
+    this.scheduleRefresh();
+    this.onAuthChange?.(this._user);
+    this.notify();
+  }
+  clearSession() {
+    this._user = null;
+    this._token = null;
+    this._refreshToken = null;
+    this._expiresAt = null;
+    this.cancelRefresh();
+    if (this.storage) {
+      this.storage.removeItem(this.storageKey);
+    }
+    this.onAuthChange?.(null);
+    this.notify();
+  }
+  scheduleRefresh() {
+    if (!this.autoRefresh || !this._expiresAt) return;
+    this.cancelRefresh();
+    const now = Date.now();
+    const expiry = this._expiresAt.getTime();
+    const refreshAt = expiry - this.refreshBuffer * 1e3;
+    const delay = Math.max(0, refreshAt - now);
+    if (delay > 0) {
+      this.refreshTimer = setTimeout(() => this.silentRefresh(), delay);
+    }
+  }
+  cancelRefresh() {
+    if (this.refreshTimer) {
+      clearTimeout(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+  async silentRefresh() {
+    if (!this._refreshToken) return;
+    try {
+      const response = await this.kerne.auth.refreshToken({ refresh_token: this._refreshToken });
+      await this.saveSession(response);
+      console.debug("[Kerne] Session refreshed silently");
+    } catch (e) {
+      console.warn("[Kerne] Silent refresh failed:", e);
+    }
+  }
+  async register(params) {
+    const [firstName, ...lastNameParts] = (params.name || "").split(" ");
+    const response = await this.kerne.auth.signup({
+      email: params.email,
+      password: params.password,
+      first_name: firstName || void 0,
+      last_name: lastNameParts.join(" ") || void 0,
+      invitationToken: params.invitationToken,
+      invitationCode: params.invitationCode
+    });
+    await this.saveSession(response);
+    return response;
+  }
+  async login(params) {
+    const response = await this.kerne.auth.login(params);
+    await this.saveSession(response);
+    return response;
+  }
+  /** Manually trigger a token refresh - normally handled automatically by `autoRefresh`. */
+  async refreshToken() {
+    if (!this._refreshToken) return null;
+    const response = await this.kerne.auth.refreshToken({ refresh_token: this._refreshToken });
+    await this.saveSession(response);
+    return response;
+  }
+  logout() {
+    this.clearSession();
+  }
+  async refreshUser() {
+    if (!this._token) return null;
+    try {
+      const user = await this.kerne.users.me();
+      this._user = user;
+      this.onAuthChange?.(user);
+      this.notify();
+      return user;
+    } catch {
+      this.clearSession();
+      return null;
+    }
+  }
+  // No `avatar` here - UpdateUserDto doesn't accept it server-side
+  // (`forbidNonWhitelisted` rejects the field with a 400).
+  async updateProfile(params) {
+    if (!this._user) throw new Error("User not authenticated");
+    const updated = await this.kerne.users.update(this._user.id, params);
+    this._user = updated;
+    if (this.storage && this._token) {
+      try {
+        const data = this.storage.getItem(this.storageKey);
+        if (data) {
+          const session = JSON.parse(data);
+          session.user = updated;
+          this.storage.setItem(this.storageKey, JSON.stringify(session));
+        }
+      } catch (e) {
+      }
+    }
+    this.onAuthChange?.(updated);
+    this.notify();
+    return updated;
+  }
+  async updatePassword(params) {
+    await this.kerne.auth.changePassword(params);
+  }
+  /** Soft-deletes (deactivates) the caller's own account, then clears the local session. */
+  async requestAccountDeletion() {
+    await this.kerne.auth.requestAccountDeletion();
+    this.clearSession();
+  }
+  /** Forgot-password flow (logged out) - sends the reset email. */
+  async requestPasswordReset(email) {
+    await this.kerne.auth.requestPasswordReset(email);
+  }
+  /** Confirms a password reset with the token from the email. */
+  async confirmPasswordReset(token, password) {
+    await this.kerne.auth.confirmPasswordReset(token, password);
+  }
+  /**
+   * Sends a magic-link email (logged out). Anti-enumeration: always resolves,
+   * regardless of whether the email is registered.
+   */
+  async startPasswordless(email, invitation) {
+    await this.kerne.auth.startPasswordless(email, invitation);
+  }
+  /** Completes a magic-link login using the `token` query param from the emailed link. */
+  async loginWithMagicLink(token) {
+    const response = await this.kerne.auth.loginWithMagicLink(token);
+    await this.saveSession(response);
+    return response;
+  }
+  // Account Activation
+  // Same token/endpoint for an admin-created user and a self-service
+  // magic-link signup confirmation - see AuthResource.getActivationContext.
+  /** Read-only: which UI to render for an activation token, without consuming it. */
+  async getActivationContext(token) {
+    return this.kerne.auth.getActivationContext(token);
+  }
+  /** Completes activation (sets a password or confirms magic-link mode), then logs the user in. */
+  async completeActivation(token, password) {
+    const response = await this.kerne.auth.completeActivation(token, password);
+    await this.saveSession(response);
+    return response;
+  }
+  // Cross-Origin Session Handoff
+  // For a hosted auth origin (auth on its own domain, separate from the
+  // tenant's app): call this at the end of a successful auth flow
+  // (login/magic-link/register/activation) instead of
+  // a plain `window.location.href = url` whenever `url` isn't same-origin -
+  // the exchange on the other end is picked up automatically by
+  // `exchangeHandoffOnLoad()`, no code required on the tenant app's side.
+  /**
+   * Mints a handoff code for the current session and redirects the browser
+   * to `url` with it attached (`?kerne_handoff=...`) - never the real
+   * token/refresh_token, which would otherwise leak into server logs,
+   * browser history, and third-party `Referer` headers on the landing page.
+   */
+  async redirectWithSession(url) {
+    const { code } = await this.kerne.auth.handoff();
+    const separator = url.includes("?") ? "&" : "?";
+    const target = `${url}${separator}${HANDOFF_QUERY_PARAM}=${encodeURIComponent(code)}`;
+    if (typeof window !== "undefined") window.location.href = target;
+  }
+  /**
+   * The tenant's public auth config - which sign-in methods to render, whether
+   * registration is open, whether to show Kerne branding.
+   *
+   * Deduped on the in-flight promise rather than the resolved value: the
+   * prebuilt forms all read this on mount, and two of them mounted together
+   * (a login screen with a register link prefetching) would otherwise fire two
+   * identical requests before either resolved. Cached for the client's
+   * lifetime - this config changes on the order of "the owner edited their
+   * settings", not per render.
+   */
+  async getAuthConfig() {
+    if (!this._authConfigPromise) {
+      this._authConfigPromise = this.kerne.auth.config().catch((e) => {
+        this._authConfigPromise = null;
+        throw e;
+      });
+    }
+    return this._authConfigPromise;
+  }
+  /**
+   * Errors are not swallowed here (unlike the old implementation, which
+   * caught everything and returned `false`) - a 401/500 must not be
+   * indistinguishable from a real denial, that's exactly what let the
+   * `has_access`/`allowed` mismatch below ship unnoticed. Callers that want
+   * a fail-closed boolean regardless of the reason (e.g. `<Access>`)
+   * catch around this themselves.
+   */
+  async allows(featureKey, requested) {
+    const check = await this.kerne.check(featureKey, { requested });
+    return check.allowed;
+  }
+  /** Full entitlement detail (limit/used/remaining/overage) - use `allows()` for a plain boolean. */
+  async check(featureKey, requested) {
+    return this.kerne.check(featureKey, { requested });
+  }
+  /** Atomically check a QUOTA limit and commit the consumption. Reports for the signed-in subject. */
+  async consume(featureKey, params) {
+    return this.kerne.consume(featureKey, params);
+  }
+  /** Report usage without a limit check, for the signed-in subject. See `reportUsageBatch()` for many at once. */
+  async reportUsage(featureKey, params) {
+    return this.kerne.reportUsage(featureKey, { subject: this.requireUserId(), ...params });
+  }
+  /** Several usage events in one request instead of one call each - kills the manual request staggering. */
+  async reportUsageBatch(events) {
+    const subject = this.requireUserId();
+    return this.kerne.reportUsageBatch(events.map((e) => ({ subject, ...e })));
+  }
+  requireUserId() {
+    const id = this.user?.id;
+    if (!id) throw new Error("reportUsage requires a signed-in user; none is loaded yet.");
+    return id;
+  }
+  async createCheckout(planPriceId, drivers) {
+    const { url } = await this.kerne.billing.checkout(planPriceId, { drivers });
+    return url;
+  }
+  async openCheckout(planPriceId, drivers) {
+    const url = await this.createCheckout(planPriceId, drivers);
+    if (typeof window !== "undefined") window.location.href = url;
+  }
+  async createPortal() {
+    const { url } = await this.kerne.billing.portal();
+    return url;
+  }
+  async openPortal() {
+    const url = await this.createPortal();
+    if (typeof window !== "undefined") window.location.href = url;
+  }
+  async getSubscription(productSlug) {
+    const subs = await this.kerne.billing.subscriptions.list({
+      productSlug,
+      subjectType: "USER"
+    });
+    const active = subs.find(
+      (s) => s.status === "ACTIVE" || s.status === "TRIALING" || s.status === "PAST_DUE"
+    );
+    return active ?? null;
+  }
+  /** `immediately: true` ends it now; otherwise cancels at period end (API default). */
+  async cancelSubscription(subscriptionId, immediately) {
+    return this.kerne.billing.subscriptions.cancel(subscriptionId, immediately);
+  }
+  /** Swaps the plan/price, effective immediately - deferring a downgrade isn't supported yet. */
+  async changeSubscriptionPlan(subscriptionId, planPriceId, options) {
+    return this.kerne.billing.subscriptions.changePlanPrice(subscriptionId, planPriceId, options);
+  }
+  /** Public pricing data - omit `productIdOrSlug` for the tenant's default product. */
+  async getPlans(productIdOrSlug) {
+    return this.kerne.billing.plans(productIdOrSlug);
+  }
+  /** Every entitlement for the current user in one call - for a "your plan" screen. */
+  async getEntitlements() {
+    return this.kerne.entitlements();
+  }
+  /** Usage for the current user - all QUOTA features, or one via `featureKey`. */
+  async getUsage(featureKey) {
+    return this.kerne.usage({ featureKey });
+  }
+  async joinWaitlist(params) {
+    return this.kerne.waitlist.join(params);
+  }
+  /** Validate an invitation token before showing the registration form. */
+  async validateInvitationToken(token) {
+    return this.kerne.invitations.validateToken(token);
+  }
+  /** Validate an invitation code before showing the registration form. */
+  async validateInvitationCode(code) {
+    return this.kerne.invitations.validateCode(code);
+  }
+  async sendVerificationEmail(verificationType = "code") {
+    await this.kerne.auth.sendVerificationEmail(verificationType);
+  }
+  async verifyEmailWithCode(code) {
+    return await this.kerne.auth.verifyEmailWithCode(code);
+  }
+  async verifyEmailWithLink(token) {
+    return await this.kerne.auth.verifyEmailWithLink(token);
+  }
+  async getVerificationStatus() {
+    return await this.kerne.auth.getVerificationStatus();
+  }
+};
+var KerneContext = createContext3(null);
+function KerneProvider({
+  children,
+  localization,
+  appearance,
+  ...config
+}) {
+  const clientRef = useRef(null);
+  const client = useMemo(() => {
+    if (!clientRef.current) {
+      clientRef.current = new KerneClient(config);
+    }
+    return clientRef.current;
+  }, [config.appId, config.baseUrl]);
+  useEffect(() => {
+    return () => {
+      client.cancelRefresh?.();
+    };
+  }, [client]);
+  const l10n = useMemo(() => mergeLocalization(localization), [localization]);
+  return /* @__PURE__ */ jsx2(KerneContext.Provider, { value: client, children: /* @__PURE__ */ jsx2(LocalizationContext.Provider, { value: l10n, children: /* @__PURE__ */ jsx2(AppearanceContext.Provider, { value: appearance, children }) }) });
+}
+
+// src/hooks.ts
+import { useContext as useContext3, useSyncExternalStore, useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+function useClient() {
+  const context = useContext3(KerneContext);
+  if (!context) {
+    throw new Error("useClient must be used within a KerneProvider");
+  }
+  return context;
+}
+function useAuth() {
+  const client = useClient();
+  const user = useSyncExternalStore(
+    (callback) => client.subscribe(callback),
+    () => client.user,
+    () => client.user
+    // Server snapshot
+  );
+  const token = useSyncExternalStore(
+    (callback) => client.subscribe(callback),
+    () => client.token,
+    () => null
+    // Server always null
+  );
+  const isAuthenticated = useSyncExternalStore(
+    (callback) => client.subscribe(callback),
+    () => client.isAuthenticated,
+    () => false
+    // Server always unauthenticated
+  );
+  const isLoading = useSyncExternalStore(
+    (callback) => client.subscribe(callback),
+    () => client.isLoading,
+    () => true
+    // Server always loading
+  );
+  return {
+    user,
+    token,
+    isAuthenticated,
+    isLoading,
+    login: useCallback2(
+      (params) => client.login(params),
+      [client]
+    ),
+    register: useCallback2(
+      (params) => client.register(params),
+      [client]
+    ),
+    logout: useCallback2(() => client.logout(), [client]),
+    refreshUser: useCallback2(() => client.refreshUser(), [client]),
+    refreshToken: useCallback2(() => client.refreshToken(), [client]),
+    updateProfile: useCallback2(
+      (params) => client.updateProfile(params),
+      [client]
+    ),
+    updatePassword: useCallback2(
+      (params) => client.updatePassword(params),
+      [client]
+    ),
+    requestAccountDeletion: useCallback2(() => client.requestAccountDeletion(), [client]),
+    requestPasswordReset: useCallback2(
+      (email) => client.requestPasswordReset(email),
+      [client]
+    ),
+    confirmPasswordReset: useCallback2(
+      (token2, password) => client.confirmPasswordReset(token2, password),
+      [client]
+    ),
+    // Magic link
+    startPasswordless: useCallback2(
+      (email, invitation) => client.startPasswordless(email, invitation),
+      [client]
+    ),
+    loginWithMagicLink: useCallback2((token2) => client.loginWithMagicLink(token2), [client]),
+    // Email verification
+    sendVerificationEmail: useCallback2(
+      (verificationType = "code") => client.sendVerificationEmail(verificationType),
+      [client]
+    ),
+    verifyEmailWithCode: useCallback2((code) => client.verifyEmailWithCode(code), [client]),
+    verifyEmailWithLink: useCallback2(
+      (token2) => client.verifyEmailWithLink(token2),
+      [client]
+    ),
+    getVerificationStatus: useCallback2(() => client.getVerificationStatus(), [client]),
+    // Account activation (admin-created user, or self-service magic-link signup confirmation)
+    getActivationContext: useCallback2(
+      (token2) => client.getActivationContext(token2),
+      [client]
+    ),
+    completeActivation: useCallback2(
+      (token2, password) => client.completeActivation(token2, password),
+      [client]
+    ),
+    // Cross-origin handoff (hosted auth origin -> tenant app_url) - see redirectWithSession on KerneClient.
+    redirectWithSession: useCallback2((url) => client.redirectWithSession(url), [client])
+  };
+}
+function useCheckout() {
+  const client = useClient();
+  return {
+    createCheckout: useCallback2(
+      (planPriceId, drivers) => client.createCheckout(planPriceId, drivers),
+      [client]
+    ),
+    openCheckout: useCallback2(
+      (planPriceId, drivers) => client.openCheckout(planPriceId, drivers),
+      [client]
+    )
+  };
+}
+function usePortal() {
+  const client = useClient();
+  return {
+    createPortal: useCallback2(() => client.createPortal(), [client]),
+    openPortal: useCallback2(() => client.openPortal(), [client])
+  };
+}
+function useCancelSubscription() {
+  const client = useClient();
+  const [isCanceling, setIsCanceling] = useState2(false);
+  const cancelSubscription = useCallback2(
+    async (subscriptionId, immediately) => {
+      setIsCanceling(true);
+      try {
+        return await client.cancelSubscription(subscriptionId, immediately);
+      } finally {
+        setIsCanceling(false);
+      }
+    },
+    [client]
+  );
+  return { cancelSubscription, isCanceling };
+}
+function useChangePlan() {
+  const client = useClient();
+  const [isChanging, setIsChanging] = useState2(false);
+  const changePlan = useCallback2(
+    async (subscriptionId, planPriceId, options) => {
+      setIsChanging(true);
+      try {
+        return await client.changeSubscriptionPlan(subscriptionId, planPriceId, options);
+      } finally {
+        setIsChanging(false);
+      }
+    },
+    [client]
+  );
+  return { changePlan, isChanging };
+}
+function usePlanSwitch(subscription, refetchSubscription) {
+  const { openCheckout } = useCheckout();
+  const { changePlan } = useChangePlan();
+  const [pending, setPending] = useState2(null);
+  const [switching, setSwitching] = useState2(false);
+  const [switchError, setSwitchError] = useState2(null);
+  const [checkoutPriceId, setCheckoutPriceId] = useState2(null);
+  const [checkoutError, setCheckoutError] = useState2(null);
+  const selectPlan = useCallback2(
+    async (plan, price, drivers) => {
+      if (subscription) {
+        setSwitchError(null);
+        setPending({ plan, price });
+        return;
+      }
+      setCheckoutError(null);
+      setCheckoutPriceId(price.id);
+      try {
+        await openCheckout(price.id, drivers);
+      } catch (e) {
+        setCheckoutError(e);
+        setCheckoutPriceId(null);
+      }
+    },
+    [subscription, openCheckout]
+  );
+  const confirmSwitch = useCallback2(async () => {
+    if (!pending || !subscription) return;
+    setSwitching(true);
+    setSwitchError(null);
+    try {
+      await changePlan(subscription.id, pending.price.id);
+      setPending(null);
+      refetchSubscription();
+    } catch (e) {
+      setSwitchError(e);
+    } finally {
+      setSwitching(false);
+    }
+  }, [pending, subscription, changePlan, refetchSubscription]);
+  const dismissSwitch = useCallback2(() => {
+    setPending(null);
+    setSwitchError(null);
+  }, []);
+  return {
+    pending,
+    switching,
+    switchError,
+    checkoutPriceId,
+    checkoutError,
+    selectPlan,
+    confirmSwitch,
+    dismissSwitch
+  };
+}
+function useAccess(featureKey, requested) {
+  const client = useClient();
+  const [state, setState] = useState2({
+    details: null,
+    // Fails closed: an unresolved or failed check must never read as a yes,
+    // since this is what gates paid capability.
+    allowed: false,
+    isLoading: true,
+    error: null
+  });
+  useEffect2(() => {
+    let mounted = true;
+    client.check(featureKey, requested).then((details) => {
+      if (mounted) {
+        setState({ details, allowed: details.allowed, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ details: null, allowed: false, isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client, featureKey, requested]);
+  return state;
+}
+function useSubscription(productSlug) {
+  const client = useClient();
+  const [state, setState] = useState2({
+    subscription: null,
+    isLoading: true,
+    error: null
+  });
+  const fetchOnce = useCallback2(
+    (mountedRef) => {
+      client.getSubscription(productSlug).then((subscription) => {
+        if (mountedRef.current) {
+          setState({ subscription, isLoading: false, error: null });
+        }
+      }).catch((error) => {
+        if (mountedRef.current) {
+          setState({ subscription: null, isLoading: false, error });
+        }
+      });
+    },
+    [client, productSlug]
+  );
+  useEffect2(() => {
+    const mountedRef = { current: true };
+    fetchOnce(mountedRef);
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fetchOnce]);
+  const refetch = useCallback2(() => {
+    setState((prev) => ({ ...prev, isLoading: true }));
+    fetchOnce({ current: true });
+  }, [fetchOnce]);
+  const isActive = state.subscription?.status === "ACTIVE" || state.subscription?.status === "TRIALING";
+  const planSlug = state.subscription?.plan?.slug;
+  return {
+    ...state,
+    isActive,
+    planSlug,
+    refetch
+  };
+}
+function usePlans(productIdOrSlug) {
+  const client = useClient();
+  const [state, setState] = useState2({
+    plans: [],
+    isLoading: true,
+    error: null
+  });
+  useEffect2(() => {
+    let mounted = true;
+    client.getPlans(productIdOrSlug).then((plans) => {
+      if (mounted) {
+        setState({ plans, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ plans: [], isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client, productIdOrSlug]);
+  return state;
+}
+function useAuthConfig() {
+  const client = useClient();
+  const [state, setState] = useState2({
+    config: null,
+    isLoading: true,
+    error: null
+  });
+  useEffect2(() => {
+    let mounted = true;
+    client.getAuthConfig().then((config) => {
+      if (mounted) {
+        setState({ config, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ config: null, isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+  return state;
+}
+var hasWarnedEntitlementsIsNotAGate = false;
+function warnEntitlementsIsNotAGate() {
+  if (hasWarnedEntitlementsIsNotAGate || process.env.NODE_ENV !== "development") return;
+  hasWarnedEntitlementsIsNotAGate = true;
+  console.warn(
+    "[Kerne] useEntitlements() returns a cached snapshot for display - it has no `allowed` field and can be stale. Gate access with useAccess() (or kerne.allows()/enforce()), never by reading limit/remaining/enabled from this list yourself."
+  );
+}
+function useEntitlements() {
+  const client = useClient();
+  const [state, setState] = useState2({
+    entitlements: null,
+    isLoading: true,
+    error: null
+  });
+  useEffect2(() => {
+    let mounted = true;
+    warnEntitlementsIsNotAGate();
+    client.getEntitlements().then((entitlements) => {
+      if (mounted) {
+        setState({ entitlements, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ entitlements: null, isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client]);
+  return state;
+}
+function useUsage(featureKey) {
+  const client = useClient();
+  const [state, setState] = useState2({
+    usage: [],
+    isLoading: true,
+    error: null
+  });
+  useEffect2(() => {
+    let mounted = true;
+    client.getUsage(featureKey).then((usage) => {
+      if (mounted) {
+        setState({ usage, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ usage: [], isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client, featureKey]);
+  return state;
+}
+function useReportUsage() {
+  const client = useClient();
+  return {
+    consume: useCallback2(
+      (featureKey, params) => client.consume(featureKey, params),
+      [client]
+    ),
+    report: useCallback2(
+      (featureKey, params) => client.reportUsage(featureKey, params),
+      [client]
+    ),
+    reportBatch: useCallback2(
+      (events) => client.reportUsageBatch(events),
+      [client]
+    )
+  };
+}
+function useWaitlist() {
+  const client = useClient();
+  return {
+    join: useCallback2((params) => client.joinWaitlist(params), [client])
+  };
+}
+function useInvitation(params) {
+  const client = useClient();
+  const { token, code } = params;
+  const [state, setState] = useState2({
+    result: null,
+    isLoading: !!(token || code),
+    error: null
+  });
+  useEffect2(() => {
+    if (!token && !code) {
+      setState({ result: null, isLoading: false, error: null });
+      return;
+    }
+    let mounted = true;
+    const validate = token ? client.validateInvitationToken(token) : client.validateInvitationCode(code);
+    validate.then((result) => {
+      if (mounted) {
+        setState({ result, isLoading: false, error: null });
+      }
+    }).catch((error) => {
+      if (mounted) {
+        setState({ result: null, isLoading: false, error });
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [client, token, code]);
+  return state;
+}
+function useUser() {
+  const { user, isLoading, updateProfile } = useAuth();
+  return {
+    user,
+    isLoading,
+    update: updateProfile,
+    // Computed properties
+    fullName: user ? `${user.first_name || ""} ${user.last_name || ""}`.trim() : null,
+    initials: user ? `${user.first_name?.[0] || ""}${user.last_name?.[0] || ""}`.toUpperCase() : null,
+    email: user?.email || null,
+    emailVerified: user?.email_verified || false
+  };
+}
+
+// src/ui/locales/fr.ts
+var fr = {
+  common: {
+    email: "E-mail",
+    emailPlaceholder: "vous@entreprise.com",
+    password: "Mot de passe",
+    passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+    name: "Nom",
+    namePlaceholder: "Ada Lovelace",
+    cancel: "Annuler",
+    continue: "Continuer",
+    or: "ou",
+    thisApp: "Cette application",
+    backToSignIn: "Retour \xE0 la connexion",
+    sending: "Envoi en cours...",
+    continueWith: "Continuer avec {provider}",
+    securedByKerne: "S\xE9curis\xE9 par Kerne",
+    loading: "Chargement",
+    showPassword: "Afficher le mot de passe",
+    hidePassword: "Masquer le mot de passe",
+    capsLockOn: "Verr. Maj. activ\xE9",
+    passwordHint: "Au moins {count} caract\xE8res",
+    passwordRequireUppercase: "Une majuscule",
+    passwordRequireNumber: "Un chiffre",
+    passwordRequireSymbol: "Un caract\xE8re sp\xE9cial",
+    strengthLabel: "Robustesse du mot de passe",
+    strengthWeak: "Faible",
+    strengthFair: "Moyen",
+    strengthGood: "Bon",
+    strengthStrong: "Fort"
+  },
+  signIn: {
+    title: "Content de vous revoir",
+    signUpPrompt: "Premi\xE8re visite ?",
+    signUpLink: "S'inscrire gratuitement",
+    signUpForApp: "S'inscrire sur {app}",
+    submit: "Se connecter",
+    submitting: "Connexion en cours...",
+    magicSubmit: "M\u2019envoyer un lien de connexion",
+    magicSubmitting: "Envoi du lien...",
+    magicSubtitle: "Nous vous enverrons un lien de connexion par e-mail.",
+    forgotPassword: "Mot de passe oubli\xE9 ?",
+    useMagicLink: "Recevoir un lien de connexion \xE0 la place",
+    usePassword: "Se connecter avec un mot de passe",
+    linkSent: "Consultez votre bo\xEEte de r\xE9ception - si un compte existe pour {email}, un lien de connexion est en route.",
+    unavailable: "La connexion n'est pas disponible pour le moment. Contactez votre administrateur.",
+    loadFailed: "Impossible de charger les options de connexion. Actualisez la page."
+  },
+  signUp: {
+    title: "Cr\xE9ez votre compte",
+    titleWithApp: "Cr\xE9ez votre compte {app}",
+    signInPrompt: "D\xE9j\xE0 inscrit ?",
+    signInLink: "Se connecter",
+    submit: "Cr\xE9er le compte",
+    submitting: "Cr\xE9ation du compte...",
+    magicSubmit: "M\u2019envoyer un lien d'inscription",
+    magicSubmitting: "Envoi du lien...",
+    invitationCode: "Code d'invitation",
+    invitationNeeded: "Une invitation est n\xE9cessaire pour s'inscrire.",
+    closedTitle: "Les inscriptions sont ferm\xE9es",
+    closedBody: "{app} n'accepte pas de nouveaux comptes pour le moment.",
+    linkSent: "Consultez votre bo\xEEte de r\xE9ception - nous avons envoy\xE9 un lien \xE0 {email}. L\u2019ouvrir confirme votre adresse et vous connecte.",
+    useMagicLink: "Recevoir un lien d'inscription \xE0 la place",
+    usePassword: "S'inscrire avec un mot de passe",
+    unavailable: "L'inscription n'est pas disponible pour le moment. Contactez votre administrateur.",
+    loadFailed: "Impossible de charger les options d'inscription. Actualisez la page."
+  },
+  resetPassword: {
+    requestTitle: "R\xE9initialisez votre mot de passe",
+    requestSubtitle: "Nous vous enverrons un lien par e-mail pour choisir un nouveau mot de passe.",
+    requestSubmit: "M\u2019envoyer un lien de r\xE9initialisation",
+    requestSubmitting: "Envoi du lien...",
+    requestSent: "Consultez votre bo\xEEte de r\xE9ception - si un compte existe pour {email}, un lien de r\xE9initialisation est en route.",
+    rememberedPrompt: "Vous vous en souvenez ?",
+    title: "Choisissez un nouveau mot de passe",
+    subtitle: "Choisissez un mot de passe que vous n'avez pas d\xE9j\xE0 utilis\xE9.",
+    newPassword: "Nouveau mot de passe",
+    confirmPassword: "Confirmez le nouveau mot de passe",
+    mismatch: "Les deux mots de passe doivent \xEAtre identiques.",
+    submit: "Mettre \xE0 jour le mot de passe",
+    submitting: "Mise \xE0 jour...",
+    doneTitle: "Mot de passe mis \xE0 jour",
+    doneBody: "Vous pouvez maintenant vous connecter avec votre nouveau mot de passe.",
+    incompleteTitle: "Ce lien est incomplet",
+    incompleteBody: "Il lui manque son jeton de r\xE9initialisation. Demandez un nouvel e-mail et r\xE9essayez."
+  },
+  magicLink: {
+    pendingTitle: "Connexion en cours",
+    pendingBody: "Un instant, le temps de v\xE9rifier votre lien.",
+    doneTitle: "Vous \xEAtes connect\xE9",
+    doneBody: "Vous pouvez fermer cet onglet s'il ne se redirige pas automatiquement.",
+    failedTitle: "Ce lien n'a pas fonctionn\xE9",
+    missingToken: "Il manque le jeton de connexion \xE0 ce lien."
+  },
+  verifyEmail: {
+    title: "V\xE9rifiez votre e-mail",
+    subtitle: "Saisissez le code \xE0 6 chiffres que nous vous avons envoy\xE9 par e-mail.",
+    code: "Code de v\xE9rification",
+    submit: "V\xE9rifier l'e-mail",
+    submitting: "V\xE9rification...",
+    resend: "Vous ne l'avez pas re\xE7u ? Envoyer un nouveau code",
+    resent: "Un nouveau code est en route.",
+    verifyingTitle: "V\xE9rification de votre e-mail",
+    verifyingBody: "Un instant, le temps de confirmer votre lien.",
+    doneTitle: "E-mail v\xE9rifi\xE9",
+    doneBody: "Votre adresse est confirm\xE9e. Vous pouvez continuer.",
+    failedTitle: "Ce lien n'a pas fonctionn\xE9",
+    newCode: "Envoyer un nouveau code"
+  },
+  activate: {
+    title: "Activez votre compte",
+    credentialsSubtitle: "D\xE9finissez un mot de passe pour {email} afin de terminer.",
+    magicSubtitle: "Confirmez {email} pour terminer la configuration de votre compte.",
+    confirmPassword: "Confirmez le mot de passe",
+    mismatch: "Les deux mots de passe doivent \xEAtre identiques.",
+    submit: "Activer mon compte",
+    submitting: "Activation...",
+    failedTitle: "Ce lien n'a pas fonctionn\xE9",
+    missingToken: "Il lui manque son jeton d'activation. Demandez une nouvelle invitation.",
+    goToSignIn: "Aller \xE0 la connexion"
+  },
+  waitlist: {
+    title: "Rejoindre la liste d'attente",
+    subtitle: "Nous vous enverrons un e-mail d\xE8s qu\u2019une place se lib\xE8re.",
+    submit: "Rejoindre la liste d'attente",
+    submitting: "Ajout en cours...",
+    joined: "Vous \xEAtes sur la liste. Nous vous recontacterons."
+  },
+  profile: {
+    navLabel: "Sections du compte",
+    tabProfile: "Profil",
+    tabSecurity: "S\xE9curit\xE9",
+    tabBilling: "Facturation",
+    profileTitle: "Profil",
+    profileDesc: "Votre nom et l'adresse avec laquelle vous vous connectez.",
+    securityTitle: "S\xE9curit\xE9",
+    securityDesc: "G\xE9rez votre mot de passe et votre compte.",
+    billingTitle: "Facturation",
+    billingDesc: "Votre offre, votre consommation, et comment la modifier.",
+    firstName: "Pr\xE9nom",
+    firstNamePlaceholder: "Camille",
+    lastName: "Nom",
+    lastNamePlaceholder: "Dupont",
+    save: "Enregistrer",
+    saving: "Enregistrement...",
+    saved: "Votre profil a \xE9t\xE9 enregistr\xE9.",
+    emailSectionTitle: "Adresse e-mail",
+    emailSectionDesc: "L'adresse avec laquelle vous vous connectez. Contactez le support pour la modifier.",
+    verified: "V\xE9rifi\xE9e",
+    unverified: "Non v\xE9rifi\xE9e",
+    verify: "V\xE9rifier",
+    verificationSent: "E-mail de v\xE9rification envoy\xE9.",
+    unnamed: "Sans nom"
+  },
+  security: {
+    passwordTitle: "Mot de passe",
+    passwordDesc: "Utilis\xE9 avec votre e-mail pour vous connecter.",
+    currentPassword: "Mot de passe actuel",
+    newPassword: "Nouveau mot de passe",
+    confirmPassword: "Confirmez le nouveau mot de passe",
+    submit: "Changer le mot de passe",
+    submitting: "Modification...",
+    changed: "Votre mot de passe a \xE9t\xE9 modifi\xE9.",
+    mismatch: "Les deux mots de passe doivent \xEAtre identiques.",
+    sameAsCurrent: "Votre nouveau mot de passe doit \xEAtre diff\xE9rent de l\u2019actuel.",
+    deleteTitle: "Supprimer le compte",
+    deleteDesc: "D\xE9sactive votre compte et vous d\xE9connecte. Contactez le support pour le r\xE9cup\xE9rer.",
+    deleteAction: "Supprimer mon compte",
+    deleteConfirm: "Oui, supprimer mon compte",
+    deleting: "Suppression..."
+  },
+  billing: {
+    currentPlan: "Offre actuelle",
+    plan: "Offre",
+    price: "Prix",
+    status: "Statut",
+    renews: "Renouvellement",
+    ends: "Fin",
+    trialEnds: "Fin de l'essai",
+    managePortal: "G\xE9rer la facturation",
+    opening: "Ouverture...",
+    freePlan: "Vous \xEAtes sur l'offre gratuite.",
+    seePlans: "Voir les offres",
+    cancelNotice: "Votre offre est en cours de r\xE9siliation - vous conservez l'acc\xE8s jusqu'\xE0 la date ci-dessus.",
+    cancelSubscription: "R\xE9silier l'abonnement",
+    canceling: "R\xE9siliation...",
+    cancelConfirmTitle: "R\xE9silier votre abonnement ?",
+    cancelConfirmBody: "Vous conserverez l'acc\xE8s jusqu'\xE0 la fin de la p\xE9riode de facturation en cours.",
+    cancelConfirmButton: "Oui, r\xE9silier",
+    cancelConfirmDismiss: "Annuler",
+    changePlan: "Changer d'offre",
+    current: "Actuelle",
+    switchTo: "Changer",
+    switching: "Changement...",
+    switchConfirmTitle: "Passer \xE0 {plan} ?",
+    switchConfirmBody: "Ce changement s'applique imm\xE9diatement, et votre prochaine facture refl\xE9tera la diff\xE9rence de prix pour le reste de la p\xE9riode.",
+    switchConfirmButton: "Oui, changer",
+    switchConfirmDismiss: "Annuler",
+    noPlans: "Aucune autre offre n'est disponible pour le moment.",
+    notOnInterval: "Non disponible pour cette p\xE9riode",
+    differentCurrency: "Devise diff\xE9rente - contactez le support",
+    loadFailed: "Impossible de charger votre offre pour le moment.",
+    loadingPlan: "Chargement de l'abonnement",
+    loadingPlans: "Chargement des offres",
+    intervalGroupLabel: "P\xE9riode de facturation",
+    intervalMonth: "mois",
+    intervalYear: "an",
+    intervalWeek: "semaine",
+    intervalDay: "jour",
+    statusActive: "Active",
+    statusTrialing: "Essai",
+    statusPastDue: "Paiement d\xFB",
+    statusCanceled: "R\xE9sili\xE9e",
+    statusUnpaid: "Impay\xE9e",
+    statusPaused: "En pause"
+  },
+  usage: {
+    title: "Utilisation",
+    subtitle: "D\xE9compt\xE9 de votre offre pour la p\xE9riode en cours.",
+    used: "{count} utilis\xE9(s)",
+    nothingMetered: "Aucune mesure sur votre offre - vous n'avez aucune limite d'utilisation \xE0 surveiller.",
+    overage: "{count} au-del\xE0 du montant inclus - sans frais suppl\xE9mentaires.",
+    overageBilled: "{count} au-del\xE0 du montant inclus - le suppl\xE9ment est factur\xE9 en plus de votre offre.",
+    limitReached: "Vous avez atteint votre limite.",
+    capReached: "Vous avez atteint votre plafond de facturation pour cette p\xE9riode - tout ce qui suit est gratuit.",
+    billedAmount: "{amount} factur\xE9(s) cette p\xE9riode.",
+    loading: "Chargement de l'utilisation",
+    loadFailed: "Impossible de charger votre utilisation pour le moment."
+  },
+  pricing: {
+    getStarted: "Commencer",
+    billedAt: "Factur\xE9 {amount} / {interval}",
+    save: "\xC9conomisez {percent} %",
+    unlimited: "Illimit\xE9",
+    included: "Inclus",
+    notIncluded: "\u2014",
+    free: "Gratuit",
+    forever: "pour toujours",
+    startFree: "Commencer gratuitement",
+    trialNote: "{days} jours d\u2019essai, sans carte",
+    thenMetered: "puis \xE0 l\u2019usage",
+    meterTitle: "D\xE9passement \xE0 l\u2019usage",
+    meterRatePer: "Tarif par {thing}",
+    meterShape: "Bar\xE8me",
+    meterCounted: "Compt\xE9",
+    meterResets: "Remise \xE0 z\xE9ro",
+    meterCapped: "Plafonn\xE9",
+    meterTiers: "{count} paliers, au plus bas {amount}",
+    meterFlat: "Tarif unique",
+    meterVolume: "toute la quantit\xE9 au palier atteint",
+    meterGraduated: "chaque tranche \xE0 son propre tarif",
+    meterPerSlice: "par {slice}",
+    meterPerCustomer: "par client",
+    meterRoundedUp: "arrondi au bloc sup\xE9rieur",
+    meterRoundedDown: "arrondi au bloc inf\xE9rieur",
+    meterResetsEvery: "chaque {interval}",
+    perSlice: "{amount} par {slice}",
+    meterResetsCycle: "\xE0 chaque p\xE9riode de facturation",
+    meterResetsNever: "jamais - le solde se reporte",
+    metered: "\xE0 l\u2019usage",
+    from: "\xE0 partir de",
+    sizeUpFront: "Dimensionnez \xE0 l\u2019avance",
+    billedWithPlan: "factur\xE9 avec l\u2019offre",
+    includedAmount: "{amount} inclus",
+    prepaidAmount: "+{amount} pr\xE9pay\xE9",
+    nothingListed: "Rien n\u2019est encore list\xE9 sur cette offre.",
+    moreFeatures: "+{count} de plus",
+    loading: "Chargement des offres",
+    loadFailed: "Impossible de charger les offres pour le moment."
+  },
+  checkout: {
+    confirmingTitle: "Confirmation de votre paiement",
+    confirmingBody: "Cela prend quelques secondes - merci de garder cet onglet ouvert.",
+    pendingTitle: "Paiement re\xE7u",
+    pendingBody: "Votre offre est en cours d'activation. Cela prend g\xE9n\xE9ralement moins d'une minute - actualisez si elle n'est pas encore apparue.",
+    doneTitle: "Tout est pr\xEAt",
+    doneBody: "Votre abonnement est actif. Merci.",
+    cancelTitle: "Paiement annul\xE9",
+    cancelBody: "Aucun montant n'a \xE9t\xE9 d\xE9bit\xE9. Vous pouvez choisir une offre quand vous serez pr\xEAt.",
+    backToPlans: "Retour aux offres"
+  },
+  upgrade: {
+    quotaTitle: "Vous avez \xE9puis\xE9 votre quota de {feature}",
+    quotaBody: "Vous avez utilis\xE9 {used} sur {limit} pour cette p\xE9riode. Passez \xE0 une offre sup\xE9rieure pour une limite plus \xE9lev\xE9e.",
+    featureTitle: "{feature} n'est pas inclus dans votre offre",
+    featureBody: "Passez \xE0 une offre sup\xE9rieure pour d\xE9bloquer {feature}.",
+    action: "Voir les offres",
+    checking: "V\xE9rification de l'acc\xE8s"
+  },
+  account: {
+    menuLabel: "Menu du compte",
+    signOut: "Se d\xE9connecter"
+  },
+  errors: {
+    generic: "Une erreur est survenue. Veuillez r\xE9essayer.",
+    // Auth (K1xxx)
+    K1001: "Les inscriptions ne sont pas ouvertes pour le moment.",
+    K1002: "Cette application a atteint sa limite d'utilisateurs.",
+    K1003: "Ce lien d'invitation n'est plus valide.",
+    K1004: "Ce code d'invitation n'est pas valide.",
+    K1005: "E-mail ou mot de passe incorrect.",
+    K1006: "Ce lien a expir\xE9. Demandez-en un nouveau.",
+    K1007: "Il manque le jeton \xE0 ce lien.",
+    K1008: "Un compte existe d\xE9j\xE0 pour cet e-mail.",
+    K1009: "Cette adresse e-mail ne semble pas valide.",
+    K1010: "Veuillez choisir un mot de passe plus robuste.",
+    K1011: "Veuillez d'abord v\xE9rifier votre adresse e-mail.",
+    K1012: "Vous devez vous connecter pour continuer.",
+    // Validation (K2xxx)
+    K2001: "Certaines informations saisies ne sont pas valides.",
+    K2002: "Veuillez remplir tous les champs obligatoires.",
+    K2003: "Certaines informations saisies ne sont pas valides.",
+    K2005: "Cette valeur est d\xE9j\xE0 utilis\xE9e.",
+    // Permissions (K3xxx)
+    K3002: "Vous n'avez pas la permission de faire cela.",
+    K3004: "Cette action n'est pas disponible sur votre compte.",
+    // Resources (K4xxx)
+    K4001: "Nous n'avons pas trouv\xE9 ce que vous cherchiez.",
+    K4003: "Nous n'avons pas trouv\xE9 ce compte.",
+    // Billing (K5xxx)
+    K5001: "Vous avez atteint la limite incluse dans votre offre.",
+    K5002: "Votre offre n'inclut pas cette fonctionnalit\xE9. Passez \xE0 une offre sup\xE9rieure pour continuer.",
+    K5003: "Votre paiement n'a pas pu \xEAtre trait\xE9.",
+    // Rate limiting (K6xxx)
+    K6001: "Trop de tentatives. Veuillez patienter un instant puis r\xE9essayer."
+  }
+};
+
+export {
+  defaultLocalization,
+  mergeLocalization,
+  useLocalization,
+  fill,
+  fillNode,
+  useErrorResolver,
+  defaultTokens,
+  ensureStylesInjected,
+  appearanceToStyle,
+  resolveTheme,
+  resolvePolicy,
+  meetsPolicy,
+  Shell,
+  Subsection,
+  Masthead,
+  Field,
+  Button,
+  PasswordStrength,
+  MethodSwitch,
+  Panel,
+  Status,
+  Divider,
+  TextLink,
+  OAuthButtons,
+  KerneBranding,
+  FormSkeleton,
+  KerneClient,
+  KerneContext,
+  KerneProvider,
+  useClient,
+  useAuth,
+  useCheckout,
+  usePortal,
+  useCancelSubscription,
+  useChangePlan,
+  usePlanSwitch,
+  useAccess,
+  useSubscription,
+  usePlans,
+  useAuthConfig,
+  useEntitlements,
+  useUsage,
+  useReportUsage,
+  useWaitlist,
+  useInvitation,
+  useUser,
+  fr
+};