@eifi1/ui-kit 0.46.0 → 0.47.0

package/src/components/data-table.tsx

@@ -609,6 +609,14 @@ export interface DataTableProps<T> {
    * `mobileSwipeActions` wins over the swipes derived from here.
    */
   rowActions?: DataTableRowAction<T>[] | ((row: T) => DataTableRowAction<T>[]);
+  /**
+   * The `rowActions` column's heading (0.46.1, keksdose dev#598 rework — Marcel: a
+   * VISIBLE "Actions" heading on every table with an actions column). Default: the
+   * provider's `dataTable.actions` ("Actions"), shown, end-aligned over the buttons. A
+   * node replaces it; `false` keeps the pre-0.46.1 heading, named for a screen reader
+   * only.
+   */
+  rowActionsHeader?: ReactNode | false;
   /**
    * The bar above the table — a search field, filter chips, a create button. Inside
    * the table's frame, above the header, on desktop and phone alike (resource-list
@@ -703,6 +711,13 @@ export interface DataTableDesktopSwipeActions<T> {
    * no commit scope (the plan decides).
    */
   commit?: CommitScope | ((action: SwipeAction, row: T) => CommitScope | undefined);
+  /**
+   * The column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE "Actions"
+   * heading on every table with an actions column). Default: the provider's
+   * `dataTable.actions` ("Actions"), shown, end-aligned over the buttons. A node
+   * replaces it; `false` keeps the 0.46.0 heading, named for a screen reader only.
+   */
+  header?: ReactNode | false;
 }
 
 /**
@@ -828,6 +843,7 @@ export function DataTable<T>({
   edgeFade = false,
   className,
   rowActions,
+  rowActionsHeader,
   toolbar,
   footerLabel,
   footer: footerProp,
@@ -860,6 +876,7 @@ export function DataTable<T>({
   const { columns, swipesFromActions } = useRowActionColumn({
     columns: columnsProp,
     rowActions,
+    rowActionsHeader,
     rowName,
     labels,
     density,
@@ -1196,6 +1213,17 @@ export function DataTable<T>({
   const isMdUp = !usePhoneLayout();
   // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
   const desktopScroller = useRef<HTMLDivElement | null>(null);
+  // 0.47 (keksdose S4): the scroller's visible width, as `--dt-visible-w` on it, for the
+  // expansion row's pinned content (below). Set on the element, not in state: a resize
+  // re-renders nothing. Only a table that can expand a row measures.
+  const measuresVisibleWidth = isMdUp && !!expandedRow;
+  useEffect(() => {
+    const el = desktopScroller.current;
+    if (!measuresVisibleWidth || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => el.style.setProperty("--dt-visible-w", `${el.clientWidth}px`));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
 
   // ---- Mobile card list (md:hidden) ----
@@ -1909,10 +1937,25 @@ export function DataTable<T>({
                           content in `w-0 min-w-full` pins the cell's preferred
                           width to ~0 (the explicit width:0 child), so it can never
                           perturb the columns; the div then fills to the full row
-                          width only at paint time, and long text wraps within it. */}
+                          width only at paint time, and long text wraps within it.
+                          Inside it the content is pinned to what the scroller SHOWS
+                          (0.47, keksdose S4): on a table wider than its scroller a
+                          table-wide panel put an inline editor's Save/Cancel off-screen.
+                          `sticky start-0` holds it at the scroller's start edge (the
+                          right one in RTL) as the row scrolls sideways, and
+                          `--dt-visible-w` (the scroller's clientWidth, measured above)
+                          sizes it; before the first measure, and in a table no wider
+                          than its scroller, it is the full width as before. */}
                       <td colSpan={totalColSpan} className="p-0">
