@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/auth/reset-password-form.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
 import { CheckCircle2, XCircle } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { AlertBanner } from "../components/alert-banner";
 import { LoadingState } from "../components/loading-state";
-import { Button, EmptyState } from "../components/ui";
-import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
+import { Button } from "../components/button";
+import { EmptyState } from "../components/empty-state";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "./auth-errors";
 import { newPasswordProblem } from "./form-rules";
 import { NewPasswordFields } from "./new-password-fields";
 import {
@@ -19,6 +20,7 @@ import {
   withQuery,
 } from "./status-parts";
 import type { AuthHeadingLevel } from "./status-parts";
+import { DEFAULT_RESET_PASSWORD_LABELS } from "./reset-password-form-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -60,25 +62,8 @@ export interface ResetPasswordLabels {
   rateLimited?: (seconds?: number) => string;
 }
 
-/** `Required`: every key, the 0.30 one included, has its English here. */
-export const DEFAULT_RESET_PASSWORD_LABELS: Required<ResetPasswordLabels> = {
-  title: "Choose a new password",
-  checking: "Checking the link…",
-  intro: (email) => `You’re setting a new password for ${email}.`,
-  newPassword: "New password",
-  confirmPassword: "Repeat new password",
-  mismatch: "The passwords don’t match.",
-  submit: "Save password",
-  failed: "The password could not be changed.",
-  noToken: "This link is incomplete.",
-  invalid: "This link is invalid or has expired.",
-  invalidHint: "Links are valid for one hour and work only once. Just request a new one.",
-  requestNew: "Request a new link",
-  success: "Your password has been changed. You can sign in with it now.",
-  sessionsEnded: "Signed-in devices were signed out — you’ll need to sign in again there.",
-  signIn: "Go to sign in",
-  rateLimited: englishRateLimited,
-};
+// Defined in ./reset-password-form-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_RESET_PASSWORD_LABELS };
 
 /* ── Types ───────────────────────────────────────────────────────────────── */
 
