@eifi1/ui-kit 0.53.0 → 0.55.0

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

@@ -1,253 +0,0 @@
-import { useContext, useEffect, useId, useRef, useState } from "react";
-import type { ReactNode } from "react";
-
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { describeFailure } from "../lib/describe-failure";
-import { usePromisePending } from "../components/danger-confirm";
-import { DialogFrame } from "../components/dialog-frame";
-import { ModalCloseContext } from "../components/modal";
-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). */
-export interface CompleteNameValues {
-  firstName: string;
-  lastName: string;
-}
-
-/**
- * Every string the dialog renders — the `completeName` namespace of `<UiKitProvider
- * labels>`, overridable per instance through `labels`.
- */
-export interface CompleteNameLabels {
-  title: string;
-  description: string;
-  firstName: string;
-  lastName: string;
-  save: string;
-  /** Dismisses the dialog until the next sign-in. */
-  later: string;
-  /** Under the fields when `onSave` rejected and the app passed no `error`. */
-  failed: string;
-}
-
-// 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). */
-  firstName?: string;
-  /** Usually empty: that is why the dialog is up. */
-  lastName?: string;
-  /**
-   * Save the names (`PATCH /auth/me`). Resolve and the dialog closes (`onClose(true)`);
-   * reject and it stays open with the names kept and `error` — or "Your name could not
-   * be saved" — under them.
-   */
-  onSave: (values: CompleteNameValues) => Promise<unknown>;
-  /**
-   * The dialog has closed: `true` after a resolved `onSave`, `false` for "Later", Escape,
-   * the backdrop and Back. `false` only DEFERS it: the app shows it again after the
-   * next sign-in while `/auth/me` still answers `name_incomplete: true`.
-   */
-  onClose: (saved: boolean) => void;
-  /** The app's words for the last failed save, instead of `labels.failed`. Hidden again
-   *  once a name is edited. */
-  error?: ReactNode;
-  /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. */
-  open?: boolean;
-  labels?: LabelOverride<CompleteNameLabels>;
-}
-
-/**
- * "Complete your name" — asked once after sign-in of a user whose name was migrated
- * (docs/auth-harmonization.md §3.3). keksdose's and Kurvenschmiede's accounts had one
- * `display_name`; it moved whole into `first_name`, `last_name` stayed empty, and
- * nothing was split by guesswork (§2.4). The app shows this while `/auth/me` answers
- * `name_incomplete: true` — never for a demo user.
- *
- * Both names prefilled with what is there; "Save" waits until both have 1–120
- * characters after trimming. **"Later" only defers it**: nothing else waits on a
- * complete name, no page is blocked, and the app asks again at the next sign-in.
- *
- * The promise handling is `ReauthDialog`'s: busy while `onSave` runs (the fields
- * read-only, "Later" disabled, Escape, the backdrop and Back held — a request that has
- * left cannot be called back by closing the dialog), closed on resolve, kept open on
- * reject. Save is a
- * `commit` control, so a `WriteLockProvider` above it locks it with its reason — every
- * lock but a lapsed plan's (`COMMIT_EXCEPT_BILLING`, 0.33): one's own name is the
- * account's own settings, which billing never locks (docs/billing-harmonization.md §3.3,
- * §12.36).
- *
- * Focus starts in the first EMPTY field — the last name, as a rule — because filling it
- * in is the whole of what the dialog is for.
- */
-export function CompleteNameDialog({
-  firstName: initialFirst = "",
-  lastName: initialLast = "",
-  onSave,
-  onClose,
-  error,
-  open,
-  labels: labelsProp,
-}: CompleteNameDialogProps) {
-  const labels = useKitLabels("completeName", DEFAULT_COMPLETE_NAME_LABELS, labelsProp);
-  const [first, setFirst] = useState(initialFirst);
-  const [last, setLast] = useState(initialLast);
-  // A failed save describes the names that were sent; an edit makes it stale.
-  const [failed, setFailed] = useState(false);
-  const { pending, run } = usePromisePending();
-  const [done, setDone] = useState(false);
-  const saved = useRef(false);
-  const formId = useId();
-  const firstRef = useRef<HTMLInputElement>(null);
-  const lastRef = useRef<HTMLInputElement>(null);
-  const isOpen = open ?? true;
-
-  // Reopened (kept-mounted): start again from what the account holds. During render,
-  // as ReauthDialog wipes its password, so no frame shows the old draft.
-  const [wasOpen, setWasOpen] = useState(isOpen);
-  if (wasOpen !== isOpen) {
-    setWasOpen(isOpen);
-    if (isOpen) {
-      setFirst(initialFirst);
-      setLast(initialLast);
-      setFailed(false);
-      setDone(false);
-    }
-  }
-
-  // After Modal's own effect, so its trap has recorded the trigger before focus moves.
-  useEffect(() => {
-    if (!isOpen) return;
-    saved.current = false;
-    const target = firstRef.current?.value.trim() ? lastRef.current : firstRef.current;
-    target?.focus();
-  }, [isOpen]);
-
-  const canSave = personNameOk(first) && personNameOk(last);
-
-  const submit = () => {
-    if (pending || !canSave) return;
-    setFailed(false);
-    const values = { firstName: first.trim(), lastName: last.trim() };
-    let result: Promise<unknown>;
-    try {
-      result = Promise.resolve(onSave(values));
-    } catch (err) {
-      result = Promise.reject(err);
-    }
-    // A rejection must not go unhandled; usePromisePending clears `pending` on it.
-    result.catch(() => setFailed(true));
-    run(result, () => {
-      saved.current = true;
-      setDone(true);
-    });
-  };
-
-  const edit = (set: (value: string) => void) => (value: string) => {
-    set(value);
-    setFailed(false);
-  };
-
-  // An app's `failed && words` before it has words is `false`, which `??` kept (refactor
-  // audit 2026-10-30, DUP-14): the kit's sentence unless the app's says something.
-  const message = failed ? describeFailure(error, labels.failed) : undefined;
-
-  return (
-    <DialogFrame
-      open={open}
-      title={labels.title}
-      description={labels.description}
-      onClose={() => onClose(saved.current)}
-      busy={pending}
-      actions={
-        <CompleteNameActions
-          formId={formId}
-          done={done}
-          busy={pending}
-          canSave={canSave}
-          laterLabel={labels.later}
-          saveLabel={labels.save}
-        />
-      }
-    >
-      <form
-        id={formId}
-        noValidate
-        className="grid gap-3 @container"
-        onSubmit={(e) => {
-          e.preventDefault();
-          submit();
-        }}
-      >
-        <div className="grid gap-3 @xs:grid-cols-2">
-          <Input
-            ref={firstRef}
-            name="given-name"
-            autoComplete="given-name"
-            label={labels.firstName}
-            value={first}
-            onChange={(e) => edit(setFirst)(e.target.value)}
-            maxLength={PERSON_NAME_MAX_LENGTH}
-            readOnly={pending}
-            required
-          />
-          <Input
-            ref={lastRef}
-            name="family-name"
-            autoComplete="family-name"
-            label={labels.lastName}
-            value={last}
-            onChange={(e) => edit(setLast)(e.target.value)}
-            maxLength={PERSON_NAME_MAX_LENGTH}
-            readOnly={pending}
-            required
-          />
-        </div>
-        {message !== undefined && (
-          <p role="alert" className="text-xs text-danger">
-            {message}
-          </p>
-        )}
-      </form>
-    </DialogFrame>
-  );
-}
-
-/** The actions row, inside the `Modal`, where its animated close is in context: a
- *  resolved save lowers the panel through it, as "Later" and Escape do. */
-function CompleteNameActions({
-  formId,
-  done,
-  busy,
-  canSave,
-  laterLabel,
-  saveLabel,
-}: {
-  formId: string;
-  done: boolean;
-  busy: boolean;
-  canSave: boolean;
-  laterLabel: string;
-  saveLabel: string;
-}) {
-  const close = useContext(ModalCloseContext);
-  useEffect(() => {
-    if (done) close?.();
-  }, [done, close]);
-  return (
-    <>
-      <Button type="button" variant="ghost" disabled={busy} onClick={() => close?.()}>
-        {laterLabel}
-      </Button>
-      <Button type="submit" form={formId} commit={COMMIT_EXCEPT_BILLING} disabled={!busy && !canSave} pending={busy}>
-        {saveLabel}
-      </Button>
-    </>
-  );
-}

