@eifi1/ui-kit 0.15.5 → 0.16.1

package/src/components/ui.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, CSSProperties, InputHTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
@@ -657,6 +657,26 @@ const ICON_BUTTON_GLYPH_SIZES: Record<IconButtonGlyphSize, string> = {
   28: "[&_svg]:size-7",
 };
 
+// `pending`'s spinner, the size of the glyph it replaces (the `[&_svg]` rules above
+// size only an svg, and the spinner is a bordered span).
+const ICON_BUTTON_SPINNER: Record<IconButtonSize, string> = {
+  "2xl": "size-7",
+  xl: "size-6",
+  lg: "size-5",
+  md: "size-5",
+  sm: "size-5",
+  xs: "size-4",
+  "2xs": "size-3.5",
+};
+const ICON_BUTTON_SPINNER_GLYPH: Record<IconButtonGlyphSize, string> = {
+  12: "size-3",
+  14: "size-3.5",
+  16: "size-4",
+  20: "size-5",
+  24: "size-6",
+  28: "size-7",
+};
+
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Any {@link ButtonVariant}; `overlay` — a round translucent disc for use over
    *  an image (see `ICON_BUTTON_OVERLAY`); or `shutter` — a camera's release, a ringed
@@ -804,6 +824,36 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   tooltipSide?: TooltipSide;
   /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
   tooltipPortal?: boolean;
+  /**
+   * Mount the `label` bubble only while it is up — {@link Tooltip}'s `lazy`. Default
+   * `true` since 0.16.0; `false` is the always-mounted in-place bubble of before.
+   *
+   * Why the label bubble can be lazy when Tooltip's default is not: this bubble
+   * describes nothing. It is wrapped round the button in a fragment precisely so that
+   * it is NOT the button's `aria-describedby` (it would repeat the button's own name),
+   * so there is no description for a lazy mount to take away — the name is the
+   * `aria-label` either way, read in browse mode and on focus alike. What the
+   * always-mounted bubble did do was sit in the DOM as a `role="tooltip"` node full of
+   * text: every IconButton in a row added one to `getAllByRole("tooltip")` and its label
+   * to the row's `textContent`, and two keksdose tests tripped over that (0.15.5 P6).
+   * The cost is the one {@link Tooltip}'s "Lazy in place" note names — a test that
+   * looked the bubble up without hovering now has to hover (or focus) first; pass
+   * `false` while it is migrated. A `disabledReason` bubble is unaffected: that one
+   * stays mounted as it was.
+   */
+  tooltipLazy?: boolean;
+  /**
+   * Busy — the action is in flight: the glyph is swapped for a spinner of the same
+   * size, the button is `aria-busy`, and clicks (and the Enter/Space and form
+   * submission they stand for) are swallowed, so a second press cannot start the
+   * action twice. {@link Button}'s `pending`, with the same contract: `aria-disabled`
+   * rather than `disabled`, so the button that was pressed keeps its focus. The name
+   * (`label` / `aria-label`) stays — `aria-busy` is what says it is working. A SWAP
+   * rather than Button's overlay: the box is square and fixed, so there is no width
+   * for the glyph to hold, and a spinner drawn over a glyph would be two marks in one
+   * 20px square.
+   */
+  pending?: boolean;
   /**
    * Why the action is not available — {@link Button}'s `disabledReason`, on the icon
    * button: keksdose's accounts page cannot hide an account with a balance or delete
@@ -869,6 +919,7 @@ export interface IconButtonLinkProps
       | "tooltip"
       | "tooltipSide"
       | "tooltipPortal"
+      | "tooltipLazy"
     > {
   href: string;
   /** See {@link ButtonLinkProps.renderLink}. */
@@ -887,6 +938,7 @@ export interface IconButtonLinkProps
   pressed?: never;
   disabledReason?: never;
   disabledStyle?: never;