-                        <div className={cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3")}>
-                          {expansion}
+                        <div className="w-0 min-w-full">
+                          <div
+                            className={cn(
+                              "sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full",
+                              compact ? "px-2 py-2" : "px-3 py-3",
+                            )}
+                          >
+                            {expansion}
+                          </div>
                         </div>
                       </td>
                     </tr>

package/src/components/row-actions.tsx

@@ -13,6 +13,7 @@ import { useCommitReason, type CommitScope } from "./write-lock";
 import type { IconButtonGlyphSize, IconButtonSize } from "./icon-button";
 import type { TooltipSide } from "./tooltip";
 import type { DataTableColumn } from "./data-table";
+import { TableHeaderCell, type TableHeaderCellProps } from "./table";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "./row-actions-labels";
 
 /**
@@ -522,10 +523,57 @@ function InlineAction({
   );
 }
 
-/** The actions column's hidden header, in the provider's words. */
-function RowActionsHeader({ text, labels }: { text?: string; labels?: LabelOverride<RowActionsLabels> }) {
+/** The actions column's heading, in the provider's words: on screen since 0.46.1 (keksdose
+ *  dev#598 rework), a screen reader's name only with `hidden`. */
+function RowActionsHeader({
+  text,
+  labels,
+  hidden,
+}: {
+  text?: string;
+  labels?: LabelOverride<RowActionsLabels>;
+  hidden?: boolean;
+}) {
   const resolved = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labels);
-  return <span className="sr-only">{text ?? resolved.actions}</span>;
+  const word = text ?? resolved.actions;
+  return hidden ? <span className="sr-only">{word}</span> : <>{word}</>;
+}
+
+/** The actions cell's classes — `rowActionsColumn`'s `className`: the column hugs its
+ *  buttons, on one line, at the row's end. A hand-built table's `<TableCell>` takes them
+ *  around its {@link RowActions} (0.47, keksdose N17). */
+export const ROW_ACTIONS_CELL_CLASS = "w-px whitespace-nowrap text-end";
+/** The actions heading's classes — `rowActionsColumn`'s `headClassName`, which
+ *  {@link RowActionsHead} draws: hugging, end-aligned over the buttons (0.47, N17). */
+export const ROW_ACTIONS_HEAD_CLASS = "w-px text-end";
+
+export interface RowActionsHeadProps extends Omit<TableHeaderCellProps, "children"> {
+  /** The heading. Default: the provider's `rowActions.actions` ("Actions"). */
+  children?: ReactNode;
+  /** Named for a screen reader only — `rowActionsColumn`'s `header: false`. */
+  hideLabel?: boolean;
+  labels?: LabelOverride<RowActionsLabels>;
+}
+
+/**
+ * A hand-built table's actions heading (0.47, keksdose N17): the `<th>` `rowActionsColumn`
+ * gives a DataTable — "Actions" on screen in the provider's words, end-aligned over the
+ * buttons, hugging them. Pair it with `<TableCell className={ROW_ACTIONS_CELL_CLASS}>`
+ * around each row's {@link RowActions}. Every other `TableHeaderCell` prop passes on
+ * (`size`, the app's `className`, merged last).
+ *
+ *     <RowActionsHead size="sm" className={TH} />
+ */
+export function RowActionsHead({ children, hideLabel, labels, className, ...rest }: RowActionsHeadProps) {
+  return (
+    <TableHeaderCell align="end" {...rest} className={cn(ROW_ACTIONS_HEAD_CLASS, className)}>
+      {typeof children === "string" || children == null ? (
+        <RowActionsHeader text={children ?? undefined} labels={labels} hidden={hideLabel} />
+      ) : (
+        children
+      )}
+    </TableHeaderCell>
+  );
 }
 
 export interface RowActionsColumnOptions<T> {
@@ -546,10 +594,17 @@ export interface RowActionsColumnOptions<T> {
   /**
    * The column's name as plain text — the column-settings checklist and the phone
    * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left
-   * out, the header shows the provider's `rowActions.actions` to a screen reader and
-   * the plain-text places fall back to the column's `key`.
+   * out, the heading shows the provider's `rowActions.actions` and the plain-text
+   * places fall back to the column's `key`.
    */
   headerText?: string;
+  /**
+   * The heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE "Actions" heading on
+   * every table with an actions column). Default: `headerText`, else the provider's
+   * `rowActions.actions` ("Actions"), shown, end-aligned over the buttons. A node
+   * replaces it; `false` keeps the pre-0.46.1 heading, named for a screen reader only.
+   */
+  header?: ReactNode | false;
   labels?: LabelOverride<RowActionsLabels>;
   /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */
   column?: Partial<DataTableColumn<T>>;
@@ -561,8 +616,8 @@ export interface RowActionsColumnOptions<T> {
  *
  *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}
  *
- * The header is visually hidden (the icons say what the column is), the column hugs its
- * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the
+ * The heading says "Actions" on screen (0.46.1; `header` changes or hides it), the
+ * column hugs its content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the
  * buttons keep their own clicks. On a phone it is a line of the card like any column;
  * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it
  * then shows in the opened row instead).
@@ -576,12 +631,18 @@ export function rowActionsColumn<T>({
   glyphSize,
   tooltipSide,
   headerText,
+  header,
   labels,
   column,
 }: RowActionsColumnOptions<T>): DataTableColumn<T> {
   return {
     key,
-    header: <RowActionsHeader text={headerText} labels={labels} />,
+    header:
+      header === false || header == null ? (
+        <RowActionsHeader text={headerText} labels={labels} hidden={header === false} />
+      ) : (
+        header
+      ),
     headerText,
     cell: (row) => (
       <RowActions
@@ -594,8 +655,10 @@ export function rowActionsColumn<T>({
         labels={labels}
       />
     ),
-    className: "w-px whitespace-nowrap text-end",
-    headClassName: "w-px",
+    className: ROW_ACTIONS_CELL_CLASS,
+    // The heading over the buttons, at the row's end (0.46.1); a hand-built table's
+    // `RowActionsHead` (0.47).
+    headClassName: ROW_ACTIONS_HEAD_CLASS,
     noRowLink: true,
     ...column,
   };

package/src/components/tabs.tsx

@@ -48,10 +48,16 @@ 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". */
+  /** The `overflowCue` › over the strip's end, while tabs lie past it: "More tabs". */
   more: string;
-  /** The `overflowCue` caret at the strip's end, which goes back to the first tab. */
-  backToFirst: string;
+  /** The `overflowCue` ‹ over the strip's start, while tabs lie before it: "Previous tabs". */
+  previous: string;
+  /**
+   * @deprecated 0.47: not drawn any more — the caret that turned into "back to the
+   * first tab" at the strip's end is now a ‹ of its own (`previous`). Accepted and
+   * ignored; removed in 0.48.
+   */
+  backToFirst?: string;
 }
 
 // Defined in ./ui-labels, which holds no component code (0.34, KS U8).
@@ -78,20 +84,22 @@ export interface TabsProps<T extends string>
   onChange: (id: T) => void;
   className?: string;
   /**
-   * The caret beside a SCROLLING strip (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.
+   * Carets over the ends of a SCROLLING strip (0.40, kk run 79 gap 1; 0.47, keksdose
+   * live #410 round 4): a › over the strip's end while tabs lie past it, and a ‹ over
+   * its start while tabs lie before it — each there only while something is hidden
+   * past ITS edge (1 px slack, so a few cut-off pixels count), each a step of three
+   * quarters of the strip's width toward its own side. Neither ever changes direction:
+   * until 0.46 one caret turned round into "back to the first" at the end, and read as
+   * an arrow pointing the wrong way. Start and end follow the reading direction.
    *
-   * 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. At every width since 0.46 (keksdose live
-   * #410 round 3: eleven report tabs overflow a laptop too); before, `md:hidden`. Ignored on
-   * a vertical strip (a side nav is a column, not a row). Names:
-   * `tabs.more` / `tabs.backToFirst`.
+   * The edge fade alone could read as the end of the row: the last visible tab can
+   * finish exactly where the fade begins, so nothing looks cut off (keksdose live #410).
+   * The carets sit OVER the strip's ends (positioned, on the page's surface), not beside
+   * it, so the strip's width never changes as they come and go. Out of the tab order —
+   * the keyboard walks the strip with the arrow keys, which bring the focused tab into
+   * view. At every width. Ignored on a vertical strip (a side nav is a column, not a
+   * row). Names: `tabs.more` / `tabs.previous`. keksdose's `scroll-edge-cues.tsx` is
+   * the reference this replaces.
    */
   overflowCue?: boolean;
   /**
@@ -254,36 +262,43 @@ 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 && !vertical && fade.overflow !== undefined;
-  const cueAtEnd = fade.overflow === "start";
-  const onCue = () => {
+  // See `overflowCue`: a ‹ over the start while tabs lie before it, a › over the end
+  // while tabs lie past it — `fade.overflow` names the cut ends in reading-direction terms.
+  const cue = overflowCue && !vertical;
+  const cueStart = cue && (fade.overflow === "start" || fade.overflow === "both");
+  const cueEnd = cue && (fade.overflow === "end" || fade.overflow === "both");
+  // Three quarters of the visible width toward `side`; an RTL strip runs leftward.
+  const onCue = (side: "start" | "end") => {
     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 toward = (side === "end" ? 1 : -1) * (rtl ? -1 : 1);
+    strip.scrollBy({ left: toward * 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">
+  // OVER the strip's end, on the page's surface, so the caret reads as a control and not
+  // as one more faded tab — and so it can come and go without the strip changing width
+  // under the thumb. The position sits on a wrapper of ours: IconButton puts its
+  // tooltip's span around the button, and a class on the button would land inside it.
+  const cueAt = (side: "start" | "end") => (
+    <div
+      data-tabs-overflow-cue={side}
+      className={cn("absolute top-1/2 z-10 flex -translate-y-1/2", side === "start" ? "start-0" : "end-0")}
+    >
       <IconButton
         size="sm"
-        variant="ghost"
-        tone="muted"
+        variant="secondary"
+        className="bg-surface shadow-sm"
         tabIndex={-1}
         type="button"
-        aria-label={cueAtEnd ? text.backToFirst : text.more}
-        onClick={onCue}
+        label={side === "start" ? text.previous : text.more}
+        labelVisible={false}
+        onClick={() => onCue(side)}
       >
-        {cueAtEnd ? <ChevronLeft className="rtl:-scale-x-100" /> : <ChevronRight className="rtl:-scale-x-100" />}
+        {side === "start" ? <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
@@ -407,7 +422,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 : TABLIST_CLASSES,
-        onAdd ? "min-w-0" : overflowCue && !vertical ? "min-w-0 flex-1" : className,
+        cue ? "min-w-0 flex-1" : onAdd ? "min-w-0" : className,
       )}
     >
       {tabs.map((tab) => {
@@ -575,16 +590,24 @@ export function Tabs<T extends string>({
         {text.remove(nameOf(activeTab))}
       </button>
     ) : null;
-  if (!onAdd && overflowCue && !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.
+  // The positioned box the carets sit in, over the strip's two ends (see `overflowCue`).
+  // There whether or not the strip overflows right now, so a resize never re-parents it.
+  const stripBox = cue ? (
+    <div className={cn("relative flex min-w-0", !onAdd && "flex-1")}>
+      {tablist}
+      {cueStart && cueAt("start")}
+      {cueEnd && cueAt("end")}
+    </div>
+  ) : (
+    tablist
+  );
+  if (!onAdd && cue) {
+    // `className` goes on the row around the strip — it is the box a caller's margin or
+    // width is meant for, as with an add button — and stays there at every scroll position.
     return (
       <div className={cn("flex items-end", className)}>
-        {tablist}
+        {stripBox}
         {removeButton}
-        {cueButton}
       </div>
     );
   }
@@ -614,9 +637,8 @@ export function Tabs<T extends string>({
   }
   return (
     <div className={cn("flex items-end", className)}>
-      {tablist}
+      {stripBox}
       {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.tsx

@@ -838,7 +838,9 @@ export function TranslationReviewPanel({
   } else if (editable) {
     columns.push({
       key: "approve",
-      header: <span className="sr-only">{labels.approve}</span>,
+      // On screen, as every actions column's heading is (0.46.1, keksdose dev#598 rework).
+      header: rowActionLabels.actions,
+      headerText: rowActionLabels.actions,
       cell: (r) =>
         r.status === "approved" || r.text === "" ? null : (
           <IconButton

package/src/components/ui-labels.ts

@@ -20,5 +20,5 @@ export const DEFAULT_TABS_LABELS: TabsLabels = {
   add: "Add tab",
   remove: (tab) => `Remove ${tab}`,
   more: "More tabs",
-  backToFirst: "Back to the first tab",
+  previous: "Previous tabs",
 };

package/src/data-table.ts

@@ -27,6 +27,9 @@ export type {
   DataTableRowAction,
   DataTableDesktopSwipeActions,
 } from "./components/data-table";
+// 0.46.1 (keksdose N3): a swipe plan as `RowActions`' actions — the desktop column's own
+// derivation, for an app's hand-built actions column.
+export { swipePlanRowActions } from "./components/data-table-row-actions";
 export * from "./components/data-table-cells";
 export { useTableUrlState, readTableUrlState } from "./components/use-table-state";
 export type {

package/src/feedback/feedback-attachment-download.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import type { MouseEvent } from "react";
+import { Download, FileText } from "lucide-react";
+import { Button } from "../components/button";
+import { toast } from "../components/toast";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
+import { useKitLabels } from "../i18n/kit-labels";
+import { filenameFromDisposition, saveBlob } from "../lib/download";
+import { attachmentName } from "./feedback-record";
+import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
+
+// Internal (not in the `./feedback` entry): the row detail's download button and its
+// plain fetch, shared since 0.47 with ./feedback-entry-file's inline entry files.
+
+/** The bytes behind a fetcher's answer — a `Blob` as it is, a `Response` checked. */
+async function toBlob(answer: Blob | Response): Promise<Blob> {
+  if (typeof Response !== "undefined" && answer instanceof Response) {
+    if (!answer.ok) throw new Error(`HTTP ${answer.status}`);
+    return answer.blob();
+  }
+  return answer as Blob;
+}
+
+/** No fetcher: the browser's own `fetch`, with the cookies a same-origin app uses. */
+export const plainFeedbackFetch: AuthedFetcher = (url, { signal }) =>
+  fetch(url, { signal, credentials: "same-origin" });
+
+/**
+ * A PDF or a text log (keksdose `FeedbackFileDownload`, dev #578): the bytes sit behind
+ * an authenticated route that serves them as `attachment`, never inline (§3.5), so a
+ * plain link would be a 401 the moment it was opened. Fetched through the app's
+ * fetcher and saved with {@link saveBlob}; a failure says so in a toast.
+ *
+ * Saved under the name the server gives it when the fetcher answers with a `Response`
+ * (server-kit's `content_disposition` puts the uploader's own name in `filename*`), and
+ * under the URL's last segment — the name on the button — when it answers with a bare
+ * `Blob`, which has no headers to ask. Words: `feedbackDetail.download` /
+ * `downloadFailed`.
+ */
+export function FeedbackAttachmentDownload({ url, fetcher }: { url: string; fetcher: AuthedFetcher }) {
+  const labels = useKitLabels("feedbackDetail", DEFAULT_FEEDBACK_DETAIL_LABELS);
+  const [busy, setBusy] = useState(false);
+  const name = attachmentName(url);
+  const download = async (event: MouseEvent) => {
+    // The row around the detail may toggle on a click.
+    event.stopPropagation();
+    setBusy(true);
+    try {
+      const answer = await fetcher(url, { signal: new AbortController().signal });
+      const blob = await toBlob(answer);
+      const saveAs =
+        typeof Response !== "undefined" && answer instanceof Response
+          ? filenameFromDisposition(answer.headers.get("Content-Disposition"), name)
+          : name;
+      saveBlob(blob, saveAs);
+    } catch {
+      toast.error(labels.downloadFailed);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Button
+      type="button"
+      variant="secondary"
+      size="sm"
+      pending={busy}
+      onClick={(event) => void download(event)}
+      aria-label={labels.download(name)}
+      className="max-w-full"
+    >
+      <FileText className="size-3.5 shrink-0" aria-hidden />
+      <span className="min-w-0 max-w-[14rem] truncate-until-large">{name}</span>
+      <Download className="size-3.5 shrink-0" aria-hidden />
+    </Button>
+  );
+}

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

@@ -4,11 +4,13 @@ import { EyeOff } from "lucide-react";
 import { Button } from "../components/button";
 import { useConfirm } from "../components/confirm-dialog";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 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, attachmentName } from "./feedback-record";
+import { FeedbackEntryFile, useFeedbackEntryUpload, type FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { useFeedbackRepliesLabels } from "./feedback-replies";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
@@ -34,8 +36,13 @@ import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels
  *   sees their text with that line; the admin sees it struck through, with **Unhide**.
  *   An admin has **Hide** on every visible comment; the writer **Delete** on their own,
  *   after a confirm (it is a hard delete). Nobody edits a comment.
- * - **The composer** (1–4 000 characters, no files) only with `onComment`: left out for
- *   a reader who may not write (a demo, a CRASH report — the app knows).
+ * - **The composer** (1–4 000 characters) only with `onComment`: left out for a reader
+ *   who may not write (a demo, a CRASH report — the app knows). Since 0.47 (§12) with
+ *   `onUpload` it takes one file as the rework note does — pasted into the box,
+ *   captured or picked — uploaded first, its URL `onComment`'s second argument.
+ * - **Files** (0.47, §12): a comment's or an entry's file under its text, a picture
+ *   INLINE — a thumbnail through `fetcher` that opens full size — any other file a
+ *   download ({@link FeedbackEntryFile}). A veiled comment shows none.
  *
  * Delete asks through `useConfirm`, so a thread with `onDelete` and a comment of the
  * viewer's needs the app's `ConfirmProvider` (each app mounts one already).
@@ -75,7 +82,7 @@ export { DEFAULT_FEEDBACK_COMMENTS_LABELS };
 
 /* ── The thread ───────────────────────────────────────────────────────────── */
 
-export interface FeedbackCommentThreadProps {
+export interface FeedbackCommentThreadProps extends FeedbackEntryUploadOptions {
   /** The report's replies (§9.7), oldest first. Left out or `[]`: none.
    *
    *  Inside `FeedbackRowDetail`'s `comments` they are dropped (0.38.1): the detail's
@@ -92,8 +99,12 @@ export interface FeedbackCommentThreadProps {
   /** `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
-   *  composer. */
-  onComment?: (body: string) => void | Promise<unknown>;
+   *  composer. 0.47 (§12): `attachmentUrl` is the one file uploaded with it (with
+   *  `onUpload`), `undefined` for none — `attachment_url` in the body (server-kit 0.18). */
+  onComment?: (body: string, attachmentUrl?: string) => void | Promise<unknown>;
+  /** 0.47: the app's authenticated GET (`AuthedImage`'s) for the files in the thread.
+   *  Left out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
   /** `PATCH /feedback/{id}/comments/{comment_id} {hidden}` — the admin's. A rejection
    *  is caught (0.38.1) and is the app's to toast (`feedbackToast.updateFailed`). Left
    *  out, no Hide / Unhide. */
@@ -141,9 +152,18 @@ export function FeedbackCommentThread({
   loading = false,
   commit,
   now,
+  fetcher,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
   labels: labelsProp,
   className,
 }: FeedbackCommentThreadProps) {
+  const { composerAttachment, upload, uploading } = useFeedbackEntryUpload({
+    onUpload,
+    onCaptureScreenshot,
+    attachment,
+  });
   const labels = useKitLabels("feedbackComments", DEFAULT_FEEDBACK_COMMENTS_LABELS, labelsProp);
   const anonymous = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).anonymous;
   const replyLabels = useFeedbackRepliesLabels();
@@ -189,6 +209,10 @@ export function FeedbackCommentThread({
         author: reply.author_name ?? replyLabels.admin,
         createdAt: reply.created_at,
         body: reply.body,
+        // 0.47 (§12): an admin reply's file, where the view carries it.
+        attachments: reply.attachment_url
+          ? [{ name: attachmentName(reply.attachment_url), url: reply.attachment_url }]
+          : undefined,
         staff: true,
         badge: reply.status_to ? (
           <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
@@ -244,6 +268,11 @@ export function FeedbackCommentThread({
         author: veiled ? undefined : comment.mine ? undefined : (comment.author_name ?? anonymous),
         createdAt: comment.created_at,
         body: veiled ? "" : (comment.body ?? ""),
+        // 0.47 (§12): its one file; none when veiled (the server sends none either).
+        attachments:
+          !veiled && comment.attachment_url
+            ? [{ name: attachmentName(comment.attachment_url), url: comment.attachment_url }]
+            : undefined,
         staff: !veiled && comment.staff,
         struck: comment.hidden && isAdmin && !veiled,
         footer: actions.length > 0 ? actions : undefined,
@@ -258,13 +287,19 @@ export function FeedbackCommentThread({
         messages={entries.map((entry) => entry.message)}
         loading={loading}
         now={now}
+        renderAttachment={(file) => (file.url ? <FeedbackEntryFile url={file.url} fetcher={fetcher} /> : file.name)}
         labels={{ thread: labels.comments, empty: labels.empty }}
       />
       {onComment && (
         <ChatComposer
           className="mt-3"
-          onSend={(body) => onComment(body)}
-          pending={pending}
+          onSend={async (body, file) => {
+            const url = await upload(file);
+            // The second argument only with a file, so a text comment calls as before 0.47.
+            return url === undefined ? onComment(body) : onComment(body, url);
+          }}
+          pending={pending || uploading}
+          attachment={composerAttachment}
           commit={commit}
           maxLength={FEEDBACK_COMMENT_MAX}
           showCount