@eifi1/ui-kit 0.15.4 → 0.16.0

package/src/feedback/feedback-dialog.tsx

@@ -6,8 +6,10 @@ import { useMediaQuery } from "../hooks/use-media-query";
 import { useKitLabels } from "../i18n/kit-labels";
 import {
   DEFAULT_ATTACHMENT_ACCEPT,
+  DEFAULT_FEEDBACK_ATTACHMENT_LABELS,
   DEFAULT_MAX_ATTACHMENT_BYTES,
   FeedbackAttachmentField,
+  type FeedbackAttachmentError,
 } from "./feedback-attachment";
 
 export interface FeedbackCategoryOption {
@@ -27,6 +29,17 @@ 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 — and, in
+   *  `<FeedbackDialog attachments="multiple">`, the heading over it (0.16.0). Optional,
+   *  as are the keys below — they fall back to the provider's `feedbackAttachment`,
+   *  then English. */
+  attachmentList?: string;
+  /** `multiple` mode (0.16.0): the screenshot slot's chip title, in place of its file name. */
+  attachmentScreenshot?: 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 +51,10 @@ export interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
   submitHint: string;
   cancel: string;
   save: string;
+  /** @deprecated since 0.16.0 — use `attachmentList`, the one key for the heading and
+   *  the chip list it names. Still honoured: set, it wins over the provider's
+   *  `attachmentList` (but not over an `attachmentList` passed beside it). */
+  attachments?: string;
 }
 
 /**
@@ -62,6 +79,11 @@ export interface FeedbackDialogTextLabels {
   submitHint: string;
   cancel: string;
   save: string;
+  /** @deprecated since 0.16.0 — use `feedbackAttachment.attachmentList`. It and this
+   *  key were two names for one heading ("Attachments" over the chips that list names
+   *  "Attachments"), and a catalogue that translated one left the other English. Still
+   *  honoured when set: it wins over `feedbackAttachment.attachmentList`. */
+  attachments?: string;
 }
 
 export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
@@ -71,6 +93,8 @@ export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
   body: "What happened?",
   bodyOptional: "What happened? (optional)",
   attachment: "Screenshot",
+  // No `attachments`: the multiple-mode heading is `feedbackAttachment.attachmentList`,
+  // and a default here would shadow a provider that translated only that one.
   submitHint: "Ctrl/⌘ + Enter to send",
   cancel: "Cancel",
   save: "Send",
@@ -84,36 +108,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 +132,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 +148,94 @@ 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);
+  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. The
+  // deprecated `feedbackDialog.attachments` (prop or provider) still wins over the
+  // provider's `attachmentList`, as it did before 0.16.0; an `attachmentList` prop wins
+  // over both.
+  const listHeading =
+    labelsProp?.attachmentList ??
+    labels.attachments ??
+    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 = { ...labelsProp, attachment: labels.attachment };
+  const attachmentLabels =
+    props.attachments === "multiple"
+      ? { ...labelsProp, attachment: listHeading, attachmentList: listHeading }
+      : { ...labelsProp, attachment: 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 +246,8 @@ export function FeedbackDialog({
       setTitle("");
       setBody("");
       setAttachment(null);
+      setScreenshot(null);
+      setFiles([]);
     }
   }
 
@@ -166,7 +255,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 +288,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,10 @@ 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",
+      attachmentScreenshot: "Screenshot",
+      attachmentRemoveFile: (name) => `${name} entfernen`,
+      attachmentLimit: (max) => `Maximal ${n(max)} ${max === 1 ? "Anhang" : "Anhänge"} – zum Hinzufügen erst einen entfernen.`,
     },
     feedbackDialog: {
       title: "Feedback senden",

package/src/i18n/locales/es.ts

@@ -21,6 +21,10 @@ 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",
+      attachmentScreenshot: "Captura de pantalla",
+      attachmentRemoveFile: (name) => `Quitar ${name}`,
+      attachmentLimit: (max) => `Máximo ${n(max)} ${max === 1 ? "adjunto" : "adjuntos"}: quita uno para añadir otro.`,
     },
     feedbackDialog: {
       title: "Enviar comentarios",

package/src/i18n/locales/fr.ts

@@ -21,6 +21,10 @@ 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",
+      attachmentScreenshot: "Capture d’écran",
+      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",

package/src/i18n/locales/hu.ts

@@ -20,6 +20,10 @@ 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",
+      attachmentScreenshot: "Képernyőkép",
+      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",

package/src/i18n/locales/it.ts

@@ -21,6 +21,10 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       attachmentCapture: "Cattura schermata",
       attachmentPaste: "…oppure incolla uno screenshot dagli appunti.",
       attachmentRemove: "Rimuovi allegato",
+      attachmentList: "Allegati",
+      attachmentScreenshot: "Screenshot",
+      attachmentRemoveFile: (name) => `Rimuovi ${name}`,
+      attachmentLimit: (max) => `Massimo ${n(max)} ${max === 1 ? "allegato" : "allegati"}: rimuovine uno per aggiungerne un altro.`,
     },
     feedbackDialog: {
       title: "Invia feedback",

package/src/i18n/locales/zh.ts

@@ -20,6 +20,10 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       attachmentCapture: "截取屏幕",
       attachmentPaste: "……或从剪贴板粘贴截图。",
       attachmentRemove: "移除附件",
+      attachmentList: "附件",
+      attachmentScreenshot: "截图",
+      attachmentRemoveFile: (name) => `移除 ${name}`,
+      attachmentLimit: (max) => `最多 ${n(max)} 个附件，请先移除一个再添加。`,
     },
     feedbackDialog: {
       title: "发送反馈",

package/src/lib/format.ts

@@ -365,15 +365,36 @@ export function currencyMinorDigits(currency: string | null | undefined): number
   }
 }
 