@@ -114,7 +99,7 @@ type Phase =
   | { kind: "done"; result: ResetPasswordResult };
 
 export interface ResetPasswordFormProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "onSubmit" | "children" | "title"> {
+  extends Omit<ComponentPropsWithRef<"div">, "onSubmit" | "children" | "title"> {
   /** The link's token — the app's `?token=` (keksdose, kastlan: `/reset-password?token=…`).
    *  Empty: the link was cut short, and the page says so without asking anyone. */
   token: string;
@@ -151,7 +136,7 @@ export interface ResetPasswordFormProps
   title?: ReactNode;
   /** The heading's level. Default `h2`, under the page's `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<ResetPasswordLabels>;
+  labels?: LabelOverride<ResetPasswordLabels>;
 }
 
 /**
@@ -262,11 +247,11 @@ export function ResetPasswordForm({
     return (
       <div {...rest} data-state="done" className={rootClass}>
         {heading}
-        <OutcomeMessage icon={<CheckCircle2 className="text-[var(--success)]" />} focusRef={doneRef}>
+        <OutcomeMessage icon={<CheckCircle2 className="text-success" />} focusRef={doneRef}>
           <p className={INTRO_CLASS}>{labels.success}</p>
         </OutcomeMessage>
         {notices}
-        <p className="text-xs text-[var(--text-muted)]">{labels.sessionsEnded}</p>
+        <p className="text-xs text-muted">{labels.sessionsEnded}</p>
         {onSignIn ? (
           <Button type="button" variant="brand" className="w-full" onClick={() => onSignIn(email)}>
             {labels.signIn}

package/src/auth/sign-in-form-labels.ts

@@ -0,0 +1,44 @@
+// The English words of ./sign-in-form, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./sign-in-form re-exports them.
+
+import { englishRateLimited } from "./auth-errors";
+import type { SignInLabels } from "./sign-in-form";
+
+/** `Required`: every key, the 0.30 ones included, has its English here. */
+export const DEFAULT_SIGN_IN_LABELS: Required<SignInLabels> = {
+  email: "Email",
+  password: "Password",
+  submit: "Sign in",
+  passkey: "Sign in with a passkey",
+  forgotPassword: "Forgot your password?",
+  noAccount: "No account yet?",
+  register: "Create account",
+  invalidCredentials: "The email or password is incorrect.",
+  failed: "Sign-in failed. Please try again.",
+  passkeyFailed: "Passkey sign-in failed.",
+  deactivatedHint: "Account deactivated? Write to {contact}.",
+  tagHint: (taggedAddress) => `Signed up with ${taggedAddress}? Use that address.`,
+  twoFactorTitle: "Two-factor authentication",
+  twoFactorIntro: "Enter the code your authenticator app shows.",
+  code: "2FA code",
+  verify: "Verify",
+  codeInvalid: "Invalid 2FA code.",
+  setPasswordTitle: "Choose a new password",
+  setPasswordIntro: "A new password was requested for this account. Choose one and you are straight back in.",
+  newPassword: "New password",
+  confirmPassword: "Repeat new password",
+  passwordMismatch: "The passwords don't match.",
+  setPasswordSubmit: "Set password and sign in",
+  setPasswordFailed: "The password could not be set.",
+  expired: "This sign-in has expired. Please sign in again.",
+  backToSignIn: "Back to sign in",
+  useRecoveryCode: "Use a backup code",
+  useAuthenticatorCode: "Use your authenticator app",
+  recoveryCode: "Backup code",
+  recoveryIntro: "Enter one of the backup codes you saved when you turned on two-factor authentication.",
+  recoveryCodeHint: (length) => `${length} letters and digits. Dashes and spaces don’t matter.`,
+  recoveryCodeInvalid: "This backup code is not valid, or it has been used already.",
+  rateLimited: englishRateLimited,
+  requestAccess: "Request access",
+};

package/src/auth/sign-in-form.tsx

@@ -1,23 +1,25 @@
 import { useEffect, useEffectEvent, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
 import { KeyRound } from "lucide-react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { AlertBanner } from "../components/alert-banner";
-import { hasMessage } from "../components/choice-parts";
+import { hasContent } from "../lib/presence";
 import { CurrentPasswordInput } from "../components/danger-confirm";
 import { OneTimeCodeInput } from "../components/one-time-code-input";
 import { TextLink } from "../components/text-link";
-import { Button, Input } from "../components/ui";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
 import { accessAction } from "../landing/access";
 import type { AccessChoice } from "../landing/access";
 import { useLandingLabels } from "../landing/landing-labels";
-import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "./auth-errors";
 import type { KitErrorCode } from "./auth-errors";
 import { taggedEmail } from "./email-tag";
 import { newPasswordProblem } from "./form-rules";
 import { NewPasswordFields } from "./new-password-fields";
+import { DEFAULT_SIGN_IN_LABELS } from "./sign-in-form-labels";
 
 /* ── The answers (§5.1) ──────────────────────────────────────────────────── */
 
@@ -179,47 +181,12 @@ export interface SignInLabels {
   requestAccess?: string;
 }
 
-/** `Required`: every key, the 0.30 ones included, has its English here. */
-export const DEFAULT_SIGN_IN_LABELS: Required<SignInLabels> = {
-  email: "Email",
-  password: "Password",
-  submit: "Sign in",
-  passkey: "Sign in with a passkey",
-  forgotPassword: "Forgot your password?",
-  noAccount: "No account yet?",
-  register: "Create account",
-  invalidCredentials: "The email or password is incorrect.",
-  failed: "Sign-in failed. Please try again.",
-  passkeyFailed: "Passkey sign-in failed.",
-  deactivatedHint: "Account deactivated? Write to {contact}.",
-  tagHint: (taggedAddress) => `Signed up with ${taggedAddress}? Use that address.`,
-  twoFactorTitle: "Two-factor authentication",
-  twoFactorIntro: "Enter the code your authenticator app shows.",
-  code: "2FA code",
-  verify: "Verify",
-  codeInvalid: "Invalid 2FA code.",
-  setPasswordTitle: "Choose a new password",
-  setPasswordIntro: "A new password was requested for this account. Choose one and you are straight back in.",
-  newPassword: "New password",
-  confirmPassword: "Repeat new password",
-  passwordMismatch: "The passwords don't match.",
-  setPasswordSubmit: "Set password and sign in",
-  setPasswordFailed: "The password could not be set.",
-  expired: "This sign-in has expired. Please sign in again.",
-  backToSignIn: "Back to sign in",
-  useRecoveryCode: "Use a backup code",
-  useAuthenticatorCode: "Use your authenticator app",
-  recoveryCode: "Backup code",
-  recoveryIntro: "Enter one of the backup codes you saved when you turned on two-factor authentication.",
-  recoveryCodeHint: (length) => `${length} letters and digits. Dashes and spaces don’t matter.`,
-  recoveryCodeInvalid: "This backup code is not valid, or it has been used already.",
-  rateLimited: englishRateLimited,
-  requestAccess: "Request access",
-};
+// Defined in ./sign-in-form-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SIGN_IN_LABELS };
 
 /* ── Props ───────────────────────────────────────────────────────────────── */
 
-export interface SignInFormProps extends Omit<ComponentPropsWithoutRef<"div">, "onSubmit" | "children"> {
+export interface SignInFormProps extends Omit<ComponentPropsWithRef<"div">, "onSubmit" | "children"> {
   /**
    * The credentials step was submitted. Send them, and resolve with the answer
    * ({@link SignInAnswer}) or reject with the client's error. The form never sends a
@@ -323,7 +290,7 @@ export interface SignInFormProps extends Omit<ComponentPropsWithoutRef<"div">, "
   /** The level of the second and third step's heading. Default `h2`, under the page's
    *  `h1`; one level under `AuthLayout`'s `headingAs` where that is embedded lower. */
   headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
-  labels?: Partial<SignInLabels>;
+  labels?: LabelOverride<SignInLabels>;
 }
 
 /* ── Parts ───────────────────────────────────────────────────────────────── */
@@ -355,7 +322,7 @@ function withContact(template: string, contact: ReactNode): ReactNode[] {
     .map((part) => (part === "{contact}" ? node : part));
 }
 
-const HINT_CLASS = "text-xs text-[var(--text-secondary)]";
+const HINT_CLASS = "text-xs text-secondary";
 
 /** A backup code's letters and digits — kastlan's: 16, printed `ABCD-EFGH-JKLM-NPQR`. */
 const RECOVERY_CODE_LENGTH = 16;
@@ -366,7 +333,7 @@ const RECOVERY_CODE_LENGTH = 16;
 function recoveryCharacters(value: string): number {
   return value.replace(/[^\p{L}\p{N}]/gu, "").length;
 }
-const INTRO_CLASS = "text-sm text-[var(--text-secondary)]";
+const INTRO_CLASS = "text-sm text-secondary";
 
 /* ── The form ────────────────────────────────────────────────────────────── */
 
@@ -523,7 +490,7 @@ export function SignInForm({
     recoveryUsed: boolean,
   ): ReactNode => {
     const own = describeError?.(error, action);
-    if (hasMessage(own)) return own;
+    if (hasContent(own)) return own;
     // After the app's words, before the kit's generic ones (0.30.0): a throttle is
     // neither a wrong password nor a wrong code, and saying so sends the person to try
     // another one — which the limiter counts too.
@@ -680,7 +647,7 @@ export function SignInForm({
     return (
       <div {...rest} data-step="2fa" className={rootClass}>
         <form className="space-y-3" aria-labelledby={headingId} onSubmit={submitCode}>
-          <Heading id={headingId} className="text-base font-semibold text-[var(--text-primary)]">
+          <Heading id={headingId} className="text-base font-semibold text-primary">
             {labels.twoFactorTitle}
           </Heading>
           <p className={INTRO_CLASS}>
@@ -757,7 +724,7 @@ export function SignInForm({
     return (
       <div {...rest} data-step="password-change" className={rootClass}>
         <form className="space-y-3" aria-labelledby={headingId} onSubmit={submitPassword}>
-          <Heading id={headingId} className="text-base font-semibold text-[var(--text-primary)]">
+          <Heading id={headingId} className="text-base font-semibold text-primary">
             {labels.setPasswordTitle}
           </Heading>
           <p className={INTRO_CLASS}>{labels.setPasswordIntro}</p>
@@ -801,7 +768,7 @@ export function SignInForm({
   const refused = failure?.code === "invalid_credentials";
   const tagged =
     refused && failure?.action === "password" && emailTag && failure.email ? taggedEmail(failure.email, emailTag) : null;
-  const showDeactivated = refused && hasMessage(deactivatedContact);
+  const showDeactivated = refused && hasContent(deactivatedContact);
 
   return (
     <div {...rest} data-step="credentials" className={rootClass}>
@@ -866,7 +833,7 @@ export function SignInForm({
         </p>
       )}
       {accountLink !== null && (
-        <p className="text-center text-sm text-[var(--text-secondary)]">
+        <p className="text-center text-sm text-secondary">
           {labels.noAccount}{" "}
           <TextLink href={accountLink.href} tone="primary">
             {accountLink.label}

package/src/auth/status-parts.tsx

@@ -16,10 +16,10 @@ import { cn } from "../lib/cn";
 export type AuthHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 /** The form pages' heading: start-aligned, the size of `SignInForm`'s step headings. */
-export const FORM_HEADING_CLASS = "text-base font-semibold text-[var(--text-primary)]";
+export const FORM_HEADING_CLASS = "text-base font-semibold text-primary";
 /** The status pages' heading: centred over the centred outcome below it. */
-export const STATUS_HEADING_CLASS = "text-center text-base font-semibold text-[var(--text-primary)]";
-export const INTRO_CLASS = "text-sm text-[var(--text-secondary)]";
+export const STATUS_HEADING_CLASS = "text-center text-base font-semibold text-primary";
+export const INTRO_CLASS = "text-sm text-secondary";
 
 /**
  * kastlan's outcome block (verify-email-page, reset-password-page): the kit's

package/src/auth/verify-email-labels.ts

@@ -0,0 +1,26 @@
+// The English words of ./verify-email, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./verify-email re-exports them.
+
+import { englishRateLimited } from "./auth-errors";
+import type { VerifyEmailLabels } from "./verify-email";
+
+export const DEFAULT_VERIFY_EMAIL_LABELS: VerifyEmailLabels = {
+  title: "Confirm your email address",
+  verifying: "Confirming…",
+  verified: "Your email address is confirmed.",
+  continue: "Continue",
+  invalid: "This confirmation link is not valid",
+  expired: "This confirmation link has expired",
+  noToken: "This link is missing its confirmation token.",
+  invalidHint: "The link may have expired or already been used.",
+  requestInApp: "You can request a new one from inside the app.",
+  requestHere: "You can request a new one here.",
+  resend: "Send again",
+  resendIn: (seconds) => `Send again in ${seconds} s`,
+  resent: "Confirmation email sent",
+  resendError: "Could not send the confirmation email",
+  rateLimited: englishRateLimited,
+  banner: "Please confirm your email address.",
+  dismiss: "Not now",
+};

package/src/auth/verify-email.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { CheckCircle2, MailWarning, TimerOff, XCircle } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAnnounce } from "../hooks/use-announce";
 import { AlertBanner } from "../components/alert-banner";
 import { LoadingState } from "../components/loading-state";
-import { Button, EmptyState } from "../components/ui";
+import { Button } from "../components/button";
+import { EmptyState } from "../components/empty-state";
 import { OUTCOME_CLASS, STATUS_HEADING_CLASS, isThenable, useOncePerKey } from "./status-parts";
 import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
 import type { AuthHeadingLevel } from "./status-parts";
+import { DEFAULT_VERIFY_EMAIL_LABELS } from "./verify-email-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -51,25 +53,8 @@ export interface VerifyEmailLabels {
   dismiss: string;
 }
 
-export const DEFAULT_VERIFY_EMAIL_LABELS: VerifyEmailLabels = {
-  title: "Confirm your email address",
-  verifying: "Confirming…",
-  verified: "Your email address is confirmed.",
-  continue: "Continue",
-  invalid: "This confirmation link is not valid",
-  expired: "This confirmation link has expired",
-  noToken: "This link is missing its confirmation token.",
-  invalidHint: "The link may have expired or already been used.",
-  requestInApp: "You can request a new one from inside the app.",
-  requestHere: "You can request a new one here.",
-  resend: "Send again",
-  resendIn: (seconds) => `Send again in ${seconds} s`,
-  resent: "Confirmation email sent",
-  resendError: "Could not send the confirmation email",
-  rateLimited: englishRateLimited,
-  banner: "Please confirm your email address.",
-  dismiss: "Not now",
-};
+// Defined in ./verify-email-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_VERIFY_EMAIL_LABELS };
 
 /** A minute: long enough that an impatient second click does not mail twice, short
  *  enough that a mail lost to a spam filter can be re-sent without leaving the page. The
@@ -89,7 +74,7 @@ type ResendPhase = "idle" | "sending" | "sent" | "failed";
  */
 function useResend(onResend: (() => Promise<unknown> | void) | undefined, cooldown: number) {
   const [phase, setPhase] = useState<ResendPhase>("idle");
-  // The refusal itself, for `describeError` (0.29.1): the server's own sentence — keksdose's
+  // The refusal itself, for `describeError` (0.30.0): the server's own sentence — keksdose's
   // per-address throttle, "try again in N minutes" — beats a fixed "could not send".
   const [error, setError] = useState<unknown>(undefined);
   const [remaining, setRemaining] = useState(0);
@@ -176,7 +161,7 @@ function ResendStatus({
   return (
     <span
       role="status"
-      className={cn(phase === "failed" ? "text-[var(--danger)]" : "text-[var(--success)]", className)}
+      className={cn(phase === "failed" ? "text-danger" : "text-success", className)}
     >
       {phase === "sent" ? labels.resent : failed}
     </span>
@@ -193,7 +178,7 @@ function defaultVerifyFailure(error: unknown): VerifyEmailFailure {
   return authErrorCode(error) === "token_expired" ? "expired" : "invalid";
 }
 
-export interface VerifyEmailStatusProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+export interface VerifyEmailStatusProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
   /** The link's token — the app's `?token=`. Empty: the link was cut short, and the
    *  page says so without asking anyone. */
   token: string;
@@ -207,7 +192,7 @@ export interface VerifyEmailStatusProps extends Omit<ComponentPropsWithoutRef<"d
   /** Which dead end a rejection is. Default: `invalid` for everything — §5.2's servers
    *  answer one `token_invalid`; an app whose server tells expiry apart maps it here. */
   classifyError?: (error: unknown) => VerifyEmailFailure;
-  /** 0.29.1: the words for a refused resend — the server's own sentence (a throttle's
+  /** 0.30.0: the words for a refused resend — the server's own sentence (a throttle's
    *  "try again in N minutes"), else the kit's `resendError`. */
   describeError?: (error: unknown) => string | undefined;
   /** Someone is signed in on this device: "Continue" goes into the app, and a dead link
@@ -228,7 +213,7 @@ export interface VerifyEmailStatusProps extends Omit<ComponentPropsWithoutRef<"d
   title?: ReactNode;
   /** The heading's level. Default `h2`, under the page's `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<VerifyEmailLabels>;
+  labels?: LabelOverride<VerifyEmailLabels>;
 }
 
 type VerifyOutcome = "verified" | VerifyEmailFailure;
@@ -272,7 +257,7 @@ export function VerifyEmailStatus({
   const resend = useResend(onResend, cooldown);
 
   useOncePerKey(token === "" ? null : token, onVerify, (key, result) => {
-    // Without a classifier, the coded refusal decides (0.29.1): `token_expired` is
+    // Without a classifier, the coded refusal decides (0.30.0): `token_expired` is
     // "expired", anything else "invalid".
     const next: VerifyOutcome = result.ok
       ? "verified"
@@ -358,7 +343,7 @@ export interface EmailVerificationBannerProps {
   /** Send a new confirmation mail (`POST /auth/verify-email/resend`). Resolve when it
    *  went out; reject and the banner says it could not. */
   onResend: () => Promise<unknown> | void;
-  /** 0.29.1: the words for a refused resend — the server's own sentence, else the kit's. */
+  /** 0.30.0: the words for a refused resend — the server's own sentence, else the kit's. */
   describeError?: (error: unknown) => string | undefined;
   /** Seconds "Send again" waits after a mail went out. Default 60; `0` never waits. */
   cooldown?: number;
@@ -372,7 +357,7 @@ export interface EmailVerificationBannerProps {
    *  budget with you directly." */
   children?: ReactNode;
   className?: string;
-  labels?: Partial<VerifyEmailLabels>;
+  labels?: LabelOverride<VerifyEmailLabels>;
 }
 
 /**

package/src/billing/billing-banner.tsx

@@ -4,7 +4,8 @@ import { CreditCard, Hourglass, PencilOff } from "lucide-react";
 import type { LabelOverride } from "../i18n/kit-labels";
 import { AlertBanner } from "../components/alert-banner";
 import type { AlertSize, AlertTone } from "../components/alert-banner";
-import { Button, Spinner } from "../components/ui";
+import { Button } from "../components/button";
+import { Spinner } from "../components/spinner";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 

package/src/billing/billing-labels.ts

@@ -281,5 +281,5 @@ export const DEFAULT_BILLING_LABELS: BillingLabels = {
 /** The `billing` namespace, resolved: English, then the provider, then `labels` — which
  *  may be partial at every depth (`{ status: { comped: "Beta" } }`). */
 export function useBillingLabels(labels?: LabelOverride<BillingLabels>): BillingLabels {
-  return useKitLabels("billing", DEFAULT_BILLING_LABELS, labels as Partial<BillingLabels> | undefined);
+  return useKitLabels("billing", DEFAULT_BILLING_LABELS, labels);
 }

package/src/billing/checkout-processing.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useSyn
 
 import { toDate } from "../lib/format";
 import type { DateInput } from "../lib/format";
-import { readStored, writeStored } from "../lib/safe-storage";
+import { readStored, removeStored, writeStored } from "../lib/safe-storage";
 import type { BillingStanding } from "./billing-standing";
 
 /**
@@ -133,16 +133,6 @@ function readPending(key: string): PendingCheckout | null {
   return null;
 }
 
-/** Drop the browser entry. lib/safe-storage reads and writes; removing needs the same
- *  guard (a blocked storage throws on access). */
-function forget(key: string): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.removeItem(key);
-  } catch {
-    // ignore (private mode, partitioned storage)
-  }
-}
 
 function storeOf(key: string): CheckoutStore {
   let store = stores.get(key);
@@ -166,7 +156,7 @@ function storeOf(key: string): CheckoutStore {
 function setPending(store: CheckoutStore, next: PendingCheckout | null): void {
   store.pending = next;
   if (next) writeStored(store.key, JSON.stringify(next));
-  else forget(store.key);
+  else removeStored(store.key);
   for (const listener of store.listeners) listener();
   sync(store);
 }

package/src/billing/pay-page.ts

@@ -73,9 +73,10 @@ function kitLanguageOf(tag: unknown): PayPageLanguage | undefined {
  * The kit's locale → Paddle's checkout locale: `de-CH` → `de`, `zh` → `zh-Hans`, `hu` →
  * `en` (Paddle has no Hungarian), the others as they are. Any tag is read as the kit
  * reads it (`de-AT` is the one German, `zh-TW` the one Chinese); one the kit doesn't
- * ship is English.
+ * ship is English, and so is `undefined` (0.33.1) — `useKitLocale()` with no provider
+ * locale.
  */
-export function paddleLocale(kitLocale: string): string {
+export function paddleLocale(kitLocale: string | undefined): string {
   return PADDLE_LOCALES[kitLanguageOf(kitLocale) ?? "en"];
 }
 
@@ -86,11 +87,14 @@ export function paddleLocale(kitLocale: string): string {
  *
  *     const { url } = await api.checkout({ plan, interval, currency });
  *     noteCheckoutStarted(user.id, overview);
- *     window.location.assign(payPageUrl(url, i18n.language));
+ *     window.location.assign(payPageUrl(url, locale));   // locale = useKitLocale()
  *
- * A wrong `lang` costs nothing but the language: the page falls back to the browser's.
+ * `locale` may be `undefined` (0.33.1, keksdose): `useKitLocale()` answers that with no
+ * provider locale, the runtime's language. The link then goes without `lang`, and the
+ * page speaks the browser's language, else English — what a missing or wrong `lang`
+ * already did: it costs nothing but the language.
  */
-export function payPageUrl(checkoutUrl: string, locale: string): string {
+export function payPageUrl(checkoutUrl: string, locale: string | undefined): string {
   const language = kitLanguageOf(locale);
   if (!language) return checkoutUrl;
   let url: URL;

package/src/billing/plan-card.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useState } from "react";
+import { useId, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, Gauge } from "lucide-react";
 
@@ -10,7 +10,7 @@ import { ChoiceCard } from "../components/choice-card";
 import type { ChoiceCardProps } from "../components/choice-card";
 import { Chip } from "../components/chip";
 import { ToggleGroup } from "../components/toggle-group";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price";
@@ -100,8 +100,8 @@ function SpanList({ name, items, icon }: { name: string; items: ReactNode[]; ico
   return (
     <span role="list" aria-label={name} className="block space-y-1">
       {items.map((item, i) => (
-        <span role="listitem" key={i} className="flex items-start gap-1.5 text-[var(--text-secondary)]">
-          <span aria-hidden className="mt-[0.0625rem] flex shrink-0 text-[var(--text-muted)] [&_svg]:size-3.5">
+        <span role="listitem" key={i} className="flex items-start gap-1.5 text-secondary">
+          <span aria-hidden className="mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5">
             {icon}
           </span>
           <span className="min-w-0">
@@ -125,22 +125,22 @@ function SpanList({ name, items, icon }: { name: string; items: ReactNode[]; ico
  * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,
  * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.
  */
-export const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function PlanCard(
-  {
-    plan,
-    relation,
-    pricePreview,
-    currency,
-    interval,
-    dimensionLabels,
-    formatLimit,
-    locale: localeProp,
-    labels: labelsProp,
-    disabled,
-    ...rest
-  },
+export function PlanCard({
+  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor
+  // audit 2026-10), where this was `forwardRef`.
   ref,
-) {
+  plan,
+  relation,
+  pricePreview,
+  currency,
+  interval,
+  dimensionLabels,
+  formatLimit,
+  locale: localeProp,
+  labels: labelsProp,
+  disabled,
+  ...rest
+}: PlanCardProps) {
   const labels = useBillingLabels(labelsProp);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const locale = useKitLocale(localeProp);
@@ -170,8 +170,8 @@ export const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function Pla
           className={cn(
             "tabular-nums",
             price.kind === "not-offered"
-              ? "text-xs text-[var(--text-muted)]"
-              : "text-lg font-semibold leading-tight text-[var(--text-primary)]",
+              ? "text-xs text-muted"
+              : "text-lg font-semibold leading-tight text-primary",
           )}
         >
           {figure}
@@ -179,15 +179,15 @@ export const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function Pla
         {priced && (
           <>
             {" "}
-            <span className="text-xs text-[var(--text-secondary)]">
+            <span className="text-xs text-secondary">
               {interval === "year" ? labels.perYear : labels.perMonth}
             </span>{" "}
-            <span className="block text-xs text-[var(--text-muted)]">{labels.vatIncluded}</span>
+            <span className="block text-xs text-muted">{labels.vatIncluded}</span>
           </>
         )}{" "}
       </span>
       {plan.description !== undefined && plan.description !== null && (
-        <span className="block text-[var(--text-secondary)]">{plan.description} </span>
+        <span className="block text-secondary">{plan.description} </span>
       )}
       <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />
       <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />
@@ -219,8 +219,7 @@ export const PlanCard = forwardRef<HTMLInputElement, PlanCardProps>(function Pla
       description={body}
     />
   );
-});
-PlanCard.displayName = "PlanCard";
+}
 
 /** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`
  *  takes (§4). */
@@ -416,7 +415,7 @@ export function PlanPicker({
         aria-label={legend === undefined ? labels.plans : undefined}
       >
         {legend !== undefined && (
-          <legend id={legendId} className="mb-2 text-sm font-medium text-[var(--text-primary)]">
+          <legend id={legendId} className="mb-2 text-sm font-medium text-primary">
             {legend}
           </legend>
         )}