@eifi1/ui-kit 0.51.4 → 0.51.5

package/src/components/user-avatar.tsx

@@ -30,8 +30,7 @@ const AVATAR_SIZES = {
   lg: "size-12 text-base",
 } as const;
 
-const CHIP =
-  "inline-flex shrink-0 items-center justify-center rounded-full bg-inverse font-semibold text-inverse";
+const CHIP = "inline-flex shrink-0 items-center justify-center rounded-full bg-inverse font-semibold text-inverse";
 
 /** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */
 const BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: "sm", md: "md", lg: "lg" };
@@ -90,22 +89,10 @@ export function UserAvatar({ name, email, person, size = "md", badge, className,
     // also contains the sr-only text.
     return (
       <span {...rest} className="relative inline-flex shrink-0">
-        <span
-          aria-hidden
-          className={cn(
-            CHIP,
-            AVATAR_SIZES[size],
-            className,
-          )}
-        >
+        <span aria-hidden className={cn(CHIP, AVATAR_SIZES[size], className)}>
           {initials}
         </span>
-        <StatusDot
-          ring
-          tone={badge.tone ?? "danger"}
-          size={BADGE_SIZES[size]}
-          className="absolute -end-0.5 -top-0.5"
-        />
+        <StatusDot ring tone={badge.tone ?? "danger"} size={BADGE_SIZES[size]} className="absolute -end-0.5 -top-0.5" />
         <span className="sr-only">{badge.label}</span>
       </span>
     );
@@ -121,11 +108,7 @@ export function UserAvatar({ name, email, person, size = "md", badge, className,
       // `aria-label` arrives through `...rest` and wins.
       aria-hidden
       {...rest}
-      className={cn(
-        CHIP,
-        AVATAR_SIZES[size],
-        className,
-      )}
+      className={cn(CHIP, AVATAR_SIZES[size], className)}
     >
       {initials}
     </span>

package/src/demo/demo-start.tsx

@@ -116,10 +116,14 @@ export function DemoStart<T>({
   const accessLink = useAccessAction(access, landingLabels);
   const [refusal, setRefusal] = useState<Refusal | null>(null);
   useNoIndex(noIndex);
-  useOncePerKey<T>(ONCE, () => start(), (_key, result) => {
-    if (result.ok) onStarted(result.value);
-    else setRefusal(refusalOf(result.error));
-  });
+  useOncePerKey<T>(
+    ONCE,
+    () => start(),
+    (_key, result) => {
+      if (result.ok) onStarted(result.value);
+      else setRefusal(refusalOf(result.error));
+    },
+  );
 
   return (
     <div {...rest} className={cn("flex flex-col items-center gap-4 py-4 text-center", className)}>

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

@@ -22,7 +22,8 @@ import type { FeedbackAttachmentFieldLabels } from "./feedback-attachment";
 export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {
   attachmentAdd: "Add attachment",
   attachmentCapture: "Capture screenshot",
-  attachmentPaste: "…or paste a screenshot straight from the clipboard, so you can show one corner rather than the whole page.",
+  attachmentPaste:
+    "…or paste a screenshot straight from the clipboard, so you can show one corner rather than the whole page.",
   attachmentRemove: "Remove attachment",
   attachmentList: "Attachments",
   attachmentScreenshot: "Screenshot",

package/src/feedback/feedback-attachment.tsx

@@ -328,9 +328,7 @@ export interface FeedbackAttachmentFieldRefsProps extends FeedbackAttachmentFiel
 }
 
 export type FeedbackAttachmentFieldProps =
-  | FeedbackAttachmentFieldSingleProps
-  | FeedbackAttachmentFieldMultipleProps
-  | FeedbackAttachmentFieldRefsProps;
+  FeedbackAttachmentFieldSingleProps | FeedbackAttachmentFieldMultipleProps | FeedbackAttachmentFieldRefsProps;
 
 /**
  * Picking one picture: the file dialog, a capture of the app view, or a paste.
@@ -444,11 +442,7 @@ function SingleField({
       {value ? (
         <div className="flex items-start gap-2">
           {value.type.startsWith("image/") && preview ? (
-            <img
-              src={preview}
-              alt={value.name}
-              className="h-20 w-20 rounded border border-subtle object-cover"
-            />
+            <img src={preview} alt={value.name} className="h-20 w-20 rounded border border-subtle object-cover" />
           ) : (
             // Non-image attachments (PDF, text) can't preview as an <img>, so
             // show a neutral file tile with the name/size beside it instead.
@@ -458,9 +452,7 @@ function SingleField({
           )}
           <div className="min-w-0 flex-1">
             <div className="truncate-until-large text-sm text-secondary">{value.name}</div>
-            <div className="text-xs text-muted">
-              {fileText.size(value.size)}
-            </div>
+            <div className="text-xs text-muted">{fileText.size(value.size)}</div>
           </div>
           <RemoveButton label={text.attachmentRemove} onClick={() => onChange(null)} disabled={disabled} />
         </div>
@@ -489,9 +481,7 @@ function SingleField({
           </div>
           {/* Said out loud, because a gesture with no affordance is a gesture
               nobody finds. */}
-          <p className="text-xs text-muted">
-            {text.attachmentPaste}
-          </p>
+          <p className="text-xs text-muted">{text.attachmentPaste}</p>
         </div>
       )}
       <input
@@ -614,8 +604,7 @@ function MultipleField({
     const root = rootRef.current;
     if (!root) return;
     const removes = root.querySelectorAll<HTMLElement>("[data-attachment-remove]");
-    const target =
-      removes[index] ?? root.querySelector<HTMLElement>("[data-attachment-action]") ?? removes[index - 1];
+    const target = removes[index] ?? root.querySelector<HTMLElement>("[data-attachment-action]") ?? removes[index - 1];
     target?.focus();
   }, [value, screenshot]);
 
@@ -650,7 +639,9 @@ function MultipleField({
                 <div className="truncate-until-large text-xs text-muted">
                   {/* The screenshot's file name moves down here: still there for the
                       reporter who wants to know what will be sent, not its title. */}
-                  {chip.screenshot ? `${chip.file.name} · ${fileText.size(chip.file.size)}` : fileText.size(chip.file.size)}
+                  {chip.screenshot
+                    ? `${chip.file.name} · ${fileText.size(chip.file.size)}`
+                    : fileText.size(chip.file.size)}
                 </div>
               </div>
               <RemoveButton
@@ -692,9 +683,7 @@ function MultipleField({
           )}
         </div>
       )}
-      <p className="text-xs text-muted">
-        {room > 0 ? text.attachmentPaste : limitLabel(max)}
-      </p>
+      <p className="text-xs text-muted">{room > 0 ? text.attachmentPaste : limitLabel(max)}</p>
       <input
         ref={fileInputRef}
         type="file"
@@ -857,8 +846,7 @@ function RefsField({
     const root = rootRef.current;
     if (!root) return;
     const removes = root.querySelectorAll<HTMLElement>("[data-attachment-remove]");
-    const target =
-      removes[index] ?? root.querySelector<HTMLElement>("[data-attachment-action]") ?? removes[index - 1];
+    const target = removes[index] ?? root.querySelector<HTMLElement>("[data-attachment-action]") ?? removes[index - 1];
     target?.focus();
   }, [value]);
 
@@ -973,18 +961,18 @@ function RefsField({
 function RefGlyph({ type }: { type?: string }) {
   return (
     <span className="flex size-12 shrink-0 items-center justify-center rounded border border-subtle bg-surface-2 text-placeholder">
-      {type?.startsWith("image/") ? <ImageIcon aria-hidden className="size-6" /> : <FileText aria-hidden className="size-6" />}
+      {type?.startsWith("image/") ? (
+        <ImageIcon aria-hidden className="size-6" />
+      ) : (
+        <FileText aria-hidden className="size-6" />
+      )}
     </span>
   );
 }
 
 function Heading({ text, className }: { text?: string; className?: string }) {
   if (!text) return null;
-  return (
-    <div className={cn("mb-1 text-xs font-medium uppercase tracking-wide text-muted", className)}>
-      {text}
-    </div>
-  );
+  return <div className={cn("mb-1 text-xs font-medium uppercase tracking-wide text-muted", className)}>{text}</div>;
 }
 
 function CaptureButton({
@@ -1064,7 +1052,6 @@ function RemoveButton({
   );
 }
 
-
 /**
  * The {@link FeedbackAttachmentErrorInfo} builder of one field: its limits, and the
  * sentence for each refusal. The sentences are the `filePicker` namespace's — the ones

package/src/feedback/feedback-capture.ts

@@ -260,7 +260,9 @@ export interface CaptureAppScreenshotOptions {
  * Call it from the "Capture screenshot" button's own click and nowhere else (keksdose
  * checked: running it at dialog OPEN was suspected and was never the cause of the wait).
  */
-export async function captureAppScreenshot({ rootId = "root" }: CaptureAppScreenshotOptions = {}): Promise<File | null> {
+export async function captureAppScreenshot({
+  rootId = "root",
+}: CaptureAppScreenshotOptions = {}): Promise<File | null> {
   let domToBlob: (typeof import("modern-screenshot"))["domToBlob"];
   try {
     ({ domToBlob } = await import("modern-screenshot"));

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

@@ -128,10 +128,7 @@ type Entry = { at: number; order: number; message: FeedbackThreadMessage };
 
 /** The admin's Hide / Unhide as a promise — a sync throw or a `void` return included —
  *  so the click can catch it as Delete's does. */
-const hideComment = async (
-  onHide: NonNullable<FeedbackCommentThreadProps["onHide"]>,
-  comment: FeedbackComment,
-) => {
+const hideComment = async (onHide: NonNullable<FeedbackCommentThreadProps["onHide"]>, comment: FeedbackComment) => {
   await onHide(comment, !comment.hidden);
 };
 
@@ -186,7 +183,10 @@ export function FeedbackCommentThread({
             ? [{ 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">
+            <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}>
@@ -215,7 +215,10 @@ export function FeedbackCommentThread({
           : 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}>
+          <span
+            className="inline-flex min-w-0 max-w-full flex-wrap 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} />

package/src/feedback/feedback-context.tsx

@@ -179,10 +179,7 @@ export function FeedbackContextBox({
   const lead = line.endsWith(submitter) ? line.slice(0, line.length - submitter.length) : null;
   return (
     <div
-      className={cn(
-        "space-y-1 rounded-md border border-subtle bg-surface-2 px-3 py-2 text-xs text-muted",
-        className,
-      )}
+      className={cn("space-y-1 rounded-md border border-subtle bg-surface-2 px-3 py-2 text-xs text-muted", className)}
     >
       <div className="[overflow-wrap:anywhere]">
         {lead === null ? (

package/src/feedback/feedback-dialog.tsx

@@ -251,16 +251,15 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
   const [files, setFiles] = useState<File[]>([]);
   const isMobile = usePhoneLayout();
   const noticeId = useId();
-  const hasNotice = publicNotice !== undefined && publicNotice !== null && publicNotice !== false && publicNotice !== "";
+  const hasNotice =
+    publicNotice !== undefined && publicNotice !== null && publicNotice !== false && publicNotice !== "";
   const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
   const attachmentText = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   // Under `multiple` the heading is `attachmentList` — a screenshot AND photos — which
   // also names the chip list beneath it: one string, so the two cannot disagree. Its old
   // second name, `feedbackDialog.attachments`, went in 0.34.
   const listHeading =
-    labelsProp?.attachmentList ??
-    attachmentText.attachmentList ??
-    DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList!;
+    labelsProp?.attachmentList ?? attachmentText.attachmentList ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList!;
   // The attachment field resolves its own keys from `feedbackAttachment`; it gets the
   // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.
   const attachmentLabels =

package/src/feedback/feedback-inbox.tsx

@@ -239,9 +239,7 @@ export function FeedbackStatusTransitions({
               variant === "icon"
                 ? cn(
                     "flex size-7 items-center justify-center rounded",
-                    active
-                      ? cn(meta.activeBg, meta.activeText)
-                      : "text-placeholder hover:text-secondary",
+                    active ? cn(meta.activeBg, meta.activeText) : "text-placeholder hover:text-secondary",
                   )
                 : cn(
                     "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium",
@@ -529,9 +527,7 @@ export function FeedbackDetailSection({
   return (
     <div>
       <div className="mb-1 flex items-center justify-between gap-2">
-        <div className="text-xs font-medium uppercase tracking-wide text-muted">
-          {title}
-        </div>
+        <div className="text-xs font-medium uppercase tracking-wide text-muted">{title}</div>
         {action}
       </div>
       {children}
@@ -552,7 +548,5 @@ export function FeedbackDetail({ children, className }: { children: ReactNode; c
  *  carry the entire "this arrived after the answer" reading. */
 export function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {
   if (!children) return <p className="text-placeholder">{empty ?? "—"}</p>;
-  return (
-    <p className="whitespace-pre-wrap text-secondary">{children}</p>
-  );
+  return <p className="whitespace-pre-wrap text-secondary">{children}</p>;
 }

package/src/feedback/feedback-public-list.tsx

@@ -12,7 +12,13 @@ import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { FILL_HEIGHT_CLASS } from "../shell/fill-height";
 import { EMPTY_FORMATTED_VALUE } from "../lib/format";
-import { FeedbackCategoryBadge, FeedbackDetail, FeedbackDetailSection, FeedbackProse, FeedbackStatusBadge } from "./feedback-inbox";
+import {
+  FeedbackCategoryBadge,
+  FeedbackDetail,
+  FeedbackDetailSection,
+  FeedbackProse,
+  FeedbackStatusBadge,
+} from "./feedback-inbox";
 import { useFeedbackCategoryLabels } from "./feedback-labels";
 import { FeedbackCommentThread, type FeedbackCommentsLabels } from "./feedback-comment-thread";
 import type { FeedbackEntryUploadOptions } from "./feedback-entry-file";

package/src/feedback/feedback-record.ts

@@ -161,11 +161,7 @@ export const DEFAULT_MAX_ATTACHMENTS = 5;
  * A plain array (not frozen) because `accept` takes `string[]`, as
  * `DEFAULT_ATTACHMENT_ACCEPT` does — copy it before changing it.
  */
-export const FEEDBACK_ATTACHMENT_ACCEPT: string[] = [
-  ...DEFAULT_ATTACHMENT_ACCEPT,
-  "application/pdf",
-  "text/plain",
-];
+export const FEEDBACK_ATTACHMENT_ACCEPT: string[] = [...DEFAULT_ATTACHMENT_ACCEPT, "application/pdf", "text/plain"];
 
 /**
  * The categories a person can pick — every one but `CRASH`, in triage order (Bug, Idea,
@@ -305,12 +301,7 @@ export function feedbackAttachmentLine(url: string): string {
  * something foreign — and written anyway it would sit in the body as prose that no
  * reader recognises as a file.
  */
-export function appendRework(
-  body: string,
-  note: string,
-  url?: string | null,
-  now: Date = new Date(),
-): string | null {
+export function appendRework(body: string, note: string, url?: string | null, now: Date = new Date()): string | null {
   const text = note.trim();
   if (!text) return null;
   if (url && !ATTACHMENT_URL.test(url)) {
@@ -339,9 +330,10 @@ export function reworkCount(body: string): number {
  * before server-kit 0.13, whose reworks are still `--- REWORK … ---` blocks). What the
  * Rework chip counts.
  */
-export function feedbackReworkCount(
-  row: { body?: string | null; replies?: readonly Pick<FeedbackReply, "kind">[] | null },
-): number {
+export function feedbackReworkCount(row: {
+  body?: string | null;
+  replies?: readonly Pick<FeedbackReply, "kind">[] | null;
+}): number {
   if (row.replies) {
     const entries = row.replies.filter((reply) => reply.kind === "rework").length;
     // A row migrated by an app that answers `replies` but not yet `kind` keeps its body's

package/src/feedback/feedback-replies.tsx

@@ -102,7 +102,10 @@ export interface FeedbackReplyTimelineProps {
 function EntryStatus({ reply, statusChanged }: { reply: FeedbackReply; statusChanged: string }) {
   if (!reply.status_to) return null;
   return (
-    <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={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}
+    >
       <span className="sr-only">{statusChanged}</span>
       {reply.status_from && reply.status_from !== reply.status_to && (
         <>
@@ -167,7 +170,11 @@ export function FeedbackReplyTimeline({
               </time>
               <EntryStatus reply={reply} statusChanged={labels.statusChanged} />
             </div>
-            <p data-private={priv} dir="auto" className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary">
+            <p
+              data-private={priv}
+              dir="auto"
+              className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary"
+            >
               {reply.body}
             </p>
             {reply.attachment_url && (
@@ -312,9 +319,7 @@ export function FeedbackReplyComposer({
             aria-label={labels.status}
             value={picked}
             disabled={pending || uploading}
-            onChange={(event) =>
-              setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })
-            }
+            onChange={(event) => setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })}
             data-feedback-reply-status-pick=""
           >
             <option value="">{labels.noChange}</option>

package/src/feedback/feedback-row-detail.tsx

@@ -234,8 +234,7 @@ export function feedbackPageUrl(context: FeedbackContext | null | undefined): st
  * keyed by URL, a React key clash keksdose had).
  */
 export function feedbackAttachmentUrls(
-  row: Pick<FeedbackRecord, "screenshot_url" | "attachment_urls" | "body"> &
-    Partial<Pick<FeedbackRecord, "replies">>,
+  row: Pick<FeedbackRecord, "screenshot_url" | "attachment_urls" | "body"> & Partial<Pick<FeedbackRecord, "replies">>,
 ): string[] {
   const urls = [
     ...(row.screenshot_url ? [row.screenshot_url] : []),
@@ -695,9 +694,7 @@ export function FeedbackRowDetail({
         <FeedbackDetailSection title={labels.subject}>
           <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm" data-feedback-subject="">
             <FeedbackCategoryBadge category={row.category} />
-            <span className="min-w-0 font-medium text-primary [overflow-wrap:anywhere]">
-              {row.title}
-            </span>
+            <span className="min-w-0 font-medium text-primary [overflow-wrap:anywhere]">{row.title}</span>
           </p>
         </FeedbackDetailSection>
       )}

package/src/feedback/feedback-status-undo.ts

@@ -37,10 +37,7 @@ export interface FeedbackStatusPatch {
  * Failure is the mutation's own business: its `onError` toasts the server's `detail`,
  * else `feedbackToast.updateFailed` (§4.4) — this hook adds no second error toast.
  */
-export type FeedbackStatusMutate = (
-  patch: FeedbackStatusPatch,
-  callbacks: { onSuccess: () => void },
-) => void;
+export type FeedbackStatusMutate = (patch: FeedbackStatusPatch, callbacks: { onSuccess: () => void }) => void;
 
 /** What the change needs to know about the row: which one, what it is called in the
  *  toast, and where it stood (the status Undo goes back to). */

package/src/feedback/feedback-submit-dialog.tsx

@@ -107,12 +107,12 @@ export function FeedbackSubmitDialog({
         )
       }
       onCaptureScreenshot={onCaptureScreenshot}
-      publicNotice={
-        publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined
-      }
+      publicNotice={publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined}
       // The context is read off the very values the box below shows (§3.2).
       onSubmit={(data) => onSubmit(data, feedbackContext({ user, attachUrl, url, environment, version }))}
-      contextSlot={<FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />}
+      contextSlot={
+        <FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />
+      }
     />
   );
 }

package/src/feedback/feedback-table.tsx

@@ -29,7 +29,12 @@ import {
   type FeedbackCategoryLabels,
   type FeedbackStatusLabels,
 } from "./feedback-labels";
-import { FEEDBACK_AWAITING_STATUSES, feedbackReworkCount, type FeedbackContext, type FeedbackRecord } from "./feedback-record";
+import {
+  FEEDBACK_AWAITING_STATUSES,
+  feedbackReworkCount,
+  type FeedbackContext,
+  type FeedbackRecord,
+} from "./feedback-record";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail";
 import type { CommitScope } from "../components/write-lock";
@@ -356,8 +361,7 @@ function FeedbackPageLinkCell({ context, openPage }: { context: FeedbackContext
     <>
       {/* The space outside the hidden span: a flex container drops it from the layout,
           and the accessible name keeps it ("Open page /accounts"). */}
-      <span className="sr-only">{openPage}</span>{" "}
-      <code className="min-w-0 truncate text-xs">{path}</code>
+      <span className="sr-only">{openPage}</span> <code className="min-w-0 truncate text-xs">{path}</code>
       <ExternalLink className="size-3 shrink-0" aria-hidden />
     </>
   );
@@ -568,9 +572,7 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       // Name AND email, so either finds the person; the erased ones by the placeholder
       // (their context holds no name any more).
       filterBy: (row) =>
-        row.user_id == null
-          ? labels.deletedUser
-          : `${feedbackSubmitter(row, labels)} ${feedbackSubmitterEmail(row)}`,
+        row.user_id == null ? labels.deletedUser : `${feedbackSubmitter(row, labels)} ${feedbackSubmitterEmail(row)}`,
       // Sixth to go (0.51.4, Kurvenschmiede): with only 1–5, Subject reached its floor while
       // #, Date and User were still drawn, and the inbox scrolled sideways from 768 to
       // ~1115px beside an open sidebar. The open report names the submitter.
@@ -654,8 +656,10 @@ export function feedbackColumns<T extends FeedbackTableRow>({
 
 /** What {@link useFeedbackColumns} takes: {@link FeedbackColumnsOptions} with the words
  *  read from the provider, and `renderDate` optional. */
-export interface UseFeedbackColumnsOptions
-  extends Omit<FeedbackColumnsOptions, "renderDate" | "labels" | "statusLabels" | "categoryLabels" | "votesHeader"> {
+export interface UseFeedbackColumnsOptions extends Omit<
+  FeedbackColumnsOptions,
+  "renderDate" | "labels" | "statusLabels" | "categoryLabels" | "votesHeader"
+> {
   /** Default: the kit's date with the weekday ({@link useFeedbackRenderDate}). */
   renderDate?: FeedbackRenderDate;
   /** Over the `feedbackPage` namespace. Keep it stable (module scope or memoised): it is

package/src/feedback/feedback-thread.tsx

@@ -18,10 +18,7 @@ import { FeedbackAttachmentField } from "./feedback-attachment";
 import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment";
 import type { FeedbackNoteAttachment } from "./feedback-inbox";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
-import {
-  DEFAULT_FEEDBACK_COMPOSER_LABELS,
-  DEFAULT_FEEDBACK_THREAD_LABELS,
-} from "./feedback-thread-labels";
+import { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS } from "./feedback-thread-labels";
 
 /**
  * The conversation under a report: who said what, when, with what attached — and the
@@ -217,12 +214,7 @@ export function FeedbackThread({
   }
   if (messages.length === 0) {
     return (
-      <EmptyState
-        variant="inline"
-        size="sm"
-        title={empty ?? labels.empty}
-        className={cn("justify-start", className)}
-      />
+      <EmptyState variant="inline" size="sm" title={empty ?? labels.empty} className={cn("justify-start", className)} />
     );
   }
 
@@ -288,9 +280,7 @@ export function FeedbackThread({
             <article
               className={cn(
                 "max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm",
-                message.own
-                  ? "rounded-ee-sm bg-brand-soft"
-                  : "rounded-es-sm bg-surface-2",
+                message.own ? "rounded-ee-sm bg-brand-soft" : "rounded-es-sm bg-surface-2",
               )}
             >
               <header className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption text-muted">
@@ -361,9 +351,7 @@ function DefaultAttachment({
       {/* A file name wraps from Large up, as the attachments of the composer do (text
           size §10.17; round 0.34 T1: the sweep read "export-20…"). */}
       <span className="min-w-0 truncate-until-large">{name}</span>
-      {attachment.size !== undefined && (
-        <span className="shrink-0 text-muted">{size(attachment.size)}</span>
-      )}
+      {attachment.size !== undefined && <span className="shrink-0 text-muted">{size(attachment.size)}</span>}
     </>
   );
   const chip =