@eifi1/ui-kit 0.39.0 → 0.40.0

package/src/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { Card } from "./card";
 import { Spinner } from "./spinner";
@@ -14,7 +14,7 @@ import {
   resolveDataTableLabels,
   splitCellProps,
 } from "./data-table-shared";
-import { MobileFilters, MobileRow, MobileSort, StackedFields } from "./data-table-mobile";
+import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile";
 import { DataTableHead } from "./data-table-head";
 import { ColumnSettingsPanel } from "./data-table-column-settings";
 import { useLargeText } from "../hooks/use-large-text";
@@ -236,10 +236,26 @@ export interface DataTableProps<T> {
   urlSync?: TableUrlSync;
   /**
    * When true, the table fills its parent's height and scrolls INTERNALLY, with the
-   * header pinned — so the page itself doesn't add a second, outer scrollbar. On a
-   * phone the card list is the scroller instead, with the filter button pinned above
-   * it; an unbounded parent simply lets either layout grow to its content. The parent must give it a bounded height (e.g. a flex
-   * column inside the viewport-locked app shell). See feedback #207.
+   * header pinned — so the page itself doesn't add a second, outer scrollbar. The parent
+   * must give it a bounded height (e.g. a flex column inside the viewport-locked app
+   * shell). See feedback #207.
+   *
+   * **The list page** (0.40, docs/page-layout-harmonization.md §1): the root carries
+   * `data-fill-height`, and from `md` up AppShell's `<main>` turns into a flex column
+   * while such a table is inside — the shell's banners keep their height, the page takes
+   * the rest. Wrap every element between `<main>` and the table in `FillHeight` (or merge
+   * `FILL_HEIGHT_CLASS`); nothing else to wire. The body never shrinks below `basis-48`
+   * (12rem, about five rows): on a window too short for that, `<main>` scrolls again.
+   *
+   * **On a phone** the card list becomes the scroller ONLY when its parent really bounds
+   * it — measured, not assumed (0.40, keksdose live #420): the list takes the flex
+   * room it is given, and only when its rows overflow that room does it turn
+   * `overflow-y-auto overscroll-contain`, with the filter button pinned above. Under an
+   * unbounded parent — `AppShell` on a phone, where the DOCUMENT scrolls — it stays in
+   * the page's flow and grows to its content. Until 0.40 it was a scroller either way,
+   * and a scroller with nothing to scroll and `overscroll-contain` swallowed the page's
+   * own scroll: a swipe that started on a card moved nothing. So `fillHeight` is safe
+   * to pass at every width; `fillHeight={useBreakpoint("md")}` is no longer needed.
    *
    * The cure for TWO SCROLLBARS (round 0.34 C14, kastlan feedback 55): the default
    * `maxBodyHeight` scrolls the body inside a page that scrolls too. How a page fills
@@ -263,14 +279,13 @@ export interface DataTableProps<T> {
    *  the cap on a page with anything else on it shows two scrollbars side by side,
    *  and the wheel moves whichever is under the pointer. For a list page whose table
    *  is the point, fill the height instead, from `md` up (a phone scrolls the page
-   *  and its card list as one):
+   *  and its card list as one) — docs/page-layout-harmonization.md §1.2 says which
+   *  pages fill:
    *
-   *  1. the shell's content column becomes a flex column of the main area's height
-   *     when the page asks — kastlan's
-   *     `md:has-[>[data-fill-height]]:flex md:has-[>[data-fill-height]]:h-full md:has-[>[data-fill-height]]:flex-col`;
-   *  2. the page's root asks, and is a flex column that may shrink:
-   *     `data-fill-height` and `md:flex md:min-h-0 md:flex-1 md:flex-col`;
-   *  3. the table takes the rest: `<DataTable fillHeight>`.
+   *  1. `<DataTable fillHeight>`: the table marks itself (`data-fill-height`), and
+   *     AppShell's `<main>` becomes a flex column while it is inside;
+   *  2. each element between `<main>` and the table is a `FillHeight` (the page's
+   *     root, any wrapper on the way), or merges `FILL_HEIGHT_CLASS`.
    *
    *  Only the body then scrolls, under its pinned header, and every other page grows
    *  with its content as before (kastlan e3985c9, its leases list). A short table that
@@ -313,11 +328,23 @@ export interface DataTableProps<T> {
   pageSize?: number;
   onPageSizeChange?: (pageSize: number) => void;
   /**
-   * Opt-in multi-row selection (desktop table only). When provided, a leading
+   * Opt-in multi-row selection. When provided, a leading
    * checkbox column is rendered with a select-all box in the header; the owner
    * holds the selected set and reacts via the callbacks. Rows for which
    * `isSelectable` returns false render no checkbox and are excluded from
    * select-all. See feedback #285 (bulk edit).
+   *
+   * **On a phone** (0.40, keksdose live #421) the cards enter a selection MODE: a long
+   * press on a card (500 ms, keksdose's register gesture) selects it and turns every
+   * card into a toggle with its box showing; a tap then selects or deselects. A
+   * keyboard or screen reader enters through "Select rows" (`labels.selectRows`),
+   * visually hidden until focused; in the mode a bar above the cards holds "Select all
+   * rows" and Cancel (`labels.cancelSelection`). The mode lasts while anything is
+   * selected — the bulk bar's Clear, the last box unticked or Cancel ends it — and swipe
+   * actions rest while it is on. Render the owner's `BulkActionBar` as on desktop; it
+   * appears with the first selected row. With `selection` the cards' text is not
+   * selectable on a phone, and a linked card's long press selects instead of opening
+   * the browser's link menu.
    */
   selection?: {
     isSelectable?: (row: T) => boolean;
@@ -1189,6 +1216,30 @@ export function DataTable<T>({
     if (d !== mobileDir) setMobileDir(d);
   };
 
+  // `fillHeight` on a phone (0.40, keksdose live #420): the card list is a scroller only
+  // while its parent bounds it — its rows overflow the flex room it was given. Under
+  // AppShell's phone layout the DOCUMENT scrolls, the list's room is its own content,
+  // and a scroller there (with `overscroll-contain`) only swallowed the page's scroll.
+  // Measured before paint on every render (rows revealed, filtered, opened), and on a
+  // resize of the list or its parent; one read of two heights.
+  const phoneFill = fillHeight && !isMdUp;
+  const phoneListRef = useRef<HTMLUListElement | null>(null);
+  const [phoneListScrolls, setPhoneListScrolls] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- every render on purpose: what overflows is the rows, and React bails out on an unchanged boolean
+  useLayoutEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el) return;
+    setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1);
+  });
+  useEffect(() => {
+    const el = phoneListRef.current;
+    if (!phoneFill || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setPhoneListScrolls(el.scrollHeight > el.clientHeight + 1));
+    ro.observe(el);
+    if (el.parentElement) ro.observe(el.parentElement);
+    return () => ro.disconnect();
+  }, [phoneFill]);
+
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
     rows: sorted,
     slice,
