@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/auth/auth-errors.ts

@@ -22,6 +22,10 @@
  *   account gets `invalid_credentials`, because a separate answer after a correct
  *   password would confirm a leaked one. It stays in the union only for a future server
  *   step that is past the password (an admin view, a signed-in refresh) and may say so.
+ * - `session_ended` — 0.34.0 (§11.2, decision 7; server-kit 0.8): every definitive
+ *   refusal of `POST /auth/refresh`, a `401`. No form shows it, so it has no label: the
+ *   kit's `attachSessionRefresh` decides by the STATUS, so an app whose server has not
+ *   switched yet keeps working.
  */
 export type AuthErrorCode =
   | "invalid_credentials"
@@ -30,10 +34,11 @@ export type AuthErrorCode =
   | "invitation_invalid"
   | "invitation_expired"
   | "token_invalid"
-  /** 0.29.1: a link that WAS valid and ran out (verification, reset) — keksdose's step-3
+  /** 0.30.0: a link that WAS valid and ran out (verification, reset) — keksdose's step-3
    *  refusals tell it from `token_invalid`, so a page can say "expired, ask for a new one". */
   | "token_expired"
-  | "account_inactive";
+  | "account_inactive"
+  | "session_ended";
 
 /**
  * 0.30.0: the coded refusals of user administration and the account's own settings
@@ -148,6 +153,7 @@ const CODES: ReadonlySet<string> = new Set<KitErrorCode>([
   "token_invalid",
   "token_expired",
   "account_inactive",
+  "session_ended",
   "last_admin",
   "self_action",
   "other_companies",
@@ -269,6 +275,25 @@ function statusOf(value: unknown): number | undefined {
   return typeof value === "number" && Number.isInteger(value) ? value : undefined;
 }
 
+/**
+ * The HTTP status a thrown error carries, wherever the apps' HTTP clients put it —
+ * without depending on any of them:
+ *
+ *  1. `err.response.status` — axios (all three apps' clients);
+ *  2. `err.status` — ofetch's `FetchError`, the generated OpenAPI clients' `ApiError`, and
+ *     a `Response` thrown as it came;
+ *  3. `err.statusCode` — ofetch's alias, and Node-style errors.
+ *
+ * `undefined` when none is a whole number. Package-private — not re-exported from the
+ * barrel; {@link isRateLimited} and the session refresh's classifier read it (DUP-11,
+ * refactor audit 2026-10: the refresh carried its own copy of this probe).
+ */
+export function httpStatusOf(err: unknown): number | undefined {
+  if (!isBag(err)) return undefined;
+  const response = err.response;
+  return (isBag(response) ? statusOf(response.status) : undefined) ?? statusOf(err.status) ?? statusOf(err.statusCode);
+}
+
 /**
  * Whether `err` is a throttled request — HTTP `429 Too Many Requests` (0.30.0, from the
  * apps' 0.29 adoption: every app answered a throttled sign-in, sign-up or reset through
@@ -276,12 +301,7 @@ function statusOf(value: unknown): number | undefined {
  *
  * A throttle carries no `code` in the contract — the STATUS is the answer, set by the
  * apps' limiters (server-kit's `AuthLimiters`, keksdose's per-IP limit) — so this reads
- * the status, wherever the apps' HTTP clients put it, without depending on any of them:
- *
- *  1. `err.response.status` — axios (all three apps' clients);
- *  2. `err.status` — ofetch's `FetchError`, the generated OpenAPI clients' `ApiError`, and
- *     a `Response` thrown as it came;
- *  3. `err.statusCode` — ofetch's alias, and Node-style errors.
+ * the status, wherever the apps' HTTP clients put it ({@link httpStatusOf}).
  *
  * There is no `rate_limited` code: keksdose answers its 429s uncoded, with a
  * `Retry-After` header, and the status is the one signal every limiter gives.
@@ -292,11 +312,7 @@ function statusOf(value: unknown): number | undefined {
  * {@link retryAfterSeconds}) or "… Wait a moment and try again." needs no app code.
  */
 export function isRateLimited(err: unknown): boolean {
-  if (!isBag(err)) return false;
-  const response = err.response;
-  const status =
-    (isBag(response) ? statusOf(response.status) : undefined) ?? statusOf(err.status) ?? statusOf(err.statusCode);
-  return status === 429;
+  return httpStatusOf(err) === 429;
 }
 
 /** A header's value from a `Headers` (fetch, ofetch's `response`), axios' `AxiosHeaders`

package/src/auth/complete-name-dialog-labels.ts

@@ -0,0 +1,16 @@
+// The English words of ./complete-name-dialog, 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). ./complete-name-dialog
+// re-exports them.
+
+import type { CompleteNameLabels } from "./complete-name-dialog";
+
+export const DEFAULT_COMPLETE_NAME_LABELS: CompleteNameLabels = {
+  title: "Complete your name",
+  description: "First and last name are now asked for separately. Check what is filled in and add what is missing.",
+  firstName: "First name",
+  lastName: "Last name",
+  save: "Save",
+  later: "Later",
+  failed: "Your name could not be saved. Please try again.",
+};

package/src/auth/complete-name-dialog.tsx

@@ -1,13 +1,15 @@
 import { useContext, useEffect, useId, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { usePromisePending } from "../components/danger-confirm";
 import { DialogFrame } from "../components/dialog-frame";
 import { ModalCloseContext } from "../components/modal";
-import { Button, Input } from "../components/ui";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
 import { personNameOk, PERSON_NAME_MAX_LENGTH } from "./form-rules";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { DEFAULT_COMPLETE_NAME_LABELS } from "./complete-name-dialog-labels";
 
 /** What `CompleteNameDialog` hands `onSave`: both names, trimmed, 1–120 characters —
  *  `PATCH /auth/me {first_name, last_name}` (§6.1). */
