@emdash-cms/admin 0.34.0 → 0.35.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { a as fetchPlugins, c as updatePluginSettings, d as fetchAuthMode, f as fetchManifest, i as fetchPluginSettings, l as API_BASE, m as throwResponseError, n as enablePlugin, p as parseApiResponse, r as fetchPlugin, s as setPluginMcpEnabled, t as disablePlugin, u as apiFetch } from "./plugins-CQAV8Ap0.js";
-import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, s as getLocaleDir, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-B56zZskH.js";
+import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, s as getLocaleDir, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-CnKC3o_O.js";
 import "./locales/index.js";
 import { slugify } from "./slugify.js";
 import { Autocomplete, Badge, Banner, Button, Checkbox, ClipboardText, Collapsible, Combobox, CommandPalette, Dialog, DropdownMenu, Field, Input, InputArea, Label, LayerCard, LinkButton, LinkProvider, Loader, Popover, Select, Sidebar, Sidebar as KumoSidebar, SkeletonLine, Switch, Tabs, Text, Toast, Toasty, Tooltip, TooltipProvider, buttonVariants, inputVariants, useKumoToastManager, useSidebar, useSidebar as useSidebar$1 } from "@cloudflare/kumo";
@@ -11,7 +11,7 @@ import * as React$1 from "react";
 import React, { createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@cloudflare/kumo/primitives";
-import { Archive, ArrowCounterClockwise, ArrowDown, ArrowRightIcon, ArrowSquareOut, ArrowUUpLeft, ArrowUUpRight, ArrowUp, ArrowsClockwise, ArrowsInSimple, ArrowsLeftRight, ArrowsOutSimple, Bell, BookOpen, BracketsAngle, BracketsCurly, Browser, Calendar, CalendarBlank, CalendarDots, CardsThree, CaretDown, CaretRightIcon, CaretUp, CaretUpDown, ChartBar, ChartLine, Chats, Check, CheckCircle, CircleDashed, CircleNotch, ClockCounterClockwise, Cloud, Code, CodeBlock, Columns, ColumnsPlusLeft, ColumnsPlusRight, Copy, Crop, Cube, Database, DeviceMobile, DotsSixVertical, Download, DownloadSimple, Envelope, EnvelopeSimple, Eye, EyeSlash, Faders, File, FileArrowDown, FileText, Files, FloppyDisk, Folder, FolderOpen, Folders, Gear, GithubLogo, Globe, GlobeSimple, GridFour, HardDrive, Hash, IdentificationCard, Image as Image$1, ImageBroken, ImageSquare, Images, ImagesSquare, Info, Key, Link as Link$2, LinkBreak, LinkSimple, List, ListBullets, ListChecks, ListNumbers, LockKey, MagnifyingGlass, Medal, Minus, Monitor, Moon, Newspaper, Palette, PaperPlaneTilt, Paperclip, Paragraph, Path, Pencil, PencilSimple, Plug, PlugsConnected, Plus, Prohibit, PuzzlePiece, Quotes, Robot, Rows, RowsPlusBottom, RowsPlusTop, Ruler, ShareNetwork, Shield, ShieldCheck, ShieldWarning, SignOut, Signature, SlidersHorizontal, Sparkle, SquaresFour, Stack, Star, Storefront, Sun, Table, Tag, TextAlignCenter, TextAlignLeft, TextAlignRight, TextB, TextH, TextHFive, TextHFour, TextHOne, TextHSix, TextHThree, TextHTwo, TextItalic, TextStrikethrough, TextSubscript, TextSuperscript, TextT, TextUnderline, ToggleLeft, Trash, Trophy, Upload, User, UserCircle, UserCircleIcon, UserPlus, Users, Warning, WarningCircle, WebhooksLogo, X, YoutubeLogo } from "@phosphor-icons/react";
+import { Archive, ArrowClockwise, ArrowCounterClockwise, ArrowDown, ArrowRightIcon, ArrowSquareOut, ArrowUUpLeft, ArrowUUpRight, ArrowUp, ArrowsClockwise, ArrowsInSimple, ArrowsLeftRight, ArrowsOutSimple, Bell, BookOpen, BracketsAngle, BracketsCurly, Browser, Calendar, CalendarBlank, CalendarDots, CardsThree, CaretDown, CaretRightIcon, CaretUp, CaretUpDown, ChartBar, ChartLine, Chats, Check, CheckCircle, CircleDashed, CircleNotch, ClockCounterClockwise, Cloud, Code, CodeBlock, Columns, ColumnsPlusLeft, ColumnsPlusRight, Copy, Crop, Cube, Database, DeviceMobile, DotsSixVertical, Download, DownloadSimple, Envelope, EnvelopeSimple, Eye, EyeSlash, Faders, File, FileArrowDown, FileAudio, FileImage, FilePdf, FileText, FileVideo, Files, FloppyDisk, Folder, FolderOpen, Folders, Gear, GithubLogo, Globe, GlobeSimple, GridFour, HardDrive, Hash, IdentificationCard, Image as Image$1, ImageBroken, ImageSquare, Images, ImagesSquare, Info, Key, Link as Link$2, LinkBreak, LinkSimple, List, ListBullets, ListChecks, ListNumbers, LockKey, MagnifyingGlass, Medal, Minus, Monitor, Moon, Newspaper, Palette, PaperPlaneTilt, Paperclip, Paragraph, Path, Pencil, PencilSimple, Plug, PlugsConnected, Plus, Prohibit, PuzzlePiece, Quotes, Robot, Rows, RowsPlusBottom, RowsPlusTop, Ruler, ShareNetwork, Shield, ShieldCheck, ShieldWarning, SignOut, Signature, SlidersHorizontal, Sparkle, SquaresFour, Stack, Star, Storefront, Sun, Table, Tag, TextAlignCenter, TextAlignLeft, TextAlignRight, TextB, TextH, TextHFive, TextHFour, TextHOne, TextHSix, TextHThree, TextHTwo, TextItalic, TextStrikethrough, TextSubscript, TextSuperscript, TextT, TextUnderline, ToggleLeft, Trash, Trophy, Upload, UploadSimple, User, UserCircle, UserCircleIcon, UserPlus, Users, Warning, WarningCircle, WebhooksLogo, X, YoutubeLogo } from "@phosphor-icons/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, rectIntersection, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -511,20 +511,25 @@ async function fetchMediaList(options) {
 * Used to resolve an id-only reference (e.g. a byline's `avatarMediaId`)
 * back into a full media item for display.
 */
-async function fetchMediaItem(id) {
-	return (await parseApiResponse(await apiFetch(`${API_BASE}/media/${id}`), i18n._({
+async function fetchMediaItem(id, options) {
+	return (await parseApiResponse(await apiFetch(`${API_BASE}/media/${id}`, { signal: options?.signal }), i18n._({
 		id: "8rtatN",
 		message: "Failed to fetch media item"
 	}))).item;
 }
 const MAX_CLIENT_HASH_BYTES = 8 * 1024 * 1024;
-async function computeContentHash(file) {
+async function computeContentHash(file, signal) {
+	signal?.throwIfAborted();
 	const subtle = globalThis.crypto?.subtle;
 	if (!subtle || file.size === 0 || file.size > MAX_CLIENT_HASH_BYTES) return void 0;
 	try {
-		const hash = await subtle.digest("SHA-1", await file.arrayBuffer());
+		const bytes = await file.arrayBuffer();
+		signal?.throwIfAborted();
+		const hash = await subtle.digest("SHA-1", bytes);
+		signal?.throwIfAborted();
 		return `sha1:${Array.from(new Uint8Array(hash), (byte) => byte.toString(16).padStart(2, "0")).join("")}`;
 	} catch {
+		signal?.throwIfAborted();
 		return;
 	}
 }
@@ -534,10 +539,11 @@ async function computeContentHash(file) {
 */
 async function getUploadUrl(file, opts) {
 	try {
-		const contentHash = await computeContentHash(file);
+		const contentHash = await computeContentHash(file, opts?.signal);
 		const response = await apiFetch(`${API_BASE}/media/upload-url`, {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
+			signal: opts?.signal,
 			body: JSON.stringify({
 				filename: file.name,
 				contentType: file.type,
@@ -552,6 +558,7 @@ async function getUploadUrl(file, opts) {
 			message: "Failed to get upload URL"
 		}));
 	} catch (error) {
+		opts?.signal?.throwIfAborted();
 		if (error instanceof TypeError && error.message.includes("fetch")) return null;
 		throw error;
 	}
@@ -559,11 +566,12 @@ async function getUploadUrl(file, opts) {
 /**
 * Confirm upload after uploading to signed URL
 */
-async function confirmUpload(mediaId, metadata) {
+async function confirmUpload(mediaId, metadata, options) {
 	return (await parseApiResponse(await apiFetch(`${API_BASE}/media/${mediaId}/confirm`, {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify(metadata || {})
+		body: JSON.stringify(metadata || {}),
+		signal: options?.signal
 	}), i18n._({
 		id: "QZDXMs",
 		message: "Failed to confirm upload"
@@ -572,14 +580,15 @@ async function confirmUpload(mediaId, metadata) {
 /**
 * Upload directly to signed URL
 */
-async function uploadToSignedUrl(file, uploadInfo) {
+async function uploadToSignedUrl(file, uploadInfo, options) {
 	const response = await fetch(uploadInfo.uploadUrl, {
 		method: uploadInfo.method,
 		headers: {
 			...uploadInfo.headers,
 			"Content-Type": file.type
 		},
-		body: file
+		body: file,
+		signal: options?.signal
 	});
 	if (!response.ok) await throwResponseError(response, i18n._({
 		id: "4Gz2wC",
@@ -589,29 +598,47 @@ async function uploadToSignedUrl(file, uploadInfo) {
 /**
 * Get image dimensions from a file
 */
-async function getImageDimensions(file) {
+async function getImageDimensions(file, options) {
+	options?.signal?.throwIfAborted();
 	if (!file.type.startsWith("image/")) return null;
-	return new Promise((resolve) => {
+	return new Promise((resolve, reject) => {
 		const img = new Image();
+		const objectUrl = URL.createObjectURL(file);
+		const cleanup = () => {
+			img.onload = null;
+			img.onerror = null;
+			options?.signal?.removeEventListener("abort", handleAbort);
+			URL.revokeObjectURL(objectUrl);
+		};
+		const handleAbort = () => {
+			cleanup();
+			reject(options?.signal?.reason);
+		};
 		img.onload = () => {
-			resolve({
+			const dimensions = {
 				width: img.naturalWidth,
 				height: img.naturalHeight
-			});
-			URL.revokeObjectURL(img.src);
+			};
+			cleanup();
+			resolve(dimensions);
 		};
 		img.onerror = () => {
+			cleanup();
 			resolve(null);
-			URL.revokeObjectURL(img.src);
 		};
-		img.src = URL.createObjectURL(file);
+		options?.signal?.addEventListener("abort", handleAbort, { once: true });
+		if (options?.signal?.aborted) {
+			handleAbort();
+			return;
+		}
+		img.src = objectUrl;
 	});
 }
 /**
 * Upload media file via direct upload (legacy/local storage)
 */
 async function uploadMediaDirect(file, opts) {
-	const dimensions = await getImageDimensions(file);
+	const dimensions = await getImageDimensions(file, opts);
 	const formData = new FormData();
 	formData.append("file", file);
 	if (dimensions?.width) formData.append("width", String(dimensions.width));
@@ -619,7 +646,8 @@ async function uploadMediaDirect(file, opts) {
 	if (opts?.fieldId) formData.append("fieldId", opts.fieldId);
 	return (await parseApiResponse(await apiFetch(`${API_BASE}/media`, {
 		method: "POST",
-		body: formData
+		body: formData,
+		signal: opts?.signal
 	}), i18n._({
 		id: "5IFNMM",
 		message: "Failed to upload media"
@@ -632,16 +660,17 @@ async function uploadMediaDirect(file, opts) {
 * (for local storage) if signed URLs are not supported.
 */
 async function uploadMedia(file, opts) {
+	opts?.signal?.throwIfAborted();
 	const uploadInfo = await getUploadUrl(file, opts);
 	if (!uploadInfo) return uploadMediaDirect(file, opts);
-	if ("existing" in uploadInfo) return fetchMediaItem(uploadInfo.mediaId);
-	await uploadToSignedUrl(file, uploadInfo);
-	const dimensions = await getImageDimensions(file);
+	if ("existing" in uploadInfo) return fetchMediaItem(uploadInfo.mediaId, opts);
+	await uploadToSignedUrl(file, uploadInfo, opts);
+	const dimensions = await getImageDimensions(file, opts);
 	return confirmUpload(uploadInfo.mediaId, {
 		size: file.size,
 		width: dimensions?.width,
 		height: dimensions?.height
-	});
+	}, opts);
 }
 /**
 * Delete media
@@ -695,13 +724,15 @@ async function fetchProviderMedia(providerId, options) {
 /**
 * Upload media to a specific provider
 */
-async function uploadToProvider(providerId, file, alt) {
+async function uploadToProvider(providerId, file, alt, options) {
+	options?.signal?.throwIfAborted();
 	const formData = new FormData();
 	formData.append("file", file);
 	if (alt) formData.append("alt", alt);
 	return (await parseApiResponse(await apiFetch(`${API_BASE}/media/providers/${providerId}`, {
 		method: "POST",
-		body: formData
+		body: formData,
+		signal: options?.signal
 	}), i18n._({
 		id: "j66jlb",
 		message: "Failed to upload to provider"
@@ -26714,6 +26745,514 @@ function formatDate$1(isoString) {
 	});
 }
 
+//#endregion
+//#region src/components/MediaUploadDialog.tsx
+const LOCAL_MEDIA_UPLOAD_ACCEPT = "image/png,image/jpeg,image/gif,image/webp,video/*,audio/*,application/pdf";
+const DEFAULT_CONCURRENCY = 3;
+const MAX_CONCURRENCY = 6;
+const MAX_VISIBLE_ROWS = 100;
+const MAX_PREVIEW_BYTES = 8 * 1024 * 1024;
+const PREVIEW_MIME_TYPES = new Set([
+	"image/jpeg",
+	"image/png",
+	"image/gif",
+	"image/webp"
+]);
+function previewUrlFor(file) {
+	if (file.size > MAX_PREVIEW_BYTES || !PREVIEW_MIME_TYPES.has(file.type)) return void 0;
+	try {
+		return URL.createObjectURL(file);
+	} catch {
+		return;
+	}
+}
+function FileKindIcon({ file }) {
+	const className = "h-5 w-5";
+	if (file.type.startsWith("image/")) return /* @__PURE__ */ jsx(FileImage, {
+		className,
+		"aria-hidden": "true"
+	});
+	if (file.type.startsWith("video/")) return /* @__PURE__ */ jsx(FileVideo, {
+		className,
+		"aria-hidden": "true"
+	});
+	if (file.type.startsWith("audio/")) return /* @__PURE__ */ jsx(FileAudio, {
+		className,
+		"aria-hidden": "true"
+	});
+	if (file.type === "application/pdf") return /* @__PURE__ */ jsx(FilePdf, {
+		className,
+		"aria-hidden": "true"
+	});
+	if (file.type.startsWith("text/") || file.type.includes("document")) return /* @__PURE__ */ jsx(FileText, {
+		className,
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ jsx(File, {
+		className,
+		"aria-hidden": "true"
+	});
+}
+function UploadStatusLabel({ status }) {
+	const { _: _t } = useLingui();
+	if (status === "uploading") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader, { size: "sm" }), _t({
+		id: "/eguJc",
+		message: "Uploading"
+	})] });
+	if (status === "complete") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckCircle, {
+		className: "h-4 w-4 text-kumo-success",
+		weight: "fill",
+		"aria-hidden": "true"
+	}), _t({
+		id: "bD8I7O",
+		message: "Complete"
+	})] });
+	if (status === "failed") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WarningCircle, {
+		className: "h-4 w-4 text-kumo-danger",
+		weight: "fill",
+		"aria-hidden": "true"
+	}), _t({
+		id: "b3Thhd",
+		message: "Upload failed"
+	})] });
+	return /* @__PURE__ */ jsx(Fragment, { children: _t({
+		id: "8wu9lr",
+		message: "Queued"
+	}) });
+}
+function UploadFileRow({ row, onCancel, onRetry, onRemove }) {
+	const { _: _t2 } = useLingui();
+	const isBusy = row.status === "queued" || row.status === "uploading";
+	return /* @__PURE__ */ jsxs("li", {
+		className: "grid grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-3 rounded-lg bg-kumo-base px-3 py-2.5 ring ring-kumo-line",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-kumo-tint text-kumo-subtle",
+				children: row.previewUrl ? /* @__PURE__ */ jsx("img", {
+					src: row.previewUrl,
+					alt: "",
+					loading: "lazy",
+					className: "h-full w-full object-cover"
+				}) : /* @__PURE__ */ jsx(FileKindIcon, { file: row.file })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "line-clamp-2 text-sm font-medium leading-5",
+					title: row.file.name,
+					children: row.file.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm text-kumo-subtle",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "inline-flex items-center gap-1.5",
+							children: /* @__PURE__ */ jsx(UploadStatusLabel, { status: row.status })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: "·"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: formatFileSize(row.file.size)
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [row.status === "failed" && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					shape: "square",
+					size: "sm",
+					onClick: onRetry,
+					"aria-label": _t2({
+						id: "XUH9K1",
+						message: "Retry {0}",
+						values: { 0: row.file.name }
+					}),
+					icon: /* @__PURE__ */ jsx(ArrowClockwise, { "aria-hidden": "true" })
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					shape: "square",
+					size: "sm",
+					onClick: isBusy ? onCancel : onRemove,
+					"aria-label": isBusy ? _t2({
+						id: "x9WS62",
+						message: "Cancel {0}",
+						values: { 0: row.file.name }
+					}) : row.status === "complete" ? _t2({
+						id: "UsbCOm",
+						message: "Dismiss completed {0}",
+						values: { 0: row.file.name }
+					}) : _t2({
+						id: "w61W3L",
+						message: "Remove {0}",
+						values: { 0: row.file.name }
+					}),
+					icon: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+				})]
+			})
+		]
+	});
+}
+function MediaUploadDialog({ open, providerName, accept, enqueueRequest, onEnqueueRequestConsumed, onOpenChange, onCloseComplete, onQueueIdle, upload, concurrency = DEFAULT_CONCURRENCY }) {
+	const { _: _t3 } = useLingui();
+	const [rows, setRows] = React$1.useState([]);
+	const [overflowCount, setOverflowCount] = React$1.useState(0);
+	const rowsRef = React$1.useRef([]);
+	const activeRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const nextIdRef = React$1.useRef(0);
+	const lastRequestIdRef = React$1.useRef(null);
+	const busyRunRef = React$1.useRef(false);
+	const unmountingRef = React$1.useRef(false);
+	const inputRef = React$1.useRef(null);
+	const requestedConcurrency = Number.isFinite(concurrency) ? Math.floor(concurrency) : DEFAULT_CONCURRENCY;
+	const maxConcurrent = Math.min(MAX_CONCURRENCY, Math.max(1, requestedConcurrency));
+	const updateRows = React$1.useCallback((update) => {
+		const next = update(rowsRef.current);
+		rowsRef.current = next;
+		setRows(next);
+	}, []);
+	const addFiles = React$1.useCallback((files) => {
+		const available = Math.max(0, MAX_VISIBLE_ROWS - rowsRef.current.length);
+		const accepted = files.slice(0, available);
+		setOverflowCount(Math.max(0, files.length - accepted.length));
+		if (accepted.length === 0) return;
+		busyRunRef.current = true;
+		const added = accepted.map((file) => ({
+			id: nextIdRef.current += 1,
+			file,
+			status: "queued",
+			attempt: 1,
+			previewUrl: previewUrlFor(file)
+		}));
+		updateRows((current) => [...current, ...added]);
+	}, [updateRows]);
+	React$1.useEffect(() => {
+		if (!open || !enqueueRequest || enqueueRequest.id === lastRequestIdRef.current) return;
+		lastRequestIdRef.current = enqueueRequest.id;
+		addFiles(enqueueRequest.files);
+		onEnqueueRequestConsumed(enqueueRequest.id);
+	}, [
+		addFiles,
+		enqueueRequest,
+		onEnqueueRequestConsumed,
+		open
+	]);
+	React$1.useEffect(() => {
+		const slots = maxConcurrent - activeRef.current.size;
+		if (slots <= 0) return;
+		const candidates = rowsRef.current.filter((row) => row.status === "queued" && !activeRef.current.has(row.id)).slice(0, slots);
+		if (candidates.length === 0) return;
+		for (const row of candidates) {
+			const controller = new AbortController();
+			activeRef.current.set(row.id, {
+				attempt: row.attempt,
+				controller
+			});
+			updateRows((current) => current.map((item) => item.id === row.id && item.attempt === row.attempt ? {
+				...item,
+				status: "uploading"
+			} : item));
+			Promise.resolve().then(() => upload(row.file, { signal: controller.signal })).then(() => {
+				if (activeRef.current.get(row.id)?.attempt !== row.attempt) return void 0;
+				activeRef.current.delete(row.id);
+				updateRows((current) => current.map((item) => item.id === row.id && item.attempt === row.attempt ? {
+					...item,
+					status: "complete"
+				} : item));
+			}, () => {
+				if (activeRef.current.get(row.id)?.attempt !== row.attempt) return void 0;
+				activeRef.current.delete(row.id);
+				if (controller.signal.aborted) return void 0;
+				updateRows((current) => current.map((item) => item.id === row.id && item.attempt === row.attempt ? {
+					...item,
+					status: "failed"
+				} : item));
+			});
+		}
+	}, [
+		maxConcurrent,
+		rows,
+		updateRows,
+		upload
+	]);
+	const hasUnfinished = rows.some((row) => row.status === "queued" || row.status === "uploading");
+	React$1.useEffect(() => {
+		if (hasUnfinished || !busyRunRef.current || unmountingRef.current) return;
+		busyRunRef.current = false;
+		onQueueIdle?.();
+	}, [hasUnfinished, onQueueIdle]);
+	React$1.useEffect(() => () => {
+		unmountingRef.current = true;
+		activeRef.current.forEach(({ controller }) => controller.abort());
+		activeRef.current.clear();
+		rowsRef.current.forEach((row) => row.previewUrl && URL.revokeObjectURL(row.previewUrl));
+	}, []);
+	const removeRow = React$1.useCallback((id) => {
+		const row = rowsRef.current.find((item) => item.id === id);
+		if (!row) return;
+		activeRef.current.get(id)?.controller.abort();
+		activeRef.current.delete(id);
+		if (row.previewUrl) URL.revokeObjectURL(row.previewUrl);
+		updateRows((current) => current.filter((item) => item.id !== id));
+	}, [updateRows]);
+	const retryRow = React$1.useCallback((id) => {
+		busyRunRef.current = true;
+		updateRows((current) => current.map((row) => row.id === id && row.status === "failed" ? {
+			...row,
+			status: "queued",
+			attempt: row.attempt + 1
+		} : row));
+	}, [updateRows]);
+	const retryFailed = () => {
+		if (!rowsRef.current.some((row) => row.status === "failed")) return;
+		busyRunRef.current = true;
+		updateRows((current) => current.map((row) => row.status === "failed" ? {
+			...row,
+			status: "queued",
+			attempt: row.attempt + 1
+		} : row));
+	};
+	const cancelRemaining = () => {
+		activeRef.current.forEach(({ controller }) => controller.abort());
+		activeRef.current.clear();
+		rowsRef.current.filter((row) => row.status === "queued" || row.status === "uploading").forEach((row) => row.previewUrl && URL.revokeObjectURL(row.previewUrl));
+		updateRows((current) => current.filter((row) => row.status !== "queued" && row.status !== "uploading"));
+	};
+	const clearCompleted = () => {
+		rowsRef.current.filter((row) => row.status === "complete").forEach((row) => row.previewUrl && URL.revokeObjectURL(row.previewUrl));
+		updateRows((current) => current.filter((row) => row.status !== "complete"));
+	};
+	const reset = () => {
+		activeRef.current.forEach(({ controller }) => controller.abort());
+		activeRef.current.clear();
+		rowsRef.current.forEach((row) => row.previewUrl && URL.revokeObjectURL(row.previewUrl));
+		rowsRef.current = [];
+		setRows([]);
+		setOverflowCount(0);
+		busyRunRef.current = false;
+	};
+	const completedCount = rows.filter((row) => row.status === "complete").length;
+	const failedCount = rows.filter((row) => row.status === "failed").length;
+	const liveMessage = hasUnfinished ? _t3({
+		id: "9XrV3P",
+		message: "{completedCount} of {0} uploads complete",
+		values: {
+			0: rows.length,
+			completedCount
+		}
+	}) : failedCount > 0 ? i18n._({
+		id: "65Ew2q",
+		message: "{failedCount, plural, one {# upload failed} other {# uploads failed}}",
+		values: { failedCount }
+	}) : rows.length > 0 ? _t3({
+		id: "h0W4PA",
+		message: "All uploads finished"
+	}) : "";
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: (nextOpen) => {
+			if (!nextOpen && hasUnfinished) return;
+			onOpenChange(nextOpen);
+		},
+		onOpenChangeComplete: (nextOpen) => {
+			if (nextOpen) return;
+			reset();
+			onCloseComplete();
+		},
+		disablePointerDismissal: hasUnfinished,
+		children: /* @__PURE__ */ jsxs(Dialog, {
+			size: "lg",
+			className: "flex max-h-[min(88dvh,46rem)] flex-col overflow-hidden p-0",
+			style: { width: "min(94vw, 42rem)" },
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line px-6 py-5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx(Dialog.Title, {
+							className: "text-lg font-semibold leading-tight",
+							children: _t3({
+								id: "NKvTB9",
+								message: "Upload to {providerName}",
+								values: { providerName }
+							})
+						}), /* @__PURE__ */ jsx(Dialog.Description, {
+							className: "mt-1 text-sm leading-5 text-kumo-subtle",
+							children: _t3({
+								id: "FAQCNs",
+								message: "Files upload as soon as you add them."
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						shape: "square",
+						size: "sm",
+						disabled: hasUnfinished,
+						onClick: () => onOpenChange(false),
+						"aria-label": _t3({
+							id: "yz7wBu",
+							message: "Close"
+						}),
+						icon: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 py-5",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-64 flex-col items-center justify-center gap-4 rounded-xl border-[3px] border-dashed border-kumo-subtle/60 bg-kumo-base px-6 py-10 text-center sm:min-h-72",
+							onDragOver: (event) => event.preventDefault(),
+							onDrop: (event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								addFiles([...event.dataTransfer.files]);
+							},
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "flex size-14 items-center justify-center rounded-full text-kumo-subtle ring ring-kumo-line",
+									children: /* @__PURE__ */ jsx(UploadSimple, {
+										className: "h-7 w-7",
+										weight: "regular",
+										"aria-hidden": "true"
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "space-y-1",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-lg font-semibold leading-6",
+										children: _t3({
+											id: "+ywUTE",
+											message: "Drag and drop files here"
+										})
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-sm leading-5 text-kumo-subtle",
+										children: _t3({
+											id: "DbFk6j",
+											message: "Or browse files from your computer"
+										})
+									})]
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "base",
+									className: "text-sm",
+									onClick: () => inputRef.current?.click(),
+									icon: /* @__PURE__ */ jsx(UploadSimple, { "aria-hidden": "true" }),
+									children: _t3({
+										id: "JYj5R2",
+										message: "Browse files"
+									})
+								}),
+								/* @__PURE__ */ jsx("input", {
+									ref: inputRef,
+									type: "file",
+									multiple: true,
+									accept,
+									className: "sr-only",
+									tabIndex: -1,
+									"aria-label": _t3({
+										id: "0Io5gK",
+										message: "Browse files to upload"
+									}),
+									onChange: (event) => {
+										addFiles([...event.currentTarget.files ?? []]);
+										event.currentTarget.value = "";
+									}
+								})
+							]
+						}),
+						overflowCount > 0 && /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							className: "text-sm text-kumo-danger",
+							children: i18n._({
+								id: "VINwRP",
+								message: "{overflowCount, plural, one {# file was not added because the upload list is full.} other {# files were not added because the upload list is full.}}",
+								values: { overflowCount }
+							})
+						}),
+						rows.length > 0 && /* @__PURE__ */ jsx("ul", {
+							className: "space-y-2",
+							children: rows.map((row) => /* @__PURE__ */ jsx(UploadFileRow, {
+								row,
+								onCancel: () => removeRow(row.id),
+								onRetry: () => retryRow(row.id),
+								onRemove: () => removeRow(row.id)
+							}, row.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-kumo-line px-6 py-4",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-kumo-subtle tabular-nums",
+						"aria-hidden": "true",
+						children: rows.length > 0 ? _t3({
+							id: "0zZ04n",
+							message: "{completedCount} of {0} complete",
+							values: {
+								0: rows.length,
+								completedCount
+							}
+						}) : _t3({
+							id: "UGK1Dr",
+							message: "No files added"
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center justify-end gap-2",
+						children: [
+							completedCount > 0 && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								onClick: clearCompleted,
+								children: _t3({
+									id: "3Cz86c",
+									message: "Clear completed"
+								})
+							}),
+							failedCount > 0 && /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: retryFailed,
+								icon: /* @__PURE__ */ jsx(ArrowClockwise, { "aria-hidden": "true" }),
+								children: _t3({
+									id: "H+XODI",
+									message: "Retry failed"
+								})
+							}),
+							hasUnfinished ? /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: cancelRemaining,
+								children: _t3({
+									id: "GLYB+o",
+									message: "Cancel remaining"
+								})
+							}) : /* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								size: "sm",
+								onClick: () => onOpenChange(false),
+								children: _t3({
+									id: "DPfwMq",
+									message: "Done"
+								})
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					role: "status",
+					"aria-live": "polite",
+					children: liveMessage
+				})
+			]
+		})
+	});
+}
+
 //#endregion
 //#region src/components/MediaLibrary.tsx
 /** Maps a coarse type-filter choice to the media list's `mimeType` filter. */
@@ -26747,8 +27286,13 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 		activeProvider,
 		onLocalSearchChange
 	]);
-	const [uploadState, setUploadState] = React$1.useState({ status: "idle" });
-	const fileInputRef = React$1.useRef(null);
+	const [uploadDialogOpen, setUploadDialogOpen] = React$1.useState(false);
+	const [enqueueRequest, setEnqueueRequest] = React$1.useState(null);
+	const [uploadTarget, setUploadTarget] = React$1.useState(null);
+	const [isFileDragActive, setIsFileDragActive] = React$1.useState(false);
+	const enqueueIdRef = React$1.useRef(0);
+	const dragDepthRef = React$1.useRef(0);
+	const returnFocusRef = React$1.useRef(null);
 	const [loadedDimensions, setLoadedDimensions] = React$1.useState({});
 	const { data: providers } = useQuery({
 		queryKey: ["media-providers"],
@@ -26787,6 +27331,8 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 		providers,
 		_t
 	]);
+	const canUpload = activeProviderInfo?.capabilities.upload ?? false;
+	const canSearch = activeProviderInfo?.capabilities.search ?? false;
 	const cancelPendingDetailOpen = React$1.useCallback(() => {
 		if (detailOpenFrameRef.current === null) return;
 		window.cancelAnimationFrame(detailOpenFrameRef.current);
@@ -26809,130 +27355,76 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 	const handleDetailClosed = React$1.useCallback(() => {
 		setDetailItem(null);
 	}, []);
+	const enqueueFiles = React$1.useCallback((files, returnFocus) => {
+		if (!canUpload || !activeProviderInfo || files.length === 0) return;
+		if (returnFocus) returnFocusRef.current = returnFocus;
+		setUploadTarget({
+			id: activeProviderInfo.id,
+			name: activeProviderInfo.name
+		});
+		setEnqueueRequest({
+			id: enqueueIdRef.current += 1,
+			files
+		});
+		setUploadDialogOpen(true);
+	}, [activeProviderInfo, canUpload]);
+	const openUploadDialog = (event) => {
+		if (!canUpload || !activeProviderInfo) return;
+		returnFocusRef.current = event.currentTarget;
+		setUploadTarget({
+			id: activeProviderInfo.id,
+			name: activeProviderInfo.name
+		});
+		setEnqueueRequest(null);
+		setUploadDialogOpen(true);
+	};
 	React$1.useEffect(() => {
-		if (uploadState.status === "success" || uploadState.status === "error") {
-			const timer = setTimeout(() => {
-				setUploadState({ status: "idle" });
-			}, 3e3);
-			return () => clearTimeout(timer);
-		}
-	}, [uploadState.status]);
-	const handleFileSelect = async (e) => {
-		const files = e.target.files;
-		if (files && files.length > 0) {
-			const fileArray = [...files];
-			const total = fileArray.length;
-			if (activeProvider === "local") {
-				setUploadState({
-					status: "uploading",
-					progress: {
-						current: 0,
-						total
-					}
-				});
-				let uploaded = 0;
-				let failed = 0;
-				for (const file of fileArray) {
-					try {
-						await onUpload?.(file);
-						uploaded++;
-					} catch (error) {
-						console.error("Upload failed:", error);
-						failed++;
-					}
-					setUploadState({
-						status: "uploading",
-						progress: {
-							current: uploaded + failed,
-							total
-						}
-					});
-				}
-				if (failed === 0) setUploadState({
-					status: "success",
-					message: i18n._({
-						id: "btYZgm",
-						message: "{total, plural, one {File uploaded} other {# files uploaded}}",
-						values: { total }
-					})
-				});
-				else if (uploaded === 0) setUploadState({
-					status: "error",
-					message: i18n._({
-						id: "TUbRbs",
-						message: "{total, plural, one {Upload failed} other {All # uploads failed}}",
-						values: { total }
-					})
-				});
-				else setUploadState({
-					status: "error",
-					message: _t({
-						id: "f5MgHH",
-						message: "{uploaded} uploaded, {failed} failed",
-						values: {
-							uploaded,
-							failed
-						}
-					})
-				});
-			} else if (activeProviderInfo?.capabilities.upload) {
-				setUploadState({
-					status: "uploading",
-					progress: {
-						current: 0,
-						total
-					}
-				});
-				let uploaded = 0;
-				let failed = 0;
-				for (const file of fileArray) {
-					try {
-						await uploadToProvider(activeProvider, file);
-						uploaded++;
-					} catch (error) {
-						console.error("Upload failed:", error);
-						failed++;
-					}
-					setUploadState({
-						status: "uploading",
-						progress: {
-							current: uploaded + failed,
-							total
-						}
-					});
-				}
-				if (failed === 0) setUploadState({
-					status: "success",
-					message: i18n._({
-						id: "btYZgm",
-						message: "{total, plural, one {File uploaded} other {# files uploaded}}",
-						values: { total }
-					})
-				});
-				else if (uploaded === 0) setUploadState({
-					status: "error",
-					message: i18n._({
-						id: "TUbRbs",
-						message: "{total, plural, one {Upload failed} other {All # uploads failed}}",
-						values: { total }
-					})
-				});
-				else setUploadState({
-					status: "error",
-					message: _t({
-						id: "f5MgHH",
-						message: "{uploaded} uploaded, {failed} failed",
-						values: {
-							uploaded,
-							failed
-						}
-					})
-				});
-				refetchProviderMedia();
+		const hasFiles = (event) => event.dataTransfer?.types.includes("Files") ?? false;
+		const resetDrag = () => {
+			dragDepthRef.current = 0;
+			setIsFileDragActive(false);
+		};
+		const handleDragEnter = (event) => {
+			if (!hasFiles(event)) return;
+			event.preventDefault();
+			if (uploadDialogOpen || !canUpload) return;
+			dragDepthRef.current += 1;
+			setIsFileDragActive(true);
+		};
+		const handleDragOver = (event) => {
+			if (hasFiles(event)) event.preventDefault();
+		};
+		const handleDragLeave = (event) => {
+			if (dragDepthRef.current === 0 || uploadDialogOpen || !canUpload) return;
+			if (event.relatedTarget === null) {
+				resetDrag();
+				return;
 			}
-		}
-		if (fileInputRef.current) fileInputRef.current.value = "";
-	};
+			dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+			if (dragDepthRef.current === 0) setIsFileDragActive(false);
+		};
+		const handleDrop = (event) => {
+			if (!hasFiles(event)) return;
+			event.preventDefault();
+			resetDrag();
+			if (uploadDialogOpen || !canUpload) return;
+			enqueueFiles([...event.dataTransfer?.files ?? []], mediaHeadingRef.current);
+		};
+		window.addEventListener("dragenter", handleDragEnter);
+		window.addEventListener("dragover", handleDragOver);
+		window.addEventListener("dragleave", handleDragLeave);
+		window.addEventListener("drop", handleDrop);
+		return () => {
+			window.removeEventListener("dragenter", handleDragEnter);
+			window.removeEventListener("dragover", handleDragOver);
+			window.removeEventListener("dragleave", handleDragLeave);
+			window.removeEventListener("drop", handleDrop);
+		};
+	}, [
+		canUpload,
+		enqueueFiles,
+		uploadDialogOpen
+	]);
 	const providerTabs = React$1.useMemo(() => {
 		const tabs = [{
 			id: "local",
@@ -26954,8 +27446,6 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 	const currentItems = activeProvider === "local" ? items : [];
 	const currentProviderItems = activeProvider !== "local" ? providerData?.items || [] : [];
 	const currentLoading = activeProvider === "local" ? isLoading : providerLoading;
-	const canUpload = activeProviderInfo?.capabilities.upload ?? false;
-	const canSearch = activeProviderInfo?.capabilities.search ?? false;
 	const resultCount = activeProvider === "local" ? currentItems.length : currentProviderItems.length;
 	const hasMoreCurrentItems = activeProvider === "local" ? Boolean(hasMore) : Boolean(providerData?.nextCursor);
 	const resultCountText = resultCount > 0 && !hasMoreCurrentItems ? i18n._({
@@ -26976,9 +27466,51 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 		if (activeProvider === "local" && next.trim() === "") onLocalSearchChange?.("");
 	};
 	const showToolbar = resultCount > 0 || hasActiveQuery;
+	const uploadFile = React$1.useCallback(async (file, options) => {
+		if (!uploadTarget) throw new Error("Upload target unavailable");
+		if (uploadTarget.id === "local") {
+			if (!onUpload) throw new Error("Upload callback unavailable");
+			await onUpload(file, options);
+			return;
+		}
+		await uploadToProvider(uploadTarget.id, file, void 0, options);
+	}, [onUpload, uploadTarget]);
+	const handleUploadDialogClosed = React$1.useCallback(() => {
+		setEnqueueRequest(null);
+		setUploadTarget(null);
+		const returnTarget = returnFocusRef.current;
+		returnFocusRef.current = null;
+		window.requestAnimationFrame(() => {
+			(returnTarget?.isConnected ? returnTarget : mediaHeadingRef.current)?.focus();
+		});
+	}, []);
+	const handleUploadQueueIdle = React$1.useCallback(() => {
+		if (uploadTarget?.id !== "local") refetchProviderMedia();
+	}, [refetchProviderMedia, uploadTarget?.id]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
+		"data-media-library": true,
 		children: [
+			isFileDragActive && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none fixed inset-0 z-50 bg-kumo-base/70 p-4 backdrop-blur-sm sm:p-8",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex h-full items-center justify-center rounded-2xl border-[3px] border-dashed border-kumo-brand/80 bg-kumo-tint/70",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center gap-3 text-center",
+						children: [/* @__PURE__ */ jsx(Upload, {
+							className: "h-10 w-10 text-kumo-subtle",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-lg font-semibold",
+							children: _t({
+								id: "8o3dPc",
+								message: "Drop files to upload"
+							})
+						})]
+					})
+				})
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center justify-between gap-4",
 				children: [/* @__PURE__ */ jsx("h1", {
@@ -26989,62 +27521,20 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 						id: "ia4TsE",
 						message: "Media Library"
 					})
-				}), /* @__PURE__ */ jsxs("div", {
+				}), /* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-3",
-					children: [
-						uploadState.status === "uploading" && /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 text-sm text-kumo-subtle",
-							children: [/* @__PURE__ */ jsx(Loader, { size: "sm" }), /* @__PURE__ */ jsx("span", { children: uploadState.progress && uploadState.progress.total > 1 ? _t({
-								id: "oplKZn",
-								message: "Uploading {0}/{1}...",
-								values: {
-									0: uploadState.progress.current,
-									1: uploadState.progress.total
-								}
-							}) : _t({
-								id: "GxkJXS",
-								message: "Uploading..."
-							}) })]
-						}),
-						uploadState.status === "success" && /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 text-sm text-kumo-success",
-							children: [/* @__PURE__ */ jsx(Check, {
-								className: "h-4 w-4",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ jsx("span", { children: uploadState.message })]
-						}),
-						uploadState.status === "error" && /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 text-sm text-kumo-danger",
-							children: [/* @__PURE__ */ jsx(X, {
-								className: "h-4 w-4",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ jsx("span", { children: uploadState.message })]
-						}),
-						canUpload && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-							onClick: () => fileInputRef.current?.click(),
-							disabled: uploadState.status === "uploading",
-							icon: uploadState.status === "uploading" ? /* @__PURE__ */ jsx(Loader, { size: "sm" }) : /* @__PURE__ */ jsx(Upload, {}),
-							children: _t({
-								id: "f9mKbV",
-								message: "Upload to {0}",
-								values: { 0: activeProviderInfo?.name || _t({
-									id: "exYcTF",
-									message: "Library"
-								}) }
-							})
-						}), /* @__PURE__ */ jsx("input", {
-							ref: fileInputRef,
-							type: "file",
-							multiple: true,
-							accept: "image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx",
-							className: "sr-only",
-							onChange: handleFileSelect,
-							"aria-label": _t({
-								id: "sCtyHQ",
-								message: "Upload files"
-							})
-						})] })
-					]
+					children: canUpload && /* @__PURE__ */ jsx(Button, {
+						onClick: openUploadDialog,
+						icon: /* @__PURE__ */ jsx(Upload, {}),
+						children: _t({
+							id: "f9mKbV",
+							message: "Upload to {0}",
+							values: { 0: activeProviderInfo?.name || _t({
+								id: "exYcTF",
+								message: "Library"
+							}) }
+						})
+					})
 				})]
 			}),
 			providerTabs.length > 1 && /* @__PURE__ */ jsx(Tabs, {
@@ -27220,7 +27710,7 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 					message: "Upload images, videos, and documents to keep reusable assets in one place."
 				}),
 				action: /* @__PURE__ */ jsx(Button, {
-					onClick: () => fileInputRef.current?.click(),
+					onClick: openUploadDialog,
 					icon: /* @__PURE__ */ jsx(Upload, {}),
 					children: _t({
 						id: "HAKBY9",
@@ -27256,7 +27746,7 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 					message: "Upload media to keep reusable assets in one place."
 				}),
 				action: /* @__PURE__ */ jsx(Button, {
-					onClick: () => fileInputRef.current?.click(),
+					onClick: openUploadDialog,
 					icon: /* @__PURE__ */ jsx(Upload, {}),
 					children: _t({
 						id: "HAKBY9",
@@ -27388,6 +27878,20 @@ function MediaLibrary({ items = [], isLoading, onUpload, onItemUpdated, hasMore,
 					})
 				})
 			}),
+			/* @__PURE__ */ jsx(MediaUploadDialog, {
+				open: uploadDialogOpen,
+				providerName: uploadTarget?.name ?? activeProviderInfo?.name ?? _t({
+					id: "exYcTF",
+					message: "Library"
+				}),
+				accept: uploadTarget?.id === "local" ? LOCAL_MEDIA_UPLOAD_ACCEPT : void 0,
+				enqueueRequest,
+				onEnqueueRequestConsumed: (id) => setEnqueueRequest((current) => current?.id === id ? null : current),
+				onOpenChange: setUploadDialogOpen,
+				onCloseComplete: handleUploadDialogClosed,
+				onQueueIdle: handleUploadQueueIdle,
+				upload: uploadFile
+			}),
 			detailItem && /* @__PURE__ */ jsx(MediaDetailPanel, {
 				open: isDetailOpen,
 				item: detailItem,
@@ -47719,7 +48223,7 @@ function MediaPage() {
 		getNextPageParam: (lastPage) => lastPage.nextCursor
 	});
 	const uploadMutation = useMutation({
-		mutationFn: (file) => uploadMedia(file),
+		mutationFn: ({ file, options }) => uploadMedia(file, options),
 		onSuccess: () => {
 			queryClient.invalidateQueries({ queryKey: ["media"] });
 		}
@@ -47733,8 +48237,11 @@ function MediaPage() {
 		isLoading: isLoading || isFetchingNextPage,
 		hasMore: !!hasNextPage,
 		onLoadMore: () => void fetchNextPage(),
-		onUpload: async (file) => {
-			await uploadMutation.mutateAsync(file);
+		onUpload: async (file, options) => {
+			await uploadMutation.mutateAsync({
+				file,
+				options
+			});
 		},
 		onLocalSearchChange: setSearch,
 		onLocalMimeFilterChange: setMimeFilter