@eifi1/ui-kit 0.17.0 → 0.19.0

package/src/components/confirm-dialog.tsx

@@ -2,8 +2,10 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 import type { ReactNode } from "react";
 
 import { useKitLabels } from "../i18n/kit-labels";
+import { typedMatches } from "./danger-confirm";
+import type { TypedMatch } from "./danger-confirm";
 import { DialogFrame } from "./dialog-frame";
-import { Button } from "./ui";
+import { Button, Input } from "./ui";
 
 /**
  * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
@@ -13,12 +15,25 @@ import { Button } from "./ui";
 export interface ConfirmDialogLabels {
   confirm: string;
   cancel: string;
+  /**
+   * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to
+   * type by default — where the address sits in the sentence moves with the language —
+   * or a finished STRING. A call's own `typedLabel` wins over it.
+   *
+   * Required, like every key of a namespace: the shipped catalogues
+   * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should
+   * hear about the new string from the compiler rather than show it in English.
+   */
+  typed: string | ((text: string) => string);
 }
 
-export const DEFAULT_CONFIRM_DIALOG_LABELS: ConfirmDialogLabels = {
+/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a
+ *  caller composing its own label from it. */
+export const DEFAULT_CONFIRM_DIALOG_LABELS = {
   confirm: "Confirm",
   cancel: "Cancel",
-};
+  typed: (text: string) => `Type “${text}” to confirm`,
+} satisfies ConfirmDialogLabels;
 
 export type ConfirmTone = "danger" | "warning" | "neutral";
 
@@ -37,6 +52,30 @@ export interface ConfirmOptions {
    * the confirm. See {@link ConfirmProvider} for why the two differ.
    */
   tone?: ConfirmTone;
+  /**
+   * 0.18: make the user TYPE this before confirm is enabled — the target account's
+   * e-mail address, a budget's name. For the action whose risk is not "did you mean
+   * it" but "is this the right row": an admin who deactivates somebody has already
+   * proven who THEY are (they passed the admin gate); typing the address is what
+   * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and
+   * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no
+   * field.
+   *
+   * The dialog then shows one text field under the body and focuses it (whatever the
+   * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm
+   * stays disabled until the text matches; Enter in the field confirms once it does.
+   * The answer is still `true` / `false` — the text matched what you passed, so send
+   * that to the server if it asks for the address too, not the user's spelling.
+   */
+  requireTyped?: string;
+  /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */
+  typedLabel?: string;
+  /**
+   * How the typed text is compared. Default `"caseless"`: surrounding spaces and case
+   * ignored, the rule both apps applied to an address. `"trim"` keeps case, `"exact"`
+   * keeps spaces too — for a phrase like "DELETE" whose contract is "exactly this".
+   */
+  typedMatch?: TypedMatch;
 }
 
 export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
