@eifi1/ui-kit 0.17.0 → 0.19.0

package/src/components/ui.tsx

@@ -9,6 +9,7 @@ import { Tooltip, type TooltipSide } from "./tooltip";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels";
 import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
 import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link";
+import { useCommitReason } from "./write-lock";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
 
@@ -196,6 +197,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    * DangerConfirm keeps its own.
    */
   disabledReason?: ReactNode;
+  /**
+   * This button COMMITS — it saves, creates, deletes. Under a locked
+   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's
+   * reason (which wins over a `disabledReason` of its own). No provider, or an
+   * unlocked one: no effect. See {@link WriteLockProvider}.
+   */
+  commit?: boolean;
   /**
    * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.
    *
@@ -271,6 +279,7 @@ export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
   pending?: never;
   pressed?: never;
   disabledReason?: never;
+  commit?: never;
 }
 
 function hasContent(node: ReactNode): boolean {
@@ -396,7 +405,8 @@ function ButtonElement({
   stretch,
   tone = "default",
   pressed,
-  disabledReason,
+  disabledReason: ownDisabledReason,
+  commit,
   pending,
   className,
   onClick,
@@ -409,6 +419,7 @@ function ButtonElement({
   ...rest
 }: ButtonProps) {
   const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
@@ -874,6 +885,10 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    * reason nobody can see is not one. Wins over `disabled`, as on Button.
    */
   disabledReason?: ReactNode;
+  /** This action COMMITS — {@link Button}'s `commit`: under a locked
+   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
+   *  reason. No effect without a lock. */
+  commit?: boolean;
   /** The `<button>` element — a prop in React 19, as on {@link Button}. */
   ref?: Ref<HTMLButtonElement>;
   /** Only on the link form — see {@link IconButtonLinkProps}. */
@@ -937,6 +952,7 @@ export interface IconButtonLinkProps
   form?: never;
   pressed?: never;
   disabledReason?: never;
+  commit?: never;
   disabledStyle?: never;
   pending?: never;
 }
