@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -1,10 +1,11 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 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";
 
@@ -28,7 +29,10 @@ export type BillingBannerKind =
   | "guest"
   | "processing";
 
-interface BillingBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/** A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
+ *  go on to the {@link AlertBanner}, so the ref is the banner's `<div>` — with an × too,
+ *  since the banner has no `href` or `onClick` that would make its row a link or a button. */
+interface BillingBannerBaseProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /**
    * Over the kind's tone: `trial-ending` and `grant-ending` are `info` until the last
    * three days and `warning` in them; `payment-failed` is `danger` (money did not

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/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>
         )}

package/src/billing/plan-limit-notice.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { useKitLocale } from "../i18n/kit-labels";
 import type { LabelOverride } from "../i18n/kit-labels";
@@ -6,7 +6,7 @@ import { formatNumber } from "../lib/format";
 import { AlertBanner } from "../components/alert-banner";
 import type { AlertTone } from "../components/alert-banner";
 import { ProgressBar } from "../components/progress-bar";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 
@@ -22,7 +22,10 @@ export function planLimitMailto(email: string, subject: string): string {
   return `mailto:${to}?subject=${encodeStrict(subject)}`;
 }
 
-interface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/** A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
+ *  go on to the {@link AlertBanner}, so the ref is the notice's `<div>` — its `href` is the
+ *  action button's, never the banner's, so the frame is never a link. */
+interface PlanLimitNoticeBaseProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** The dimension as the refusal names it (`"budgets"`, `"seats"`) — `isPlanLimit(err)`'s
    *  `dimension`. Carried as `data-dimension`. */
   dimension: string;

package/src/billing/subscription-actions.tsx

@@ -1,13 +1,13 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import type { LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
 import type { PortalTarget } from "./billing-overview";
 
-export interface SubscriptionActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface SubscriptionActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /** "Payment and invoices", as a link — or {@link onManage}. Without either, none. */
   manageHref?: string;
   /** "Payment and invoices", as the app's call: `POST /billing/portal` with
@@ -72,7 +72,7 @@ export function SubscriptionActions({
   const labels = useBillingLabels(labelsProp);
   if (!atProvider) {
     return (
-      <div {...rest} data-at-provider="false" className={cn("text-sm text-[var(--text-muted)]", className)}>
+      <div {...rest} data-at-provider="false" className={cn("text-sm text-muted", className)}>
         <p>{labels.notAtProvider}</p>
       </div>
     );

package/src/chart.ts

@@ -5,7 +5,9 @@
 // is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because
 // a dynamic import of the barrel cannot be tree-shaken down to one of its members.
 //
-// This is also the only entry point in the package that requires `recharts`.
+// It is about chunk size, not about the peer: `recharts` is a REQUIRED peer (since 0.5.0),
+// because the main barrel re-exports everything here too, so `import { Button } from
+// "@eifi1/ui-kit"` reaches recharts as well (packaging-contract.test.ts asserts it).
 export * from "./components/chart";
 export * from "./theme/chart-palette";
 
@@ -18,7 +20,13 @@ export * from "./components/treemap";
 export * from "./components/series-chart";
 // 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
 export type { ChartHeight } from "./components/chart-height";
+// SharedXZoom and the zoom's types: the public face of ./chart-zoom-core, whose arithmetic
+// stays the kit's (refactor audit 2026-10, API-6b; off the surface in 0.35).
 export * from "./components/chart-zoom";
+// The same binding, named from the module that holds it and the drag layer (recharts): the
+// packaging contract reads this entry's own imports to know which modules may import
+// recharts, so chart-zoom-core has to be one of them (MOD-6).
+export { SharedXZoom } from "./components/chart-zoom-core";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";

package/src/components/account-chips-labels.ts

@@ -0,0 +1,16 @@
+// The English words of ./account-chips, 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). ./account-chips re-exports them.
+
+import type { AccountStateLabels } from "./account-chips";
+
+export const DEFAULT_ACCOUNT_STATE_LABELS = {
+  active: "Active",
+  inactive: "Inactive",
+  invited: "Invited",
+  registered: "Registered",
+  unverified: "Unverified",
+  passwordChange: "Must change password",
+  deletion: "Deletion requested",
+  deletionOn: (date: string) => `Deletion on ${date}`,
+} satisfies Required<AccountStateLabels>;