@eifi1/ui-kit 0.34.0 → 0.36.0

package/src/components/stat-tile.tsx

@@ -1,7 +1,9 @@
-import { createContext, isValidElement, useContext, useId, useLayoutEffect, useState } from "react";
-import type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useState } from "react";
+import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
 import { ArrowDown, ArrowUp, Minus } from "lucide-react";
 import { cn } from "../lib/cn";
+// The sparkline's name: the label's text (lib since 0.36, which a field's `help` "?" shares).
+import { plainText } from "../lib/plain-text";
 import { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 import { Card } from "./card";
@@ -115,8 +117,14 @@ export interface StatTileLinkProps {
   children: ReactNode;
 }
 
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
+ * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the
+ * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the
+ * type; at runtime `{...rest}` already carried it there.
+ */
 export interface StatTileProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+  extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** What is measured. Also the tile's accessible name when it is a link/button. */
   label: ReactNode;
   /**
@@ -606,23 +614,6 @@ function FigureRow({
   );
 }
 
-/**
- * The text of a label node, for the sparkline's name: a string or number as is, an
- * element by its children, recursively. A `<Tooltip label="…">Spend</Tooltip>` label
- * yields "Spend" — the text the reader sees, not the bubble's. `undefined` when there
- * is no text to find (an icon), so the sparkline falls back to its unnamed summary.
- */
-function plainText(node: ReactNode): string | undefined {
-  const walk = (n: ReactNode): string => {
-    if (typeof n === "string" || typeof n === "number") return String(n);
-    if (Array.isArray(n)) return n.map(walk).join("");
-    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);
-    return "";
-  };
-  const text = walk(node).replace(/\s+/g, " ").trim();
-  return text === "" ? undefined : text;
-}
-
 /**
  * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.
  * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not

package/src/components/swatch-picker.tsx

@@ -7,7 +7,7 @@ import type { TileItem, TileSize } from "./tile-radio";
 import { Tooltip } from "./tooltip";
 import { useCommitReason, type CommitScope } from "./write-lock";
 import { hasContent } from "../lib/presence";
-import { LabelStrip, mergeDescribedBy, useFieldMessages } from "./field-parts";
+import { LabelStrip, mergeDescribedBy, useFieldMessages, type FieldHelpProps } from "./field-parts";
 import { DEFAULT_SWATCH_PICKER_LABELS } from "./swatch-picker-labels";
 
 export interface SwatchPickerLabels {
@@ -62,7 +62,8 @@ export interface SwatchOption<T extends string> {
  * is omitted rather than shadowed, as on {@link ToggleGroup}.
  */
 export interface SwatchPickerProps<T extends string>
