@eifi1/ui-kit 0.15.4 → 0.15.5

package/src/feedback/feedback-dialog.tsx

@@ -8,6 +8,7 @@ import {
   DEFAULT_ATTACHMENT_ACCEPT,
   DEFAULT_MAX_ATTACHMENT_BYTES,
   FeedbackAttachmentField,
+  type FeedbackAttachmentError,
 } from "./feedback-attachment";
 
 export interface FeedbackCategoryOption {
@@ -27,6 +28,13 @@ export interface FeedbackAttachmentLabels {
    *  straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */
   attachmentPaste?: string;
   attachmentRemove: string;
+  /** `multiple` mode (0.15.5): the chip list's accessible name. Optional, as are the
+   *  two below — they fall back to the provider's `feedbackAttachment`, then English. */
+  attachmentList?: string;
+  /** `multiple` mode: one chip's remove button, given the file's name. */
+  attachmentRemoveFile?: (name: string) => string;
+  /** `multiple` mode: the line shown once `max` files are attached. */
+  attachmentLimit?: (max: number) => string;
 }
 
 export interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
@@ -38,6 +46,9 @@ export interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
   submitHint: string;
   cancel: string;
   save: string;
+  /** The heading over the attachments under `attachments="multiple"` (0.15.5), where
+   *  they are a screenshot AND photos. Optional; falls back to the provider, then English. */
+  attachments?: string;
 }
 
 /**
@@ -62,6 +73,9 @@ export interface FeedbackDialogTextLabels {
   submitHint: string;
   cancel: string;
   save: string;
+  /** The heading over the attachments under `attachments="multiple"` (0.15.5).
+   *  Optional, so a complete `UiKitLabels` typed before 0.15.5 still compiles. */
+  attachments?: string;
 }
 
 export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
@@ -71,6 +85,7 @@ export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
   body: "What happened?",
   bodyOptional: "What happened? (optional)",
   attachment: "Screenshot",
+  attachments: "Attachments",
   submitHint: "Ctrl/⌘ + Enter to send",
   cancel: "Cancel",
   save: "Send",
@@ -84,36 +99,22 @@ export interface FeedbackSubmission {
 }
 
 /**
- * The generic feedback form dialog: category + subject + body + an optional image
- * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the
- * category options, labels and an `onSubmit` that talks to its own backend, plus
- * an optional `contextSlot` for app-specific context (user, current URL, …).
- *
- * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog
- * takes an image off the clipboard and makes it the attachment, through the same
- * validation and the same preview as the file picker. It is the gesture the two
- * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,
- * and the file picker needs a file — so somebody who wanted to show one panel,
- * or one region of one, had to save a crop to disk first and then find it again
- * (Steering Design feedback #39). The clipboard is where a region snip already
- * is on every platform.
+ * What `onSubmit` gets under `attachments="multiple"` (0.15.5): the screenshot and
+ * the picked/pasted files apart, because an app files them differently — keksdose
+ * attaches the screenshot to the report and the photos as its evidence list. No
+ * `attachment`: there is no one file it could name.
  */
