File Upload Pipeline

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence, type Transition } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import {
8  useReducedMotion,
9  useDisclosure,
10  useCopy,
11  statusVars,
12  type StatusTone,
13} from "@/lib/motiq";
14 
15/* --------------------------------------------------------------------------
16 * FileUploadPipeline — a presentation-only view of an upload queue with
17 * per-item progress, pause/resume, retry, cancel, processing stages, and
18 * partial-failure handling. It is the *panel*, not the *uploader*.
19 *
20 * The host APPLICATION owns uploading. This component never opens an XHR/fetch,
21 * never reads a File body, and never advances `progress` on its own — it renders
22 * the `items` it is given and calls back (`onPause`, `onRetry`, `onAddFiles`, …)
23 * so the app can drive the real transfer (or drive nothing, in a static demo).
24 * There is no built-in adapter; wiring the component to a transport is the app's
25 * job. This keeps it transport-agnostic (fetch, XHR, tus, S3 multipart, RSC
26 * actions) and SSR-safe.
27 *
28 * Accessibility is first-class: a real `<input type="file">` integration point
29 * plus a keyboard-accessible Browse button as the drop-zone alternative; every
30 * in-flight item exposes `role="progressbar"` with `aria-valuenow/min/max` and a
31 * text `aria-valuetext`; status is always conveyed with an icon AND text (never
32 * colour alone); errors are associated to their row via `aria-describedby`; and
33 * the polite live region announces STATUS TRANSITIONS ONLY — never per-percent —
34 * so a screen reader isn't flooded during a transfer. Under
35 * `prefers-reduced-motion` rows appear without offset and progress bars snap.
36 * Clean-room original.
37 *
38 * PERFORMANCE. The component performs no per-frame React state updates: bar
39 * width is set from the app-supplied `progress` and eased purely in CSS, so a
40 * fast upload does not re-render React 60×/s (the app should throttle its own
41 * `progress` writes to a few per second). THUMBNAIL CLEANUP is the app's
42 * responsibility — if you pass `thumbnail` as an `URL.createObjectURL(...)`
43 * blob URL, revoke it when the item leaves `items` (this component does not,
44 * because it did not create the URL). For very large queues (hundreds of
45 * concurrent items) wrap the list in your own virtualizer — this component
46 * renders every item it is given.
47 * ----------------------------------------------------------------------- */
48 
49// … truncated