-  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue"> {
+  extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue">,
+    FieldHelpProps {
   options: SwatchOption<T>[];
   /** The chosen colour, or `null` for none. */
   value: T | null;
@@ -145,6 +146,7 @@ export function SwatchPicker<T extends string>({
   labels,
   label,
   hint,
+  help,
   disabledReason: ownDisabledReason,
   commit,
   className,
@@ -157,10 +159,13 @@ export function SwatchPicker<T extends string>({
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const labelled = hasContent(label);
-  // The label line's "?", or the caption under the swatches (DUP-2). Only with a label.
-  // The caller's ids, the caption, then the group's state: mixed, locked.
+  // The label line's "?", or the caption under the swatches (DUP-2). Only with a label,
+  // the help's "?" too (0.36). The caller's ids, the caption, then the group's state:
+  // mixed, locked.
   const messages = useFieldMessages({
     hint: labelled ? hint : undefined,
+    help: labelled ? help : undefined,
+    name: label,
     describedBy: rest["aria-describedby"],
     reasonId: mergeDescribedBy(mixed && mixedId, locked && reasonId),
   });

package/src/components/swipeable-row.tsx

@@ -51,9 +51,8 @@ interface SwipeActionBase {
  * dark-mode pastel.
  *
  * **`paint`** follows the same rule for an app's documented exception (see
- * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
- * existing call sites compile; there the label is white unless the classes set a
- * colour, and the idle panel is still dimmed.
+ * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white
+ * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).
  */
 export type SwipeAction = SwipeActionBase &
   (
@@ -61,27 +60,12 @@ export type SwipeAction = SwipeActionBase &
         /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
         tone: SwipeTone;
         paint?: never;
-        className?: never;
-        armedClassName?: never;
       }
     | {
         /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
          *  armed `fill` under `foreground`. */
         paint: SwipePaint;
         tone?: never;
-        className?: never;
-        armedClassName?: never;
-      }
-    | {
-        tone?: never;
-        paint?: never;
-        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception; removed in 0.35.
-         *  Background utility class while the action is previewed but not yet armed; the
-         *  panel is dimmed then, and its text is white unless this sets a text colour. */
-        className: string;
-        /** @deprecated 0.33 — pass `tone`, or `paint`; removed in 0.35. Background
-         *  utility class once the drag has passed this action's threshold. */
-        armedClassName: string;
       }
   );
 
@@ -114,21 +98,16 @@ export const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {
 const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
 const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
 
-/** The panel's colour classes, inline style and dimming for one action and state. */
-function panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {
-  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
-  if (action.paint) {
-    return {
-      className: armed ? PAINT_ARMED : PAINT_IDLE,
-      style: {
-        "--swipe-paint-fill": action.paint.fill,
-        "--swipe-paint-fg": action.paint.foreground,
-      } as CSSProperties,
-      dim: false,
-    };
-  }
-  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.
-  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+/** The panel's colour classes and inline style for one action and state. */
+function panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"] };
+  return {
+    className: armed ? PAINT_ARMED : PAINT_IDLE,
+    style: {
+      "--swipe-paint-fill": action.paint.fill,
+      "--swipe-paint-fg": action.paint.foreground,
+    } as CSSProperties,
+  };
 }
 
 /**
@@ -296,11 +275,10 @@ export function SwipeableRow({
           className={cn(
             "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
             "text-xs font-medium transition-all",
+            // No dimming: a tone or a paint says "not yet armed" with the soft→solid
+            // step, which keeps its label readable at both ends (the 0.33 rule; the
+            // dimmed path went with `className` / `armedClassName` in 0.35).
             look.className,
-            // The old path only: dimmed until the drag has passed a threshold. A tone
-            // or a paint says it with the soft→solid step instead, which keeps its
-            // label readable at both ends.
-            look.dim && "opacity-60",
             // The panel is anchored to the edge the row is uncovering, so the label
             // sits where the eye already is rather than across the screen. That edge is
             // physical, while a flex row starts at the INLINE start — so in RTL the two

package/src/components/text-link.tsx

@@ -228,7 +228,9 @@ export interface TextLinkProps
 }
 
 const TONE: Record<TextLinkTone, string> = {
-  brand: "text-brand hover:text-[var(--brand-hover)]",
+  // Under More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36,
+  // colour-roles §13.3 decision 8): `--brand` is a mark's colour, solved to 3:1.
+  brand: "text-brand hover:text-[var(--brand-hover)] contrast:text-brand-muted contrast:hover:text-brand-muted",
   muted: "text-muted hover:text-primary",
   danger: "text-danger hover:text-[var(--danger-hover)]",
   inherit: "",

package/src/components/textarea.tsx

@@ -1,7 +1,14 @@
 import { useId, useLayoutEffect, useRef } from "react";
 import type { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
-import { EndHintRow, FieldCaption, mergeDescribedBy, useFieldError, useFieldHint } from "./field-parts";
+import {
+  EndHintRow,
+  FieldCaption,
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint,
+  type FieldHelpProps,
+} from "./field-parts";
 import {
   CharacterCount,
   FIELD_BASE,
@@ -221,7 +228,7 @@ function TextareaLabelStrip() {
   return <span ref={ref} aria-hidden data-slot="label-strip" className={TEXTAREA_LABEL_STRIP} />;
 }
 
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldHelpProps {
   label?: ReactNode;
   /** See {@link Input}'s `invalid`. */
   invalid?: boolean;
@@ -240,13 +247,13 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
 }
 
 export function Textarea(props: TextareaProps) {
-  const { ref, className, label, id, placeholder, invalid, error, hint, showCount, countLabels, ...rest } = props;
+  const { ref, className, label, id, placeholder, invalid, error, hint, help, showCount, countLabels, ...rest } = props;
   // See Input's `reserve`.
   const reserve = "error" in props || "hint" in props || "showCount" in props;
   const generated = useId();
   const fieldId = id ?? generated;
   const countId = useId();
-  const hintParts = useFieldHint(hint, rest["aria-describedby"]);
+  const hintParts = useFieldHint(hint, rest["aria-describedby"], { help, name: label ?? rest["aria-label"] });
   const maxLength = rest.maxLength;
   const counting = Boolean(showCount) && typeof maxLength === "number" && maxLength > 0;
   const length = useTypedLength(rest.value, rest.defaultValue);

package/src/components/toggle-group.tsx

@@ -11,11 +11,13 @@ import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
   FIELD_ERROR_CLASS,
+  fieldHelpMark,
   isTextHint,
   LabelStrip,
   useDisabledReasonLine,
   useInlineHint,
   type DisabledReasonDisplay,
+  type FieldHelpProps,
 } from "./field-parts";
 import { FOCUS_RING_WIDTH } from "./focus-ring";
 
@@ -35,7 +37,8 @@ export interface ToggleOption<T extends string> {
  * worse than one that does not compile.
  */
 export interface ToggleGroupBaseProps<T extends string>
-  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
+  extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children">,
+    FieldHelpProps {
   options: ToggleOption<T>[];
   className?: string;
   /** Applied to every option button (e.g. to tune height/rounding to match
@@ -380,6 +383,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     labelPlacement = "field",
     chromeClassName,
     hint,
+    help,
     error,
     disabledReason: ownDisabledReason,
     disabledReasonDisplay,
@@ -407,10 +411,22 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   // §4: at Large and on touch the reason is a line under the group, not a bubble.
   const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
   // §4: likewise a FieldHint "?" on the label line becomes a caption under the group at
-  // Large and on touch; text is a caption at every size, as Select's (see `hint`).
-  const inlineHint = useInlineHint(hint);
-  const hintAsCaption = isTextHint(hint) ? hint : inlineHint !== hint ? inlineHint : undefined;
-  const labelHint = hintAsCaption === undefined ? hint : undefined;
+  // Large and on touch; text is a caption at every size, as Select's (see `hint`). With
+  // a `help` (0.36, only with `label`, as `hint`), its "?" is the label line's only one,
+  // and the hint — a FieldHint's words included — is the caption at every size.
+  const helpMark = fieldHelpMark(hasContent(label) ? help : undefined, label);
+  const withHelp = helpMark !== undefined;
+  const inlineHint = useInlineHint(hint, withHelp);
+  const hintAsCaption = withHelp
+    ? hasContent(inlineHint)
+      ? inlineHint
+      : undefined
+    : isTextHint(hint)
+      ? hint
+      : inlineHint !== hint
+        ? inlineHint
+        : undefined;
+  const labelHint = helpMark ?? (hintAsCaption === undefined ? hint : undefined);
   // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —
   // but stays focusable; `disabled` alone also takes the segments out of the tab order.
   const dimmed = disabled || locked;

package/src/components/tooltip.tsx

@@ -1,6 +1,7 @@
 import {
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useId,
   useLayoutEffect,
@@ -12,6 +13,7 @@ import {
   type PointerEvent,
   type ReactElement,
   type ReactNode,
+  type Ref,
   type RefObject,
 } from "react";
 import { createPortal } from "react-dom";
@@ -21,6 +23,7 @@ import { useAnchoredRect, type AnchorRect } from "../hooks/use-anchored-rect";
 import { viewportSize } from "../hooks/use-anchored-panel";
 import { dirOf, type Direction } from "../lib/direction";
 import { hasClippingAncestor } from "../lib/clipping";
+import { assignRef } from "../lib/refs";
 
 /** The attribute that marks an element as a clipping container for {@link Tooltip}'s
  *  auto-portal, whatever its computed `overflow` — `<div data-clips>` or
@@ -129,6 +132,14 @@ export interface TooltipProps extends ComponentPropsWithoutRef<"span"> {
    */
   tap?: TooltipTap;
   children: ReactNode;
+  /**
+   * The trigger WRAPPER — the `<span>` the rest of the props go to, around the caller's
+   * child (round 0.35 R4, as Card and EmptyState took one in 0.34) — merged with its own
+   * ref, which the bubble is anchored to and dismissed by. Not the bubble: a portalled
+   * one exists only while it is up. On the empty-label branch there is no wrapper, so
+   * the ref stays `null` (see the ⚠️ above).
+   */
+  ref?: Ref<HTMLSpanElement>;
 }
 
 /** What each variant below takes: the resolved `side` and `tap`, and every span attribute
@@ -630,6 +641,22 @@ function useTooltipTrigger(
   return { open, dismissed, handlers };
 }
 
+/**
+ * The trigger wrapper's own ref, and one callback ref that hands the wrapper to the
+ * caller's `ref` as well (round 0.35 R4).
+ */
+function useTriggerRef(ref: Ref<HTMLSpanElement> | undefined) {
+  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const setTrigger = useCallback(
+    (el: HTMLSpanElement | null) => {
+      triggerRef.current = el;
+      assignRef(ref, el);
+    },
+    [ref],
+  );
+  return { triggerRef, setTrigger };
+}
+
 /** The variant that lives next to its trigger, and — when `detect` is on, which is the
  *  default — moves its bubble to `<body>` when that turns out to be inside a clipping
  *  container (see "Inside a scroll container" on {@link Tooltip}).
@@ -656,10 +683,11 @@ function InPlaceTooltip({
   lazy,
   tap,
   children,
+  ref,
   ...rest
 }: TooltipVariantProps & { detect: boolean; lazy: boolean }) {
   const id = useId();
-  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   const [clipped, setClipped] = useState(false);
   const [dir, setDir] = useState<Direction>("ltr");
   // The reading direction on every request (the clamp keeps the start edge of a bubble
@@ -677,7 +705,8 @@ function InPlaceTooltip({
   // phantom-scroll bug whether or not anyone opens it.
   useLayoutEffect(() => {
     if (detect) setClipped(hasClippingAncestor(triggerRef.current));
-  }, [detect]);
+    // `triggerRef` is the same object for the component's life (useTriggerRef's useRef).
+  }, [detect, triggerRef]);
   return (
     // No role for this span: its handlers track whether the bubble is up and activate
     // nothing; the caller's child is the interactive element, keeps its own handlers,
@@ -687,7 +716,7 @@ function InPlaceTooltip({
       // a caller passing an `onFocus` of its own must not replace them (its pointer
       // handlers are called from them).
       {...rest}
-      ref={triggerRef}
+      ref={setTrigger}
       // Clipped for the one render in which the bubble is measured (see useViewportClamp):
       // that layout must not reach the page's width.
       style={measuring ? { ...rest.style, overflow: "clip" } : rest.style}
@@ -1041,9 +1070,10 @@ function PortalTooltip({
   redact,
   tap,
   children,
+  ref,
   ...rest
 }: TooltipVariantProps) {
-  const triggerRef = useRef<HTMLSpanElement | null>(null);
+  const { triggerRef, setTrigger } = useTriggerRef(ref);
   // The trigger's reading direction, read when the bubble is asked for (an event, not a
   // render): it resolves `start` / `end`, and the portalled bubble — which has left the
   // subtree it would have inherited `dir` from — carries it too.
@@ -1062,9 +1092,10 @@ function PortalTooltip({
         // As in `InPlaceTooltip`: the caller's attributes first, the handlers that run
         // this component after them. The BUBBLE is deliberately not given them — it
         // is portalled to `<body>`, and an id or a tour anchor duplicated onto a node
-        // that only exists while hovered would match twice or match nothing.
+        // that only exists while hovered would match twice or match nothing. So, too,
+        // the caller's `ref` (round 0.35 R4).
         {...rest}
-        ref={triggerRef}
+        ref={setTrigger}
         className={cn("relative inline-flex", className)}
         {...handlers}
       >

package/src/components/translation-review.tsx

@@ -33,12 +33,13 @@ import { BulkActionBar } from "./bulk-action-bar";
 import { Checkbox } from "./checkbox";
 import { Chip } from "./chip";
 import { DataTable } from "./data-table";
-import type { DataTableColumn, DataTableProps, MobileSwipeActions, SortState } from "./data-table";
+import type { DataTableColumn, DataTableProps, MobileSwipeActions } from "./data-table";
 import { Disclosure } from "./disclosure";
 import { SearchField } from "./search-field";
 import { toast } from "./toast";
 import type { SwipeAction } from "./swipeable-row";
 import { ToggleGroup } from "./toggle-group";
+import { useSharedTableView } from "./use-table-state";
 import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
@@ -168,7 +169,8 @@ export interface TranslationReviewPanelProps {
   /** Rows per page. Default 50. */
   pageSize?: number;
   /** Persists the table's sort and page size (DataTable's `storageKey`), under the
-   *  prefix below. */
+   *  prefix below — under {@link groupBy}, the one sort and page size every group
+   *  shares, in the same place (0.35). */
   storageKey?: string;
   /**
    * The `localStorage` prefix in front of `storageKey` (DataTable's `storageKeyPrefix`).
@@ -257,7 +259,14 @@ export interface TranslationReviewPanelProps {
    * reference; a column sort orders the rows INSIDE every group alike. Each group pages
    * on its own, `pageSize` rows at a time — a header then always stands over its own
    * rows, and paging one area does not move another — rather than one pager cutting
-   * through the headers. `storageKey` keeps persisting the ungrouped table only.
+   * through the headers. The page SIZE is one for all of them, as the sort is: a
+   * group's pager changes it everywhere.
+   *
+   * `storageKey` persists that one view — the sort and the page size — in the place the
+   * ungrouped table keeps its own (same key, same prefix, same blob), read on mount and
+   * written on a change, so a reviewer switching the grouping on or off keeps both
+   * (0.35, Kurvenschmiede; before, it persisted the ungrouped table only). What only
+   * the ungrouped table has — column widths, hidden columns — stays in the blob for it.
    *
    * Groups fold (each on its own, remembered while the panel lives), and a folded group's
    * rows are not rendered at all — only its header. Which groups start open is
@@ -558,8 +567,15 @@ export function TranslationReviewPanel({
   // has mounted and taken focus, the group that asked.
   const [confirming, setConfirming] = useState<string | null>(null);
   const confirmFocus = useRef<string | null>(null);
-  // One sort for every group's table, so a header click orders all of them alike.
-  const [groupSorts, setGroupSorts] = useState<SortState[]>([]);
+  // One view for every group's table — one sort, so a header click orders all of them
+  // alike, and one page size — kept under `storageKey` in the single table's own blob, so
+  // switching the grouping keeps both (0.35, Kurvenschmiede).
+  const groupView = useSharedTableView({
+    active: groupBy !== undefined,
+    storageKey,
+    storageKeyPrefix,
+    defaultPageSize: pageSize,
+  });
 
   const setFilter = (patch: Partial<TranslationReviewFilter>) => {
     const next = { ...filter, ...patch };
@@ -870,8 +886,10 @@ export function TranslationReviewPanel({
             frame: false,
             chrome: "minimal" as const,
             maxBodyHeight: "none",
-            sorts: groupSorts,
-            onSortsChange: setGroupSorts,
+            sorts: groupView.sorts,
+            onSortsChange: groupView.setSorts,
+            pageSize: groupView.pageSize,
+            onPageSizeChange: groupView.setPageSize,
             labels: { table: group.name },
           }
         : { storageKey, storageKeyPrefix })}

package/src/components/use-table-state.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
+import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
 import {
   decodeFilterValue,
@@ -45,6 +46,13 @@ function serializePersisted(state: PersistedState): string {
   return JSON.stringify(state);
 }
 
+/** A stored page size as a table holds it — `"all"` is `Infinity` — or `fallback`. */
+function storedPageSize(stored: Partial<PersistedState>, fallback: number): number {
+  if (stored.pageSize === "all") return Infinity;
+  if (typeof stored.pageSize === "number" && stored.pageSize > 0) return stored.pageSize;
+  return fallback;
+}
+
 // ---------- URL sync helpers ----------
 
 const URL_FILTER_PREFIX = "f.";
@@ -251,8 +259,8 @@ function writeUrlState<T>(
  * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
  *   per-table identity; `urlSync` is opt-in because only some tables want their view in
  *   a shareable address.
- * * **A controlled filter or sort that changes sends the table back to page 1.** See
- *   the note at the reset below.
+ * * **A controlled filter, sort or page size that changes sends the table back to page
+ *   1.** See the note at the reset below.
  */
 export function useTableState<T>({
   columns,
@@ -262,6 +270,7 @@ export function useTableState<T>({
   defaultPageSize,
   sortsProp,
   filtersProp,
+  pageSizeProp,
 }: {
   columns: DataTableColumn<T>[];
   storageKey?: string;
@@ -270,6 +279,7 @@ export function useTableState<T>({
   defaultPageSize: number;
   sortsProp?: SortState[];
   filtersProp?: FilterState;
+  pageSizeProp?: number;
 }) {
   const { enabled: urlSync, prefix: urlPrefix } = resolveTableUrlSync(urlSyncOption);
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
@@ -312,21 +322,21 @@ export function useTableState<T>({
   // is never painted and never written to the URL. Not on mount: a deep link's `p=3`
   // must survive the owner's first render. (In `serverPagination` mode this state is
   // unused — the owner's `page` is the page, and resetting it stays the owner's job.)
+  // A controlled page size counts too: the groups of `TranslationReviewPanel` share one,
+  // and a group paged deep into its rows starts over when another group's pager changes it.
   const controlledSig =
-    sortsProp !== undefined || filtersProp !== undefined
-      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null])
+    sortsProp !== undefined || filtersProp !== undefined || pageSizeProp !== undefined
+      ? JSON.stringify([sortsProp ?? null, filtersProp ?? null, String(pageSizeProp)])
       : null;
   const [seenControlledSig, setSeenControlledSig] = useState(controlledSig);
   if (seenControlledSig !== controlledSig) {
     setSeenControlledSig(controlledSig);
     setPage(0);
   }
-  const [pageSize, setPageSize] = useState<number>(() => {
-    if (urlInitial.pageSize !== undefined) return urlInitial.pageSize;
-    if (initial.pageSize === "all") return Infinity;
-    if (typeof initial.pageSize === "number" && initial.pageSize > 0) return initial.pageSize;
-    return defaultPageSize;
-  });
+  const [internalPageSize, setPageSize] = useState<number>(() =>
+    urlInitial.pageSize !== undefined ? urlInitial.pageSize : storedPageSize(initial, defaultPageSize),
+  );
+  const pageSize = pageSizeProp ?? internalPageSize;
   const [widths, setWidths] = useState<Record<string, number>>(() => initial.widths ?? {});
   const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set(initial.hidden ?? []));
   const [showSettings, setShowSettings] = useState(false);
@@ -398,6 +408,77 @@ export function useTableState<T>({
   };
 }
 
+// ---------- One view over several tables ----------
+
+/** What {@link useSharedTableView} keeps. */
+export interface SharedTableView {
+  sorts: SortState[];
+  setSorts: (next: SortState[]) => void;
+  /** `Infinity` for "all", as a table holds it. */
+  pageSize: number;
+  setPageSize: (next: number) => void;
+}
+
+/**
+ * One table view — the sort and the page size — for an owner that draws it as SEVERAL
+ * tables over one `storageKey`: `TranslationReviewPanel`'s groups, which sort and page
+ * alike (0.35, Kurvenschmiede: its grouped review stored no view at all). Pass them to
+ * each table as `sorts`/`onSortsChange` and `pageSize`/`onPageSizeChange`.
+ *
+ * Kept in the very blob a `DataTable` with that `storageKey` keeps, not in a format of
+ * its own, so the single table and the groups read each other's view. What the blob
+ * holds besides (filters, column widths, hidden columns) is carried over as stored, for
+ * the single table to find as it left it. Read when `active` turns on — on mount, or
+ * when the owner switches to this view — and written on a change, never on a read. The
+ * prefix resolves as DataTable's does: prop > provider > the kit's.
+ */
+export function useSharedTableView({
+  active,
+  storageKey,
+  storageKeyPrefix,
+  defaultPageSize,
+}: {
+  active: boolean;
+  storageKey?: string;
+  storageKeyPrefix?: string;
+  defaultPageSize: number;
+}): SharedTableView {
+  const providerPrefix = useKitTableStorageKeyPrefix();
+  const prefix = storageKeyPrefix ?? providerPrefix ?? DEFAULT_PERSIST_PREFIX;
+  const read = () => {
+    const stored = active ? loadPersisted(storageKey, prefix) : {};
+    return { sorts: normalizeSorts(stored.sort), pageSize: storedPageSize(stored, defaultPageSize) };
+  };
+  const [view, setView] = useState(read);
+  // Adjusted during render when `active` turns on, so the first render of the groups
+  // already has the view the single table left, not a frame of the default.
+  const [wasActive, setWasActive] = useState(active);
+  if (active !== wasActive) {
+    setWasActive(active);
+    if (active) setView(read());
+  }
+  const change = (patch: Partial<typeof view>) => {
+    const next = { ...view, ...patch };
+    setView(next);
+    if (!active || !storageKey) return;
+    const stored = loadPersisted(storageKey, prefix);
+    const blob: PersistedState = {
+      sort: next.sorts,
+      filters: stored.filters ?? {},
+      pageSize: next.pageSize === Infinity ? "all" : next.pageSize,
+      widths: stored.widths,
+      hidden: stored.hidden,
+    };
+    writeStored(prefix + storageKey, serializePersisted(blob));
+  };
+  return {
+    sorts: view.sorts,
+    setSorts: (sorts) => change({ sorts }),
+    pageSize: view.pageSize,
+    setPageSize: (pageSize) => change({ pageSize }),
+  };
+}
+
 // ---------- Owner-held table state, mirrored to the URL ----------
 
 export interface UseTableUrlStateOptions<T> {

package/src/components/user-avatar.tsx

@@ -69,9 +69,9 @@ export interface UserAvatarProps extends Omit<ComponentPropsWithRef<"span">, "ch
    * in the surface colour so it reads as its own mark (keksdose account-menu ~385,
    * top-bar :152). Its `label` is read as text where the dot sits — inside a button
    * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the
-   * button is named by the menu's `ariaLabel` followed by this label: "Account menu
+   * button is named by the menu's `aria-label` followed by this label: "Account menu
    * 3 unread". The initials stay hidden either way, so the person's name is NOT part
-   * of it — put it in `ariaLabel` ("Marcel Eifert, account menu") if it should be.
+   * of it — put it in `aria-label` ("Marcel Eifert, account menu") if it should be.
    */
   badge?: UserAvatarBadge | null;
 }