-export function FeedbackDialog({
-  open,
-  onClose,
-  categories,
-  category,
-  onCategoryChange,
-  labels: labelsProp,
-  onSubmit,
-  submitting = false,
-  contextSlot,
-  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,
-  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
-  onAttachmentError,
-  onCaptureScreenshot,
-  requireBody = true,
-}: {
+export interface FeedbackMultipleSubmission {
+  title: string;
+  body: string;
+  category: string;
+  /** What `onCaptureScreenshot` returned, or `null` — at most one. */
+  screenshot: File | null;
+  /** Picked and pasted files, in the order they were added; at most `maxAttachments`. */
+  attachments: File[];
+}
+
+interface FeedbackDialogBaseProps {
   open: boolean;
   onClose: () => void;
   categories: FeedbackCategoryOption[];
@@ -122,12 +123,10 @@ export function FeedbackDialog({
   /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >
    *  English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */
   labels?: Partial<FeedbackDialogLabels>;
-  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
   submitting?: boolean;
   contextSlot?: ReactNode;
   attachmentAccept?: string[];
   maxAttachmentBytes?: number;
-  onAttachmentError?: (kind: "type" | "size") => void;
   /**
    * Optional: capture a screenshot of the underlying app view and return it as a
    * File. When provided, a "Capture screenshot" button is shown next to "Add
@@ -140,15 +139,88 @@ export function FeedbackDialog({
    * dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).
    */
   requireBody?: boolean;
-}) {
+}
+
+/** One attachment — a screenshot, a picked or a pasted image; a second replaces
+ *  nothing, it has to wait for the first to be removed. The default. */
+export interface FeedbackDialogSingleProps extends FeedbackDialogBaseProps {
+  attachments?: "single";
+  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
+  onAttachmentError?: (kind: "type" | "size") => void;
+  /** Multiple mode only — refused here rather than silently ignored. */
+  maxAttachments?: never;
+}
+
+/**
+ * One screenshot plus up to `maxAttachments` picked or pasted files (0.15.5, keksdose
+ * dev#578: "pasted two photos, the second overwrote the first"). The capture button is
+ * offered while there is no screenshot yet; the add button while there is room.
+ */
+export interface FeedbackDialogMultipleProps extends FeedbackDialogBaseProps {
+  attachments: "multiple";
+  /** Default `DEFAULT_MAX_ATTACHMENTS` (5). The screenshot does not count. */
+  maxAttachments?: number;
+  onSubmit: (data: FeedbackMultipleSubmission) => void | Promise<void>;
+  /** `"count"`: more files arrived at once than there was room for; the surplus was dropped. */
+  onAttachmentError?: (kind: FeedbackAttachmentError) => void;
+}
+
+export type FeedbackDialogProps = FeedbackDialogSingleProps | FeedbackDialogMultipleProps;
+
+/**
+ * The generic feedback form dialog: category + subject + body + an optional image
+ * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the
+ * category options, labels and an `onSubmit` that talks to its own backend, plus
+ * an optional `contextSlot` for app-specific context (user, current URL, …).
+ *
+ * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog
+ * takes an image off the clipboard and makes it the attachment, through the same
+ * validation and the same preview as the file picker. It is the gesture the two
+ * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,
+ * and the file picker needs a file — so somebody who wanted to show one panel,
+ * or one region of one, had to save a crop to disk first and then find it again
+ * (Steering Design feedback #39). The clipboard is where a region snip already
+ * is on every platform.
+ *
+ * **`attachments="multiple"`** (0.15.5) takes several: every paste and pick adds a
+ * chip, and `onSubmit` gets `{ screenshot, attachments }` ({@link
+ * FeedbackMultipleSubmission}) instead of `attachment`. Opt-in, so a caller typed
+ * against the one-file submission keeps compiling and behaving as before.
+ */
+export function FeedbackDialog(props: FeedbackDialogProps) {
+  const {
+    open,
+    onClose,
+    categories,
+    category,
+    onCategoryChange,
+    labels: labelsProp,
+    submitting = false,
+    contextSlot,
+    attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,
+    maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+    onCaptureScreenshot,
+    requireBody = true,
+  } = props;
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
   const [attachment, setAttachment] = useState<File | null>(null);
+  // `attachments="multiple"` only: the capture, apart from the picked/pasted files.
+  const [screenshot, setScreenshot] = useState<File | null>(null);
+  const [files, setFiles] = useState<File[]>([]);
   const isMobile = useMediaQuery(PHONE_QUERY, false);
   const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
   // 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 = { ...labelsProp, attachment: labels.attachment };
+  // Under `multiple` the heading is `attachments` — a screenshot AND photos — unless the
+  // caller named the multiple heading themselves.
+  const attachmentLabels = {
+    ...labelsProp,
+    attachment:
+      props.attachments === "multiple"
+        ? (labels.attachments ?? DEFAULT_FEEDBACK_DIALOG_LABELS.attachments)
+        : labels.attachment,
+  };
 
   // Reset the form whenever the dialog is (re)opened — during render, on the
   // closed-to-open transition, so the old draft never paints for a frame.
@@ -159,6 +231,8 @@ export function FeedbackDialog({
       setTitle("");
       setBody("");
       setAttachment(null);
+      setScreenshot(null);
+      setFiles([]);
     }
   }
 
@@ -166,7 +240,12 @@ export function FeedbackDialog({
   // with a 422, and a blank report is no report).
   const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;
   const trySubmit = () => {
-    if (canSubmit) void onSubmit({ title, body, category, attachment });
+    if (!canSubmit) return;
+    if (props.attachments === "multiple") {
+      void props.onSubmit({ title, body, category, screenshot, attachments: files });
+    } else {
+      void props.onSubmit({ title, body, category, attachment });
+    }
   };
 
   if (!open) return null;
@@ -194,22 +273,40 @@ export function FeedbackDialog({
       onChange={(e) => setBody(e.target.value)}
     />
   );
-  const attachmentField = (
-    <FeedbackAttachmentField
-      value={attachment}
-      onChange={setAttachment}
-      labels={attachmentLabels}
-      accept={attachmentAccept}
-      maxBytes={maxAttachmentBytes}
-      onError={onAttachmentError}
-      onCaptureScreenshot={onCaptureScreenshot}
-      // On `document`, not on the panel: the Modal focuses its own panel on open
-      // and traps Tab inside it, so while this dialog is up every paste in the
-      // page is meant for it — including the one made with nothing in
-      // particular focused, which never reaches a React `onPaste` on a child.
-      documentPaste={open}
-    />
-  );
+  const fieldProps = {
+    labels: attachmentLabels,
+    accept: attachmentAccept,
+    maxBytes: maxAttachmentBytes,
+    onCaptureScreenshot,
+    // On `document`, not on the panel: the Modal focuses its own panel on open
+    // and traps Tab inside it, so while this dialog is up every paste in the
+    // page is meant for it — including the one made with nothing in
+    // particular focused, which never reaches a React `onPaste` on a child.
+    documentPaste: open,
+  };
+  const attachmentField =
+    props.attachments === "multiple" ? (
+      <FeedbackAttachmentField
+        {...fieldProps}
+        multiple
+        value={files}
+        onChange={setFiles}
+        max={props.maxAttachments}
+        // The capture goes to its own slot, so it is offered once and never crowds
+        // out a photo; a paste is a photo (a region snip is chosen evidence, not "the
+        // screenshot").
+        screenshot={screenshot}
+        onScreenshotChange={setScreenshot}
+        onError={props.onAttachmentError}
+      />
+    ) : (
+      <FeedbackAttachmentField
+        {...fieldProps}
+        value={attachment}
+        onChange={setAttachment}
+        onError={props.onAttachmentError}
+      />
+    );
 
   return (
     <Modal

package/src/i18n/locales/de.ts

@@ -20,6 +20,9 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       attachmentCapture: "Screenshot aufnehmen",
       attachmentPaste: "…oder einen Screenshot aus der Zwischenablage einfügen.",
       attachmentRemove: "Anhang entfernen",
+      attachmentList: "Anhänge",
+      attachmentRemoveFile: (name) => `${name} entfernen`,
+      attachmentLimit: (max) => `Maximal ${n(max)} ${max === 1 ? "Anhang" : "Anhänge"} – zum Hinzufügen erst einen entfernen.`,
     },
     feedbackDialog: {
       title: "Feedback senden",
@@ -28,6 +31,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       body: "Was ist passiert?",
       bodyOptional: "Was ist passiert? (optional)",
       attachment: "Screenshot",
+      attachments: "Anhänge",
       submitHint: "Strg/⌘ + Enter zum Senden",
       cancel: "Abbrechen",
       save: "Senden",

package/src/i18n/locales/es.ts

@@ -21,6 +21,9 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       attachmentCapture: "Capturar pantalla",
       attachmentPaste: "…o pega una captura de pantalla desde el portapapeles.",
       attachmentRemove: "Quitar adjunto",
+      attachmentList: "Adjuntos",
+      attachmentRemoveFile: (name) => `Quitar ${name}`,
+      attachmentLimit: (max) => `Máximo ${n(max)} ${max === 1 ? "adjunto" : "adjuntos"}: quita uno para añadir otro.`,
     },
     feedbackDialog: {
       title: "Enviar comentarios",
@@ -29,6 +32,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       body: "¿Qué ha pasado?",
       bodyOptional: "¿Qué ha pasado? (opcional)",
       attachment: "Captura de pantalla",
+      attachments: "Adjuntos",
       submitHint: "Ctrl/⌘ + Intro para enviar",
       cancel: "Cancelar",
       save: "Enviar",

package/src/i18n/locales/fr.ts

@@ -21,6 +21,9 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       attachmentCapture: "Capturer l’écran",
       attachmentPaste: "…ou collez une capture d’écran depuis le presse-papiers.",
       attachmentRemove: "Retirer la pièce jointe",
+      attachmentList: "Pièces jointes",
+      attachmentRemoveFile: (name) => `Retirer ${name}`,
+      attachmentLimit: (max) => `${n(max)} ${max === 1 ? "pièce jointe" : "pièces jointes"} au maximum — retirez-en une pour en ajouter une autre.`,
     },
     feedbackDialog: {
       title: "Envoyer un retour",
@@ -29,6 +32,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       body: "Que s’est-il passé\u202f?",
       bodyOptional: "Que s’est-il passé\u202f? (facultatif)",
       attachment: "Capture d’écran",
+      attachments: "Pièces jointes",
       submitHint: "Ctrl/⌘ + Entrée pour envoyer",
       cancel: "Annuler",
       save: "Envoyer",

package/src/i18n/locales/hu.ts

@@ -20,6 +20,9 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       attachmentCapture: "Képernyőkép készítése",
       attachmentPaste: "…vagy illesszen be egy képernyőképet a vágólapról.",
       attachmentRemove: "Melléklet eltávolítása",
+      attachmentList: "Mellékletek",
+      attachmentRemoveFile: (name) => `${name} eltávolítása`,
+      attachmentLimit: (max) => `Legfeljebb ${n(max)} melléklet – egy újabbhoz távolítson el egyet.`,
     },
     feedbackDialog: {
       title: "Visszajelzés küldése",
@@ -28,6 +31,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       body: "Mi történt?",
       bodyOptional: "Mi történt? (nem kötelező)",
       attachment: "Képernyőkép",
+      attachments: "Mellékletek",
       submitHint: "Ctrl/⌘ + Enter a küldéshez",
       cancel: "Mégse",
       save: "Küldés",

package/src/i18n/locales/it.ts

@@ -21,6 +21,9 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       attachmentCapture: "Cattura schermata",
       attachmentPaste: "…oppure incolla uno screenshot dagli appunti.",
       attachmentRemove: "Rimuovi allegato",
+      attachmentList: "Allegati",
+      attachmentRemoveFile: (name) => `Rimuovi ${name}`,
+      attachmentLimit: (max) => `Massimo ${n(max)} ${max === 1 ? "allegato" : "allegati"}: rimuovine uno per aggiungerne un altro.`,
     },
     feedbackDialog: {
       title: "Invia feedback",
@@ -29,6 +32,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       body: "Cosa è successo?",
       bodyOptional: "Cosa è successo? (facoltativo)",
       attachment: "Screenshot",
+      attachments: "Allegati",
       submitHint: "Ctrl/⌘ + Invio per inviare",
       cancel: "Annulla",
       save: "Invia",

package/src/i18n/locales/zh.ts

@@ -20,6 +20,9 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       attachmentCapture: "截取屏幕",
       attachmentPaste: "……或从剪贴板粘贴截图。",
       attachmentRemove: "移除附件",
+      attachmentList: "附件",
+      attachmentRemoveFile: (name) => `移除 ${name}`,
+      attachmentLimit: (max) => `最多 ${n(max)} 个附件，请先移除一个再添加。`,
     },
     feedbackDialog: {
       title: "发送反馈",
@@ -28,6 +31,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       body: "发生了什么？",
       bodyOptional: "发生了什么？（可选）",
       attachment: "截图",
+      attachments: "附件",
       submitHint: "Ctrl/⌘ + Enter 发送",
       cancel: "取消",
       save: "发送",

package/src/theme/palette-derive.ts

@@ -64,6 +64,9 @@ export interface SemanticTokens {
   dangerHover: string;
   dangerContrast: string;
   dangerBorder: string;
+  /** The error line (invalid field, danger banner, destructive focus ring): as loud as
+   *  `dangerBorder` was before 0.15.5, so it keeps 3:1 against the surface. */
+  dangerBorderStrong: string;
   dangerBg: string;
   warning: string;
   warningBorder: string;
@@ -374,7 +377,14 @@ export function derivePalette({
       l: mode === "light" ? dangerLch.l - 0.06 : dangerLch.l + 0.06,
     }),
     dangerContrast: contrastOn(danger),
+    // The tone border follows its siblings' lightness in dark mode (warning 0.44, info
+    // and success 0.45) — a soft frame; the strong line keeps the old, louder recipe.
     dangerBorder: oklchToHex({
+      l: mode === "light" ? dangerLch.l + 0.22 : 0.45,
+      c: semanticChroma.danger,
+      h: semanticHue.danger,
+    }),
+    dangerBorderStrong: oklchToHex({
       l: mode === "light" ? dangerLch.l + 0.22 : dangerLch.l - 0.22,
       c: semanticChroma.danger,
       h: semanticHue.danger,

package/tokens.css

@@ -191,6 +191,10 @@
   --danger-hover: #9f1239;        /* rose-800 */
   --danger-contrast: #ffffff;
   --danger-border: #fb7185;       /* rose-400 */
+  /* The error LINE: an invalid field, a failed upload, a danger banner's frame, a focus
+     ring on a destructive control. Equal to the border in light mode; in dark the tone
+     border is soft like its siblings and this one stays loud (WCAG 1.4.11's 3:1). */
+  --danger-border-strong: #fb7185; /* rose-400 */
   --danger-bg: #fff1f2;           /* rose-50 */
 
   --warning: #b45309;             /* amber-700 */
@@ -217,7 +221,11 @@
   --danger: #fda4af;              /* rose-300 */
   --danger-hover: #fecdd3;        /* rose-200 */
   --danger-contrast: #4c0519;     /* rose-950 */
-  --danger-border: #e11d48;       /* rose-600 */
+  /* The tone family's recipe — hue at 0.6 alpha, as warning/info/success below — so a
+     soft danger Chip sits in the same weight of frame as its siblings (keksdose dev
+     #576: FAILED was visibly louder than READY and NEEDS REVIEW in dark mode). */
+  --danger-border: rgba(190, 18, 60, 0.6); /* rose-700 at the family's alpha */
+  --danger-border-strong: #e11d48; /* rose-600 */
   --danger-bg: rgba(136, 19, 55, 0.2);
 
   --warning: #fcd34d;             /* amber-300 */