+  pending?: never;
 }
 
 /**
@@ -998,6 +1050,7 @@ function IconButtonLink({
   tooltip = true,
   tooltipSide,
   tooltipPortal,
+  tooltipLazy = true,
   glyphSize,
   badge,
   className,
@@ -1083,7 +1136,13 @@ function IconButtonLink({
   if (!tooltip || label === undefined || label === "") return control;
   return (
     // A fragment, as on the button: the bubble says what `aria-label` already does.
-    <Tooltip label={label} side={tooltipSide} portal={tooltipPortal} className={stretch ? "self-stretch" : undefined}>
+    <Tooltip
+      label={label}
+      side={tooltipSide}
+      portal={tooltipPortal}
+      lazy={tooltipLazy}
+      className={stretch ? "self-stretch" : undefined}
+    >
       <>{control}</>
     </Tooltip>
   );
@@ -1104,7 +1163,9 @@ function IconButtonElement(
     tooltip = true,
     tooltipSide,
     tooltipPortal,
+    tooltipLazy = true,
     disabledReason,
+    pending,
     glyphSize,
     badge,
     disabledStyle = "dim",
@@ -1112,6 +1173,7 @@ function IconButtonElement(
     style,
     onClick,
     onKeyDown,
+    children,
     href: _href,
     renderLink: _renderLink,
     external: _external,
@@ -1125,21 +1187,25 @@ function IconButtonElement(
   const keep = disabledStyle === "keep";
   const reasonId = useId();
   const locked = hasContent(disabledReason);
+  // Pending is inert like a locked button — focusable, every activation swallowed —
+  // without the locked look: the spinner is the state.
+  const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
   const button = (
     <button
       ref={ref}
       {...rest}
-      disabled={locked ? undefined : rest.disabled}
-      aria-disabled={locked || rest["aria-disabled"]}
+      disabled={inert ? undefined : rest.disabled}
+      aria-disabled={inert || rest["aria-disabled"]}
+      aria-busy={pending || rest["aria-busy"]}
       aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}
       aria-label={rest["aria-label"] ?? label}
       aria-pressed={pressed ?? rest["aria-pressed"]}
       style={toneColorStyle(toneColor, style)}
       onClick={(e) => {
         if (stopPropagation) e.stopPropagation();
-        // `preventDefault` too: a locked submit must not submit its form.
-        if (locked) {
+        // `preventDefault` too: a locked (or pending) submit must not submit its form.
+        if (inert) {
           e.preventDefault();
           return;
         }
@@ -1157,9 +1223,24 @@ function IconButtonElement(
         // The disabled look for the focusable kind of disabled, as on Button.
         locked && (keep ? "cursor-default" : "cursor-not-allowed opacity-50"),
         keep && "disabled:cursor-default disabled:opacity-100",
+        pending && "cursor-progress",
         className,
       )}
-    />
+    >
+      {pending ? (
+        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands
+        // in for, in the glyph's colour, so the swap does not change the button's look.
+        <Spinner
+          label={null}
+          className={cn(
+            "border-current/30 border-t-current",
+            glyphSize !== undefined ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size],
+          )}
+        />
+      ) : (
+        children
+      )}
+    </button>
   );
   const control = withIconButtonBadge(button, badge, stretch);
   if (locked) {
@@ -1184,8 +1265,14 @@ function IconButtonElement(
   if (!tooltip || label === undefined || label === "") return control;
   return (
     // A fragment, so Tooltip leaves the button's description alone: the bubble says
-    // exactly what `aria-label` already does.
-    <Tooltip label={label} side={tooltipSide} portal={tooltipPortal} className={stretch ? "self-stretch" : undefined}>
+    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.
+    <Tooltip
+      label={label}
+      side={tooltipSide}
+      portal={tooltipPortal}
+      lazy={tooltipLazy}
+      className={stretch ? "self-stretch" : undefined}
+    >
       <>{control}</>
     </Tooltip>
   );
@@ -1887,7 +1974,9 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
    *  TEXT (a string or a number) is a caption instead, and goes UNDER the field
    *  like every other field's hint, attached through `aria-describedby`: the label
    *  line is 11px of strip shared with the label, and a sentence placed there was
-   *  set in the value's type on top of both the label and the value. */
+   *  set in the value's type on top of both the label and the value. On an
+   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,
+   *  outside the box. */
   hint?: ReactNode;
   /**
    * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
@@ -1973,38 +2062,59 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
   // whole rows, at any width.
   const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
   if (label === undefined) {
+    const select = (
+      <select
+        ref={ref}
+        // `id` is destructured out of the props to feed `fieldId`, and this branch
+        // never put it back — so an UNLABELLED Select swallowed it and the
+        // consumer's own `<label for="…">` pointed at nothing. The control stayed
+        // in the tab order with no accessible name at all: reachable, and silent
+        // when it was reached. Input and Textarea both forward it here; this is
+        // the third one doing the same thing.
+        id={id}
+        size={nativeSize}
+        {...rest}
+        // OR-ed with the spread for the reason spelled out on Input's copy: this
+        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand
+        // to a Select — which is what a caller does when the validity is
+        // `"grammar"` or `"spelling"`, or when the paint is not wanted — had the
+        // attribute silently dropped. Input has never done that.
+        aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
+        aria-describedby={describedBy}
+        className={cn(
+          FIELD_BASE,
+          dress,
+          listBox && "py-0",
+          small && SELECT_SM,
+          selectClassName,
+          isInvalid && FIELD_INVALID,
+        )}
+      >
+        {children}
+      </select>
+    );
+    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named
+    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`
+    // without a trace, so the "?" a caller passed never rendered and a test looking
+    // for its button found none. It goes at the end of the field instead, outside the
+    // box, as the label line's own hint goes at the end of the label.
+    if (hasContent(hint) && !textHint) {
+      return (
+        <FieldGroup errorEl={below}>
+          <div className={cn("flex items-center gap-1.5", className)}>
+            <div className="relative min-w-0 flex-1">
+              {select}
+              {chevron}
+            </div>
+            <span className="flex shrink-0 items-center">{hint}</span>
+          </div>
+        </FieldGroup>
+      );
+    }
     return (
       <FieldGroup errorEl={below}>
         <div className={cn("relative", className)}>
-          <select
-            ref={ref}
-            // `id` is destructured out of the props to feed `fieldId`, and this branch
-            // never put it back — so an UNLABELLED Select swallowed it and the
-            // consumer's own `<label for="…">` pointed at nothing. The control stayed
-            // in the tab order with no accessible name at all: reachable, and silent
-            // when it was reached. Input and Textarea both forward it here; this is
-            // the third one doing the same thing.
-            id={id}
-            size={nativeSize}
-            {...rest}
-            // OR-ed with the spread for the reason spelled out on Input's copy: this
-            // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand
-            // to a Select — which is what a caller does when the validity is
-            // `"grammar"` or `"spelling"`, or when the paint is not wanted — had the
-            // attribute silently dropped. Input has never done that.
-            aria-invalid={isInvalid || rest["aria-invalid"] || undefined}
-            aria-describedby={describedBy}
-            className={cn(
-              FIELD_BASE,
-              dress,
-              listBox && "py-0",
-              small && SELECT_SM,
-              selectClassName,
-              isInvalid && FIELD_INVALID,
-            )}
-          >
-            {children}
-          </select>
+          {select}
           {chevron}
         </div>
       </FieldGroup>
@@ -2124,6 +2234,13 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
    * Left out, the default card keeps no padding (its CardHeader / CardContent own the
    * rhythm) and `inset` keeps its `p-3`; passing it sets theirs too. A caller's `p-*`
    * in `className` still wins.
+   *
+   * Whenever the card carries a padding — this prop, or the `inset` / `outline` one —
+   * CardHeader, CardContent and CardFooter drop their own `px-6` / `pt-6` / `pb-6`, so
+   * the card's padding is the only one. Before 0.16 they kept it regardless and a
+   * `padding="md"` card with parts was padded twice (40px a side); keksdose's settings
+   * cards zeroed all three parts by hand (`<CardHeader className="p-0">`). A padding set
+   * only through `className` cannot be seen from the parts: use the prop.
    */
   padding?: "none" | "sm" | "md";
   /**
@@ -2137,6 +2254,21 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
    * selectors.
    */
   tone?: CardTone;