package/src/auth/email-tag.ts

@@ -1,75 +0,0 @@
-/**
- * The address tag: `you@example.com` → `you+kastlan@example.com`, the app's own name as
- * a sub-address of the address a person types for themselves (docs/auth-harmonization.md
- * §4.5, Marcel 2026-10-05). Lifted from keksdose (`features/auth/email-tag.ts`, feedback
- * dev#481), where the tag was the constant `keksdose`; here it is the app's.
- *
- * **Structurally valid is not the same as deliverable.** `+` is an ordinary character in
- * the local part under RFC 5322, and sub-addressing — `user+tag@host` delivered to
- * `user@host` — is specified (RFC 5233). But it is specified as a convention the
- * RECEIVING server may implement: Gmail, Outlook, iCloud, Fastmail and Proton do; many
- * Exchange installs, small hosters and corporate filters do not, and some web forms
- * refuse the character outright.
- *
- * Which is why every caller OFFERS the result and never applies it. Silently registering
- * somebody as `you+kastlan@example.com` would send the verification mail — the one
- * message the account depends on — down a delivery path nobody checked, and make the
- * address they sign in with one they never typed. The tag is a convenience for the
- * person who wants it: one click, with the exact resulting address on the button
- * (`RegisterForm` does this with its `emailTag`).
- *
- * The tagged address is then the identity. The server trims and lower-cases an address
- * at every entry and never strips a tag, so `you@…` and `you+kastlan@…` are two
- * different accounts; sign-in stays exact (§4.5), which is why `SignInForm`'s hint after
- * a failed sign-in names the tagged address rather than trying it.
- *
- * Offer it only where a person types an address FOR THEMSELVES — sign-up, a later email
- * change in the profile — never in a field for someone else's (an invite dialog, a
- * share), where the tag would be a guess about another person's mail server.
- */
-
-/** What a tag may be: the app's name, lower case — letters, digits, `.`, `_`, `-`. A
- *  space, `@` or `+` would make the result something other than a sub-address. */
-const TAG_SHAPE = /^[a-z0-9][a-z0-9._-]*$/;
-
-/**
- * `taggedEmail("you@example.com", "kastlan")` → `"you+kastlan@example.com"`, or `null`
- * when there is nothing to offer:
- *
- *  - the address is not complete enough to split — no local part, no domain, or a
- *    domain without an inner dot (the shape the field's own `type="email"` accepts), so
- *    the offer cannot appear before the address is plausible or linger once it stops
- *    being one;
- *  - the address already carries a `+` — the person's own scheme wins, and stacking a
- *    second tag on it would be wrong;
- *  - the tag is empty or not a plain name (see `TAG_SHAPE`).
- *
- * The tag is the app's name in lower case (`keksdose`, `kastlan`, `kurvenschmiede`); it
- * is trimmed and lower-cased here, so `"Kastlan"` gives the same answer. The address is
- * trimmed and otherwise kept as typed — normalising it is the server's job (server-kit's
- * `normalise_email`).
- */
-export function taggedEmail(email: string, tag: string): string | null {
-  const name = tag.trim().toLowerCase();
-  if (!TAG_SHAPE.test(name)) return null;
-  const parts = emailParts(email);
-  if (!parts || parts.local.includes("+")) return null;
-  return `${parts.local}+${name}@${parts.domain}`;
-}
-
-/**
- * The trimmed address split at its last `@`, or `null` while it is not complete enough
- * to split: no local part, no domain, or a domain without an inner dot — the shape the
- * field's own `type="email"` accepts.
- *
- * @internal `RegisterForm` gates its submit on it; not part of the barrel.
- */
-export function emailParts(email: string): { local: string; domain: string } | null {
-  const trimmed = email.trim();
-  const at = trimmed.lastIndexOf("@");
-  if (at <= 0 || at === trimmed.length - 1) return null;
-  const local = trimmed.slice(0, at);
-  const domain = trimmed.slice(at + 1);
-  if (!domain.includes(".") || domain.startsWith(".") || domain.endsWith(".")) return null;
-  return { local, domain };
-}

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

