@eifi1/ui-kit 0.24.1 → 0.25.1

package/src/i18n/german.ts

@@ -732,6 +732,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       roleOf: (column) => `Was enthält die Spalte „${column}“?`,
       ignore: "Ignorieren",
       requiredRole: (role) => `${role} (erforderlich)`,
+      requiredRoleShort: (role) => `${role} *`,
       previewOf: (shown, total) =>
         shown === 1
           ? `Die erste von ${n(total)} Zeilen`
@@ -788,6 +789,15 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       scope: (areas) => `Ihre Prüfung ist beschränkt auf: ${areas}.`,
       exportCorrections: (count) => `Korrekturen exportieren (${n(count)})`,
       failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
+      approvedToast: (count) => (count === 1 ? "Text bestätigt" : `${n(count)} Texte bestätigt`),
+      groupCount: (unreviewed, total) => `${n(unreviewed)} ungeprüft / ${n(total)}`,
+      approveGroup: (count) => `Ungeprüfte bestätigen (${n(count)})`,
+      // The group's name quoted, as `columnMapper.roleOf`'s column: it is often a key
+      // ("billing"), which unquoted would read as part of the sentence.
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `Den ungeprüften Text in „${group}“ bestätigen?`
+          : `Alle ${n(count)} ungeprüften Texte in „${group}“ bestätigen – auch die nicht angezeigten?`,
     },
   };
 }

package/src/i18n/locales/en.ts

@@ -126,6 +126,13 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       progress: (approved, total) => `${n(approved)} of ${n(total)} approved`,
       localeProgress: (approved, total) => `${n(approved)}/${n(total)}`,
       exportCorrections: (count) => `Export corrections (${n(count)})`,
+      approvedToast: (count) => (count === 1 ? "String approved" : `${n(count)} strings approved`),
+      groupCount: (unreviewed, total) => `${n(unreviewed)} unreviewed / ${n(total)}`,
+      approveGroup: (count) => `Approve unreviewed (${n(count)})`,
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `Approve the unreviewed string in ${group}?`
+          : `Approve all ${n(count)} unreviewed strings in ${group}, including those not on screen?`,
     },
     characterCount: {
       ...d.characterCount,

package/src/i18n/locales/es.ts

@@ -712,6 +712,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       roleOf: (column) => `¿Qué contiene la columna «${column}»?`,
       ignore: "Ignorar",
       requiredRole: (role) => `${role} (obligatorio)`,
+      requiredRoleShort: (role) => `${role} *`,
       previewOf: (shown, total) =>
         shown === 1
           ? `La primera de ${n(total)} filas`
@@ -768,6 +769,14 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       scope: (areas) => `Su revisión se limita a: ${areas}.`,
       exportCorrections: (count) => `Exportar correcciones (${n(count)})`,
       failed: "No ha funcionado. Inténtelo de nuevo.",
+      approvedToast: (count) => (count === 1 ? "Texto aprobado" : `${n(count)} textos aprobados`),
+      // "sin revisar" does not agree with the count, so one form serves both.
+      groupCount: (unreviewed, total) => `${n(unreviewed)} sin revisar / ${n(total)}`,
+      approveGroup: (count) => `Aprobar los sin revisar (${n(count)})`,
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `¿Aprobar el texto sin revisar de «${group}»?`
+          : `¿Aprobar los ${n(count)} textos sin revisar de «${group}», incluidos los que no están en pantalla?`,
     },
   };
 }

package/src/i18n/locales/fr.ts

@@ -730,6 +730,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       roleOf: (column) => `Que contient la colonne «\u202f${column}\u202f»\u202f?`,
       ignore: "Ignorer",
       requiredRole: (role) => `${role} (obligatoire)`,
+      requiredRoleShort: (role) => `${role} *`,
       previewOf: (shown, total) =>
         shown < 2
           ? `La première ligne sur ${n(total)}`
