@eifi1/ui-kit 0.18.0 → 0.19.0

package/dist/wizard/stepper-nav.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../kit-labels-CPbsjlXr.js';
+import { f as ButtonVariant } from '../kit-labels-D1J2_jyD.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/data-table-labels.js';
 import '../components/mini-calendar.js';
@@ -52,6 +52,7 @@ import '../hooks/use-authed-src.js';
 import '../components/image-grid.js';
 import '../components/lightbox.js';
 import '../components/write-lock.js';
+import '../components/legal.js';
 import '../components/account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -60,6 +61,8 @@ import '../components/swipeable-row.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the

package/dist/wizard.d.ts

@@ -6,7 +6,7 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-CPbsjlXr.js';
+import './kit-labels-D1J2_jyD.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
@@ -57,6 +57,7 @@ import './hooks/use-authed-src.js';
 import './components/image-grid.js';
 import './components/lightbox.js';
 import './components/write-lock.js';
+import './components/legal.js';
 import './components/account-chips.js';
 import './lib/format.js';
 import './data-table-3mi2R3so.js';
@@ -65,3 +66,5 @@ import './components/swipeable-row.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
+import './components/translation-review-labels.js';
+import './lib/translation-review.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

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

package/src/components/server-wake.tsx

@@ -1,8 +1,9 @@
-import { useSyncExternalStore } from "react";
-import type { CSSProperties } from "react";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import type { CSSProperties, RefObject } from "react";
 
 import { useKitLabels } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
+import { clearanceAbove, subscribeFloating } from "../lib/floating-stack";
 import { serverWake } from "../lib/server-wake";
 import type { ServerWakeStage, ServerWakeWatcher } from "../lib/server-wake";
 import { AlertBanner } from "./alert-banner";
@@ -17,7 +18,8 @@ import { Spinner } from "./ui";
  * Corner-anchored and non-blocking on purpose. The pages underneath already show their
  * own skeletons; what was missing is the explanation, not another overlay. Start
  * corner, above the phone's bottom nav, so it collides with neither the centred toasts