+  /**
+   * How loud the `tone` frame is. `"strong"`: a 2px border in the tone's strong
+   * colour — `--danger-border-strong` for `danger`, the tone's own text colour
+   * (`--warning`, `--info`, `--success`) for the others, which have no
+   * `-border-strong` token of their own. For the one tile on a page that guards
+   * something destructive or security-relevant: keksdose's password / delete-account
+   * tile (shared/components/password-danger-card.tsx) wrote `toneFrameClass(tone)` over
+   * the Card by hand for the 2px rule, and `p-[15px]` under it so the content did not
+   * move. Here the extra pixel comes off the padding the same way (`padding` or the
+   * variant's own), so a strong card's content sits exactly where a soft one's does.
+   *
+   * Default `"soft"`: the 1px `-border` it has always been. No effect without `tone`,
+   * nor on `inset`, which has no border to make louder (its tone is a fill).
+   */
+  toneStrength?: "soft" | "strong";
 }
 
 export type CardTone = "warning" | "danger" | "info" | "success";
@@ -2172,13 +2304,49 @@ const CARD_PADDING: Record<NonNullable<CardProps["padding"]>, string> = {
   md: "p-4",
 };
 
-export function Card({ className, children, flush, variant = "default", tone, padding, ...rest }: CardProps) {
+// The same padding one pixel short, for a 2px `toneStrength="strong"` frame: the
+// border grows inwards by that pixel, so the content stays where the 1px card had it.
+const CARD_PADDING_STRONG: Record<NonNullable<CardProps["padding"]>, string> = {
+  none: "p-0",
+  sm: "p-[11px]",
+  md: "p-[15px]",
+};
+
+const CARD_TONES_STRONG: Record<CardTone, string> = {
+  warning: "border-2 border-[var(--warning)]",
+  danger: "border-2 border-[var(--danger-border-strong)]",
+  info: "border-2 border-[var(--info)]",
+  success: "border-2 border-[var(--success)]",
+};
+
+/**
+ * Whether the {@link Card} round the parts carries the padding itself — so CardHeader,
+ * CardContent and CardFooter must not add theirs on top. `false` (no Card, or a default
+ * card with no `padding`) keeps the parts' own `px-6` rhythm, as it always was.
+ */
+const CardPaddedContext = createContext(false);
+
+export function Card({
+  className,
+  children,
+  flush,
+  variant = "default",
+  tone,
+  toneStrength = "soft",
+  padding,
+  ...rest
+}: CardProps) {
   const toned = tone ? CARD_TONES[tone] : undefined;
   // An outline card is bordered like the default one, so a tone recolours its border.
   const bordered = variant !== "inset";
+  const strong = toned !== undefined && bordered && toneStrength === "strong";
+  // The padding the card itself carries: the prop, else the variant's own (`inset`
+  // p-3, `outline` p-4). A default card with no prop carries none — its parts do.
+  const ownPadding = padding ?? (variant === "inset" ? "sm" : variant === "outline" ? "md" : undefined);
   return (
     <div
       data-tone={tone}
+      data-tone-strength={strong ? "strong" : undefined}
       {...rest}
       className={cn(
         variant === "inset"
@@ -2196,39 +2364,80 @@ export function Card({ className, children, flush, variant = "default", tone, pa
                 : "rounded-lg border border-[var(--border)] shadow-sm",
             ),
         toned && (bordered ? toned.border : toned.fill),
+        strong && tone && CARD_TONES_STRONG[tone],
         toned?.title,
-        padding && CARD_PADDING[padding],
+        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
         className,
       )}
     >
-      {children}
+      <CardPaddedContext.Provider value={ownPadding !== undefined}>{children}</CardPaddedContext.Provider>
     </div>
   );
 }
 
-// Composed shadcn-style Card sub-parts. `Card` stays padding-less (callers set
-// their own padding via className), so these own the padding/rhythm. Token-driven
-// so they re-skin with the palette. Use CardHeader → CardTitle/CardDescription
-// (+ optional CardAction, top-right) → CardContent → CardFooter.
+// Composed shadcn-style Card sub-parts. A default `Card` with no `padding` stays
+// padding-less, so these own the padding/rhythm (`px-6`, the header's `pt-6`, the
+// last part's `pb-6`). A Card that carries a padding of its own — the `padding` prop,
+// or `inset` / `outline`, which have one built in — tells them so through context and
+// they add none on top (see CardPaddedContext). Token-driven so they re-skin with the
+// palette. Use CardHeader → CardTitle/CardDescription (+ optional CardAction,
+// top-right) → CardContent → CardFooter.
 /** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
- *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
+ *  `data-slot` and a padding rhythm — so most names are aliases rather than an empty
  *  interface pretending to be more. They exist so a consumer's own wrapper can say
  *  `CardHeaderProps` instead of `ComponentProps<typeof CardHeader>`. */
-export type CardHeaderProps = ComponentPropsWithoutRef<"div">;
-export type CardTitleProps = ComponentPropsWithoutRef<"div">;
+export interface CardHeaderProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Below the `sm` breakpoint, put the {@link CardAction} UNDER the title and
+   * description instead of beside them. For an action that is wider than an icon —
+   * a "Set up two-factor" button, a checkbox and a filter — which, kept in the
+   * top-end column on a 390px phone, squeezed the title into a ribbon two words wide
+   * (keksdose's settings cards). Off by default: an icon action (the wizard summary's
+   * pencil) is narrow enough to stay beside the title at every width.
+   */
+  stackAction?: boolean;
+}
+export type CardTitleLevel = "div" | "h2" | "h3" | "h4";
+export interface CardTitleProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * The element the title is: `"div"` (default) or a heading level. Five of keksdose's
+   * settings cards nested their own `<h2>` / `<h3>` INSIDE CardTitle to put the card in
+   * the page's outline — a heading in a div that looks like a heading. The heading
+   * takes the title's look unchanged (the reset leaves `h2`–`h4` at inherited size and
+   * weight), so only the outline changes.
+   */
+  as?: CardTitleLevel;
+}
 export type CardDescriptionProps = ComponentPropsWithoutRef<"div">;
 export type CardActionProps = ComponentPropsWithoutRef<"div">;
 export type CardContentProps = ComponentPropsWithoutRef<"div">;
 export type CardFooterProps = ComponentPropsWithoutRef<"div">;
 