@@ -1,20 +0,0 @@
-// 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-labels";
-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,221 +0,0 @@
-import { useId, useRef, useState } from "react";
-import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
-import { MailCheck } from "lucide-react";
-import { cn } from "../lib/cn";
-import { describeFailure } from "../lib/describe-failure";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { AlertBanner } from "../components/alert-banner";
-import { TextLink } from "../components/text-link";
-import { Button } from "../components/button";
-import { Input } from "../components/input";
-import { isRateLimited, retryAfterSeconds } from "./auth-errors";
-import { isThenable } from "../lib/thenable";
-import { FORM_HEADING_CLASS, INTRO_CLASS, OutcomeMessage, useFocusWhen } from "./status-parts";
-import type { AuthHeadingLevel } from "./status-parts";
-import { DEFAULT_FORGOT_PASSWORD_LABELS } from "./forgot-password-form-labels";
-
-/* ── Labels ──────────────────────────────────────────────────────────────── */
-
-/** Every string the form renders — the `forgotPassword` namespace. keksdose's words
- *  (`auth.forgot.*`), which kastlan took over unchanged. */
-export interface ForgotPasswordLabels {
-  /** The heading. */
-  title: string;
-  /** Under the heading, before the field. */
-  intro: string;
-  /** The email field's label. */
-  email: string;
-  submit: string;
-  /** The one answer, whatever the server knows — given the address as typed. */
-  sent: (email: string) => string;
-  /** Under it: how long the link lives, and where else to look. */
-  sentHint: string;
-  /** The link back to the sign-in page, on both states. */
-  backToSignIn: string;
-  /** A request that did not go through: a throttle, an outage. Never "unknown
-   *  address" — the endpoint does not say. */
-  error: string;
-  /** 0.30.0: the request was throttled — HTTP 429 ({@link isRateLimited}) — given the
-   *  `Retry-After` wait in seconds, or `undefined` without one. OPTIONAL, like every key
-   *  added to a shipped interface; the provider's `forgotPassword`, then English, fill
-   *  it. */
-  rateLimited?: (seconds?: number) => string;
-}
-
-// 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<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
-   * an account exists. Reject only when the request did not go through (a throttle, an
-   * outage); the form then stays, with the address, and says so. The form never sends a
-   * request itself (§8).
-   */
-  onSubmit: (email: string) => Promise<unknown> | void;
-  /** "Back to sign in" — the app's `/login`. Default `/login`. */
-  signInHref?: string;
-  /** The field's start value — the address the sign-in form already had, so someone
-   *  whose password just failed need not type it twice. */
-  defaultEmail?: string;
-  /**
-   * The app's words for a failed request ("Too many requests — try again in an hour"),
-   * or `undefined` for the kit's: `rateLimited` for a bare `429` (0.30.0), else `error`.
-   * The same hook as `SignInForm`'s.
-   */
-  describeError?: (error: unknown) => ReactNode | undefined;
-  /** App content under the intro — a notice, a support address. */
-  formContent?: ReactNode;
-  /** The heading. Default `labels.title`; `null` draws none, for a page that puts it
-   *  in `AuthLayout`'s `title` instead. */
-  title?: ReactNode;
-  /** The heading's level. Default `h2`, under the page's `h1`. */
-  headingAs?: AuthHeadingLevel;
-  labels?: LabelOverride<ForgotPasswordLabels>;
-}
-
-/**
- * "I forgot my password" for every app (docs/auth-harmonization.md §7): one field, then
- * the same sentence whatever the answer — keksdose's `ForgotPasswordPage`
- * (features/auth/forgot-password-page.tsx), kastlan's copy of it, as one component.
- *
- * **It always ends on the same message**: "If an account exists for …, the link is on
- * its way." The server answers `204` whether or not the address has an account — so the
- * page cannot be used to find out who has one — and the page must not undo that by
- * saying more than the server knows. Worded as a promise ("we sent you a link"), a typo
- * would look like a mail-delivery problem and send the person waiting instead of trying
- * their other address (keksdose #198). The address shown is the one they typed, so a
- * typo is visible.
- *
- * The only failure it can show is a request that did not go through (throttled, the
- * server down), never "unknown address". §4.5's fallback to a tagged address
- * (`you+kastlan@…` when `you@…` has no account) is the server's and changes nothing here.
- *
- * The submit is not disabled while the field is empty — a browser that autofills
- * withholds the value until the first interaction, and a disabled button would swallow
- * that first click; the field's own `required` answers an empty submit instead. After a
- * submit the confirmation takes focus, because the button that had it is gone with the
- * form.
- */
-export function ForgotPasswordForm({
-  onSubmit,
-  signInHref = "/login",
-  defaultEmail = "",
-  describeError,
-  formContent,
-  title,
-  headingAs: Heading = "h2",
-  labels: labelsProp,
-  className,
-  ...rest
-}: ForgotPasswordFormProps) {
-  const labels = useKitLabels("forgotPassword", DEFAULT_FORGOT_PASSWORD_LABELS, labelsProp);
-  const [email, setEmail] = useState(defaultEmail);
-  const [pending, setPending] = useState(false);
-  const [failure, setFailure] = useState<ReactNode>(null);
-  const [sentTo, setSentTo] = useState<string | null>(null);
-  const headingId = useId();
-  const sentRef = useRef<HTMLDivElement>(null);
-  useFocusWhen(sentTo !== null, sentRef);
-
-  const heading =
-    title === null ? null : (
-      <Heading id={headingId} className={FORM_HEADING_CLASS}>
-        {title ?? labels.title}
-      </Heading>
-    );
-  const back = (
-    <p className="text-center text-sm">
-      <TextLink href={signInHref} tone="primary">
-        {labels.backToSignIn}
-      </TextLink>
-    </p>
-  );
-
-  if (sentTo !== null) {
-    return (
-      <div {...rest} data-state="sent" className={cn("space-y-3", className)}>
-        {heading}
-        <OutcomeMessage icon={<MailCheck className="text-success" />} focusRef={sentRef}>
-          <p className={INTRO_CLASS}>{labels.sent(sentTo)}</p>
-          <p className="text-xs text-muted">{labels.sentHint}</p>
-        </OutcomeMessage>
-        {back}
-      </div>
-    );
-  }
-
-  // The app's words first, then the throttle's, then the kit's catch-all — an app's ""
-  // is no words (refactor audit 2026-10-30, DUP-14: `??` drew an empty alert).
-  const failureFor = (error: unknown): ReactNode =>
-    describeFailure(
-      describeError?.(error),
-      isRateLimited(error)
-        ? (labels.rateLimited ?? DEFAULT_FORGOT_PASSWORD_LABELS.rateLimited)(retryAfterSeconds(error))
-        : labels.error,
-    );
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    const address = email.trim();
-    if (pending || address === "") return;
-    setFailure(null);
-    let result: unknown;
-    try {
-      result = onSubmit(address);
-    } catch (error) {
-      setFailure(failureFor(error));
-      return;
-    }
-    if (!isThenable(result)) {
-      setSentTo(address);
-      return;
-    }
-    setPending(true);
-    result.then(
-      () => {
-        setPending(false);
-        setSentTo(address);
-      },
-      (error: unknown) => {
-        setPending(false);
-        setFailure(failureFor(error));
-      },
-    );
-  };
-
-  return (
-    <div {...rest} data-state="form" className={cn("space-y-3", className)}>
-      <form className="space-y-3" aria-labelledby={title === null ? undefined : headingId} onSubmit={submit}>
-        {heading}
-        <p className={INTRO_CLASS}>{labels.intro}</p>
-        {formContent}
-        <Input
-          type="email"
-          name="email"
-          autoComplete="email"
-          label={labels.email}
-          value={email}
-          onChange={(e) => {
-            setEmail(e.target.value);
-            if (failure) setFailure(null);
-          }}
-          readOnly={pending}
-          required
-        />
-        {failure != null && (
-          <AlertBanner tone="danger" size="sm" role="alert">
-            {failure}
-          </AlertBanner>
-        )}
-        <Button type="submit" className="w-full" pending={pending}>
-          {labels.submit}
-        </Button>
-      </form>
-      {back}
-    </div>
-  );
-}