@@ -785,6 +786,14 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       scope: (areas) => `Votre relecture se limite à\u00a0: ${areas}.`,
       exportCorrections: (count) => `Exporter les corrections (${n(count)})`,
       failed: "Cela n’a pas fonctionné. Veuillez réessayer.",
+      approvedToast: (count) => (count < 2 ? "Texte approuvé" : `${n(count)} textes approuvés`),
+      groupCount: (unreviewed, total) =>
+        `${n(unreviewed)} non ${plural(unreviewed, "relu", "relus")} / ${n(total)}`,
+      approveGroup: (count) => `Approuver les non relus (${n(count)})`,
+      confirmGroup: (count, group) =>
+        count < 2
+          ? `Approuver le texte non relu de «\u202f${group}\u202f»\u202f?`
+          : `Approuver les ${n(count)} textes non relus de «\u202f${group}\u202f», y compris ceux qui ne sont pas à l’écran\u202f?`,
     },
   };
 }

package/src/i18n/locales/hu.ts

@@ -717,6 +717,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       roleOf: (column) => `Mit tartalmaz ez az oszlop: „${column}”?`,
       ignore: "Kihagyás",
       requiredRole: (role) => `${role} (kötelező)`,
+      requiredRoleShort: (role) => `${role} *`,
       // "(összesen N)", as `dataTable.pageChanged`: both numerals stay bare (convention 3).
       previewOf: (shown, total) => `Az első ${n(shown)} sor (összesen ${n(total)})`,
       // `roles` arrives joined with "vagy" ("Tartozik vagy Követel").
@@ -771,6 +772,16 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       scope: (areas) => `Az Ön ellenőrzése a következőkre korlátozódik: ${areas}.`,
       exportCorrections: (count) => `Javítások exportálása (${n(count)})`,
       failed: "Ez nem sikerült. Kérjük, próbálja újra.",
+      // No plural after a numeral (convention 2).
+      approvedToast: (count) => (count === 1 ? "Szöveg jóváhagyva" : `${n(count)} szöveg jóváhagyva`),
+      groupCount: (unreviewed, total) => `${n(unreviewed)} ellenőrizetlen / ${n(total)}`,
+      approveGroup: (count) => `Ellenőrizetlenek jóváhagyása (${n(count)})`,
+      // Opens with the quoted name, as `filePicker`'s refusals: no case ending ("-ban/-ben")
+      // has to agree with it. "a(z)" before the count, as `filePicker.rejectedPick`.
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `„${group}”: jóváhagyja az ellenőrizetlen szöveget?`
+          : `„${group}”: jóváhagyja mind a(z) ${n(count)} ellenőrizetlen szöveget, a képernyőn nem láthatókat is?`,
     },
   };
 }

package/src/i18n/locales/it.ts

@@ -716,6 +716,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       roleOf: (column) => `Che cosa contiene la colonna «${column}»?`,
       ignore: "Ignora",
       requiredRole: (role) => `${role} (obbligatorio)`,
+      requiredRoleShort: (role) => `${role} *`,
       previewOf: (shown, total) =>
         shown === 1
           ? `La prima di ${n(total)} righe`
@@ -772,6 +773,14 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       scope: (areas) => `La Sua revisione è limitata a: ${areas}.`,
       exportCorrections: (count) => `Esporta le correzioni (${n(count)})`,
       failed: "Non ha funzionato. Riprovi.",
+      approvedToast: (count) => (count === 1 ? "Testo approvato" : `${n(count)} testi approvati`),
+      groupCount: (unreviewed, total) =>
+        `${n(unreviewed)} ${plural(unreviewed, "non rivisto", "non rivisti")} / ${n(total)}`,
+      approveGroup: (count) => `Approva i non rivisti (${n(count)})`,
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `Approvare il testo non rivisto in «${group}»?`
+          : `Approvare tutti i ${n(count)} testi non rivisti in «${group}», compresi quelli non visibili sullo schermo?`,
     },
   };
 }