@@ -32,15 +34,8 @@ export interface CompleteNameLabels {
   failed: string;
 }
 
-export const DEFAULT_COMPLETE_NAME_LABELS: CompleteNameLabels = {
-  title: "Complete your name",
-  description: "First and last name are now asked for separately. Check what is filled in and add what is missing.",
-  firstName: "First name",
-  lastName: "Last name",
-  save: "Save",
-  later: "Later",
-  failed: "Your name could not be saved. Please try again.",
-};
+// Defined in ./complete-name-dialog-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_COMPLETE_NAME_LABELS };
 
 export interface CompleteNameDialogProps {
   /** What the account holds now — after the migration, the old display name (§3.3). */
@@ -64,7 +59,7 @@ export interface CompleteNameDialogProps {
   error?: ReactNode;
   /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. */
   open?: boolean;
-  labels?: Partial<CompleteNameLabels>;
+  labels?: LabelOverride<CompleteNameLabels>;
 }
 
 /**
@@ -214,7 +209,7 @@ export function CompleteNameDialog({
           />
         </div>
         {message !== undefined && (
-          <p role="alert" className="text-xs text-[var(--danger)]">
+          <p role="alert" className="text-xs text-danger">
             {message}
           </p>
         )}

package/src/auth/forgot-password-form-labels.ts

@@ -0,0 +1,20 @@
+// The English words of ./forgot-password-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). ./forgot-password-form
+// re-exports them.
+
+import { englishRateLimited } from "./auth-errors";
+import type { ForgotPasswordLabels } from "./forgot-password-form";
+
+/** `Required`: every key, the 0.30 one included, has its English here. */
+export const DEFAULT_FORGOT_PASSWORD_LABELS: Required<ForgotPasswordLabels> = {
+  title: "Forgot password",
+  intro: "Enter your account’s email address. We’ll send you a link to choose a new password.",
+  email: "Email",
+  submit: "Send the link",
+  sent: (email) => `If an account exists for ${email}, the link is on its way.`,
+  sentHint: "The link is valid for one hour and works exactly once. Check your spam folder too.",
+  backToSignIn: "Back to sign in",
+  error: "The request failed. Please try again later.",
+  rateLimited: englishRateLimited,
+};

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

@@ -1,14 +1,16 @@
 import { useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
 import { MailCheck } 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 { TextLink } from "../components/text-link";
-import { Button, Input } from "../components/ui";
-import { englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
+import { isRateLimited, retryAfterSeconds } from "./auth-errors";
 import { FORM_HEADING_CLASS, INTRO_CLASS, OutcomeMessage, isThenable, useFocusWhen } from "./status-parts";
 import type { AuthHeadingLevel } from "./status-parts";
+import { DEFAULT_FORGOT_PASSWORD_LABELS } from "./forgot-password-form-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -38,23 +40,13 @@ export interface ForgotPasswordLabels {
   rateLimited?: (seconds?: number) => string;
 }
 
-/** `Required`: every key, the 0.30 one included, has its English here. */
-export const DEFAULT_FORGOT_PASSWORD_LABELS: Required<ForgotPasswordLabels> = {
-  title: "Forgot password",
-  intro: "Enter your account’s email address. We’ll send you a link to choose a new password.",
-  email: "Email",
-  submit: "Send the link",
-  sent: (email) => `If an account exists for ${email}, the link is on its way.`,
-  sentHint: "The link is valid for one hour and works exactly once. Check your spam folder too.",
-  backToSignIn: "Back to sign in",
-  error: "The request failed. Please try again later.",
-  rateLimited: englishRateLimited,
-};
+// Defined in ./forgot-password-form-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_FORGOT_PASSWORD_LABELS };
 
 /* ── The form ────────────────────────────────────────────────────────────── */
 
 export interface ForgotPasswordFormProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "onSubmit" | "children" | "title"> {
+  extends Omit<ComponentPropsWithRef<"div">, "onSubmit" | "children" | "title"> {
   /**
    * The address was submitted, trimmed: send `POST /auth/password-reset/request`.
    * Resolve when the server answered — whatever it answered: it is `204` whether or not
@@ -81,7 +73,7 @@ export interface ForgotPasswordFormProps
   title?: ReactNode;
   /** The heading's level. Default `h2`, under the page's `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<ForgotPasswordLabels>;
+  labels?: LabelOverride<ForgotPasswordLabels>;
 }
 
 /**
@@ -146,9 +138,9 @@ export function ForgotPasswordForm({
     return (
       <div {...rest} data-state="sent" className={cn("space-y-3", className)}>
         {heading}
-        <OutcomeMessage icon={<MailCheck className="text-[var(--success)]" />} focusRef={sentRef}>
+        <OutcomeMessage icon={<MailCheck className="text-success" />} focusRef={sentRef}>
           <p className={INTRO_CLASS}>{labels.sent(sentTo)}</p>
-          <p className="text-xs text-[var(--text-muted)]">{labels.sentHint}</p>
+          <p className="text-xs text-muted">{labels.sentHint}</p>
         </OutcomeMessage>
         {back}
       </div>

package/src/auth/new-password-fields.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from "react";
 import { PasswordStrengthMeter } from "../components/password-strength";
-import { Input } from "../components/ui";
+import { Input } from "../components/input";
 import { PASSWORD_MAX_BYTES, PASSWORD_MIN_LENGTH } from "./form-rules";
 
 /** @internal The words the fields show — the host form's own labels. */

package/src/auth/not-found-page-labels.ts

@@ -0,0 +1,12 @@
+// The English words of ./not-found-page, 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). ./not-found-page re-exports them.
+
+import type { NotFoundLabels } from "./not-found-page";
+
+export const DEFAULT_NOT_FOUND_LABELS: NotFoundLabels = {
+  title: "Page not found",
+  body: "This address doesn’t exist (any more). It may be a typo, or the page has moved.",
+  home: "Go to the start page",
+  app: "Back to the app",
+};

package/src/auth/not-found-page.tsx

@@ -1,9 +1,10 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useNoIndex } from "../hooks/use-noindex";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import type { AuthHeadingLevel } from "./status-parts";
+import { DEFAULT_NOT_FOUND_LABELS } from "./not-found-page-labels";
 
 /** Every string the page renders — the `notFound` namespace. keksdose's words
  *  (`error.not_found_*`), which kastlan took over. */
@@ -18,14 +19,10 @@ export interface NotFoundLabels {
   app: string;
 }
 
-export const DEFAULT_NOT_FOUND_LABELS: NotFoundLabels = {
-  title: "Page not found",
-  body: "This address doesn’t exist (any more). It may be a typo, or the page has moved.",
-  home: "Go to the start page",
-  app: "Back to the app",
-};
+// Defined in ./not-found-page-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_NOT_FOUND_LABELS };
 
-export interface NotFoundPageProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+export interface NotFoundPageProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
   /** "Go to the start page". Default `/`, which takes a signed-in user into the app and
    *  anyone else to sign-in in all three apps. */
   homeHref?: string;
@@ -43,7 +40,7 @@ export interface NotFoundPageProps extends Omit<ComponentPropsWithoutRef<"div">,
   /** The heading's level. Default `h2`, under `AuthLayout`'s `h1`; `h1` where the page
    *  stands alone (inside the app shell). */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<NotFoundLabels>;
+  labels?: LabelOverride<NotFoundLabels>;
 }
 
 /**
@@ -77,11 +74,11 @@ export function NotFoundPage({
   useNoIndex(noIndex);
   return (
     <div {...rest} className={cn("flex flex-col items-center gap-2 py-4 text-center", className)}>
-      <p aria-hidden className="text-6xl font-bold leading-none tracking-tight text-[var(--text-placeholder)]">
+      <p aria-hidden className="text-6xl font-bold leading-none tracking-tight text-placeholder">
         404
       </p>
-      <Heading className="mt-2 text-xl font-semibold text-[var(--text-primary)]">{labels.title}</Heading>
-      <p className="max-w-prose text-sm text-[var(--text-secondary)]">{labels.body}</p>
+      <Heading className="mt-2 text-xl font-semibold text-primary">{labels.title}</Heading>
+      <p className="max-w-prose text-sm text-secondary">{labels.body}</p>
       {children}
       <div className="mt-4 flex flex-wrap justify-center gap-3">
         <Button href={homeHref} variant="brand">

package/src/auth/register-form-labels.ts

@@ -0,0 +1,31 @@
+// The English words of ./register-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). ./register-form re-exports them.
+
+import { englishRateLimited } from "./auth-errors";
+import type { RegisterLabels } from "./register-form";
+
+/** `Required`: every key, the 0.30 one included, has its English here. */
+export const DEFAULT_REGISTER_LABELS: Required<RegisterLabels> = {
+  firstName: "First name",
+  lastName: "Last name",
+  email: "Email",
+  emailTagUse: (address) => `Use ${address}`,
+  emailTagHint:
+    "Many providers deliver name+tag@… to the same inbox, so mail from this app is easy to filter and trace. Check yours does before you rely on it: you would sign in with the tagged address.",
+  invitedEmailHint: "The address your invitation was sent to.",
+  invitedTagNote: "The tagged address gets a confirmation mail of its own.",
+  password: "Password",
+  confirmPassword: "Repeat password",
+  passwordMismatch: "The passwords don't match.",
+  language: "Language",
+  submit: "Create account",
+  haveAccount: "Already have an account?",
+  signIn: "Sign in",
+  emailTaken: "An account with this email address already exists.",
+  registrationClosed: "New accounts are by invitation only. Ask the operator to invite your email address.",
+  invitationInvalid: "This invitation link is not valid.",
+  invitationExpired: "This invitation has expired. Ask for a new one.",
+  failed: "Registration failed. Please try again.",
+  rateLimited: englishRateLimited,
+};

package/src/auth/register-form.tsx

@@ -1,20 +1,22 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
 
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { KIT_LANGUAGES, resolveLanguage } from "../i18n/languages";
 import type { KitLanguageCode } from "../i18n/languages";
 import { cn } from "../lib/cn";
 import { AlertBanner } from "../components/alert-banner";
-import { hasMessage } from "../components/choice-parts";
+import { hasContent } from "../lib/presence";
 import { LanguageSelect } from "../components/language-select";
 import { LegalAcceptCheckbox } from "../components/legal-page";
 import { TextLink } from "../components/text-link";
-import { Button, Input } from "../components/ui";
-import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
+import { Button } from "../components/button";
+import { Input } from "../components/input";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "./auth-errors";
 import { emailParts, taggedEmail } from "./email-tag";
 import { newPasswordProblem, personNameOk, PERSON_NAME_MAX_LENGTH } from "./form-rules";
 import { NewPasswordFields } from "./new-password-fields";
+import { DEFAULT_REGISTER_LABELS } from "./register-form-labels";
 
 /** What `RegisterForm` hands `onSubmit` — the core of `POST /auth/register` (§4.2). The
  *  app adds its own fields (kastlan's company, keksdose's currency) and the
@@ -78,32 +80,10 @@ export interface RegisterLabels {
   rateLimited?: (seconds?: number) => string;
 }
 
-/** `Required`: every key, the 0.30 one included, has its English here. */
-export const DEFAULT_REGISTER_LABELS: Required<RegisterLabels> = {
-  firstName: "First name",
-  lastName: "Last name",
-  email: "Email",
-  emailTagUse: (address) => `Use ${address}`,
-  emailTagHint:
-    "Many providers deliver name+tag@… to the same inbox, so mail from this app is easy to filter and trace. Check yours does before you rely on it: you would sign in with the tagged address.",
-  invitedEmailHint: "The address your invitation was sent to.",
-  invitedTagNote: "The tagged address gets a confirmation mail of its own.",
-  password: "Password",
-  confirmPassword: "Repeat password",
-  passwordMismatch: "The passwords don't match.",
-  language: "Language",
-  submit: "Create account",
-  haveAccount: "Already have an account?",
-  signIn: "Sign in",
-  emailTaken: "An account with this email address already exists.",
-  registrationClosed: "New accounts are by invitation only. Ask the operator to invite your email address.",
-  invitationInvalid: "This invitation link is not valid.",
-  invitationExpired: "This invitation has expired. Ask for a new one.",
-  failed: "Registration failed. Please try again.",
-  rateLimited: englishRateLimited,
-};
+// Defined in ./register-form-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_REGISTER_LABELS };
 
-export interface RegisterFormProps extends Omit<ComponentPropsWithoutRef<"div">, "onSubmit" | "children"> {
+export interface RegisterFormProps extends Omit<ComponentPropsWithRef<"div">, "onSubmit" | "children"> {
   /**
    * The form was submitted with everything filled in. Send it (`POST /auth/register`,
    * §4.2) and resolve once the user is signed in, or reject with the client's error:
@@ -127,7 +107,7 @@ export interface RegisterFormProps extends Omit<ComponentPropsWithoutRef<"div">,
    */
   invitedEmail?: string;
   /**
-   * 0.29.1: an address to start with that stays EDITABLE, with the `+tag` suggestion still
+   * 0.30.0: an address to start with that stays EDITABLE, with the `+tag` suggestion still
    * offered — for a link anyone can build (keksdose's token-free `/register?email=…`
    * beta link, kept while an app moves to invitations). Unlike `invitedEmail` it proves
    * nothing, so it locks nothing. `invitedEmail` wins when both are given.
@@ -176,7 +156,7 @@ export interface RegisterFormProps extends Omit<ComponentPropsWithoutRef<"div">,
    *  throttle with its wait), or `undefined` for the kit's. Asked first, for every
    *  failure; a bare `429` needs none since 0.30.0 — the kit says `rateLimited`. */
   describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: Partial<RegisterLabels>;
+  labels?: LabelOverride<RegisterLabels>;
 }
 
 const ALL_CODES: readonly KitLanguageCode[] = KIT_LANGUAGES.map((language) => language.code);
@@ -320,13 +300,13 @@ export function RegisterForm({
         setBusy(null);
         const own = describeError?.(error);
         const code = authErrorCode(error);
-        if (code === "email_taken" && !hasMessage(own)) {
+        if (code === "email_taken" && !hasContent(own)) {
           setTaken(values.email);
           emailRef.current?.focus();
           return;
         }
         setFailure(
-          hasMessage(own)
+          hasContent(own)
             ? own
             : isRateLimited(error)
               ? (labels.rateLimited ?? DEFAULT_REGISTER_LABELS.rateLimited)(retryAfterSeconds(error))
@@ -386,7 +366,7 @@ export function RegisterForm({
           {/* The tag, offered rather than applied (§4.5): one click, the exact address
               on the button, reversible by typing — or, invited, by the button back. */}
           {suggestion && (
-            <p className="mt-1 text-xs text-[var(--text-muted)]">
+            <p className="mt-1 text-xs text-muted">
               <Button
                 type="button"
                 variant="link"
@@ -402,7 +382,7 @@ export function RegisterForm({
             </p>
           )}
           {backToInvited !== null && (
-            <p className="mt-1 text-xs text-[var(--text-muted)]">
+            <p className="mt-1 text-xs text-muted">
               <span>{labels.invitedTagNote}</span>{" "}
               <Button
                 type="button"
@@ -454,7 +434,7 @@ export function RegisterForm({
           disabled={working}
         />
 
-        {hasMessage(failure) && (
+        {hasContent(failure) && (
           <AlertBanner tone="danger" size="sm" role="alert">
             {failure}
           </AlertBanner>
@@ -465,7 +445,7 @@ export function RegisterForm({
         </Button>
       </form>
       {signInHref !== undefined && (
-        <p className="text-center text-sm text-[var(--text-secondary)]">
+        <p className="text-center text-sm text-secondary">
           {labels.haveAccount}{" "}
           <TextLink href={signInHref} tone="primary">
             {labels.signIn}

package/src/auth/reset-password-form-labels.ts

@@ -0,0 +1,27 @@
+// The English words of ./reset-password-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). ./reset-password-form
+// re-exports them.
+
+import { englishRateLimited } from "./auth-errors";
+import type { ResetPasswordLabels } from "./reset-password-form";
+
+/** `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,
+};

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}