+/** The options form of {@link roundToCurrency}'s third argument. */
+export interface RoundToCurrencyOptions {
+  /** Decimals to round to, whatever the currency — the plain `digits` argument. */
+  digits?: number;
+  /**
+   * Decimals for a currency `Intl` cannot resolve — no code yet (`null`, `""`), or a
+   * malformed one ("EURO", "€"). Left out, such a value comes back unchanged, as
+   * before. Note that `Intl` resolves ANY well-formed three-letter code, a made-up
+   * "XYZ" included (to 2), so this is the case of a missing or broken code, not of a
+   * rare currency.
+   */
+  fallbackDigits?: number;
+}
+
 /**
  * `value` rounded to the currency's minor unit (or to `digits`), half away from zero,
  * in decimal arithmetic: 93.4213 CHF → 93.42, 1.005 EUR → 1.01 (`Math.round(1.005 *
  * 100)` is 100, since 1.005 is 1.00499… in binary). A non-finite value, or a currency
  * `Intl` does not know without `digits`, comes back unchanged (keksdose live #356: an
- * FX estimate set into an AmountInput showed four decimals).
+ * FX estimate set into an AmountInput showed four decimals) — unless the options form
+ * gives `fallbackDigits`: `roundToCurrency(v, code, { fallbackDigits: 2 })` rounds a
+ * figure whose currency is not chosen yet to cents rather than leaving 0.1 + 0.2 as is.
  */
-export function roundToCurrency(value: number, currency: string | null | undefined, digits?: number): number {
-  const places = digits ?? currencyMinorDigits(currency);
+export function roundToCurrency(
+  value: number,
+  currency: string | null | undefined,
+  digits?: number | RoundToCurrencyOptions,
+): number {
+  const options = typeof digits === "object" && digits !== null ? digits : { digits };
+  const places = options.digits ?? currencyMinorDigits(currency) ?? options.fallbackDigits;
   if (places === undefined || !Number.isFinite(value)) return value;
   const magnitude = Number(`${Math.round(Number(`${Math.abs(value)}e${places}`))}e-${places}`);
   return value < 0 ? -magnitude : magnitude;

package/src/rhf/line-items.tsx

@@ -23,6 +23,12 @@
  * itself — the `rules` here, or a resolver's `lines: "At least two lines"` — is the
  * list's `error`. Each cell's `render` gets `name`, the row's path
  * (`"components.2"`), to bind its field to.
+ *
+ * `summary`, `fieldLabels` and `narrowColumns` pass through to {@link LineItems}. With
+ * `fieldLabels="floating"` a cell's `fieldLabel` is the column's name; the bound
+ * fields' own `label` is a `FormLabel` ABOVE the control, so for the floating
+ * one render the kit field through `RhfField`:
+ * `render={({ field, invalid }) => <Input label={fieldLabel} aria-label={label} {...field} invalid={invalid} />}`.
  */
 import type { ReactNode } from "react";
 import {

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 */