package/src/i18n/locales/zh.ts

@@ -694,6 +694,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       roleOf: (column) => `“${column}”列的内容是什么？`,
       ignore: "忽略",
       requiredRole: (role) => `${role}（必填）`,
+      requiredRoleShort: (role) => `${role} *`,
       previewOf: (shown, total) => `显示前 ${n(shown)} 行，共 ${n(total)} 行`,
       // `roles` arrives joined with "或" ("借方或贷方").
       oneOf: (roles) => `${roles}（任选其一）`,
@@ -747,6 +748,13 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       scope: (areas) => `审校范围仅限于：${areas}。`,
       exportCorrections: (count) => `导出更正（${n(count)}）`,
       failed: "操作未成功，请重试。",
+      approvedToast: (count) => (count === 1 ? "文本已通过" : `已通过 ${n(count)} 条文本`),
+      groupCount: (unreviewed, total) => `未审校 ${n(unreviewed)} / ${n(total)}`,
+      approveGroup: (count) => `通过未审校项（${n(count)}）`,
+      confirmGroup: (count, group) =>
+        count === 1
+          ? `通过“${group}”中的未审校文本？`
+          : `通过“${group}”中全部 ${n(count)} 条未审校文本（包括未显示在屏幕上的）？`,
     },
   };
 }

package/src/i18n/review.ts

@@ -193,6 +193,16 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "translationReview.lastFlagged": [["{{name}}", "{{date}}"]],
   "translationReview.scope": [["{{areas}}"]],
   "translationReview.exportCorrections": [[0], [1], [3]],
+  "translationReview.approvedToast": one,
+  "translationReview.groupCount": [
+    [1, 12],
+    [3, 12],
+  ],
+  "translationReview.approveGroup": one,
+  "translationReview.confirmGroup": [
+    [1, "{{group}}"],
+    [3, "{{group}}"],
+  ],
   "characterCount.count": [[12, 80]],
   "characterCount.remaining": one,
   "inlineEdit.edit": [["{{label}}"]],
@@ -210,6 +220,7 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "columnMapper.columnN": [[3]],
   "columnMapper.roleOf": [["{{column}}"]],
   "columnMapper.requiredRole": [["{{role}}"]],