@@ -1164,7 +1180,8 @@ function IconButtonElement(
     tooltipSide,
     tooltipPortal,
     tooltipLazy = true,
-    disabledReason,
+    disabledReason: ownDisabledReason,
+    commit,
     pending,
     glyphSize,
     badge,
@@ -1186,6 +1203,7 @@ function IconButtonElement(
   const tone = toneProp ?? (toneColor !== undefined ? "custom" : "default");
   const keep = disabledStyle === "keep";
   const reasonId = useId();
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   // Pending is inert like a locked button — focusable, every activation swallowed —
   // without the locked look: the spinner is the state.
@@ -1750,15 +1768,48 @@ function useFieldError(
  * down out of the field, between the value and the text. So the field keeps its box
  * and this wraps the pair.
  *
- * It renders nothing of its own when there is no message, which is what keeps `error`
- * additive: a field without one is exactly the DOM it was before the prop existed,
- * down to the bare `<input>` an unlabelled {@link Input} drops straight into a
- * caller's flex row. For the same reason `className` is NOT moved out here — it goes
- * on the field, as it always has, so adding a message cannot silently change what
- * that prop styles.
+ * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,
+ * which is what keeps the prop additive: it is exactly the DOM it was before the prop
+ * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a
+ * caller's flex row. A field that DOES take `error` — the key is passed, whatever its
+ * value — is wrapped for as long as it is mounted, message or not (`reserve`).
+ *
+ * It used to wrap only while a message showed, and that cost the control its
+ * identity: a fragment and a `<div>` are different elements at the same spot in the
+ * tree, so React threw the `<input>` away and mounted a new one every time the message
+ * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled
+ * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its
+ * "Wrong password" on change, so the first keystroke of the retry dropped the user out
+ * of the field. Keeping the box stops that; the field is never reparented.
+ *
+ * The other ways to keep it stable were worse. A box on EVERY field changes what every
+ * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the
+ * field would land on a child of the item instead of the item). A `display: contents`
+ * box would keep the flex/grid item, but a contents box takes no margin, so a parent's
+ * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password
+ * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves
+ * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box
+ * whenever its message showed, so what changes is only that it keeps it while none
+ * does; every such call site in the three apps sits in a block or a `space-y`/grid
+ * stack where a full-width block box is the field's own size. The case it does change
+ * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a
+ * row): that caller already lost the sizing while a message showed, and now sees the
+ * same box without one. Pass `error` only where a message can actually appear.
+ *
+ * `className` is NOT moved out here, for the same reason — it goes on the field, as it
+ * always has, so the box cannot silently change what that prop styles.
  */
-function FieldGroup({ errorEl, children }: { errorEl: ReactNode; children: ReactNode }) {
-  if (errorEl === null) return <>{children}</>;
+function FieldGroup({
+  errorEl,
+  reserve = false,
+  children,
+}: {
+  errorEl: ReactNode;
+  /** The caller passed `error`: keep the box even while there is no message. */
+  reserve?: boolean;
+  children: ReactNode;
+}) {
+  if (errorEl === null && !reserve) return <>{children}</>;
   return (
     <div>
       {children}
@@ -1829,8 +1880,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   passwordLabels?: Partial<PasswordRevealLabels>;
 }
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  {
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
+  const {
     className,
     inputClassName,
     label,
@@ -1842,9 +1893,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     error,
     passwordLabels,
     ...rest
-  },
-  ref,
-) {
+  } = props;
+  // Passed at all — even as `undefined` — the field keeps its box; see FieldGroup.
+  const reserve = "error" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -1894,7 +1945,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   if (label === undefined) {
     if (!isPassword) {
       return (
-        <FieldGroup errorEl={errorEl}>
+        <FieldGroup errorEl={errorEl} reserve={reserve}>
           <input
             ref={ref}
             id={id}
@@ -1915,7 +1966,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       );
     }
     return (
-      <FieldGroup errorEl={errorEl}>
+      <FieldGroup errorEl={errorEl} reserve={reserve}>
         <div className={cn("relative", className)}>
           <input
             ref={ref}
@@ -1933,7 +1984,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     );
   }
   return (
-    <FieldGroup errorEl={errorEl}>
+    <FieldGroup errorEl={errorEl} reserve={reserve}>
       <FloatingField className={className} htmlFor={fieldId} label={label} srOnlyLabel={asDisplay}>
         <input
           ref={ref}
@@ -2001,10 +2052,11 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
 // height the caller's type brings with it.
 const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
 
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest },
-  ref,
-) {
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {
+  const { className, label, id, children, invalid, error, hint, size, selectClassName, ...rest } =
+    props;
+  // See Input's `reserve`.
+  const reserve = "error" in props;
   const generated = useId();
   // Only a number reaches the DOM; the two words are this component's own.
   const nativeSize = typeof size === "number" ? size : undefined;
@@ -2100,7 +2152,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
     // box, as the label line's own hint goes at the end of the label.
     if (hasContent(hint) && !textHint) {
       return (
-        <FieldGroup errorEl={below}>
+        <FieldGroup errorEl={below} reserve={reserve}>
           <div className={cn("flex items-center gap-1.5", className)}>
             <div className="relative min-w-0 flex-1">
               {select}
@@ -2112,7 +2164,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       );
     }
     return (
-      <FieldGroup errorEl={below}>
+      <FieldGroup errorEl={below} reserve={reserve}>
         <div className={cn("relative", className)}>
           {select}
           {chevron}
@@ -2121,7 +2173,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
     );
   }
   return (
-    <FieldGroup errorEl={below}>
+    <FieldGroup errorEl={below} reserve={reserve}>
       <FloatingField className={className} htmlFor={fieldId} label={label} staticLabel hint={textHint ? undefined : hint}>
         <select
           ref={ref}
@@ -2159,10 +2211,10 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   error?: ReactNode;
 }
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { className, label, id, placeholder, invalid, error, ...rest },
-  ref,
-) {
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(props, ref) {
+  const { className, label, id, placeholder, invalid, error, ...rest } = props;
+  // See Input's `reserve`.
+  const reserve = "error" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
@@ -2173,7 +2225,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
   );
   if (label === undefined) {
     return (
-      <FieldGroup errorEl={errorEl}>
+      <FieldGroup errorEl={errorEl} reserve={reserve}>
         <textarea
           ref={ref}
           id={id}
@@ -2187,7 +2239,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
     );
   }
   return (
-    <FieldGroup errorEl={errorEl}>
+    <FieldGroup errorEl={errorEl} reserve={reserve}>
       <FloatingField className={className} htmlFor={fieldId} label={label}>
         <textarea
           ref={ref}
@@ -2496,7 +2548,12 @@ export function CardTitle({ className, as: Tag = "div", ...props }: CardTitlePro
   return (
     <Tag
       data-slot="card-title"
-      className={cn(compact ? "text-sm font-medium" : "font-semibold", "leading-none", className)}
+      // Compact is `leading-snug`, not `leading-none`: there the title sits on a
+      // 12px description `gap-0.5` below, and a line box exactly the cap height left
+      // the hint hugging the title's descenders (every keksdose admin card added
+      // `leading-normal` by hand). Comfortable keeps `leading-none` — its 14px
+      // description is `gap-1.5` away and has always read right.
+      className={cn(compact ? "text-sm font-medium leading-snug" : "font-semibold leading-none", className)}
       {...props}
     />
   );

package/src/components/write-lock.tsx

@@ -0,0 +1,96 @@
+import { createContext, useContext, useMemo } from "react";
+import type { ReactNode } from "react";
+import { useKitLabels } from "../i18n/kit-labels";
+
+/** The words {@link WriteLockProvider} renders on its own behalf. */
+export interface WriteLockLabels {
+  /** The tooltip of a locked commit when the provider gives no `reason`. */
+  reason: string;
+}
+
+export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
+  reason: "You can view this but not change it.",
+};
+
+/** What {@link useWriteLock} returns: whether commits are locked here, and why. */
+export interface WriteLock {
+  locked: boolean;
+  /** The one sentence a locked commit shows in its tooltip. Always set while
+   *  `locked`; `undefined` when not. */
+  reason: ReactNode | undefined;
+}
+
+const UNLOCKED: WriteLock = { locked: false, reason: undefined };
+
+const WriteLockContext = createContext<WriteLock>(UNLOCKED);
+
+export interface WriteLockProviderProps {
+  /** Commits below are locked. `false` unlocks a subtree under an outer lock. */
+  locked: boolean;
+  /**
+   * The one sentence that says why — "Shared with you to read", "Read-only demo —
+   * saving is disabled", "A customer account cannot create curves". The app's policy,
+   * already translated. Left out: `labels.reason`.
+   */
+  reason?: ReactNode;
+  labels?: Partial<WriteLockLabels>;
+  children?: ReactNode;
+}
+
+/**
+ * The read-only lock — **everything renders; only the commit is locked.**
+ *
+ * keksdose (features/budgets/write-lock.tsx, the read-only demo budget) and
+ * Kurvenschmiede (features/sharing/write-lock.tsx, a curve shared to view, a customer
+ * account that owns nothing) each built the same `SaveGuard`: the page, its tabs,
+ * forms and dialogs render exactly as for an owner, because a viewer looking at half
+ * a page is not looking at what they were sent; what changes is that the control
+ * that SAVES is off and says why on hover or focus. Both wrapped each Save in a
+ * Tooltip and forced a native `disabled` on it — out of the tab order, so the reason
+ * never reached a keyboard — and both had to remember it at thirty call sites.
+ *
+ * Here the page mounts one provider and each commit control opts in with `commit`
+ * ({@link Button}, {@link IconButton}, {@link FormActions}): under a lock it takes the
+ * kit's `disabledReason` path with this reason — `aria-disabled` and focusable,
+ * every activation swallowed, the reason in the kit Tooltip and its description.
+ *
+ * Who is locked is the app's: the provider takes a boolean, never a role. Fields stay
+ * editable — nothing in them reaches the server until the commit is pressed, and a
+ * form you cannot fill in is not a demo of the form (keksdose accounts-page). A
+ * control that IS its own commit (a toggle that saves on change) reads
+ * {@link useWriteLock} and disables itself. The lock is a courtesy, not a guard: the
+ * server still refuses the write.
+ *
+ * Nested providers: the nearest wins, so an inner `locked={false}` reopens a section
+ * the caller may write (a viewer's own notes on a shared curve), and an inner lock
+ * with its own reason (Kurvenschmiede's owner lock beside the viewer lock) overrides
+ * the outer one's sentence.
+ */
+export function WriteLockProvider({ locked, reason, labels, children }: WriteLockProviderProps) {
+  // The `writeLock` namespace: prop > `<UiKitProvider labels>` > English.
+  const fallback = useKitLabels("writeLock", DEFAULT_WRITE_LOCK_LABELS, labels).reason;
+  // `null`/`""`/`false` count as "no reason given": a lock whose tooltip is empty
+  // would be a disabled button that cannot say why, the thing this replaces.
+  const given = reason !== undefined && reason !== null && reason !== false && reason !== "";
+  const resolved = locked ? (given ? reason : fallback) : undefined;
+  const value = useMemo<WriteLock>(
+    () => (locked ? { locked: true, reason: resolved } : UNLOCKED),
+    [locked, resolved],
+  );
+  return <WriteLockContext.Provider value={value}>{children}</WriteLockContext.Provider>;
+}
+
+/** The nearest {@link WriteLockProvider}'s lock; unlocked with no provider. */
+export function useWriteLock(): WriteLock {
+  return useContext(WriteLockContext);
+}
+
+/**
+ * The `disabledReason` a control with `commit` should use: the lock's reason while
+ * locked — it wins over the control's own, since it is the answer to the question the
+ * hover is asking — else the control's own. Internal to the kit's commit controls.
+ */
+export function useCommitReason(commit: boolean | undefined, own: ReactNode): ReactNode {
+  const lock = useWriteLock();
+  return commit && lock.locked ? lock.reason : own;
+}

package/src/hooks/use-overlay-history.ts

@@ -38,6 +38,16 @@ import { useEffect, useRef } from "react";
  * link while the overlay was open, the router has pushed on top of us, and a blind
  * `history.back()` there would undo their navigation.
  *
+ * ## Not undoing the owner's own close
+ *
+ * Nor when the address under the entry changed in the same breath as the close
+ * (keksdose dev #584). A page that opens its editor by PUSHING `?row=x` and closes it
+ * by REPLACING the clean URL over the top entry rewrites OUR entry — the overlay sits
+ * above `?row=x` — and that rewrite is what unmounts the overlay. Going back from there
+ * lands on `?row=x` and the router opens the editor that was just closed. See
+ * {@link noteAddress}: an address the overlay LIVED THROUGH (a filter the table wrote
+ * while its sheet was up) is still unwound, because the user has acted since.
+ *
  * ## The traversal is deferred
  *
  * And it is *scheduled* rather than issued, because `history.go()` lands a task
@@ -78,6 +88,8 @@ const stack: OverlayEntry[] = [];
  */
 interface PushedEntry {
   id: string;
+  /** The full address of the entry (query and hash included) as of the last time the
+   *  user acted while it was current — see {@link noteAddress}. */
   href: string;
   /** Its overlay is gone but the entry is not — someone above owes this pop. */
   dead: boolean;
@@ -383,6 +395,30 @@ function currentSentinel(): string | null {
   return standing;
 }
 
+/**
+ * The user is about to act: what the current entry's address is NOW is what the
+ * overlay standing on it has lived through.
+ *
+ * The cleanup needs to tell two same-page query rewrites apart, and the address alone
+ * cannot. A `DataTable` with `urlSync` replaces `f.*` over the entry while its filter
+ * sheet is up, and the sheet is closed LATER, by a press of its own — that entry is
+ * still the sheet's and must be unwound (the audit's drift fix, below). A page whose
+ * `?row=` drives the overlay replaces the clean URL over the entry and the overlay
+ * unmounts BECAUSE of it (keksdose dev #584) — that entry is the owner's now, and
+ * unwinding lands on `?row=` beneath and reopens what was just closed. What separates
+ * them is whether the user acted in between: the rewrite that closes an overlay is
+ * made by the very press that closes it, so it postdates this snapshot.
+ *
+ * Capture phase, so the snapshot is taken before any handler of the press runs.
+ */
+function noteAddress(): void {
+  const top = pushed[pushed.length - 1];
+  if (!top || top.dead || !stack.some((e) => e.id === top.id)) return;
+  const tag = taggedSentinel();
+  // Read without `currentSentinel`'s repair: an observation must not write history.
+  if (tag === top.id || (tag === null && standing === top.id && isStillOn(top))) top.href = currentHref();
+}
+
 function handlePop() {
   // A pop MOVES us, so the belief is stale by definition: re-read it from the
   // entry we have landed on before anything below consults it, or the repair in
@@ -422,6 +458,8 @@ function closeOnPop() {
 function ensureListening() {
   if (listening || typeof window === "undefined") return;
   window.addEventListener("popstate", handlePop);
+  window.addEventListener("pointerdown", noteAddress, true);
+  window.addEventListener("keydown", noteAddress, true);
   listening = true;
 }
 
@@ -489,6 +527,19 @@ export function useOverlayHistory(open: boolean, onClose: () => void): void {
       if (consumed.delete(id)) return;
 
       const mine = pushed.findIndex((p) => p.id === id);
+      // Still our entry — same page, same router `idx` — but its address is not the one
+      // the user last acted on: the owner rewrote it as part of closing us (see
+      // {@link noteAddress}). The entry is the owner's page now, and the one beneath is
+      // the address it replaced — going back would restore exactly what was closed.
+      // Nothing to unwind; forget the record rather than re-stamp a page we left.
+      if (mine >= 0 && currentHref() !== pushed[mine].href) {
+        const tag = taggedSentinel();
+        if (tag === id || (tag === null && standing === id && isStillOn(pushed[mine]))) {
+          pushed.splice(mine, 1);
+          if (standing === id) standing = null;
+          return;
+        }
+      }
       // Only unwind an entry that is still THE current one. If a router push landed
       // on top of it, going back would undo the user's navigation instead — and if
       // a SIBLING overlay's sentinel landed on top, that overlay is about to unwind

package/src/i18n/defaults.ts

@@ -46,6 +46,13 @@ import { DEFAULT_ERROR_BOUNDARY_LABELS } from "../components/error-boundary";
 import { DEFAULT_AUTHED_IMAGE_LABELS } from "../components/authed-image";
 import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid";
 import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox";
+import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock";
+import { DEFAULT_LEGAL_LABELS } from "../components/legal";
+import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips";
+import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
+import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
+import { DEFAULT_SERVER_WAKE_LABELS } from "../components/server-wake";
+import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "../components/translation-review-labels";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -128,4 +135,11 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   authedImage: DEFAULT_AUTHED_IMAGE_LABELS,
   imageGrid: DEFAULT_IMAGE_GRID_LABELS,
   lightbox: DEFAULT_LIGHTBOX_LABELS,
+  writeLock: DEFAULT_WRITE_LOCK_LABELS,
+  accountState: DEFAULT_ACCOUNT_STATE_LABELS,
+  shareCard: DEFAULT_SHARE_CARD_LABELS,
+  reauthDialog: DEFAULT_REAUTH_DIALOG_LABELS,
+  serverWake: DEFAULT_SERVER_WAKE_LABELS,
+  translationReview: DEFAULT_TRANSLATION_REVIEW_LABELS,
+  legal: DEFAULT_LEGAL_LABELS,
 };

package/src/i18n/{locales/de.ts → german.ts}

@@ -1,16 +1,20 @@
-import { formatFileSize } from "../kit-labels";
-import type { UiKitLabels } from "../kit-labels";
+import { formatFileSize } from "./kit-labels";
+import type { UiKitLabels } from "./kit-labels";
 
 /**
- * The kit's words in German: every namespace of {@link UiKitLabels}, for
- * `<UiKitProvider labels={UI_KIT_LABELS_DE}>`.
+ * The kit's German, formal ("Sie"), written in standard spelling with "ß" — the SOURCE
+ * the public `de-CH` catalogue is derived from (via `swiss()`), not a catalogue itself.
  *
- * Self-contained on purpose — nothing but the kit's own `formatFileSize` — so it works
- * as a starting point to copy and adjust. Counts and sizes are formatted with
- * `de-DE` digits; {@link uiKitLabelsDe} takes another number locale
- * (e.g. `"de-CH"` for 1’234) without touching the words.
+ * Internal on purpose: it lives outside `src/i18n/locales/` because every file there is
+ * a public `@eifi1/ui-kit/i18n/<code>` subpath, and the kit ships ONE German — Swiss,
+ * formal (0.18.0 removed `/i18n/de`, `/i18n/de-informal` and `/i18n/de-CH-informal`).
+ * The text stays written with "ß" because `swiss()` respells at runtime, so a Swiss app
+ * also gets an argument it passes in (a file name, a phrase to type) respelled; writing
+ * "ss" here instead would change that behaviour for every function label.
+ *
+ * Counts and sizes are formatted with `numberLocale`'s digits; the words never change.
  */
-export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
+export function germanLabels(numberLocale: string): UiKitLabels {
   const num = new Intl.NumberFormat(numberLocale);
   const n = (value: number) => num.format(value);
 
@@ -40,8 +44,8 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       thread: "Kommentare",
       empty: "Noch keine Kommentare",
       loading: "Kommentare werden geladen…",
-      // The reader's own messages. "Ich" rather than "Sie"/"Du": it is the same word in
-      // both registers, so the informal catalogue inherits it unchanged.
+      // The reader's own messages. "Ich" rather than "Sie": it reads the same whether
+      // the app addresses its users with "Sie" or "du", so neither has to override it.
       you: "Ich",
       staff: "Team",
       attachments: "Anhänge",
@@ -91,6 +95,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       passkeys: {
         title: "Passkeys",
         description: "Mit Fingerabdruck, Gesichtserkennung oder Geräte-PIN statt Passwort anmelden.",
+        descriptionAlongside: "Mit Fingerabdruck, Gesichtserkennung oder Geräte-PIN anmelden. Das Passwort funktioniert weiterhin.",
         empty: "Noch keine Passkeys",
         loading: "Passkeys werden geladen…",
         list: "Registrierte Passkeys",
@@ -506,6 +511,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
     confirmDialog: {
       confirm: "Bestätigen",
       cancel: "Abbrechen",
+      typed: (text) => `Geben Sie zur Bestätigung „${text}“ ein`,
     },
     floatingPanel: {
       close: "Schließen",
@@ -591,7 +597,108 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       noPreview: "Für diese Datei ist keine Vorschau verfügbar",
       openInNewTab: "In neuem Tab öffnen",
     },
+    writeLock: {
+      // Impersonal, like the rest of this catalogue where it can be: an app that
+      // addresses its users with "du" then has fewer keys to override.
+      reason: "Nur zum Ansehen – Änderungen sind hier nicht möglich.",
+    },
+    accountState: {
+      active: "Aktiv",
+      inactive: "Inaktiv",
+      invited: "Eingeladen",
+      registered: "Registriert",
+      unverified: "Nicht bestätigt",
+      passwordChange: "Passwortänderung erforderlich",
+    },
+    shareCard: {
+      dialogTitle: "Teilen",
+      close: "Schließen",
+      email: "E-Mail-Adresse",
+      emailOptional: "E-Mail-Adresse (optional)",
+      // example.com is reserved for examples (RFC 2606); a German-looking domain is
+      // somebody's real one.
+      emailPlaceholder: "name@example.com",
+      invalidEmail: "Bitte eine vollständige E-Mail-Adresse eingeben.",
+      role: "Rolle",
+      roleOf: (name) => `Rolle von ${name}`,
+      add: "Teilen",
+      whoHasAccess: "Wer hat Zugriff",
+      nobodyYet: "Bisher hat niemand sonst Zugriff.",
+      pending: "Ausstehend",
+      openInvite: "Offener Einladungslink",
+      copyLink: "Link kopieren",
+      team: "Team",
+      teamHint: (name) => `Alle in ${name} erhalten Zugriff.`,
+      remove: "Zugriff entfernen",
+      removeConfirm: (name) => `Zugriff für ${name} entfernen?`,
+      revokePending: "Einladung zurückziehen",
+      revokePendingConfirm: (name) => `Einladung für ${name} zurückziehen?`,
+      failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
+      loading: "Wird geladen…",
+    },
+    reauthDialog: {
+      title: "Identität bestätigen",
+      description: "Zum Fortfahren das aktuelle Passwort eingeben.",
+      password: "Aktuelles Passwort",
+      submit: "Weiter",
+      cancel: "Abbrechen",
+    },
+    serverWake: {
+      slow: "Lädt noch – das dauert länger als sonst.",
+      waking: (appName) =>
+        `Der Server schläft ein, wenn ${appName ?? "die App"} gerade niemand benutzt. Die erste Anfrage nach einer Pause muss ihn erst wieder starten. Das kann einen Moment dauern – es geht nichts verloren, die Seite füllt sich von selbst.`,
+    },
+    legal: {
+      navLabel: "Rechtliches",
+    },
+    translationReview: {
+      statusMissing: "Fehlt",
+      statusUnreviewed: "Ungeprüft",
+      statusChanged: "Seit der Prüfung geändert",
+      statusNeedsChange: "Änderung nötig",
+      statusApproved: "Bestätigt",
+      statusFilter: "Status",
+      all: "Alle",
+      filterCount: (label, count) => `${label} · ${n(count)}`,
+      source: "Texte",
+      allSources: "Alle Texte",
+      namespace: "Bereich",
+      allNamespaces: "Alle Bereiche",
+      search: "Schlüssel und Texte durchsuchen",
+      placeholdersOnly: (count) => `Nur Platzhalter-Probleme (${n(count)})`,
+      placeholderChip: "Platzhalter",
+      key: "Schlüssel",
+      statusColumn: "Status",
+      empty: "Keine Texte passen zu diesen Filtern.",
+      missingText: "Fehlt in dieser Sprache",
+      progress: (approved, total) => `${n(approved)} von ${n(total)} bestätigt`,
+      localeProgress: (approved, total) => `${n(approved)}/${n(total)}`,
+      locales: "Sprachen",
+      approve: "Bestätigen",
+      flag: "Änderung nötig",
+      suggest: "Übersetzung vorschlagen",
+      reset: "Als ungeprüft markieren",
+      cancel: "Abbrechen",
+      approveSelected: "Auswahl bestätigen",
+      resetSelected: "Auswahl als ungeprüft markieren",
+      selectShown: "Alle angezeigten auswählen",
+      changedSince: "Dieser Text wurde nach der Prüfung geändert. Bitte lesen Sie ihn noch einmal.",
+      reviewedWording: "Wortlaut bei der Prüfung",
+      reviewedReference: "Vorlage bei der Prüfung",
+      placeholderMismatch: (reference, text) =>
+        `Die Platzhalter weichen von der Vorlage ab – Vorlage: ${reference}; dieser Text: ${text}. Die App setzt dort Werte ein, deshalb müssen sie genau so bleiben.`,
+      lastApproved: (name, date) => `Bestätigt von ${name} am ${date}`,
+      lastFlagged: (name, date) => `Als änderungsbedürftig markiert von ${name} am ${date}`,
+      // Dative, after "von": "Bestätigt von einem gelöschten Konto".
+      erasedReviewer: "einem gelöschten Konto",
+      suggestion: "Bessere Formulierung",
+      translation: "Übersetzung",
+      note: "Notiz (optional)",
+      notePlaceholder: "Was falsch ist oder worauf zu achten ist",
+      readOnly: "Sie können diese Sprache lesen, aber nicht prüfen.",
+      scope: (areas) => `Ihre Prüfung ist beschränkt auf: ${areas}.`,
+      exportCorrections: (count) => `Korrekturen exportieren (${n(count)})`,
+      failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
+    },
   };
 }
-
-export const UI_KIT_LABELS_DE: UiKitLabels = uiKitLabelsDe();