-export function CardHeader({ className, ...props }: CardHeaderProps) {
+export function CardHeader({ className, stackAction = false, ...props }: CardHeaderProps) {
+  const padded = useContext(CardPaddedContext);
   return (
     <div
       data-slot="card-header"
       className={cn(
         // Grid (not flex) so CardAction can occupy a top-right column; with no
         // action it collapses to one column and title/description stack.
-        "grid auto-rows-min items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        //
+        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As
+        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of
+        // specificity (the class plus the attribute inside `:has()`), and a caller's
+        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every
+        // width, so the action could never be stacked on a phone from outside. Now the
+        // property itself is set by a plain one-class utility that any `grid-cols-*`
+        // variant of the caller's outranks by coming later in the sheet; the `:has()`
+        // rule only picks the value. The base `1fr` resets the variable so a header
+        // never inherits an ancestor header's two columns.
+        "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
+        padded ? "px-0 pt-0" : "px-6 pt-6",
+        // One column under `sm`, and the action back into the flow (DOM order, so
+        // after the description when it is written after it), at the start edge.
+        // The descendant selector outranks CardAction's own placement classes.
+        stackAction &&
+          "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start",
         className,
       )}
       {...props}
@@ -2236,21 +2445,19 @@ export function CardHeader({ className, ...props }: CardHeaderProps) {
   );
 }
 
-export function CardTitle({ className, ...props }: CardTitleProps) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("font-semibold leading-none", className)}
-      {...props}
-    />
-  );
+export function CardTitle({ className, as: Tag = "div", ...props }: CardTitleProps) {
+  return <Tag data-slot="card-title" className={cn("font-semibold leading-none", className)} {...props} />;
 }
 
 export function CardDescription({ className, ...props }: CardDescriptionProps) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-[var(--money-neutral)]", className)}