+  "columnMapper.requiredRoleShort": [["{{role}}"]],
   "columnMapper.previewOf": [
     [1, 12],
     [10, 250],

package/src/index.ts

@@ -47,6 +47,9 @@ export type { DebouncedCallbackOptions, DebouncedFunction } from "./hooks/use-de
 // URL (Modal's `urlParam`) — kastlan's and keksdose's use-search-param-state, in the kit.
 export { useSearchParamState, useTabParam, useDialogParam } from "./hooks/use-search-param-state";
 export type { SearchParamStateOptions, DialogParam } from "./hooks/use-search-param-state";
+// 0.25: several keys, one navigation (keksdose live #378 — four setters in a row clobbered).
+export { useSearchParamsState } from "./hooks/use-search-param-state";
+export type { SearchParamField, SearchParamFields, SearchParamsUpdate } from "./hooks/use-search-param-state";
 // Copy that reports whether it worked — keksdose's copy buttons said "Copied" when it had not.
 export { useCopyToClipboard, copyToClipboard } from "./hooks/use-copy-to-clipboard";
 export type { CopyState, UseCopyToClipboardOptions, UseCopyToClipboardReturn } from "./hooks/use-copy-to-clipboard";
@@ -388,6 +391,10 @@ export {
   mergeReviews,
   dropReviews,
   translationCorrections,
+  // 0.25: grouping and the approvals' Undo (keksdose live #377).
+  groupTranslationRows,
+  unreviewedRows,
+  reviewUndo,
 } from "./lib/translation-review";
 export type {
   TranslationVerdict,
@@ -402,6 +409,8 @@ export type {
   TranslationSummary,
   TranslationReviewFilter,
   TranslationCorrection,
+  TranslationRowGroup,
+  TranslationReviewUndo,
 } from "./lib/translation-review";
 export {
   TranslationReviewPanel,
@@ -422,6 +431,9 @@ export type {
   TranslationLocaleTabsProps,
   TranslationExportButtonProps,
   TranslationReviewLabels,
+  TranslationReviewSaveInfo,
+  TranslationReviewOrigin,
+  TranslationReviewGroupBy,
 } from "./components/translation-review";
 // The legal pages' shell (0.19, H10): Imprint, Privacy Policy, Terms in every app.
 export { LegalLayout, LegalSection, LegalLinks, DEFAULT_LEGAL_LABELS } from "./components/legal";

package/src/lib/strip-fade.ts

@@ -1,12 +1,129 @@
-import { useLayoutEffect, useState, type RefObject } from "react";
+import { useCallback, useLayoutEffect, useState } from "react";
+import type { CSSProperties, FocusEvent, RefObject } from "react";
 
 // How far the fade at a scrolled strip's cut edge reaches, and how much room a tab
 // brought into view keeps from that edge so the fade never lies on top of it.
 export const TAB_FADE_PX = 24;
 
 /**
- * Shared by Tabs' strip, AppShell's scrolling phone sub-nav and (0.24) ColumnRoleTable's
- * preview; internal, not part of the package's surface.
+ * What {@link useStripFade} can be asked to do beyond the strip it was written for.
+ */
+export interface StripFadeOptions {
+  /**
+   * Keep the strip's own SCROLLBARS out of the fade (0.25, for the kit Table's and
+   * DataTable's `edgeFade`). A `mask-image` masks everything the element paints, and
+   * a classic scrollbar is painted by the element: on a desktop with always-visible
+   * scrollbars, a DataTable's vertical scrollbar sits at the inline end, inside the
+   * very band that fades whenever columns are hidden that way — it all but vanished,
+   * and the horizontal one lost its ends. With this set, the mask is opaque over
+   * each scrollbar (measured: `offsetWidth − clientWidth − borders`, its side read
+   * off `clientLeft`, which is where an RTL scrollbar on the left shows up) and the
+   * fade runs inside it, from the content's own edge. Where scrollbars take no room
+   * — phones, overlay scrollbars, `scrollbar-width: none` — nothing changes: the
+   * mask is the plain one. Off by default, so Tabs and AppShell paint exactly as
+   * they did.
+   */
+  spareScrollbars?: boolean;
+}
+
+/** The room the classic scrollbars of a strip take, and the borders beside them. */
+export interface StripScrollbars {
+  /** Vertical scrollbar on the left (RTL in Chromium and Firefox), in px. */
+  left: number;
+  /** Vertical scrollbar on the right, in px. */
+  right: number;
+  /** Horizontal scrollbar, in px. */
+  bottom: number;
+  /** The border widths outside each of them, in px — the fade still covers a border. */
+  borderLeft: number;
+  borderRight: number;
+  borderBottom: number;
+}
+
+const NO_SCROLLBARS: StripScrollbars = {
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderLeft: 0,
+  borderRight: 0,
+  borderBottom: 0,
+};
+
+// A scrollbar is never this thin; anything under it is sub-pixel rounding between
+// `offsetWidth` and `clientWidth`, not a scrollbar.
+const MIN_SCROLLBAR_PX = 2;
+
+function measureScrollbars(el: HTMLElement, style: CSSStyleDeclaration): StripScrollbars {
+  const px = (value: string) => parseFloat(value) || 0;
+  const borderLeft = px(style.borderLeftWidth);
+  const borderRight = px(style.borderRightWidth);
+  const borderTop = px(style.borderTopWidth);
+  const borderBottom = px(style.borderBottomWidth);
+  const vertical = el.offsetWidth - el.clientWidth - borderLeft - borderRight;
+  const horizontal = el.offsetHeight - el.clientHeight - borderTop - borderBottom;
+  const onLeft = el.clientLeft - borderLeft >= MIN_SCROLLBAR_PX;
+  const v = vertical >= MIN_SCROLLBAR_PX ? Math.round(vertical) : 0;
+  return {
+    left: onLeft ? v : 0,
+    right: onLeft ? 0 : v,
+    bottom: horizontal >= MIN_SCROLLBAR_PX ? Math.round(horizontal) : 0,
+    borderLeft,
+    borderRight,
+    borderBottom,
+  };
+}
+
+const sameScrollbars = (a: StripScrollbars, b: StripScrollbars) =>
+  a.left === b.left &&
+  a.right === b.right &&
+  a.bottom === b.bottom &&
+  a.borderLeft === b.borderLeft &&
+  a.borderRight === b.borderRight &&
+  a.borderBottom === b.borderBottom;
+
+/**
+ * The `mask-image` for a strip whose `left` and/or `right` (physical) edge has
+ * content behind it, or `undefined` when neither has. Pure, for {@link useStripFade}
+ * and its tests; `scrollbars` (see {@link StripFadeOptions.spareScrollbars}) keeps
+ * those bands opaque and starts the fade at the content's edge instead of the box's.
+ */
+export function stripFadeMask(
+  edges: { left: boolean; right: boolean },
+  scrollbars: StripScrollbars = NO_SCROLLBARS,
+): string | undefined {
+  if (!edges.left && !edges.right) return undefined;
+  const F = TAB_FADE_PX;
+  const sb = scrollbars;
+  // The plain mask, as Tabs and AppShell have always drawn it.
+  let l = edges.left ? `transparent, #000 ${F}px` : "#000";
+  let r = edges.right ? `#000 calc(100% - ${F}px), transparent` : "#000";
+  const fromRight = (px: number) => (px === 0 ? "100%" : `calc(100% - ${px}px)`);
+  // A vertical scrollbar on a FADED side: the border outside it fades with the rest
+  // of that edge, the scrollbar itself stays whole, and the fade starts inside it.
+  if (edges.left && sb.left > 0) {
+    const inner = sb.borderLeft + sb.left;
+    const border = sb.borderLeft > 0 ? `transparent ${sb.borderLeft}px, ` : "";
+    l = `${border}#000 ${sb.borderLeft}px, #000 ${inner}px, transparent ${inner}px, #000 ${inner + F}px`;
+  }
+  if (edges.right && sb.right > 0) {
+    const inner = sb.borderRight + sb.right;
+    const border =
+      sb.borderRight > 0 ? `, #000 ${fromRight(sb.borderRight)}, transparent ${fromRight(sb.borderRight)}` : "";
+    r = `#000 ${fromRight(inner + F)}, transparent ${fromRight(inner)}, #000 ${fromRight(inner)}${border}`;
+  }
+  const across = `linear-gradient(to right, ${l}, ${r})`;
+  if (sb.bottom <= 0) return across;
+  // The horizontal scrollbar, as a second layer: layers ADD, so this band is opaque
+  // over its whole width whatever the first layer says there.
+  const top = sb.borderBottom + sb.bottom;
+  const border = sb.borderBottom > 0 ? `transparent ${sb.borderBottom}px, ` : "";
+  return `${across}, linear-gradient(to top, ${border}#000 ${sb.borderBottom}px, #000 ${top}px, transparent ${top}px)`;
+}
+
+/**
+ * Shared by Tabs' strip, AppShell's scrolling phone sub-nav, (0.24) ColumnRoleTable's
+ * preview and (0.25) Table's and DataTable's `edgeFade`; internal, not part of the
+ * package's surface.
  *
  * Which ends of a sideways-scrolling strip have tabs cut off behind them, as the
  * `mask-image` that fades those ends out — or `undefined` while everything fits.
@@ -22,21 +139,27 @@ export const TAB_FADE_PX = 24;
  */
 export function useStripFade(
   ref: RefObject<HTMLElement | null>,
+  options?: StripFadeOptions,
 ): { mask: string | undefined; overflow: "start" | "end" | "both" | undefined } {
-  const [edges, setEdges] = useState({ left: false, right: false, rtl: false });
+  const spare = options?.spareScrollbars === true;
+  const [edges, setEdges] = useState({ left: false, right: false, rtl: false, scrollbars: NO_SCROLLBARS });
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const measure = () => {
       const hidden = el.scrollWidth - el.clientWidth;
       const scrolled = Math.abs(el.scrollLeft);
-      const rtl = getComputedStyle(el).direction === "rtl";
+      const style = getComputedStyle(el);
+      const rtl = style.direction === "rtl";
       const atStart = scrolled > 1;
       const atEnd = hidden - scrolled > 1;
       const left = rtl ? atEnd : atStart;
       const right = rtl ? atStart : atEnd;
+      const scrollbars = spare && (left || right) ? measureScrollbars(el, style) : NO_SCROLLBARS;
       setEdges((prev) =>
-        prev.left === left && prev.right === right && prev.rtl === rtl ? prev : { left, right, rtl },
+        prev.left === left && prev.right === right && prev.rtl === rtl && sameScrollbars(prev.scrollbars, scrollbars)
+          ? prev
+          : { left, right, rtl, scrollbars },
       );
     };
     measure();
@@ -51,14 +174,13 @@ export function useStripFade(
       observer?.disconnect();
     };
   });
-  if (!edges.left && !edges.right) return { mask: undefined, overflow: undefined };
-  const l = edges.left ? `transparent, #000 ${TAB_FADE_PX}px` : "#000";
-  const r = edges.right ? `#000 calc(100% - ${TAB_FADE_PX}px), transparent` : "#000";
+  const mask = stripFadeMask(edges, edges.scrollbars);
+  if (mask === undefined) return { mask: undefined, overflow: undefined };
   const rtl = edges.rtl;
   const start = rtl ? edges.right : edges.left;
   const end = rtl ? edges.left : edges.right;
   return {
-    mask: `linear-gradient(to right, ${l}, ${r})`,
+    mask,
     overflow: start && end ? "both" : start ? "start" : "end",
   };
 }
@@ -67,16 +189,99 @@ export function useStripFade(
  * Scroll `item` into view inside `strip` — the strip only (`scrollBy` on it, never
  * `scrollIntoView`, which would scroll the page too) — far enough to clear the fade.
  * A no-op when the strip fits or the item is already clear of both edges.
+ *
+ * The edges are the strip's CONTENT edges (0.25: `clientLeft` + `clientWidth`), not
+ * its box's: a vertical scrollbar or a side border takes room the item can never be
+ * scrolled into, and {@link StripFadeOptions.spareScrollbars} starts the fade inside
+ * the scrollbar. A Tabs strip has neither, so its edges are where they were.
  */
 export function scrollIntoStrip(strip: HTMLElement, item: HTMLElement): void {
   if (strip.scrollWidth <= strip.clientWidth) return;
-  const s = strip.getBoundingClientRect();
+  const box = strip.getBoundingClientRect();
+  const left = box.left + strip.clientLeft;
+  const right = left + strip.clientWidth;
   const t = item.getBoundingClientRect();
   const delta =
-    t.left < s.left + TAB_FADE_PX
-      ? t.left - s.left - TAB_FADE_PX
-      : t.right > s.right - TAB_FADE_PX
-        ? t.right - s.right + TAB_FADE_PX
+    t.left < left + TAB_FADE_PX
+      ? t.left - left - TAB_FADE_PX
+      : t.right > right - TAB_FADE_PX
+        ? t.right - right + TAB_FADE_PX
         : 0;
   if (delta !== 0) strip.scrollBy({ left: delta });
 }
+
+/**
+ * Focus landed on `focused` inside a faded table's scroller (0.25, Table and
+ * DataTable `edgeFade`): bring it clear of the fade. The browser's own focus scroll
+ * stops at the scroller's edge — under the fade, where a focused control is a few
+ * faint pixels. Its whole CELL is brought clear when the cell fits between the two
+ * fades (a select that fills its header, as ColumnRoleTable's do, then keeps the
+ * cell's padding round it too); a cell wider than that — a long note with a link at
+ * its end — would be brought in by its start and leave the link out, so then the
+ * focused element itself is what is scrolled clear.
+ */
+export function scrollFocusIntoStrip(strip: HTMLElement, focused: HTMLElement): void {
+  if (focused === strip || !strip.contains(focused)) return;
+  const cell = focused.closest<HTMLElement>("td, th");
+  const rect = cell && strip.contains(cell) ? cell.getBoundingClientRect() : null;
+  const fits = rect !== null && rect.right - rect.left <= strip.clientWidth - 2 * TAB_FADE_PX;
+  scrollIntoStrip(strip, fits && cell ? cell : focused);
+}
+
+/** `edgeFade` off: {@link useStripFade} gets no element and measures nothing. */
+const NO_ELEMENT: RefObject<HTMLElement | null> = { current: null };
+const SPARE_SCROLLBARS: StripFadeOptions = { spareScrollbars: true };
+
+/** `:focus-visible`, or `false` where the engine cannot say. */
+function focusVisible(el: Element): boolean {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+
+/** What {@link useEdgeFade} puts on the scroller; every field `undefined` while off. */
+export interface EdgeFadeProps {
+  "data-overflow": "start" | "end" | "both" | undefined;
+  style: CSSProperties | undefined;
+  onFocus: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+  onBlur: ((event: FocusEvent<HTMLElement>) => void) | undefined;
+}
+
+/**
+ * Table's and DataTable's `edgeFade` on their scroller (0.25; internal, like the rest
+ * of this file): the measured fade with the scroller's own scrollbars spared, its
+ * `data-overflow`, focus inside brought clear of it ({@link scrollFocusIntoStrip}),
+ * and — on a scroller that is itself a tab stop, as Table's is while it overflows —
+ * the fade lifted while the scroller shows the keyboard's focus outline: an inset
+ * outline lies exactly in the faded band, and its sides would fade out with the
+ * columns. Inert while `on` is false: no measuring, no listeners, no attributes.
+ *
+ * `style` is the mask alone; a caller with a style of its own spreads it over that.
+ */
+export function useEdgeFade(scroller: RefObject<HTMLElement | null>, on: boolean): EdgeFadeProps {
+  const fade = useStripFade(on ? scroller : NO_ELEMENT, SPARE_SCROLLBARS);
+  const [selfFocused, setSelfFocused] = useState(false);
+  const onFocus = useCallback((event: FocusEvent<HTMLElement>) => {
+    const box = event.currentTarget;
+    if (event.target === box) {
+      // A click in the table's text focuses the scroller too (it is the nearest tab
+      // stop); only the keyboard's focus draws an outline worth lifting the fade for.
+      if (focusVisible(box)) setSelfFocused(true);
+      return;
+    }
+    if (event.target instanceof HTMLElement) scrollFocusIntoStrip(box, event.target);
+  }, []);
+  const onBlur = useCallback((event: FocusEvent<HTMLElement>) => {
+    if (event.target === event.currentTarget) setSelfFocused(false);
+  }, []);
+  if (!on) return { "data-overflow": undefined, style: undefined, onFocus: undefined, onBlur: undefined };
+  const mask = selfFocused ? undefined : fade.mask;
+  return {
+    "data-overflow": fade.overflow,
+    style: mask ? { maskImage: mask, WebkitMaskImage: mask } : undefined,
+    onFocus,
+    onBlur,
+  };
+}

package/src/lib/translation-review.ts

@@ -387,6 +387,49 @@ export function filterTranslationRows(
   );
 }
 
+// ── Grouping ────────────────────────────────────────────────────────────────────
+
+/** One group of rows — an area, a source — and how they stand. */
+export interface TranslationRowGroup {
+  key: string;
+  rows: TranslationRow[];
+  summary: TranslationSummary;
+}
+
+/**
+ * Rows in groups, each group where its first row is — the reference's order, so the areas
+ * read the way the app's authors wrote the bundle — and each group's rows in their own
+ * order. keksdose live #377: a reviewer on a phone works area by area ("the budget
+ * strings, then the legal ones"), and a flat list of 3859 rows is not a way to see
+ * where an area stands.
+ *
+ * `groupOf` names a row's group: `(row) => row.namespace` for the areas,
+ * `(row) => row.source` for kastlan's screen texts and documents.
+ */
+export function groupTranslationRows(
+  rows: readonly TranslationRow[],
+  groupOf: (row: TranslationRow) => string,
+): TranslationRowGroup[] {
+  const byKey = new Map<string, TranslationRow[]>();
+  for (const row of rows) {
+    const key = groupOf(row);
+    const list = byKey.get(key);
+    if (list) list.push(row);
+    else byKey.set(key, [row]);
+  }
+  return [...byKey].map(([key, list]) => ({ key, rows: list, summary: summariseRows(list) }));
+}
+
+/**
+ * The rows a group's "Approve the unreviewed" takes: the ones nobody has given a verdict
+ * and that have a text. Not `changed` — a string that moved since it was judged asks to
+ * be READ again, which a bulk action is the opposite of — and not `missing`, which has
+ * nothing to approve.
+ */
+export function unreviewedRows(rows: readonly TranslationRow[]): TranslationRow[] {
+  return rows.filter((row) => row.status === "unreviewed" && row.text !== "");
+}
+
 // ── Writing ─────────────────────────────────────────────────────────────────────
 
 /** What gets stored for a verdict: the wording it was given on, so a later change of the
@@ -408,6 +451,48 @@ export function reviewWrite(
   };
 }
 
+/** What takes a set of verdicts back: see {@link reviewUndo}. */
+export interface TranslationReviewUndo {
+  /** The verdicts the rows had before, to store again — each on the wording it was
+   *  given on, so a row that was `changed` reads `changed` again. */
+  writes: TranslationReviewWrite[];
+  /** The rows that had no verdict before: back to unreviewed. */
+  clears: TranslationReviewKey[];
+}
+
+/**
+ * How to take back what was just said about `rows` — the rows AS THEY WERE before the
+ * write, with the verdicts they carried then. The panel's Undo toast (0.25, keksdose live
+ * #377) runs it: a swipe on a phone approves in one movement, and a movement can be a
+ * mistake.
+ *
+ * A row that had a verdict gets it stored again (its note, its suggestion, the wording it
+ * was judged on); one that had none is cleared. The server stamps the restored verdict
+ * with the person undoing and the time, as it stamps every write — the contract has no
+ * way to write a verdict in somebody else's name, and should not.
+ */
+export function reviewUndo(rows: readonly TranslationRow[]): TranslationReviewUndo {
+  const writes: TranslationReviewWrite[] = [];
+  const clears: TranslationReviewKey[] = [];
+  for (const row of rows) {
+    const before = row.review;
+    if (!before) {
+      clears.push({ locale: row.locale, key: row.key });
+      continue;
+    }
+    writes.push({
+      locale: row.locale,
+      key: row.key,
+      text: before.text,
+      referenceText: before.referenceText,
+      verdict: before.verdict,
+      note: before.note,
+      suggestion: before.suggestion,
+    });
+  }
+  return { writes, clears };
+}
+
 /** The app's cached verdict list with `written` in place of what was said before — a
  *  save answers with the rows it wrote, so a page patches its copy instead of
  *  downloading every verdict again after each click. Any spelling with `locale` and