@cosmicdrift/kumiko-renderer-web 0.183.2 → 0.185.0

package/src/primitives/index.tsx

@@ -90,6 +90,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "./dropdown-menu";
+import { EmbeddedListInput } from "./embedded-list-input";
 import { FileUploadInput } from "./file-upload";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
@@ -143,15 +144,19 @@ function DefaultButton({
   width = "auto",
   children,
   testId,
+  className,
+  ref,
 }: ButtonProps): ReactNode {
   // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
   // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
-  const className =
-    [variant === "link" ? "h-auto px-0 py-0" : "", width === "full" ? "w-full" : ""]
-      .filter(Boolean)
-      .join(" ") || undefined;
+  const resolvedClassName = cn(
+    variant === "link" ? "h-auto px-0 py-0" : "",
+    width === "full" ? "w-full" : "",
+    className,
+  );
   return (
     <UiButton
+      ref={ref}
       type={type}
       onClick={onClick}
       disabled={disabled === true || loading === true}
@@ -160,7 +165,7 @@ function DefaultButton({
       variant={BUTTON_VARIANT[variant]}
       size={BUTTON_SIZE[size]}
       aria-label={ariaLabel}
-      className={className}
+      className={resolvedClassName}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>
@@ -1884,6 +1889,7 @@ export const defaultPrimitives: CorePrimitives = {
   Field: DefaultField,
   Input: DefaultInput,
   DataTable: DefaultDataTable,
+  EmbeddedListInput,
   Form: DefaultForm,
   Section: DefaultSection,
   Card: DefaultCard,

package/src/widgets/__tests__/infinity-list.test.tsx

@@ -1,8 +1,14 @@
 import { describe, expect, test } from "bun:test";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import {
+  DispatcherProvider,
+  type LiveEvent,
+  type LiveEventSubscriber,
+  LiveEventsProvider,
+} from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import {
+  act,
   createMockDispatcher,
   fireEvent,
   render,
@@ -11,6 +17,30 @@ import {
 } from "../../__tests__/test-utils";
 import { InfinityList } from "../infinity-list";
 
+// Fake LiveEventSubscriber for live-mode tests — collects subscribers,
+// `inject(type, data)` fires the ones matching `data.aggregateType`.
+// Same shape as production; mirrors use-query-live.test.tsx's helper.
+function makeFakeLiveEvents(): {
+  subscriber: LiveEventSubscriber;
+  inject: (type: string, data: LiveEvent["data"]) => void;
+} {
+  const listeners = new Set<{ entity: string; cb: (e: LiveEvent) => void }>();
+  return {
+    subscriber: (entity, cb) => {
+      const entry = { entity, cb };
+      listeners.add(entry);
+      return () => {
+        listeners.delete(entry);
+      };
+    },
+    inject: (type, data) => {
+      for (const l of listeners) {
+        if (l.entity === data.aggregateType) l.cb({ type, data });
+      }
+    },
+  };
+}
+
 // jsdom has no IntersectionObserver — stub stores the callback per observer
 // so tests can fire the "sentinel became visible" event manually instead of
 // simulating real scrolling.
@@ -32,6 +62,14 @@ function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
   return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
 }
 
+function renderWithLive(ui: ReactNode, dispatcher: Dispatcher, liveEvents: LiveEventSubscriber) {
+  return render(
+    <DispatcherProvider dispatcher={dispatcher}>
+      <LiveEventsProvider value={liveEvents}>{ui}</LiveEventsProvider>
+    </DispatcherProvider>,
+  );
+}
+
 type Row = { readonly id: string; readonly subject: string };
 type Page = { readonly rows: readonly Row[]; readonly nextCursor: string | null };
 
@@ -183,4 +221,203 @@ describe("InfinityList", () => {
     expect(screen.queryByText("Bo-Treffer")).toBeNull();
     expect(screen.getByText("Bob-Treffer")).toBeTruthy();
   });
+
+  // fw#1827: InfinityList used dispatcher.query directly and never subscribed
+  // to live events, so a solon inbox stayed stale until the user reloaded.
+  describe("Live-Mode", () => {
+    test("SSE-Event mergt nur die erste Seite, bereits geladene Folgeseiten bleiben erhalten", async () => {
+      const calls: Array<Readonly<Record<string, unknown>>> = [];
+      const dispatcher = createMockDispatcher({
+        query: ((_type: string, payload: Readonly<Record<string, unknown>>) => {
+          calls.push(payload);
+          if (calls.length === 1) {
+            return Promise.resolve({
+              isSuccess: true,
+              data: { rows: [{ id: "m1", subject: "Alt-1" }], nextCursor: "c1" },
+            });
+          }
+          if (calls.length === 2) {
+            return Promise.resolve({
+              isSuccess: true,
+              data: { rows: [{ id: "m2", subject: "Alt-2" }], nextCursor: null },
+            });
+          }
+          // Live refresh of the first page: m1 stays, a new row lands on top.
+          return Promise.resolve({
+            isSuccess: true,
+            data: {
+              rows: [
+                { id: "m3", subject: "Neu" },
+                { id: "m1", subject: "Alt-1" },
+              ],
+              nextCursor: "c1",
+            },
+          });
+        }) as unknown as Dispatcher["query"],
+      });
+      const fake = makeFakeLiveEvents();
+
+      renderWithLive(
+        <InfinityList<Page, Row>
+          query="inbox:query:message:list"
+          pageSize={1}
+          rows={(data) => data.rows}
+          nextCursor={(data) => data.nextCursor}
+          rowId={(row) => row.id}
+          renderRow={(row) => <span>{row.subject}</span>}
+          testId="inbox"
+        />,
+        dispatcher,
+        fake.subscriber,
+      );
+
+      await waitFor(() => expect(screen.getByText("Alt-1")).toBeTruthy());
+      fireIntersect();
+      await waitFor(() => expect(screen.getByText("Alt-2")).toBeTruthy());
+      expect(calls.length).toBe(2);
+
+      act(() => {
+        fake.inject("message.created", {
+          id: "m3",
+          aggregateType: "message",
+          version: 1,
+          payload: {},
+          createdAt: "",
+        });
+      });
+
+      await waitFor(() => expect(screen.getByText("Neu")).toBeTruthy());
+      expect(screen.getByText("Alt-1")).toBeTruthy();
+      expect(screen.getByText("Alt-2")).toBeTruthy();
+      expect(screen.getAllByText("Alt-1").length).toBe(1);
+
+      // The live refresh only requests the first page — no cursor in the payload.
+      expect(calls[2]).toEqual({ limit: 1 });
+    });
+
+    test("live=false: SSE-Event wird ignoriert, kein Refetch", async () => {
+      let calls = 0;
+      const dispatcher = createMockDispatcher({
+        query: (() => {
+          calls += 1;
+          return Promise.resolve({
+            isSuccess: true,
+            data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+          });
+        }) as unknown as Dispatcher["query"],
+      });
+      const fake = makeFakeLiveEvents();
+
+      renderWithLive(
+        <InfinityList<Page, Row>
+          query="inbox:query:message:list"
+          live={false}
+          rows={(data) => data.rows}
+          nextCursor={(data) => data.nextCursor}
+          rowId={(row) => row.id}
+          renderRow={(row) => <span>{row.subject}</span>}
+          testId="inbox"
+        />,
+        dispatcher,
+        fake.subscriber,
+      );
+
+      await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+
+      fake.inject("message.created", {
+        id: "m2",
+        aggregateType: "message",
+        version: 1,
+        payload: {},
+        createdAt: "",
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      expect(calls).toBe(1);
+    });
+
+    test("nur Events für die Query-Entity triggern den Refresh", async () => {
+      let calls = 0;
+      const dispatcher = createMockDispatcher({
+        query: (() => {
+          calls += 1;
+          return Promise.resolve({
+            isSuccess: true,
+            data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+          });
+        }) as unknown as Dispatcher["query"],
+      });
+      const fake = makeFakeLiveEvents();
+
+      renderWithLive(
+        <InfinityList<Page, Row>
+          query="inbox:query:message:list"
+          rows={(data) => data.rows}
+          nextCursor={(data) => data.nextCursor}
+          rowId={(row) => row.id}
+          renderRow={(row) => <span>{row.subject}</span>}
+          testId="inbox"
+        />,
+        dispatcher,
+        fake.subscriber,
+      );
+
+      await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+
+      fake.inject("note.created", {
+        id: "n1",
+        aggregateType: "note",
+        version: 1,
+        payload: {},
+        createdAt: "",
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      expect(calls).toBe(1);
+    });
+
+    // A live event arriving while the mount fetch is still in flight must not
+    // discard that fetch — it's the normal case for #1827's own scenario (a
+    // screen mounts while writes are already streaming in).
+    test("SSE-Event während der ersten Ladephase lässt die Mount-Anfrage trotzdem landen", async () => {
+      const resolvers: Array<(res: unknown) => void> = [];
+      const dispatcher = createMockDispatcher({
+        query: (() =>
+          new Promise((resolve) => {
+            resolvers.push(resolve);
+          })) as unknown as Dispatcher["query"],
+      });
+      const fake = makeFakeLiveEvents();
+
+      renderWithLive(list("inbox:query:message:list"), dispatcher, fake.subscriber);
+
+      await waitFor(() => expect(resolvers.length).toBe(1));
+
+      act(() => {
+        fake.inject("message.created", {
+          id: "m2",
+          aggregateType: "message",
+          version: 1,
+          payload: {},
+          createdAt: "",
+        });
+      });
+      await waitFor(() => expect(resolvers.length).toBe(2));
+
+      act(() => {
+        resolvers[0]?.({
+          isSuccess: true,
+          data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+        });
+      });
+      act(() => {
+        resolvers[1]?.({
+          isSuccess: true,
+          data: { rows: [{ id: "m1", subject: "Hallo" }], nextCursor: null },
+        });
+      });
+
+      await waitFor(() => expect(screen.getByText("Hallo")).toBeTruthy());
+    });
+  });
 });

package/src/widgets/__tests__/upload-zone.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, mock, test } from "bun:test";
+import { fireEvent, render, screen, waitFor } from "../../__tests__/test-utils";
+import { UploadZone } from "../upload-zone";
+
+function pick(input: HTMLElement, files: readonly File[]): void {
+  Object.defineProperty(input, "files", { value: files, configurable: true });
+  fireEvent.change(input);
+}
+
+describe("UploadZone", () => {
+  test("lädt eine Datei hoch und zeigt den done-Status", async () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "report.pdf", { type: "application/pdf" });
+    pick(screen.getByTestId("zone-input"), [file]);
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(file);
+    await waitFor(() => expect(screen.getByText("report.pdf")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("Uploaded")).toBeTruthy());
+  });
+
+  test("zeigt die Fehlermeldung wenn onUpload wirft", async () => {
+    const onUpload = mock(async () => {
+      throw new Error("too_large");
+    });
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const file = new File(["hi"], "huge.pdf", { type: "application/pdf" });
+    pick(screen.getByTestId("zone-input"), [file]);
+
+    await waitFor(() => expect(screen.getByText("too_large")).toBeTruthy());
+    expect(screen.getByText("Failed")).toBeTruthy();
+  });
+
+  test("multiple=false nimmt nur die erste Datei", async () => {
+    const onUpload = mock(async () => {});
+    render(
+      <UploadZone title="Datei hochladen" onUpload={onUpload} multiple={false} testId="zone" />,
+    );
+    const a = new File(["a"], "a.pdf");
+    const b = new File(["b"], "b.pdf");
+    pick(screen.getByTestId("zone-input"), [a, b]);
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(onUpload).toHaveBeenCalledWith(a);
+  });
+
+  test("resettet den Input nach dem Upload-Batch", async () => {
+    const onUpload = mock(async () => {});
+    render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+    const input = screen.getByTestId("zone-input") as HTMLInputElement;
+    pick(input, [new File(["a"], "a.pdf")]);
+
+    await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+    expect(input.value).toBe("");
+  });
+});

package/src/widgets/index.ts

@@ -56,4 +56,5 @@ export { SectionCard } from "./section-card";
 export { MiniStat, Sparkline, StatCard, type StatDelta, type StatTone } from "./stat";
 export { EmptyState, ErrorState, LoadingState } from "./states";
 export { STATUS_TONE_TEXT, StatusBadge, type StatusTone } from "./status-badge";
+export { UploadZone, type UploadZoneProps } from "./upload-zone";
 export { useDraft } from "./use-draft";

package/src/widgets/infinity-list.tsx

@@ -1,5 +1,10 @@
 import type { DispatcherError } from "@cosmicdrift/kumiko-headless";
-import { useDispatcher, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import {
+  entityFromQueryType,
+  useDispatcher,
+  useLiveEvents,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { EmptyState, ErrorState, LoadingState } from "./states";
 
@@ -12,11 +17,19 @@ export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, un
   readonly rows: (data: TData) => readonly TRow[];
   /** Pull the next-page cursor from the result; `null` means last page. */
   readonly nextCursor: (data: TData) => string | null;
+  /** Must derive from row content (e.g. `row.id`), not from `index` — a
+   *  live refresh reorders rows (new/changed rows move to the front). */
   readonly rowId: (row: TRow, index: number) => string;
   readonly renderRow: (row: TRow) => ReactNode;
   readonly emptyState?: ReactNode;
   readonly className?: string;
   readonly testId?: string;
+  /** Subscribe to SSE events for the entity parsed from `query`
+   *  (`<feature>:query:<entity>:<verb>`) and refetch the first page on
+   *  any create/update/delete/restore event, merging it into the
+   *  already-accumulated rows instead of collapsing them — see
+   *  `useQuery`'s `live` option for the same convention. Default true. */
+  readonly live?: boolean;
 };
 
 type State<TRow> =
@@ -40,21 +53,26 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
   emptyState,
   className,
   testId,
+  live = true,
 }: InfinityListProps<TData, TRow>): ReactNode {
   const dispatcher = useDispatcher();
   const t = useTranslation();
+  const subscribeLive = useLiveEvents();
   const [state, setState] = useState<State<TRow>>({ kind: "loading" });
   const sentinelRef = useRef<HTMLDivElement | null>(null);
   const payloadKey = JSON.stringify(payload ?? {});
 
-  // rows/nextCursor are fresh closures on every caller render (inline
-  // arrow props). As useCallback deps that would recreate `load` every
-  // render → the mount effect below would refetch in a loop. Refs keep
-  // `load` stable while always reading the current selector.
+  // rows/nextCursor/rowId are fresh closures on every caller render
+  // (inline arrow props). As useCallback deps that would recreate
+  // `load`/`refreshFirstPage` every render → the effects below would
+  // refetch in a loop. Refs keep them stable while always reading the
+  // current selector.
   const rowsRef = useRef(rows);
   rowsRef.current = rows;
   const nextCursorRef = useRef(nextCursor);
   nextCursorRef.current = nextCursor;
+  const rowIdRef = useRef(rowId);
+  rowIdRef.current = rowId;
 
   // Discards a response whose request was superseded by a newer one before
   // it resolved (e.g. two searches fired in quick succession) — without
@@ -94,6 +112,46 @@ export function InfinityList<TData = unknown, TRow = Readonly<Record<string, unk
     };
   }, [load]);
 
+  // Live-mode: on an SSE event for the query's entity, refetch only the
+  // first page and merge it in — rows the fresh page still contains move
+  // to the front (newest-first feeds), rows it dropped (edited/deleted
+  // elsewhere) are pruned, and everything beyond page 1 stays untouched.
+  // A full reload would collapse already-accumulated pages and jump the
+  // scroll position; see fw#1827.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
+  const refreshFirstPage = useCallback(async (): Promise<void> => {
+    // Read, don't bump: a concurrent load() (e.g. the mount fetch still
+    // in flight) must still land. Bumping here would make load()'s own
+    // sequence check discard it, and the refresh below then bails on
+    // `prev.kind !== "ready"` — the list gets stuck in loading forever.
+    const seqAtStart = requestSeq.current;
+    const res = await dispatcher.query<TData>(query, { ...payload, limit: pageSize });
+    if (seqAtStart !== requestSeq.current) return;
+    // skip: background live refresh failed, keep showing the current rows
+    if (!res.isSuccess) return;
+    const freshRows = rowsRef.current(res.data);
+    const freshIds = new Set(freshRows.map((row, index) => rowIdRef.current(row, index)));
+    setState((prev) => {
+      // skip: not showing an accumulated list yet, nothing to merge into
+      if (prev.kind !== "ready") return prev;
+      const staleRows = prev.rows.filter(
+        (row, index) => !freshIds.has(rowIdRef.current(row, index)),
+      );
+      return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };
+    });
+  }, [dispatcher, query, pageSize, payloadKey]);
+
+  useEffect(() => {
+    // skip: live mode off, no SSE subscription needed
+    if (!live) return;
+    const entity = entityFromQueryType(query);
+    // skip: query type has no mapped entity, nothing to subscribe to
+    if (entity === undefined) return;
+    return subscribeLive(entity, () => {
+      void refreshFirstPage();
+    });
+  }, [live, query, refreshFirstPage, subscribeLive]);
+
   useEffect(() => {
     const sentinel = sentinelRef.current;
     // skip: no further page or not ready yet — observer not needed

package/src/widgets/upload-zone.tsx

@@ -0,0 +1,158 @@
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
+import { type DragEvent, type ReactNode, useId, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+type UploadRowStatus = "uploading" | "done" | "error";
+
+type UploadRow = {
+  readonly id: string;
+  readonly fileName: string;
+  readonly status: UploadRowStatus;
+  readonly error?: string;
+};
+
+const STATUS_ICON: Record<UploadRowStatus, ReactNode> = {
+  uploading: <Loader2 className="size-3.5 animate-spin text-muted-foreground" aria-hidden="true" />,
+  done: <CheckCircle2 className="size-3.5 text-primary" aria-hidden="true" />,
+  error: <TriangleAlert className="size-3.5 text-destructive" aria-hidden="true" />,
+};
+
+const STATUS_LABEL_KEY: Record<UploadRowStatus, string> = {
+  uploading: "kumiko.widget.upload.uploading",
+  done: "kumiko.widget.upload.done",
+  error: "kumiko.widget.upload.error",
+};
+
+export type UploadZoneProps = {
+  /** Uploads a single file (POST + optional follow-up mutation). Throws on
+   *  failure — the message ends up in the row's error line. Runs in
+   *  parallel per file within a batch (no sequential waiting). */
+  readonly onUpload: (file: File) => Promise<void>;
+  readonly title: ReactNode;
+  readonly hint?: ReactNode;
+  readonly accept?: readonly string[];
+  /** Allow multiple files per pick/drop. Defaults to true. */
+  readonly multiple?: boolean;
+  readonly disabled?: boolean;
+  readonly testId?: string;
+};
+
+// "jpg" → ".jpg", "image/png" stays as-is. Empty list → no accept attribute.
+function toAcceptAttr(accept?: readonly string[]): string | undefined {
+  if (accept === undefined || accept.length === 0) return undefined;
+  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
+}
+
+/** Drop zone + multi-file picker with a per-file status row (uploading/done/
+ *  error). For screens that accept several files and upload them
+ *  independently — unlike `FileField` (single file, FileRef value inside a
+ *  form field). `onUpload` decides what "upload" means (storage POST, ingest
+ *  mutation, or both); the zone only tracks uploading/done/error. */
+export function UploadZone({
+  onUpload,
+  title,
+  hint,
+  accept,
+  multiple = true,
+  disabled,
+  testId,
+}: UploadZoneProps): ReactNode {
+  const t = useTranslation();
+  const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [rows, setRows] = useState<readonly UploadRow[]>([]);
+  const [dragOver, setDragOver] = useState(false);
+
+  async function uploadOne(file: File): Promise<void> {
+    const rowId = crypto.randomUUID();
+    setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
+    try {
+      await onUpload(file);
+      setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
+    } catch (cause) {
+      const message = cause instanceof Error ? cause.message : "upload_failed";
+      setRows((prev) =>
+        prev.map((row) => (row.id === rowId ? { ...row, status: "error", error: message } : row)),
+      );
+    }
+  }
+
+  async function uploadFiles(files: FileList | null): Promise<void> {
+    if (files === null || files.length === 0) return;
+    const picked = multiple ? Array.from(files) : files[0] !== undefined ? [files[0]] : [];
+    await Promise.all(picked.map((file) => uploadOne(file)));
+    // Reset so re-picking the SAME file still fires change — the browser
+    // suppresses the event otherwise.
+    if (inputRef.current) inputRef.current.value = "";
+  }
+
+  function handleDrop(e: DragEvent<HTMLLabelElement>): void {
+    e.preventDefault();
+    setDragOver(false);
+    if (disabled === true) return;
+    void uploadFiles(e.dataTransfer.files);
+  }
+
+  const acceptAttr = toAcceptAttr(accept);
+
+  return (
+    <div data-testid={testId} className="flex flex-col gap-4">
+      <label
+        htmlFor={inputId}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (disabled !== true) setDragOver(true);
+        }}
+        onDragLeave={(e) => {
+          if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
+            setDragOver(false);
+          }
+        }}
+        onDrop={handleDrop}
+        data-testid={testId !== undefined ? `${testId}-dropzone` : undefined}
+        className={cn(
+          "flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2",
+          dragOver ? "border-primary bg-muted/40" : "border-border",
+          disabled === true && "cursor-not-allowed opacity-50",
+        )}
+      >
+        <Upload className="size-8 text-muted-foreground" aria-hidden="true" />
+        <span className="text-sm">{title}</span>
+        {hint !== undefined && <span className="text-sm text-muted-foreground">{hint}</span>}
+        <input
+          ref={inputRef}
+          id={inputId}
+          type="file"
+          multiple={multiple}
+          className="sr-only"
+          data-testid={testId !== undefined ? `${testId}-input` : undefined}
+          disabled={disabled}
+          {...(acceptAttr !== undefined && { accept: acceptAttr })}
+          onChange={(e) => void uploadFiles(e.target.files)}
+        />
+      </label>
+      {rows.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {rows.map((row) => (
+            <li
+              key={row.id}
+              data-testid={testId !== undefined ? `${testId}-row` : undefined}
+              className="flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2"
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <FileUp className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+                <span className="truncate text-sm">{row.fileName}</span>
+              </div>
+              <output className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+                {STATUS_ICON[row.status]}
+                <span className="sr-only">{t(STATUS_LABEL_KEY[row.status])}</span>
+                {row.status === "error" && row.error !== undefined && <span>{row.error}</span>}
+              </output>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}