+      // `--text-muted`, the kit's secondary-line colour (StatTile's description, the
+      // field captions). It was `--money-neutral`, a MONEY token that happened to be
+      // a similar grey — and a palette that re-tunes the money colours moved every
+      // card's description with them.
+      className={cn("text-sm text-[var(--text-muted)]", className)}
       {...props}
     />
   );
@@ -2267,19 +2474,22 @@ export function CardAction({ className, ...props }: CardActionProps) {
 }
 
 export function CardContent({ className, ...props }: CardContentProps) {
+  const padded = useContext(CardPaddedContext);
   // `last:pb-6`, not a plain `pb-6`: CardHeader owns the top padding and CardFooter
   // owns the bottom one, so a card WITHOUT a footer had nothing closing it off and
   // its last field sat flush against the card edge (kastlan feedback: the language
   // input touching the card bottom on /profile). Scoping to `:last-child` fixes that
-  // case and leaves a footered card's rhythm exactly as it was.
-  return <div data-slot="card-content" className={cn("px-6 last:pb-6", className)} {...props} />;
+  // case and leaves a footered card's rhythm exactly as it was. Inside a padded Card
+  // the card closes itself off, so there is nothing to add.
+  return <div data-slot="card-content" className={cn(!padded && "px-6 last:pb-6", className)} {...props} />;
 }
 
 export function CardFooter({ className, ...props }: CardFooterProps) {
+  const padded = useContext(CardPaddedContext);
   return (
     <div
       data-slot="card-footer"
-      className={cn("flex items-center px-6 pb-6", className)}
+      className={cn("flex items-center", !padded && "px-6 pb-6", className)}
       {...props}
     />
   );

package/src/feedback/feedback-attachment.tsx

@@ -1,5 +1,5 @@
 import { cn } from "../lib/cn";
-import { useEffect, useRef, useState, type ClipboardEvent as ReactClipboardEvent, type RefObject } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, type ClipboardEvent as ReactClipboardEvent, type RefObject } from "react";
 import { Camera, FileText, Paperclip, X } from "lucide-react";
 import { Button } from "../components/ui";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels";