- * nor the nav bar.
+ * nor the nav bar — and above any FloatingActionButton it would otherwise cover
+ * (kastlan's offline pill shares the corner; on a phone the notice spans both).
  *
  * Mount it next to the router, not inside the app layout, so it also covers the login
  * screen and the landing page — a cold start is at its most confusing exactly there,
@@ -67,12 +69,38 @@ export interface ServerWakeNoticeProps {
    */
   navOffset?: string | number;
   /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom
-   *  offset is an inline style, so move it vertically with {@link navOffset}. */
+   *  offset is an inline style, so move it vertically with {@link navOffset}. Either
+   *  way it rises above a visible FloatingActionButton under it. */
   className?: string;
 }
 
 const px = (v: string | number) => (typeof v === "number" ? `${v}px` : v);
 
+/** Gap between the notice and a floating control it stacks above. */
+const STACK_GAP = "0.5rem";
+
+/**
+ * How far off the bottom the notice must sit to clear the FloatingActionButtons under
+ * it (`lib/floating-stack.ts`), re-measured when one appears, goes, resizes or the
+ * viewport does — or `null` while it is idle or nothing is under it. kastlan 0.18.
+ */
+function useFloatingClearance(anchor: RefObject<HTMLDivElement | null>, stage: ServerWakeStage): number | null {
+  const [clearance, setClearance] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    if (stage === "idle") return;
+    const measure = () => setClearance(clearanceAbove(anchor.current));
+    measure();
+    const unsubscribe = subscribeFloating(measure);
+    window.addEventListener("resize", measure);
+    return () => {
+      unsubscribe();
+      window.removeEventListener("resize", measure);
+    };
+  }, [anchor, stage]);
+  // Idle, the last measurement is stale and nothing shows anyway.
+  return stage === "idle" ? null : clearance;
+}
+
 /**
  * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a
  * `role="status"` element inserted together with its text is announced unreliably
@@ -84,12 +112,16 @@ export function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffs
   const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
   const stage = useServerWakeStage(watcher);
   const waking = stage === "waking";
+  const anchor = useRef<HTMLDivElement>(null);
+  const clearance = useFloatingClearance(anchor, stage);
+  const base = `calc(max(${navOffset === undefined ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;
   const style: CSSProperties = {
-    bottom: `calc(max(${navOffset === undefined ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`,
+    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`,
   };
 
   return (
     <div
+      ref={anchor}
       role="status"
       aria-live="polite"
       data-stage={stage}

package/src/components/translation-review-editor.tsx

@@ -0,0 +1,261 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { useKitFormat } from "../lib/format";
+import { placeholderTokens, reviewWrite } from "../lib/translation-review";
+import type {
+  TranslationReviewKey,
+  TranslationReviewWrite,
+  TranslationRow,
+  TranslationVerdict,
+} from "../lib/translation-review";
+import { AlertBanner } from "./alert-banner";
+import { Caption, SectionLabel } from "./text";
+import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels";
+import type { TranslationReviewLabels } from "./translation-review-labels";
+import { Button, Textarea } from "./ui";
+
+/** A callback may return a promise: resolve and the editor closes, reject and it stays
+ *  open with the error. */
+type MaybePromise = void | Promise<unknown>;
+
+export interface TranslationReviewEditorProps {
+  row: TranslationRow;
+  /** The reference language's own name ("English", "Deutsch") — the app's choice of
+   *  reference, so the app's word for it. */
+  referenceLabel: ReactNode;
+  /** The reviewed language's own name ("Français"). */
+  localeLabel: ReactNode;
+  /** Store a verdict. Left out (or `readOnly`): the editor shows the row and its last
+   *  verdict, with no fields and no actions. */
+  onSave?: (write: TranslationReviewWrite) => MaybePromise;
+  /** Clear the verdict — back to unreviewed. Left out: no reset button. */
+  onClear?: (key: TranslationReviewKey) => MaybePromise;
+  /** The Cancel button — and called after a save or a reset resolves, so the panel
+   *  that opened the editor closes it. */
+  onClose?: () => void;
+  /** Look, do not touch: a locale the viewer may read but not review. */
+  readOnly?: boolean;
+  /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the
+   *  provider's locale. */
+  formatDate?: (iso: string) => string;
+  /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
+  formatError?: (error: unknown) => ReactNode;
+  className?: string;
+  labels?: Partial<TranslationReviewLabels>;
+}
+
+/** The wording a verdict was given on, under the line that says it changed. */
+function Then({ label, text }: { label: string; text: string }) {
+  return (
+    <div className="mt-1.5 min-w-0">
+      <span className="text-xs font-medium">{label}</span>
+      <p className="whitespace-pre-line break-words text-[var(--text-secondary)]">{text}</p>
+    </div>
+  );
+}
+
+/**
+ * One string, opened: the reference beside the translation, what changed since the last
+ * verdict, what a machine can see is wrong (the placeholders), and the two things a
+ * reviewer can say about it — keksdose's and kastlan's `translation-review-editor.tsx`.
+ *
+ * "Better wording" opens on the CURRENT text rather than empty, because the usual
+ * correction is a word or an ending, and retyping a sentence to change one word is how
+ * new mistakes get in. It is sent only with "Needs a change" — approving says the text is
+ * fine as it stands. A "Needs a change" with neither a note nor a different wording tells
+ * whoever fixes it nothing, so it takes one of the two.
+ *
+ * A MISSING string (kastlan: the locale lacks the key) cannot be approved — there is
+ * nothing to approve. Its field starts empty and is the translation to add; the verdict
+ * is NEEDS_CHANGE on the empty text, which the export hands a developer as the string to
+ * add.
+ *
+ * Every action waits for its callback: the buttons hold while the promise is out, a
+ * resolution closes the editor through `onClose`, and a rejection keeps it open with what
+ * was typed and the error under the buttons.
+ */
+export function TranslationReviewEditor({
+  row,
+  referenceLabel,
+  localeLabel,
+  onSave,
+  onClear,
+  onClose,
+  readOnly = false,
+  formatDate: formatDateProp,
+  formatError,
+  className,
+  labels: labelsProp,
+}: TranslationReviewEditorProps) {
+  const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
+  const { formatDate } = useKitFormat();
+  const review = row.review;
+  const missing = row.text === "";
+  const editable = !readOnly && onSave !== undefined;
+  const [suggestion, setSuggestion] = useState(review?.suggestion ?? row.text);
+  const [note, setNote] = useState(review?.note ?? "");
+  const [busy, setBusy] = useState<"approve" | "flag" | "clear" | null>(null);
+  const [failure, setFailure] = useState<ReactNode>(null);
+
+  const canFlag = note.trim() !== "" || suggestion.trim() !== row.text.trim();
+  const changed = row.status === "changed" ? review : null;
+  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, "medium"));
+
+  const run = async (kind: "approve" | "flag" | "clear", action: () => MaybePromise) => {
+    setBusy(kind);
+    setFailure(null);
+    try {
+      await action();
+      onClose?.();
+    } catch (caught) {
+      setFailure(formatError ? formatError(caught) : labels.failed);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const save = (verdict: TranslationVerdict) => {
+    if (!onSave) return;
+    const trimmedNote = note.trim() || null;
+    // Approving says the text is right as it stands: there is no wording to suggest.
+    const sent = verdict === "APPROVED" ? null : suggestion.trim() || null;
+    void run(verdict === "APPROVED" ? "approve" : "flag", () =>
+      onSave(reviewWrite(row, verdict, trimmedNote, sent)),
+    );
+  };
+
+  return (
+    <div className={cn("min-w-0 space-y-3 text-sm", className)}>
+      <code className="block break-all text-xs text-[var(--text-muted)]">{row.key}</code>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <div className="min-w-0">
+          <SectionLabel as="span" size="xs">
+            {referenceLabel}
+          </SectionLabel>
+          <p className="mt-1 whitespace-pre-line break-words text-[var(--text-secondary)]">{row.reference}</p>
+        </div>
+        <div className="min-w-0">
+          <SectionLabel as="span" size="xs">
+            {localeLabel}
+          </SectionLabel>
+          {missing ? (
+            <p className="mt-1 italic text-[var(--text-muted)]">{labels.missingText}</p>
+          ) : (
+            <p lang={row.locale} className="mt-1 whitespace-pre-line break-words">
+              {row.text}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {changed && (
+        <AlertBanner tone="warning" variant="inline" size="sm" block live={false}>
+          <div className="min-w-0">
+            <p>{labels.changedSince}</p>
+            {changed.text !== row.text && <Then label={labels.reviewedWording} text={changed.text || "—"} />}
+            {changed.referenceText != null && changed.referenceText !== row.reference && (
+              <Then label={labels.reviewedReference} text={changed.referenceText} />
+            )}
+          </div>
+        </AlertBanner>
+      )}
+
+      {row.placeholderMismatch && (
+        <AlertBanner tone="danger" variant="inline" size="sm" block live={false}>
+          <span className="min-w-0 break-words">
+            {labels.placeholderMismatch(
+              placeholderTokens(row.reference).join(" ") || "—",
+              placeholderTokens(row.text).join(" ") || "—",
+            )}
+          </span>
+        </AlertBanner>
+      )}
+
+      {review && (
+        <Caption>
+          {(review.verdict === "APPROVED" ? labels.lastApproved : labels.lastFlagged)(
+            review.reviewerName ?? labels.erasedReviewer,
+            date(review.reviewedAt),
+          )}
+        </Caption>
+      )}
+
+      {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}
+      {!editable && review?.verdict === "NEEDS_CHANGE" && (review.suggestion || review.note) && (
+        <div className="space-y-2">
+          {review.suggestion && <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />}
+          {review.note && <Then label={labels.note} text={review.note} />}
+        </div>
+      )}
+
+      {editable && (
+        <>
+          <Textarea
+            label={missing ? labels.translation : labels.suggestion}
+            lang={row.locale}
+            rows={Math.min(8, Math.max(2, Math.ceil(Math.max(row.text.length, row.reference.length) / 80)))}
+            value={suggestion}
+            disabled={busy !== null}
+            onChange={(e) => setSuggestion(e.target.value)}
+          />
+          <Textarea
+            label={labels.note}
+            rows={2}
+            value={note}
+            placeholder={labels.notePlaceholder}
+            disabled={busy !== null}
+            onChange={(e) => setNote(e.target.value)}
+          />
+          <div className="flex flex-wrap gap-2">
+            {!missing && (
+              <Button
+                variant="primary"
+                commit
+                pending={busy === "approve"}
+                disabled={busy !== null}
+                onClick={() => save("APPROVED")}
+              >
+                {labels.approve}
+              </Button>
+            )}
+            <Button
+              variant={missing ? "primary" : "danger"}
+              commit
+              pending={busy === "flag"}
+              disabled={busy !== null || !canFlag}
+              onClick={() => save("NEEDS_CHANGE")}
+            >
+              {missing ? labels.suggest : labels.flag}
+            </Button>
+            {review && onClear && (
+              <Button
+                variant="ghost"
+                commit
+                pending={busy === "clear"}
+                disabled={busy !== null}
+                onClick={() => void run("clear", () => onClear({ locale: row.locale, key: row.key }))}
+              >
+                {labels.reset}
+              </Button>
+            )}
+            {onClose && (
+              <Button variant="ghost" disabled={busy !== null} onClick={onClose}>
+                {labels.cancel}
+              </Button>
+            )}
+          </div>
+        </>
+      )}
+
+      {failure && (
+        <AlertBanner tone="danger" size="sm" role="alert">
+          {failure}
+        </AlertBanner>
+      )}
+    </div>
+  );
+}