@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/components/tooltip.tsx

@@ -382,14 +382,7 @@ export function Tooltip({
   if (isEmptyLabel(label)) return <>{children}</>;
   if (portal === true) {
     return (
-      <PortalTooltip
-        label={label}
-        side={side}
-        className={className}
-        redact={redact}
-        tap={tap}
-        {...rest}
-      >
+      <PortalTooltip label={label} side={side} className={className} redact={redact} tap={tap} {...rest}>
         {children}
       </PortalTooltip>
     );
@@ -413,7 +406,6 @@ export function Tooltip({
   );
 }
 
-
 /** The pointer handlers a caller may hand {@link Tooltip} that the trigger also needs:
  *  both run, the trigger's first. (The mouse and focus handlers are the trigger's alone,
  *  as they have always been.) */
@@ -731,9 +723,7 @@ function InPlaceTooltip({
       {/* In place the bubble is always there to point at; portalled or lazy, only while up. */}
       {describedBy(children, clipped || lazy ? (open ? id : undefined) : dismissed ? undefined : id)}
       {clipped ? (
-        open && (
-          <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
-        )
+        open && <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
       ) : lazy ? (
         // keksdose F6: the in-place slot and classes, the portalled lifetime. Mounted only
         // while up, so it is visible whenever it exists.
@@ -795,11 +785,7 @@ function describedBy(children: ReactNode, id: string | undefined): ReactNode {
  *  it has nothing to say — `""`, `null`, `undefined`, `false` from a `&&` guard. A
  *  numeric `0` is a real label and stays one. */
 function isEmptyLabel(label: ReactNode): boolean {
-  return (
-    label == null ||
-    label === false ||
-    (typeof label === "string" && label.trim() === "")
-  );
+  return label == null || label === false || (typeof label === "string" && label.trim() === "");
 }
 
 const TOOLTIP_GAP = 4;
@@ -878,10 +864,7 @@ function useViewportClamp(
   // new label, side or direction — is not measured yet, and renders clipped until it is.
   const [placement, setPlacement] = useState<Placement>(UNPLACED);
   const measured =
-    placement.for !== null &&
-    placement.for.side === side &&
-    placement.for.label === label &&
-    placement.for.dir === dir;
+    placement.for !== null && placement.for.side === side && placement.for.label === label && placement.for.dir === dir;
   useLayoutEffect(() => {
     const el = bubbleRef.current;
     if (!active || !el) {
@@ -939,10 +922,7 @@ const portalTransformBySide: Record<PhysicalSide, string> = {
 
 /** Anchor point (viewport px) for the tooltip on the given side of `r`. Paired
  *  with {@link portalTransformBySide}, which shifts the box onto that point. */
-function tooltipAnchor(
-  r: AnchorRect,
-  side: PhysicalSide,
-): { left: number; top: number } {
+function tooltipAnchor(r: AnchorRect, side: PhysicalSide): { left: number; top: number } {
   switch (side) {
     case "right":
       return { left: r.right + TOOLTIP_GAP, top: r.top + r.height / 2 };
@@ -980,12 +960,7 @@ const opposite: Record<PhysicalSide, PhysicalSide> = {
 };
 
 /** Whether the bubble clears the viewport edge on `side` of the trigger. */
-function roomOn(
-  r: AnchorRect,
-  side: PhysicalSide,
-  size: TooltipSize,
-  viewport: TooltipViewport,
-): boolean {
+function roomOn(r: AnchorRect, side: PhysicalSide, size: TooltipSize, viewport: TooltipViewport): boolean {
   switch (side) {
     case "left":
       return r.left - TOOLTIP_GAP - size.width >= TOOLTIP_MARGIN;
@@ -1045,10 +1020,7 @@ export function placeTooltip(
   size: TooltipSize,
   viewport: TooltipViewport,
 ): TooltipPlacement {
-  const chosen =
-    roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport)
-      ? side
-      : opposite[side];
+  const chosen = roomOn(r, side, size, viewport) || !roomOn(r, opposite[side], size, viewport) ? side : opposite[side];
   const point = tooltipAnchor(r, chosen);
   const box =
     chosen === "left"
@@ -1065,16 +1037,7 @@ export function placeTooltip(
   };
 }
 
-function PortalTooltip({
-  label,
-  side,
-  className,
-  redact,
-  tap,
-  children,
-  ref,
-  ...rest
-}: TooltipVariantProps) {
+function PortalTooltip({ label, side, className, redact, tap, children, ref, ...rest }: TooltipVariantProps) {
   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
@@ -1103,9 +1066,7 @@ function PortalTooltip({
       >
         {describedBy(children, open ? id : undefined)}
       </span>
-      {open && (
-        <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />
-      )}
+      {open && <PortalBubble triggerRef={triggerRef} id={id} label={label} side={side} dir={dir} redact={redact} />}
     </>
   );
 }

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

@@ -147,9 +147,7 @@ export function TranslationReviewEditor({
     const trimmedNote = note.trim() || null;
     // Approving says the text is right as it stands: there is no wording to suggest.
     const sent = verdict === "APPROVED" ? null : suggestion.trim() || null;
-    void run(verdict === "APPROVED" ? "approve" : "flag", () =>
-      onSave(reviewWrite(row, verdict, trimmedNote, sent)),
-    );
+    void run(verdict === "APPROVED" ? "approve" : "flag", () => onSave(reviewWrite(row, verdict, trimmedNote, sent)));
   };
 
   return (
@@ -212,7 +210,9 @@ export function TranslationReviewEditor({
       {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}
       {!editable && review?.verdict === "NEEDS_CHANGE" && (review.suggestion || review.note) && (
         <div className="space-y-2">
-          {review.suggestion && <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />}
+          {review.suggestion && (
+            <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />
+          )}
           {review.note && <Then label={labels.note} text={review.note} />}
         </div>
       )}

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

@@ -173,7 +173,13 @@ export interface TranslationLocaleTabsProps {
  * strip's caret saying it goes on (`overflowCue`). 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) {
+export function TranslationLocaleTabs({
+  locales,
+  active,
+  onChange,
+  className,
+  labels: labelsProp,
+}: TranslationLocaleTabsProps) {
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   if (locales.length < 2) return null;
   return (

package/src/components/translation-review.tsx

@@ -324,7 +324,6 @@ export interface TranslationReviewPanelProps {
   labels?: LabelOverride<TranslationReviewLabels>;
 }
 
-
 /**
  * How many rows the groups may render at once on a wide screen before they start folded
  * ({@link TranslationReviewPanelProps.defaultGroupsOpen}): two of the default 50-row pages.
@@ -432,7 +431,10 @@ function TextCell({ row, labels, clamp }: { row: TranslationRow; labels: Transla
   return row.text === "" ? (
     <span className="italic text-muted">{labels.missingText}</span>
   ) : (
-    <span lang={row.locale} className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}>
+    <span
+      lang={row.locale}
+      className={cn("whitespace-pre-line break-words", clamp && "line-clamp-3 large:line-clamp-none")}
+    >
       {row.text}
     </span>
   );
@@ -670,7 +672,12 @@ export function TranslationReviewPanel({
   ): Promise<boolean> => {
     if (!onSave || targets.length === 0) return false;
     const save = onSave;
-    const ok = await run(key, () => save(targets.map((r) => reviewWrite(r, "APPROVED")), { origin, toasted: undoOn }));
+    const ok = await run(key, () =>
+      save(
+        targets.map((r) => reviewWrite(r, "APPROVED")),
+        { origin, toasted: undoOn },
+      ),
+    );
     if (ok && undoOn) sayDone(targets, description);
     return ok;
   };
@@ -764,9 +771,7 @@ export function TranslationReviewPanel({
     {
       key: "reference",
       header: referenceLabel,
-      cell: (r) => (
-        <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>
-      ),
+      cell: (r) => <span className="line-clamp-3 whitespace-pre-line break-words text-secondary">{r.reference}</span>,
       mobileHidden: true,
     },
     {
@@ -805,11 +810,9 @@ export function TranslationReviewPanel({
         name: (r) => r.key,
         tooltipSide: "start",
         actions: (r) =>
-          translationReviewSwipePlan(
-            { end: ["approve", ...(binding.end ?? []), ...(binding.start ?? [])] },
-            r,
-            { canClear: onClear !== undefined },
-          ).end.map((id): RowAction => {
+          translationReviewSwipePlan({ end: ["approve", ...(binding.end ?? []), ...(binding.start ?? [])] }, r, {
+            canClear: onClear !== undefined,
+          }).end.map((id): RowAction => {
             const swipe = swipeAction(r, id);
             // `edit` only opens the editor, whose own Save is the commit.
             const writes = id !== "edit";
@@ -1230,11 +1233,7 @@ export function TranslationReviewPanel({
         </BulkActionBar>
       )}
 
-      {groups && groups.length > 0 ? (
-        <div className="space-y-3">{groups.map(groupSection)}</div>
-      ) : (
-        table(visible)
-      )}
+      {groups && groups.length > 0 ? <div className="space-y-3">{groups.map(groupSection)}</div> : table(visible)}
     </div>
   );
 }

package/src/components/tree-view.tsx

@@ -153,9 +153,7 @@ export function TreeRow({
       style={{ paddingInlineStart: ROW_PAD + depth * indent, ...style }}
       className={cn(
         "relative flex min-h-8 items-center gap-1.5 rounded pe-2 text-sm",
-        selected
-          ? "bg-active font-medium text-primary"
-          : "text-secondary",
+        selected ? "bg-active font-medium text-primary" : "text-secondary",
         className,
       )}
     >
@@ -183,12 +181,18 @@ export function TreeRow({
             e.stopPropagation();
             onToggle();
           }}
-          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary", FOCUS_RING)}
+          className={cn(
+            "flex size-4 shrink-0 items-center justify-center rounded text-muted outline-none hover:text-primary",
+            FOCUS_RING,
+          )}
         >
           {chevron}
         </button>
       ) : expandable ? (
-        <span data-tree-toggle="" className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted">
+        <span
+          data-tree-toggle=""
+          className="flex size-4 shrink-0 cursor-pointer items-center justify-center text-muted"
+        >
           {chevron}
         </span>
       ) : (
@@ -203,9 +207,7 @@ export function TreeRow({
             {label}
           </span>
           {trailing !== undefined && trailing !== null && (
-            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">
-              {trailing}
-            </span>
+            <span className="ms-auto flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted">{trailing}</span>
           )}
         </>
       )}
@@ -215,8 +217,10 @@ export function TreeRow({
 
 /* ── TreeView ────────────────────────────────────────────────────────────── */
 
-export interface TreeViewProps<T = unknown>
-  extends Omit<ComponentPropsWithRef<"ul">, "onSelect" | "children" | "defaultValue"> {
+export interface TreeViewProps<T = unknown> extends Omit<
+  ComponentPropsWithRef<"ul">,
+  "onSelect" | "children" | "defaultValue"
+> {
   items: readonly TreeNode<T>[];
   /** Open nodes, controlled. */
   expanded?: readonly string[];
@@ -285,14 +289,8 @@ export function TreeView<T = unknown>({
   onClick,
   ...rest
 }: TreeViewProps<T>) {
-  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(
-    expandedProp,
-    defaultExpanded ?? [],
-  );
-  const [selected, setSelectedOwn] = useControllable<string | null>(
-    selectedProp,
-    defaultSelected ?? null,
-  );
+  const [expandedList, setExpandedOwn] = useControllable<readonly string[]>(expandedProp, defaultExpanded ?? []);
+  const [selected, setSelectedOwn] = useControllable<string | null>(selectedProp, defaultSelected ?? null);
   const expandedSet = useMemo(() => new Set(expandedList), [expandedList]);
   const [loading, setLoading] = useState<ReadonlySet<string>>(() => new Set());
   const [focusedId, setFocusedId] = useState<string | null>(null);
@@ -327,8 +325,7 @@ export function TreeView<T = unknown>({
     while (cur && !visibleIds.has(cur)) cur = byId.get(cur)?.parentId ?? null;
     return cur;
   };
-  const tabbable =
-    nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;
+  const tabbable = nearestVisible(focusedId) ?? nearestVisible(selected) ?? visible[0]?.node.id ?? null;
 
   useEffect(() => {
     const id = pendingFocus.current;

package/src/components/treemap.tsx

@@ -279,8 +279,7 @@ export function TreemapCell({
   // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under
   // the note that the label keeps under itself at the 20px floor.
   const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;
-  const note =
-    label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
+  const note = label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
   // The label's START edge, 6px in from the tile's. The tiles themselves are laid out
   // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is
   // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then
@@ -312,16 +311,7 @@ export function TreemapCell({
     >
       {/* The 2px gutter is the card showing through, not a white grid — on a dark
           surface white lines glare harder than the tiles. */}
-      <rect
-        x={px}
-        y={py}
-        width={pw}
-        height={ph}
-        fill={tileFill}
-        stroke="var(--bg-surface)"
-        strokeWidth={2}
-        rx={3}
-      />
+      <rect x={px} y={py} width={pw} height={ph} fill={tileFill} stroke="var(--bg-surface)" strokeWidth={2} rx={3} />
       {edge && pw > 3 && ph > 3 && (
         <rect
           data-edge=""
@@ -481,9 +471,7 @@ export function Treemap({
         dataKey="size"
         fill="var(--chart-1)"
         isAnimationActive={false}
-        content={
-          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />
-        }
+        content={<TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />}
       >
         <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />
       </RechartsTreemap>

package/src/components/trigger-aria.ts

@@ -20,9 +20,7 @@ export interface TriggerAria {
 }
 
 /** Split a field's props into what its trigger takes and what its wrapper takes. */
-export function splitTriggerAria<T extends TriggerAria>(
-  props: T,
-): [TriggerAria, Omit<T, keyof TriggerAria>] {
+export function splitTriggerAria<T extends TriggerAria>(props: T): [TriggerAria, Omit<T, keyof TriggerAria>] {
   const {
     id,
     "aria-label": label,
@@ -44,4 +42,3 @@ export function splitTriggerAria<T extends TriggerAria>(
     rest,
   ];
 }
-

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

@@ -4,12 +4,7 @@ import * as ReactRouter from "react-router";
 import { useLocation, useSearchParams } from "react-router";
 import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
-import {
-  decodeFilterValue,
-  encodeFilterValue,
-  isFilterActive,
-  resolveFilter,
-} from "./data-table-filters";
+import { decodeFilterValue, encodeFilterValue, isFilterActive, resolveFilter } from "./data-table-filters";
 import { decodeSorts, encodeSorts, normalizeSorts, type SortState } from "./data-table-sort";
 import type { DataTableColumn, FilterState, ServerPagination } from "./data-table";
 
@@ -254,9 +249,7 @@ function urlSignature<T>(
   }
   parts.push(`${keys.sort}=${encodeSorts(sorts)}`);
   parts.push(
-    `${keys.pageSize}=${
-      pageSize === Infinity ? "all" : pageSize === defaultPageSize ? "" : String(pageSize)
-    }`,
+    `${keys.pageSize}=${pageSize === Infinity ? "all" : pageSize === defaultPageSize ? "" : String(pageSize)}`,
   );
   parts.push(`${keys.page}=${page > 0 ? String(page + 1) : ""}`);
   return parts.join("&");
@@ -360,10 +353,7 @@ export function useTableState<T>({
   const [urlInitial] = useState<TableUrlState>(() =>
     urlSync ? readTableUrlState(searchParams, columns, urlPrefix) : {},
   );
-  const initial = useMemo(
-    () => loadPersisted(storageKey, storageKeyPrefix),
-    [storageKey, storageKeyPrefix],
-  );
+  const initial = useMemo(() => loadPersisted(storageKey, storageKeyPrefix), [storageKey, storageKeyPrefix]);
   const [internalSorts, setInternalSorts] = useState<SortState[]>(() =>
     urlInitial.sorts !== undefined ? urlInitial.sorts : normalizeSorts(initial.sort),
   );
@@ -482,9 +472,7 @@ export function useTableState<T>({
   }, [storageKey, storageKeyPrefix, persisted]);
 
   const lastUrl = useRef<string | null>(null);
-  const urlSig = urlSync
-    ? urlSignature(columns, sorts, filters, pageSize, page, defaultPageSize, keys)
-    : "";
+  const urlSig = urlSync ? urlSignature(columns, sorts, filters, pageSize, page, defaultPageSize, keys) : "";
   useEffect(() => {
     if (!urlSync) return;
     if (lastUrl.current === urlSig) return;
@@ -492,7 +480,18 @@ export function useTableState<T>({
     // `columns` is deliberately not a dependency and does not need to be: the
     // signature above is computed from it, so a column set that would produce a
     // different address produces a different signature first.
-    writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize, undefined, locationState, keys);
+    writeUrlState(
+      setSearchParams,
+      columns,
+      sorts,
+      filters,
+      pageSize,
+      page,
+      defaultPageSize,
+      undefined,
+      locationState,
+      keys,
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [urlSync, urlSig]);
 

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"));