@@ -23,15 +23,21 @@ export const DEFAULT_MAX_ATTACHMENTS = 5;
  * that relied on its provider got "Capture screenshot" under a German form.
  *
  * The three keys added in 0.15.5 for `multiple` mode are optional, so a complete
- * `UiKitLabels` typed before it still compiles; they fall back to English.
+ * `UiKitLabels` typed before it still compiles; they fall back to English. So is
+ * `attachmentScreenshot` (0.16.0).
  */
 export interface FeedbackAttachmentFieldLabels {
   attachmentAdd: string;
   attachmentCapture: string;
   attachmentPaste: string;
   attachmentRemove: string;
-  /** `multiple` mode: the accessible name of the list of chosen files. */
+  /** `multiple` mode: the accessible name of the list of chosen files — and, since
+   *  0.16.0, the heading `<FeedbackDialog attachments="multiple">` puts over it. */
   attachmentList?: string;
+  /** `multiple` mode (0.16.0): what the screenshot slot's chip is called — "Screenshot"
+   *  rather than the capture's file name ("screenshot.webp"), which says nothing a
+   *  reporter chose. The file name stays as the chip's second line. */
+  attachmentScreenshot?: string;
   /** `multiple` mode: one chip's remove button — "Remove photo.jpg". Named per file,
    *  because five buttons all called "Remove attachment" say nothing about which. */
   attachmentRemoveFile?: (name: string) => string;
@@ -45,6 +51,7 @@ export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels =
   attachmentPaste: "…or paste a screenshot from the clipboard.",
   attachmentRemove: "Remove attachment",
   attachmentList: "Attachments",
+  attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
   attachmentLimit: (max) =>
     `Up to ${max} ${max === 1 ? "attachment" : "attachments"} — remove one to add another.`,
@@ -300,6 +307,23 @@ function MultipleField({
   const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile!;
   const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit!;
+  const screenshotLabel = text.attachmentScreenshot ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentScreenshot!;
+
+  // What an add or a remove builds on: the `value` prop, plus whatever this field has
+  // already handed to `onChange` since the parent last rendered. The field is
+  // controlled, so between an `onChange` and the re-render that brings it back, `value`
+  // is stale — and two adds in that gap (two pastes, a paste and a pick, delivered by
+  // native listeners whose updates React batches) each spread the SAME old list, and
+  // the second dropped the first. Re-synced to the prop after every commit, so a
+  // parent that refuses a change (or edits the list itself) is what wins.
+  const latest = useRef(value);
+  useLayoutEffect(() => {
+    latest.current = value;
+  });
+  const commit = (next: File[]) => {
+    latest.current = next;
+    onChange(next);
+  };
 
   const hasSlot = onScreenshotChange !== undefined;
   const room = Math.max(0, max - value.length);
@@ -308,8 +332,9 @@ function MultipleField({
   const canCapture = !!onCaptureScreenshot && (hasSlot ? !screenshot : room > 0);
 
   const add = (incoming: File[], pasted = false) => {
+    const current = latest.current;
     const accepted: File[] = [];
-    const taken = new Set([...value, ...(screenshot ? [screenshot] : [])].map((f) => f.name));
+    const taken = new Set([...current, ...(screenshot ? [screenshot] : [])].map((f) => f.name));
     for (const raw of incoming) {
       const problem = rejection(raw, accept, maxBytes);
       if (problem) {
@@ -322,12 +347,13 @@ function MultipleField({
       const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
       taken.add(file.name);
       // The same File object twice is one file chosen twice, not two.
-      if (!value.includes(file)) accepted.push(file);
+      if (!current.includes(file)) accepted.push(file);
     }
     if (accepted.length === 0) return;
-    if (accepted.length > room) onError?.("count");
-    const kept = accepted.slice(0, room);
-    if (kept.length > 0) onChange([...value, ...kept]);
+    const space = Math.max(0, max - current.length);
+    if (accepted.length > space) onError?.("count");
+    const kept = accepted.slice(0, space);
+    if (kept.length > 0) commit([...current, ...kept]);
   };
 
   const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
@@ -360,14 +386,15 @@ function MultipleField({
     target?.focus();
   }, [value, screenshot]);
 
-  const chips: Array<{ file: File; screenshot: boolean; remove: () => void }> = [
+  const chips: Array<{ file: File; screenshot: boolean; name: string; remove: () => void }> = [
     ...(hasSlot && screenshot
-      ? [{ file: screenshot, screenshot: true, remove: () => onScreenshotChange(null) }]
+      ? [{ file: screenshot, screenshot: true, name: screenshotLabel, remove: () => onScreenshotChange(null) }]
       : []),
     ...value.map((file) => ({
       file,
       screenshot: false,
-      remove: () => onChange(value.filter((f) => f !== file)),
+      name: file.name,
+      remove: () => commit(latest.current.filter((f) => f !== file)),
     })),
   ];
 
@@ -386,8 +413,12 @@ function MultipleField({
             >
               <ChipPreview file={chip.file} screenshot={chip.screenshot} />
               <div className="min-w-0 flex-1">
-                <div className="truncate text-sm text-[var(--text-secondary)]">{chip.file.name}</div>
-                <div className="text-xs text-[var(--text-muted)]">{fileText.size(chip.file.size)}</div>
+                <div className="truncate text-sm text-[var(--text-secondary)]">{chip.name}</div>
+                <div className="truncate text-xs text-[var(--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)}
+                </div>
               </div>
               <button
                 type="button"
@@ -396,7 +427,7 @@ function MultipleField({
                   pendingFocus.current = index;
                   chip.remove();
                 }}
-                aria-label={removeLabel(chip.file.name)}
+                aria-label={removeLabel(chip.name)}
                 className="shrink-0 rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"
               >
                 <X className="size-4" />