@@ -201,15 +240,26 @@ function ConfirmDialogView({
   // Set by the confirm button, read once the panel has finished lowering. Everything
   // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.
   const accepted = useRef(false);
+  const typedRef = useRef<HTMLInputElement>(null);
+  const [typed, setTyped] = useState("");
+  const target = request.requireTyped;
+  const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? "caseless");
 
   // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run
   // after its children's). `Modal` engages its focus trap on the panel first — and
   // records the page's focused element as the restore target — and only then does
   // focus move to the button. Focusing it from inside the panel would run first and
-  // make the button the restore target.
+  // make the button the restore target. A typed confirm starts in its field: typing is
+  // the one thing the dialog is waiting for.
   useEffect(() => {
-    (tone === "danger" ? cancelRef : confirmRef).current?.focus();
-  }, [tone]);
+    (target !== undefined ? typedRef : tone === "danger" ? cancelRef : confirmRef).current?.focus();
+  }, [tone, target]);
+
+  const typedLabel =
+    target === undefined
+      ? ""
+      : (request.typedLabel ??
+        (typeof labels.typed === "string" ? labels.typed : labels.typed(target)));
 
   return (
     <DialogFrame
@@ -228,6 +278,7 @@ function ConfirmDialogView({
             ref={confirmRef}
             type="button"
             variant={tone === "danger" ? "danger" : "primary"}
+            disabled={!matches}
             onClick={() => {
               accepted.current = true;
               close();
@@ -237,6 +288,30 @@ function ConfirmDialogView({
           </Button>
         </>
       )}
-    />
+    >
+      {/* The field, when there is one, is the body; a plain confirm keeps having none. */}
+      {target !== undefined && (
+        <form
+          noValidate
+          onSubmit={(e) => {
+            e.preventDefault();
+            // Through the button, so Enter and a click are one path — and a disabled
+            // (not yet matching) confirm ignores the click.
+            confirmRef.current?.click();
+          }}
+        >
+          <Input
+            ref={typedRef}
+            label={typedLabel}
+            value={typed}
+            autoComplete="off"
+            autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck={false}
+            onChange={(e) => setTyped(e.target.value)}
+          />
+        </form>
+      )}
+    </DialogFrame>
   );
 }

package/src/components/danger-confirm.tsx

@@ -1,10 +1,113 @@
-import { useEffect, useId, useRef, useState } from "react";
-import type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
 import { Button, Input, Label, Spinner } from "./ui";
 import { Tooltip } from "./tooltip";
 
+/**
+ * How typed text is compared with the text it has to repeat — shared by
+ * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.
+ *
+ * - `"trim"` ignores spaces around the typed text — a phone keyboard's autocomplete
+ *   likes to add one. Case counts: "delete" is not "DELETE".
+ * - `"exact"` compares character for character, spaces included.
+ * - `"caseless"` trims AND ignores case: for an e-mail address, whose domain is
+ *   case-insensitive and whose local part every real mail server treats so. Both apps'
+ *   "type the account's address" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's
+ *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard
+ *   put at the start must not make the right row look like the wrong one.
+ */
+export type TypedMatch = "trim" | "exact" | "caseless";
+
+/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for
+ *  a caller that draws its own field (a dialog that also picks a recipient) and wants
+ *  the same rule as the kit's. */
+export function typedMatches(typed: string, target: string, mode: TypedMatch = "trim"): boolean {
+  if (mode === "exact") return typed === target;
+  if (mode === "trim") return typed.trim() === target;
+  // `toLowerCase`, not `toLocaleLowerCase`: the comparison must not change with the
+  // reader's locale (a Turkish dotless i would otherwise fail an ASCII address).
+  return typed.trim().toLowerCase() === target.trim().toLowerCase();
+}
+
+/**
+ * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`
+ * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,
+ * and only clears the flag if it rejected — the caller shows why and the user retries.
+ * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose
+ * contract is the same: resolve = done, reject = stay put.
+ *
+ * @internal
+ */
+export function usePromisePending() {
+  const [pending, setPending] = useState(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = useCallback((result: unknown, onResolved: () => void): boolean => {
+    if (!result || typeof (result as Promise<unknown>).then !== "function") return false;
+    setPending(true);
+    (result as Promise<unknown>).then(
+      () => {
+        if (!mounted.current) return;
+        setPending(false);
+        onResolved();
+      },
+      () => {
+        if (mounted.current) setPending(false);
+      },
+    );
+    return true;
+  }, []);
+  return { pending, run };
+}
+
+/**
+ * The "prove it is you" field: a password input the browser's password manager fills
+ * with the CURRENT password (`autocomplete="current-password"`), never offers to
+ * generate a new one for. `readOnly` rather than `disabled` while busy: disabling the
+ * field that has focus (Enter was pressed in it) drops focus to <body>.
+ *
+ * @internal DangerConfirm's field. ReauthDialog spells it out with the field's own
+ * `error`, which keeps the `<input>` mounted while its message comes and goes.
+ */
+export function CurrentPasswordInput({
+  inputRef,
+  label,
+  value,
+  onValueChange,
+  busy,
+  invalid,
+  describedBy,
+}: {
+  inputRef?: Ref<HTMLInputElement>;
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  busy: boolean;
+  invalid?: boolean;
+  describedBy?: string;
+}) {
+  return (
+    <Input
+      ref={inputRef}
+      type="password"
+      autoComplete="current-password"
+      label={label}
+      value={value}
+      readOnly={busy}
+      invalid={invalid}
+      aria-describedby={describedBy}
+      onChange={(e) => onValueChange(e.target.value)}
+    />
+  );
+}
+
 /**
  * Every string the tile renders — the `dangerConfirm` namespace of
  * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and
@@ -65,9 +168,11 @@ export interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">
    * How the typed text is compared with `phrase`. `"trim"` (default) ignores spaces
    * around it — a phone keyboard's autocomplete likes to add one. `"exact"` compares
    * character for character, spaces included, for an app whose contract is "type
-   * exactly this".
+   * exactly this". `"caseless"` (0.18) also ignores case — for a phrase that is an
+   * e-mail address (keksdose's "type the user's address" admin rule). See
+   * {@link TypedMatch}.
    */
-  phraseMatch?: "trim" | "exact";
+  phraseMatch?: TypedMatch;
   /** The warning above the fields. Defaults to `labels.prompt`. */
   prompt?: ReactNode;
   /** `"danger"` (default) for what cannot be undone; `"warning"` for what can, at a
@@ -140,7 +245,7 @@ export function DangerConfirm({
   const armed = armedProp ?? armedState;
   const [password, setPassword] = useState("");
   const [typed, setTyped] = useState("");
-  const [pending, setPending] = useState(false);
+  const { pending, run } = usePromisePending();
   const busy = Boolean(busyProp) || pending;
   // `readOnly` rather than `disabled` on the fields while busy: disabling the field
   // that has focus (Enter was pressed in it) drops focus to <body>.
@@ -155,13 +260,6 @@ export function DangerConfirm({
   // Focus moves only after a transition — never on mount, so a tile that renders armed
   // (controlled) does not take the page's focus merely by existing.
   const moveFocus = useRef(false);
-  const mounted = useRef(true);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
 
   // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.
   // During render, like NumberField's draft, so no frame shows a collapsed tile that
@@ -200,26 +298,15 @@ export function DangerConfirm({
 
   const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== "";
   const passwordOk = !requirePassword || password !== "";
-  const phraseOk = phrase === undefined || (phraseMatch === "exact" ? typed : typed.trim()) === phrase;
+  const phraseOk = phrase === undefined || typedMatches(typed, phrase, phraseMatch);
   const canConfirm = passwordOk && phraseOk && !busy;
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
     if (!canConfirm) return;
-    const result = onConfirm(requirePassword ? password : undefined);
-    if (!result || typeof (result as Promise<unknown>).then !== "function") return;
-    setPending(true);
-    (result as Promise<unknown>).then(
-      () => {
-        if (!mounted.current) return;
-        setPending(false);
-        setArmed(false);
-      },
-      () => {
-        // Stays armed, fields kept: the caller shows why, the user retries.
-        if (mounted.current) setPending(false);
-      },
-    );
+    // Disarms when it resolves; a rejection leaves it armed, fields kept: the caller
+    // shows why, the user retries.
+    run(onConfirm(requirePassword ? password : undefined), () => setArmed(false));
   };
 
   const phrasePlaceholder =
@@ -309,15 +396,13 @@ export function DangerConfirm({
             <Input label={phraseLabel} {...phraseFieldProps} />
           ))}
         {requirePassword && (
-          <Input
+          <CurrentPasswordInput
             // The phrase field takes the ref when both are there — it comes first.
-            ref={phrase === undefined ? firstFieldRef : undefined}
-            type="password"
-            autoComplete="current-password"
+            inputRef={phrase === undefined ? firstFieldRef : undefined}
             label={labels.password}
             value={password}
-            readOnly={busy}
-            onChange={(e) => setPassword(e.target.value)}
+            busy={busy}
+            onValueChange={setPassword}
           />
         )}
         <div className="flex flex-wrap gap-2">

package/src/components/data-table.tsx

@@ -355,6 +355,24 @@ export interface DataTableProps<T> {
    * of unfolding it inline (feedback #204). Desktop always uses inline expansion.
    */
   mobileExpandAsDialog?: boolean;
+  /**
+   * The phone row dialog's `backCloses` ({@link FullBleedDialog}): whether it pushes
+   * its own history entry so Back dismisses it. On by default — right for a row whose
+   * expansion is component state, where nothing else would answer Back.
+   *
+   * **Set it `false` when the open row is in the URL** and opening it PUSHES (a
+   * `?row=` written with `useSearchParamState(…, { history: "replace-on-clear" })` or
+   * `"push"`): Back already closes the row through the router, and a second entry on
+   * top of the page's is two owners of one Back press (keksdose dev #584). Keep it on
+   * when opening the row REPLACES the URL — then nothing was pushed, and the dialog's
+   * own entry is the only thing Back can pop.
+   *
+   * The table cannot decide this for you: `isExpanded` is a predicate, and neither it
+   * nor `rowHref` says whether opening pushed or replaced (keksdose's feedback page
+   * has `rowHref` with a REPLACING `?row=`, and needs the entry). Ignored unless
+   * `mobileExpandAsDialog`.
+   */
+  mobileDialogBackCloses?: boolean;
   /**
    * Group the mobile card list into sections, each with a sticky header — the
    * "assistance"-style list (like the transactions list grouped by date, but by
@@ -835,6 +853,7 @@ export function DataTable<T>({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
   mobileCard,
@@ -1856,6 +1875,7 @@ export function DataTable<T>({
           onClose={closeDialog}
           closeLabel={labels.close}
           header={mobileDialogRow ? mobilePrimaryCol?.cell(mobileDialogRow) : null}
+          backCloses={mobileDialogBackCloses}
         >
           {mobileDialogContent}
         </FullBleedDialog>

package/src/components/floating-panel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import type {
   AnchorHTMLAttributes,
@@ -15,7 +15,9 @@ import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
 import { dirOf, type Direction } from "../lib/direction";
+import { registerFloating } from "../lib/floating-stack";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
+import { assignRef } from "./choice-parts";
 import { pickLinkRenderer } from "./text-link";
 import { Tooltip, type TooltipSide } from "./tooltip";
 
@@ -172,6 +174,9 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
  *
  * Portalled, because `position: fixed` inside any transformed ancestor (an animated
  * page transition) is fixed to that ancestor, not to the screen.
+ *
+ * While mounted it reports its box (`lib/floating-stack.ts`), so `ServerWakeNotice`
+ * stacks above it rather than over it.
  */
 export function FloatingActionButton({
   label,
@@ -189,18 +194,30 @@ export function FloatingActionButton({
   style,
   type = "button",
   title,
+  ref,
   ...rest
 }: FloatingActionButtonProps) {
   const [marker, dir] = usePortalDir();
   const toggle = pressed !== undefined;
   const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? undefined : tooltip;
   const wrapped = tip !== undefined && tip !== null;
+  // The fixed element — the button, or the wrapper when there is a tooltip.
+  const [fixed, setFixed] = useState<HTMLElement | null>(null);
+  useEffect(() => (fixed ? registerFloating(fixed) : undefined), [fixed]);
+  const buttonRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      assignRef(ref, node);
+      if (!wrapped) setFixed(node);
+    },
+    [ref, wrapped],
+  );
   // An empty title is "no tooltip", not an attribute with nothing in it. The kit
   // tooltip replaces it outright.
   const nativeTip = !wrapped && nativeTitle && title !== "" ? (title ?? label) : undefined;
   const button = (
           <button
             {...rest}
+            ref={buttonRef}
             type={type}
             dir={dir}
             aria-label={label}
@@ -248,6 +265,7 @@ export function FloatingActionButton({
           <>
             {wrapped ? (
               <div
+                ref={setFixed}
                 dir={dir}
                 hidden={rest.hidden}
                 style={cornerStyle(corner, offset)}

package/src/components/form-actions.tsx

@@ -37,7 +37,8 @@ export type FormActionsPlacement = "inline" | "sticky" | "dialog";
  * md 768, lg 1024, xl 1280px), as `BulkActionBar`'s `variant` breakpoints are, and
  * resolved the same way, in JS: the sticky row is positioned by inline style, which a
  * `md:` class cannot reach. keksdose switched `placement` on its own media query at
- * every long form for want of this.
+ * every long form for want of this. The breakpoints are the VIEWPORT's, not the
+ * container's: a form in a narrow pane on a wide screen resolves to `md`.
  */
 export interface ResponsiveFormActionsPlacement {
   base: FormActionsPlacement;
@@ -96,7 +97,7 @@ export type FormActionsStickyWithin = "viewport" | "container";
  */
 export type FormActionsSubmitProps = Omit<
   ButtonProps,
-  "type" | "onClick" | "disabled" | "disabledReason" | "variant" | "form" | "children" | "aria-busy"
+  "type" | "onClick" | "disabled" | "disabledReason" | "variant" | "form" | "children" | "aria-busy" | "commit"
 > & { [key: `data-${string}`]: string | number | boolean | undefined };
 
 /** The start-side action of {@link FormActionsProps.destructive}, as data. */
@@ -157,6 +158,18 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
   submitDisabled?: boolean;
   /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */
   submitDisabledReason?: ReactNode;
+  /**
+   * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the
+   * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —
+   * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a
+   * commit too and is locked with it; Cancel and `children` are not (closing a form
+   * writes nothing). No provider, or an unlocked one: no effect. Default `false`.
+   *
+   * keksdose wrote `submitDisabled={lock.locked || …}` and
+   * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is
+   * that pair, read from the provider.
+   */
+  commit?: boolean;
   /** The save button's variant. Default `brand`; `danger` for a save that destroys
    *  (kastlan's `destructive` flag on its own FormActions). */
   submitVariant?: ButtonVariant;
@@ -187,7 +200,8 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
    * from both sides, with the content scrolling past it in the gutters (keksdose wrote
    * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`"0.75rem"`,
    * `12`, `"var(--pane-px)"`). Applied only while the resolved placement is sticky, so
-   * `placement={{ base: "sticky", md: "inline" }}` bleeds on the phone alone.
+   * `placement={{ base: "sticky", md: "inline" }}` bleeds on the phone alone. The margin
+   * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.
    */
   bleed?: string | number;
   /**
@@ -249,6 +263,7 @@ export function FormActions({
   pending = false,
   submitDisabled = false,
   submitDisabledReason,
+  commit = false,
   submitVariant = "brand",
   destructive,
   start: startSlot,
@@ -276,6 +291,7 @@ export function FormActions({
       onClick={destructive.onClick}
       disabled={destructive.disabled}
       disabledReason={destructive.disabledReason}
+      commit={commit}
     >
       {destructive.label}
     </Button>
@@ -332,6 +348,9 @@ export function FormActions({
           variant={submitVariant}
           disabled={pending || submitDisabled}
           disabledReason={pending ? undefined : submitDisabledReason}
+          // Not while pending: the save already left, and the lock's look over the
+          // spinner would say it had not.
+          commit={commit && !pending}
           aria-busy={pending || undefined}
         >
           {pending ? (

package/src/components/legal.tsx

@@ -0,0 +1,159 @@
+import type { ReactNode } from "react";
+
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { AlertBanner } from "./alert-banner";
+import { TextLink } from "./text-link";
+
+/**
+ * The legal pages' shell — Imprint, Privacy Policy, Terms — for every app (Marcel,
+ * 2026-10-02: every app has them; docs/i18n-harmonization.md H10).
+ *
+ * keksdose and kastlan each carried the same shell, written twice: a back link, the
+ * title, a "closed beta, not yet reviewed by a lawyer" notice, sections of heading +
+ * running text, and kastlan's row of links to the three pages with the current one
+ * marked. Kurvenschmiede had none. The words stay in each app — they are the app's
+ * legal statements, reviewed under the `legal` area of the translation review — and
+ * only the shape moves here.
+ *
+ * A CONTENT COLUMN, not a page: keksdose shows its legal pages inside its public
+ * landing header and footer, kastlan inside `AuthLayout` (`width="wide" card={false}`,
+ * no title of its own). Both put this inside their chrome; a page-owning layout would
+ * have fought one of them.
+ */
+
+// ── Labels ────────────────────────────────────────────────────────────────────
+
+export interface LegalLabels {
+  /** The accessible name of {@link LegalLinks}' `<nav>`. */
+  navLabel: string;
+}
+
+export const DEFAULT_LEGAL_LABELS: LegalLabels = {
+  navLabel: "Legal",
+};
+
+// ── Links ─────────────────────────────────────────────────────────────────────
+
+export interface LegalLink {
+  href: string;
+  /** "Imprint", "Privacy Policy", "Terms" — the app's words. */
+  label: ReactNode;
+}
+
+export interface LegalLinksProps {
+  links: readonly LegalLink[];
+  /** The page being shown; its link is marked `aria-current="page"`. Usually the
+   *  router's pathname. */
+  currentHref?: string;
+  /** `false` renders the links without the `<nav>` — inside `AuthLayout`'s `footer`,
+   *  which wraps its footer in a `<nav>` named by `footerLabel` already. Default true. */
+  nav?: boolean;
+  labels?: Partial<LegalLabels>;
+  className?: string;
+}
+
+/** The legal pages as a row of quiet links, the one you are on marked (kastlan's
+ *  `LegalLinks`). Wraps on a phone. */
+export function LegalLinks({ links, currentHref, nav = true, labels: labelsProp, className }: LegalLinksProps) {
+  const labels = useKitLabels("legal", DEFAULT_LEGAL_LABELS, labelsProp);
+  const items = links.map((link) => (
+    <TextLink key={link.href} href={link.href} tone="muted" current={link.href === currentHref}>
+      {link.label}
+    </TextLink>
+  ));
+  if (!nav) return <>{items}</>;
+  return (
+    <nav
+      aria-label={labels.navLabel}
+      className={cn("flex flex-wrap gap-x-4 gap-y-1 text-xs", className)}
+    >
+      {items}
+    </nav>
+  );
+}
+
+// ── Section ───────────────────────────────────────────────────────────────────
+
+export interface LegalSectionProps {
+  heading: ReactNode;
+  /** Running text. Line breaks in it are kept (`white-space: pre-line`), so a
+   *  translation can hold an address or a list as plain lines. */
+  body?: string;
+  /** Anything richer than plain text — links, a list — after `body`. */
+  children?: ReactNode;
+  /** The section's `id`, for a link to it from elsewhere ("see §4"). */
+  id?: string;
+  /** The heading's element. Default `h2`, under the layout's `h1`. */
+  headingAs?: "h2" | "h3";
+}
+
+export function LegalSection({ heading, body, children, id, headingAs: Heading = "h2" }: LegalSectionProps) {
+  return (
+    <section id={id} className="scroll-mt-20">
+      <Heading className="text-lg font-semibold text-[var(--text-primary)]">{heading}</Heading>
+      {body !== undefined && (
+        <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-[var(--text-secondary)]">{body}</p>
+      )}
+      {children !== undefined && (
+        <div className="mt-2 text-sm leading-relaxed text-[var(--text-secondary)]">{children}</div>
+      )}
+    </section>
+  );
+}
+
+// ── Layout ────────────────────────────────────────────────────────────────────
+
+export interface LegalLayoutProps {
+  /** "Imprint", "Privacy Policy", "Terms". */
+  title: ReactNode;
+  /** Above the title — the app's "← Back" link (`<TextLink icon={ArrowLeft}>`), whose
+   *  target differs per app (keksdose's start page, kastlan's sign-in). */
+  back?: ReactNode;
+  /**
+   * A notice under the title, as a warning banner with `role="note"` — page furniture,
+   * not an alert. Both apps say their legal texts await a lawyer's review; keksdose's
+   * privacy page says something more precise than the others (its technical sections
+   * describe running code), so the notice is per page, not per layout.
+   */
+  notice?: ReactNode;
+  /** The sections — {@link LegalSection}s. */
+  children: ReactNode;
+  /** The three pages, linked at the end of the column with the current one marked.
+   *  Leave out when the page's chrome already shows them (kastlan's AuthLayout footer). */
+  links?: readonly LegalLink[];
+  currentHref?: string;
+  /** Default `h1`: the page's heading. */
+  headingAs?: "h1" | "h2";
+  /** Extra classes on the column — `px-0 py-0` inside a chrome that pads already. */
+  className?: string;
+  labels?: Partial<LegalLabels>;
+}
+
+export function LegalLayout({
+  title,
+  back,
+  notice,
+  children,
+  links,
+  currentHref,
+  headingAs: Heading = "h1",
+  className,
+  labels,
+}: LegalLayoutProps) {
+  return (
+    <article className={cn("mx-auto w-full max-w-3xl px-4 py-12", className)}>
+      {back !== undefined && <div className="mb-4 text-sm">{back}</div>}
+      <Heading className="text-3xl font-bold tracking-tight text-[var(--text-primary)]">{title}</Heading>
+      {notice !== undefined && notice !== null && (
+        <AlertBanner tone="warning" role="note" className="mt-4">
+          {notice}
+        </AlertBanner>
+      )}
+      <div className="mt-8 space-y-8">{children}</div>
+      {links !== undefined && links.length > 0 && (
+        <LegalLinks links={links} currentHref={currentHref} labels={labels} className="mt-12 border-t border-[var(--border)] pt-4" />
+      )}
+    </article>
+  );
+}