package/src/auth/form-rules.ts

@@ -1,40 +0,0 @@
-import { passwordByteLength } from "../components/password-strength";
-
-/**
- * The few hard rules of the sign-up and sign-in forms, in one place — and the only ones
- * (docs/auth-harmonization.md §3.1, §8). The servers check the same; the kit adds no
- * rule of its own, and everything the strength meter shows beyond these is advice.
- *
- * @internal Shared by RegisterForm, SignInForm and CompleteNameDialog; the coordinator
- * decides whether the constants join the barrel.
- */
-
-/** At least 8 characters. */
-export const PASSWORD_MIN_LENGTH = 8;
-
-/** At most 72 BYTES — bcrypt reads no further, so a longer password would be silently
- *  cut. "ü" is two bytes, an emoji four. */
-export const PASSWORD_MAX_BYTES = 72;
-
-/** A first or last name: 1–120 characters after trimming — the old `display_name`
- *  limit, so a migrated name fits (§3.1). */
-export const PERSON_NAME_MAX_LENGTH = 120;
-
-/** 1–120 characters after trimming. */
-export function personNameOk(value: string): boolean {
-  const length = value.trim().length;
-  return length >= 1 && length <= PERSON_NAME_MAX_LENGTH;
-}
-
-/**
- * Why a new password and its confirmation may not be submitted yet, or `null` when they
- * may — keksdose's `passwordPairError` (features/auth/password-fields.tsx). Characters
- * are counted as code points, as the strength meter counts them: an emoji is one
- * character to the person typing it.
- */
-export function newPasswordProblem(password: string, confirm: string): "length" | "bytes" | "mismatch" | null {
-  if ([...password].length < PASSWORD_MIN_LENGTH) return "length";
-  if (passwordByteLength(password) > PASSWORD_MAX_BYTES) return "bytes";
-  if (password !== confirm) return "mismatch";
-  return null;
-}