upload-motion 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4017 @@
+'use client';
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_core = require("./core-jiCtXcMo.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/context.tsx
+const UploaderContext = /* @__PURE__ */ (0, react.createContext)(null);
+/** Access the nearest `<Uploader>` / `<FileUpload>` state and actions. */
+function useUploaderContext() {
+	const context = (0, react.useContext)(UploaderContext);
+	if (!context) throw new Error("upload-motion: this component must be rendered inside <Uploader> or <FileUpload>.");
+	return context;
+}
+function getFileHelpers(context, item) {
+	return {
+		remove: () => context.remove(item.id),
+		cancel: () => context.cancel(item.id),
+		retry: () => context.retry(item.id),
+		pause: () => context.pause(item.id),
+		resume: () => context.resume(item.id),
+		start: () => context.start(item.id),
+		labels: context.labels
+	};
+}
+//#endregion
+//#region src/hooks/utils.ts
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeReducedMotion(callback) {
+	if (typeof window === "undefined" || !window.matchMedia) return () => {};
+	const query = window.matchMedia(REDUCED_QUERY);
+	query.addEventListener("change", callback);
+	return () => query.removeEventListener("change", callback);
+}
+/** `true` when the OS asks for reduced motion. Always `false` during SSR. */
+function usePrefersReducedMotion() {
+	return (0, react.useSyncExternalStore)(subscribeReducedMotion, () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(REDUCED_QUERY).matches : false, () => false);
+}
+/**
+* Returns `true` for `duration` ms after `flag` flips from false to true.
+* Does not fire for values that were already true on mount, so items that
+* finished before they rendered don't replay celebrations.
+*/
+function useBecameTrue(flag, duration) {
+	const previous = (0, react.useRef)(flag);
+	const [active, setActive] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		const was = previous.current;
+		previous.current = flag;
+		if (!flag || was) {
+			if (!flag) setActive(false);
+			return;
+		}
+		setActive(true);
+		const timer = setTimeout(() => setActive(false), duration);
+		return () => clearTimeout(timer);
+	}, [flag, duration]);
+	return active;
+}
+/** Deterministic PRNG so decorative randomness is stable between renders and SSR. */
+function seededRandom(seed) {
+	let h = 1779033703 ^ seed.length;
+	for (let i = 0; i < seed.length; i += 1) {
+		h = Math.imul(h ^ seed.charCodeAt(i), 3432918353);
+		h = h << 13 | h >>> 19;
+	}
+	let state = h >>> 0;
+	return () => {
+		state = state + 1831565813 | 0;
+		let t = Math.imul(state ^ state >>> 15, 1 | state);
+		t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function cx(...parts) {
+	return parts.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/icons/index.tsx
+function Svg({ size = 20, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.8,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const UploadIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 15V4" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m7 8.5 5-5 5 5" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" })
+	]
+});
+const CloudIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 8.5a4.5 4.5 0 0 1-.5 9.5" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 13v8" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m8.5 16.5 3.5-3.5 3.5 3.5" })
+	]
+});
+const PauseIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	strokeWidth: 2.4,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 6v12M15 6v12" })
+});
+const PlayIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M8 5.5v13l10.5-6.5z",
+		fill: "currentColor",
+		stroke: "none"
+	})
+});
+const CloseIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6 6 18" })
+});
+const RetryIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 11a8 8 0 1 0-2.3 5.7" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 4v7h-7" })]
+});
+const TrashIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" })
+});
+const AlertIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 3 2 20h20L12 3z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 10v4M12 17.2v.1" })]
+});
+const ExpandIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5" })
+});
+const CollapseIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 4l-6 6M14 5v5h5M4 20l6-6M10 19v-5H5" })
+});
+const MoreIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	strokeWidth: 2.8,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5.5v.01M12 12v.01M12 18.5v.01" })
+});
+const PlusIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" })
+});
+const ImageIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "3.5",
+			y: "3.5",
+			width: "17",
+			height: "17",
+			rx: "3"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "9",
+			cy: "9",
+			r: "1.8"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m20.5 15.5-5-5-9 9" })
+	]
+});
+const VideoIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "12",
+		cy: "12",
+		r: "8.5"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.2 8.8v6.4l5.2-3.2z" })]
+});
+const MusicIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M9 17.5V6l11-2v11.5" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "6.5",
+			cy: "17.5",
+			r: "2.5"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "17.5",
+			cy: "15.5",
+			r: "2.5"
+		})
+	]
+});
+const DocumentIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 3v5h5M9 13h6M9 17h4" })]
+});
+const SheetIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "4",
+		y: "4",
+		width: "16",
+		height: "16",
+		rx: "2"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 10h16M4 15h16M10 4v16" })]
+});
+const SlidesIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		x: "3",
+		y: "4",
+		width: "18",
+		height: "12",
+		rx: "2"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 16v4M8 20h8" })]
+});
+const ArchiveIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "4",
+			y: "3",
+			width: "16",
+			height: "18",
+			rx: "2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 3v2M12 7v2M12 11v2" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "10",
+			y: "14",
+			width: "4",
+			height: "4",
+			rx: "1"
+		})
+	]
+});
+const CodeIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14" })
+});
+const DataIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 4c-2 0-2 1.5-2 3s0 3-2 5c2 2 2 3.5 2 5s0 3 2 3M16 4c2 0 2 1.5 2 3s0 3 2 5c-2 2-2 3.5-2 5s0 3-2 3" })
+});
+const TextIcon = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+	...p,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 6h14M5 10h14M5 14h10M5 18h7" })
+});
+const FileIconGlyph = (p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+	...p,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 3v5h5" })]
+});
+const KIND_ICONS = {
+	image: ImageIcon,
+	video: VideoIcon,
+	audio: MusicIcon,
+	pdf: DocumentIcon,
+	document: DocumentIcon,
+	spreadsheet: SheetIcon,
+	presentation: SlidesIcon,
+	archive: ArchiveIcon,
+	code: CodeIcon,
+	data: DataIcon,
+	text: TextIcon,
+	unknown: FileIconGlyph
+};
+//#endregion
+//#region src/components/Dropzone.tsx
+/** Drop target. Click anywhere (outside inner controls) to open the file dialog; paste works while focused. */
+function UploadDropzone({ children, className, style, focusable, trackPointer, ...rest }) {
+	const { dropzone, labels, hintId, disabled } = useUploaderContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...dropzone.getRootProps({
+			focusable,
+			trackPointer,
+			"aria-label": focusable ? rest["aria-label"] ?? labels.zoneLabel : void 0,
+			"aria-describedby": hintId
+		}),
+		className: cx("um-zone", className),
+		style,
+		"data-um-disabled": disabled || void 0,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropzoneContent, {})
+	});
+}
+/** Default zone content: icon, headline, browse button and limits hint. */
+function DropzoneContent({ icon, title }) {
+	const { dropzone, labels } = useUploaderContext();
+	const headline = dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : title ?? labels.dropTitle;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "um-zone__content",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-zone__icon",
+				children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 22 })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-zone__title",
+				children: headline
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "link" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+		]
+	});
+}
+function UploadHint({ className }) {
+	const { hint, hintId } = useUploaderContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		id: hintId,
+		className: cx("um-hint", className),
+		children: hint
+	});
+}
+/** Keyboard-accessible trigger for the native file dialog. */
+function BrowseButton({ children, className, variant = "soft", ...rest }) {
+	const { openFileDialog, labels, disabled, hintId } = useUploaderContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: cx("um-btn", `um-btn--${variant}`, className),
+		onClick: (event) => {
+			event.stopPropagation();
+			openFileDialog();
+		},
+		disabled,
+		"aria-describedby": hintId,
+		"aria-label": rest["aria-label"],
+		children: children ?? labels.browse
+	});
+}
+/** Starts pending uploads in manual mode (`autoUpload={false}`). Shows aggregate progress while uploading. */
+function StartUploadButton({ className, children }) {
+	const { totals, start, labels, transport } = useUploaderContext();
+	const uploading = totals.active > 0;
+	const percent = Math.round(totals.progress * 100);
+	const disabled = transport === "none" || totals.pending === 0 && !uploading;
+	const done = !uploading && totals.pending === 0 && totals.isComplete;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: cx("um-btn", "um-btn--solid", "um-start-btn", className),
+		"data-state": uploading ? "uploading" : done ? "done" : "idle",
+		style: { "--um-p": totals.progress },
+		disabled,
+		"aria-disabled": uploading || void 0,
+		onClick: (event) => {
+			event.stopPropagation();
+			if (!uploading) start();
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-start-btn__fill",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-start-btn__label",
+			children: uploading ? `${labels.status.uploading} ${percent}%` : done ? `✓ ${labels.status.success}` : children ?? (totals.pending > 1 ? `${labels.upload} ${totals.pending} files` : labels.upload)
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/useListAnimation.ts
+/**
+* Keeps removed items rendered for `exitMs` so they can animate out.
+* Removed items are re-inserted at their previous index.
+*/
+function usePresence(items, exitMs) {
+	const previous = (0, react.useRef)(items);
+	const [exiting, setExiting] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const timers = (0, react.useRef)(/* @__PURE__ */ new Set());
+	useIsomorphicLayoutEffect(() => {
+		const before = previous.current;
+		previous.current = items;
+		if (exitMs <= 0 || before === items) return;
+		const ids = new Set(items.map((item) => item.id));
+		const removed = before.flatMap((item, index) => ids.has(item.id) ? [] : [{
+			item,
+			index
+		}]);
+		if (removed.length === 0) return;
+		setExiting((map) => {
+			const next = new Map(map);
+			for (const entry of removed) next.set(entry.item.id, entry);
+			return next;
+		});
+		const timer = setTimeout(() => {
+			timers.current.delete(timer);
+			setExiting((map) => {
+				const next = new Map(map);
+				for (const entry of removed) next.delete(entry.item.id);
+				return next;
+			});
+		}, exitMs);
+		timers.current.add(timer);
+	}, [items, exitMs]);
+	(0, react.useEffect)(() => {
+		const pending = timers.current;
+		return () => {
+			for (const timer of pending) clearTimeout(timer);
+		};
+	}, []);
+	const result = items.map((item) => ({
+		item,
+		exiting: false
+	}));
+	if (exiting.size > 0) {
+		const sorted = [...exiting.values()].sort((a, b) => a.index - b.index);
+		for (const entry of sorted) {
+			if (result.some((existing) => existing.item.id === entry.item.id)) continue;
+			result.splice(Math.min(entry.index, result.length), 0, {
+				item: entry.item,
+				exiting: true
+			});
+		}
+	}
+	return result;
+}
+/**
+* FLIP layout animation: when the set/order of `[data-flip-id]` children
+* changes, children animate from their old offset to the new one using WAAPI.
+*/
+function useFlip(containerRef, layoutKey, enabled, duration = 420) {
+	const positions = (0, react.useRef)(/* @__PURE__ */ new Map());
+	useIsomorphicLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const nodes = container.querySelectorAll("[data-flip-id]");
+		const next = /* @__PURE__ */ new Map();
+		nodes.forEach((node) => {
+			const id = node.dataset.flipId;
+			const position = {
+				x: node.offsetLeft,
+				y: node.offsetTop
+			};
+			next.set(id, position);
+			const before = positions.current.get(id);
+			if (!enabled || !before || typeof node.animate !== "function") return;
+			const dx = before.x - position.x;
+			const dy = before.y - position.y;
+			if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
+			node.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }], {
+				duration,
+				easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+				composite: "add"
+			});
+		});
+		positions.current = next;
+	}, [
+		layoutKey,
+		enabled,
+		duration
+	]);
+}
+//#endregion
+//#region src/components/Effects.tsx
+/** Stroke-drawn checkmark inside a circle. */
+function AnimatedCheck({ size = 24, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		className: cx("um-check", className),
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: "um-check__circle",
+			cx: "12",
+			cy: "12",
+			r: "10.5",
+			pathLength: 1
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			className: "um-check__mark",
+			d: "m7.2 12.4 3.2 3.2 6.4-7",
+			pathLength: 1
+		})]
+	});
+}
+/**
+* One-shot particle burst built from a handful of spans animated with CSS
+* transforms. Mount it (e.g. with a key) to play; renders nothing for reduced
+* motion or `particles: 0`.
+*/
+function Burst({ count = 14, seed = "burst", spread = 56, className, shape = "dot" }) {
+	const { motion } = useUploaderContext();
+	const total = motion.reduced ? 0 : Math.round(count * motion.particles);
+	const particles = (0, react.useMemo)(() => {
+		const random = seededRandom(seed);
+		return Array.from({ length: total }, (_, index) => {
+			const angle = index / Math.max(total, 1) * Math.PI * 2 + random() * .6;
+			const distance = spread * (.55 + random() * .6);
+			return {
+				x: Math.cos(angle) * distance,
+				y: Math.sin(angle) * distance,
+				rotate: angle * 180 / Math.PI + 90,
+				delay: random() * 60,
+				scale: .6 + random() * .8,
+				hue: random() > .5 ? "var(--um-accent)" : "var(--um-accent-2)"
+			};
+		});
+	}, [
+		total,
+		seed,
+		spread
+	]);
+	if (total === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cx("um-burst", className),
+		"data-shape": shape,
+		"aria-hidden": "true",
+		children: particles.map((particle, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-burst__p",
+			style: {
+				"--x": `${particle.x.toFixed(1)}px`,
+				"--y": `${particle.y.toFixed(1)}px`,
+				"--r": `${particle.rotate.toFixed(0)}deg`,
+				"--s": particle.scale.toFixed(2),
+				"--c": particle.hue,
+				animationDelay: `${particle.delay.toFixed(0)}ms`
+			}
+		}, index))
+	});
+}
+//#endregion
+//#region src/hooks/useMedia.ts
+const DEFAULT_PREVIEW_LIMIT = 25e6;
+/**
+* Object URL for an image preview, revoked automatically on unmount or when the
+* file changes. Returns `null` for non-images and files above `maxSize` (large
+* images are expensive to decode, so they get an icon instead).
+*/
+function useFilePreview(item, maxSize = DEFAULT_PREVIEW_LIMIT) {
+	const file = item?.file ?? null;
+	const [url, setUrl] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!file || file.size > maxSize || !require_core.isPreviewableImage(file) || typeof URL.createObjectURL !== "function") {
+			setUrl(null);
+			return;
+		}
+		const objectUrl = URL.createObjectURL(file);
+		setUrl(objectUrl);
+		return () => URL.revokeObjectURL(objectUrl);
+	}, [file, maxSize]);
+	return url;
+}
+/**
+* Extracts `count` evenly spaced frames from a local video as small JPEG data
+* URLs. Everything happens in the browser; unsupported codecs yield `[]`.
+*/
+function useVideoFrames(file, count, enabled = true) {
+	const [frames, setFrames] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		setFrames([]);
+		if (!enabled || !file || typeof document === "undefined" || typeof URL.createObjectURL !== "function") return;
+		if (!file.type.startsWith("video/") && !/\.(mp4|mov|webm|m4v|ogv)$/i.test(file.name)) return;
+		let cancelled = false;
+		const url = URL.createObjectURL(file);
+		const video = document.createElement("video");
+		video.muted = true;
+		video.playsInline = true;
+		video.preload = "auto";
+		video.src = url;
+		const once = (event, timeout = 6e3) => new Promise((resolve, reject) => {
+			const timer = setTimeout(() => reject(/* @__PURE__ */ new Error("timeout")), timeout);
+			const done = () => {
+				clearTimeout(timer);
+				video.removeEventListener("error", fail);
+				resolve();
+			};
+			const fail = () => {
+				clearTimeout(timer);
+				video.removeEventListener(event, done);
+				reject(/* @__PURE__ */ new Error("video error"));
+			};
+			video.addEventListener(event, done, { once: true });
+			video.addEventListener("error", fail, { once: true });
+		});
+		const run = async () => {
+			await once("loadeddata");
+			let duration = video.duration;
+			if (!Number.isFinite(duration)) {
+				video.currentTime = 1e7;
+				await once("seeked").catch(() => void 0);
+				duration = Number.isFinite(video.duration) ? video.duration : 0;
+			}
+			const width = 160;
+			const height = video.videoWidth ? Math.round(width * video.videoHeight / video.videoWidth) : 90;
+			const canvas = document.createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const context = canvas.getContext("2d");
+			if (!context) return;
+			const result = [];
+			for (let index = 0; index < count; index += 1) {
+				const time = duration > 0 ? Math.min(duration - .05, duration * (index + .5) / count) : 0;
+				video.currentTime = Math.max(0, time);
+				await once("seeked");
+				if (cancelled) return;
+				context.drawImage(video, 0, 0, width, height);
+				result.push(canvas.toDataURL("image/jpeg", .72));
+				setFrames([...result]);
+			}
+		};
+		let released = false;
+		const release = () => {
+			if (released) return;
+			released = true;
+			video.removeAttribute("src");
+			video.load();
+			URL.revokeObjectURL(url);
+		};
+		run().catch(() => void 0).finally(release);
+		return () => {
+			cancelled = true;
+			release();
+		};
+	}, [
+		file,
+		count,
+		enabled
+	]);
+	return frames;
+}
+/** Deterministic pseudo waveform (used until/unless real audio decoding succeeds). */
+function pseudoPeaks(seed, bars) {
+	const random = seededRandom(seed);
+	const peaks = [];
+	let value = .5;
+	for (let i = 0; i < bars; i += 1) {
+		value = value * .55 + random() * .45;
+		const envelope = .55 + .45 * Math.sin(i / bars * Math.PI);
+		peaks.push(Math.max(.12, Math.min(1, value * envelope * 1.35)));
+	}
+	return peaks;
+}
+const AUDIO_DECODE_LIMIT = 3e7;
+/**
+* Real waveform peaks decoded with the Web Audio API for audio files up to
+* 30 MB; a stable pseudo waveform otherwise. `real` tells you which you got.
+*/
+function useAudioPeaks(file, bars, enabled = true) {
+	const fallback = (0, react.useMemo)(() => pseudoPeaks(file ? `${file.name}:${file.size}` : "empty", bars), [file, bars]);
+	const [decoded, setDecoded] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!enabled || !file || file.size > AUDIO_DECODE_LIMIT) return;
+		if (!file.type.startsWith("audio/") && !/\.(mp3|wav|ogg|m4a|aac|flac|opus)$/i.test(file.name)) return;
+		const AudioContextClass = typeof window !== "undefined" ? window.AudioContext ?? window.webkitAudioContext : void 0;
+		if (!AudioContextClass) return;
+		let cancelled = false;
+		const context = new AudioContextClass();
+		file.arrayBuffer().then((buffer) => context.decodeAudioData(buffer)).then((audio) => {
+			if (cancelled) return;
+			const data = audio.getChannelData(0);
+			const bucket = Math.max(1, Math.floor(data.length / bars));
+			const peaks = [];
+			let max = 0;
+			for (let bar = 0; bar < bars; bar += 1) {
+				let peak = 0;
+				const start = bar * bucket;
+				for (let i = start; i < Math.min(start + bucket, data.length); i += 16) {
+					const value = Math.abs(data[i]);
+					if (value > peak) peak = value;
+				}
+				peaks.push(peak);
+				if (peak > max) max = peak;
+			}
+			setDecoded({
+				file,
+				peaks: peaks.map((peak) => Math.max(.08, max > 0 ? peak / max : 0))
+			});
+		}).catch(() => void 0).finally(() => {
+			context.close().catch(() => void 0);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		file,
+		bars,
+		enabled
+	]);
+	return decoded && decoded.file === file && decoded.peaks.length === bars ? {
+		peaks: decoded.peaks,
+		real: true
+	} : {
+		peaks: fallback,
+		real: false
+	};
+}
+const TEXT_KINDS = /* @__PURE__ */ new Set([
+	"text",
+	"code",
+	"data",
+	"spreadsheet"
+]);
+/** First lines of small text-like files, for document previews. `null` when not applicable. */
+function useTextSnippet(item, lines = 8) {
+	const file = item?.file ?? null;
+	const readable = Boolean(item && TEXT_KINDS.has(item.kind) && item.size < 2e6 && !/\.xlsx?$/i.test(item.file.name));
+	const [snippet, setSnippet] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setSnippet(null);
+		if (!file || !readable || typeof file.slice !== "function") return;
+		let cancelled = false;
+		file.slice(0, 2048).text().then((text) => {
+			if (cancelled) return;
+			setSnippet(text.split(/\r?\n/).map((line) => line.replace(/\t/g, "  ").slice(0, 64)).filter((line) => line.trim().length > 0).slice(0, lines));
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		file,
+		readable,
+		lines
+	]);
+	return snippet;
+}
+//#endregion
+//#region src/components/FileVisual.tsx
+/** Paper-shaped file icon with a kind glyph and coloured extension badge. */
+function FileIcon({ kind, label, size = 40, className }) {
+	const Glyph = KIND_ICONS[kind];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cx("um-ficon", className),
+		"data-kind": kind,
+		style: { "--um-ficon-size": `${size}px` },
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-ficon__paper",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { size: Math.round(size * .42) })
+		}), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-ficon__badge",
+			children: label
+		}) : null]
+	});
+}
+/** Image thumbnail for previewable images, otherwise a `FileIcon`. Object URLs are revoked automatically. */
+function FilePreview({ item, size = 44, maxPreviewSize, className }) {
+	const url = useFilePreview(item, maxPreviewSize);
+	const [loaded, setLoaded] = (0, react.useState)(false);
+	if (!url) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+		kind: item.kind,
+		label: require_core.getFileLabel(item),
+		size,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cx("um-thumb", className),
+		style: { "--um-thumb-size": `${size}px` },
+		"data-loaded": loaded || void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: url,
+			alt: "",
+			decoding: "async",
+			loading: "lazy",
+			draggable: false,
+			onLoad: () => setLoaded(true)
+		})
+	});
+}
+//#endregion
+//#region src/components/Progress.tsx
+/** Builds a sine-like quadratic wave: `width` px wide, one crest every `period` px. */
+function wavePath(width, period, amplitude, baseline) {
+	const half = period / 2;
+	let d = `M0 ${baseline} Q ${half / 2} ${baseline - amplitude} ${half} ${baseline}`;
+	for (let x = half; x < width; x += half) d += ` T ${x + half} ${baseline}`;
+	return d;
+}
+const WAVE_PATH = /* @__PURE__ */ wavePath(240, 30, 5, 6);
+/**
+* Progress indicator with four styles. Animates with transforms/clip-path only,
+* so it stays cheap even with many concurrent uploads.
+*/
+function UploadProgress({ value, status = "uploading", variant = "bar", label, valueText, size = 36, className }) {
+	const progress = require_core.clamp01(value);
+	const percent = Math.round(progress * 100);
+	const a11y = {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": percent,
+		"aria-valuetext": valueText ?? `${percent}%`,
+		"aria-label": label
+	};
+	const style = { "--um-p": progress };
+	if (variant === "ring") {
+		const stroke = 3;
+		const radius = (size - stroke) / 2;
+		const circumference = 2 * Math.PI * radius;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			...a11y,
+			className: cx("um-progress", "um-progress--ring", className),
+			"data-status": status,
+			style,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "um-progress__track",
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					strokeWidth: stroke
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					className: "um-progress__arc",
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					strokeWidth: stroke,
+					strokeDasharray: circumference,
+					strokeDashoffset: circumference * (1 - progress)
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-progress__label",
+				"aria-hidden": "true",
+				children: percent
+			})]
+		});
+	}
+	if (variant === "wave") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...a11y,
+		className: cx("um-progress", "um-progress--wave", className),
+		"data-status": status,
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-progress__wave-clip",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className: "um-progress__wave",
+				viewBox: "0 0 240 12",
+				preserveAspectRatio: "none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: WAVE_PATH })
+			})
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...a11y,
+		className: cx("um-progress", variant === "beam" ? "um-progress--beam" : "um-progress--bar", className),
+		"data-status": status,
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-progress__fill",
+			"aria-hidden": "true"
+		})
+	});
+}
+//#endregion
+//#region src/components/FileItem.tsx
+/** Plain-language status line, e.g. "45% · 2.1 MB/s · 3 seconds left". */
+function describeItemStatus(item, labels, transport) {
+	switch (item.status) {
+		case "uploading": {
+			if (item.progress >= 1) return labels.finishing;
+			const parts = [require_core.formatPercent(item.progress)];
+			if (item.speed > 0) parts.push(require_core.formatSpeed(item.speed));
+			if (item.eta !== null && item.eta > .5) parts.push(labels.timeLeft(require_core.formatDuration(item.eta)));
+			return parts.join(" · ");
+		}
+		case "queued":
+			if (item.retryAt !== null) {
+				const seconds = Math.max(1, Math.ceil((item.retryAt - Date.now()) / 1e3));
+				return `${labels.retryingIn(seconds)}${item.error ? ` ${item.error.message}` : ""}`;
+			}
+			return labels.status.queued;
+		case "error": return item.error?.message ?? labels.status.error;
+		case "pending": return transport === "none" ? labels.noHandler : labels.status.pending;
+		default: return labels.status[item.status];
+	}
+}
+/** Accessible value text for progress bars. */
+function progressValueText(item, labels) {
+	const percent = require_core.formatPercent(item.progress);
+	if (item.status !== "uploading" || item.eta === null) return `${percent}, ${labels.status[item.status]}`;
+	return `${percent}, ${labels.timeLeft(require_core.formatDuration(item.eta))}`;
+}
+function ItemStatus({ item, className }) {
+	const { labels, transport } = useUploaderContext();
+	const text = describeItemStatus(item, labels, transport);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cx("um-status", className),
+		"data-status": item.status,
+		children: [item.status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon, { size: 13 }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "um-sr-only",
+			children: [labels.status.error, ": "]
+		})] }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-status__text",
+			children: text
+		})]
+	});
+}
+function IconButton({ label, onClick, children, tone = "default" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: "um-icon-btn",
+		"data-tone": tone,
+		"aria-label": label,
+		title: label,
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick();
+		},
+		children
+	});
+}
+/** Contextual actions for one file: start, pause/resume, cancel, retry, remove. */
+function ItemActions({ item, className, allowPause = false }) {
+	const context = useUploaderContext();
+	const { labels } = context;
+	const name = item.name;
+	const buttons = [];
+	if (item.status === "pending" && context.transport !== "none") buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.upload} ${name}`,
+		onClick: () => context.start(item.id),
+		tone: "accent",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 16 })
+	}, "start"));
+	if (item.status === "uploading" && allowPause) buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.pause} ${name}`,
+		onClick: () => context.pause(item.id),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PauseIcon, { size: 15 })
+	}, "pause"));
+	if (item.status === "paused") buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.resume} ${name}`,
+		onClick: () => context.resume(item.id),
+		tone: "accent",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, { size: 15 })
+	}, "resume"));
+	if (item.status === "error" || item.status === "canceled") buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.retry} ${name}`,
+		onClick: () => context.retry(item.id),
+		tone: "accent",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RetryIcon, {
+			size: 16,
+			className: "um-retry-icon"
+		})
+	}, "retry"));
+	if (item.status === "uploading" || item.status === "queued" || item.status === "paused") buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.cancel} ${name}`,
+		onClick: () => context.cancel(item.id),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 16 })
+	}, "cancel"));
+	else buttons.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+		label: `${labels.remove} ${name}`,
+		onClick: () => context.remove(item.id),
+		tone: "danger",
+		children: item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 16 })
+	}, "remove"));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cx("um-actions", className),
+		children: buttons
+	});
+}
+/** The default animated file row used by list-based presets. */
+const FileCard = /* @__PURE__ */ (0, react.memo)(function FileCard({ item, progressVariant = "bar", className, media, allowPause, celebrate = true }) {
+	const { labels } = useUploaderContext();
+	const justSucceeded = useBecameTrue(item.status === "success", 1200);
+	const justFailed = useBecameTrue(item.status === "error", 700);
+	const showProgress = item.status !== "pending" && item.status !== "canceled";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-card", className),
+		"data-status": item.status,
+		"data-kind": item.kind,
+		"data-celebrate": justSucceeded || void 0,
+		"data-shake": justFailed || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-card__media",
+				children: [media ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
+					item,
+					size: 42
+				}), item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, {
+					size: 18,
+					className: "um-card__check"
+				}) : null]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-card__body",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-card__row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-card__name",
+							title: item.name,
+							children: item.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-card__size",
+							children: require_core.formatBytes(item.size)
+						})]
+					}),
+					showProgress ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgress, {
+						value: item.status === "success" ? 1 : item.progress,
+						status: item.status,
+						variant: progressVariant,
+						label: item.name,
+						valueText: progressValueText(item, labels),
+						size: 22
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemStatus, { item })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+				item,
+				allowPause
+			}),
+			celebrate && justSucceeded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+				seed: item.id,
+				count: 10,
+				spread: 44,
+				className: "um-card__burst"
+			}) : null
+		]
+	});
+});
+//#endregion
+//#region src/components/FileList.tsx
+/**
+* List with enter/exit presence and FLIP re-layout animations.
+* Generic so presets can animate any collection, not only upload items.
+*/
+function AnimatedList({ items, renderItem, className, itemClassName, exitDuration = 320, as: Tag = "ul", layout, "aria-label": ariaLabel }) {
+	const { motion } = useUploaderContext();
+	const ref = (0, react.useRef)(null);
+	const entries = usePresence(items, motion.reduced ? 0 : exitDuration);
+	useFlip(ref, entries.map((entry) => `${entry.item.id}${entry.exiting ? "~" : ""}`).join("|"), !motion.reduced);
+	const ItemTag = Tag === "div" ? "div" : "li";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		ref,
+		className: cx("um-list", className),
+		"data-layout": layout,
+		"aria-label": ariaLabel,
+		children: entries.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemTag, {
+			"data-flip-id": entry.item.id,
+			className: cx("um-list__item", itemClassName),
+			"data-exiting": entry.exiting || void 0,
+			"aria-hidden": entry.exiting || void 0,
+			style: { "--um-i": index },
+			children: renderItem(entry.item, {
+				exiting: entry.exiting,
+				index
+			})
+		}, entry.item.id))
+	});
+}
+/** The queue, rendered with `FileCard` (or your `renderFile`). */
+function UploadFileList({ layout = "list", progressVariant, renderFile, items, className, itemClassName, allowPause }) {
+	const context = useUploaderContext();
+	const list = items ?? context.items;
+	if (list.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedList, {
+		items: list,
+		className: cx("um-file-list", className),
+		itemClassName,
+		"aria-label": "Files",
+		renderItem: (item) => renderFile ? renderFile(item, getFileHelpers(context, item)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileCard, {
+			item,
+			progressVariant,
+			allowPause
+		}),
+		layout
+	});
+}
+//#endregion
+//#region src/components/Status.tsx
+/** "Uploading 3 files" + "63% · 6.4 MB/s · 5 seconds left". */
+function useSummaryText() {
+	const { totals, labels } = useUploaderContext();
+	const title = labels.summary(totals);
+	const parts = [];
+	if (totals.active > 0 || totals.paused > 0) {
+		parts.push(require_core.formatPercent(totals.progress));
+		if (totals.speed > 0) parts.push(require_core.formatSpeed(totals.speed));
+		if (totals.eta !== null && totals.eta > .5) parts.push(labels.timeLeft(require_core.formatDuration(totals.eta)));
+	}
+	return {
+		title,
+		detail: parts.join(" · ")
+	};
+}
+function UploadSummary({ className }) {
+	const { title, detail } = useSummaryText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-summary", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-summary__title",
+			children: title
+		}), detail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-summary__detail",
+			children: detail
+		}) : null]
+	});
+}
+/** Badge shown when the transport is simulated, so demos never pass fake progress off as real. */
+function TransportBadge({ className }) {
+	const { transport, labels } = useUploaderContext();
+	if (transport !== "simulated") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cx("um-badge", className),
+		title: labels.simulatedHint,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-badge__dot",
+				"aria-hidden": "true"
+			}),
+			labels.simulated,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "um-sr-only",
+				children: [": ", labels.simulatedHint]
+			})
+		]
+	});
+}
+/** Dismissible list of files that failed validation, with the reason in text (not colour alone). */
+function UploadRejections({ className }) {
+	const { rejections, dismissRejection, labels } = useUploaderContext();
+	if (rejections.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedList, {
+		items: rejections,
+		className: cx("um-rejections", className),
+		"aria-label": "Rejected files",
+		renderItem: (rejection) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "um-rejection",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon, { size: 16 }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-rejection__text",
+					children: rejection.errors.map((error) => error.message).join(" ")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "um-icon-btn",
+					"aria-label": `${labels.dismiss}: ${rejection.file.name}`,
+					onClick: (event) => {
+						event.stopPropagation();
+						dismissRejection(rejection.id);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 14 })
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/animations/shared.tsx
+/** Rejections + queue, honouring `renderFile`, `classNames` and `showRejections`. */
+function PresetQueue({ props, progressVariant, allowPause, items, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [props.showRejections !== false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadRejections, {}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadFileList, {
+		className: [
+			className,
+			"um-queue",
+			props.classNames?.list
+		].filter(Boolean).join(" "),
+		itemClassName: props.classNames?.item,
+		items,
+		layout: props.layout,
+		progressVariant: props.progressVariant ?? progressVariant,
+		renderFile: props.renderFile,
+		allowPause
+	})] });
+}
+/** Renders `props.renderFile` when provided, otherwise the preset's own visual. */
+function useRenderFile(props) {
+	const context = useUploaderContext();
+	return (item, fallback) => props.renderFile ? props.renderFile(item, getFileHelpers(context, item)) : fallback();
+}
+const KIND_COLORS = {
+	pdf: "#e5484d",
+	document: "#3b82f6",
+	spreadsheet: "#16a34a",
+	presentation: "#f97316",
+	image: "#8b5cf6",
+	video: "#ec4899",
+	audio: "#f59e0b",
+	archive: "#a16207",
+	code: "#0ea5e9",
+	data: "#ca8a04",
+	text: "#64748b",
+	unknown: "#94a3b8"
+};
+//#endregion
+//#region src/animations/beam.tsx
+function BeamPreset(props) {
+	const { dropzone, labels, totals } = useUploaderContext();
+	const mode = dropzone.dragState !== "idle" ? dropzone.dragState : totals.active > 0 ? "active" : "idle";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-beam", props.classNames?.root),
+		"data-mode": mode,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps(),
+				className: cx("um-zone", "um-beam__zone", props.classNames?.zone),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-beam__border",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-beam__grid um-deco",
+						"aria-hidden": "true"
+					}),
+					props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-beam__content",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-beam__icon",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloudIcon, { size: 26 })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+								className: "um-beam__title",
+								children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : props.title ?? "Drop files to sync"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-beam__sub",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+									variant: "soft",
+									children: labels.browse
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "beam",
+				allowPause: true
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, { className: "um-beam__badge" })
+		]
+	});
+}
+const beamPreset = {
+	...require_core.PRESET_INFO["beam"],
+	Component: BeamPreset
+};
+//#endregion
+//#region src/animations/card-fan.tsx
+function CurvedArrow({ side }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		className: "um-fan__arrow",
+		"data-side": side,
+		width: "44",
+		height: "44",
+		viewBox: "0 0 44 44",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			className: "um-fan__arrow-line",
+			d: "M8 4 C 4 18, 12 30, 32 31",
+			pathLength: 1
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			className: "um-fan__arrow-head",
+			d: "M24 24 L 33 31 L 24 38",
+			pathLength: 1
+		})]
+	});
+}
+function CardFanPreset(props) {
+	const { dropzone, labels, totals, autoUpload, transport } = useUploaderContext();
+	const { dragState, isWindowDrag, lastDrop } = dropzone;
+	const mode = dragState === "reject" ? "reject" : dragState === "accept" ? "over" : isWindowDrag ? "anticipate" : "idle";
+	const showStart = !autoUpload || totals.pending > 0;
+	const headline = mode === "reject" ? labels.dropReject : mode === "over" ? labels.dropActive : props.title ? props.title : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		"Drag & drop ",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: "images," }),
+		" ",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: "videos," }),
+		" or any ",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: "file" })
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-panel", "um-fan", props.classNames?.root),
+		"data-mode": mode,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps(),
+				className: cx("um-zone", "um-fan__zone", props.classNames?.zone),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					className: "um-fan__border",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: "0",
+						y: "0",
+						width: "100%",
+						height: "100%",
+						rx: "16",
+						ry: "16"
+					})
+				}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "um-fan__content",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "um-fan__stage",
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurvedArrow, { side: "left" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "um-fan__cards",
+									"data-dealt": lastDrop ? "true" : void 0,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "um-fan__card",
+											"data-pos": "left",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoIcon, { size: 20 })
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "um-fan__card",
+											"data-pos": "center",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageIcon, { size: 24 })
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "um-fan__card",
+											"data-pos": "right",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MusicIcon, { size: 20 })
+										})
+									]
+								}, lastDrop?.at ?? 0),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurvedArrow, { side: "right" })
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "um-fan__title",
+							"aria-live": "polite",
+							children: headline
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "um-fan__sub",
+							children: [
+								"or",
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+									variant: "link",
+									className: "um-fan__browse",
+									children: "browse files"
+								}),
+								" ",
+								"on your computer"
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, { className: "um-fan__hint" })
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "bar"
+			}),
+			showStart || transport === "simulated" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-fan__footer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}), showStart ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartUploadButton, {}) : null]
+			}) : null
+		]
+	});
+}
+const cardFanPreset = {
+	...require_core.PRESET_INFO["card-fan"],
+	Component: CardFanPreset
+};
+//#endregion
+//#region src/animations/essential.tsx
+function EssentialPreset(props) {
+	const { dropzone, autoUpload, totals, transport } = useUploaderContext();
+	const showStart = !autoUpload && totals.pending + totals.active > 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-essential", props.classNames?.root),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...dropzone.getRootProps(),
+				className: cx("um-zone", "um-essential__zone", props.classNames?.zone),
+				children: props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropzoneContent, { title: props.title })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "bar",
+				allowPause: true
+			}),
+			showStart || transport === "simulated" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-footer-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}), showStart ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartUploadButton, {}) : null]
+			}) : null
+		]
+	});
+}
+const essentialPreset = {
+	...require_core.PRESET_INFO["essential"],
+	Component: EssentialPreset
+};
+//#endregion
+//#region src/animations/hoop-shot.tsx
+const GRAVITY = 2200;
+const POWER = 10.5;
+const MAX_PULL = 120;
+const ASSIST = 16;
+const TOKEN_W = 44;
+const TOKEN_H = 54;
+function relativeRect(element, container) {
+	const a = element.getBoundingClientRect();
+	const b = container.getBoundingClientRect();
+	return {
+		left: a.left - b.left,
+		top: a.top - b.top,
+		right: a.right - b.left,
+		bottom: a.bottom - b.top,
+		width: a.width,
+		height: a.height
+	};
+}
+/** Velocity that lands exactly in the rim centre after `time` seconds. */
+function perfectVelocity(from, geometry, time = .85) {
+	const target = {
+		x: (geometry.rimLeft + geometry.rimRight) / 2,
+		y: geometry.rimY - 2
+	};
+	return {
+		x: (target.x - from.x) / time,
+		y: (target.y - from.y - .5 * GRAVITY * time * time) / time
+	};
+}
+function trajectory(from, velocity, steps = 18, dt = .045) {
+	return Array.from({ length: steps }, (_, index) => {
+		const t = (index + 1) * dt;
+		return {
+			x: from.x + velocity.x * t,
+			y: from.y + velocity.y * t + .5 * GRAVITY * t * t
+		};
+	});
+}
+function Token({ item }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "um-hoop__token-face",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "um-hoop__token-lines" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+			kind: item.kind,
+			label: require_core.getFileLabel(item),
+			size: 30
+		})]
+	});
+}
+function Hoop({ netKey, rimRef, boardRef }) {
+	const net = Array.from({ length: 7 }, (_, i) => i);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "um-hoop__hoop",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-hoop__board",
+				ref: boardRef,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "um-hoop__board-square" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: "um-hoop__rim-svg",
+				viewBox: "0 0 96 90",
+				width: "96",
+				height: "90",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+						className: "um-hoop__net",
+						"data-swish": netKey > 0 || void 0,
+						children: [net.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: `M${10 + i * 12.6} 12 L ${26 + i * 7.4} 80` }, `v${i}`)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16 30 Q 48 38 80 30 M20 48 Q 48 55 76 48 M24 66 Q 48 72 72 66 M26 80 L 70 80" })]
+					}, netKey),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+						className: "um-hoop__rim",
+						cx: "48",
+						cy: "12",
+						rx: "40",
+						ry: "7"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						className: "um-hoop__clip",
+						x: "40",
+						y: "2",
+						width: "16",
+						height: "6",
+						rx: "2"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-hoop__rim-target",
+				ref: rimRef
+			})
+		]
+	});
+}
+function HoopShotPreset(props) {
+	const context = useUploaderContext();
+	const { items, dropzone, labels, motion, start, remove, totals } = context;
+	const courtRef = (0, react.useRef)(null);
+	const rimRef = (0, react.useRef)(null);
+	const boardRef = (0, react.useRef)(null);
+	const ballRef = (0, react.useRef)(null);
+	const frame = (0, react.useRef)(null);
+	const autoQueue = (0, react.useRef)([]);
+	const aimState = (0, react.useRef)(null);
+	const [flight, setFlight] = (0, react.useState)(null);
+	const [aim, setAim] = (0, react.useState)(null);
+	const [netKey, setNetKey] = (0, react.useState)(0);
+	const [callout, setCallout] = (0, react.useState)(null);
+	const [stats, setStats] = (0, react.useState)({
+		shots: 0,
+		made: 0
+	});
+	const pending = items.filter((item) => item.status === "pending" && item.id !== flight?.id);
+	const top = pending[pending.length - 1];
+	const launched = items.filter((item) => item.status !== "pending");
+	(0, react.useEffect)(() => () => {
+		if (frame.current !== null) cancelAnimationFrame(frame.current);
+	}, []);
+	const geometry = (0, react.useCallback)(() => {
+		const court = courtRef.current;
+		if (!court || !rimRef.current || !boardRef.current) return null;
+		const rim = relativeRect(rimRef.current, court);
+		const board = relativeRect(boardRef.current, court);
+		const bounds = court.getBoundingClientRect();
+		return {
+			rimLeft: rim.left,
+			rimRight: rim.right,
+			rimY: rim.top,
+			board: {
+				left: board.left,
+				right: board.right,
+				top: board.top,
+				bottom: board.bottom
+			},
+			width: bounds.width,
+			height: bounds.height
+		};
+	}, []);
+	const padOrigin = (0, react.useCallback)(() => {
+		const court = courtRef.current;
+		const pad = court?.querySelector(".um-hoop__pad");
+		if (!court || !pad) return null;
+		const rect = relativeRect(pad, court);
+		return {
+			x: rect.left + TOKEN_W / 2,
+			y: rect.bottom - TOKEN_H / 2
+		};
+	}, []);
+	const score = (0, react.useCallback)((item, kind) => {
+		setStats((s) => ({
+			shots: s.shots + 1,
+			made: s.made + (kind === "swish" || kind === "bank" ? 1 : 0)
+		}));
+		if (kind === "swish" || kind === "bank") {
+			setNetKey((k) => k + 1);
+			setCallout({
+				text: kind === "bank" ? "Bank shot!" : "Swish!",
+				key: Date.now(),
+				tone: "good"
+			});
+			start(item.id);
+		} else setCallout({
+			text: kind === "rim" ? "Rim out – try again" : "Missed – try again",
+			key: Date.now(),
+			tone: "bad"
+		});
+	}, [start]);
+	const shootNextQueued = (0, react.useRef)(() => {});
+	const launch = (0, react.useCallback)((item, from, velocity) => {
+		const g = geometry();
+		if (!g || motion.reduced) {
+			score(item, "swish");
+			setTimeout(() => shootNextQueued.current(), 0);
+			return;
+		}
+		setFlight(item);
+		let position = { ...from };
+		let v = { ...velocity };
+		let rotation = 0;
+		let last = performance.now();
+		let banked = false;
+		let sinking = false;
+		let sinkFrames = 0;
+		const place = (scale = 1, opacity = 1) => {
+			const ball = ballRef.current;
+			if (!ball) return;
+			ball.style.transform = `translate(${position.x - TOKEN_W / 2}px, ${position.y - TOKEN_H / 2}px) rotate(${rotation}deg) scale(${scale})`;
+			ball.style.opacity = String(opacity);
+		};
+		const finish = (result) => {
+			frame.current = null;
+			score(item, result);
+			setFlight(null);
+			setTimeout(() => shootNextQueued.current(), result === "miss" || result === "rim" ? 500 : 180);
+		};
+		const step = (now) => {
+			const dt = Math.min((now - last) / 1e3, 1 / 30);
+			last = now;
+			const previousY = position.y;
+			v.y += GRAVITY * dt;
+			position = {
+				x: position.x + v.x * dt,
+				y: position.y + v.y * dt
+			};
+			rotation += v.x * dt * .45;
+			if (sinking) {
+				sinkFrames += 1;
+				position.x += ((g.rimLeft + g.rimRight) / 2 - position.x) * .25;
+				place(Math.max(.2, 1 - sinkFrames / 14), Math.max(0, 1 - sinkFrames / 16));
+				if (sinkFrames > 16) return finish(banked ? "bank" : "swish");
+				frame.current = requestAnimationFrame(step);
+				return;
+			}
+			const b = g.board;
+			if (!banked && position.x > b.left && position.x < b.right && position.y > b.top && position.y < b.bottom) {
+				banked = true;
+				v = {
+					x: v.x * .15,
+					y: Math.max(v.y, 0) * .4
+				};
+			}
+			if (previousY < g.rimY && position.y >= g.rimY && v.y > 0) {
+				const inside = position.x > g.rimLeft + 6 && position.x < g.rimRight - 6;
+				const assisted = position.x > g.rimLeft - ASSIST && position.x < g.rimRight + ASSIST;
+				const nearRim = position.x > g.rimLeft - ASSIST - 22 && position.x < g.rimRight + ASSIST + 22;
+				if (inside || assisted) {
+					sinking = true;
+					v = {
+						x: 0,
+						y: 260
+					};
+				} else if (nearRim) {
+					const center = (g.rimLeft + g.rimRight) / 2;
+					v = {
+						x: (position.x < center ? -1 : 1) * 260,
+						y: -Math.abs(v.y) * .35
+					};
+					position.y = g.rimY - 1;
+					setTimeout(() => setCallout({
+						text: "Clank!",
+						key: Date.now(),
+						tone: "bad"
+					}), 0);
+				}
+			}
+			place();
+			if (position.y > g.height + 80 || position.x < -80 || position.x > g.width + 80) return finish(banked ? "rim" : "miss");
+			frame.current = requestAnimationFrame(step);
+		};
+		place();
+		frame.current = requestAnimationFrame(step);
+	}, [
+		geometry,
+		motion.reduced,
+		score
+	]);
+	const autoShoot = (0, react.useCallback)((item) => {
+		const g = geometry();
+		const origin = padOrigin();
+		if (!g || !origin) {
+			start(item.id);
+			return;
+		}
+		launch(item, origin, perfectVelocity(origin, g));
+	}, [
+		geometry,
+		padOrigin,
+		launch,
+		start
+	]);
+	shootNextQueued.current = () => {
+		const nextId = autoQueue.current.shift();
+		if (!nextId) return;
+		const next = context.store.getItem(nextId);
+		if (next && next.status === "pending") autoShoot(next);
+		else shootNextQueued.current();
+	};
+	const shootAll = () => {
+		if (flight) return;
+		autoQueue.current = [...pending].reverse().map((item) => item.id);
+		shootNextQueued.current();
+	};
+	const onPointerDown = (event) => {
+		if (!top || flight || event.button !== 0) return;
+		const origin = padOrigin();
+		if (!origin) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		aimState.current = {
+			pointerId: event.pointerId,
+			origin,
+			offset: {
+				x: 0,
+				y: 0
+			},
+			item: top
+		};
+		setAim({
+			origin,
+			offset: {
+				x: 0,
+				y: 0
+			}
+		});
+		event.currentTarget.dataset.start = `${event.clientX},${event.clientY}`;
+	};
+	const onPointerMove = (event) => {
+		const state = aimState.current;
+		if (!state || state.pointerId !== event.pointerId) return;
+		const [sx, sy] = (event.currentTarget.dataset.start ?? "0,0").split(",").map(Number);
+		let dx = event.clientX - sx;
+		let dy = event.clientY - sy;
+		const length = Math.hypot(dx, dy);
+		if (length > MAX_PULL) {
+			dx = dx / length * MAX_PULL;
+			dy = dy / length * MAX_PULL;
+		}
+		state.offset = {
+			x: dx,
+			y: dy
+		};
+		setAim({
+			origin: state.origin,
+			offset: state.offset
+		});
+	};
+	const onPointerUp = (event) => {
+		const state = aimState.current;
+		if (!state || state.pointerId !== event.pointerId) return;
+		aimState.current = null;
+		setAim(null);
+		const { origin, offset, item } = state;
+		if (Math.hypot(offset.x, offset.y) < 12) {
+			autoShoot(item);
+			return;
+		}
+		const from = {
+			x: origin.x + offset.x,
+			y: origin.y + offset.y
+		};
+		launch(item, from, {
+			x: -offset.x * POWER,
+			y: -offset.y * POWER
+		});
+	};
+	const aimFrom = aim ? {
+		x: aim.origin.x + aim.offset.x,
+		y: aim.origin.y + aim.offset.y
+	} : null;
+	const dots = aim && aimFrom ? trajectory(aimFrom, {
+		x: -aim.offset.x * POWER,
+		y: -aim.offset.y * POWER
+	}) : [];
+	const uploaded = totals.success;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-panel", "um-hoop", props.classNames?.root),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-panel__header",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "um-panel__title",
+					children: props.title ?? "Upload files"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "um-panel__desc",
+					children: props.description ?? "Drag and drop, or take the shot."
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "um-hoop__pills",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}),
+						stats.shots > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-hoop__pill",
+							title: "Shots made",
+							children: [
+								"🏀 ",
+								stats.made,
+								"/",
+								stats.shots
+							]
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-hoop__pill um-hoop__pill--accent",
+							"data-bump": uploaded > 0 || void 0,
+							children: ["Uploaded ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: uploaded })]
+						}, uploaded)
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps({ noClick: Boolean(top) }),
+				ref: courtRef,
+				className: cx("um-zone", "um-hoop__court", props.classNames?.zone),
+				"data-aiming": aim ? "true" : void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "um-hoop__drop",
+						children: props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 18 }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "accept" ? labels.dropActive : dropzone.dragState === "reject" ? labels.dropReject : "Drop files here" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["or take the shot · ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+								variant: "link",
+								children: "browse"
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+						] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hoop, {
+						netKey,
+						rimRef,
+						boardRef
+					}),
+					netKey > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+						seed: `hoop${netKey}`,
+						count: 16,
+						spread: 64,
+						className: "um-hoop__burst"
+					}, netKey) : null,
+					callout ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-hoop__callout",
+						"data-tone": callout.tone,
+						"aria-hidden": "true",
+						children: callout.text
+					}, callout.key) : null,
+					dots.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: "um-hoop__dots",
+						"aria-hidden": "true",
+						children: dots.map((dot, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: dot.x,
+							cy: dot.y,
+							r: 2.4 - index * .06,
+							style: { opacity: 1 - index / dots.length }
+						}, index))
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-hoop__pad",
+						"data-count": pending.length,
+						children: [
+							pending.slice(-3, -1).map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-hoop__token um-hoop__token--stacked",
+								style: { "--d": index },
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Token, { item })
+							}, item.id)),
+							top ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "um-hoop__token um-hoop__token--top",
+								"aria-label": `Shoot ${top.name} into the basket to upload it`,
+								onPointerDown,
+								onPointerMove,
+								onPointerUp,
+								onPointerCancel: () => {
+									aimState.current = null;
+									setAim(null);
+								},
+								onKeyDown: (event) => {
+									if (event.key === "Enter" || event.key === " ") {
+										event.preventDefault();
+										if (!flight) autoShoot(top);
+									}
+								},
+								onClick: (event) => event.stopPropagation(),
+								style: aim ? { transform: `translate(${aim.offset.x}px, ${aim.offset.y}px) rotate(${aim.offset.x * -.2}deg)` } : void 0,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Token, { item: top })
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-hoop__token um-hoop__token--empty",
+								"aria-hidden": "true"
+							}),
+							pending.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "um-hoop__count",
+								children: ["×", pending.length]
+							}) : null
+						]
+					}),
+					flight ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "um-hoop__ball",
+						ref: ballRef,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Token, { item: flight })
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-hoop__footer",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-hoop__tip",
+							children: top ? "Pull back the file, aim & release to shoot into the basket" : "Add files, then aim & shoot them into the basket"
+						}), top ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-hoop__actions",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "um-icon-btn",
+								"aria-label": `${labels.remove} ${top.name}`,
+								title: `${labels.remove} ${top.name}`,
+								onClick: (event) => {
+									event.stopPropagation();
+									remove(top.id);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 14 })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "um-btn um-btn--soft",
+								disabled: Boolean(flight),
+								onClick: (event) => {
+									event.stopPropagation();
+									shootAll();
+								},
+								children: ["Shoot ", pending.length > 1 ? `all ${pending.length}` : "it"]
+							})]
+						}) : null]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "ring",
+				items: launched
+			})
+		]
+	});
+}
+const hoopShotPreset = {
+	...require_core.PRESET_INFO["hoop-shot"],
+	Component: HoopShotPreset
+};
+//#endregion
+//#region src/animations/liquid.tsx
+const FRONT = /* @__PURE__ */ wavePath(800, 200, 7, 10) + " V 20 H 0 Z";
+const BACK = /* @__PURE__ */ wavePath(800, 160, 9, 10) + " V 20 H 0 Z";
+function LiquidPreset(props) {
+	const { dropzone, totals, items, labels } = useUploaderContext();
+	const { title, detail } = useSummaryText();
+	const hasFiles = items.length > 0;
+	const done = totals.isComplete && totals.error === 0;
+	const dragging = dropzone.dragState === "accept";
+	const level = done ? 1 : hasFiles ? Math.max(.08, totals.progress) : dragging ? .24 : .1;
+	const bubbles = (0, react.useMemo)(() => {
+		const random = seededRandom("liquid");
+		return Array.from({ length: 9 }, () => ({
+			left: 6 + random() * 88,
+			size: 4 + random() * 8,
+			delay: random() * 3,
+			duration: 2.2 + random() * 2
+		}));
+	}, []);
+	const content = hasFiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-liquid__percent",
+			children: done ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 40 }) : `${Math.round(totals.progress * 100)}%`
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+			className: "um-liquid__title",
+			children: title
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-liquid__detail",
+			children: detail || (done ? "Drop more to refill" : labels.status[totals.error > 0 ? "error" : "pending"])
+		})
+	] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-liquid__icon",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 26 })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+			className: "um-liquid__title",
+			children: dropzone.dragState === "reject" ? labels.dropReject : dragging ? labels.dropActive : props.title ?? "Pour your files in"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-liquid__detail",
+			children: "Drop files, paste, or press Enter to browse"
+		})
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-liquid", props.classNames?.root),
+		"data-active": totals.active > 0 || void 0,
+		"data-done": done || void 0,
+		"data-error": totals.error > 0 && totals.active === 0 || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps({ focusable: true }),
+				className: cx("um-zone", "um-liquid__vessel", props.classNames?.zone),
+				style: { "--um-level": level },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "um-liquid__fluid",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							className: "um-liquid__wave um-liquid__wave--back",
+							viewBox: "0 0 800 20",
+							preserveAspectRatio: "none",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: BACK })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							className: "um-liquid__wave um-liquid__wave--front",
+							viewBox: "0 0 800 20",
+							preserveAspectRatio: "none",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: FRONT })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-liquid__body",
+							children: bubbles.map((bubble, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-liquid__bubble um-deco",
+								style: {
+									left: `${bubble.left}%`,
+									width: bubble.size,
+									height: bubble.size,
+									animationDelay: `${bubble.delay}s`,
+									animationDuration: `calc(var(--um-time) * ${bubble.duration}s)`
+								}
+							}, index))
+						})
+					]
+				}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "um-liquid__layer",
+					children: content
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "um-liquid__layer um-liquid__layer--inverse",
+					"aria-hidden": "true",
+					children: content
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-footer-row um-liquid__footer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "um-liquid__footer-actions",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "soft" })]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "bar"
+			})
+		]
+	});
+}
+const liquidPreset = {
+	...require_core.PRESET_INFO["liquid"],
+	Component: LiquidPreset
+};
+//#endregion
+//#region src/animations/magnetic.tsx
+function MagneticPreset(props) {
+	const { dropzone, labels } = useUploaderContext();
+	const { dragState, isWindowDrag, lastDrop } = dropzone;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-magnetic", props.classNames?.root),
+		"data-window-drag": isWindowDrag || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps({ trackPointer: true }),
+				className: cx("um-zone", "um-magnetic__zone", props.classNames?.zone),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-magnetic__field um-deco",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-magnetic__glow",
+						"aria-hidden": "true"
+					}),
+					props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-magnetic__content",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "um-magnetic__core",
+								"data-snap": lastDrop ? "true" : void 0,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "um-magnetic__ring",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "um-magnetic__ring um-magnetic__ring--2",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 24 })
+								]
+							}, lastDrop?.at ?? 0),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+								className: "um-magnetic__title",
+								children: dragState === "reject" ? labels.dropReject : dragState === "accept" ? labels.dropActive : props.title ?? "Pull files into the field"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "um-magnetic__sub",
+								children: ["Drop anywhere here, paste, or ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+									variant: "link",
+									children: "browse"
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+				props,
+				progressVariant: "bar",
+				allowPause: true,
+				className: "um-magnetic__queue"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, { className: "um-magnetic__badge" })
+		]
+	});
+}
+const magneticPreset = {
+	...require_core.PRESET_INFO["magnetic"],
+	Component: MagneticPreset
+};
+//#endregion
+//#region src/animations/visualizers.tsx
+const shown = (item) => item.status === "success" ? 1 : item.progress;
+const vars = (item, extra = {}) => ({
+	"--um-p": shown(item),
+	"--k": KIND_COLORS[item.kind],
+	...extra
+});
+/** Image sharpens and saturates from the centre outward as bytes upload. */
+function BloomVisual({ item }) {
+	const url = useFilePreview(item);
+	const Glyph = KIND_ICONS[item.kind];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "um-bloom",
+		"data-status": item.status,
+		style: vars(item),
+		children: url ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			className: "um-bloom__under",
+			src: url,
+			alt: "",
+			draggable: false
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			className: "um-bloom__over",
+			src: url,
+			alt: "",
+			draggable: false
+		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-bloom__under um-bloom__wash",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { size: 28 })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "um-bloom__over um-bloom__wash um-bloom__wash--on",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { size: 28 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-bloom__ext",
+				children: require_core.getFileLabel(item)
+			})]
+		})] })
+	});
+}
+/** A page whose lines are inked by a scanning beam. Text files show their real first lines. */
+function PageVisual({ item }) {
+	const snippet = useTextSnippet(item, 10);
+	const skeleton = (0, react.useMemo)(() => {
+		const random = seededRandom(item.id);
+		return Array.from({ length: 10 }, (_, index) => index === 0 ? 55 : index % 4 === 3 ? 40 + random() * 25 : 70 + random() * 28);
+	}, [item.id]);
+	const lines = snippet && snippet.length > 0 ? snippet : null;
+	const count = lines ? lines.length : skeleton.length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "um-page",
+		"data-status": item.status,
+		"data-real": lines ? "true" : void 0,
+		style: vars(item),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-page__lines",
+				children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-page__line",
+					style: {
+						"--li": (index + .5) / count,
+						"--w": lines ? "auto" : `${skeleton[index]}%`
+					},
+					children: lines ? lines[index] : null
+				}, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-page__scan",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-page__fold",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-page__tag",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+					kind: item.kind,
+					label: require_core.getFileLabel(item),
+					size: 22
+				})
+			}),
+			item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-page__stamp",
+				"aria-hidden": "true",
+				children: "Uploaded"
+			}) : null
+		]
+	});
+}
+const FRAMES = 6;
+/** Real frames extracted from the video light up one by one as it uploads. */
+function FilmstripVisual({ item }) {
+	const frames = useVideoFrames(item.kind === "video" ? item.file : null, FRAMES);
+	const still = useFilePreview(item.kind === "image" ? item : null);
+	const lit = Math.floor(shown(item) * FRAMES + 1e-4);
+	const Glyph = KIND_ICONS[item.kind];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "um-film",
+		"data-status": item.status,
+		style: vars(item),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-film__strip",
+			children: Array.from({ length: FRAMES }, (_, index) => {
+				const src = frames[index] ?? still;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-film__frame",
+					"data-lit": index < lit || void 0,
+					style: { "--fi": index },
+					children: src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src,
+						alt: "",
+						draggable: false
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { size: 16 })
+				}, index);
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-film__playhead",
+			"aria-hidden": "true"
+		})]
+	});
+}
+const BARS = 48;
+/** Waveform of the actual audio (decoded locally); a stable pseudo-waveform for other files. */
+function WaveformVisual({ item }) {
+	const { peaks, real } = useAudioPeaks(item.file, BARS, item.kind === "audio");
+	const ripple = useBecameTrue(item.status === "success", 1400);
+	const progress = shown(item);
+	const head = Math.floor(progress * BARS);
+	const layer = (variant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: `um-wave__layer um-wave__layer--${variant}`,
+		"aria-hidden": "true",
+		children: peaks.map((peak, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-wave__bar",
+			"data-head": variant === "fill" && item.status === "uploading" && Math.abs(index - head) <= 2 ? "true" : void 0,
+			style: {
+				"--h": peak.toFixed(3),
+				"--bi": index / BARS
+			}
+		}, index))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "um-wave",
+		"data-status": item.status,
+		"data-real": real || void 0,
+		"data-ripple": ripple || void 0,
+		style: vars(item),
+		children: [layer("base"), layer("fill")]
+	});
+}
+/** Play/pause a local preview of an audio file. The object URL is created on first play and revoked on unmount. */
+function AudioPreviewButton({ item }) {
+	const { labels } = useUploaderContext();
+	const audio = (0, react.useRef)(null);
+	const url = (0, react.useRef)(null);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	(0, react.useEffect)(() => () => {
+		audio.current?.pause();
+		if (url.current) URL.revokeObjectURL(url.current);
+	}, []);
+	if (item.kind !== "audio") return null;
+	const toggle = () => {
+		if (!audio.current) {
+			url.current = URL.createObjectURL(item.file);
+			audio.current = new Audio(url.current);
+			audio.current.addEventListener("ended", () => setPlaying(false));
+			audio.current.addEventListener("pause", () => setPlaying(false));
+			audio.current.addEventListener("play", () => setPlaying(true));
+		}
+		if (audio.current.paused) audio.current.play().catch(() => setPlaying(false));
+		else audio.current.pause();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: "um-icon-btn um-wave__play",
+		"aria-label": `${playing ? labels.pause : "Play"} preview of ${item.name}`,
+		"aria-pressed": playing,
+		onClick: (event) => {
+			event.stopPropagation();
+			toggle();
+		},
+		children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PauseIcon, { size: 15 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, { size: 15 })
+	});
+}
+const GRID = 8;
+/** The file assembles from flying pixels in a shuffled order driven by progress (one CSS variable, no per-cell renders). */
+const PixelVisual = /* @__PURE__ */ (0, react.memo)(function PixelVisual({ item }) {
+	const url = useFilePreview(item);
+	const cells = (0, react.useMemo)(() => {
+		const random = seededRandom(item.id);
+		return Array.from({ length: 64 }, (_, i) => i).sort(() => random() - .5).map((rank, index) => ({
+			index,
+			rank: rank / 64,
+			dx: (random() - .5) * 120,
+			dy: (random() - .5) * 120,
+			shade: 35 + random() * 60
+		}));
+	}, [item.id]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "um-pixel",
+		"data-status": item.status,
+		style: vars(item),
+		children: [cells.map((cell) => {
+			const row = Math.floor(cell.index / GRID);
+			const col = cell.index % GRID;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-pixel__cell",
+				style: {
+					"--o": cell.rank.toFixed(3),
+					"--dx": `${cell.dx.toFixed(0)}px`,
+					"--dy": `${cell.dy.toFixed(0)}px`,
+					background: url ? `url("${url}") ${col / 7 * 100}% ${row / 7 * 100}% / 800% 800%` : `color-mix(in oklab, var(--k) ${cell.shade.toFixed(0)}%, var(--um-surface))`
+				}
+			}, cell.index);
+		}), !url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-pixel__glyph",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+				kind: item.kind,
+				label: require_core.getFileLabel(item),
+				size: 34
+			})
+		}) : null]
+	});
+});
+const VISUALIZERS = {
+	bloom: BloomVisual,
+	page: PageVisual,
+	filmstrip: FilmstripVisual,
+	waveform: WaveformVisual,
+	pixel: PixelVisual,
+	card: ({ item }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+		kind: item.kind,
+		label: require_core.getFileLabel(item),
+		size: 44
+	})
+};
+const DEFAULT_KIND_VISUALIZERS = {
+	image: "bloom",
+	video: "filmstrip",
+	audio: "waveform",
+	pdf: "page",
+	document: "page",
+	text: "page",
+	code: "page",
+	data: "page",
+	spreadsheet: "page",
+	presentation: "pixel",
+	archive: "pixel",
+	unknown: "pixel"
+};
+/** Square tile with overlay meta – used by Bloom and Pixel presets. */
+const VisualTile = /* @__PURE__ */ (0, react.memo)(function VisualTile({ item, visual }) {
+	const { labels } = useUploaderContext();
+	const celebrate = useBecameTrue(item.status === "success", 1100);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "um-tile",
+		"data-status": item.status,
+		"data-celebrate": celebrate || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "um-tile__visual",
+				children: visual
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-tile__overlay",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-tile__badge",
+					"aria-hidden": "true",
+					children: item.status === "success" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 18 }) : item.status === "uploading" ? `${Math.round(item.progress * 100)}%` : null
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+					item,
+					className: "um-tile__actions"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-tile__meta",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-tile__name",
+					title: item.name,
+					children: item.name
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemStatus, { item })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "um-sr-only",
+				role: "progressbar",
+				"aria-label": item.name,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": Math.round(shown(item) * 100),
+				"aria-valuetext": progressValueText(item, labels)
+			}),
+			celebrate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+				seed: item.id,
+				count: 10,
+				spread: 60,
+				shape: "petal"
+			}) : null
+		]
+	});
+});
+/** Row with a visual on the left – used by Filmstrip, Waveform and Adaptive presets. */
+const VisualRow = /* @__PURE__ */ (0, react.memo)(function VisualRow({ item, visual, visualKind, leading }) {
+	const { labels } = useUploaderContext();
+	const celebrate = useBecameTrue(item.status === "success", 1100);
+	const failed = useBecameTrue(item.status === "error", 700);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "um-vrow",
+		"data-status": item.status,
+		"data-visual": visualKind,
+		"data-shake": failed || void 0,
+		children: [
+			leading,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "um-vrow__visual",
+				children: visual
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-vrow__body",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "um-card__row",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-card__name",
+							title: item.name,
+							children: item.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-card__size",
+							children: require_core.formatBytes(item.size)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemStatus, { item }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgress, {
+						className: "um-sr-only",
+						value: shown(item),
+						status: item.status,
+						label: item.name,
+						valueText: progressValueText(item, labels)
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+				item,
+				allowPause: true
+			}),
+			celebrate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+				seed: item.id,
+				count: 10,
+				spread: 50,
+				className: "um-vrow__burst"
+			}) : null
+		]
+	});
+});
+function ZoneTile({ title, icon, className }) {
+	const { dropzone, labels, hintId } = useUploaderContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...dropzone.getRootProps({
+			focusable: true,
+			"aria-label": labels.zoneLabel,
+			"aria-describedby": hintId
+		}),
+		className: cx("um-zone", "um-zonetile", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-zonetile__icon",
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "um-zonetile__title",
+			children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : title
+		})]
+	});
+}
+//#endregion
+//#region src/animations/media.tsx
+/** Grid of tiles where the first tile is the drop zone. */
+function TileGrid({ props, variant, zoneTitle, zoneIcon, render }) {
+	const { items } = useUploaderContext();
+	const renderFile = useRenderFile(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-media", `um-media--${variant}`, props.classNames?.root),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-media__grid",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoneTile, {
+					title: props.title ? String(props.title) : zoneTitle,
+					icon: zoneIcon,
+					className: props.classNames?.zone
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedList, {
+					as: "div",
+					items,
+					className: cx("um-media__items", props.classNames?.list),
+					itemClassName: props.classNames?.item,
+					"aria-label": "Files",
+					renderItem: (item) => renderFile(item, () => render(item))
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-footer-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "um-media__footer",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "soft" })]
+				})]
+			}),
+			props.showRejections !== false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadRejections, {}) : null
+		]
+	});
+}
+/** Banner zone + list of rows. */
+function RowList({ props, variant, zoneTitle, zoneIcon, visualFor, leading }) {
+	const { items, dropzone, labels } = useUploaderContext();
+	const renderFile = useRenderFile(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-media", `um-media--${variant}`, props.classNames?.root),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps(),
+				className: cx("um-zone", "um-media__banner", props.classNames?.zone),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "um-media__deco um-deco",
+					"aria-hidden": "true",
+					children: Array.from({ length: 24 }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { "--i": index } }, index))
+				}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-media__banner-icon",
+						children: zoneIcon
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "um-media__banner-text",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : props.title ?? zoneTitle }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "link" }),
+							" · ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+						] })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {})
+				] })]
+			}),
+			props.showRejections !== false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadRejections, {}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedList, {
+				items,
+				className: cx("um-media__rows", props.classNames?.list),
+				itemClassName: props.classNames?.item,
+				"aria-label": "Files",
+				renderItem: (item) => renderFile(item, () => {
+					const kind = visualFor(item);
+					const Visual = VISUALIZERS[kind];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisualRow, {
+						item,
+						visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Visual, { item }),
+						visualKind: kind,
+						leading: leading?.(item)
+					});
+				})
+			})
+		]
+	});
+}
+const bloomPreset = {
+	...require_core.PRESET_INFO["bloom"],
+	Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileGrid, {
+		props,
+		variant: "bloom",
+		zoneTitle: "Add photos",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageIcon, { size: 26 }),
+		render: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisualTile, {
+			item,
+			visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BloomVisual, { item })
+		})
+	})
+};
+const pixelPreset = {
+	...require_core.PRESET_INFO["pixel"],
+	Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileGrid, {
+		props,
+		variant: "pixel",
+		zoneTitle: "Drop to assemble",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 26 }),
+		render: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisualTile, {
+			item,
+			visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PixelVisual, { item })
+		})
+	})
+};
+const pageRevealPreset = {
+	...require_core.PRESET_INFO["page-reveal"],
+	Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TileGrid, {
+		props,
+		variant: "page",
+		zoneTitle: "Add documents",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 24 }),
+		render: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisualTile, {
+			item,
+			visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageVisual, { item })
+		})
+	})
+};
+const filmstripPreset = {
+	...require_core.PRESET_INFO["filmstrip"],
+	Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowList, {
+		props,
+		variant: "film",
+		zoneTitle: "Drop video clips",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoIcon, { size: 24 }),
+		visualFor: () => "filmstrip"
+	})
+};
+const waveformPreset = {
+	...require_core.PRESET_INFO["waveform"],
+	Component: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowList, {
+		props,
+		variant: "wave",
+		zoneTitle: "Drop audio files",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MusicIcon, { size: 24 }),
+		visualFor: () => "waveform",
+		leading: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioPreviewButton, { item })
+	})
+};
+function AdaptivePreset(props) {
+	const mapping = {
+		...DEFAULT_KIND_VISUALIZERS,
+		...props.fileAnimations
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowList, {
+		props,
+		variant: "adaptive",
+		zoneTitle: "Drop anything – each type gets its own motion",
+		zoneIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 24 }),
+		visualFor: (item) => mapping[item.kind],
+		leading: (item) => item.kind === "audio" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioPreviewButton, { item }) : null
+	});
+}
+const adaptivePreset = {
+	...require_core.PRESET_INFO["adaptive"],
+	Component: AdaptivePreset
+};
+//#endregion
+//#region src/animations/orbit.tsx
+const LANES = [
+	74,
+	104,
+	134
+];
+const SPEEDS = [
+	9,
+	13,
+	18
+];
+const MAX_PLANETS = 12;
+/** Stable lane/phase per file so planets never jump lanes when siblings land. */
+function laneOf(id, order) {
+	let hash = 0;
+	for (let i = 0; i < id.length; i += 1) hash = hash * 31 + id.charCodeAt(i) | 0;
+	return {
+		lane: order % LANES.length,
+		phase: Math.abs(hash) % 100 / 100
+	};
+}
+function OrbitPreset(props) {
+	const { items, totals, dropzone, labels, motion } = useUploaderContext();
+	const { title, detail } = useSummaryText();
+	const planets = usePresence(items.filter((item) => item.status !== "success").slice(0, MAX_PLANETS), motion.reduced ? 0 : 900);
+	const done = totals.isComplete && totals.error === 0;
+	const order = new Map(items.map((item, index) => [item.id, index]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-orbit", props.classNames?.root),
+		"data-active": totals.active > 0 || void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...dropzone.getRootProps(),
+			className: cx("um-zone", "um-orbit__zone", props.classNames?.zone),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-orbit__system",
+				"aria-hidden": "true",
+				children: [
+					LANES.map((radius) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-orbit__lane",
+						style: { "--r": `${radius}px` }
+					}, radius)),
+					planets.map(({ item, exiting }) => {
+						const { lane, phase } = laneOf(item.id, order.get(item.id) ?? 0);
+						const base = LANES[lane];
+						const pull = item.status === "uploading" ? item.progress : 0;
+						const radius = exiting ? 0 : base * (1 - .55 * pull);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-orbit__track",
+							"data-status": item.status,
+							"data-exiting": exiting || void 0,
+							style: {
+								"--r": `${radius}px`,
+								"--speed": `${SPEEDS[lane]}s`,
+								"--delay": `${-phase * SPEEDS[lane]}s`,
+								"--k": KIND_COLORS[item.kind]
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "um-orbit__planet",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "um-orbit__body",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
+										item,
+										size: 30
+									})
+								})
+							})
+						}, item.id);
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-orbit__core",
+						"data-pulse": totals.success > 0 || void 0,
+						children: done ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 40 }) : items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-orbit__percent",
+							children: [Math.round(totals.progress * 100), "%"]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 28 })
+					}, totals.success)
+				]
+			}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-orbit__text",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : items.length > 0 ? title : props.title ?? "Put your files in orbit" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: items.length > 0 && detail ? detail : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Drop files or ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+						variant: "link",
+						children: "browse"
+					})] }) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+			props,
+			progressVariant: "bar"
+		})]
+	});
+}
+const orbitPreset = {
+	...require_core.PRESET_INFO["orbit"],
+	Component: OrbitPreset
+};
+//#endregion
+//#region src/animations/portal.tsx
+function PortalPreset(props) {
+	const { dropzone, labels, store, totals, motion, items } = useUploaderContext();
+	const portalRef = (0, react.useRef)(null);
+	const { getLastDrop } = dropzone;
+	const [ghosts, setGhosts] = (0, react.useState)([]);
+	const { title, detail } = useSummaryText();
+	const complete = totals.isComplete && totals.error === 0;
+	const flash = useBecameTrue(complete, 1200);
+	const absorbing = totals.active > 0;
+	(0, react.useEffect)(() => {
+		if (motion.reduced) return;
+		return store.on("added", (added) => {
+			const portal = portalRef.current?.getBoundingClientRect();
+			const drop = getLastDrop();
+			const recent = drop && Date.now() - drop.at < 400;
+			const baseAngle = portal && recent ? Math.atan2(drop.y - (portal.top + portal.height / 2), drop.x - (portal.left + portal.width / 2)) : -Math.PI / 2;
+			const baseRadius = portal && recent ? Math.min(220, Math.hypot(drop.x - (portal.left + portal.width / 2), drop.y - (portal.top + portal.height / 2))) : 150;
+			const next = added.slice(0, 8).map((item, index) => ({
+				id: item.id,
+				kind: item.kind,
+				label: require_core.getFileLabel(item),
+				angle: baseAngle * 180 / Math.PI + index * 34,
+				radius: Math.max(110, baseRadius + index * 8),
+				delay: index * 90
+			}));
+			setGhosts((current) => [...current, ...next]);
+			const ids = new Set(next.map((ghost) => ghost.id));
+			setTimeout(() => setGhosts((current) => current.filter((ghost) => !ids.has(ghost.id))), 1400 + next.length * 90);
+		});
+	}, [
+		store,
+		motion.reduced,
+		getLastDrop
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-portal", props.classNames?.root),
+		"data-active": absorbing || void 0,
+		"data-complete": complete || void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...dropzone.getRootProps(),
+			className: cx("um-zone", "um-portal__zone", props.classNames?.zone),
+			style: { "--um-p": totals.progress },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "um-portal__gate",
+				ref: portalRef,
+				"aria-hidden": "true",
+				"data-flash": flash || void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "um-portal__halo" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "um-portal__ring" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "um-portal__ring um-portal__ring--inner" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: "um-portal__progress",
+						viewBox: "0 0 100 100",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "50",
+							cy: "50",
+							r: "47",
+							pathLength: 1
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-portal__core",
+						children: complete ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 34 }) : null
+					}),
+					ghosts.map((ghost) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-portal__ghost",
+						style: {
+							"--a": `${ghost.angle}deg`,
+							"--r": `${ghost.radius}px`,
+							animationDelay: `${ghost.delay}ms`
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {
+							kind: ghost.kind,
+							label: ghost.label,
+							size: 30
+						})
+					}, ghost.id))
+				]
+			}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-portal__text",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : items.length > 0 ? title : props.title ?? "Open a portal for your files" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: items.length > 0 && detail ? detail : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Drop files into the portal or ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+						variant: "link",
+						children: "browse"
+					})] }) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+			props,
+			progressVariant: "beam"
+		})]
+	});
+}
+const portalPreset = {
+	...require_core.PRESET_INFO["portal"],
+	Component: PortalPreset
+};
+//#endregion
+//#region src/animations/segment-ring.tsx
+const SIZE = 184;
+const STROKE = 12;
+const RADIUS = 86;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function SegmentRingPreset(props) {
+	const { items, totals, dropzone, labels } = useUploaderContext();
+	const { title, detail } = useSummaryText();
+	const ringItems = items.filter((item) => item.status !== "canceled");
+	const done = totals.isComplete && totals.error === 0;
+	const celebrate = useBecameTrue(done, 1300);
+	const floor = ringItems.reduce((sum, item) => sum + item.size, 0) * .05;
+	const weights = ringItems.map((item) => Math.max(item.size, floor, 1));
+	const weightSum = weights.reduce((sum, weight) => sum + weight, 0);
+	const gap = ringItems.length > 1 ? 4 : 0;
+	let cursor = 0;
+	const segments = ringItems.map((item, index) => {
+		const sweep = weights[index] / weightSum * 360;
+		const start = cursor;
+		cursor += sweep;
+		return {
+			item,
+			start,
+			length: Math.max(0, (sweep - gap) / 360 * CIRCUMFERENCE),
+			progress: item.status === "success" ? 1 : item.progress
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-ring", props.classNames?.root),
+		"data-done": done || void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...dropzone.getRootProps(),
+			className: cx("um-zone", "um-ring__zone", props.classNames?.zone),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-ring__dial",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: SIZE,
+						height: SIZE,
+						viewBox: `0 0 ${SIZE} ${SIZE}`,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							className: "um-ring__base",
+							cx: SIZE / 2,
+							cy: SIZE / 2,
+							r: RADIUS,
+							strokeWidth: STROKE
+						}), segments.map(({ item, start, length, progress }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+							className: "um-ring__segment",
+							"data-status": item.status,
+							style: {
+								rotate: `${start - 90}deg`,
+								"--k": KIND_COLORS[item.kind]
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								className: "um-ring__track",
+								cx: SIZE / 2,
+								cy: SIZE / 2,
+								r: RADIUS,
+								strokeWidth: STROKE,
+								strokeDasharray: `${length} ${CIRCUMFERENCE}`
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								className: "um-ring__fill",
+								cx: SIZE / 2,
+								cy: SIZE / 2,
+								r: RADIUS,
+								strokeWidth: STROKE,
+								strokeDasharray: `${length * progress} ${CIRCUMFERENCE}`
+							})]
+						}, item.id))]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "um-ring__center",
+						children: done ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 52 }) : ringItems.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-ring__percent",
+							children: [Math.round(totals.progress * 100), "%"]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-ring__count",
+							children: [
+								totals.success,
+								" of ",
+								ringItems.length
+							]
+						})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 30 })
+					}),
+					celebrate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+						seed: "ring",
+						count: 18,
+						spread: 110
+					}) : null
+				]
+			}), props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-ring__text",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : ringItems.length > 0 ? title : props.title ?? "Every file gets its own arc" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-ring__detail",
+						children: detail || (ringItems.length > 0 ? "Drop more files on the dial" : "Drop files on the dial")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-ring__browse",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "soft" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+			props,
+			progressVariant: "ring"
+		})]
+	});
+}
+const segmentRingPreset = {
+	...require_core.PRESET_INFO["segment-ring"],
+	Component: SegmentRingPreset
+};
+//#endregion
+//#region src/animations/stack.tsx
+const VISIBLE = 5;
+function StackPreset(props) {
+	const { items, dropzone, labels, motion, store } = useUploaderContext();
+	const [showList, setShowList] = (0, react.useState)(false);
+	const listId = (0, react.useId)();
+	const renderFile = useRenderFile(props);
+	const deck = items.filter((item) => item.status !== "success");
+	const done = items.filter((item) => item.status === "success");
+	const entries = usePresence(deck, motion.reduced ? 0 : 700);
+	let depth = 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-stack", props.classNames?.root),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-stack__layout",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...dropzone.getRootProps({ noClick: deck.length > 0 }),
+					className: cx("um-zone", "um-stack__deck", props.classNames?.zone),
+					"data-count": Math.min(deck.length, VISIBLE),
+					children: [
+						deck.length === 0 && !entries.some((entry) => entry.exiting) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "um-stack__empty",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "um-stack__ghost",
+									style: { "--d": 2 },
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "um-stack__ghost",
+									style: { "--d": 1 },
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "um-stack__placeholder",
+									children: props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 26 }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: dropzone.dragState === "reject" ? labels.dropReject : dropzone.dragState === "accept" ? labels.dropActive : props.title ?? "Stack files here" }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, { variant: "link" }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, {})
+									] })
+								})
+							]
+						}) : null,
+						entries.map(({ item, exiting }) => {
+							const d = exiting ? -1 : depth++;
+							if (d >= VISIBLE) return null;
+							const landed = exiting && store.getItem(item.id)?.status === "success";
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "um-stack__card",
+								"data-status": item.status,
+								"data-exit": exiting ? landed ? "land" : "discard" : void 0,
+								"data-front": d === 0 || void 0,
+								style: { "--d": Math.max(d, 0) },
+								"aria-hidden": d !== 0 || exiting || void 0,
+								inert: d !== 0 || exiting || void 0,
+								children: renderFile(item, () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
+										item,
+										size: 58
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "um-stack__meta",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "um-stack__name",
+											title: item.name,
+											children: item.name
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "um-stack__size",
+											children: require_core.formatBytes(item.size)
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgress, {
+										value: item.progress,
+										status: item.status,
+										label: item.name,
+										valueText: progressValueText(item, labels)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "um-stack__foot",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemStatus, { item }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemActions, {
+											item,
+											allowPause: true
+										})]
+									})
+								] }))
+							}, item.id);
+						}),
+						deck.length > VISIBLE ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-stack__more",
+							children: ["+", deck.length - VISIBLE]
+						}) : null,
+						deck.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+							variant: "icon",
+							className: "um-stack__add",
+							"aria-label": labels.uploadMore,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 18 })
+						}) : null
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "um-stack__tray",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-stack__tray-title",
+							children: [
+								labels.status.success,
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: done.length })
+							]
+						}),
+						done.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-stack__tray-empty",
+							children: "Finished files land here"
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedList, {
+							items: done,
+							className: "um-stack__done",
+							"aria-label": labels.status.success,
+							renderItem: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "um-stack__chip",
+								title: item.name,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilePreview, {
+										item,
+										size: 28
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "um-stack__chip-name",
+										children: item.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, { size: 16 })
+								]
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "um-footer-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "um-btn um-btn--link um-stack__toggle",
+					"aria-expanded": showList,
+					"aria-controls": listId,
+					onClick: () => setShowList((value) => !value),
+					disabled: items.length === 0,
+					children: showList ? labels.collapse : `${labels.expand} (${items.length})`
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: listId,
+				hidden: !showList,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+					props,
+					progressVariant: "bar",
+					allowPause: true
+				})
+			})
+		]
+	});
+}
+const stackPreset = {
+	...require_core.PRESET_INFO["stack"],
+	Component: StackPreset
+};
+//#endregion
+//#region src/components/Menu.tsx
+/** Small accessible menu button: arrow-key navigation, Escape to close, focus restored to the trigger. */
+function ActionMenu({ label, icon, actions, className, align = "end" }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const triggerRef = (0, react.useRef)(null);
+	const menuRef = (0, react.useRef)(null);
+	const menuId = (0, react.useId)();
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		(menuRef.current?.querySelector("[role=\"menuitem\"]:not([disabled])"))?.focus();
+		const onPointer = (event) => {
+			const target = event.target;
+			if (!menuRef.current?.contains(target) && !triggerRef.current?.contains(target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointer);
+		return () => document.removeEventListener("pointerdown", onPointer);
+	}, [open]);
+	const close = (restoreFocus) => {
+		setOpen(false);
+		if (restoreFocus) triggerRef.current?.focus();
+	};
+	const onMenuKeyDown = (event) => {
+		const items = Array.from(menuRef.current?.querySelectorAll("[role=\"menuitem\"]:not([disabled])") ?? []);
+		const index = items.indexOf(document.activeElement);
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close(true);
+		} else if (event.key === "ArrowDown") {
+			event.preventDefault();
+			items[(index + 1) % items.length]?.focus();
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			items[(index - 1 + items.length) % items.length]?.focus();
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			items[0]?.focus();
+		} else if (event.key === "End") {
+			event.preventDefault();
+			items[items.length - 1]?.focus();
+		} else if (event.key === "Tab") close(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-menu", className),
+		"data-align": align,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref: triggerRef,
+			type: "button",
+			className: "um-icon-btn um-menu__trigger",
+			"aria-label": label,
+			title: label,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-controls": open ? menuId : void 0,
+			onClick: (event) => {
+				event.stopPropagation();
+				setOpen((value) => !value);
+			},
+			children: icon
+		}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: menuRef,
+			id: menuId,
+			role: "menu",
+			"aria-label": label,
+			className: "um-menu__list",
+			onKeyDown: onMenuKeyDown,
+			onClick: (event) => event.stopPropagation(),
+			children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				role: "menuitem",
+				className: "um-menu__item",
+				"data-tone": action.tone,
+				disabled: action.disabled,
+				onClick: () => {
+					close(true);
+					action.onSelect();
+				},
+				children: action.label
+			}, action.id))
+		}) : null]
+	});
+}
+//#endregion
+//#region src/animations/wave-bar.tsx
+const BAR_WAVE = /* @__PURE__ */ wavePath(1200, 38, 3.2, 8);
+function WaveBarPreset(props) {
+	const context = useUploaderContext();
+	const { totals, items, dropzone, labels } = context;
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const drawerId = (0, react.useId)();
+	const { title, detail } = useSummaryText();
+	const state = items.length === 0 ? "idle" : totals.active > 0 ? "active" : totals.paused > 0 ? "paused" : totals.error > 0 ? "error" : totals.isComplete ? "done" : "idle";
+	const celebrate = useBecameTrue(state === "done", 1400);
+	const dragging = dropzone.dragState !== "idle";
+	const progress = state === "done" ? 1 : totals.progress;
+	const menuActions = [
+		{
+			id: "add",
+			label: labels.uploadMore,
+			onSelect: context.openFileDialog
+		},
+		{
+			id: "retry",
+			label: labels.retryFailed,
+			onSelect: () => context.retry(),
+			disabled: totals.error + totals.canceled === 0
+		},
+		{
+			id: "clear-done",
+			label: labels.clearCompleted,
+			onSelect: () => context.clear("completed"),
+			disabled: totals.success === 0
+		},
+		{
+			id: "clear",
+			label: labels.clearAll,
+			onSelect: () => context.clear("all"),
+			tone: "danger",
+			disabled: items.length === 0
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx("um-wavebar", props.classNames?.root),
+		"data-state": state,
+		"data-drag": dropzone.dragState,
+		"data-expanded": expanded || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...dropzone.getRootProps({ noClick: state !== "idle" }),
+				className: cx("um-zone", "um-wavebar__bar", props.classNames?.zone),
+				style: { "--um-p": progress },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-wavebar__fill",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-wavebar__edge",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "um-wavebar__text",
+						children: state === "idle" ? props.zoneContent ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-wavebar__title",
+							children: dropzone.dragState === "reject" ? labels.dropReject : dragging ? labels.dropActive : props.title ?? "Drop files to upload"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-wavebar__detail",
+							children: [
+								"or ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+									variant: "link",
+									children: "browse"
+								}),
+								" · ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadHint, { className: "um-wavebar__hint" })
+							]
+						})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "um-wavebar__title",
+							children: [
+								state === "done" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedCheck, {
+									size: 18,
+									className: "um-wavebar__check"
+								}) : null,
+								title,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportBadge, { className: "um-wavebar__badge" })
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "um-wavebar__detail",
+							"aria-hidden": state === "active" || void 0,
+							children: detail || (state === "done" ? `${items.length} of ${items.length} complete` : labels.summary(totals))
+						})] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "um-wavebar__controls",
+						children: state === "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BrowseButton, {
+							variant: "icon",
+							className: "um-wavebar__browse",
+							"aria-label": labels.browse,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 18 })
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							state === "active" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+								label: labels.pause,
+								onClick: () => context.pause(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PauseIcon, { size: 16 })
+							}) : state === "paused" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+								label: labels.resume,
+								onClick: () => context.resume(),
+								tone: "accent",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, { size: 16 })
+							}) : state === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+								label: labels.retryFailed,
+								onClick: () => context.retry(),
+								tone: "accent",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RetryIcon, {
+									size: 16,
+									className: "um-retry-icon"
+								})
+							}) : null,
+							state === "active" || state === "paused" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+								label: labels.cancelAll,
+								onClick: () => context.cancel(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, { size: 16 })
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+								label: labels.uploadMore,
+								onClick: context.openFileDialog,
+								tone: "accent",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 16 })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "um-icon-btn",
+								"aria-expanded": expanded,
+								"aria-controls": drawerId,
+								"aria-label": expanded ? labels.collapse : labels.expand,
+								title: expanded ? labels.collapse : labels.expand,
+								onClick: (event) => {
+									event.stopPropagation();
+									setExpanded((value) => !value);
+								},
+								children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseIcon, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandIcon, { size: 16 })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionMenu, {
+								label: labels.moreActions,
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreIcon, { size: 16 }),
+								actions: menuActions
+							})
+						] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-wavebar__wave-clip",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							className: "um-wavebar__wave",
+							viewBox: "0 0 1200 16",
+							preserveAspectRatio: "none",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: BAR_WAVE })
+						})
+					}),
+					state !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "um-sr-only",
+						role: "progressbar",
+						"aria-label": title,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(progress * 100),
+						"aria-valuetext": detail || title
+					}) : null,
+					celebrate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Burst, {
+						seed: "wavebar",
+						count: 16,
+						spread: 70,
+						className: "um-wavebar__burst"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "um-wavebar__drawer",
+				id: drawerId,
+				hidden: !expanded || items.length === 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "um-wavebar__drawer-inner",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PresetQueue, {
+						props,
+						progressVariant: "wave",
+						allowPause: true
+					})
+				})
+			}),
+			!expanded && props.showRejections !== false && context.rejections.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadRejections, {}) : null
+		]
+	});
+}
+const waveBarPreset = {
+	...require_core.PRESET_INFO["wave-bar"],
+	Component: WaveBarPreset
+};
+//#endregion
+//#region src/animations/index.ts
+/** All built-in presets, in gallery order. */
+const presets = [
+	cardFanPreset,
+	waveBarPreset,
+	hoopShotPreset,
+	essentialPreset,
+	segmentRingPreset,
+	beamPreset,
+	magneticPreset,
+	portalPreset,
+	liquidPreset,
+	stackPreset,
+	orbitPreset,
+	bloomPreset,
+	pageRevealPreset,
+	filmstripPreset,
+	waveformPreset,
+	pixelPreset,
+	adaptivePreset
+];
+function getPreset(id) {
+	return presets.find((preset) => preset.id === id);
+}
+//#endregion
+//#region src/hooks/useDropzone.ts
+const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+function compose(...handlers) {
+	return (event) => {
+		for (const handler of handlers) handler?.(event);
+	};
+}
+const INTERACTIVE = "button, a[href], input, select, textarea, [role=\"button\"], [role=\"menuitem\"], [data-um-no-open]";
+function useDropzone(options) {
+	const { accept = [], multiple = true, maxFiles, disabled = false, capture, preventWindowDrop = true } = options;
+	const inputRef = (0, react.useRef)(null);
+	const onFilesRef = (0, react.useRef)(options.onFiles);
+	onFilesRef.current = options.onFiles;
+	const [dragState, setDragState] = (0, react.useState)("idle");
+	const [isWindowDrag, setWindowDrag] = (0, react.useState)(false);
+	const [lastDrop, setLastDrop] = (0, react.useState)(null);
+	const lastDropRef = (0, react.useRef)(null);
+	const getLastDrop = (0, react.useCallback)(() => lastDropRef.current, []);
+	const depth = (0, react.useRef)(0);
+	const pointerFrame = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined" || disabled) return;
+		let windowDepth = 0;
+		const enter = (event) => {
+			if (!hasFiles(event)) return;
+			windowDepth += 1;
+			setWindowDrag(true);
+		};
+		const leave = (event) => {
+			if (!hasFiles(event)) return;
+			windowDepth = Math.max(0, windowDepth - 1);
+			if (windowDepth === 0) setWindowDrag(false);
+		};
+		const reset = () => {
+			windowDepth = 0;
+			setWindowDrag(false);
+		};
+		const guard = (event) => {
+			if (!preventWindowDrop || event.defaultPrevented || !hasFiles(event)) return;
+			event.preventDefault();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+		};
+		const drop = (event) => {
+			guard(event);
+			reset();
+		};
+		window.addEventListener("dragenter", enter);
+		window.addEventListener("dragleave", leave);
+		window.addEventListener("dragover", guard);
+		window.addEventListener("drop", drop);
+		window.addEventListener("dragend", reset);
+		return () => {
+			window.removeEventListener("dragenter", enter);
+			window.removeEventListener("dragleave", leave);
+			window.removeEventListener("dragover", guard);
+			window.removeEventListener("drop", drop);
+			window.removeEventListener("dragend", reset);
+		};
+	}, [disabled, preventWindowDrop]);
+	(0, react.useEffect)(() => () => {
+		if (pointerFrame.current !== null) cancelAnimationFrame(pointerFrame.current);
+	}, []);
+	const evaluate = (0, react.useCallback)((transfer) => {
+		const files = Array.from(transfer?.items ?? []).filter((item) => item.kind === "file");
+		if (!multiple && files.length > 1) return "reject";
+		if (maxFiles !== void 0 && files.length > maxFiles) return "reject";
+		if (accept.length > 0 && accept.every((token) => !token.startsWith(".")) && files.some((item) => item.type && !require_core.isFileAccepted({
+			name: "",
+			type: item.type
+		}, accept))) return "reject";
+		return "accept";
+	}, [
+		accept,
+		multiple,
+		maxFiles
+	]);
+	const open = (0, react.useCallback)(() => {
+		if (!disabled) inputRef.current?.click();
+	}, [disabled]);
+	const deliver = (0, react.useCallback)((list) => {
+		const files = Array.from(list ?? []);
+		if (files.length > 0) onFilesRef.current(files);
+	}, []);
+	const setPointer = (element, clientX, clientY) => {
+		if (pointerFrame.current !== null) cancelAnimationFrame(pointerFrame.current);
+		pointerFrame.current = requestAnimationFrame(() => {
+			pointerFrame.current = null;
+			const rect = element.getBoundingClientRect();
+			if (rect.width === 0 || rect.height === 0) return;
+			element.style.setProperty("--um-px", ((clientX - rect.left) / rect.width).toFixed(4));
+			element.style.setProperty("--um-py", ((clientY - rect.top) / rect.height).toFixed(4));
+		});
+	};
+	const resetPointer = (element) => {
+		if (pointerFrame.current !== null) cancelAnimationFrame(pointerFrame.current);
+		pointerFrame.current = null;
+		element.style.setProperty("--um-px", "0.5");
+		element.style.setProperty("--um-py", "0.5");
+	};
+	const getRootProps = (rootOptions = {}) => {
+		const { focusable = false, trackPointer = false, noClick = false, ...rest } = rootOptions;
+		const onDragEnter = (event) => {
+			if (disabled || !hasFiles(event)) return;
+			event.preventDefault();
+			depth.current += 1;
+			setDragState(evaluate(event.dataTransfer));
+		};
+		const onDragOver = (event) => {
+			if (disabled || !hasFiles(event)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "copy";
+			if (trackPointer) setPointer(event.currentTarget, event.clientX, event.clientY);
+		};
+		const onDragLeave = (event) => {
+			if (disabled || !hasFiles(event)) return;
+			depth.current = Math.max(0, depth.current - 1);
+			if (depth.current === 0) {
+				setDragState("idle");
+				if (trackPointer) resetPointer(event.currentTarget);
+			}
+		};
+		const onDrop = (event) => {
+			if (disabled || !hasFiles(event)) return;
+			event.preventDefault();
+			depth.current = 0;
+			setDragState("idle");
+			setWindowDrag(false);
+			const point = {
+				x: event.clientX,
+				y: event.clientY,
+				at: Date.now()
+			};
+			lastDropRef.current = point;
+			setLastDrop(point);
+			deliver(event.dataTransfer.files);
+		};
+		const onClick = (event) => {
+			if (disabled || noClick) return;
+			const interactive = event.target.closest(INTERACTIVE);
+			if (interactive && interactive !== event.currentTarget && event.currentTarget.contains(interactive)) return;
+			open();
+		};
+		const onKeyDown = (event) => {
+			if (!focusable || event.target !== event.currentTarget) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				open();
+			}
+		};
+		const onPaste = (event) => {
+			if (disabled || event.clipboardData.files.length === 0) return;
+			event.preventDefault();
+			deliver(event.clipboardData.files);
+		};
+		const onPointerMove = trackPointer ? (event) => {
+			if (event.pointerType === "mouse") setPointer(event.currentTarget, event.clientX, event.clientY);
+		} : void 0;
+		const onPointerLeave = trackPointer ? (event) => resetPointer(event.currentTarget) : void 0;
+		return {
+			...rest,
+			...focusable ? {
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-disabled": disabled || void 0
+			} : {},
+			"data-um-drag": dragState,
+			"data-um-window-drag": isWindowDrag ? "true" : void 0,
+			"data-um-disabled": disabled ? "true" : void 0,
+			onDragEnter: compose(rest.onDragEnter, onDragEnter),
+			onDragOver: compose(rest.onDragOver, onDragOver),
+			onDragLeave: compose(rest.onDragLeave, onDragLeave),
+			onDrop: compose(rest.onDrop, onDrop),
+			onClick: compose(rest.onClick, onClick),
+			onKeyDown: compose(rest.onKeyDown, onKeyDown),
+			onPaste: compose(rest.onPaste, onPaste),
+			onPointerMove: compose(rest.onPointerMove, onPointerMove),
+			onPointerLeave: compose(rest.onPointerLeave, onPointerLeave)
+		};
+	};
+	const getInputProps = () => ({
+		ref: inputRef,
+		type: "file",
+		multiple,
+		accept: accept.length > 0 ? accept.join(",") : void 0,
+		capture,
+		disabled,
+		tabIndex: -1,
+		hidden: true,
+		"aria-hidden": true,
+		onChange: (event) => {
+			deliver(event.currentTarget.files);
+			event.currentTarget.value = "";
+		}
+	});
+	return {
+		dragState,
+		isDragActive: dragState !== "idle",
+		isWindowDrag,
+		lastDrop,
+		getLastDrop,
+		open,
+		inputRef,
+		getRootProps,
+		getInputProps
+	};
+}
+//#endregion
+//#region src/hooks/useUploader.ts
+/** Subscribe to any upload store. */
+function useUploadSnapshot(store) {
+	return (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+/**
+* Headless uploader: queue state, actions and drag-and-drop wiring with no UI.
+*
+* ```tsx
+* const uploader = useUploader({ upload: createXhrUploader({ url: '/api/upload' }) });
+* <div {...uploader.dropzone.getRootProps({ focusable: true })}>
+*   <input {...uploader.dropzone.getInputProps()} />
+* </div>
+* ```
+*/
+function useUploader(options = {}) {
+	const { store: externalStore, disabled = false, capture, preventWindowDrop, ...uploaderOptions } = options;
+	const [ownStore] = (0, react.useState)(() => externalStore ?? require_core.createUploadStore(uploaderOptions));
+	const store = externalStore ?? ownStore;
+	const owned = !externalStore;
+	useIsomorphicLayoutEffect(() => {
+		if (owned) store.setOptions(uploaderOptions);
+		else {
+			const defined = Object.fromEntries(Object.entries(uploaderOptions).filter(([, value]) => value !== void 0));
+			store.setOptions({
+				...store.getInitialOptions(),
+				...defined
+			});
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (!owned) return;
+		return () => store.dispose();
+	}, [store, owned]);
+	const snapshot = useUploadSnapshot(store);
+	const acceptKey = Array.isArray(uploaderOptions.accept) ? uploaderOptions.accept.join(",") : uploaderOptions.accept;
+	const accept = (0, react.useMemo)(() => require_core.parseAccept(acceptKey), [acceptKey]);
+	const dropzone = useDropzone({
+		onFiles: (0, react.useCallback)((files) => store.addFiles(files), [store]),
+		accept,
+		multiple: uploaderOptions.multiple !== false,
+		maxFiles: uploaderOptions.multiple === false ? 1 : uploaderOptions.maxFiles,
+		disabled,
+		capture,
+		preventWindowDrop
+	});
+	return {
+		...snapshot,
+		store,
+		dropzone,
+		accept,
+		disabled,
+		addFiles: store.addFiles,
+		openFileDialog: dropzone.open,
+		start: store.start,
+		cancel: store.cancel,
+		retry: store.retry,
+		pause: store.pause,
+		resume: store.resume,
+		remove: store.remove,
+		clear: store.clear,
+		dismissRejection: store.dismissRejection
+	};
+}
+//#endregion
+//#region src/themes/index.ts
+const SHADOWS = {
+	none: "none",
+	soft: "0 1px 2px rgb(15 15 40 / 0.04), 0 8px 24px -8px rgb(15 15 40 / 0.12)",
+	elevated: "0 2px 4px rgb(15 15 40 / 0.04), 0 24px 48px -16px rgb(15 15 40 / 0.22)"
+};
+const length = (value) => typeof value === "number" ? `${value}px` : value;
+/** Converts appearance + motion settings to inline CSS custom properties. Unset values fall back to the stylesheet. */
+function appearanceToStyle(appearance = {}, motion) {
+	const vars = {
+		"--um-accent": appearance.accent,
+		"--um-accent-2": appearance.accentSecondary,
+		"--um-bg": appearance.background,
+		"--um-surface": appearance.surface,
+		"--um-text": appearance.text,
+		"--um-muted": appearance.mutedText,
+		"--um-border": appearance.border,
+		"--um-success": appearance.success,
+		"--um-danger": appearance.danger,
+		"--um-radius": length(appearance.radius),
+		"--um-font": appearance.fontFamily,
+		"--um-shadow": appearance.shadow ? SHADOWS[appearance.shadow] ?? appearance.shadow : void 0,
+		"--um-zone-h": length(appearance.zoneHeight),
+		"--um-time": motion.speed === 1 ? void 0 : (1 / motion.speed).toFixed(3),
+		"--um-intensity": motion.intensity === 1 ? void 0 : motion.intensity,
+		"--um-particles": motion.particles === 1 ? void 0 : motion.particles
+	};
+	const style = {};
+	for (const [key, value] of Object.entries(vars)) if (value !== void 0 && value !== "") style[key] = value;
+	return style;
+}
+function resolveMotion(motion = {}, prefersReduced) {
+	const mode = motion.reducedMotion ?? "user";
+	return {
+		reduced: mode === "always" || mode === "user" && prefersReduced,
+		speed: Math.min(4, Math.max(.25, motion.speed ?? 1)),
+		intensity: Math.min(1.5, Math.max(0, motion.intensity ?? 1)),
+		particles: Math.min(1, Math.max(0, motion.particles ?? 1))
+	};
+}
+const defaultLabels = {
+	dropTitle: "Drag & drop files here",
+	dropHint: "or browse files on your computer",
+	browse: "Browse files",
+	dropActive: "Release to upload",
+	dropReject: "Some of these files can’t be uploaded",
+	zoneLabel: "Upload files",
+	upload: "Upload",
+	uploadMore: "Add more files",
+	pause: "Pause",
+	resume: "Resume",
+	cancel: "Cancel",
+	cancelAll: "Cancel all uploads",
+	retry: "Retry",
+	retryFailed: "Retry failed uploads",
+	remove: "Remove",
+	clearCompleted: "Clear completed",
+	clearAll: "Clear all",
+	expand: "Show files",
+	collapse: "Hide files",
+	moreActions: "More actions",
+	dismiss: "Dismiss",
+	finishing: "Finishing…",
+	simulated: "Simulated",
+	simulatedHint: "Demo transport: progress is simulated and no data leaves your browser.",
+	noHandler: "Selected – no upload handler configured",
+	status: {
+		pending: "Ready to upload",
+		queued: "Waiting…",
+		uploading: "Uploading",
+		paused: "Paused",
+		success: "Uploaded",
+		error: "Failed",
+		canceled: "Canceled"
+	},
+	timeLeft: (duration) => `${duration} left`,
+	retryingIn: (seconds) => `Retrying in ${seconds}s…`,
+	summary: (t) => {
+		const files = (n) => `${n} ${n === 1 ? "file" : "files"}`;
+		if (t.count === 0) return "No files yet";
+		if (t.uploading + t.queued > 0) return `Uploading ${files(t.uploading + t.queued)}`;
+		if (t.paused > 0) return `${files(t.paused)} paused`;
+		if (t.error > 0) return `${t.error} ${t.error === 1 ? "upload" : "uploads"} failed`;
+		if (t.pending > 0) return `${files(t.pending)} ready`;
+		if (t.success > 0) return `${files(t.success)} uploaded`;
+		return files(t.count);
+	},
+	acceptHint: ({ types, maxSize, maxFiles }) => [
+		types || "Any file type",
+		maxSize && `up to ${maxSize}`,
+		maxFiles && `max ${maxFiles} ${maxFiles === 1 ? "file" : "files"}`
+	].filter(Boolean).join(" · ")
+};
+//#endregion
+//#region src/components/Announcer.tsx
+const ZERO_WIDTH = String.fromCharCode(8203);
+/**
+* Visually hidden live regions announcing lifecycle changes (not every
+* progress tick). Errors use an assertive region.
+*/
+function UploadAnnouncer() {
+	const { store, labels } = useUploaderContext();
+	const [polite, setPolite] = (0, react.useState)("");
+	const [assertive, setAssertive] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		let flip = false;
+		const say = (setter, message) => {
+			flip = !flip;
+			setter(flip ? message : message + ZERO_WIDTH);
+		};
+		const offs = [
+			store.on("added", (items) => say(setPolite, items.length === 1 ? `${items[0].name} added` : `${items.length} files added`)),
+			store.on("rejected", (rejections) => say(setAssertive, rejections.map((rejection) => rejection.errors[0]?.message).join(" "))),
+			store.on("start", (item) => say(setPolite, `${labels.status.uploading} ${item.name}`)),
+			store.on("success", (item) => say(setPolite, `${item.name} ${labels.status.success.toLowerCase()}`)),
+			store.on("error", (item) => say(setAssertive, `${item.name}: ${labels.status.error}. ${item.error?.message ?? ""}`)),
+			store.on("cancel", (item) => say(setPolite, `${item.name} ${labels.status.canceled.toLowerCase()}`)),
+			store.on("removed", (item) => say(setPolite, `${item.name} ${labels.remove.toLowerCase()}d`)),
+			store.on("complete", (items) => {
+				const ok = items.filter((item) => item.status === "success").length;
+				if (items.length > 1) say(setPolite, `${ok} of ${items.length} uploads complete`);
+			})
+		];
+		return () => offs.forEach((off) => off());
+	}, [store, labels]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "um-sr-only",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: polite
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "um-sr-only",
+		role: "alert",
+		"aria-live": "assertive",
+		"aria-atomic": "true",
+		children: assertive
+	})] });
+}
+//#endregion
+//#region src/components/Uploader.tsx
+/**
+* Root of the composable API. Owns the upload store, the hidden file input,
+* theme variables and the screen-reader announcer.
+*/
+function Uploader(props) {
+	const { appearance, motion, labels, className, style, id, children, ...options } = props;
+	const api = useUploader(options);
+	const prefersReduced = usePrefersReducedMotion();
+	const resolvedMotion = (0, react.useMemo)(() => resolveMotion(motion, prefersReduced), [
+		motion?.speed,
+		motion?.intensity,
+		motion?.particles,
+		motion?.reducedMotion,
+		prefersReduced
+	]);
+	const mergedLabels = (0, react.useMemo)(() => ({
+		...defaultLabels,
+		...labels,
+		status: {
+			...defaultLabels.status,
+			...labels?.status
+		}
+	}), [labels]);
+	const hintId = (0, react.useId)();
+	const maxFiles = options.multiple === false ? 1 : options.maxFiles ?? null;
+	const hint = mergedLabels.acceptHint({
+		types: require_core.describeAccept(api.accept),
+		maxSize: options.maxSize ? require_core.formatBytes(options.maxSize) : "",
+		maxFiles
+	});
+	const value = {
+		...api,
+		labels: mergedLabels,
+		motion: resolvedMotion,
+		hint,
+		hintId,
+		autoUpload: options.autoUpload !== false
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploaderContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id,
+			className: cx("um-root", className),
+			"data-um-theme": appearance?.theme ?? "light",
+			"data-um-motion": resolvedMotion.reduced ? "reduced" : "full",
+			"data-um-density": appearance?.density ?? "comfortable",
+			"data-um-transport": api.transport,
+			style: {
+				...appearanceToStyle(appearance, resolvedMotion),
+				...style
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...api.dropzone.getInputProps() }),
+				children,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadAnnouncer, {})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/FileUpload.tsx
+/**
+* Ready-made animated uploader.
+*
+* ```tsx
+* <FileUpload
+*   preset="wave-bar"
+*   upload={createXhrUploader({ url: '/api/upload' })}
+*   accept="image/*,.pdf"
+*   maxSize={20_000_000}
+* />
+* ```
+*/
+function FileUpload(props) {
+	const { preset: presetInput = "essential", renderFile, zoneContent, classNames, progressVariant, layout, fileAnimations, showRejections, title, description, className, ...uploaderProps } = props;
+	const preset = typeof presetInput === "string" ? getPreset(presetInput) : presetInput;
+	if (!preset) throw new Error(`upload-motion: unknown preset "${String(presetInput)}".`);
+	const { Component, defaults } = preset;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Uploader, {
+		...uploaderProps,
+		autoUpload: uploaderProps.autoUpload ?? defaults?.autoUpload ?? true,
+		className: cx(`um-preset-${preset.id}`, className, classNames?.root),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			renderFile,
+			zoneContent,
+			classNames,
+			progressVariant: progressVariant ?? defaults?.progressVariant,
+			layout: layout ?? defaults?.layout,
+			fileAnimations,
+			showRejections,
+			title,
+			description
+		})
+	});
+}
+//#endregion
+exports.ActionMenu = ActionMenu;
+exports.AnimatedCheck = AnimatedCheck;
+exports.AnimatedList = AnimatedList;
+exports.AudioPreviewButton = AudioPreviewButton;
+exports.BloomVisual = BloomVisual;
+exports.BrowseButton = BrowseButton;
+exports.Burst = Burst;
+exports.DropzoneContent = DropzoneContent;
+exports.FileCard = FileCard;
+exports.FileIcon = FileIcon;
+exports.FilePreview = FilePreview;
+exports.FileUpload = FileUpload;
+exports.FilmstripVisual = FilmstripVisual;
+exports.IconButton = IconButton;
+exports.ItemActions = ItemActions;
+exports.ItemStatus = ItemStatus;
+exports.PRESET_INFO = require_core.PRESET_INFO;
+exports.PageVisual = PageVisual;
+exports.PixelVisual = PixelVisual;
+exports.StartUploadButton = StartUploadButton;
+exports.TransportBadge = TransportBadge;
+exports.UploadAnnouncer = UploadAnnouncer;
+exports.UploadDropzone = UploadDropzone;
+exports.UploadError = require_core.UploadError;
+exports.UploadFileList = UploadFileList;
+exports.UploadHint = UploadHint;
+exports.UploadProgress = UploadProgress;
+exports.UploadRejections = UploadRejections;
+exports.UploadSummary = UploadSummary;
+exports.Uploader = Uploader;
+exports.VisualRow = VisualRow;
+exports.VisualTile = VisualTile;
+exports.WaveformVisual = WaveformVisual;
+exports.adaptivePreset = adaptivePreset;
+exports.appearanceToStyle = appearanceToStyle;
+exports.beamPreset = beamPreset;
+exports.bloomPreset = bloomPreset;
+exports.cardFanPreset = cardFanPreset;
+exports.clamp01 = require_core.clamp01;
+exports.computeTotals = require_core.computeTotals;
+exports.createSimulatedUploader = require_core.createSimulatedUploader;
+exports.createUploadStore = require_core.createUploadStore;
+exports.createXhrUploader = require_core.createXhrUploader;
+exports.defaultLabels = defaultLabels;
+exports.describeAccept = require_core.describeAccept;
+exports.describeItemStatus = describeItemStatus;
+exports.essentialPreset = essentialPreset;
+exports.filmstripPreset = filmstripPreset;
+exports.formatBytes = require_core.formatBytes;
+exports.formatDuration = require_core.formatDuration;
+exports.formatPercent = require_core.formatPercent;
+exports.formatSpeed = require_core.formatSpeed;
+exports.getExtension = require_core.getExtension;
+exports.getFileKind = require_core.getFileKind;
+exports.getFileLabel = require_core.getFileLabel;
+exports.getPreset = getPreset;
+exports.hoopShotPreset = hoopShotPreset;
+exports.httpErrorMessage = require_core.httpErrorMessage;
+exports.isFileAccepted = require_core.isFileAccepted;
+exports.isPreviewableImage = require_core.isPreviewableImage;
+exports.isUploadError = require_core.isUploadError;
+exports.liquidPreset = liquidPreset;
+exports.magneticPreset = magneticPreset;
+exports.orbitPreset = orbitPreset;
+exports.pageRevealPreset = pageRevealPreset;
+exports.parseAccept = require_core.parseAccept;
+exports.pixelPreset = pixelPreset;
+exports.portalPreset = portalPreset;
+exports.presetCatalog = require_core.presetCatalog;
+exports.presets = presets;
+exports.resolveMotion = resolveMotion;
+exports.segmentRingPreset = segmentRingPreset;
+exports.stackPreset = stackPreset;
+exports.toUploadError = require_core.toUploadError;
+exports.useAudioPeaks = useAudioPeaks;
+exports.useDropzone = useDropzone;
+exports.useFilePreview = useFilePreview;
+exports.useFlip = useFlip;
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+exports.usePresence = usePresence;
+exports.useSummaryText = useSummaryText;
+exports.useTextSnippet = useTextSnippet;
+exports.useUploadSnapshot = useUploadSnapshot;
+exports.useUploader = useUploader;
+exports.useUploaderContext = useUploaderContext;
+exports.useVideoFrames = useVideoFrames;
+exports.validateFile = require_core.validateFile;
+exports.waveBarPreset = waveBarPreset;
+exports.wavePath = wavePath;
+exports.waveformPreset = waveformPreset;