@@ -1197,6 +1248,23 @@ export function DataTable<T>({
     unpaged,
     defaultPageSize,
   });
+  // ---- Phone selection mode (0.40, keksdose live #421) ----
+  // The cards had no boxes, so `selection`'s bulk actions were unreachable on a phone.
+  // A long press on a card (kk's register gesture) — or "Select rows", the keyboard's
+  // and screen reader's way — enters the mode: every card shows its box and a tap
+  // toggles it. The mode lasts while anything is selected, so emptying the selection
+  // (the bulk bar's Clear, the last box unticked, Cancel) leaves it, as kk's does.
+  const anySelected =
+    !!selection && (selection.someSelected || (selection.allSelected && slice.length > 0));
+  const [phoneSelectMode, setPhoneSelectMode] = useState(false);
+  const [hadSelection, setHadSelection] = useState(anySelected);
+  if (anySelected !== hadSelection) {
+    // Adjusted while rendering, so the frame the selection empties is already out of
+    // the mode (an effect would paint a frame of boxes first).
+    setHadSelection(anySelected);
+    if (!anySelected) setPhoneSelectMode(false);
+  }
+  const phoneSelecting = !!selection && !isMdUp && (phoneSelectMode || anySelected);
   // ---- Shift+click range selection ---- (data-table-selection.ts; feedback #289,
   // anchored on the row's KEY so a sort, filter or page change cannot move it)
   const { selectionAnchor, rangeClick, canSelect, selectRange } = useRangeSelection({
@@ -1268,6 +1336,24 @@ export function DataTable<T>({
       mobileExpandAsDialog={mobileExpandAsDialog}
       compact={compact}
       large={large}
+      select={
+        selection
+          ? {
+              active: phoneSelecting,
+              selectable: canSelect(row),
+              selected: selection.isSelected(row),
+              onToggle: (checked) => {
+                selectionAnchor.current = rowKey(row);
+                selection.onToggle(row, checked);
+              },
+              onLongPress: () => {
+                setPhoneSelectMode(true);
+                selectionAnchor.current = rowKey(row);
+                if (!selection.isSelected(row)) selection.onToggle(row, true);
+              },
+            }
+          : null
+      }
     />
   );
 
@@ -1299,13 +1385,19 @@ export function DataTable<T>({
       // classes and a table-cell tooltip must portal under test just as it does in the
       // browser (see `CLIPS_ATTRIBUTE`). The bare root clips nothing and is not marked.
       data-clips={frame ? "" : undefined}
+      // The fill's marker (0.40, docs/page-layout-harmonization.md §1.3): AppShell's
+      // `<main>` and every `FillHeight` between it and this table key off it with
+      // `has-[[data-fill-height]]`, so a page asks for the fill by passing the prop.
+      data-fill-height={fillHeight ? "" : undefined}
       className={cn(
         "group/table",
         frame ? "overflow-clip" : "min-w-0",
         // Both layouts, not just the table: the phone card list overflowing a bounded
         // pane drew itself over whatever followed it, and in a viewport-locked shell
-        // the rows below the fold could not be reached at all.
-        fillHeight && "flex flex-1 flex-col min-h-0",
+        // the rows below the fold could not be reached at all. From `md` the minimum is
+        // the content's again (`md:min-h-auto`): the body's floor below then holds the
+        // whole chain up to `<main>`, which scrolls instead of leaving a slit.
+        fillHeight && "flex flex-1 flex-col min-h-0 md:min-h-auto",
         className,
       )}
     >
@@ -1373,14 +1465,33 @@ export function DataTable<T>({
             }}
           />
         )}
+        {selection && (
+          <MobileSelectBar
+            active={phoneSelecting}
+            allSelected={selection.allSelected}
+            someSelected={selection.someSelected}
+            compact={compact}
+            labels={labels}
+            onEnter={() => setPhoneSelectMode(true)}
+            onToggleAll={selection.onToggleAll}
+            onCancel={() => {
+              setPhoneSelectMode(false);
+              if (anySelected) selection.onToggleAll(false);
+            }}
+          />
+        )}
         <ul
+          ref={phoneListRef}
           className={cn(
             "divide-y divide-subtle",
-            // Under `fillHeight` the list is the scroller, as the table body is on a
-            // wide screen: the filter button stays above it and a server pager below.
-            // The endless-scroll sentinel still fires in here — an
-            // IntersectionObserver on the viewport sees through the clipping ancestor.
-            fillHeight && "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+            // Under `fillHeight` the list takes the room its parent gives it, and in a
+            // BOUNDED parent it is the scroller, as the table body is on a wide screen:
+            // the filter button stays above it and a server pager below. Only then —
+            // see `phoneListScrolls` (live #420). The endless-scroll sentinel still
+            // fires in here — an IntersectionObserver on the viewport sees through the
+            // clipping ancestor.
+            fillHeight && "min-h-0 flex-1",
+            fillHeight && phoneListScrolls && "overflow-y-auto overscroll-contain",
             // Same busy treatment as the desktop body; see `isLoading` below.
             isLoading && mobileSlice.length > 0 && "opacity-60 transition-opacity",
           )}
@@ -1490,8 +1601,11 @@ export function DataTable<T>({
       </div>
       )}
       {isMdUp && (
-      <div className={cn("flex", fillHeight && "min-h-0 flex-1")}>
-        <div className={cn("relative min-w-0 flex-1", fillHeight && "flex flex-col min-h-0")}>
+      <div className={cn("flex", fillHeight && "flex-1")}>
+        {/* Under `fillHeight` neither wrapper is `min-h-0`: a flex item's automatic
+            minimum is its content's, and the content's height counts the body at its
+            basis (`basis-48`, below), not at its rows — so the floor carries up. */}
+        <div className={cn("relative min-w-0 flex-1", fillHeight && "flex flex-col")}>
           {/* scrollbar-gutter:stable reserves the vertical-scrollbar space up
               front. Expanding a row adds height, which can bring the scrollbar
               in, which narrows the content box — and in an `auto` table layout
@@ -1502,7 +1616,10 @@ export function DataTable<T>({
             ref={desktopScroller}
             // The scroller: marked for the Tooltip's auto-portal (see the root above).
             data-clips=""
-            className={cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "flex-1 min-h-0")}
+            // Under `fillHeight` the body grows into the room from a 12rem basis (0.40,
+            // §1.3): about five rows is its floor. A window too short for the page's
+            // header and that much body scrolls `<main>` instead (keksdose's review).
+            className={cn("overflow-auto [scrollbar-gutter:stable]", fillHeight && "min-h-0 grow basis-48")}
             // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing
             // while off. The height bound is merged over the mask, not replaced by it.
             {...edgeFadeProps}

package/src/components/inline-entity-combobox.tsx

@@ -14,6 +14,7 @@ import {
   ComboboxFieldLabel,
   DISABLED_ROW_CLASS,
   endHintRowProps,
+  GROUP_HEADING_STICKY,
   isOptionEnabled,
   offersCreate,
   stepEnabled,
@@ -310,13 +311,14 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
       const q = foldForSearch(query, locale);
       const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);
       // The label's whole name or its start first (`rankMatch` 0 and 1), then a match
-      // anywhere in the label, the sublabel or the group.
+      // anywhere in the label or the sublabel. Not the group (0.40, kk run 79): with
+      // first-letter groups one typed letter matched its whole group.
       const leads = (o: ComboOption<V>) => {
         const rank = rankMatch(o.label, query, { locale });
         return rank === 0 || rank === 1;
       };
       const starts = options.filter(leads);
-      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel) || hit(o.group)));
+      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel)));
       ranked = [...starts, ...rest];
     }
     if (!ranked.some((o) => o.group)) return ranked;
@@ -647,7 +649,10 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
                 {o.group && o.group !== matches[i - 1]?.group && (
                   <li
                     role="presentation"
-                    className="px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted"
+                    className={cn(
+                      GROUP_HEADING_STICKY,
+                      "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted",
+                    )}
                   >
                     {o.group}
                   </li>
@@ -710,7 +715,10 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
               {o.group && o.group !== matches[i - 1]?.group && (
                 <li
                   role="presentation"
-                  className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1"
+                  className={cn(
+                    GROUP_HEADING_STICKY,
+                    "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1",
+                  )}
                 >
                   {o.group}
                 </li>

package/src/components/picker-sheet.tsx

@@ -6,6 +6,7 @@ import { cn } from "../lib/cn";
 import { mergeRefs } from "./field-parts";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
+import { Button } from "./button";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useFocusTrap } from "../hooks/use-focus-trap";
@@ -46,6 +47,23 @@ export interface PickerSheetProps
   /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */
   activeId?: string;
   children: ReactNode;
+  /**
+   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the
+   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long
+   * the list; padded for the home indicator, since it is the sheet's bottom edge.
+   */
+  footer?: ReactNode;
+  /**
+   * The kit's one sticky "Done" at the foot of the sheet (Marcel, keksdose #412): the
+   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as
+   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.
+   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and
+   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that
+   * picks, has no use for it. Label: `pickerSheet.done`, else "Done" (`doneLabel`).
+   */
+  done?: boolean;
+  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else "Done". */
+  doneLabel?: string;
   /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
    *  merged with the sheet's own ref, which its focus trap holds. */
   ref?: Ref<HTMLDivElement>;
@@ -88,6 +106,9 @@ export function PickerSheet({
   listboxId,
   activeId,
   children,
+  footer,
+  done,
+  doneLabel,
   "aria-label": ariaLabel,
   className,
   style,
@@ -98,7 +119,8 @@ export function PickerSheet({
   // their own `closeLabel` through as `undefined` — so this lookup is what makes the
   // one way out of a full-screen sheet speak the app's language without each of
   // them having to (see the prop's note in `EntityCombobox`).
-  const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel });
+  const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });
+  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);
   useBodyScrollLock(open);
   /**
    * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:
@@ -276,6 +298,21 @@ export function PickerSheet({
       <div {...{ [CLIPS_ATTRIBUTE]: "" }} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
         {children}
       </div>
+      {hasFooter && (
+        <div
+          data-picker-sheet-footer=""
+          className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3"
+          style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}
+        >
+          {footer}
+          {done && (
+            // Full width: the one thing left to do on the sheet, under the thumb.
+            <Button type="button" className="flex-1" onClick={onClose}>
+              {labels.done}
+            </Button>
+          )}
+        </div>
+      )}
     </div>,
     document.body,
   );

package/src/components/tabs.tsx

@@ -1,11 +1,12 @@
 import { useLayoutEffect, useMemo, useRef } from "react";
-import { Plus, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING_WIDTH } from "./focus-ring";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { horizontalStep } from "../lib/direction";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
+import { prefersReducedMotion } from "../lib/reduced-motion";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { mergeRefs } from "./field-parts";
 import { DEFAULT_TABS_LABELS } from "./ui-labels";
@@ -47,6 +48,10 @@ export interface TabsLabels {
   add: string;
   /** Accessible name of a tab's × — "Remove <tab>". */
   remove: (tab: string) => string;
+  /** The `overflowCue` caret while tabs lie past the strip's end: "More tabs". */
+  more: string;
+  /** The `overflowCue` caret at the strip's end, which goes back to the first tab. */
+  backToFirst: string;
 }
 
 // Defined in ./ui-labels, which holds no component code (0.34, KS U8).
@@ -94,8 +99,28 @@ export interface TabsProps<T extends string>
    *
    *  Opt-in on purpose. The three-tab strips (invoices, statements, bank imports)
    *  already fit a phone row, and turning those into chips would be an unrequested
-   *  redesign of three other pages. */
+   *  redesign of three other pages.
+   *
+   *  @deprecated 0.40 — use the scrolling strip with `overflowCue`; removed in 0.41. No
+   *  consumer is left (keksdose went back to one scrolling row, live #410); the caret
+   *  says a phone's row goes on. */
   wrap?: boolean;
+  /**
+   * The caret beside a SCROLLING strip below `md` (0.40, kk run 79 gap 1): a › while
+   * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —
+   * turning into a ‹ at the end, which goes back to the first. Shown only while the strip
+   * actually overflows.
+   *
+   * The edge fade alone could read as the end of the row: at the default scroll position
+   * the last visible tab can finish exactly where the fade begins, so nothing looks cut
+   * off (keksdose live #410, whose `tab-strip-more.tsx` this replaces). One button that
+   * turns round rather than two that come and go, so the strip's width never changes
+   * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow
+   * keys, which bring the focused tab into view. From `md` up nothing changes. Ignored on
+   * a `wrap` strip and a vertical one (a side nav is a column, not a row). Names:
+   * `tabs.more` / `tabs.backToFirst`.
+   */
+  overflowCue?: boolean;
   /**
    * `id` of the element the caller renders the open tab's content into — the missing
    * half of `role="tab"`. A tab that controls nothing is a tab in name only: a screen
@@ -266,6 +291,7 @@ export function Tabs<T extends string>({
   onChange,
   className,
   wrap = false,
+  overflowCue = false,
   panelId,
   onRemove,
   removeOn = "every",
@@ -285,6 +311,36 @@ export function Tabs<T extends string>({
   const stripRef = useRef<HTMLDivElement>(null);
   const setStrip = useMemo(() => mergeRefs(stripRef, ref), [ref]);
   const fade = useStripFade(stripRef);
+  // See `overflowCue`. `start` alone means the strip is scrolled to its end.
+  const cue = overflowCue && !wrap && !vertical && fade.overflow !== undefined;
+  const cueAtEnd = fade.overflow === "start";
+  const onCue = () => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const behavior: ScrollBehavior = prefersReducedMotion() ? "auto" : "smooth";
+    if (cueAtEnd) {
+      strip.scrollTo({ left: 0, behavior });
+      return;
+    }
+    const rtl = getComputedStyle(strip).direction === "rtl";
+    strip.scrollBy({ left: (rtl ? -1 : 1) * Math.round(strip.clientWidth * 0.75), behavior });
+  };
+  const cueButton = cue ? (
+    // The strip's bottom rule continues under the caret, so the row reads as one.
+    <div data-tabs-overflow-cue="" className="flex shrink-0 items-center self-stretch border-b border-subtle md:hidden">
+      <IconButton
+        size="sm"
+        variant="ghost"
+        tone="muted"
+        tabIndex={-1}
+        type="button"
+        aria-label={cueAtEnd ? text.backToFirst : text.more}
+        onClick={onCue}
+      >
+        {cueAtEnd ? <ChevronLeft className="rtl:-scale-x-100" /> : <ChevronRight className="rtl:-scale-x-100" />}
+      </IconButton>
+    </div>
+  ) : null;
   // The OPEN tab is scrolled into the strip whenever it changes — on mount too, for a
   // deep link to the seventh report. A selection behind the cut edge was the worst
   // case of the overflow above: the one tab the panel below belongs to, sliced to
@@ -410,7 +466,7 @@ export function Tabs<T extends string>({
       // — it is the box a caller's margin or width is meant for.
       className={cn(
         vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
-        onAdd ? "min-w-0" : className,
+        onAdd ? "min-w-0" : overflowCue && !wrap && !vertical ? "min-w-0 flex-1" : className,
       )}
     >
       {tabs.map((tab) => {
@@ -598,6 +654,19 @@ export function Tabs<T extends string>({
         {text.remove(nameOf(activeTab))}
       </button>
     ) : null;
+  if (!onAdd && overflowCue && !wrap && !vertical) {
+    // The caret needs a row to sit in beside the strip, and `className` goes there — it
+    // is the box a caller's margin or width is meant for, as with an add button. The box
+    // is there whether or not the strip overflows right now, so a resize never moves
+    // the caller's class from one element to another.
+    return (
+      <div className={cn("flex items-end", className)}>
+        {tablist}
+        {removeButton}
+        {cueButton}
+      </div>
+    );
+  }
   if (!onAdd) {
     // No outer box: the strip stays the root, as callers' `className` and tests expect.
     return removeButton ? (
@@ -631,6 +700,7 @@ export function Tabs<T extends string>({
     >
       {tablist}
       {removeButton}
+      {cueButton}
       {/* Outside the tablist: an action, not a tab — and a tablist may own only
           tabs. The rule under the strip carries on beneath it. */}
       <div

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

@@ -169,7 +169,8 @@ export interface TranslationLocaleTabsProps {
 }
 
 /**
- * One tab per locale with its approved/total, wrapping on a phone. Nothing for a single
+ * One tab per locale with its approved/total, one scrolling row on a phone with the
+ * strip's caret saying it goes on (`overflowCue`; `wrap` is deprecated in 0.40). Nothing for a single
  * locale: a strip with one tab is a heading that looks clickable.
  */
 export function TranslationLocaleTabs({ locales, active, onChange, className, labels: labelsProp }: TranslationLocaleTabsProps) {
@@ -178,7 +179,7 @@ export function TranslationLocaleTabs({ locales, active, onChange, className, la
   return (
     <Tabs
       aria-label={labels.locales}
-      wrap
+      overflowCue
       className={className}
       tabs={locales.map((locale) => {
         const summary = summariseRows(locale.rows);

package/src/components/ui-labels.ts

@@ -19,4 +19,6 @@ export const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {
 export const DEFAULT_TABS_LABELS: TabsLabels = {
   add: "Add tab",
   remove: (tab) => `Remove ${tab}`,
+  more: "More tabs",
+  backToFirst: "Back to the first tab",
 };

package/src/feedback/feedback-comment-thread.tsx

@@ -8,9 +8,10 @@ import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { FeedbackStatusBadge } from "./feedback-inbox";
 import type { FeedbackComment, FeedbackReply } from "./feedback-public-types";
 import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
-import { FEEDBACK_COMMENT_MAX } from "./feedback-record";
+import { FEEDBACK_COMMENT_MAX, attachmentName } from "./feedback-record";
 import { useFeedbackRepliesLabels } from "./feedback-replies";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
+import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
 import { ChatComposer, FeedbackThread } from "./feedback-thread";
 import type { FeedbackThreadMessage } from "./feedback-thread";
 import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
@@ -23,6 +24,10 @@ import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels
  *
  * - **Replies** are drawn as staff posts with the status they set ("→ Done"); a reply
  *   without an author is "Admin" (§9.7).
+ * - **Reworks** (0.40, §10.3, `kind: "rework"`) are the report's author's: the
+ *   **Rework** chip, "→ status" when the entry moved one (a migrated one did not), the
+ *   file when the view carries it; at the reading end for the author ({@link
+ *   FeedbackCommentThreadProps.isAuthor}), and a `null` name is "A user", never "Admin".
  * - **Comments**: the viewer's own at the reading end ("You"); someone else's under the
  *   first name the server sent, `null` as "A user" (§9.5, `feedbackPublic.anonymous`).
  * - **Hidden** (§9.8): others see "Hidden by an admin" and no name, no text; the writer
@@ -81,6 +86,9 @@ export interface FeedbackCommentThreadProps {
   comments: readonly FeedbackComment[];
   /** The viewer is the app's admin: Hide / Unhide, the hidden text struck through. */
   isAdmin: boolean;
+  /** 0.40: the viewer filed the report (the record's `mine`) — its rework entries are
+   *  theirs, drawn at the reading end as "You". Default `false`. */
+  isAuthor?: boolean;
   /** `POST /feedback/{id}/comments`. Return the promise: the box clears when it
    *  resolves, and keeps the draft when it rejects. A failure is the app's to toast —
    *  the server's `detail`, else `feedbackToast.commentFailed` (0.38.1). Left out, no
@@ -125,6 +133,7 @@ export function FeedbackCommentThread({
   replies: repliesProp = [],
   comments,
   isAdmin,
+  isAuthor = false,
   onComment,
   onHide,
   onDelete,
@@ -143,6 +152,35 @@ export function FeedbackCommentThread({
 
   const entries: Entry[] = [];
   replies.forEach((reply, order) => {
+    if (reply.kind === "rework") {
+      entries.push({
+        at: instant(reply.created_at),
+        order,
+        message: {
+          id: `reply-${reply.id}`,
+          own: isAuthor,
+          author: isAuthor ? undefined : (reply.author_name ?? anonymous),
+          createdAt: reply.created_at,
+          body: reply.body,
+          attachments: reply.attachment_url
+            ? [{ name: attachmentName(reply.attachment_url), url: reply.attachment_url }]
+            : undefined,
+          badge: (
+            <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-entry-kind="rework">
+              <FeedbackReworkEntryChip />
+              {reply.status_to && (
+                <span className="inline-flex items-center gap-1" data-feedback-reply-status={reply.status_to}>
+                  <span className="sr-only">{replyLabels.statusChanged}</span>
+                  <span aria-hidden>→</span>
+                  <FeedbackStatusBadge status={reply.status_to} />
+                </span>
+              )}
+            </span>
+          ),
+        },
+      });
+      return;
+    }
     entries.push({
       at: instant(reply.created_at),
       order,

package/src/feedback/feedback-labels.ts

@@ -24,7 +24,8 @@ import type { FeedbackCategory, FeedbackStatus } from "./feedback-vocabulary";
  * `feedbackStatus` — one word per status, keyed by the enum value so
  * `labels[row.status]` is the whole lookup.
  *
- * de-CH canon: OPEN "Offen" · READY "Bereit zur Umsetzung" · IN_PROGRESS "In Bearbeitung" · IN_EVALUATION "Zur Prüfung"
+ * de-CH canon: OPEN "Offen" · READY "Bereit zur Umsetzung" · REWORK "Nacharbeit angefordert"
+ * (0.40, §10.6) · IN_PROGRESS "In Bearbeitung" · IN_EVALUATION "Zur Prüfung"
  * · NEEDS_LIVE_TEST "Live testen" · POSTPONED "Zurückgestellt" · DONE "Erledigt" ·
  * WONT_DO "Wird nicht umgesetzt".
  */
@@ -33,6 +34,7 @@ export type FeedbackStatusLabels = Record<FeedbackStatus, string>;
 export const DEFAULT_FEEDBACK_STATUS_LABELS: FeedbackStatusLabels = {
   OPEN: "Open",
   READY: "Ready to implement",
+  REWORK: "Rework requested",
   IN_PROGRESS: "In progress",
   IN_EVALUATION: "In evaluation",
   NEEDS_LIVE_TEST: "Test when live",

package/src/feedback/feedback-menu-labels.ts

@@ -9,4 +9,6 @@ export const DEFAULT_FEEDBACK_MENU_LABELS: FeedbackMenuLabels = {
   myFeedback: "My feedback",
   viewFeedback: "View feedback",
   allFeedback: "All feedback",
+  discussion: "Feedback discussion",
+  inbox: "Feedback inbox",
 };