@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/Duration/index.tsx

@@ -1,4 +1,4 @@
-import type { KnobProps } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, type KnobProps } from "@multiplatform.one/theme";
 import { ClockIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
 import { useCallback, useState } from "react";
@@ -13,28 +13,35 @@ import { t } from "../../shared/t";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
+import {
+  durationSegmentWidth,
+  normalizeSeconds,
+  parseDurationText,
+  partsToSeconds,
+  secondsToParts,
+  type DurationParts,
+} from "./durationMath";
 
-export interface DurationParts {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
+export type { DurationParts };
+export {
+  durationSegmentWidth,
+  normalizeSeconds,
+  parseDurationText,
+  partsToSeconds,
+  secondsToParts,
+};
 
 export interface DurationPreset {
   label: string;
   seconds: number;
 }
 
-const UNIT_SECONDS = { d: 86400, h: 3600, m: 60, s: 1 } as const;
-
-const defaultClockIcon = <ClockIcon size={16} />;
-
 const defaultPresets: DurationPreset[] = [
   { label: "15m", seconds: 900 },
   { label: "30m", seconds: 1800 },
@@ -44,67 +51,6 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
-export function normalizeSeconds(value: unknown): number {
-  const n = typeof value === "number" ? value : Number(value);
-  if (!Number.isFinite(n) || n < 0) return 0;
-  return Math.floor(n);
-}
-
-export function secondsToParts(total: number, hideDays: boolean): DurationParts {
-  const s = normalizeSeconds(total);
-  if (hideDays) {
-    return {
-      days: 0,
-      hours: Math.floor(s / 3600),
-      minutes: Math.floor((s % 3600) / 60),
-      seconds: s % 60,
-    };
-  }
-  return {
-    days: Math.floor(s / 86400),
-    hours: Math.floor((s % 86400) / 3600),
-    minutes: Math.floor((s % 3600) / 60),
-    seconds: s % 60,
-  };
-}
-
-export function partsToSeconds(parts: DurationParts, hideDays: boolean): number {
-  const days = hideDays ? 0 : Math.max(0, Math.floor(Number(parts.days)) || 0);
-  const hours = Math.max(0, Math.floor(Number(parts.hours)) || 0);
-  const minutes = Math.max(0, Math.floor(Number(parts.minutes)) || 0);
-  const seconds = Math.max(0, Math.floor(Number(parts.seconds)) || 0);
-  return days * 86400 + hours * 3600 + minutes * 60 + seconds;
-}
-
-/** Frappe-style "1d 2h 3m 4s", clock "1:30" / "1:30:00", or raw seconds. */
-export function parseDurationText(text: string): number | null {
-  const trimmed = text.trim().toLowerCase();
-  if (!trimmed) return null;
-  if (/^-?\d+$/.test(trimmed)) return normalizeSeconds(Number(trimmed));
-  const clock = trimmed.match(/^(\d+):(\d{1,2})(?::(\d{1,2}))?$/);
-  if (clock) {
-    return partsToSeconds(
-      {
-        days: 0,
-        hours: Number(clock[1]),
-        minutes: Number(clock[2]),
-        seconds: Number(clock[3] || 0),
-      },
-      true,
-    );
-  }
-  let total = 0;
-  let matched = false;
-  const re = /(\d+)\s*(d|h|m|s)\b/g;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(trimmed))) {
-    matched = true;
-    const unit = m[2] as keyof typeof UNIT_SECONDS;
-    total += Number(m[1]) * UNIT_SECONDS[unit];
-  }
-  return matched ? total : null;
-}
-
 function DurationSegment({
   id,
   unit,
@@ -119,6 +65,7 @@ function DurationSegment({
   placeholder,
   required,
   hasError,
+  sizeToken,
 }: {
   id?: string;
   unit: string;
@@ -133,10 +80,13 @@ function DurationSegment({
   placeholder?: string;
   required?: boolean;
   hasError?: boolean;
+  sizeToken: string;
 }) {
   const [draft, setDraft] = useState<string | null>(null);
   const shown = draft ?? (wide ? String(value) : String(value).padStart(2, "0"));
   const locked = !!(disabled || readOnly);
+  const recipe = sizeRecipeForToken(sizeToken);
+  const segmentWidth = durationSegmentWidth(sizeToken, wide ? 3 : 2);
 
   const commitDraft = () => {
     if (draft == null) return;
@@ -146,7 +96,7 @@ function DurationSegment({
   };
 
   return (
-    <XStack alignItems="center" gap="$1" flexShrink={0}>
+    <XStack alignItems="center" gap={recipe.gap} flexShrink={0} data-duration-segment={ariaLabel}>
       <InputParts.Area
         id={id}
         value={shown}
@@ -161,10 +111,11 @@ function DurationSegment({
         aria-invalid={hasError || undefined}
         color={formCommonColors.text}
         textAlign="right"
-        width={wide ? 64 : 48}
-        minWidth={wide ? 64 : 48}
+        width={segmentWidth}
+        minWidth={segmentWidth}
         paddingHorizontal={0}
         maxLength={wide ? 5 : 3}
+        {...knobProps.controlType}
         {...(isWeb && disabled ? { tabIndex: -1 } : undefined)}
         onChangeText={(text) => {
           if (locked) return;
@@ -173,42 +124,43 @@ function DurationSegment({
         }}
         onBlur={locked ? undefined : commitDraft}
         onFocus={locked ? undefined : () => setDraft(String(value))}
-        onKeyDown={
-          locked
-            ? undefined
-            : (e: any) => {
-                const key = e?.nativeEvent?.key ?? e?.key;
-                if (key === "ArrowUp") {
-                  e?.preventDefault?.();
-                  setDraft(null);
-                  onCommit(value + 1);
-                } else if (key === "ArrowDown") {
-                  e?.preventDefault?.();
-                  setDraft(null);
-                  onCommit(Math.max(0, value - 1));
-                } else if (key === "Enter") {
-                  e?.preventDefault?.();
-                  commitDraft();
-                }
-              }
-        }
-        onPaste={
-          locked
-            ? undefined
-            : (e: any) => {
-                const text = String(e?.clipboardData?.getData?.("text") ?? "");
-                const parsed = parseDurationText(text);
-                if (parsed == null) return;
-                e?.preventDefault?.();
-                setDraft(null);
-                onPasteDuration(parsed);
-              }
-        }
+        {...(isWeb
+          ? ({
+              fontVariantNumeric: "tabular-nums",
+              onKeyDown: locked
+                ? undefined
+                : (e: any) => {
+                    const key = e?.nativeEvent?.key ?? e?.key;
+                    if (key === "ArrowUp") {
+                      e?.preventDefault?.();
+                      setDraft(null);
+                      onCommit(value + 1);
+                    } else if (key === "ArrowDown") {
+                      e?.preventDefault?.();
+                      setDraft(null);
+                      onCommit(Math.max(0, value - 1));
+                    } else if (key === "Enter") {
+                      e?.preventDefault?.();
+                      commitDraft();
+                    }
+                  },
+              onPaste: locked
+                ? undefined
+                : (e: any) => {
+                    const text = String(e?.clipboardData?.getData?.("text") ?? "");
+                    const parsed = parseDurationText(text);
+                    if (parsed == null) return;
+                    e?.preventDefault?.();
+                    setDraft(null);
+                    onPasteDuration(parsed);
+                  },
+            } as Record<string, unknown>)
+          : {})}
       />
       <Text
         {...knobProps.body}
+        {...knobProps.controlType}
         color={formCommonColors.muted}
-        fontSize="$2"
         textTransform="lowercase"
       >
         {unit}
@@ -249,7 +201,9 @@ function DurationControl({
   knobProps: KnobProps;
 }) {
   const parts = secondsToParts(seconds, hideDays);
-  const resolvedClock = clockIcon === undefined ? defaultClockIcon : clockIcon;
+  const sizeToken = String(size || knobProps.sizeToken);
+  const recipe = sizeRecipeForToken(sizeToken);
+  const resolvedClock = clockIcon === undefined ? <ClockIcon size={recipe.iconSize} /> : clockIcon;
 
   const commitParts = useCallback(
     (patch: Partial<DurationParts>) => {
@@ -266,9 +220,11 @@ function DurationControl({
         disabled={disabled}
         role="group"
         aria-label={hasLabel ? undefined : t("Duration")}
+        data-ring-target="box"
+        data-duration-box=""
       >
         <InputParts.Section>
-          <XStack alignItems="center" flex={1} width="100%" {...knobProps.gap}>
+          <XStack alignItems="center" flex={1} width="100%" gap={recipe.gap}>
             {resolvedClock != null ? (
               <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
             ) : null}
@@ -286,6 +242,7 @@ function DurationControl({
                 placeholder={placeholder}
                 required={required}
                 hasError={hasError}
+                sizeToken={sizeToken}
               />
             ) : null}
             <DurationSegment
@@ -302,6 +259,7 @@ function DurationControl({
               placeholder={hideDays ? placeholder : undefined}
               required={required}
               hasError={hasError}
+              sizeToken={sizeToken}
             />
             <DurationSegment
               id={`${id}-minutes`}
@@ -315,6 +273,7 @@ function DurationControl({
               knobProps={knobProps}
               required={required}
               hasError={hasError}
+              sizeToken={sizeToken}
             />
             {showSeconds ? (
               <DurationSegment
@@ -329,6 +288,7 @@ function DurationControl({
                 knobProps={knobProps}
                 required={required}
                 hasError={hasError}
+                sizeToken={sizeToken}
               />
             ) : null}
           </XStack>
@@ -342,14 +302,16 @@ function DurationPresets({
   seconds,
   presets,
   onChange,
+  knobProps,
 }: {
   seconds: number;
   presets: DurationPreset[];
   onChange: (seconds: number) => void;
+  knobProps: KnobProps;
 }) {
   if (presets.length === 0) return null;
   return (
-    <XStack gap="$1" flexWrap="wrap">
+    <XStack {...knobProps.gap} flexWrap="wrap" data-duration-presets="">
       {presets.map((preset) => {
         const selected = seconds === preset.seconds;
         return (
@@ -359,6 +321,7 @@ function DurationPresets({
             size="$2"
             outlined={!selected}
             accent={selected}
+            data-duration-preset={preset.label}
             onPress={() => onChange(preset.seconds)}
           >
             {preset.label}
@@ -443,6 +406,8 @@ export function Duration({
   const [internal, setInternal] = useState(() => normalizeSeconds(defaultValue ?? 0));
   const seconds = normalizeSeconds(isControlled ? value : internal);
   const inTableCell = useIsInTableCell();
+  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const visualHeight = getFieldHeight(resolvedSize);
 
   const handleChange = useCallback(
     (next: number, fieldChange?: (v: any) => void) => {
@@ -457,7 +422,14 @@ export function Duration({
   if (skeleton) {
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
+        <InputParts size={resolvedSize}>
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height={visualHeight}
+            data-duration-skeleton=""
+          />
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -481,7 +453,12 @@ export function Duration({
         knobProps={knobProps}
       />
       {readOnly || disabled || inTableCell ? null : (
-        <DurationPresets seconds={current} presets={presets} onChange={onValueChange} />
+        <DurationPresets
+          seconds={current}
+          presets={presets}
+          onChange={onValueChange}
+          knobProps={knobProps}
+        />
       )}
     </YStack>
   );

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -1,8 +1,58 @@
-import { act, fireEvent } from "@testing-library/react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import type { ReactElement } from "react";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { FileUpload } from "./index";
 
+// The stock @tamagui/config themes used by renderWithProviders carry a
+// different ramp than the house builder. The bento-derived dropzone asserts
+// TOKEN-level treatment ($color9 dash, $color3/$color6 LC-40 wash, $color12
+// remove disc), so mount the house builder's generated themes — the same
+// ones the app config uses — and read the per-scheme values off the theme
+// table itself (the Progress intent-spec precedent).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
+function renderWithHouseThemes(ui: ReactElement, scheme: "light" | "dark" = "light") {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+function getZone(container: Element): HTMLElement {
+  const zone = container.querySelector('[data-file-upload="dropzone"]') as HTMLElement | null;
+  expect(zone).toBeTruthy();
+  return zone as HTMLElement;
+}
+
+async function pickFile(container: Element, file: File) {
+  const input = container.querySelector("input[type='file']") as HTMLInputElement | null;
+  expect(input).toBeTruthy();
+  await act(async () => {
+    if (input) fireEvent.change(input, { target: { files: [file] } });
+  });
+}
+
 describe("FileUpload", () => {
   it("should render placeholder and upload button text", () => {
     const result = renderWithProviders(
@@ -127,3 +177,272 @@ describe("FileUpload", () => {
     expect(removeStops.length).toBeGreaterThan(0);
   });
 });
+
+// ── Bento-derived dropzone treatment (MPO-57) ────────────────────────────
+// Boards media-01..04 (docs/design/boards/W1-fileupload-bento) are the
+// numeric spec; bento-pickers-measured.md §2/§4 is the derivation. Assertions
+// ride Tamagui's atomic classes (token-level — the classes name the token and
+// the scheme flips the var) plus the house theme table for per-scheme values,
+// the Progress intent-spec precedent.
+describe("FileUpload bento-derived dropzone (MPO-57)", () => {
+  it.each(["light", "dark"] as const)(
+    "draws the dash 1px DASHED $color9 in the %s scheme (boards: rgb(77,77,77) light / rgb(133,133,133) dark)",
+    (scheme) => {
+      const { container } = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" />,
+        scheme,
+      );
+      const zone = getZone(container);
+      // The dash rides the legible $color9 step, not the near-invisible
+      // $borderColor hairline the pre-Bento zone drew.
+      expect(zone.className).toMatch(/_btc-color9/);
+      expect(zone.className).not.toMatch(/_btc-borderColor/);
+      // 1px DASHED (media-01 dz-rest: borderTopWidth 1px, borderTopStyle dashed)
+      expect(zone.className).toMatch(/-dashed/);
+      expect(zone.className).toMatch(/_btw-1px/);
+      // The token resolves to a real per-scheme value on the house table, and
+      // it is NOT the $borderColor tier the old dash used.
+      const theme = houseThemes[scheme];
+      expect(theme.color9).toBeTruthy();
+      expect(theme.color9).not.toBe(theme.borderColor);
+    },
+  );
+
+  it.each(["light", "dark"] as const)(
+    "keeps the zone ground transparent at rest in the %s scheme; only the LC-40 disabled wash paints it",
+    (scheme) => {
+      const rest = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" />,
+        scheme,
+      );
+      const restZone = getZone(rest.container);
+      // Transparent ground: no rest-state background atom other than
+      // `transparent` (hover/press state atoms are allowed — the held mpo
+      // $color4 hover flood is a state, not a ground).
+      expect(restZone.className).toMatch(/_bg-transparent/);
+      expect(restZone.className).not.toMatch(/_bg-(?!transparent|0hover|0active|0focus)/);
+
+      const disabled = renderWithHouseThemes(
+        <FileUpload label="Attachment" name="attachment" disabled />,
+        scheme,
+      );
+      const disabledZone = getZone(disabled.container);
+      // LC-40 keepLabel surface wash: $color3 fill on a $color6 edge.
+      expect(disabledZone.className).toMatch(/_bg-color3/);
+      expect(disabledZone.className).toMatch(/_btc-color6/);
+    },
+  );
+
+  it("renders no standalone glyph — the CTA carries the upload mark inside the 44 control", () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    const zone = getZone(container);
+    // The CTA is the house 44 control (held exception: Bento draws 36/$3).
+    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
+    expect(cta).toBeTruthy();
+    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+    // Every svg in the empty zone lives INSIDE the CTA — no standalone glyph.
+    const svgs = Array.from(zone.querySelectorAll("svg"));
+    expect(svgs.length).toBeGreaterThan(0);
+    for (const svg of svgs) {
+      expect(cta.contains(svg)).toBe(true);
+    }
+    // The caption sits below the CTA in the zone.
+    expect(zone.textContent).toContain("Drag a file into this area");
+  });
+
+  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (32 painted, hitSlop 44)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    // Rows live IN the zone, parted by the same dashed $color9 hairline —
+    // not the pre-Bento solid $color8 divider.
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    expect(flist.className).toMatch(/_btc-color9/);
+    expect(flist.className).toMatch(/-dashed/);
+    expect(flist.className).not.toMatch(/_btc-color8/);
+
+    // Name renders at body; the size is a SECOND LINE, BOLD.
+    expect(flist.textContent).toContain("hello.txt");
+    const sizeLine = Array.from(flist.querySelectorAll("span, div, p")).find((el) =>
+      /^5 Bytes$/.test(el.textContent ?? ""),
+    ) as HTMLElement;
+    expect(sizeLine).toBeTruthy();
+    expect(sizeLine.className).toMatch(/_fow-700/);
+
+    // Remove: a circular filled $color12 disc painted at nestedControl (32)
+    // with hitSlop restoring the 44 floor (data-mp-press-slop 6 → 32+12=44).
+    const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
+    expect(remove).toBeTruthy();
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.className).toMatch(/_bg-color12/);
+    // The inverse ✕ rides inside the disc.
+    expect(remove.querySelector("svg")).toBeTruthy();
+    // The caption is dropped once files exist; the CTA stays.
+    expect(zone.textContent).not.toContain("Drag a file into this area");
+    expect(zone.textContent).toContain("Choose File");
+  });
+
+  it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" compact />,
+    );
+    const zone = getZone(container);
+    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
+    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+    const remove = zone.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+  });
+
+  it("renders image picks with an in-zone preview thumb at the nested-chrome step", async () => {
+    if (typeof URL.createObjectURL !== "function") {
+      (URL as any).createObjectURL = () => "blob:mock";
+      (URL as any).revokeObjectURL = () => {};
+    }
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" accept="image/*" showPreview />,
+    );
+    await pickFile(container, new File(["fake-png-bytes"], "diagram.png", { type: "image/png" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    const thumb = flist.querySelector("img") as HTMLImageElement;
+    expect(thumb).toBeTruthy();
+    expect(thumb.getAttribute("alt")).toBe("diagram.png");
+  });
+});
+
+// ── Transfer lifecycle (MPO-55) ──────────────────────────────────────────
+// A chosen file used to jump straight into the populated list. The
+// in-flight row (name, size, progress, cancel) sits between choose and
+// commit; a transport failure keeps the file visible with retry + remove
+// (DG-VAL-04 / DG-VAL-05) and does not clear siblings. Cancel drops only
+// the in-flight row (LC-66).
+describe("FileUpload transfer lifecycle (MPO-55)", () => {
+  it("renders an in-flight row (name, size, progress, cancel) between choose and populated", async () => {
+    let release!: () => void;
+    const held = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const onChange = vi.fn();
+    const { container } = renderWithHouseThemes(
+      <FileUpload
+        label="Attachment"
+        name="attachment"
+        onChange={onChange}
+        onUpload={async (_file, { onProgress }) => {
+          onProgress(42);
+          await held;
+        }}
+      />,
+    );
+
+    await pickFile(container, new File(["hello"], "restore-log.txt", { type: "text/plain" }));
+
+    const flist = container.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+    expect(flist.textContent).toContain("restore-log.txt");
+    expect(flist.textContent).toMatch(/5 Bytes/);
+    const bar = flist.querySelector('[data-file-upload="progress"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute("role")).toBe("progressbar");
+    expect(bar.getAttribute("aria-valuenow")).toBe("42");
+    expect(flist.querySelector('[aria-label="Cancel restore-log.txt"]')).toBeTruthy();
+    expect(flist.querySelector('[aria-label="Remove restore-log.txt"]')).toBeNull();
+    expect(onChange).not.toHaveBeenCalled();
+
+    release();
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove restore-log.txt"]')).toBeTruthy();
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect((onChange.mock.calls[0][0] as File).name).toBe("restore-log.txt");
+  });
+
+  it("renders a failed row with retry and remove, leaving committed files intact", async () => {
+    const onUpload = vi.fn(async (file: File) => {
+      if (file.name === "wazuh-dump.sql") {
+        throw new Error("413 Payload Too Large");
+      }
+    });
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" multiple onUpload={onUpload} />,
+    );
+
+    await pickFile(container, new File(["ok"], "compose01.txt", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove compose01.txt"]')).toBeTruthy();
+    });
+
+    await pickFile(container, new File(["big"], "wazuh-dump.sql", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Retry wazuh-dump.sql"]')).toBeTruthy();
+    });
+
+    const flist = container.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist.textContent).toContain("413 Payload Too Large");
+    expect(flist.textContent).toContain("Try again or remove the file");
+    expect(flist.querySelector('[aria-label="Remove compose01.txt"]')).toBeTruthy();
+    expect(flist.querySelector('[aria-label="Remove wazuh-dump.sql"]')).toBeTruthy();
+    expect(flist.querySelector('[data-transfer-status="failed"]')).toBeTruthy();
+  });
+
+  it("cancel during transfer removes the in-flight row without touching committed files", async () => {
+    let hold!: () => void;
+    const held = new Promise<void>((resolve) => {
+      hold = resolve;
+    });
+    const onChange = vi.fn();
+    const onUpload = vi.fn(
+      async (file: File, { onProgress }: { onProgress: (n: number) => void }) => {
+        if (file.name === "in-flight.bin") {
+          onProgress(10);
+          await held;
+        }
+      },
+    );
+    const { container } = renderWithHouseThemes(
+      <FileUpload
+        label="Attachment"
+        name="attachment"
+        multiple
+        onChange={onChange}
+        onUpload={onUpload}
+      />,
+    );
+
+    await pickFile(container, new File(["ok"], "kept.txt", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Remove kept.txt"]')).toBeTruthy();
+    });
+    const committedCalls = onChange.mock.calls.length;
+
+    await pickFile(container, new File(["xx"], "in-flight.bin", { type: "text/plain" }));
+    await waitFor(() => {
+      expect(container.querySelector('[aria-label="Cancel in-flight.bin"]')).toBeTruthy();
+    });
+
+    await act(async () => {
+      const cancel = container.querySelector('[aria-label="Cancel in-flight.bin"]') as HTMLElement;
+      fireEvent.click(cancel);
+    });
+
+    expect(container.querySelector('[aria-label="Cancel in-flight.bin"]')).toBeNull();
+    expect(container.querySelector('[data-file-upload="progress"]')).toBeNull();
+    expect(container.querySelector('[aria-label="Remove kept.txt"]')).toBeTruthy();
+    expect(container.textContent).toContain("kept.txt");
+    expect(container.textContent).not.toContain("in-flight.bin");
+    expect(onChange.mock.calls.length).toBe(committedCalls);
+    hold();
+  });
+});