From 9da75d3969b2743fa490d83fe3261c7b2e0f21ca Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 13:23:49 -0700
Subject: [PATCH 01/33] feat(admin): accept drag and drop on the VR and sticker
 upload zones (SONA-216)

---
 messages/en.json                          |   1 +
 messages/ja.json                          |   1 +
 src/lib/components/StickerPackForm.svelte |  31 +++++-
 src/lib/components/VrAvatarForm.svelte    |  59 ++++++++--
 src/lib/drop-files.test.ts                | 128 ++++++++++++++++++++++
 src/lib/drop-files.ts                     |  71 ++++++++++++
 tests/e2e/vr-admin-form.spec.ts           |  52 +++++++++
 7 files changed, 333 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/drop-files.test.ts
 create mode 100644 src/lib/drop-files.ts

diff --git a/messages/en.json b/messages/en.json
index e2046b2b..0507dd03 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -855,6 +855,7 @@
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
 	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
+	"admin_pack_upload_bad_type": "Only PNG and WebP files can be added to a pack.",
 	"admin_pack_details": "Pack details",
 	"admin_pack_name": "Pack name",
 	"admin_pack_name_placeholder": "My sticker pack",
diff --git a/messages/ja.json b/messages/ja.json
index f019d1b5..57f19873 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -645,6 +645,7 @@
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
 	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
+	"admin_pack_upload_bad_type": "パックに追加できるのはPNGとWebPのファイルのみです。",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
 	"admin_pack_name_placeholder": "マイステッカーセット",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 909a0d24..98c22b8f 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -4,6 +4,7 @@
 	import { X, Plus, ArrowLeft, Check, Loader2, GripVertical, UserPlus } from 'lucide-svelte';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
+	import { dropFiles } from '$lib/drop-files';
 	import * as m from '$lib/paraglide/messages';
 	import StickerMedia from '$lib/components/StickerMedia.svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
@@ -103,6 +104,10 @@
 		}))
 	);
 
+	// Shared by the file input and the drop attachment, so a drop accepts exactly
+	// what the picker offers.
+	const STICKER_ACCEPT = 'image/png,image/webp';
+
 	let uploading = $state(false);
 	let published = $state(pack?.published ?? false);
 	let saving = $state(false);
@@ -121,10 +126,19 @@
 		return url;
 	}
 
-	async function uploadStickers(e: Event) {
+	function uploadStickers(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = [...(input.files ?? [])];
 		if (!files.length) return;
+		addStickerFiles(files);
+	}
+
+	// Shared by the file input and the drop attachment. `rejected` only ever
+	// arrives from a drop — the input's accept attribute filters the picker, a
+	// drop skips it — and those files are reported without being uploaded.
+	async function addStickerFiles(files: File[], rejected: File[] = []) {
+		if (rejected.length) toast.error(m.admin_pack_upload_bad_type());
+		if (!files.length) return;
 		uploading = true;
 		let ok = 0;
 		let failed = 0;
@@ -314,10 +328,17 @@
 			<p class="hint">{m.admin_pack_edit_hint()}</p>
 		{/if}
 
-		<label class="upload-zone multi">
+		<label
+			class="upload-zone multi"
+			{@attach dropFiles({
+				accept: STICKER_ACCEPT,
+				onFiles: addStickerFiles,
+				disabled: () => uploading
+			})}
+		>
 			<Plus size={20} />
 			<span>{uploading ? m.admin_upload_uploading() : m.admin_pack_dropzone()}</span>
-			<input type="file" accept="image/png,image/webp" multiple onchange={uploadStickers} disabled={uploading} style="display:none" />
+			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading} style="display:none" />
 		</label>
 
 		{#if stickerEntries.length > 0}
@@ -500,6 +521,10 @@
 	}
 	.upload-zone.multi { width: 100%; }
 	.upload-zone:hover { border-color: var(--primary); }
+	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
+	   as the upload page's dropzone. :global because the drop attachment sets the
+	   class imperatively, so Svelte can't see it in the markup. */
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
 	.remove-btn {
 		display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
 		background: none; color: var(--muted-foreground); border: 1px solid var(--border);
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 8366f9f1..6b80fe76 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -8,6 +8,7 @@
 	import { cdnImage, rawFallback, THUMB_WIDTH } from '$lib';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
+	import { dropFiles } from '$lib/drop-files';
 	import { probeDimensions } from '$lib/probe-dimensions';
 	import { MAX_BUFFER_BYTES } from '$lib/config';
 	import { MAX_VR_MODEL_BYTES, creditRoleLabel, formatBytes, modelFileError, modelFormatLabel, namePlaceholderCharacter, platformLabel } from '$lib/vr';
@@ -215,12 +216,25 @@
 	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
 	const MAX_MEDIA_BYTES = MAX_BUFFER_BYTES;
 
-	async function onMediaPicked(e: Event) {
+	function onMediaPicked(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = [...(input.files ?? [])];
 		input.value = '';
 		if (!files.length) return;
-		mediaErrors = [];
+		uploadMedia(files);
+	}
+
+	// Shared by the file input and the drop attachment. `rejected` only ever
+	// arrives from a drop — the input's accept attribute filters the picker, a
+	// drop skips it — and those files are reported without being uploaded.
+	async function uploadMedia(files: File[], rejected: File[] = []) {
+		if (!files.length && !rejected.length) return;
+		mediaErrors = rejected.map((file) => ({
+			uid: mediaErrorUid++,
+			name: file.name,
+			reason: 'bad-type' as const
+		}));
+		if (!files.length) return;
 		mediaUploading = true;
 		mediaStatus = m.admin_upload_uploading();
 		try {
@@ -307,6 +321,10 @@
 	let modelSizeBytes = $state<number | null>(avatar?.modelSizeBytes ?? null);
 	let modelFilename = $state(avatar?.modelUrl ? (avatar.modelUrl.split('/').pop() ?? '') : '');
 
+	// Shared by the file inputs and the drop attachment, so a drop accepts
+	// exactly what the picker offers.
+	const MODEL_ACCEPT = '.vrm,.fbx';
+
 	let uploading = $state(false);
 	let uploadLoaded = $state(0);
 	let uploadTotal = $state(0);
@@ -331,6 +349,18 @@
 		const file = input.files?.[0];
 		input.value = '';
 		if (!file) return;
+		uploadModel(file);
+	}
+
+	// Drops route here too. A drop of several files takes the first one: the
+	// avatar has a single model.
+	function onModelDropped(files: File[], rejected: File[]) {
+		if (files.length) uploadModel(files[0]);
+		// Wrong extension: the same banner modelFileError would raise, no request.
+		else if (rejected.length) uploadError = 'bad-type';
+	}
+
+	function uploadModel(file: File) {
 		uploadError = null;
 		// Client-side mirror of the server guards ($lib/vr modelFileError), for
 		// instant feedback — the endpoint re-checks all of it.
@@ -580,9 +610,12 @@
 					<span class="model-meta">{modelFormatLabel(modelFormat)} · {formatBytes(modelSizeBytes)}</span>
 				</div>
 				<div class="model-actions">
-					<label class="btn-sm">
+					<label
+						class="btn-sm"
+						{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped })}
+					>
 						{m.admin_vr_upload_replace()}
-						<input type="file" accept=".vrm,.fbx" onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
+						<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
 					</label>
 					<button type="button" class="btn-sm" onclick={removeModel}>{m.admin_vr_upload_remove()}</button>
 				</div>
@@ -594,10 +627,10 @@
 			{/if}
 		{:else}
 			<!-- The whole zone is the label for the hidden file input. -->
-			<label class="upload-zone">
+			<label class="upload-zone" {@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped })}>
 				<UploadCloud size={22} />
 				<span>{m.admin_vr_dropzone({ max: formatBytes(MAX_VR_MODEL_BYTES) })}</span>
-				<input type="file" accept=".vrm,.fbx" onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
+				<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
 			</label>
 		{/if}
 		{#if uploadError}
@@ -759,7 +792,15 @@
 				{/each}
 			</div>
 		{/if}
-		<label class="upload-zone media-zone" class:disabled={mediaUploading}>
+		<label
+			class="upload-zone media-zone"
+			class:disabled={mediaUploading}
+			{@attach dropFiles({
+				accept: MEDIA_ACCEPT,
+				onFiles: uploadMedia,
+				disabled: () => mediaUploading
+			})}
+		>
 			<ImagePlus size={20} />
 			<span>{mediaUploading ? m.admin_upload_uploading() : m.admin_vr_media_dropzone({ max: formatBytes(MAX_MEDIA_BYTES) })}</span>
 			<input
@@ -1034,6 +1075,9 @@
 		transition: border-color 0.15s; min-height: 88px;
 	}
 	.upload-zone:hover { border-color: var(--primary); }
+	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
+	   as the upload page's dropzone. The class is set by the drop attachment. */
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
 	.upload-zone.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
 	.sr-file { position: absolute; opacity: 0; width: 0; height: 0; }
 	/* The hidden file inputs stay keyboard-focusable — surface focus on their
@@ -1078,6 +1122,7 @@
 		background: var(--secondary); color: var(--foreground); cursor: pointer; flex-direction: row;
 	}
 	.btn-sm:hover { border-color: var(--primary); }
+	.btn-sm:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
 
 	/* Showcase media rows (same row chrome as the credit list). */
 	.media-list { display: flex; flex-direction: column; gap: 10px; }
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
new file mode 100644
index 00000000..519d69ad
--- /dev/null
+++ b/src/lib/drop-files.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { dropFiles, matchesAccept } from './drop-files';
+
+// The accept filter is the security-relevant half (SONA-216): the accept
+// ATTRIBUTE only constrains the file picker, so without this an admin dropping
+// a .txt on a zone would POST it to /api/upload.
+describe('matchesAccept', () => {
+	const f = (name: string, type = '') => ({ name, type });
+
+	it('matches extensions case-insensitively', () => {
+		expect(matchesAccept(f('avatar.vrm'), '.vrm,.fbx')).toBe(true);
+		expect(matchesAccept(f('AVATAR.VRM'), '.vrm,.fbx')).toBe(true);
+		expect(matchesAccept(f('avatar.fbx'), '.VRM,.FBX')).toBe(true);
+		expect(matchesAccept(f('notes.txt'), '.vrm,.fbx')).toBe(false);
+		// The extension must be at the END, not anywhere in the name.
+		expect(matchesAccept(f('vrm.txt'), '.vrm')).toBe(false);
+	});
+
+	it('matches exact MIME types', () => {
+		expect(matchesAccept(f('a.png', 'image/png'), 'image/png,image/webp')).toBe(true);
+		expect(matchesAccept(f('a.gif', 'image/gif'), 'image/png,image/webp')).toBe(false);
+		// A file the OS gave no type is not an exact-MIME match.
+		expect(matchesAccept(f('a.png'), 'image/png')).toBe(false);
+	});
+
+	it('matches wildcard MIME types', () => {
+		expect(matchesAccept(f('a.avif', 'image/avif'), 'image/*')).toBe(true);
+		expect(matchesAccept(f('a.webm', 'video/webm'), 'image/*')).toBe(false);
+		expect(matchesAccept(f('a.webm', 'video/webm'), 'image/*,video/*')).toBe(true);
+	});
+
+	it('tolerates spaces around the comma list', () => {
+		expect(matchesAccept(f('a.webm', 'video/webm'), 'image/png, video/webm')).toBe(true);
+		expect(matchesAccept(f('a.fbx'), '.vrm, .fbx')).toBe(true);
+	});
+
+	it('accepts everything when accept is empty', () => {
+		expect(matchesAccept(f('notes.txt', 'text/plain'), '')).toBe(true);
+		expect(matchesAccept(f('notes.txt', 'text/plain'), '  ,  ')).toBe(true);
+	});
+});
+
+// No jsdom in this repo (environment: 'node'), so the attachment runs against a
+// hand-rolled element: EventTarget gives real listener semantics, and classList
+// only needs add/remove/contains.
+class FakeEl extends EventTarget {
+	classes = new Set<string>();
+	classList = {
+		add: (c: string) => this.classes.add(c),
+		remove: (c: string) => this.classes.delete(c),
+		contains: (c: string) => this.classes.has(c)
+	};
+}
+
+type PickedFile = { name: string; type: string };
+
+function dragEvent(type: string, files: PickedFile[] = []) {
+	return Object.assign(new Event(type), { dataTransfer: { files, dropEffect: '' } });
+}
+
+describe('dropFiles', () => {
+	function setup(disabled?: () => boolean) {
+		const el = new FakeEl();
+		const calls: { files: PickedFile[]; rejected: PickedFile[] }[] = [];
+		const attach = dropFiles({
+			accept: 'image/png,.vrm',
+			onFiles: (files, rejected) =>
+				calls.push({ files: files as unknown as PickedFile[], rejected: rejected as unknown as PickedFile[] }),
+			disabled
+		});
+		const cleanup = attach(el as unknown as HTMLElement);
+		return { el, calls, cleanup };
+	}
+
+	it('toggles drag-over on dragover and clears it on dragleave', () => {
+		const { el } = setup();
+		el.dispatchEvent(dragEvent('dragover'));
+		expect(el.classes.has('drag-over')).toBe(true);
+		el.dispatchEvent(dragEvent('dragleave'));
+		expect(el.classes.has('drag-over')).toBe(false);
+	});
+
+	it('sets the copy drop effect so the cursor reads as an upload', () => {
+		const { el } = setup();
+		const ev = dragEvent('dragover');
+		el.dispatchEvent(ev);
+		expect(ev.dataTransfer.dropEffect).toBe('copy');
+	});
+
+	it('partitions dropped files and clears the highlight', () => {
+		const { el, calls } = setup();
+		el.dispatchEvent(dragEvent('dragenter'));
+		expect(el.classes.has('drag-over')).toBe(true);
+		const good = { name: 'a.png', type: 'image/png' };
+		const model = { name: 'b.vrm', type: '' };
+		const bad = { name: 'notes.txt', type: 'text/plain' };
+		el.dispatchEvent(dragEvent('drop', [good, bad, model]));
+		expect(el.classes.has('drag-over')).toBe(false);
+		expect(calls).toHaveLength(1);
+		expect(calls[0].files).toEqual([good, model]);
+		expect(calls[0].rejected).toEqual([bad]);
+	});
+
+	it('ignores an empty drop', () => {
+		const { el, calls } = setup();
+		el.dispatchEvent(dragEvent('drop', []));
+		expect(calls).toHaveLength(0);
+	});
+
+	it('suppresses the highlight and the drop while disabled', () => {
+		const { el, calls } = setup(() => true);
+		const ev = dragEvent('dragover');
+		el.dispatchEvent(ev);
+		expect(el.classes.has('drag-over')).toBe(false);
+		expect(ev.dataTransfer.dropEffect).toBe('none');
+		el.dispatchEvent(dragEvent('drop', [{ name: 'a.png', type: 'image/png' }]));
+		expect(calls).toHaveLength(0);
+	});
+
+	it('removes its listeners on cleanup', () => {
+		const { el, calls, cleanup } = setup();
+		cleanup?.();
+		el.dispatchEvent(dragEvent('dragover'));
+		el.dispatchEvent(dragEvent('drop', [{ name: 'a.png', type: 'image/png' }]));
+		expect(el.classes.has('drag-over')).toBe(false);
+		expect(calls).toHaveLength(0);
+	});
+});
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
new file mode 100644
index 00000000..a917185d
--- /dev/null
+++ b/src/lib/drop-files.ts
@@ -0,0 +1,71 @@
+import type { Attachment } from 'svelte/attachments';
+
+/**
+ * Does a file satisfy an `accept` attribute string? Handles the three forms the
+ * attribute allows: an extension (`.vrm`), an exact MIME type (`image/png`) and
+ * a wildcard MIME type (`image/*`). Extensions match case-insensitively; an
+ * empty accept string accepts everything.
+ *
+ * Pure so it can be unit-tested without a DOM.
+ */
+export function matchesAccept(file: { name: string; type: string }, accept: string): boolean {
+	const patterns = accept
+		.split(',')
+		.map((p) => p.trim().toLowerCase())
+		.filter(Boolean);
+	if (!patterns.length) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return patterns.some((p) => {
+		if (p.startsWith('.')) return name.endsWith(p);
+		if (p.endsWith('/*')) return type.startsWith(p.slice(0, -1));
+		return type === p;
+	});
+}
+
+/**
+ * Drag-and-drop for an upload zone (SONA-216): highlights the element with
+ * `drag-over` while a file is over it and hands the dropped files to `onFiles`.
+ *
+ * The `accept` attribute only constrains the file PICKER — a dropped file skips
+ * it entirely — so files are partitioned here and the caller reports the
+ * rejected ones without ever posting them.
+ */
+export function dropFiles(opts: {
+	accept: string;
+	onFiles: (files: File[], rejected: File[]) => void;
+	disabled?: () => boolean;
+}): Attachment<HTMLElement> {
+	return (node) => {
+		// preventDefault on dragenter/dragover is what makes the element a drop
+		// target at all; without it the browser opens the file instead. It runs
+		// even while disabled so a drop on a busy zone is swallowed, not navigated.
+		const over = (e: DragEvent) => {
+			e.preventDefault();
+			const off = opts.disabled?.() ?? false;
+			if (e.dataTransfer) e.dataTransfer.dropEffect = off ? 'none' : 'copy';
+			if (!off) node.classList.add('drag-over');
+		};
+		const leave = () => node.classList.remove('drag-over');
+		const drop = (e: DragEvent) => {
+			e.preventDefault();
+			node.classList.remove('drag-over');
+			if (opts.disabled?.()) return;
+			const files = [...(e.dataTransfer?.files ?? [])];
+			if (!files.length) return;
+			const accepted = files.filter((f) => matchesAccept(f, opts.accept));
+			const rejected = files.filter((f) => !matchesAccept(f, opts.accept));
+			opts.onFiles(accepted, rejected);
+		};
+		node.addEventListener('dragenter', over);
+		node.addEventListener('dragover', over);
+		node.addEventListener('dragleave', leave);
+		node.addEventListener('drop', drop);
+		return () => {
+			node.removeEventListener('dragenter', over);
+			node.removeEventListener('dragover', over);
+			node.removeEventListener('dragleave', leave);
+			node.removeEventListener('drop', drop);
+		};
+	};
+}
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 7c0f4131..c31105ae 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -161,3 +161,55 @@ test('typing a name auto-suggests the slug until the slug is touched', async ({
 	await page.getByRole('button', { name: 'Add credit' }).click();
 	await expect(page.locator('select[name="credit[0][artistId]"]')).toBeVisible();
 });
+
+test('dropping a file on the showcase media zone uploads it, and a wrong type is rejected without a request', async ({
+	page
+}) => {
+	await adminLogin(page, PASSWORD);
+
+	// Stub the upload endpoint: this spec shares a read-only server with the rest
+	// of the suite, so a real POST would leave an orphaned stored file behind.
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/vr/new');
+	await expect(page.getByText(/Add screenshots or short \.webm clips/)).toBeVisible();
+
+	// The browser can't be driven to drag a real file in, so build a DataTransfer
+	// in the page and dispatch the drop the attachment listens for.
+	const drop = (name: string, type: string) =>
+		page.evaluate(
+			({ name, type }) => {
+				const dt = new DataTransfer();
+				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type }));
+				document
+					.querySelector('.media-zone')!
+					.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
+			},
+			{ name, type }
+		);
+
+	// Hydration-retry shape (see upload.spec.ts): a drop dispatched before the
+	// attachment has run silently does nothing. The counter resets per attempt.
+	await expect(async () => {
+		uploads = 0;
+		await drop('shot.png', 'image/png');
+		await expect(page.locator('input[name="media[0][url]"]')).toHaveValue('/x.png', {
+			timeout: 2000
+		});
+	}).toPass({ timeout: 20_000 });
+	expect(uploads).toBe(1);
+
+	// A dropped file skips the input's accept filter, so the zone has to reject
+	// the wrong type itself: the bad-type banner, and no POST.
+	const before = uploads;
+	await drop('notes.txt', 'text/plain');
+	await expect(page.getByText(/That file type isn't supported/)).toBeVisible();
+	expect(uploads).toBe(before);
+});

From 99df4f94d1cc05da15e5581e7aee29b7df49fd61 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 13:50:17 -0700
Subject: [PATCH 02/33] fix(admin): ship round 1 fixes for drag-and-drop upload
 zones (SONA-216)

---
 messages/en.json                          |  6 +-
 messages/ja.json                          |  6 +-
 src/lib/components/StickerPackForm.svelte | 17 ++++--
 src/lib/components/VrAvatarForm.svelte    | 45 +++++++++-----
 src/lib/drop-files.ts                     |  5 +-
 tests/e2e/sticker-pack-form.spec.ts       | 74 +++++++++++++++++++++++
 tests/e2e/vr-admin-form.spec.ts           | 73 ++++++++++++++++++++--
 7 files changed, 195 insertions(+), 31 deletions(-)
 create mode 100644 tests/e2e/sticker-pack-form.spec.ts

diff --git a/messages/en.json b/messages/en.json
index 0507dd03..89909647 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -855,7 +855,7 @@
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
 	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
-	"admin_pack_upload_bad_type": "Only PNG and WebP files can be added to a pack.",
+	"admin_pack_upload_bad_type": "Skipped {names}: that file type isn't supported. Add PNG or WebP images instead.",
 	"admin_pack_details": "Pack details",
 	"admin_pack_name": "Pack name",
 	"admin_pack_name_placeholder": "My sticker pack",
@@ -1547,7 +1547,7 @@
 	"admin_vr_field_role_label": "Role name",
 	"admin_vr_role_label_placeholder": "e.g. Blendshapes",
 	"admin_vr_field_model": "Model file",
-	"admin_vr_dropzone": "Choose a .vrm or .fbx file to upload (max {max})",
+	"admin_vr_dropzone": "Drag & drop a .vrm or .fbx file here, or click to browse (max {max})",
 	"admin_vr_model_hint": "VRM 0.x and 1.0 both work in the 3D viewer. You can still offer FBX files as a download, but the viewer won't display them.",
 	"admin_vr_upload_progress": "{loaded} of {total} uploaded",
 	"admin_vr_upload_replace": "Replace",
@@ -1562,7 +1562,7 @@
 	"admin_vr_permission_placeholder": "e.g. Telegram DM 2026-08-01 — required to offer downloads",
 	"admin_vr_section_media": "Showcase media",
 	"admin_vr_media_hint": "Screenshots and short clips shown under the poster on the public page. Clips can't carry captions, so don't put anything important in speech or audio. They start muted, but visitors can turn the sound on, so you need consent from anyone recorded in the clip.",
-	"admin_vr_media_dropzone": "Add screenshots or short .webm clips (max {max} each)",
+	"admin_vr_media_dropzone": "Drag & drop screenshots or short .webm clips here, or click to browse (max {max} each)",
 	"admin_vr_media_kind_image": "Image",
 	"admin_vr_media_kind_video": "Clip",
 	"admin_vr_media_remove": "Remove media {position}",
diff --git a/messages/ja.json b/messages/ja.json
index 57f19873..be6d6062 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -645,7 +645,7 @@
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
 	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
-	"admin_pack_upload_bad_type": "パックに追加できるのはPNGとWebPのファイルのみです。",
+	"admin_pack_upload_bad_type": "{names}はスキップしました。対応していないファイル形式です。PNGまたはWebPの画像を追加してください。",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
 	"admin_pack_name_placeholder": "マイステッカーセット",
@@ -1239,7 +1239,7 @@
 	"admin_vr_field_role_label": "役割名",
 	"admin_vr_role_label_placeholder": "例: ブレンドシェイプ",
 	"admin_vr_field_model": "モデルファイル",
-	"admin_vr_dropzone": ".vrmまたは.fbxファイルを選択してアップロード（最大{max}）",
+	"admin_vr_dropzone": ".vrmまたは.fbxファイルをここにドラッグ＆ドロップするか、クリックして選択してください（最大{max}）",
 	"admin_vr_model_hint": "3DビューアはVRM 0.xと1.0の両方に対応しています。FBXファイルはダウンロード用に提供できますが、ビューアには表示されません。",
 	"admin_vr_upload_progress": "{total}中{loaded}をアップロード済み",
 	"admin_vr_upload_replace": "差し替え",
@@ -1254,7 +1254,7 @@
 	"admin_vr_permission_placeholder": "例: Telegram DM 2026-08-01 — ダウンロード提供に必須",
 	"admin_vr_section_media": "ショーケースメディア",
 	"admin_vr_media_hint": "公開ページでポスターの下に表示されるスクリーンショットや短いクリップです。クリップには字幕を付けられないため、重要な内容を音声に頼らないでください。再生はミュートで始まりますが、訪問者は音声をオンにできます — クリップに記録されている人がいる場合は、その人の同意が必要です。",
-	"admin_vr_media_dropzone": "スクリーンショットや短い.webmクリップを追加（各最大{max}）",
+	"admin_vr_media_dropzone": "スクリーンショットや短い.webmクリップをここにドラッグ＆ドロップするか、クリックして選択してください（各最大{max}）",
 	"admin_vr_media_kind_image": "画像",
 	"admin_vr_media_kind_video": "クリップ",
 	"admin_vr_media_remove": "メディア{position}を削除",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 98c22b8f..8b08856a 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -105,8 +105,10 @@
 	);
 
 	// Shared by the file input and the drop attachment, so a drop accepts exactly
-	// what the picker offers.
-	const STICKER_ACCEPT = 'image/png,image/webp';
+	// what the picker offers. Extensions as well as MIME types: some platforms
+	// hand a dropped file over with an empty `type`, and the accept attribute
+	// takes both forms.
+	const STICKER_ACCEPT = 'image/png,image/webp,.png,.webp';
 
 	let uploading = $state(false);
 	let published = $state(pack?.published ?? false);
@@ -137,7 +139,8 @@
 	// arrives from a drop — the input's accept attribute filters the picker, a
 	// drop skips it — and those files are reported without being uploaded.
 	async function addStickerFiles(files: File[], rejected: File[] = []) {
-		if (rejected.length) toast.error(m.admin_pack_upload_bad_type());
+		if (rejected.length)
+			toast.error(m.admin_pack_upload_bad_type({ names: rejected.map((f) => f.name).join(', ') }));
 		if (!files.length) return;
 		uploading = true;
 		let ok = 0;
@@ -338,7 +341,7 @@
 		>
 			<Plus size={20} />
 			<span>{uploading ? m.admin_upload_uploading() : m.admin_pack_dropzone()}</span>
-			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading} style="display:none" />
+			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading} class="sr-file" />
 		</label>
 
 		{#if stickerEntries.length > 0}
@@ -521,10 +524,14 @@
 	}
 	.upload-zone.multi { width: 100%; }
 	.upload-zone:hover { border-color: var(--primary); }
+	.sr-file { position: absolute; opacity: 0; width: 0; height: 0; }
+	/* The hidden file input stays keyboard-focusable — surface its focus on the
+	   zone, which is the only thing visible. */
+	.upload-zone:has(.sr-file:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
 	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
 	   as the upload page's dropzone. :global because the drop attachment sets the
 	   class imperatively, so Svelte can't see it in the markup. */
-	.upload-zone:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
 	.remove-btn {
 		display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
 		background: none; color: var(--muted-foreground); border: 1px solid var(--border);
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 6b80fe76..b6ea9545 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -212,7 +212,10 @@
 		mediaEntries = mediaEntries.filter((_, idx) => idx !== i);
 	}
 
-	const MEDIA_ACCEPT = 'image/jpeg,image/png,image/gif,image/webp,image/avif,video/webm';
+	// Extensions as well as MIME types: some platforms hand a dropped file over
+	// with an empty `type`, and the picker's accept attribute takes both forms.
+	const MEDIA_ACCEPT =
+		'image/jpeg,image/png,image/gif,image/webp,image/avif,video/webm,.jpg,.jpeg,.png,.gif,.webp,.avif,.webm';
 	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
 	const MAX_MEDIA_BYTES = MAX_BUFFER_BYTES;
 
@@ -329,6 +332,9 @@
 	let uploadLoaded = $state(0);
 	let uploadTotal = $state(0);
 	let uploadError = $state<'too-large' | 'bad-type' | 'failed' | null>(null);
+	// Bumped on every error so {#key} remounts the role="alert" banner: setting
+	// uploadError to the value it already holds would otherwise announce nothing.
+	let uploadErrorUid = $state(0);
 	let errorFileSize = $state(0);
 
 	// Live-region text for the model upload, throttled to 10% steps so a screen
@@ -357,7 +363,10 @@
 	function onModelDropped(files: File[], rejected: File[]) {
 		if (files.length) uploadModel(files[0]);
 		// Wrong extension: the same banner modelFileError would raise, no request.
-		else if (rejected.length) uploadError = 'bad-type';
+		else if (rejected.length) {
+			uploadError = 'bad-type';
+			uploadErrorUid++;
+		}
 	}
 
 	function uploadModel(file: File) {
@@ -368,6 +377,7 @@
 		if (fileError) {
 			if (fileError === 'too-large') errorFileSize = file.size;
 			uploadError = fileError;
+			uploadErrorUid++;
 			return;
 		}
 		uploading = true;
@@ -402,10 +412,12 @@
 			} else {
 				uploadError = 'failed';
 			}
+			uploadErrorUid++;
 		};
 		xhr.onerror = () => {
 			uploading = false;
 			uploadError = 'failed';
+			uploadErrorUid++;
 		};
 		xhr.send(file);
 	}
@@ -634,15 +646,17 @@
 			</label>
 		{/if}
 		{#if uploadError}
-			<div class="banner err" role="alert">
-				{#if uploadError === 'too-large'}
-					{m.admin_vr_error_too_large({ size: formatBytes(errorFileSize), max: formatBytes(MAX_VR_MODEL_BYTES) })}
-				{:else if uploadError === 'bad-type'}
-					{m.admin_vr_error_bad_type()}
-				{:else}
-					{m.admin_vr_error_upload_failed()}
-				{/if}
-			</div>
+			{#key uploadErrorUid}
+				<div class="banner err" role="alert">
+					{#if uploadError === 'too-large'}
+						{m.admin_vr_error_too_large({ size: formatBytes(errorFileSize), max: formatBytes(MAX_VR_MODEL_BYTES) })}
+					{:else if uploadError === 'bad-type'}
+						{m.admin_vr_error_bad_type()}
+					{:else}
+						{m.admin_vr_error_upload_failed()}
+					{/if}
+				</div>
+			{/key}
 		{/if}
 		<!-- The hint keeps its id — the file inputs' aria-describedby points at
 		     it. The guide link opens a new tab so a half-filled form isn't lost. -->
@@ -1077,8 +1091,11 @@
 	.upload-zone:hover { border-color: var(--primary); }
 	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
 	   as the upload page's dropzone. The class is set by the drop attachment. */
-	.upload-zone:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
-	.upload-zone.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
+	/* No pointer-events: none — the drop attachment has to receive dragover/drop
+	   to preventDefault, or a drop while uploading navigates away from the form.
+	   The nested input's own disabled attribute keeps clicks inert. */
+	.upload-zone.disabled { opacity: 0.55; cursor: not-allowed; }
 	.sr-file { position: absolute; opacity: 0; width: 0; height: 0; }
 	/* The hidden file inputs stay keyboard-focusable — surface focus on their
 	   visible hosts (same :has pattern as .platform-chip). */
@@ -1122,7 +1139,7 @@
 		background: var(--secondary); color: var(--foreground); cursor: pointer; flex-direction: row;
 	}
 	.btn-sm:hover { border-color: var(--primary); }
-	.btn-sm:global(.drag-over) { border-color: var(--primary); background: rgba(255, 132, 0, 0.05); }
+	.btn-sm:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--secondary)); }
 
 	/* Showcase media rows (same row chrome as the credit list). */
 	.media-list { display: flex; flex-direction: column; gap: 10px; }
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index a917185d..8470173b 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -53,8 +53,9 @@ export function dropFiles(opts: {
 			if (opts.disabled?.()) return;
 			const files = [...(e.dataTransfer?.files ?? [])];
 			if (!files.length) return;
-			const accepted = files.filter((f) => matchesAccept(f, opts.accept));
-			const rejected = files.filter((f) => !matchesAccept(f, opts.accept));
+			const accepted: File[] = [];
+			const rejected: File[] = [];
+			for (const f of files) (matchesAccept(f, opts.accept) ? accepted : rejected).push(f);
 			opts.onFiles(accepted, rejected);
 		};
 		node.addEventListener('dragenter', over);
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
new file mode 100644
index 00000000..14b2c5bf
--- /dev/null
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -0,0 +1,74 @@
+import { test, expect } from '@playwright/test';
+import { adminLogin } from './admin-login';
+
+// Sticker-pack form drop zone (SONA-216). Like vr-admin-form.spec.ts this runs
+// on the SHARED read-only DB/server under fullyParallel: it drops files onto the
+// client-side form and never submits it, and /api/upload is stubbed so no stored
+// file is left behind.
+
+// Matches ADMIN_PASSWORD in tests/e2e/wrangler.e2e.toml (throwaway local value).
+const PASSWORD = 'e2e-admin-password';
+
+test('dropping a sticker adds a row, and a wrong type is rejected without a request', async ({
+	page
+}) => {
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	const zone = page.locator('.upload-zone.multi');
+	await expect(zone).toBeVisible();
+
+	const drop = (name: string, type: string) =>
+		page.evaluate(
+			({ name, type }) => {
+				const dt = new DataTransfer();
+				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type }));
+				document
+					.querySelector('.upload-zone.multi')!
+					.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
+			},
+			{ name, type }
+		);
+
+	// Hydration-retry shape (see vr-admin-form.spec.ts): a drop dispatched before
+	// the attachment has run silently does nothing. The counter resets per try.
+	await expect(async () => {
+		uploads = 0;
+		// Empty type on purpose: a file manager often hands one over that way, so
+		// the accept string has to carry the extension as well as the MIME type.
+		await drop('sticker.png', '');
+		await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x.png', {
+			timeout: 2000
+		});
+		expect(uploads).toBe(1);
+	}).toPass({ timeout: 20_000 });
+
+	// The highlight class is set imperatively and matched by a :global() rule —
+	// assert the painted border changed, not just that the class landed.
+	const resting = await zone.evaluate((el) => getComputedStyle(el).borderColor);
+	await page.evaluate(() => {
+		document
+			.querySelector('.upload-zone.multi')!
+			.dispatchEvent(new DragEvent('dragover', { dataTransfer: new DataTransfer(), bubbles: true }));
+	});
+	await expect(zone).toHaveClass(/drag-over/);
+	await expect
+		.poll(() => zone.evaluate((el) => getComputedStyle(el).borderColor))
+		.not.toBe(resting);
+
+	// A dropped file skips the input's accept filter, so the zone rejects the
+	// wrong type itself: a toast naming the file, and no POST.
+	const before = uploads;
+	await drop('notes.txt', 'text/plain');
+	await expect(page.getByText(/Skipped notes\.txt/)).toBeVisible();
+	expect(uploads).toBe(before);
+});
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index c31105ae..4e2d9623 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -22,7 +22,7 @@ test('the create form renders its fields, dropzones and credit control', async (
 	await expect(page.locator('select[name="characterId"]')).toBeVisible();
 
 	// Model dropzone.
-	await expect(page.getByText(/Choose a \.vrm or \.fbx file to upload/)).toBeVisible();
+	await expect(page.getByText(/Drag & drop a \.vrm or \.fbx file here/)).toBeVisible();
 	// Format expectations under the dropzone (VR feedback round): which VRM
 	// versions the viewer takes, and that FBX is download-only.
 	await expect(page.getByText(/VRM 0\.x and 1\.0 both work in the 3D viewer/)).toBeVisible();
@@ -36,7 +36,7 @@ test('the create form renders its fields, dropzones and credit control', async (
 
 	// Showcase media manager (SP1) with its own dropzone.
 	await expect(page.getByRole('heading', { name: 'Showcase media' })).toBeVisible();
-	await expect(page.getByText(/Add screenshots or short \.webm clips/)).toBeVisible();
+	await expect(page.getByText(/Drag & drop screenshots or short \.webm clips here/)).toBeVisible();
 
 	// Credits editor entry point.
 	await expect(page.getByRole('button', { name: 'Add credit' })).toBeVisible();
@@ -179,7 +179,7 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	});
 
 	await page.goto('/admin/vr/new');
-	await expect(page.getByText(/Add screenshots or short \.webm clips/)).toBeVisible();
+	await expect(page.getByText(/Drag & drop screenshots or short \.webm clips here/)).toBeVisible();
 
 	// The browser can't be driven to drag a real file in, so build a DataTransfer
 	// in the page and dispatch the drop the attachment listens for.
@@ -203,8 +203,8 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 		await expect(page.locator('input[name="media[0][url]"]')).toHaveValue('/x.png', {
 			timeout: 2000
 		});
+		expect(uploads).toBe(1);
 	}).toPass({ timeout: 20_000 });
-	expect(uploads).toBe(1);
 
 	// A dropped file skips the input's accept filter, so the zone has to reject
 	// the wrong type itself: the bad-type banner, and no POST.
@@ -213,3 +213,68 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	await expect(page.getByText(/That file type isn't supported/)).toBeVisible();
 	expect(uploads).toBe(before);
 });
+
+test('dropping a model file on the model zone uploads one, and a wrong type is rejected without a request', async ({
+	page
+}) => {
+	await adminLogin(page, PASSWORD);
+
+	// Stubbed for the same reason as the media endpoint above: this spec shares a
+	// read-only server, so a real POST would leave a stored file behind.
+	let uploads = 0;
+	await page.route('**/api/admin/vr-model*', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/m.vrm', size: 4, format: 'vrm' })
+		});
+	});
+
+	await page.goto('/admin/vr/new');
+	// The model zone, not the showcase-media one — both carry .upload-zone.
+	const zone = page.locator('label.upload-zone:not(.media-zone)');
+	await expect(zone).toBeVisible();
+
+	// Files dropped from a file manager often arrive with an empty type, so the
+	// extension is all the accept match has to work from.
+	const drop = (names: string[]) =>
+		page.evaluate((names) => {
+			const dt = new DataTransfer();
+			for (const name of names)
+				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type: '' }));
+			document
+				.querySelector('label.upload-zone:not(.media-zone)')!
+				.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
+		}, names);
+
+	// Wrong type first: a successful drop swaps the zone for the model card, so
+	// this branch has to run while the zone is still on screen.
+	await expect(async () => {
+		uploads = 0;
+		await drop(['notes.txt']);
+		await expect(page.getByText(/That file doesn't look like a VRM or FBX model/)).toBeVisible({
+			timeout: 2000
+		});
+		expect(uploads).toBe(0);
+	}).toPass({ timeout: 20_000 });
+
+	// The highlight class is set imperatively and matched by a :global() rule —
+	// assert the painted border changed, not just that the class landed.
+	const resting = await zone.evaluate((el) => getComputedStyle(el).borderColor);
+	await page.evaluate(() => {
+		document
+			.querySelector('label.upload-zone:not(.media-zone)')!
+			.dispatchEvent(new DragEvent('dragover', { dataTransfer: new DataTransfer(), bubbles: true }));
+	});
+	await expect(zone).toHaveClass(/drag-over/);
+	await expect
+		.poll(() => zone.evaluate((el) => getComputedStyle(el).borderColor))
+		.not.toBe(resting);
+
+	// Two files, one model slot: only the first is uploaded, and only one
+	// request goes out.
+	const before = uploads;
+	await drop(['a.vrm', 'b.vrm']);
+	await expect(page.locator('.model-name')).toHaveText('a.vrm');
+	expect(uploads).toBe(before + 1);
+});

From 4c9c2c4c987661dffb0be1fc1b3a66455be29d07 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 14:14:25 -0700
Subject: [PATCH 03/33] fix(admin): ship round 2 fixes for drag-and-drop upload
 zones (SONA-216)

---
 messages/en.json                          |   3 +-
 messages/ja.json                          |   3 +-
 src/lib/components/StickerPackForm.svelte |  34 ++++++--
 src/lib/components/VrAvatarForm.svelte    |  47 ++++++----
 tests/e2e/drop-files.ts                   |  55 ++++++++++++
 tests/e2e/sticker-pack-form.spec.ts       |  62 +++++++-------
 tests/e2e/vr-admin-form.spec.ts           | 100 ++++++++++++++--------
 7 files changed, 207 insertions(+), 97 deletions(-)
 create mode 100644 tests/e2e/drop-files.ts

diff --git a/messages/en.json b/messages/en.json
index 89909647..f3b11544 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -855,7 +855,8 @@
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
 	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
-	"admin_pack_upload_bad_type": "Skipped {names}: that file type isn't supported. Add PNG or WebP images instead.",
+	"admin_pack_upload_bad_type": "Skipped {names}. Add PNG or WebP images instead.",
+	"admin_pack_upload_done": "{count} sticker(s) added",
 	"admin_pack_details": "Pack details",
 	"admin_pack_name": "Pack name",
 	"admin_pack_name_placeholder": "My sticker pack",
diff --git a/messages/ja.json b/messages/ja.json
index be6d6062..92072493 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -645,7 +645,8 @@
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
 	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
-	"admin_pack_upload_bad_type": "{names}はスキップしました。対応していないファイル形式です。PNGまたはWebPの画像を追加してください。",
+	"admin_pack_upload_bad_type": "{names}をスキップしました。PNGまたはWebPの画像を追加してください。",
+	"admin_pack_upload_done": "ステッカーを{count}件追加しました。",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
 	"admin_pack_name_placeholder": "マイステッカーセット",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 8b08856a..d7b64a12 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -105,12 +105,15 @@
 	);
 
 	// Shared by the file input and the drop attachment, so a drop accepts exactly
-	// what the picker offers. Extensions as well as MIME types: some platforms
-	// hand a dropped file over with an empty `type`, and the accept attribute
-	// takes both forms.
-	const STICKER_ACCEPT = 'image/png,image/webp,.png,.webp';
+	// what the picker offers. MIME types only: /api/upload validates the declared
+	// type and reads an empty one as application/octet-stream, so accepting a
+	// bare .png here would upload the whole file just to collect a 415.
+	const STICKER_ACCEPT = 'image/png,image/webp';
 
 	let uploading = $state(false);
+	// Upload start/done announcements for the stickers section's live region:
+	// the zone label and the new rows show both, but only visually.
+	let stickerStatus = $state('');
 	let published = $state(pack?.published ?? false);
 	let saving = $state(false);
 
@@ -139,10 +142,17 @@
 	// arrives from a drop — the input's accept attribute filters the picker, a
 	// drop skips it — and those files are reported without being uploaded.
 	async function addStickerFiles(files: File[], rejected: File[] = []) {
-		if (rejected.length)
-			toast.error(m.admin_pack_upload_bad_type({ names: rejected.map((f) => f.name).join(', ') }));
+		if (rejected.length) {
+			// Cap the list: a folder dropped whole would otherwise put dozens of
+			// names in one toast.
+			const shown = rejected.slice(0, 3).map((f) => f.name).join(', ');
+			toast.error(
+				m.admin_pack_upload_bad_type({ names: rejected.length > 3 ? `${shown}…` : shown })
+			);
+		}
 		if (!files.length) return;
 		uploading = true;
+		stickerStatus = m.admin_upload_uploading();
 		let ok = 0;
 		let failed = 0;
 		try {
@@ -173,6 +183,10 @@
 		}
 		// Keep the successful uploads; surface the failures without discarding them.
 		if (failed > 0) toast.error(m.admin_pack_upload_partial({ ok, total: files.length, failed }));
+		stickerStatus =
+			failed > 0
+				? m.admin_pack_upload_partial({ ok, total: files.length, failed })
+				: m.admin_pack_upload_done({ count: ok });
 	}
 
 	function removeSticker(i: number) {
@@ -331,6 +345,10 @@
 			<p class="hint">{m.admin_pack_edit_hint()}</p>
 		{/if}
 
+		<!-- Always-mounted live region (a region inserted together with its first
+		     content is often not announced): the zone label and the new rows
+		     report the upload visually only. -->
+		<span class="sr-only" role="status">{stickerStatus}</span>
 		<label
 			class="upload-zone multi"
 			{@attach dropFiles({
@@ -519,8 +537,8 @@
 	.upload-zone {
 		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
 		padding: 24px; border: 2px dashed var(--border); border-radius: var(--radius-s);
-		color: var(--muted-foreground); cursor: pointer; font-size: 13px; transition: border-color 0.15s;
-		min-height: 80px;
+		color: var(--muted-foreground); cursor: pointer; font-size: 13px;
+		transition: border-color 0.15s, background 0.15s; min-height: 80px;
 	}
 	.upload-zone.multi { width: 100%; }
 	.upload-zone:hover { border-color: var(--primary); }
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index b6ea9545..83649ed5 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -212,10 +212,10 @@
 		mediaEntries = mediaEntries.filter((_, idx) => idx !== i);
 	}
 
-	// Extensions as well as MIME types: some platforms hand a dropped file over
-	// with an empty `type`, and the picker's accept attribute takes both forms.
-	const MEDIA_ACCEPT =
-		'image/jpeg,image/png,image/gif,image/webp,image/avif,video/webm,.jpg,.jpeg,.png,.gif,.webp,.avif,.webm';
+	// MIME types only: /api/upload validates the declared type and reads an empty
+	// one as application/octet-stream, so accepting a bare .png here would upload
+	// the whole file just to collect a 415.
+	const MEDIA_ACCEPT = 'image/jpeg,image/png,image/gif,image/webp,image/avif,video/webm';
 	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
 	const MAX_MEDIA_BYTES = MAX_BUFFER_BYTES;
 
@@ -231,7 +231,6 @@
 	// arrives from a drop — the input's accept attribute filters the picker, a
 	// drop skips it — and those files are reported without being uploaded.
 	async function uploadMedia(files: File[], rejected: File[] = []) {
-		if (!files.length && !rejected.length) return;
 		mediaErrors = rejected.map((file) => ({
 			uid: mediaErrorUid++,
 			name: file.name,
@@ -335,6 +334,10 @@
 	// Bumped on every error so {#key} remounts the role="alert" banner: setting
 	// uploadError to the value it already holds would otherwise announce nothing.
 	let uploadErrorUid = $state(0);
+	function setUploadError(kind: 'too-large' | 'bad-type' | 'failed') {
+		uploadError = kind;
+		uploadErrorUid++;
+	}
 	let errorFileSize = $state(0);
 
 	// Live-region text for the model upload, throttled to 10% steps so a screen
@@ -363,10 +366,7 @@
 	function onModelDropped(files: File[], rejected: File[]) {
 		if (files.length) uploadModel(files[0]);
 		// Wrong extension: the same banner modelFileError would raise, no request.
-		else if (rejected.length) {
-			uploadError = 'bad-type';
-			uploadErrorUid++;
-		}
+		else if (rejected.length) setUploadError('bad-type');
 	}
 
 	function uploadModel(file: File) {
@@ -376,8 +376,7 @@
 		const fileError = modelFileError(file);
 		if (fileError) {
 			if (fileError === 'too-large') errorFileSize = file.size;
-			uploadError = fileError;
-			uploadErrorUid++;
+			setUploadError(fileError);
 			return;
 		}
 		uploading = true;
@@ -406,18 +405,16 @@
 			}
 			if (xhr.status === 413) {
 				errorFileSize = file.size;
-				uploadError = 'too-large';
+				setUploadError('too-large');
 			} else if (xhr.status === 415) {
-				uploadError = 'bad-type';
+				setUploadError('bad-type');
 			} else {
-				uploadError = 'failed';
+				setUploadError('failed');
 			}
-			uploadErrorUid++;
 		};
 		xhr.onerror = () => {
 			uploading = false;
-			uploadError = 'failed';
-			uploadErrorUid++;
+			setUploadError('failed');
 		};
 		xhr.send(file);
 	}
@@ -606,7 +603,15 @@
 		     content is often not announced); text updates in 10% steps. -->
 		<span class="sr-only" role="status">{uploadAnnouncement}</span>
 		{#if uploading}
-			<div class="upload-progress">
+			<!-- Swallow-only drop target: this bar takes the zone's place while the
+			     upload runs, and with nothing preventing the default a second drop
+			     here navigates the tab to the file and loses the form. Attached to
+			     the bar rather than the whole section so the live zone's own
+			     dropEffect isn't overridden as the event bubbles. -->
+			<div
+				class="upload-progress"
+				{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: () => {}, disabled: () => true })}
+			>
 				<div class="progress-bar">
 					<div class="progress-fill" style="width: {uploadTotal > 0 ? (uploadLoaded / uploadTotal) * 100 : 0}%"></div>
 				</div>
@@ -1086,7 +1091,7 @@
 		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
 		padding: 28px 24px; border: 2px dashed var(--border); border-radius: var(--radius-s);
 		color: var(--muted-foreground); cursor: pointer; font-size: 13px; text-align: center;
-		transition: border-color 0.15s; min-height: 88px;
+		transition: border-color 0.15s, background 0.15s; min-height: 88px;
 	}
 	.upload-zone:hover { border-color: var(--primary); }
 	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
@@ -1096,6 +1101,9 @@
 	   to preventDefault, or a drop while uploading navigates away from the form.
 	   The nested input's own disabled attribute keeps clicks inert. */
 	.upload-zone.disabled { opacity: 0.55; cursor: not-allowed; }
+	/* Keeping pointer events also keeps :hover alive, so hold the resting border
+	   while the zone is busy rather than inviting a click it won't take. */
+	.upload-zone.disabled:hover { border-color: var(--border); }
 	.sr-file { position: absolute; opacity: 0; width: 0; height: 0; }
 	/* The hidden file inputs stay keyboard-focusable — surface focus on their
 	   visible hosts (same :has pattern as .platform-chip). */
@@ -1137,6 +1145,7 @@
 		display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px;
 		border: 1px solid var(--border); border-radius: var(--radius-xs);
 		background: var(--secondary); color: var(--foreground); cursor: pointer; flex-direction: row;
+		transition: border-color 0.15s, background 0.15s;
 	}
 	.btn-sm:hover { border-color: var(--primary); }
 	.btn-sm:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--secondary)); }
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
new file mode 100644
index 00000000..b34c8c51
--- /dev/null
+++ b/tests/e2e/drop-files.ts
@@ -0,0 +1,55 @@
+import { expect, type Page } from '@playwright/test';
+
+// Shared drag-and-drop steps for the admin upload-zone specs (SONA-216). The
+// browser can't be driven to drag a real file in, so both specs build a
+// DataTransfer inside the page and dispatch the events the drop attachment
+// listens for.
+
+/**
+ * Dispatch a `drop` carrying `files` on the first element matching `selector`,
+ * and report whether a handler cancelled it.
+ *
+ * The events are `cancelable` because preventDefault is the whole point: it is
+ * the only thing standing between a dropped file and the browser navigating the
+ * tab to it. A dispatched (untrusted) DragEvent never navigates on its own, so
+ * the return value is how a swallow-only target can be asserted at all.
+ */
+export function dropOn(page: Page, selector: string, files: { name: string; type: string }[]) {
+	return page.evaluate(
+		({ selector, files }) => {
+			const dt = new DataTransfer();
+			for (const f of files)
+				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], f.name, { type: f.type }));
+			return !document.querySelector(selector)!.dispatchEvent(
+				new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true })
+			);
+		},
+		{ selector, files }
+	);
+}
+
+/** Dispatch a `dragover` on the first element matching `selector`. */
+export function dragOver(page: Page, selector: string) {
+	return page.evaluate((selector) => {
+		document.querySelector(selector)!.dispatchEvent(
+			new DragEvent('dragover', {
+				dataTransfer: new DataTransfer(),
+				bubbles: true,
+				cancelable: true
+			})
+		);
+	}, selector);
+}
+
+/**
+ * A dragover must both set the class and repaint the zone. The class is set
+ * imperatively and matched by a `:global()` rule, so assert the painted border
+ * changed too — the class landing alone would pass with the rule deleted.
+ */
+export async function expectDragOverHighlight(page: Page, selector: string) {
+	const zone = page.locator(selector);
+	const resting = await zone.evaluate((el) => getComputedStyle(el).borderColor);
+	await dragOver(page, selector);
+	await expect(zone).toHaveClass(/drag-over/);
+	await expect.poll(() => zone.evaluate((el) => getComputedStyle(el).borderColor)).not.toBe(resting);
+}
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index 14b2c5bf..9ceb10df 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { adminLogin } from './admin-login';
+import { dropOn, expectDragOverHighlight } from './drop-files';
 
 // Sticker-pack form drop zone (SONA-216). Like vr-admin-form.spec.ts this runs
 // on the SHARED read-only DB/server under fullyParallel: it drops files onto the
@@ -9,6 +10,8 @@ import { adminLogin } from './admin-login';
 // Matches ADMIN_PASSWORD in tests/e2e/wrangler.e2e.toml (throwaway local value).
 const PASSWORD = 'e2e-admin-password';
 
+const ZONE = '.upload-zone.multi';
+
 test('dropping a sticker adds a row, and a wrong type is rejected without a request', async ({
 	page
 }) => {
@@ -24,51 +27,50 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	});
 
 	await page.goto('/admin/stickers/manual');
-	const zone = page.locator('.upload-zone.multi');
+	const zone = page.locator(ZONE);
 	await expect(zone).toBeVisible();
 
-	const drop = (name: string, type: string) =>
-		page.evaluate(
-			({ name, type }) => {
-				const dt = new DataTransfer();
-				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type }));
-				document
-					.querySelector('.upload-zone.multi')!
-					.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
-			},
-			{ name, type }
-		);
-
 	// Hydration-retry shape (see vr-admin-form.spec.ts): a drop dispatched before
 	// the attachment has run silently does nothing. The counter resets per try.
 	await expect(async () => {
 		uploads = 0;
-		// Empty type on purpose: a file manager often hands one over that way, so
-		// the accept string has to carry the extension as well as the MIME type.
-		await drop('sticker.png', '');
+		await dropOn(page, ZONE, [{ name: 'sticker.png', type: 'image/png' }]);
 		await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x.png', {
 			timeout: 2000
 		});
 		expect(uploads).toBe(1);
 	}).toPass({ timeout: 20_000 });
 
-	// The highlight class is set imperatively and matched by a :global() rule —
-	// assert the painted border changed, not just that the class landed.
-	const resting = await zone.evaluate((el) => getComputedStyle(el).borderColor);
-	await page.evaluate(() => {
-		document
-			.querySelector('.upload-zone.multi')!
-			.dispatchEvent(new DragEvent('dragover', { dataTransfer: new DataTransfer(), bubbles: true }));
-	});
-	await expect(zone).toHaveClass(/drag-over/);
-	await expect
-		.poll(() => zone.evaluate((el) => getComputedStyle(el).borderColor))
-		.not.toBe(resting);
+	await expectDragOverHighlight(page, ZONE);
 
 	// A dropped file skips the input's accept filter, so the zone rejects the
 	// wrong type itself: a toast naming the file, and no POST.
 	const before = uploads;
-	await drop('notes.txt', 'text/plain');
-	await expect(page.getByText(/Skipped notes\.txt/)).toBeVisible();
+	await dropOn(page, ZONE, [{ name: 'notes.txt', type: 'text/plain' }]);
+	await expect(page.getByText('Skipped notes.txt. Add PNG or WebP images instead.')).toBeVisible();
 	expect(uploads).toBe(before);
 });
+
+test('the sticker upload zone is reachable by keyboard and shows a focus ring', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+	await page.goto('/admin/stickers/manual');
+	await expect(page.locator(ZONE)).toBeVisible();
+
+	// The file input is visually hidden, so nothing but the zone's own ring tells
+	// a keyboard user where focus is. Tab there for real: :focus-visible does not
+	// match a programmatic .focus(), which would make the ring assertion vacuous.
+	const input = `${ZONE} input[type="file"]`;
+	await page.locator('input[name="name"]').focus();
+	let reached = false;
+	for (let i = 0; i < 30 && !reached; i++) {
+		await page.keyboard.press('Tab');
+		reached = await page.evaluate(
+			(sel) => document.activeElement === document.querySelector(sel),
+			input
+		);
+	}
+	expect(reached).toBe(true);
+	expect(await page.locator(ZONE).evaluate((el) => getComputedStyle(el).outlineWidth)).not.toBe(
+		'0px'
+	);
+});
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 4e2d9623..942d7425 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { adminLogin } from './admin-login';
+import { dropOn, dragOver, expectDragOverHighlight } from './drop-files';
 
 // VR avatar admin form smoke (SONA-124, T1): VrAvatarForm and the /admin/vr/new
 // page never executed in any test before this. (The SONA-124 early-access gate
@@ -169,9 +170,13 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 
 	// Stub the upload endpoint: this spec shares a read-only server with the rest
 	// of the suite, so a real POST would leave an orphaned stored file behind.
+	// `hold`, when set, keeps a request in flight so the busy zone can be probed.
 	let uploads = 0;
+	let hold: Promise<void> | null = null;
+	let release = () => {};
 	await page.route('**/api/upload', async (route) => {
 		uploads++;
+		if (hold) await hold;
 		await route.fulfill({
 			contentType: 'application/json',
 			body: JSON.stringify({ url: '/x.png' })
@@ -181,25 +186,11 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	await page.goto('/admin/vr/new');
 	await expect(page.getByText(/Drag & drop screenshots or short \.webm clips here/)).toBeVisible();
 
-	// The browser can't be driven to drag a real file in, so build a DataTransfer
-	// in the page and dispatch the drop the attachment listens for.
-	const drop = (name: string, type: string) =>
-		page.evaluate(
-			({ name, type }) => {
-				const dt = new DataTransfer();
-				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type }));
-				document
-					.querySelector('.media-zone')!
-					.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
-			},
-			{ name, type }
-		);
-
 	// Hydration-retry shape (see upload.spec.ts): a drop dispatched before the
 	// attachment has run silently does nothing. The counter resets per attempt.
 	await expect(async () => {
 		uploads = 0;
-		await drop('shot.png', 'image/png');
+		await dropOn(page, '.media-zone', [{ name: 'shot.png', type: 'image/png' }]);
 		await expect(page.locator('input[name="media[0][url]"]')).toHaveValue('/x.png', {
 			timeout: 2000
 		});
@@ -209,9 +200,23 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	// A dropped file skips the input's accept filter, so the zone has to reject
 	// the wrong type itself: the bad-type banner, and no POST.
 	const before = uploads;
-	await drop('notes.txt', 'text/plain');
+	await dropOn(page, '.media-zone', [{ name: 'notes.txt', type: 'text/plain' }]);
 	await expect(page.getByText(/That file type isn't supported/)).toBeVisible();
 	expect(uploads).toBe(before);
+
+	// While an upload runs the zone dims, but it must keep receiving pointer and
+	// drag events: `pointer-events: none` on .disabled would let the next drop
+	// reach the document and navigate the tab to the file. It still refuses the
+	// drop — no highlight — it just has to be the one refusing.
+	hold = new Promise<void>((resolve) => (release = resolve));
+	await dropOn(page, '.media-zone', [{ name: 'slow.png', type: 'image/png' }]);
+	const busy = page.locator('.media-zone.disabled');
+	await expect(busy).toBeVisible();
+	expect(await busy.evaluate((el) => getComputedStyle(el).pointerEvents)).not.toBe('none');
+	await dragOver(page, '.media-zone');
+	await expect(busy).not.toHaveClass(/drag-over/);
+	release();
+	await expect(page.locator('.media-zone.disabled')).toHaveCount(0);
 });
 
 test('dropping a model file on the model zone uploads one, and a wrong type is rejected without a request', async ({
@@ -221,9 +226,14 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 
 	// Stubbed for the same reason as the media endpoint above: this spec shares a
 	// read-only server, so a real POST would leave a stored file behind.
+	// `hold`, when set, keeps a request in flight so the progress bar can be
+	// probed while it is on screen.
 	let uploads = 0;
+	let hold: Promise<void> | null = null;
+	let release = () => {};
 	await page.route('**/api/admin/vr-model*', async (route) => {
 		uploads++;
+		if (hold) await hold;
 		await route.fulfill({
 			contentType: 'application/json',
 			body: JSON.stringify({ url: '/m.vrm', size: 4, format: 'vrm' })
@@ -232,20 +242,20 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 
 	await page.goto('/admin/vr/new');
 	// The model zone, not the showcase-media one — both carry .upload-zone.
-	const zone = page.locator('label.upload-zone:not(.media-zone)');
+	const MODEL_ZONE = 'label.upload-zone:not(.media-zone)';
+	const zone = page.locator(MODEL_ZONE);
 	await expect(zone).toBeVisible();
 
 	// Files dropped from a file manager often arrive with an empty type, so the
-	// extension is all the accept match has to work from.
+	// extension is all the accept match has to work from. That is safe here and
+	// not on the media zone: this endpoint keys off the filename, /api/upload
+	// off the declared MIME type.
 	const drop = (names: string[]) =>
-		page.evaluate((names) => {
-			const dt = new DataTransfer();
-			for (const name of names)
-				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type: '' }));
-			document
-				.querySelector('label.upload-zone:not(.media-zone)')!
-				.dispatchEvent(new DragEvent('drop', { dataTransfer: dt, bubbles: true }));
-		}, names);
+		dropOn(
+			page,
+			MODEL_ZONE,
+			names.map((name) => ({ name, type: '' }))
+		);
 
 	// Wrong type first: a successful drop swaps the zone for the model card, so
 	// this branch has to run while the zone is still on screen.
@@ -258,18 +268,16 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 		expect(uploads).toBe(0);
 	}).toPass({ timeout: 20_000 });
 
-	// The highlight class is set imperatively and matched by a :global() rule —
-	// assert the painted border changed, not just that the class landed.
-	const resting = await zone.evaluate((el) => getComputedStyle(el).borderColor);
-	await page.evaluate(() => {
-		document
-			.querySelector('label.upload-zone:not(.media-zone)')!
-			.dispatchEvent(new DragEvent('dragover', { dataTransfer: new DataTransfer(), bubbles: true }));
-	});
-	await expect(zone).toHaveClass(/drag-over/);
-	await expect
-		.poll(() => zone.evaluate((el) => getComputedStyle(el).borderColor))
-		.not.toBe(resting);
+	// The same error twice: the banner is remounted per error, because a screen
+	// reader announces role="alert" on insertion only — leaving the first node in
+	// place would make the second drop silent. Tag the node, then prove the tag
+	// (and so the node) is gone.
+	await page.locator('.banner.err').evaluate((el) => el.setAttribute('data-first-error', ''));
+	await drop(['notes.txt']);
+	await expect(page.locator('.banner.err[data-first-error]')).toHaveCount(0);
+	await expect(page.getByText(/That file doesn't look like a VRM or FBX model/)).toBeVisible();
+
+	await expectDragOverHighlight(page, MODEL_ZONE);
 
 	// Two files, one model slot: only the first is uploaded, and only one
 	// request goes out.
@@ -277,4 +285,20 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	await drop(['a.vrm', 'b.vrm']);
 	await expect(page.locator('.model-name')).toHaveText('a.vrm');
 	expect(uploads).toBe(before + 1);
+
+	// While an upload runs the progress bar takes the zone's place. It has no
+	// picker of its own, but it still has to swallow a drop: nothing cancels the
+	// event otherwise and the browser navigates the tab to the dropped file,
+	// losing the form. dropOn reports whether preventDefault was called, which is
+	// the cancellation itself — a dispatched DragEvent never navigates on its own.
+	hold = new Promise<void>((resolve) => (release = resolve));
+	const url = page.url();
+	const during = uploads;
+	await dropOn(page, 'label.btn-sm', [{ name: 'c.vrm', type: '' }]);
+	await expect(page.locator('.upload-progress')).toBeVisible();
+	expect(await dropOn(page, '.upload-progress', [{ name: 'd.vrm', type: '' }])).toBe(true);
+	expect(uploads).toBe(during + 1);
+	expect(page.url()).toBe(url);
+	release();
+	await expect(page.locator('.model-name')).toHaveText('c.vrm');
 });

From 497168a849b40c6c588806f4f95b1bfe841b1ea0 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 14:43:17 -0700
Subject: [PATCH 04/33] fix(admin): ship round 3 fixes for drag-and-drop upload
 zones (SONA-216)

---
 messages/en.json                          | 17 ++++++++++++-
 messages/ja.json                          |  3 ++-
 src/lib/components/StickerPackForm.svelte | 26 ++++++++++++--------
 src/lib/components/VrAvatarForm.svelte    | 14 ++++++-----
 tests/e2e/sticker-pack-form.spec.ts       | 30 ++++++++++++++++++++---
 tests/e2e/vr-admin-form.spec.ts           | 12 +++++++++
 6 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index f3b11544..67b3da18 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -856,7 +856,22 @@
 	"admin_pack_edit_heading": "Edit pack: {name}",
 	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
 	"admin_pack_upload_bad_type": "Skipped {names}. Add PNG or WebP images instead.",
-	"admin_pack_upload_done": "{count} sticker(s) added",
+	"admin_pack_upload_bad_type_many": "Skipped {count} files. Add PNG or WebP images instead.",
+	"admin_pack_upload_done": [
+		{
+			"declarations": [
+				"input count",
+				"local countPlural = count: plural"
+			],
+			"selectors": [
+				"countPlural"
+			],
+			"match": {
+				"countPlural=one": "1 sticker added",
+				"countPlural=other": "{count} stickers added"
+			}
+		}
+	],
 	"admin_pack_details": "Pack details",
 	"admin_pack_name": "Pack name",
 	"admin_pack_name_placeholder": "My sticker pack",
diff --git a/messages/ja.json b/messages/ja.json
index 92072493..a8c5a77b 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -646,7 +646,8 @@
 	"admin_pack_edit_heading": "セットを編集: {name}",
 	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
 	"admin_pack_upload_bad_type": "{names}をスキップしました。PNGまたはWebPの画像を追加してください。",
-	"admin_pack_upload_done": "ステッカーを{count}件追加しました。",
+	"admin_pack_upload_bad_type_many": "{count}件のファイルをスキップしました。PNGまたはWebPの画像を追加してください。",
+	"admin_pack_upload_done": "ステッカーを{count}枚追加しました",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
 	"admin_pack_name_placeholder": "マイステッカーセット",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index d7b64a12..5ba09461 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -144,10 +144,12 @@
 	async function addStickerFiles(files: File[], rejected: File[] = []) {
 		if (rejected.length) {
 			// Cap the list: a folder dropped whole would otherwise put dozens of
-			// names in one toast.
-			const shown = rejected.slice(0, 3).map((f) => f.name).join(', ');
+			// names in one toast. Past three, a count reads better than three names
+			// and a trailing ellipsis.
 			toast.error(
-				m.admin_pack_upload_bad_type({ names: rejected.length > 3 ? `${shown}…` : shown })
+				rejected.length > 3
+					? m.admin_pack_upload_bad_type_many({ count: rejected.length })
+					: m.admin_pack_upload_bad_type({ names: rejected.map((f) => f.name).join(', ') })
 			);
 		}
 		if (!files.length) return;
@@ -171,7 +173,10 @@
 						artistId: '',
 						emojis: '',
 						nsfw: false,
-						format: file.name.endsWith('.png') ? 'png' : 'webp'
+						// From the MIME type, not the name: a dropped file may have no
+						// extension or an uppercase one, and STICKER_ACCEPT admits
+						// MIME types only, so `type` is always one of the two here.
+						format: file.type === 'image/png' ? 'png' : 'webp'
 					});
 				} else {
 					failed++;
@@ -180,13 +185,14 @@
 			stickerEntries = [...stickerEntries];
 		} finally {
 			uploading = false;
+			// Alongside clearing `uploading`, so a throw can't strand the region on
+			// "Uploading…". Always the done count, even on a partial failure: the
+			// toast is a live region too, and repeating the failure here reads it
+			// out twice.
+			stickerStatus = m.admin_pack_upload_done({ count: ok });
 		}
 		// Keep the successful uploads; surface the failures without discarding them.
 		if (failed > 0) toast.error(m.admin_pack_upload_partial({ ok, total: files.length, failed }));
-		stickerStatus =
-			failed > 0
-				? m.admin_pack_upload_partial({ ok, total: files.length, failed })
-				: m.admin_pack_upload_done({ count: ok });
 	}
 
 	function removeSticker(i: number) {
@@ -538,7 +544,7 @@
 		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
 		padding: 24px; border: 2px dashed var(--border); border-radius: var(--radius-s);
 		color: var(--muted-foreground); cursor: pointer; font-size: 13px;
-		transition: border-color 0.15s, background 0.15s; min-height: 80px;
+		transition: border-color 0.15s, background-color 0.15s, opacity 0.15s; min-height: 80px;
 	}
 	.upload-zone.multi { width: 100%; }
 	.upload-zone:hover { border-color: var(--primary); }
@@ -549,7 +555,7 @@
 	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
 	   as the upload page's dropzone. :global because the drop attachment sets the
 	   class imperatively, so Svelte can't see it in the markup. */
-	.upload-zone:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
 	.remove-btn {
 		display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
 		background: none; color: var(--muted-foreground); border: 1px solid var(--border);
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 83649ed5..bc4ead9e 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -607,10 +607,12 @@
 			     upload runs, and with nothing preventing the default a second drop
 			     here navigates the tab to the file and loses the form. Attached to
 			     the bar rather than the whole section so the live zone's own
-			     dropEffect isn't overridden as the event bubbles. -->
+			     dropEffect isn't overridden as the event bubbles. Empty accept
+			     because nothing is filtered: disabled means the drop is swallowed
+			     before any file is looked at. -->
 			<div
 				class="upload-progress"
-				{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: () => {}, disabled: () => true })}
+				{@attach dropFiles({ accept: '', onFiles: () => {}, disabled: () => true })}
 			>
 				<div class="progress-bar">
 					<div class="progress-fill" style="width: {uploadTotal > 0 ? (uploadLoaded / uploadTotal) * 100 : 0}%"></div>
@@ -1091,12 +1093,12 @@
 		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
 		padding: 28px 24px; border: 2px dashed var(--border); border-radius: var(--radius-s);
 		color: var(--muted-foreground); cursor: pointer; font-size: 13px; text-align: center;
-		transition: border-color 0.15s, background 0.15s; min-height: 88px;
+		transition: border-color 0.15s, background-color 0.15s, opacity 0.15s; min-height: 88px;
 	}
 	.upload-zone:hover { border-color: var(--primary); }
 	/* Highlight while a file is dragged over the zone (SONA-216) — same treatment
 	   as the upload page's dropzone. The class is set by the drop attachment. */
-	.upload-zone:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
+	.upload-zone:global(.drag-over) { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
 	/* No pointer-events: none — the drop attachment has to receive dragover/drop
 	   to preventDefault, or a drop while uploading navigates away from the form.
 	   The nested input's own disabled attribute keeps clicks inert. */
@@ -1145,10 +1147,10 @@
 		display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px;
 		border: 1px solid var(--border); border-radius: var(--radius-xs);
 		background: var(--secondary); color: var(--foreground); cursor: pointer; flex-direction: row;
-		transition: border-color 0.15s, background 0.15s;
+		transition: border-color 0.15s, background-color 0.15s;
 	}
 	.btn-sm:hover { border-color: var(--primary); }
-	.btn-sm:global(.drag-over) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--secondary)); }
+	.btn-sm:global(.drag-over) { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 8%, var(--secondary)); }
 
 	/* Showcase media rows (same row chrome as the credit list). */
 	.media-list { display: flex; flex-direction: column; gap: 10px; }
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index 9ceb10df..7cef3afb 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -17,9 +17,14 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 }) => {
 	await adminLogin(page, PASSWORD);
 
+	// `hold`, when set, keeps a request in flight so the "Uploading…" state can be
+	// read off the live region before the done message replaces it.
 	let uploads = 0;
+	let hold: Promise<void> | null = null;
+	let release = () => {};
 	await page.route('**/api/upload', async (route) => {
 		uploads++;
+		if (hold) await hold;
 		await route.fulfill({
 			contentType: 'application/json',
 			body: JSON.stringify({ url: '/x.png' })
@@ -29,17 +34,26 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	await page.goto('/admin/stickers/manual');
 	const zone = page.locator(ZONE);
 	await expect(zone).toBeVisible();
+	// The stickers section's always-mounted live region.
+	const status = page.locator('span.sr-only[role="status"]');
 
 	// Hydration-retry shape (see vr-admin-form.spec.ts): a drop dispatched before
 	// the attachment has run silently does nothing. The counter resets per try.
+	hold = new Promise<void>((resolve) => (release = resolve));
 	await expect(async () => {
 		uploads = 0;
 		await dropOn(page, ZONE, [{ name: 'sticker.png', type: 'image/png' }]);
-		await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x.png', {
-			timeout: 2000
-		});
+		// The held request keeps the zone busy, so a drop that landed shows up as
+		// the in-progress announcement rather than a finished row.
+		await expect(status).toHaveText('Uploading...', { timeout: 2000 });
 		expect(uploads).toBe(1);
 	}).toPass({ timeout: 20_000 });
+	release();
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x.png');
+	// …and the same region reports the finish, as a real plural rather than
+	// "1 sticker(s) added".
+	await expect(status).toHaveText('1 sticker added');
+	hold = null;
 
 	await expectDragOverHighlight(page, ZONE);
 
@@ -49,6 +63,16 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	await dropOn(page, ZONE, [{ name: 'notes.txt', type: 'text/plain' }]);
 	await expect(page.getByText('Skipped notes.txt. Add PNG or WebP images instead.')).toBeVisible();
 	expect(uploads).toBe(before);
+
+	// Past three rejects the toast switches to a count: a folder dropped whole
+	// would otherwise be a wall of names ending in an ellipsis.
+	await dropOn(
+		page,
+		ZONE,
+		['a.txt', 'b.txt', 'c.txt', 'd.txt'].map((name) => ({ name, type: 'text/plain' }))
+	);
+	await expect(page.getByText('Skipped 4 files. Add PNG or WebP images instead.')).toBeVisible();
+	expect(uploads).toBe(before);
 });
 
 test('the sticker upload zone is reachable by keyboard and shows a focus ring', async ({ page }) => {
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 942d7425..9467d8ec 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -209,12 +209,24 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	// reach the document and navigate the tab to the file. It still refuses the
 	// drop — no highlight — it just has to be the one refusing.
 	hold = new Promise<void>((resolve) => (release = resolve));
+	// Resting border, read while the zone is idle: keeping pointer events also
+	// keeps :hover alive, so the busy zone must hold this colour instead of
+	// lighting up primary as if it would take a click.
+	const restingBorder = await page
+		.locator('.media-zone')
+		.evaluate((el) => getComputedStyle(el).borderColor);
 	await dropOn(page, '.media-zone', [{ name: 'slow.png', type: 'image/png' }]);
 	const busy = page.locator('.media-zone.disabled');
 	await expect(busy).toBeVisible();
 	expect(await busy.evaluate((el) => getComputedStyle(el).pointerEvents)).not.toBe('none');
 	await dragOver(page, '.media-zone');
 	await expect(busy).not.toHaveClass(/drag-over/);
+	await busy.hover();
+	// Past the zone's 0.15s border-color transition: read any sooner and a border
+	// that IS heading for primary still measures as the resting colour, which
+	// would make the assertion below pass either way (mutation-checked).
+	await page.waitForTimeout(400);
+	expect(await busy.evaluate((el) => getComputedStyle(el).borderColor)).toBe(restingBorder);
 	release();
 	await expect(page.locator('.media-zone.disabled')).toHaveCount(0);
 });

From 6c88420f3b2cdc86382e5769538a5a7a1e6fb6c5 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:03:33 -0700
Subject: [PATCH 05/33] fix(admin): ship round 4 fixes for drag-and-drop upload
 zones (SONA-216)

---
 messages/en.json                          |   3 +-
 messages/ja.json                          |   1 +
 src/lib/components/StickerPackForm.svelte |  13 ++-
 tests/e2e/drop-files.ts                   |  17 +++
 tests/e2e/sticker-pack-form.spec.ts       | 124 +++++++++++++++++++++-
 5 files changed, 154 insertions(+), 4 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 67b3da18..8ccf7931 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -857,6 +857,7 @@
 	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
 	"admin_pack_upload_bad_type": "Skipped {names}. Add PNG or WebP images instead.",
 	"admin_pack_upload_bad_type_many": "Skipped {count} files. Add PNG or WebP images instead.",
+	"admin_pack_upload_none": "No stickers added",
 	"admin_pack_upload_done": [
 		{
 			"declarations": [
@@ -867,7 +868,7 @@
 				"countPlural"
 			],
 			"match": {
-				"countPlural=one": "1 sticker added",
+				"countPlural=one": "{count} sticker added",
 				"countPlural=other": "{count} stickers added"
 			}
 		}
diff --git a/messages/ja.json b/messages/ja.json
index a8c5a77b..7dc6a89a 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -647,6 +647,7 @@
 	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
 	"admin_pack_upload_bad_type": "{names}をスキップしました。PNGまたはWebPの画像を追加してください。",
 	"admin_pack_upload_bad_type_many": "{count}件のファイルをスキップしました。PNGまたはWebPの画像を追加してください。",
+	"admin_pack_upload_none": "ステッカーは追加されませんでした",
 	"admin_pack_upload_done": "ステッカーを{count}枚追加しました",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 5ba09461..4c783d31 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -188,8 +188,9 @@
 			// Alongside clearing `uploading`, so a throw can't strand the region on
 			// "Uploading…". Always the done count, even on a partial failure: the
 			// toast is a live region too, and repeating the failure here reads it
-			// out twice.
-			stickerStatus = m.admin_pack_upload_done({ count: ok });
+			// out twice. When every upload failed, "0 stickers added" is a count of
+			// nothing — say so in words instead.
+			stickerStatus = ok === 0 ? m.admin_pack_upload_none() : m.admin_pack_upload_done({ count: ok });
 		}
 		// Keep the successful uploads; surface the failures without discarding them.
 		if (failed > 0) toast.error(m.admin_pack_upload_partial({ ok, total: files.length, failed }));
@@ -357,6 +358,7 @@
 		<span class="sr-only" role="status">{stickerStatus}</span>
 		<label
 			class="upload-zone multi"
+			class:disabled={uploading}
 			{@attach dropFiles({
 				accept: STICKER_ACCEPT,
 				onFiles: addStickerFiles,
@@ -556,6 +558,13 @@
 	   as the upload page's dropzone. :global because the drop attachment sets the
 	   class imperatively, so Svelte can't see it in the markup. */
 	.upload-zone:global(.drag-over) { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
+	/* No pointer-events: none — the drop attachment has to receive dragover/drop
+	   to preventDefault, or a drop while uploading navigates away from the form.
+	   The nested input's own disabled attribute keeps clicks inert. */
+	.upload-zone.disabled { opacity: 0.55; cursor: not-allowed; }
+	/* Keeping pointer events also keeps :hover alive, so hold the resting border
+	   while the zone is busy rather than inviting a click it won't take. */
+	.upload-zone.disabled:hover { border-color: var(--border); }
 	.remove-btn {
 		display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
 		background: none; color: var(--muted-foreground); border: 1px solid var(--border);
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index b34c8c51..0d23d1e3 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -41,6 +41,23 @@ export function dragOver(page: Page, selector: string) {
 	}, selector);
 }
 
+/**
+ * Wait until the drop attachment is live on `selector`.
+ *
+ * The attachment runs at hydration, and a drop dispatched before that silently
+ * does nothing. dragover is the safe probe: retrying it can't add a row the way
+ * a retried drop can.
+ */
+export async function waitForDropAttachment(page: Page, selector: string) {
+	await expect(async () => {
+		await dragOver(page, selector);
+		await expect(page.locator(selector)).toHaveClass(/drag-over/, { timeout: 1000 });
+	}).toPass({ timeout: 20_000 });
+	// Leave the zone at rest — the class only clears on dragleave or drop.
+	await page.locator(selector).dispatchEvent('dragleave');
+	await expect(page.locator(selector)).not.toHaveClass(/drag-over/);
+}
+
 /**
  * A dragover must both set the class and repaint the zone. The class is set
  * imperatively and matched by a `:global()` rule, so assert the painted border
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index 7cef3afb..f182e6f2 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -1,6 +1,11 @@
 import { test, expect } from '@playwright/test';
 import { adminLogin } from './admin-login';
-import { dropOn, expectDragOverHighlight } from './drop-files';
+import {
+	dropOn,
+	dragOver,
+	expectDragOverHighlight,
+	waitForDropAttachment
+} from './drop-files';
 
 // Sticker-pack form drop zone (SONA-216). Like vr-admin-form.spec.ts this runs
 // on the SHARED read-only DB/server under fullyParallel: it drops files onto the
@@ -98,3 +103,120 @@ test('the sticker upload zone is reachable by keyboard and shows a focus ring',
 		'0px'
 	);
 });
+
+test('the sticker format comes from the MIME type, not the file name', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	let calls = 0;
+	await page.route('**/api/upload', async (route) => {
+		calls++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${calls}.png` })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	const status = page.locator('span.sr-only[role="status"]');
+	await waitForDropAttachment(page, ZONE);
+
+	// An uppercase extension and no extension at all: both are ordinary for a
+	// dropped file, and both defeat a name-based derivation.
+	await dropOn(page, ZONE, [
+		{ name: 'IMG.PNG', type: 'image/png' },
+		{ name: 'sticker', type: 'image/webp' }
+	]);
+	await expect(page.locator('input[name="sticker[0][format]"]')).toHaveValue('png');
+	await expect(page.locator('input[name="sticker[1][format]"]')).toHaveValue('webp');
+	// Two files in one drop, so the live region takes the plural branch.
+	await expect(status).toHaveText('2 stickers added');
+});
+
+test('the sticker zone dims while an upload runs and refuses a drop without lighting up', async ({
+	page
+}) => {
+	await adminLogin(page, PASSWORD);
+
+	let hold: Promise<void> | null = null;
+	let release = () => {};
+	await page.route('**/api/upload', async (route) => {
+		if (hold) await hold;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+
+	// Resting border, read while the zone is idle: the busy zone keeps pointer
+	// events (see below), which keeps :hover alive, so it must hold this colour
+	// instead of lighting up primary as if it would take a click.
+	const restingBorder = await page.locator(ZONE).evaluate((el) => getComputedStyle(el).borderColor);
+
+	hold = new Promise<void>((resolve) => (release = resolve));
+	await dropOn(page, ZONE, [{ name: 'slow.png', type: 'image/png' }]);
+	const busy = page.locator(`${ZONE}.disabled`);
+	await expect(busy).toBeVisible();
+	// Polled past the zone's 0.15s opacity transition.
+	await expect.poll(() => busy.evaluate((el) => getComputedStyle(el).opacity)).toBe('0.55');
+	// `pointer-events: none` on .disabled would let the next drop reach the
+	// document and navigate the tab to the file. The zone still refuses the
+	// drop — no highlight — it just has to be the one refusing.
+	expect(await busy.evaluate((el) => getComputedStyle(el).pointerEvents)).not.toBe('none');
+	await dragOver(page, ZONE);
+	await expect(busy).not.toHaveClass(/drag-over/);
+	await busy.hover();
+	// Past the border-color transition: read any sooner and a border that IS
+	// heading for primary still measures as the resting colour.
+	await page.waitForTimeout(400);
+	expect(await busy.evaluate((el) => getComputedStyle(el).borderColor)).toBe(restingBorder);
+	release();
+	await expect(page.locator(`${ZONE}.disabled`)).toHaveCount(0);
+});
+
+test('a failed upload keeps the successes, and an all-failed drop never announces zero', async ({
+	page
+}) => {
+	await adminLogin(page, PASSWORD);
+
+	// The form awaits each POST in turn, so the call index picks out which file
+	// fails.
+	let calls = 0;
+	let failCalls: number[] = [];
+	await page.route('**/api/upload', async (route) => {
+		calls++;
+		if (failCalls.includes(calls)) {
+			await route.fulfill({ status: 500, contentType: 'text/plain', body: 'nope' });
+			return;
+		}
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${calls}.png` })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	const status = page.locator('span.sr-only[role="status"]');
+	await waitForDropAttachment(page, ZONE);
+
+	failCalls = [2];
+	await dropOn(page, ZONE, [
+		{ name: 'a.png', type: 'image/png' },
+		{ name: 'b.png', type: 'image/png' }
+	]);
+	// The one that landed is kept rather than discarded with the batch…
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x1.png');
+	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveCount(0);
+	await expect(page.getByText('1 of 2 uploaded, 1 failed')).toBeVisible();
+	// …and the live region reports what was added, not the failure: the toast is
+	// a live region too.
+	await expect(status).toHaveText('1 sticker added');
+
+	// Nothing landed at all, which as a count would read "0 stickers added".
+	calls = 0;
+	failCalls = [1];
+	await dropOn(page, ZONE, [{ name: 'c.png', type: 'image/png' }]);
+	await expect(status).toHaveText('No stickers added');
+});

From 69cbd78cb8e9a74c77e820f7850a37a362750c78 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:15:16 -0700
Subject: [PATCH 06/33] fix(admin): ship round 5 fixes for drag-and-drop upload
 zones (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  4 +++-
 tests/e2e/drop-files.ts                   | 11 +++++++++++
 tests/e2e/sticker-pack-form.spec.ts       |  5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 4c783d31..819f6896 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -490,7 +490,9 @@
 		<span class="save-note">{m.stickers_source_self_hosted()} · {m.admin_count_stickers({ count: stickerEntries.length })}</span>
 		<div class="save-actions">
 			<a href="/admin/stickers" class="btn btn-outline">{m.admin_cancel()}</a>
-			<button type="submit" class="btn btn-primary" disabled={saving}>
+			<!-- Blocked while stickers upload, as the VR form does: saving mid-upload
+			     stores the pack without the pending file, and the orphan sweep reaps it. -->
+			<button type="submit" class="btn btn-primary" disabled={saving || uploading}>
 				{#if saving}<Loader2 size={16} class="spin" /> {m.admin_saving()}{:else}<Check size={16} /> {submitLabel}{/if}
 			</button>
 		</div>
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index 0d23d1e3..ac75a2b6 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -56,6 +56,17 @@ export async function waitForDropAttachment(page: Page, selector: string) {
 	// Leave the zone at rest — the class only clears on dragleave or drop.
 	await page.locator(selector).dispatchEvent('dragleave');
 	await expect(page.locator(selector)).not.toHaveClass(/drag-over/);
+	// The class is gone but the 0.15s border-color transition is still running
+	// back toward the resting colour. Return only once two consecutive reads
+	// agree, so a caller's "resting" read never captures a mid-transition value.
+	await expect
+		.poll(async () => {
+			const read = () => page.locator(selector).evaluate((el) => getComputedStyle(el).borderColor);
+			const first = await read();
+			await page.waitForTimeout(60);
+			return (await read()) === first;
+		})
+		.toBe(true);
 }
 
 /**
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index f182e6f2..efa1b1d7 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -172,8 +172,13 @@ test('the sticker zone dims while an upload runs and refuses a drop without ligh
 	// heading for primary still measures as the resting colour.
 	await page.waitForTimeout(400);
 	expect(await busy.evaluate((el) => getComputedStyle(el).borderColor)).toBe(restingBorder);
+	// Saving mid-upload would store the pack without the pending file, so the
+	// submit is gated on the upload too (same guard as the VR form).
+	const save = page.getByRole('button', { name: 'Save pack' });
+	await expect(save).toBeDisabled();
 	release();
 	await expect(page.locator(`${ZONE}.disabled`)).toHaveCount(0);
+	await expect(save).toBeEnabled();
 });
 
 test('a failed upload keeps the successes, and an all-failed drop never announces zero', async ({

From 33b4d770e8aee7cdc7e9b51b0efec662ecc31a6e Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:23:06 -0700
Subject: [PATCH 07/33] test(admin): settle the drop helper deterministically
 and assert the Replace highlight (SONA-216)

---
 tests/e2e/drop-files.ts         | 16 +++++++---------
 tests/e2e/vr-admin-form.spec.ts |  2 ++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index ac75a2b6..69724249 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -49,6 +49,9 @@ export function dragOver(page: Page, selector: string) {
  * a retried drop can.
  */
 export async function waitForDropAttachment(page: Page, selector: string) {
+	// Read the resting border before the first probe, while the zone is provably
+	// at rest: the settle check below waits for exactly this value to return.
+	const resting = await page.locator(selector).evaluate((el) => getComputedStyle(el).borderColor);
 	await expect(async () => {
 		await dragOver(page, selector);
 		await expect(page.locator(selector)).toHaveClass(/drag-over/, { timeout: 1000 });
@@ -57,16 +60,11 @@ export async function waitForDropAttachment(page: Page, selector: string) {
 	await page.locator(selector).dispatchEvent('dragleave');
 	await expect(page.locator(selector)).not.toHaveClass(/drag-over/);
 	// The class is gone but the 0.15s border-color transition is still running
-	// back toward the resting colour. Return only once two consecutive reads
-	// agree, so a caller's "resting" read never captures a mid-transition value.
+	// back toward the resting colour. Return only once it has arrived, so a
+	// caller's own "resting" read never captures a mid-transition value.
 	await expect
-		.poll(async () => {
-			const read = () => page.locator(selector).evaluate((el) => getComputedStyle(el).borderColor);
-			const first = await read();
-			await page.waitForTimeout(60);
-			return (await read()) === first;
-		})
-		.toBe(true);
+		.poll(() => page.locator(selector).evaluate((el) => getComputedStyle(el).borderColor))
+		.toBe(resting);
 }
 
 /**
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 9467d8ec..5ae807c8 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -303,6 +303,8 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	// event otherwise and the browser navigates the tab to the dropped file,
 	// losing the form. dropOn reports whether preventDefault was called, which is
 	// the cancellation itself — a dispatched DragEvent never navigates on its own.
+	// The Replace button is a drop target too, and paints its own highlight.
+	await expectDragOverHighlight(page, 'label.btn-sm');
 	hold = new Promise<void>((resolve) => (release = resolve));
 	const url = page.url();
 	const during = uploads;

From 93bbfbea5ce3f0b7fd5a0553f3d3c2e70d12d8f7 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:29:44 -0700
Subject: [PATCH 08/33] fix(admin): swallow drops on the model card and gate
 the sticker zone on saving (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  6 +++++-
 src/lib/components/VrAvatarForm.svelte    |  6 +++++-
 src/lib/drop-files.test.ts                | 17 +++++++++++++++++
 src/lib/drop-files.ts                     |  5 +++++
 tests/e2e/vr-admin-form.spec.ts           |  5 +++++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 819f6896..56482cad 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -134,6 +134,8 @@
 	function uploadStickers(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = [...(input.files ?? [])];
+		// Reset so picking the same file again after a failure fires change.
+		input.value = '';
 		if (!files.length) return;
 		addStickerFiles(files);
 	}
@@ -362,7 +364,9 @@
 			{@attach dropFiles({
 				accept: STICKER_ACCEPT,
 				onFiles: addStickerFiles,
-				disabled: () => uploading
+				// Also while saving: a drop after Save would upload and append a row
+				// the already-serialized submit never sees.
+				disabled: () => uploading || saving
 			})}
 		>
 			<Plus size={20} />
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index bc4ead9e..9236f1f5 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -622,7 +622,11 @@
 				</span>
 			</div>
 		{:else if modelUrl}
-			<div class="model-card">
+			<!-- The card is much bigger than its Replace button. A drop that misses
+			     the button by a few pixels would otherwise navigate the tab to the
+			     file; swallow it here. The button's own handler runs first and marks
+			     the event handled, so this never overrides its drop. -->
+			<div class="model-card" {@attach dropFiles({ accept: '', onFiles: () => {}, disabled: () => true })}>
 				<FileBox size={20} />
 				<div class="model-info">
 					<span class="model-name">{modelFilename || modelUrl.split('/').pop()}</span>
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index 519d69ad..9c2c0bf0 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -117,6 +117,23 @@ describe('dropFiles', () => {
 		expect(calls).toHaveLength(0);
 	});
 
+	it('leaves an event a nested target already handled alone', () => {
+		const { el, calls } = setup(() => true);
+		const over = Object.assign(new Event('dragover', { cancelable: true }), {
+			dataTransfer: { files: [], dropEffect: 'copy' }
+		});
+		over.preventDefault();
+		el.dispatchEvent(over);
+		// A disabled instance would have set 'none'; the inner target's 'copy' stays.
+		expect(over.dataTransfer.dropEffect).toBe('copy');
+		const drop = Object.assign(new Event('drop', { cancelable: true }), {
+			dataTransfer: { files: [{ name: 'a.png', type: 'image/png' }], dropEffect: '' }
+		});
+		drop.preventDefault();
+		el.dispatchEvent(drop);
+		expect(calls).toHaveLength(0);
+	});
+
 	it('removes its listeners on cleanup', () => {
 		const { el, calls, cleanup } = setup();
 		cleanup?.();
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 8470173b..84c6be53 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -40,7 +40,11 @@ export function dropFiles(opts: {
 		// preventDefault on dragenter/dragover is what makes the element a drop
 		// target at all; without it the browser opens the file instead. It runs
 		// even while disabled so a drop on a busy zone is swallowed, not navigated.
+		// A nested drop target (the Replace button inside the model card) handles
+		// the event first; an outer swallow-only instance must not then override
+		// its dropEffect, so an already-handled event is left alone.
 		const over = (e: DragEvent) => {
+			if (e.defaultPrevented) return;
 			e.preventDefault();
 			const off = opts.disabled?.() ?? false;
 			if (e.dataTransfer) e.dataTransfer.dropEffect = off ? 'none' : 'copy';
@@ -48,6 +52,7 @@ export function dropFiles(opts: {
 		};
 		const leave = () => node.classList.remove('drag-over');
 		const drop = (e: DragEvent) => {
+			if (e.defaultPrevented) return;
 			e.preventDefault();
 			node.classList.remove('drag-over');
 			if (opts.disabled?.()) return;
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 5ae807c8..06c882d3 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -303,6 +303,11 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	// event otherwise and the browser navigates the tab to the dropped file,
 	// losing the form. dropOn reports whether preventDefault was called, which is
 	// the cancellation itself — a dispatched DragEvent never navigates on its own.
+	// A drop that misses the Replace button and lands on the card is swallowed:
+	// cancelled, no request, so the browser never navigates to the file.
+	const beforeCard = uploads;
+	expect(await dropOn(page, '.model-card', [{ name: 'x.vrm', type: '' }])).toBe(true);
+	expect(uploads).toBe(beforeCard);
 	// The Replace button is a drop target too, and paints its own highlight.
 	await expectDragOverHighlight(page, 'label.btn-sm');
 	hold = new Promise<void>((resolve) => (release = resolve));

From 265731696ceced7bd57c9f1a8dc75c19fc141c21 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:58:33 -0700
Subject: [PATCH 09/33] fix(admin): refuse files while a save is in flight and
 filter picked stickers (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  25 +++--
 src/lib/components/VrAvatarForm.svelte    |  20 ++--
 src/lib/drop-files.test.ts                |   9 +-
 tests/e2e/sticker-pack-form.spec.ts       | 108 +++++++++++++++++++++-
 tests/e2e/vr-admin-form.spec.ts           |  73 ++++++++++++++-
 5 files changed, 212 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 56482cad..1ce64c59 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -4,7 +4,7 @@
 	import { X, Plus, ArrowLeft, Check, Loader2, GripVertical, UserPlus } from 'lucide-svelte';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
-	import { dropFiles } from '$lib/drop-files';
+	import { dropFiles, matchesAccept } from '$lib/drop-files';
 	import * as m from '$lib/paraglide/messages';
 	import StickerMedia from '$lib/components/StickerMedia.svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
@@ -137,12 +137,16 @@
 		// Reset so picking the same file again after a failure fires change.
 		input.value = '';
 		if (!files.length) return;
-		addStickerFiles(files);
+		// `accept` is a filter the OS dialog can override ("All files"), so a
+		// picked JPEG can arrive here; partition it the same way a drop is.
+		const accepted: File[] = [];
+		const rejected: File[] = [];
+		for (const f of files) (matchesAccept(f, STICKER_ACCEPT) ? accepted : rejected).push(f);
+		addStickerFiles(accepted, rejected);
 	}
 
-	// Shared by the file input and the drop attachment. `rejected` only ever
-	// arrives from a drop — the input's accept attribute filters the picker, a
-	// drop skips it — and those files are reported without being uploaded.
+	// Shared by the file input and the drop attachment; both partition their
+	// files first, so `rejected` is reported without being uploaded.
 	async function addStickerFiles(files: File[], rejected: File[] = []) {
 		if (rejected.length) {
 			// Cap the list: a folder dropped whole would otherwise put dozens of
@@ -175,9 +179,10 @@
 						artistId: '',
 						emojis: '',
 						nsfw: false,
-						// From the MIME type, not the name: a dropped file may have no
-						// extension or an uppercase one, and STICKER_ACCEPT admits
-						// MIME types only, so `type` is always one of the two here.
+						// From the MIME type, not the name: a file may have no extension
+						// or an uppercase one. Both entry points partition against
+						// STICKER_ACCEPT, which lists MIME types only, so anything that
+						// reaches here declared one of the two.
 						format: file.type === 'image/png' ? 'png' : 'webp'
 					});
 				} else {
@@ -360,7 +365,7 @@
 		<span class="sr-only" role="status">{stickerStatus}</span>
 		<label
 			class="upload-zone multi"
-			class:disabled={uploading}
+			class:disabled={uploading || saving}
 			{@attach dropFiles({
 				accept: STICKER_ACCEPT,
 				onFiles: addStickerFiles,
@@ -371,7 +376,7 @@
 		>
 			<Plus size={20} />
 			<span>{uploading ? m.admin_upload_uploading() : m.admin_pack_dropzone()}</span>
-			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading} class="sr-file" />
+			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading || saving} class="sr-file" />
 		</label>
 
 		{#if stickerEntries.length > 0}
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 9236f1f5..d135ec26 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -635,10 +635,10 @@
 				<div class="model-actions">
 					<label
 						class="btn-sm"
-						{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped })}
+						{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped, disabled: () => saving })}
 					>
 						{m.admin_vr_upload_replace()}
-						<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
+						<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} disabled={saving} class="sr-file" aria-describedby="vr-model-hint" />
 					</label>
 					<button type="button" class="btn-sm" onclick={removeModel}>{m.admin_vr_upload_remove()}</button>
 				</div>
@@ -650,10 +650,14 @@
 			{/if}
 		{:else}
 			<!-- The whole zone is the label for the hidden file input. -->
-			<label class="upload-zone" {@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped })}>
+			<label
+				class="upload-zone"
+				class:disabled={saving}
+				{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped, disabled: () => saving })}
+			>
 				<UploadCloud size={22} />
 				<span>{m.admin_vr_dropzone({ max: formatBytes(MAX_VR_MODEL_BYTES) })}</span>
-				<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} class="sr-file" aria-describedby="vr-model-hint" />
+				<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} disabled={saving} class="sr-file" aria-describedby="vr-model-hint" />
 			</label>
 		{/if}
 		{#if uploadError}
@@ -819,11 +823,13 @@
 		{/if}
 		<label
 			class="upload-zone media-zone"
-			class:disabled={mediaUploading}
+			class:disabled={mediaUploading || saving}
 			{@attach dropFiles({
 				accept: MEDIA_ACCEPT,
 				onFiles: uploadMedia,
-				disabled: () => mediaUploading
+				// Also while saving: a drop after Save would upload and append a row
+				// the already-serialized submit never sees, orphaning the file.
+				disabled: () => mediaUploading || saving
 			})}
 		>
 			<ImagePlus size={20} />
@@ -833,7 +839,7 @@
 				accept={MEDIA_ACCEPT}
 				multiple
 				onchange={onMediaPicked}
-				disabled={mediaUploading}
+				disabled={mediaUploading || saving}
 				class="sr-file"
 			/>
 		</label>
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index 9c2c0bf0..f30ce7c3 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -118,7 +118,7 @@ describe('dropFiles', () => {
 	});
 
 	it('leaves an event a nested target already handled alone', () => {
-		const { el, calls } = setup(() => true);
+		const { el } = setup(() => true);
 		const over = Object.assign(new Event('dragover', { cancelable: true }), {
 			dataTransfer: { files: [], dropEffect: 'copy' }
 		});
@@ -126,12 +126,15 @@ describe('dropFiles', () => {
 		el.dispatchEvent(over);
 		// A disabled instance would have set 'none'; the inner target's 'copy' stays.
 		expect(over.dataTransfer.dropEffect).toBe('copy');
+		// The drop half needs an ENABLED instance: a disabled one ignores the file
+		// regardless, so only this discriminates the defaultPrevented guard.
+		const inner = setup();
 		const drop = Object.assign(new Event('drop', { cancelable: true }), {
 			dataTransfer: { files: [{ name: 'a.png', type: 'image/png' }], dropEffect: '' }
 		});
 		drop.preventDefault();
-		el.dispatchEvent(drop);
-		expect(calls).toHaveLength(0);
+		inner.el.dispatchEvent(drop);
+		expect(inner.calls).toHaveLength(0);
 	});
 
 	it('removes its listeners on cleanup', () => {
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index efa1b1d7..a7615f5f 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Route } from '@playwright/test';
 import { adminLogin } from './admin-login';
 import {
 	dropOn,
@@ -225,3 +225,109 @@ test('a failed upload keeps the successes, and an all-failed drop never announce
 	await dropOn(page, ZONE, [{ name: 'c.png', type: 'image/png' }]);
 	await expect(status).toHaveText('No stickers added');
 });
+
+test('the sticker zone refuses files while a save is in flight', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+
+	// Hold the form POST so `saving` stays true. page.route intercepts inside the
+	// browser, so the shared read-only server never sees the request; it is
+	// aborted rather than fulfilled at the end, which is what lets enhance settle.
+	let holdPost = (_route: Route) => {};
+	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
+	await page.route('**/admin/stickers/manual**', async (route) => {
+		if (route.request().method() !== 'POST') {
+			await route.fallback();
+			return;
+		}
+		holdPost(route);
+	});
+
+	await page.fill('input[name="name"]', 'Save gate');
+	// By role first, then by selector: the button's label swaps to "Saving..."
+	// while the submit is in flight, so an accessible-name locator stops
+	// matching exactly when the assertions need it.
+	await page.getByRole('button', { name: 'Save pack' }).click();
+	const save = page.locator('form.form button[type="submit"]');
+	await expect(save).toBeDisabled();
+	await expect(page.locator(ZONE)).toHaveClass(/disabled/);
+
+	// A drop landing now would upload and append a row the already-serialized
+	// submit never sees, orphaning the file in storage.
+	const before = uploads;
+	await dropOn(page, ZONE, [{ name: 'late.png', type: 'image/png' }]);
+	await dragOver(page, ZONE);
+	await expect(page.locator(ZONE)).not.toHaveClass(/drag-over/);
+	// Past the moment a drop that DID land would have posted (mutation-checked).
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveCount(0);
+
+	// The zone comes back once the submit settles, so a failed save is still
+	// editable. Settled as an action failure rather than an abort: an aborted
+	// fetch makes enhance render the error page, which takes the form away and
+	// leaves nothing to assert on. The data is devalue-encoded, the shape
+	// deserialize() expects.
+	await (await posted).fulfill({
+		contentType: 'application/json',
+		body: JSON.stringify({
+			type: 'failure',
+			status: 400,
+			data: '[{"error":1},"Held by the test"]'
+		})
+	});
+	await expect(save).toBeEnabled();
+	await expect(page.locator(ZONE)).not.toHaveClass(/disabled/);
+});
+
+test('picking a sticker resets the input, and a picked wrong type is rejected', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+	const input = page.locator(`${ZONE} input[type="file"]`);
+
+	await input.setInputFiles({
+		name: 'sticker.png',
+		mimeType: 'image/png',
+		buffer: Buffer.from([1, 2, 3, 4])
+	});
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x1.png');
+	// Reset after the pick: left alone the input keeps a fakepath value, and
+	// picking the same file again after a failure would fire no change event.
+	await expect(input).toHaveValue('');
+
+	// The picker's accept attribute is a filter the OS dialog can override, so a
+	// JPEG can arrive from the input too and has to be rejected the way a dropped
+	// one is. setInputFiles bypasses accept, which is what makes this
+	// discriminate.
+	const before = uploads;
+	await input.setInputFiles({
+		name: 'photo.jpg',
+		mimeType: 'image/jpeg',
+		buffer: Buffer.from([1, 2, 3, 4])
+	});
+	await expect(page.getByText('Skipped photo.jpg. Add PNG or WebP images instead.')).toBeVisible();
+	expect(uploads).toBe(before);
+	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveCount(0);
+});
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 06c882d3..05554e43 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Route } from '@playwright/test';
 import { adminLogin } from './admin-login';
-import { dropOn, dragOver, expectDragOverHighlight } from './drop-files';
+import { dropOn, dragOver, expectDragOverHighlight, waitForDropAttachment } from './drop-files';
 
 // VR avatar admin form smoke (SONA-124, T1): VrAvatarForm and the /admin/vr/new
 // page never executed in any test before this. (The SONA-124 early-access gate
@@ -321,3 +321,72 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	release();
 	await expect(page.locator('.model-name')).toHaveText('c.vrm');
 });
+
+test('the showcase media zone refuses files while a save is in flight', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/vr/new');
+	// Also the hydration probe: the attachment runs at hydration, so a click
+	// before it would submit the form for real instead of through enhance.
+	await waitForDropAttachment(page, '.media-zone');
+
+	// Hold the form POST so `saving` stays true. page.route intercepts inside the
+	// browser, so the shared read-only server never sees the request; it is
+	// aborted rather than fulfilled at the end, which is what lets enhance settle.
+	let holdPost = (_route: Route) => {};
+	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
+	await page.route('**/admin/vr/new**', async (route) => {
+		if (route.request().method() !== 'POST') {
+			await route.fallback();
+			return;
+		}
+		holdPost(route);
+	});
+
+	await page.fill('input[name="name"]', 'Save gate');
+	await page.fill('input[name="slug"]', 'save-gate');
+	await page.selectOption('select[name="characterId"]', { label: 'Taro' });
+	// By role first, then by selector: the button's label swaps to "Saving..."
+	// while the submit is in flight, so an accessible-name locator stops
+	// matching exactly when the assertions need it.
+	await page.getByRole('button', { name: 'Create avatar' }).click();
+	const save = page.locator('form.form button[type="submit"]');
+	await expect(save).toBeDisabled();
+	await expect(page.locator('.media-zone')).toHaveClass(/disabled/);
+
+	// A drop landing now would upload and append a row the already-serialized
+	// submit never sees, orphaning the file in storage.
+	const before = uploads;
+	await dropOn(page, '.media-zone', [{ name: 'late.png', type: 'image/png' }]);
+	await dragOver(page, '.media-zone');
+	await expect(page.locator('.media-zone')).not.toHaveClass(/drag-over/);
+	// Past the moment a drop that DID land would have posted (mutation-checked).
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+	await expect(page.locator('input[name="media[0][url]"]')).toHaveCount(0);
+
+	// The zone comes back once the submit settles, so a failed save is still
+	// editable. Settled as an action failure rather than an abort: an aborted
+	// fetch makes enhance render the error page, which takes the form away and
+	// leaves nothing to assert on. The data is devalue-encoded, the shape
+	// deserialize() expects.
+	await (await posted).fulfill({
+		contentType: 'application/json',
+		body: JSON.stringify({
+			type: 'failure',
+			status: 400,
+			data: '[{"error":1},"Held by the test"]'
+		})
+	});
+	await expect(save).toBeEnabled();
+	await expect(page.locator('.media-zone')).not.toHaveClass(/disabled/);
+});

From 105e9bf796e065ac0e34d016b28e2e4ec4bfd549 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:07:43 -0700
Subject: [PATCH 10/33] fix(admin): share the accept partition across pickers
 and drops, gate the model zones on saving in tests (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  6 +-
 src/lib/components/VrAvatarForm.svelte    | 16 ++++--
 src/lib/drop-files.ts                     | 14 ++++-
 tests/e2e/sticker-pack-form.spec.ts       |  3 +-
 tests/e2e/vr-admin-form.spec.ts           | 69 ++++++++++++++++++++++-
 5 files changed, 91 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 1ce64c59..45026ca1 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -4,7 +4,7 @@
 	import { X, Plus, ArrowLeft, Check, Loader2, GripVertical, UserPlus } from 'lucide-svelte';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
-	import { dropFiles, matchesAccept } from '$lib/drop-files';
+	import { dropFiles, partitionByAccept } from '$lib/drop-files';
 	import * as m from '$lib/paraglide/messages';
 	import StickerMedia from '$lib/components/StickerMedia.svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
@@ -139,9 +139,7 @@
 		if (!files.length) return;
 		// `accept` is a filter the OS dialog can override ("All files"), so a
 		// picked JPEG can arrive here; partition it the same way a drop is.
-		const accepted: File[] = [];
-		const rejected: File[] = [];
-		for (const f of files) (matchesAccept(f, STICKER_ACCEPT) ? accepted : rejected).push(f);
+		const { accepted, rejected } = partitionByAccept(files, STICKER_ACCEPT);
 		addStickerFiles(accepted, rejected);
 	}
 
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index d135ec26..84ed2fbf 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -8,7 +8,7 @@
 	import { cdnImage, rawFallback, THUMB_WIDTH } from '$lib';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
-	import { dropFiles } from '$lib/drop-files';
+	import { dropFiles, partitionByAccept } from '$lib/drop-files';
 	import { probeDimensions } from '$lib/probe-dimensions';
 	import { MAX_BUFFER_BYTES } from '$lib/config';
 	import { MAX_VR_MODEL_BYTES, creditRoleLabel, formatBytes, modelFileError, modelFormatLabel, namePlaceholderCharacter, platformLabel } from '$lib/vr';
@@ -224,12 +224,14 @@
 		const files = [...(input.files ?? [])];
 		input.value = '';
 		if (!files.length) return;
-		uploadMedia(files);
+		// `accept` is a filter the OS dialog can override ("All files"), so a
+		// picked .txt would otherwise upload its whole body just to collect a 415.
+		const { accepted, rejected } = partitionByAccept(files, MEDIA_ACCEPT);
+		uploadMedia(accepted, rejected);
 	}
 
-	// Shared by the file input and the drop attachment. `rejected` only ever
-	// arrives from a drop — the input's accept attribute filters the picker, a
-	// drop skips it — and those files are reported without being uploaded.
+	// Shared by the file input and the drop attachment; both partition their
+	// files first, so `rejected` is reported without being uploaded.
 	async function uploadMedia(files: File[], rejected: File[] = []) {
 		mediaErrors = rejected.map((file) => ({
 			uid: mediaErrorUid++,
@@ -635,6 +637,7 @@
 				<div class="model-actions">
 					<label
 						class="btn-sm"
+						class:disabled={saving}
 						{@attach dropFiles({ accept: MODEL_ACCEPT, onFiles: onModelDropped, disabled: () => saving })}
 					>
 						{m.admin_vr_upload_replace()}
@@ -1160,6 +1163,9 @@
 		transition: border-color 0.15s, background-color 0.15s;
 	}
 	.btn-sm:hover { border-color: var(--primary); }
+	/* Same busy treatment as the zones: dimmed, and no hover invitation. */
+	.btn-sm.disabled { opacity: 0.55; cursor: not-allowed; }
+	.btn-sm.disabled:hover { border-color: var(--border); }
 	.btn-sm:global(.drag-over) { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 8%, var(--secondary)); }
 
 	/* Showcase media rows (same row chrome as the credit list). */
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 84c6be53..8ceb45c1 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -23,6 +23,16 @@ export function matchesAccept(file: { name: string; type: string }, accept: stri
 	});
 }
 
+/** Split files into those an accept string admits and those it refuses. Used by
+ * the drop handler and by the pickers, whose `accept` attribute is only a filter
+ * the OS dialog can override. */
+export function partitionByAccept(files: File[], accept: string): { accepted: File[]; rejected: File[] } {
+	const accepted: File[] = [];
+	const rejected: File[] = [];
+	for (const f of files) (matchesAccept(f, accept) ? accepted : rejected).push(f);
+	return { accepted, rejected };
+}
+
 /**
  * Drag-and-drop for an upload zone (SONA-216): highlights the element with
  * `drag-over` while a file is over it and hands the dropped files to `onFiles`.
@@ -58,9 +68,7 @@ export function dropFiles(opts: {
 			if (opts.disabled?.()) return;
 			const files = [...(e.dataTransfer?.files ?? [])];
 			if (!files.length) return;
-			const accepted: File[] = [];
-			const rejected: File[] = [];
-			for (const f of files) (matchesAccept(f, opts.accept) ? accepted : rejected).push(f);
+			const { accepted, rejected } = partitionByAccept(files, opts.accept);
 			opts.onFiles(accepted, rejected);
 		};
 		node.addEventListener('dragenter', over);
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index a7615f5f..ae0b7d86 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -242,8 +242,7 @@ test('the sticker zone refuses files while a save is in flight', async ({ page }
 	await waitForDropAttachment(page, ZONE);
 
 	// Hold the form POST so `saving` stays true. page.route intercepts inside the
-	// browser, so the shared read-only server never sees the request; it is
-	// aborted rather than fulfilled at the end, which is what lets enhance settle.
+	// browser, so the shared read-only server never sees the request.
 	let holdPost = (_route: Route) => {};
 	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
 	await page.route('**/admin/stickers/manual**', async (route) => {
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 05554e43..cff708cb 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -12,6 +12,8 @@ import { dropOn, dragOver, expectDragOverHighlight, waitForDropAttachment } from
 
 // Matches ADMIN_PASSWORD in tests/e2e/wrangler.e2e.toml (throwaway local value).
 const PASSWORD = 'e2e-admin-password';
+// The model zone; the showcase media zone shares the class.
+const MODEL_ZONE = 'label.upload-zone:not(.media-zone)';
 
 test('the create form renders its fields, dropzones and credit control', async ({ page }) => {
 	await adminLogin(page, PASSWORD);
@@ -229,6 +231,18 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	expect(await busy.evaluate((el) => getComputedStyle(el).borderColor)).toBe(restingBorder);
 	release();
 	await expect(page.locator('.media-zone.disabled')).toHaveCount(0);
+
+	// The picker path partitions too: `accept` is only a filter the OS dialog
+	// can override, and setInputFiles bypasses it the same way.
+	const beforePick = uploads;
+	await page.locator('.media-zone input[type="file"]').setInputFiles({
+		name: 'notes.txt',
+		mimeType: 'text/plain',
+		buffer: Buffer.from('nope')
+	});
+	await expect(page.getByText(/That file type isn't supported/)).toBeVisible();
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(beforePick);
 });
 
 test('dropping a model file on the model zone uploads one, and a wrong type is rejected without a request', async ({
@@ -254,7 +268,6 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 
 	await page.goto('/admin/vr/new');
 	// The model zone, not the showcase-media one — both carry .upload-zone.
-	const MODEL_ZONE = 'label.upload-zone:not(.media-zone)';
 	const zone = page.locator(MODEL_ZONE);
 	await expect(zone).toBeVisible();
 
@@ -320,6 +333,36 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	expect(page.url()).toBe(url);
 	release();
 	await expect(page.locator('.model-name')).toHaveText('c.vrm');
+
+	// With a model in place, the Replace button is gated on a save in flight the
+	// same way the zones are. Hold the POST inside the browser; the shared
+	// read-only server never sees it.
+	let holdPost = (_route: Route) => {};
+	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
+	await page.route('**/admin/vr/new**', async (route) => {
+		if (route.request().method() !== 'POST') {
+			await route.fallback();
+			return;
+		}
+		holdPost(route);
+	});
+	await page.fill('input[name="name"]', 'Save gate');
+	await page.fill('input[name="slug"]', 'save-gate');
+	await page.selectOption('select[name="characterId"]', { label: 'Taro' });
+	await page.getByRole('button', { name: 'Create avatar' }).click();
+	await expect(page.locator('form.form button[type="submit"]')).toBeDisabled();
+	const replace = page.locator('label.btn-sm');
+	await expect(replace).toHaveClass(/disabled/);
+	const beforeSave = uploads;
+	await dropOn(page, 'label.btn-sm', [{ name: 'e.vrm', type: '' }]);
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(beforeSave);
+	await expect(page.locator('.model-name')).toHaveText('c.vrm');
+	await (await posted).fulfill({
+		contentType: 'application/json',
+		body: JSON.stringify({ type: 'failure', status: 400, data: '[{"error":1},"Held by the test"]' })
+	});
+	await expect(replace).not.toHaveClass(/disabled/);
 });
 
 test('the showcase media zone refuses files while a save is in flight', async ({ page }) => {
@@ -334,14 +377,22 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 		});
 	});
 
+	let modelUploads = 0;
+	await page.route('**/api/admin/vr-model**', async (route) => {
+		modelUploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/m.vrm', size: 4, format: 'vrm' })
+		});
+	});
+
 	await page.goto('/admin/vr/new');
 	// Also the hydration probe: the attachment runs at hydration, so a click
 	// before it would submit the form for real instead of through enhance.
 	await waitForDropAttachment(page, '.media-zone');
 
 	// Hold the form POST so `saving` stays true. page.route intercepts inside the
-	// browser, so the shared read-only server never sees the request; it is
-	// aborted rather than fulfilled at the end, which is what lets enhance settle.
+	// browser, so the shared read-only server never sees the request.
 	let holdPost = (_route: Route) => {};
 	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
 	await page.route('**/admin/vr/new**', async (route) => {
@@ -374,6 +425,17 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 	expect(uploads).toBe(before);
 	await expect(page.locator('input[name="media[0][url]"]')).toHaveCount(0);
 
+	// The model zone is gated the same way: a model dropped mid-save would
+	// rewrite modelUrl after the body was serialized.
+	const modelZone = page.locator(MODEL_ZONE);
+	await expect(modelZone).toHaveClass(/disabled/);
+	await dropOn(page, MODEL_ZONE, [{ name: 'late.vrm', type: '' }]);
+	await dragOver(page, MODEL_ZONE);
+	await expect(modelZone).not.toHaveClass(/drag-over/);
+	await page.waitForTimeout(300);
+	expect(modelUploads).toBe(0);
+	await expect(page.locator('input[name="modelUrl"]')).toHaveValue('');
+
 	// The zone comes back once the submit settles, so a failed save is still
 	// editable. Settled as an action failure rather than an abort: an aborted
 	// fetch makes enhance render the error page, which takes the form away and
@@ -389,4 +451,5 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 	});
 	await expect(save).toBeEnabled();
 	await expect(page.locator('.media-zone')).not.toHaveClass(/disabled/);
+	await expect(modelZone).not.toHaveClass(/disabled/);
 });

From e4e2b86d0625e9419838ac96fe691e6bc298e83a Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:18:56 -0700
Subject: [PATCH 11/33] fix(admin): swallow stray file drops page-wide and only
 light zones for file drags (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  6 ++-
 src/lib/components/VrAvatarForm.svelte    | 33 +++++++--------
 src/lib/drop-files.test.ts                | 50 ++++++++++++++++++++++-
 src/lib/drop-files.ts                     | 24 ++++++++++-
 tests/e2e/drop-files.ts                   | 12 +++---
 tests/e2e/sticker-pack-form.spec.ts       | 11 ++++-
 tests/e2e/vr-admin-form.spec.ts           |  7 ++++
 7 files changed, 113 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 45026ca1..db5c95bf 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -4,7 +4,7 @@
 	import { X, Plus, ArrowLeft, Check, Loader2, GripVertical, UserPlus } from 'lucide-svelte';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
-	import { dropFiles, partitionByAccept } from '$lib/drop-files';
+	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
 	import * as m from '$lib/paraglide/messages';
 	import StickerMedia from '$lib/components/StickerMedia.svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
@@ -265,6 +265,10 @@
 	});
 </script>
 
+<!-- A file dropped anywhere the zone doesn't cover would navigate the tab to
+     the file and lose the form; the zone handles its own drops first. -->
+<svelte:window ondragover={swallowStrayFileDrop} ondrop={swallowStrayFileDrop} />
+
 <a class="back-link" href="/admin/stickers"><ArrowLeft size={16} /> {m.admin_pack_back()}</a>
 <div class="page-header">
 	<h1>{heading}</h1>
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 84ed2fbf..7eb5d896 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -8,7 +8,7 @@
 	import { cdnImage, rawFallback, THUMB_WIDTH } from '$lib';
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
-	import { dropFiles, partitionByAccept } from '$lib/drop-files';
+	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
 	import { probeDimensions } from '$lib/probe-dimensions';
 	import { MAX_BUFFER_BYTES } from '$lib/config';
 	import { MAX_VR_MODEL_BYTES, creditRoleLabel, formatBytes, modelFileError, modelFormatLabel, namePlaceholderCharacter, platformLabel } from '$lib/vr';
@@ -238,7 +238,12 @@
 			name: file.name,
 			reason: 'bad-type' as const
 		}));
-		if (!files.length) return;
+		if (!files.length) {
+			// Nothing to upload, but the status region must not keep last batch's
+			// text beside a fresh bad-type banner.
+			if (rejected.length) mediaStatus = m.admin_vr_media_upload_issues();
+			return;
+		}
 		mediaUploading = true;
 		mediaStatus = m.admin_upload_uploading();
 		try {
@@ -445,6 +450,10 @@
 	);
 </script>
 
+<!-- A file dropped anywhere the zones don't cover would navigate the tab to
+     the file and lose the form; the zones handle their own drops first. -->
+<svelte:window ondragover={swallowStrayFileDrop} ondrop={swallowStrayFileDrop} />
+
 <a class="back-link" href="/admin/vr"><ArrowLeft size={16} /> {m.admin_vr_back()}</a>
 <div class="page-header">
 	<h1>{heading}</h1>
@@ -605,17 +614,7 @@
 		     content is often not announced); text updates in 10% steps. -->
 		<span class="sr-only" role="status">{uploadAnnouncement}</span>
 		{#if uploading}
-			<!-- Swallow-only drop target: this bar takes the zone's place while the
-			     upload runs, and with nothing preventing the default a second drop
-			     here navigates the tab to the file and loses the form. Attached to
-			     the bar rather than the whole section so the live zone's own
-			     dropEffect isn't overridden as the event bubbles. Empty accept
-			     because nothing is filtered: disabled means the drop is swallowed
-			     before any file is looked at. -->
-			<div
-				class="upload-progress"
-				{@attach dropFiles({ accept: '', onFiles: () => {}, disabled: () => true })}
-			>
+			<div class="upload-progress">
 				<div class="progress-bar">
 					<div class="progress-fill" style="width: {uploadTotal > 0 ? (uploadLoaded / uploadTotal) * 100 : 0}%"></div>
 				</div>
@@ -624,11 +623,7 @@
 				</span>
 			</div>
 		{:else if modelUrl}
-			<!-- The card is much bigger than its Replace button. A drop that misses
-			     the button by a few pixels would otherwise navigate the tab to the
-			     file; swallow it here. The button's own handler runs first and marks
-			     the event handled, so this never overrides its drop. -->
-			<div class="model-card" {@attach dropFiles({ accept: '', onFiles: () => {}, disabled: () => true })}>
+			<div class="model-card">
 				<FileBox size={20} />
 				<div class="model-info">
 					<span class="model-name">{modelFilename || modelUrl.split('/').pop()}</span>
@@ -643,7 +638,7 @@
 						{m.admin_vr_upload_replace()}
 						<input type="file" accept={MODEL_ACCEPT} onchange={onModelPicked} disabled={saving} class="sr-file" aria-describedby="vr-model-hint" />
 					</label>
-					<button type="button" class="btn-sm" onclick={removeModel}>{m.admin_vr_upload_remove()}</button>
+					<button type="button" class="btn-sm" onclick={removeModel} disabled={saving}>{m.admin_vr_upload_remove()}</button>
 				</div>
 			</div>
 			{#if modelUrl !== (avatar?.modelUrl ?? '')}
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index f30ce7c3..bae1e47a 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { dropFiles, matchesAccept } from './drop-files';
+import { dropFiles, matchesAccept, partitionByAccept, swallowStrayFileDrop } from './drop-files';
 
 // The accept filter is the security-relevant half (SONA-216): the accept
 // ATTRIBUTE only constrains the file picker, so without this an admin dropping
@@ -58,6 +58,44 @@ function dragEvent(type: string, files: PickedFile[] = []) {
 	return Object.assign(new Event(type), { dataTransfer: { files, dropEffect: '' } });
 }
 
+describe('partitionByAccept', () => {
+	it('splits by the accept string and keeps input order in both buckets', () => {
+		const a = { name: 'a.vrm', type: '' };
+		const b = { name: 'notes.txt', type: 'text/plain' };
+		const c = { name: 'C.FBX', type: '' };
+		const d = { name: 'd.png', type: 'image/png' };
+		const { accepted, rejected } = partitionByAccept([a, b, c, d] as unknown as File[], '.vrm,.fbx');
+		expect(accepted).toEqual([a, c]);
+		expect(rejected).toEqual([b, d]);
+	});
+});
+
+describe('swallowStrayFileDrop', () => {
+	function stray(types: string[], prevented = false) {
+		const e = Object.assign(new Event('drop', { cancelable: true }), {
+			dataTransfer: { types, files: [], dropEffect: 'copy' }
+		});
+		if (prevented) e.preventDefault();
+		return e;
+	}
+
+	it('cancels a file drop nothing else handled', () => {
+		const e = stray(['Files']);
+		swallowStrayFileDrop(e as unknown as DragEvent);
+		expect(e.defaultPrevented).toBe(true);
+		expect(e.dataTransfer.dropEffect).toBe('none');
+	});
+
+	it('ignores non-file drags and events a zone already handled', () => {
+		const text = stray(['text/plain']);
+		swallowStrayFileDrop(text as unknown as DragEvent);
+		expect(text.defaultPrevented).toBe(false);
+		const handled = stray(['Files'], true);
+		swallowStrayFileDrop(handled as unknown as DragEvent);
+		expect(handled.dataTransfer.dropEffect).toBe('copy');
+	});
+});
+
 describe('dropFiles', () => {
 	function setup(disabled?: () => boolean) {
 		const el = new FakeEl();
@@ -80,6 +118,16 @@ describe('dropFiles', () => {
 		expect(el.classes.has('drag-over')).toBe(false);
 	});
 
+	it('does not light up for a drag that carries no files', () => {
+		const { el } = setup();
+		const ev = Object.assign(new Event('dragover', { cancelable: true }), {
+			dataTransfer: { types: ['text/plain'], files: [], dropEffect: '' }
+		});
+		el.dispatchEvent(ev);
+		expect(el.classes.has('drag-over')).toBe(false);
+		expect(ev.defaultPrevented).toBe(false);
+	});
+
 	it('sets the copy drop effect so the cursor reads as an upload', () => {
 		const { el } = setup();
 		const ev = dragEvent('dragover');
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 8ceb45c1..fa6a6d1c 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -23,6 +23,26 @@ export function matchesAccept(file: { name: string; type: string }, accept: stri
 	});
 }
 
+/** Whether a drag carries files at all. Dragged text or an image element also
+ * fires dragover; a zone must not light up for those. A missing `types` (test
+ * fakes) counts as files. */
+function carriesFiles(e: DragEvent): boolean {
+	const types = e.dataTransfer?.types;
+	return !types || types.includes('Files');
+}
+
+/**
+ * Window-level guard for the admin forms that host drop zones: a file dropped
+ * anywhere the zones don't cover (the hint under a zone, a media row, blank
+ * form) would otherwise navigate the tab to the file and lose the form. Leaves
+ * an event a zone already handled alone, and ignores non-file drags.
+ */
+export function swallowStrayFileDrop(e: DragEvent) {
+	if (e.defaultPrevented || !carriesFiles(e)) return;
+	e.preventDefault();
+	if (e.dataTransfer) e.dataTransfer.dropEffect = 'none';
+}
+
 /** Split files into those an accept string admits and those it refuses. Used by
  * the drop handler and by the pickers, whose `accept` attribute is only a filter
  * the OS dialog can override. */
@@ -54,7 +74,7 @@ export function dropFiles(opts: {
 		// the event first; an outer swallow-only instance must not then override
 		// its dropEffect, so an already-handled event is left alone.
 		const over = (e: DragEvent) => {
-			if (e.defaultPrevented) return;
+			if (e.defaultPrevented || !carriesFiles(e)) return;
 			e.preventDefault();
 			const off = opts.disabled?.() ?? false;
 			if (e.dataTransfer) e.dataTransfer.dropEffect = off ? 'none' : 'copy';
@@ -62,9 +82,9 @@ export function dropFiles(opts: {
 		};
 		const leave = () => node.classList.remove('drag-over');
 		const drop = (e: DragEvent) => {
+			node.classList.remove('drag-over');
 			if (e.defaultPrevented) return;
 			e.preventDefault();
-			node.classList.remove('drag-over');
 			if (opts.disabled?.()) return;
 			const files = [...(e.dataTransfer?.files ?? [])];
 			if (!files.length) return;
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index 69724249..98a3d72c 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -28,15 +28,15 @@ export function dropOn(page: Page, selector: string, files: { name: string; type
 	);
 }
 
-/** Dispatch a `dragover` on the first element matching `selector`. */
+/** Dispatch a `dragover` on the first element matching `selector`. The
+ * DataTransfer carries a file so `types` includes 'Files', as a real file drag
+ * does; the zone ignores drags that carry none. */
 export function dragOver(page: Page, selector: string) {
 	return page.evaluate((selector) => {
+		const dt = new DataTransfer();
+		dt.items.add(new File([new Uint8Array([1])], 'probe.bin'));
 		document.querySelector(selector)!.dispatchEvent(
-			new DragEvent('dragover', {
-				dataTransfer: new DataTransfer(),
-				bubbles: true,
-				cancelable: true
-			})
+			new DragEvent('dragover', { dataTransfer: dt, bubbles: true, cancelable: true })
 		);
 	}, selector);
 }
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index ae0b7d86..4ea054c0 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -137,9 +137,11 @@ test('the sticker zone dims while an upload runs and refuses a drop without ligh
 }) => {
 	await adminLogin(page, PASSWORD);
 
+	let uploads = 0;
 	let hold: Promise<void> | null = null;
 	let release = () => {};
 	await page.route('**/api/upload', async (route) => {
+		uploads++;
 		if (hold) await hold;
 		await route.fulfill({
 			contentType: 'application/json',
@@ -160,7 +162,9 @@ test('the sticker zone dims while an upload runs and refuses a drop without ligh
 	const busy = page.locator(`${ZONE}.disabled`);
 	await expect(busy).toBeVisible();
 	// Polled past the zone's 0.15s opacity transition.
-	await expect.poll(() => busy.evaluate((el) => getComputedStyle(el).opacity)).toBe('0.55');
+	// Below the resting 1, not pinned to the end value: a backgrounded worker
+	// tab can leave the 0.15s transition parked mid-way.
+	await expect.poll(() => busy.evaluate((el) => parseFloat(getComputedStyle(el).opacity))).toBeLessThan(0.7);
 	// `pointer-events: none` on .disabled would let the next drop reach the
 	// document and navigate the tab to the file. The zone still refuses the
 	// drop — no highlight — it just has to be the one refusing.
@@ -179,6 +183,11 @@ test('the sticker zone dims while an upload runs and refuses a drop without ligh
 	release();
 	await expect(page.locator(`${ZONE}.disabled`)).toHaveCount(0);
 	await expect(save).toBeEnabled();
+
+	// A drop that misses the zone (here: the form itself) is swallowed page-wide.
+	const beforeStray = uploads;
+	expect(await dropOn(page, 'form.form', [{ name: 'stray.png', type: 'image/png' }])).toBe(true);
+	expect(uploads).toBe(beforeStray);
 });
 
 test('a failed upload keeps the successes, and an all-failed drop never announces zero', async ({
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index cff708cb..642c28e8 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -353,6 +353,8 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	await expect(page.locator('form.form button[type="submit"]')).toBeDisabled();
 	const replace = page.locator('label.btn-sm');
 	await expect(replace).toHaveClass(/disabled/);
+	// Remove mutates modelUrl the same way a replace does, so it waits too.
+	await expect(page.locator('.model-actions button')).toBeDisabled();
 	const beforeSave = uploads;
 	await dropOn(page, 'label.btn-sm', [{ name: 'e.vrm', type: '' }]);
 	await page.waitForTimeout(300);
@@ -436,6 +438,11 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 	expect(modelUploads).toBe(0);
 	await expect(page.locator('input[name="modelUrl"]')).toHaveValue('');
 
+	// A drop that misses every zone (here: the form itself) is swallowed page-
+	// wide, so the browser never navigates to the file.
+	expect(await dropOn(page, 'form.form', [{ name: 'stray.png', type: 'image/png' }])).toBe(true);
+	expect(uploads).toBe(before);
+
 	// The zone comes back once the submit settles, so a failed save is still
 	// editable. Settled as an action failure rather than an abort: an aborted
 	// fetch makes enhance render the error page, which takes the form away and

From 6c00afa094ac1470400da8b2221397aee5d4f90f Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:27:22 -0700
Subject: [PATCH 12/33] fix(admin): keep zones cancelling non-file drags, pin
 the status text and drop ordering in tests (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  2 +-
 src/lib/drop-files.test.ts                | 17 ++++++++++++-----
 src/lib/drop-files.ts                     | 15 ++++++++++-----
 tests/e2e/vr-admin-form.spec.ts           | 12 +++++++-----
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index db5c95bf..9058a56b 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -181,7 +181,7 @@
 						// or an uppercase one. Both entry points partition against
 						// STICKER_ACCEPT, which lists MIME types only, so anything that
 						// reaches here declared one of the two.
-						format: file.type === 'image/png' ? 'png' : 'webp'
+						format: file.type.toLowerCase() === 'image/png' ? 'png' : 'webp'
 					});
 				} else {
 					failed++;
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index bae1e47a..b344974b 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -118,14 +118,17 @@ describe('dropFiles', () => {
 		expect(el.classes.has('drag-over')).toBe(false);
 	});
 
-	it('does not light up for a drag that carries no files', () => {
+	it('still cancels a drag that carries no files, without lighting up', () => {
+		// A dragged thumbnail or link over the zone must not navigate the tab
+		// either, so the zone stays a drop target; it just offers nothing.
 		const { el } = setup();
 		const ev = Object.assign(new Event('dragover', { cancelable: true }), {
-			dataTransfer: { types: ['text/plain'], files: [], dropEffect: '' }
+			dataTransfer: { types: ['text/uri-list'], files: [], dropEffect: 'copy' }
 		});
 		el.dispatchEvent(ev);
+		expect(ev.defaultPrevented).toBe(true);
+		expect(ev.dataTransfer.dropEffect).toBe('none');
 		expect(el.classes.has('drag-over')).toBe(false);
-		expect(ev.defaultPrevented).toBe(false);
 	});
 
 	it('sets the copy drop effect so the cursor reads as an upload', () => {
@@ -165,7 +168,7 @@ describe('dropFiles', () => {
 		expect(calls).toHaveLength(0);
 	});
 
-	it('leaves an event a nested target already handled alone', () => {
+	it('leaves an event something else already cancelled alone', () => {
 		const { el } = setup(() => true);
 		const over = Object.assign(new Event('dragover', { cancelable: true }), {
 			dataTransfer: { files: [], dropEffect: 'copy' }
@@ -175,14 +178,18 @@ describe('dropFiles', () => {
 		// A disabled instance would have set 'none'; the inner target's 'copy' stays.
 		expect(over.dataTransfer.dropEffect).toBe('copy');
 		// The drop half needs an ENABLED instance: a disabled one ignores the file
-		// regardless, so only this discriminates the defaultPrevented guard.
+		// regardless, so only this discriminates the defaultPrevented guard. Lit
+		// first, so the ordering (clear the highlight, then bail) is pinned too.
 		const inner = setup();
+		inner.el.dispatchEvent(dragEvent('dragenter'));
+		expect(inner.el.classes.has('drag-over')).toBe(true);
 		const drop = Object.assign(new Event('drop', { cancelable: true }), {
 			dataTransfer: { files: [{ name: 'a.png', type: 'image/png' }], dropEffect: '' }
 		});
 		drop.preventDefault();
 		inner.el.dispatchEvent(drop);
 		expect(inner.calls).toHaveLength(0);
+		expect(inner.el.classes.has('drag-over')).toBe(false);
 	});
 
 	it('removes its listeners on cleanup', () => {
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index fa6a6d1c..5d18bf94 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -69,13 +69,18 @@ export function dropFiles(opts: {
 	return (node) => {
 		// preventDefault on dragenter/dragover is what makes the element a drop
 		// target at all; without it the browser opens the file instead. It runs
-		// even while disabled so a drop on a busy zone is swallowed, not navigated.
-		// A nested drop target (the Replace button inside the model card) handles
-		// the event first; an outer swallow-only instance must not then override
-		// its dropEffect, so an already-handled event is left alone.
+		// even while disabled, and for drags that carry no files (a dragged
+		// thumbnail, a link from another tab), so nothing dropped on a zone ever
+		// navigates the tab; only the highlight and cursor are reserved for files.
+		// An event something else already cancelled is left alone so this zone
+		// never overrides that handler's dropEffect.
 		const over = (e: DragEvent) => {
-			if (e.defaultPrevented || !carriesFiles(e)) return;
+			if (e.defaultPrevented) return;
 			e.preventDefault();
+			if (!carriesFiles(e)) {
+				if (e.dataTransfer) e.dataTransfer.dropEffect = 'none';
+				return;
+			}
 			const off = opts.disabled?.() ?? false;
 			if (e.dataTransfer) e.dataTransfer.dropEffect = off ? 'none' : 'copy';
 			if (!off) node.classList.add('drag-over');
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 642c28e8..3eeae56a 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -205,6 +205,8 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	await dropOn(page, '.media-zone', [{ name: 'notes.txt', type: 'text/plain' }]);
 	await expect(page.getByText(/That file type isn't supported/)).toBeVisible();
 	expect(uploads).toBe(before);
+	// The status region moves on from the previous batch's success text too.
+	await expect(page.getByText(/Media upload finished with errors/)).toBeAttached();
 
 	// While an upload runs the zone dims, but it must keep receiving pointer and
 	// drag events: `pointer-events: none` on .disabled would let the next drop
@@ -311,11 +313,11 @@ test('dropping a model file on the model zone uploads one, and a wrong type is r
 	await expect(page.locator('.model-name')).toHaveText('a.vrm');
 	expect(uploads).toBe(before + 1);
 
-	// While an upload runs the progress bar takes the zone's place. It has no
-	// picker of its own, but it still has to swallow a drop: nothing cancels the
-	// event otherwise and the browser navigates the tab to the dropped file,
-	// losing the form. dropOn reports whether preventDefault was called, which is
-	// the cancellation itself — a dispatched DragEvent never navigates on its own.
+	// While an upload runs the progress bar takes the zone's place. A drop there
+	// misses every zone, so the page-wide guard has to cancel it or the browser
+	// navigates the tab to the file, losing the form. dropOn reports whether
+	// preventDefault was called, which is the cancellation itself — a dispatched
+	// DragEvent never navigates on its own.
 	// A drop that misses the Replace button and lands on the card is swallowed:
 	// cancelled, no request, so the browser never navigates to the file.
 	const beforeCard = uploads;

From 4a67b8359a66c9be74b1da767b7caa9f033d5946 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Tue, 1 Sep 2026 16:37:27 -0700
Subject: [PATCH 13/33] docs(admin): say why the page-wide drop guard stays
 narrower than the zones (SONA-216)

---
 src/lib/drop-files.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 5d18bf94..4f40e58d 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -35,7 +35,10 @@ function carriesFiles(e: DragEvent): boolean {
  * Window-level guard for the admin forms that host drop zones: a file dropped
  * anywhere the zones don't cover (the hint under a zone, a media row, blank
  * form) would otherwise navigate the tab to the file and lose the form. Leaves
- * an event a zone already handled alone, and ignores non-file drags.
+ * an event a zone already handled alone, and ignores non-file drags. That is
+ * narrower than the zones on purpose: a zone can cancel every drag because it
+ * holds no text field, but this runs for the whole page, and cancelling a text
+ * or link drag here would block dropping text into the form's own inputs.
  */
 export function swallowStrayFileDrop(e: DragEvent) {
 	if (e.defaultPrevented || !carriesFiles(e)) return;

From 6539b2fa98277e58cbcdd22cd7147cb2fb5ddbbe Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:05:38 -0700
Subject: [PATCH 14/33] feat(admin): device-independent zone hints and a
 persistent sticker error banner (SONA-216)

---
 messages/en.json                          |  17 ++--
 messages/ja.json                          |  17 ++--
 src/lib/components/StickerPackForm.svelte | 112 ++++++++++++++++------
 tests/e2e/sticker-pack-form.spec.ts       |  44 ++++++---
 tests/e2e/vr-admin-form.spec.ts           |   6 +-
 5 files changed, 137 insertions(+), 59 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 8ccf7931..84e08ab7 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -409,8 +409,8 @@
 	"admin_upload_uploaded": "Uploaded",
 	"admin_upload_replace_hint": "Click or drag to replace",
 	"admin_upload_retry_hint": "Click or drag to try again",
-	"admin_upload_dropzone": "Drag & drop images here, or click to browse",
-	"admin_upload_dropzone_multi": "Drag & drop up to {max} images here, click to browse, or paste from clipboard",
+	"admin_upload_dropzone": "Choose images, or drag them here",
+	"admin_upload_dropzone_multi": "Choose up to {max} images, drag them here, or paste from the clipboard",
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
 	"admin_upload_error_too_large": "This file is over {max}. Try a smaller image.",
@@ -854,10 +854,11 @@
 	"admin_pack_save_failed": "Could not save pack",
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
-	"admin_pack_upload_partial": "{ok} of {total} uploaded, {failed} failed",
-	"admin_pack_upload_bad_type": "Skipped {names}. Add PNG or WebP images instead.",
-	"admin_pack_upload_bad_type_many": "Skipped {count} files. Add PNG or WebP images instead.",
 	"admin_pack_upload_none": "No stickers added",
+	"admin_pack_upload_issues": "Sticker upload finished with errors — see the messages below the dropzone.",
+	"admin_pack_error_bad_type": "That file type isn't supported. Use PNG or WebP.",
+	"admin_pack_error_too_large": "This file is over {max}.",
+	"admin_pack_error_failed": "Upload failed. Check your connection and try again.",
 	"admin_pack_upload_done": [
 		{
 			"declarations": [
@@ -889,7 +890,7 @@
 	"admin_pack_publish_off": "Off — saved as draft",
 	"admin_pack_default_artist": "Default artist",
 	"admin_pack_edit_hint": "Note: saving replaces all sticker rows. Drag the handle to reorder; order is saved top-to-bottom.",
-	"admin_pack_dropzone": "Drag & drop PNGs or WebP here, or click to browse",
+	"admin_pack_dropzone": "Choose PNG or WebP images, or drag them here",
 	"admin_pack_bulk_tip": "Tip: click a sticker to select (shift-click for a range), then bulk-set the artist or NSFW.",
 	"admin_pack_select_all": "Select all {count}",
 	"admin_pack_selected": "{count} selected",
@@ -1564,7 +1565,7 @@
 	"admin_vr_field_role_label": "Role name",
 	"admin_vr_role_label_placeholder": "e.g. Blendshapes",
 	"admin_vr_field_model": "Model file",
-	"admin_vr_dropzone": "Drag & drop a .vrm or .fbx file here, or click to browse (max {max})",
+	"admin_vr_dropzone": "Choose a .vrm or .fbx file, or drag it here (max {max})",
 	"admin_vr_model_hint": "VRM 0.x and 1.0 both work in the 3D viewer. You can still offer FBX files as a download, but the viewer won't display them.",
 	"admin_vr_upload_progress": "{loaded} of {total} uploaded",
 	"admin_vr_upload_replace": "Replace",
@@ -1579,7 +1580,7 @@
 	"admin_vr_permission_placeholder": "e.g. Telegram DM 2026-08-01 — required to offer downloads",
 	"admin_vr_section_media": "Showcase media",
 	"admin_vr_media_hint": "Screenshots and short clips shown under the poster on the public page. Clips can't carry captions, so don't put anything important in speech or audio. They start muted, but visitors can turn the sound on, so you need consent from anyone recorded in the clip.",
-	"admin_vr_media_dropzone": "Drag & drop screenshots or short .webm clips here, or click to browse (max {max} each)",
+	"admin_vr_media_dropzone": "Choose screenshots or short .webm clips, or drag them here (max {max} each)",
 	"admin_vr_media_kind_image": "Image",
 	"admin_vr_media_kind_video": "Clip",
 	"admin_vr_media_remove": "Remove media {position}",
diff --git a/messages/ja.json b/messages/ja.json
index 7dc6a89a..fd2659b3 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -353,8 +353,8 @@
 	"admin_upload_uploaded": "アップロード完了",
 	"admin_upload_replace_hint": "クリックまたはドラッグで差し替え",
 	"admin_upload_retry_hint": "クリックまたはドラッグで再試行",
-	"admin_upload_dropzone": "ここに画像をドラッグ＆ドロップするか、クリックして選択してください",
-	"admin_upload_dropzone_multi": "ここに最大{max}枚の画像をドラッグ＆ドロップするか、クリックして選択、またはクリップボードから貼り付けてください",
+	"admin_upload_dropzone": "画像を選択するか、ここにドラッグしてください",
+	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグ、またはクリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
@@ -644,10 +644,11 @@
 	"admin_pack_save_failed": "セットを保存できませんでした",
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
-	"admin_pack_upload_partial": "{total}件中{ok}件をアップロードしました（{failed}件は失敗）",
-	"admin_pack_upload_bad_type": "{names}をスキップしました。PNGまたはWebPの画像を追加してください。",
-	"admin_pack_upload_bad_type_many": "{count}件のファイルをスキップしました。PNGまたはWebPの画像を追加してください。",
 	"admin_pack_upload_none": "ステッカーは追加されませんでした",
+	"admin_pack_upload_issues": "ステッカーのアップロードが完了しましたが、エラーがあります — ドロップゾーンの下のメッセージを確認してください。",
+	"admin_pack_error_bad_type": "対応していないファイル形式です。PNGまたはWebPをご利用ください。",
+	"admin_pack_error_too_large": "このファイルは{max}を超えています。",
+	"admin_pack_error_failed": "アップロードに失敗しました。接続を確認してもう一度お試しください。",
 	"admin_pack_upload_done": "ステッカーを{count}枚追加しました",
 	"admin_pack_details": "セットの詳細",
 	"admin_pack_name": "セット名",
@@ -665,7 +666,7 @@
 	"admin_pack_publish_off": "オフ — 下書きとして保存されます",
 	"admin_pack_default_artist": "デフォルトのアーティスト",
 	"admin_pack_edit_hint": "注意: 保存するとすべてのステッカー行が置き換えられます。ハンドルをドラッグして並べ替えられます。順序は上から下の順で保存されます。",
-	"admin_pack_dropzone": "PNGまたはWebPをここにドラッグ＆ドロップするか、クリックして選択してください",
+	"admin_pack_dropzone": "PNGまたはWebPの画像を選択するか、ここにドラッグしてください",
 	"admin_pack_bulk_tip": "ヒント: ステッカーをクリックで選択（Shift+クリックで範囲選択）し、アーティストやNSFWをまとめて設定できます。",
 	"admin_pack_select_all": "{count}件すべて選択",
 	"admin_pack_selected": "{count}件選択中",
@@ -1242,7 +1243,7 @@
 	"admin_vr_field_role_label": "役割名",
 	"admin_vr_role_label_placeholder": "例: ブレンドシェイプ",
 	"admin_vr_field_model": "モデルファイル",
-	"admin_vr_dropzone": ".vrmまたは.fbxファイルをここにドラッグ＆ドロップするか、クリックして選択してください（最大{max}）",
+	"admin_vr_dropzone": ".vrmまたは.fbxファイルを選択するか、ここにドラッグしてください（最大{max}）",
 	"admin_vr_model_hint": "3DビューアはVRM 0.xと1.0の両方に対応しています。FBXファイルはダウンロード用に提供できますが、ビューアには表示されません。",
 	"admin_vr_upload_progress": "{total}中{loaded}をアップロード済み",
 	"admin_vr_upload_replace": "差し替え",
@@ -1257,7 +1258,7 @@
 	"admin_vr_permission_placeholder": "例: Telegram DM 2026-08-01 — ダウンロード提供に必須",
 	"admin_vr_section_media": "ショーケースメディア",
 	"admin_vr_media_hint": "公開ページでポスターの下に表示されるスクリーンショットや短いクリップです。クリップには字幕を付けられないため、重要な内容を音声に頼らないでください。再生はミュートで始まりますが、訪問者は音声をオンにできます — クリップに記録されている人がいる場合は、その人の同意が必要です。",
-	"admin_vr_media_dropzone": "スクリーンショットや短い.webmクリップをここにドラッグ＆ドロップするか、クリックして選択してください（各最大{max}）",
+	"admin_vr_media_dropzone": "スクリーンショットや短い.webmクリップを選択するか、ここにドラッグしてください（各最大{max}）",
 	"admin_vr_media_kind_image": "画像",
 	"admin_vr_media_kind_video": "クリップ",
 	"admin_vr_media_remove": "メディア{position}を削除",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 9058a56b..1a3a9521 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -5,6 +5,10 @@
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
 	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
+	import { MAX_BUFFER_BYTES } from '$lib/config';
+	// The shared size formatter; it lives in $lib/vr only because that page needed
+	// it first, and it carries no VR-specific behaviour.
+	import { formatBytes } from '$lib/vr';
 	import * as m from '$lib/paraglide/messages';
 	import StickerMedia from '$lib/components/StickerMedia.svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
@@ -110,14 +114,28 @@
 	// bare .png here would upload the whole file just to collect a 415.
 	const STICKER_ACCEPT = 'image/png,image/webp';
 
+	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
+	const MAX_STICKER_BYTES = MAX_BUFFER_BYTES;
+
 	let uploading = $state(false);
 	// Upload start/done announcements for the stickers section's live region:
 	// the zone label and the new rows show both, but only visually.
 	let stickerStatus = $state('');
+	// Per-file failure reporting, the same shape the VR media zone uses: a
+	// multi-file pick partially succeeds often, and a toast both disappears and
+	// collapses the batch into one line that reads as if everything failed. uid
+	// keys the {#each}: two same-named files failing the same way are distinct
+	// rows, so a name+reason key would collide.
+	let stickerErrorUid = 0;
+	let stickerErrors = $state<
+		{ uid: number; name: string; reason: 'too-large' | 'bad-type' | 'failed' }[]
+	>([]);
 	let published = $state(pack?.published ?? false);
 	let saving = $state(false);
 
-	async function uploadFile(file: File): Promise<string | null> {
+	// Returns the stored URL, or the response status so the caller can name the
+	// reason in the error banner instead of a bare "failed".
+	async function uploadFile(file: File): Promise<{ url: string } | { status: number }> {
 		const fd = new FormData();
 		fd.append('file', file);
 		// Keep sticker/cover uploads in the stickers/ partition instead of leaking
@@ -126,9 +144,9 @@
 		// until the form is saved — so stickers/ is the correct target for now.
 		fd.append('folder', 'stickers');
 		const res = await fetch('/api/upload', { method: 'POST', body: fd });
-		if (!res.ok) return null;
+		if (!res.ok) return { status: res.status };
 		const { url } = (await res.json()) as { url: string };
-		return url;
+		return { url };
 	}
 
 	function uploadStickers(e: Event) {
@@ -146,34 +164,36 @@
 	// Shared by the file input and the drop attachment; both partition their
 	// files first, so `rejected` is reported without being uploaded.
 	async function addStickerFiles(files: File[], rejected: File[] = []) {
-		if (rejected.length) {
-			// Cap the list: a folder dropped whole would otherwise put dozens of
-			// names in one toast. Past three, a count reads better than three names
-			// and a trailing ellipsis.
-			toast.error(
-				rejected.length > 3
-					? m.admin_pack_upload_bad_type_many({ count: rejected.length })
-					: m.admin_pack_upload_bad_type({ names: rejected.map((f) => f.name).join(', ') })
-			);
+		// A fresh batch replaces the previous batch's messages: leaving them would
+		// name files the operator has already dealt with.
+		stickerErrors = rejected.map((file) => ({
+			uid: stickerErrorUid++,
+			name: file.name,
+			reason: 'bad-type' as const
+		}));
+		if (!files.length) {
+			// Nothing to upload, but the status region must not keep the last
+			// batch's text beside a fresh bad-type banner.
+			if (rejected.length) stickerStatus = m.admin_pack_upload_issues();
+			return;
 		}
-		if (!files.length) return;
 		uploading = true;
 		stickerStatus = m.admin_upload_uploading();
 		let ok = 0;
-		let failed = 0;
 		try {
 			for (const file of files) {
-				let url: string | null = null;
+				let result: { url: string } | { status: number };
 				try {
-					url = await uploadFile(file);
+					result = await uploadFile(file);
 				} catch {
-					url = null;
+					// A thrown fetch (offline, aborted) carries no status of its own.
+					result = { status: 0 };
 				}
-				if (url) {
+				if ('url' in result) {
 					ok++;
 					stickerEntries.push({
 						uid: nextUid++,
-						imageUrl: url,
+						imageUrl: result.url,
 						artistId: '',
 						emojis: '',
 						nsfw: false,
@@ -184,21 +204,35 @@
 						format: file.type.toLowerCase() === 'image/png' ? 'png' : 'webp'
 					});
 				} else {
-					failed++;
+					// Keep the successful uploads; the banner names what didn't land.
+					stickerErrors = [
+						...stickerErrors,
+						{
+							uid: stickerErrorUid++,
+							name: file.name,
+							reason:
+								result.status === 413 ? 'too-large' : result.status === 415 ? 'bad-type' : 'failed'
+						}
+					];
 				}
 			}
 			stickerEntries = [...stickerEntries];
 		} finally {
 			uploading = false;
 			// Alongside clearing `uploading`, so a throw can't strand the region on
-			// "Uploading…". Always the done count, even on a partial failure: the
-			// toast is a live region too, and repeating the failure here reads it
-			// out twice. When every upload failed, "0 stickers added" is a count of
-			// nothing — say so in words instead.
-			stickerStatus = ok === 0 ? m.admin_pack_upload_none() : m.admin_pack_upload_done({ count: ok });
+			// "Uploading…". The banner names the failed files, so the region only
+			// has to say the batch finished badly — the same split the VR media
+			// zone announces. The "none added" arm stays as the floor for a batch
+			// that adds nothing without recording an error ("0 stickers added" is a
+			// count of nothing); every file today lands as a row or an error line,
+			// so it is a guard rather than a branch the UI reaches.
+			stickerStatus =
+				stickerErrors.length > 0
+					? m.admin_pack_upload_issues()
+					: ok === 0
+						? m.admin_pack_upload_none()
+						: m.admin_pack_upload_done({ count: ok });
 		}
-		// Keep the successful uploads; surface the failures without discarding them.
-		if (failed > 0) toast.error(m.admin_pack_upload_partial({ ok, total: files.length, failed }));
 	}
 
 	function removeSticker(i: number) {
@@ -380,6 +414,24 @@
 			<span>{uploading ? m.admin_upload_uploading() : m.admin_pack_dropzone()}</span>
 			<input type="file" accept={STICKER_ACCEPT} multiple onchange={uploadStickers} disabled={uploading || saving} class="sr-file" />
 		</label>
+		{#if stickerErrors.length > 0}
+			<div class="banner err" role="alert">
+				<!-- One line per failed file: a multi-pick can partially succeed, and
+				     an unnamed error beside fresh rows misreads as total failure. -->
+				{#each stickerErrors as err (err.uid)}
+					<p class="banner-line">
+						<strong>{err.name}</strong> —
+						{#if err.reason === 'too-large'}
+							{m.admin_pack_error_too_large({ max: formatBytes(MAX_STICKER_BYTES) })}
+						{:else if err.reason === 'bad-type'}
+							{m.admin_pack_error_bad_type()}
+						{:else}
+							{m.admin_pack_error_failed()}
+						{/if}
+					</p>
+				{/each}
+			</div>
+		{/if}
 
 		{#if stickerEntries.length > 0}
 			<!-- Bulk bar: select rows (click / shift-click range / Select all), then set
@@ -530,6 +582,12 @@
 	.intro { font-size: 13px; color: var(--muted-foreground); max-width: 70ch; margin: 0; }
 	.banner { padding: 12px 16px; border-radius: var(--radius-s); font-size: 13px; margin-bottom: 16px; }
 	.banner.err { background: rgba(248,113,113,0.12); color: #f87171; }
+	/* Inside a section the flex gap already spaces siblings; the banner's own
+	   margin would double it. The form-level banner above the form keeps its
+	   margin. */
+	.section > .banner { margin-bottom: 0; }
+	.banner-line { margin: 0; overflow-wrap: anywhere; }
+	.banner-line + .banner-line { margin-top: 6px; }
 	.form { display: flex; flex-direction: column; gap: 32px; max-width: 700px; }
 	.section { display: flex; flex-direction: column; gap: 16px; }
 	h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index 4ea054c0..c1b31084 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -63,20 +63,29 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	await expectDragOverHighlight(page, ZONE);
 
 	// A dropped file skips the input's accept filter, so the zone rejects the
-	// wrong type itself: a toast naming the file, and no POST.
+	// wrong type itself: a persistent banner naming the file, and no POST.
 	const before = uploads;
+	const banner = page.locator('.banner.err');
 	await dropOn(page, ZONE, [{ name: 'notes.txt', type: 'text/plain' }]);
-	await expect(page.getByText('Skipped notes.txt. Add PNG or WebP images instead.')).toBeVisible();
+	await expect(banner).toBeVisible();
+	await expect(banner.locator('.banner-line')).toHaveText([
+		/notes\.txt — That file type isn't supported\. Use PNG or WebP\./
+	]);
 	expect(uploads).toBe(before);
+	// Nothing to upload, so the live region says the batch ended badly rather
+	// than keeping the previous batch's success text.
+	await expect(status).toHaveText('Sticker upload finished with errors — see the messages below the dropzone.');
 
-	// Past three rejects the toast switches to a count: a folder dropped whole
-	// would otherwise be a wall of names ending in an ellipsis.
+	// The list is uncapped and per-file: a folder dropped whole names every file
+	// it refused instead of collapsing to a count.
 	await dropOn(
 		page,
 		ZONE,
 		['a.txt', 'b.txt', 'c.txt', 'd.txt'].map((name) => ({ name, type: 'text/plain' }))
 	);
-	await expect(page.getByText('Skipped 4 files. Add PNG or WebP images instead.')).toBeVisible();
+	await expect(banner.locator('.banner-line')).toHaveCount(4);
+	await expect(banner.locator('.banner-line').first()).toContainText('a.txt');
+	await expect(banner.locator('.banner-line').last()).toContainText('d.txt');
 	expect(uploads).toBe(before);
 });
 
@@ -190,7 +199,7 @@ test('the sticker zone dims while an upload runs and refuses a drop without ligh
 	expect(uploads).toBe(beforeStray);
 });
 
-test('a failed upload keeps the successes, and an all-failed drop never announces zero', async ({
+test('a failed upload keeps the successes, and the banner names the file that failed', async ({
 	page
 }) => {
 	await adminLogin(page, PASSWORD);
@@ -223,16 +232,23 @@ test('a failed upload keeps the successes, and an all-failed drop never announce
 	// The one that landed is kept rather than discarded with the batch…
 	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x1.png');
 	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveCount(0);
-	await expect(page.getByText('1 of 2 uploaded, 1 failed')).toBeVisible();
-	// …and the live region reports what was added, not the failure: the toast is
-	// a live region too.
-	await expect(status).toHaveText('1 sticker added');
+	// …and the banner names the one that didn't, rather than a count that leaves
+	// the operator guessing which file to re-add.
+	const banner = page.locator('.banner.err');
+	await expect(banner.locator('.banner-line')).toHaveText([
+		/b\.png — Upload failed\. Check your connection and try again\./
+	]);
+	// The live region says the batch finished badly; the banner carries the names.
+	await expect(status).toHaveText('Sticker upload finished with errors — see the messages below the dropzone.');
 
-	// Nothing landed at all, which as a count would read "0 stickers added".
+	// A fresh batch replaces the previous batch's lines rather than appending to
+	// files the operator has already dealt with.
 	calls = 0;
 	failCalls = [1];
 	await dropOn(page, ZONE, [{ name: 'c.png', type: 'image/png' }]);
-	await expect(status).toHaveText('No stickers added');
+	await expect(banner.locator('.banner-line')).toHaveText([
+		/c\.png — Upload failed\. Check your connection and try again\./
+	]);
 });
 
 test('the sticker zone refuses files while a save is in flight', async ({ page }) => {
@@ -335,7 +351,9 @@ test('picking a sticker resets the input, and a picked wrong type is rejected',
 		mimeType: 'image/jpeg',
 		buffer: Buffer.from([1, 2, 3, 4])
 	});
-	await expect(page.getByText('Skipped photo.jpg. Add PNG or WebP images instead.')).toBeVisible();
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/photo\.jpg — That file type isn't supported\. Use PNG or WebP\./
+	]);
 	expect(uploads).toBe(before);
 	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveCount(0);
 });
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 3eeae56a..ed42eeee 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -25,7 +25,7 @@ test('the create form renders its fields, dropzones and credit control', async (
 	await expect(page.locator('select[name="characterId"]')).toBeVisible();
 
 	// Model dropzone.
-	await expect(page.getByText(/Drag & drop a \.vrm or \.fbx file here/)).toBeVisible();
+	await expect(page.getByText(/Choose a \.vrm or \.fbx file, or drag it here/)).toBeVisible();
 	// Format expectations under the dropzone (VR feedback round): which VRM
 	// versions the viewer takes, and that FBX is download-only.
 	await expect(page.getByText(/VRM 0\.x and 1\.0 both work in the 3D viewer/)).toBeVisible();
@@ -39,7 +39,7 @@ test('the create form renders its fields, dropzones and credit control', async (
 
 	// Showcase media manager (SP1) with its own dropzone.
 	await expect(page.getByRole('heading', { name: 'Showcase media' })).toBeVisible();
-	await expect(page.getByText(/Drag & drop screenshots or short \.webm clips here/)).toBeVisible();
+	await expect(page.getByText(/Choose screenshots or short \.webm clips, or drag them here/)).toBeVisible();
 
 	// Credits editor entry point.
 	await expect(page.getByRole('button', { name: 'Add credit' })).toBeVisible();
@@ -186,7 +186,7 @@ test('dropping a file on the showcase media zone uploads it, and a wrong type is
 	});
 
 	await page.goto('/admin/vr/new');
-	await expect(page.getByText(/Drag & drop screenshots or short \.webm clips here/)).toBeVisible();
+	await expect(page.getByText(/Choose screenshots or short \.webm clips, or drag them here/)).toBeVisible();
 
 	// Hydration-retry shape (see upload.spec.ts): a drop dispatched before the
 	// attachment has run silently does nothing. The counter resets per attempt.

From 1922419bc941b2c6309085e1dcf8732a2171aef8 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:08:12 -0700
Subject: [PATCH 15/33] fix(admin): drop the unreachable no-stickers status
 branch for parity with the VR form (SONA-216)

---
 messages/en.json                          |  1 -
 messages/ja.json                          |  1 -
 src/lib/components/StickerPackForm.svelte | 12 +++---------
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 84e08ab7..b164cab6 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -854,7 +854,6 @@
 	"admin_pack_save_failed": "Could not save pack",
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
-	"admin_pack_upload_none": "No stickers added",
 	"admin_pack_upload_issues": "Sticker upload finished with errors — see the messages below the dropzone.",
 	"admin_pack_error_bad_type": "That file type isn't supported. Use PNG or WebP.",
 	"admin_pack_error_too_large": "This file is over {max}.",
diff --git a/messages/ja.json b/messages/ja.json
index fd2659b3..9d4c0b98 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -644,7 +644,6 @@
 	"admin_pack_save_failed": "セットを保存できませんでした",
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
-	"admin_pack_upload_none": "ステッカーは追加されませんでした",
 	"admin_pack_upload_issues": "ステッカーのアップロードが完了しましたが、エラーがあります — ドロップゾーンの下のメッセージを確認してください。",
 	"admin_pack_error_bad_type": "対応していないファイル形式です。PNGまたはWebPをご利用ください。",
 	"admin_pack_error_too_large": "このファイルは{max}を超えています。",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 1a3a9521..ad64d1ea 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -222,16 +222,10 @@
 			// Alongside clearing `uploading`, so a throw can't strand the region on
 			// "Uploading…". The banner names the failed files, so the region only
 			// has to say the batch finished badly — the same split the VR media
-			// zone announces. The "none added" arm stays as the floor for a batch
-			// that adds nothing without recording an error ("0 stickers added" is a
-			// count of nothing); every file today lands as a row or an error line,
-			// so it is a guard rather than a branch the UI reaches.
+			// zone announces. Every file lands as a row or an error line, so a
+			// batch with no errors always added at least one.
 			stickerStatus =
-				stickerErrors.length > 0
-					? m.admin_pack_upload_issues()
-					: ok === 0
-						? m.admin_pack_upload_none()
-						: m.admin_pack_upload_done({ count: ok });
+				stickerErrors.length > 0 ? m.admin_pack_upload_issues() : m.admin_pack_upload_done({ count: ok });
 		}
 	}
 

From 7d7986d2c1086663a1c5619eb010490effebcebf Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:35:51 -0700
Subject: [PATCH 16/33] fix(admin): theme-safe sticker error banner,
 client-side size check, and status-code tests (SONA-216)

---
 messages/en.json                          |  6 +-
 messages/ja.json                          |  8 +-
 src/lib/components/StickerPackForm.svelte | 24 ++++--
 tests/e2e/drop-files.ts                   | 16 +++-
 tests/e2e/sticker-pack-form.spec.ts       | 94 ++++++++++++++++++++++-
 tests/e2e/upload.spec.ts                  |  5 ++
 6 files changed, 136 insertions(+), 17 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index b164cab6..f0b1e773 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -854,9 +854,9 @@
 	"admin_pack_save_failed": "Could not save pack",
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
-	"admin_pack_upload_issues": "Sticker upload finished with errors — see the messages below the dropzone.",
+	"admin_pack_upload_issues": "Sticker upload finished with errors. Each file that failed is listed with its reason.",
 	"admin_pack_error_bad_type": "That file type isn't supported. Use PNG or WebP.",
-	"admin_pack_error_too_large": "This file is over {max}.",
+	"admin_pack_error_too_large": "This file is over {max}. Try a smaller image.",
 	"admin_pack_error_failed": "Upload failed. Check your connection and try again.",
 	"admin_pack_upload_done": [
 		{
@@ -1584,7 +1584,7 @@
 	"admin_vr_media_kind_video": "Clip",
 	"admin_vr_media_remove": "Remove media {position}",
 	"admin_vr_media_upload_done": "Media upload finished.",
-	"admin_vr_media_upload_issues": "Media upload finished with errors — see the messages below the dropzone.",
+	"admin_vr_media_upload_issues": "Media upload finished with errors. Each file that failed is listed with its reason.",
 	"admin_vr_media_error_too_large": "This file is over {max}. Try a smaller image, or a shorter clip at a lower resolution.",
 	"admin_vr_media_error_bad_type": "That file type isn't supported. Use JPEG, PNG, GIF, WebP, AVIF, or a .webm clip.",
 	"admin_vr_media_error_failed": "Upload failed. Check your connection and try again.",
diff --git a/messages/ja.json b/messages/ja.json
index 9d4c0b98..45c359f8 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -354,7 +354,7 @@
 	"admin_upload_replace_hint": "クリックまたはドラッグで差し替え",
 	"admin_upload_retry_hint": "クリックまたはドラッグで再試行",
 	"admin_upload_dropzone": "画像を選択するか、ここにドラッグしてください",
-	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグ、またはクリップボードから貼り付けてください",
+	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグするか、クリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
@@ -644,9 +644,9 @@
 	"admin_pack_save_failed": "セットを保存できませんでした",
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
-	"admin_pack_upload_issues": "ステッカーのアップロードが完了しましたが、エラーがあります — ドロップゾーンの下のメッセージを確認してください。",
+	"admin_pack_upload_issues": "ステッカーのアップロードがエラーで終了しました。失敗したファイルはそれぞれ理由とともに表示されています。",
 	"admin_pack_error_bad_type": "対応していないファイル形式です。PNGまたはWebPをご利用ください。",
-	"admin_pack_error_too_large": "このファイルは{max}を超えています。",
+	"admin_pack_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
 	"admin_pack_error_failed": "アップロードに失敗しました。接続を確認してもう一度お試しください。",
 	"admin_pack_upload_done": "ステッカーを{count}枚追加しました",
 	"admin_pack_details": "セットの詳細",
@@ -1262,7 +1262,7 @@
 	"admin_vr_media_kind_video": "クリップ",
 	"admin_vr_media_remove": "メディア{position}を削除",
 	"admin_vr_media_upload_done": "メディアのアップロードが完了しました。",
-	"admin_vr_media_upload_issues": "メディアのアップロードが完了しましたが、エラーがあります — ドロップゾーンの下のメッセージを確認してください。",
+	"admin_vr_media_upload_issues": "メディアのアップロードがエラーで終了しました。失敗したファイルはそれぞれ理由とともに表示されています。",
 	"admin_vr_media_error_too_large": "このファイルは{max}を超えています。画像を小さくするか、クリップを短く低解像度にしてみてください。",
 	"admin_vr_media_error_bad_type": "対応していないファイル形式です。JPEG・PNG・GIF・WebP・AVIF、または.webmクリップをご利用ください。",
 	"admin_vr_media_error_failed": "アップロードに失敗しました。接続を確認してもう一度お試しください。",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index ad64d1ea..21ff1400 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -134,8 +134,10 @@
 	let saving = $state(false);
 
 	// Returns the stored URL, or the response status so the caller can name the
-	// reason in the error banner instead of a bare "failed".
-	async function uploadFile(file: File): Promise<{ url: string } | { status: number }> {
+	// reason in the error banner instead of a bare "failed". Both are optional
+	// because a 2xx whose body carries no url is neither: the caller's typeof
+	// check reads that as a plain failure rather than storing `undefined`.
+	async function uploadFile(file: File): Promise<{ url?: string; status?: number }> {
 		const fd = new FormData();
 		fd.append('file', file);
 		// Keep sticker/cover uploads in the stickers/ partition instead of leaking
@@ -145,7 +147,7 @@
 		fd.append('folder', 'stickers');
 		const res = await fetch('/api/upload', { method: 'POST', body: fd });
 		if (!res.ok) return { status: res.status };
-		const { url } = (await res.json()) as { url: string };
+		const { url } = (await res.json()) as { url?: string };
 		return { url };
 	}
 
@@ -182,14 +184,24 @@
 		let ok = 0;
 		try {
 			for (const file of files) {
-				let result: { url: string } | { status: number };
+				// Client-side cap, ahead of the POST: /api/upload would answer 413
+				// only after the whole body went up the wire, so an oversized file
+				// costs the operator the upload before it can be named.
+				if (file.size > MAX_STICKER_BYTES) {
+					stickerErrors = [
+						...stickerErrors,
+						{ uid: stickerErrorUid++, name: file.name, reason: 'too-large' }
+					];
+					continue;
+				}
+				let result: { url?: string; status?: number };
 				try {
 					result = await uploadFile(file);
 				} catch {
 					// A thrown fetch (offline, aborted) carries no status of its own.
 					result = { status: 0 };
 				}
-				if ('url' in result) {
+				if (typeof result.url === 'string') {
 					ok++;
 					stickerEntries.push({
 						uid: nextUid++,
@@ -575,7 +587,7 @@
 	.page-header h1 { font-size: 22px; margin: 0 0 4px; }
 	.intro { font-size: 13px; color: var(--muted-foreground); max-width: 70ch; margin: 0; }
 	.banner { padding: 12px 16px; border-radius: var(--radius-s); font-size: 13px; margin-bottom: 16px; }
-	.banner.err { background: rgba(248,113,113,0.12); color: #f87171; }
+	.banner.err { background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--foreground); }
 	/* Inside a section the flex gap already spaces siblings; the banner's own
 	   margin would double it. The form-level banner above the form keeps its
 	   margin. */
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index 98a3d72c..e7c97d8d 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -13,13 +13,25 @@ import { expect, type Page } from '@playwright/test';
  * the only thing standing between a dropped file and the browser navigating the
  * tab to it. A dispatched (untrusted) DragEvent never navigates on its own, so
  * the return value is how a swallow-only target can be asserted at all.
+ *
+ * `size`, when given, builds the file from that many zero bytes instead of the
+ * usual 4 — the only way to exercise a client-side size cap, which reads
+ * `File.size` and never looks at the contents.
  */
-export function dropOn(page: Page, selector: string, files: { name: string; type: string }[]) {
+export function dropOn(
+	page: Page,
+	selector: string,
+	files: { name: string; type: string; size?: number }[]
+) {
 	return page.evaluate(
 		({ selector, files }) => {
 			const dt = new DataTransfer();
 			for (const f of files)
-				dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], f.name, { type: f.type }));
+				dt.items.add(
+					new File([f.size ? new ArrayBuffer(f.size) : new Uint8Array([1, 2, 3, 4])], f.name, {
+						type: f.type
+					})
+				);
 			return !document.querySelector(selector)!.dispatchEvent(
 				new DragEvent('drop', { dataTransfer: dt, bubbles: true, cancelable: true })
 			);
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index c1b31084..dd33feb0 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -17,6 +17,12 @@ const PASSWORD = 'e2e-admin-password';
 
 const ZONE = '.upload-zone.multi';
 
+// $lib/config's MAX_BUFFER_BYTES, restated rather than imported: config.ts
+// imports $app/environment, which does not resolve outside the Vite build (the
+// upload spec restates the same cap for the same reason). Drift is caught by
+// the unit test that pins MAX_BUFFER_BYTES to this value.
+const MAX_BUFFER_BYTES = 64 * 1024 * 1024;
+
 test('dropping a sticker adds a row, and a wrong type is rejected without a request', async ({
 	page
 }) => {
@@ -39,6 +45,9 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	await page.goto('/admin/stickers/manual');
 	const zone = page.locator(ZONE);
 	await expect(zone).toBeVisible();
+	// The idle label names both ways in, and the two formats the zone takes —
+	// the accept filter is invisible until a drop is refused otherwise.
+	await expect(zone).toContainText('Choose PNG or WebP images, or drag them here');
 	// The stickers section's always-mounted live region.
 	const status = page.locator('span.sr-only[role="status"]');
 
@@ -74,7 +83,7 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	expect(uploads).toBe(before);
 	// Nothing to upload, so the live region says the batch ended badly rather
 	// than keeping the previous batch's success text.
-	await expect(status).toHaveText('Sticker upload finished with errors — see the messages below the dropzone.');
+	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed is listed with its reason.');
 
 	// The list is uncapped and per-file: a folder dropped whole names every file
 	// it refused instead of collapsing to a count.
@@ -239,7 +248,7 @@ test('a failed upload keeps the successes, and the banner names the file that fa
 		/b\.png — Upload failed\. Check your connection and try again\./
 	]);
 	// The live region says the batch finished badly; the banner carries the names.
-	await expect(status).toHaveText('Sticker upload finished with errors — see the messages below the dropzone.');
+	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed is listed with its reason.');
 
 	// A fresh batch replaces the previous batch's lines rather than appending to
 	// files the operator has already dealt with.
@@ -249,6 +258,17 @@ test('a failed upload keeps the successes, and the banner names the file that fa
 	await expect(banner.locator('.banner-line')).toHaveText([
 		/c\.png — Upload failed\. Check your connection and try again\./
 	]);
+
+	// A batch that fully succeeds takes the banner away entirely, rather than
+	// leaving a stale alert beside rows that all landed.
+	calls = 0;
+	failCalls = [];
+	await dropOn(page, ZONE, [{ name: 'd.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveValue('/x1.png');
+	await expect(page.locator('.banner.err')).toHaveCount(0);
+	// …and the live region goes back to the added count instead of holding the
+	// previous batch's failure text.
+	await expect(status).toHaveText('1 sticker added');
 });
 
 test('the sticker zone refuses files while a save is in flight', async ({ page }) => {
@@ -357,3 +377,73 @@ test('picking a sticker resets the input, and a picked wrong type is rejected',
 	expect(uploads).toBe(before);
 	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveCount(0);
 });
+
+test('an oversized sticker is refused client-side, without a POST', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	const status = page.locator('span.sr-only[role="status"]');
+	await waitForDropAttachment(page, ZONE);
+
+	// One byte past the cap /api/upload enforces. Without the client-side check
+	// the whole 64 MB goes up the wire just to collect a 413, so the assertion
+	// that matters is the absent request, not only the message.
+	await dropOn(page, ZONE, [
+		{ name: 'huge.png', type: 'image/png', size: MAX_BUFFER_BYTES + 1 },
+		{ name: 'small.png', type: 'image/png' }
+	]);
+	// The rest of the batch still uploads — one bad file doesn't sink the drop.
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x1.png');
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/huge\.png — This file is over 64\.0 MB\. Try a smaller image\./
+	]);
+	expect(uploads).toBe(1);
+	await expect(status).toHaveText(
+		'Sticker upload finished with errors. Each file that failed is listed with its reason.'
+	);
+});
+
+test('a 413 reads as too large and a 415 as an unsupported type', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	// The form awaits each POST in turn, so the call index picks the status each
+	// file gets back.
+	let calls = 0;
+	const statuses: Record<number, number> = { 1: 413, 2: 415 };
+	await page.route('**/api/upload', async (route) => {
+		calls++;
+		const status = statuses[calls];
+		if (status) {
+			await route.fulfill({ status, contentType: 'text/plain', body: 'nope' });
+			return;
+		}
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${calls}.png` })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+
+	// Both files pass the client-side checks (right type, small enough), so the
+	// reason on each line can only have come from the server's status code.
+	await dropOn(page, ZONE, [
+		{ name: 'big.png', type: 'image/png' },
+		{ name: 'odd.png', type: 'image/png' }
+	]);
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/big\.png — This file is over 64\.0 MB\. Try a smaller image\./,
+		/odd\.png — That file type isn't supported\. Use PNG or WebP\./
+	]);
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveCount(0);
+});
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 2094e851..306e4459 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -95,6 +95,11 @@ test('admin upload streams to UploadThing and the stored image renders', async (
 	);
 
 	await page.goto('/admin/upload');
+	// The zone's hint names all three ways in and the batch limit — the cap is
+	// otherwise invisible until a ninth file is refused. 8 = MAX_VARIANT_SET.
+	await expect(page.locator('.dropzone')).toContainText(
+		'Choose up to 8 images, drag them here, or paste from the clipboard'
+	);
 	await stageFiles(page, { name: 'e2e-upload.png', mimeType: 'image/png', buffer: PNG }, 1);
 
 	// The tile's hidden input receives the provider URL once /api/upload (and

From 363128eae65c0aa37f887586d0e9175dc4a034f0 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:58:50 -0700
Subject: [PATCH 17/33] fix(admin): announce repeated upload statuses, harden
 the upload response check, and correct the Japanese issues wording (SONA-216)

---
 messages/en.json                          |  4 +-
 messages/ja.json                          |  4 +-
 src/lib/components/StickerPackForm.svelte | 38 +++++----
 src/lib/components/VrAvatarForm.svelte    | 23 ++++--
 src/lib/drop-files.test.ts                | 23 +++++-
 src/lib/drop-files.ts                     |  7 +-
 tests/e2e/drop-files.ts                   |  5 +-
 tests/e2e/sticker-pack-form.spec.ts       | 95 +++++++++++++++++++----
 8 files changed, 153 insertions(+), 46 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index f0b1e773..90d847e3 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -854,7 +854,7 @@
 	"admin_pack_save_failed": "Could not save pack",
 	"admin_pack_manual_intro": "Upload sticker images (PNG or WebP) and fill in the pack details. Each sticker can have its own artist and emoji. Files are uploaded to storage before saving.",
 	"admin_pack_edit_heading": "Edit pack: {name}",
-	"admin_pack_upload_issues": "Sticker upload finished with errors. Each file that failed is listed with its reason.",
+	"admin_pack_upload_issues": "Sticker upload finished with errors. Each file that failed shows the reason.",
 	"admin_pack_error_bad_type": "That file type isn't supported. Use PNG or WebP.",
 	"admin_pack_error_too_large": "This file is over {max}. Try a smaller image.",
 	"admin_pack_error_failed": "Upload failed. Check your connection and try again.",
@@ -1584,7 +1584,7 @@
 	"admin_vr_media_kind_video": "Clip",
 	"admin_vr_media_remove": "Remove media {position}",
 	"admin_vr_media_upload_done": "Media upload finished.",
-	"admin_vr_media_upload_issues": "Media upload finished with errors. Each file that failed is listed with its reason.",
+	"admin_vr_media_upload_issues": "Media upload finished with errors. Each file that failed shows the reason.",
 	"admin_vr_media_error_too_large": "This file is over {max}. Try a smaller image, or a shorter clip at a lower resolution.",
 	"admin_vr_media_error_bad_type": "That file type isn't supported. Use JPEG, PNG, GIF, WebP, AVIF, or a .webm clip.",
 	"admin_vr_media_error_failed": "Upload failed. Check your connection and try again.",
diff --git a/messages/ja.json b/messages/ja.json
index 45c359f8..21d80603 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -644,7 +644,7 @@
 	"admin_pack_save_failed": "セットを保存できませんでした",
 	"admin_pack_manual_intro": "ステッカー画像（PNGまたはWebP）をアップロードし、セットの詳細を入力してください。各ステッカーには個別のアーティストと絵文字を設定できます。ファイルは保存前にストレージへアップロードされます。",
 	"admin_pack_edit_heading": "セットを編集: {name}",
-	"admin_pack_upload_issues": "ステッカーのアップロードがエラーで終了しました。失敗したファイルはそれぞれ理由とともに表示されています。",
+	"admin_pack_upload_issues": "ステッカーのアップロードは完了しましたが、エラーがありました。失敗したファイルにはそれぞれ理由が表示されています。",
 	"admin_pack_error_bad_type": "対応していないファイル形式です。PNGまたはWebPをご利用ください。",
 	"admin_pack_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
 	"admin_pack_error_failed": "アップロードに失敗しました。接続を確認してもう一度お試しください。",
@@ -1262,7 +1262,7 @@
 	"admin_vr_media_kind_video": "クリップ",
 	"admin_vr_media_remove": "メディア{position}を削除",
 	"admin_vr_media_upload_done": "メディアのアップロードが完了しました。",
-	"admin_vr_media_upload_issues": "メディアのアップロードがエラーで終了しました。失敗したファイルはそれぞれ理由とともに表示されています。",
+	"admin_vr_media_upload_issues": "メディアのアップロードは完了しましたが、エラーがありました。失敗したファイルにはそれぞれ理由が表示されています。",
 	"admin_vr_media_error_too_large": "このファイルは{max}を超えています。画像を小さくするか、クリップを短く低解像度にしてみてください。",
 	"admin_vr_media_error_bad_type": "対応していないファイル形式です。JPEG・PNG・GIF・WebP・AVIF、または.webmクリップをご利用ください。",
 	"admin_vr_media_error_failed": "アップロードに失敗しました。接続を確認してもう一度お試しください。",
diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 21ff1400..6e5fd179 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -121,6 +121,14 @@
 	// Upload start/done announcements for the stickers section's live region:
 	// the zone label and the new rows show both, but only visually.
 	let stickerStatus = $state('');
+	// Bumped on every status write so {#key} replaces the node inside the live
+	// region: two single-file drops both say "1 sticker added", and re-assigning
+	// the text it already holds changes no DOM, so nothing is announced.
+	let statusUid = $state(0);
+	function setStickerStatus(text: string) {
+		stickerStatus = text;
+		statusUid++;
+	}
 	// Per-file failure reporting, the same shape the VR media zone uses: a
 	// multi-file pick partially succeeds often, and a toast both disappears and
 	// collapses the batch into one line that reads as if everything failed. uid
@@ -134,10 +142,8 @@
 	let saving = $state(false);
 
 	// Returns the stored URL, or the response status so the caller can name the
-	// reason in the error banner instead of a bare "failed". Both are optional
-	// because a 2xx whose body carries no url is neither: the caller's typeof
-	// check reads that as a plain failure rather than storing `undefined`.
-	async function uploadFile(file: File): Promise<{ url?: string; status?: number }> {
+	// reason in the error banner instead of a bare "failed".
+	async function uploadFile(file: File): Promise<{ url: string } | { status: number }> {
 		const fd = new FormData();
 		fd.append('file', file);
 		// Keep sticker/cover uploads in the stickers/ partition instead of leaking
@@ -147,8 +153,11 @@
 		fd.append('folder', 'stickers');
 		const res = await fetch('/api/upload', { method: 'POST', body: fd });
 		if (!res.ok) return { status: res.status };
+		// A 2xx whose body carries no usable url is a failure too: storing it
+		// would add a row pointing at nothing. Status 0 (no status of its own)
+		// makes the caller name it a plain "failed".
 		const { url } = (await res.json()) as { url?: string };
-		return { url };
+		return url ? { url } : { status: 0 };
 	}
 
 	function uploadStickers(e: Event) {
@@ -176,11 +185,11 @@
 		if (!files.length) {
 			// Nothing to upload, but the status region must not keep the last
 			// batch's text beside a fresh bad-type banner.
-			if (rejected.length) stickerStatus = m.admin_pack_upload_issues();
+			if (rejected.length) setStickerStatus(m.admin_pack_upload_issues());
 			return;
 		}
 		uploading = true;
-		stickerStatus = m.admin_upload_uploading();
+		setStickerStatus(m.admin_upload_uploading());
 		let ok = 0;
 		try {
 			for (const file of files) {
@@ -194,14 +203,14 @@
 					];
 					continue;
 				}
-				let result: { url?: string; status?: number };
+				let result: { url: string } | { status: number };
 				try {
 					result = await uploadFile(file);
 				} catch {
 					// A thrown fetch (offline, aborted) carries no status of its own.
 					result = { status: 0 };
 				}
-				if (typeof result.url === 'string') {
+				if ('url' in result) {
 					ok++;
 					stickerEntries.push({
 						uid: nextUid++,
@@ -236,8 +245,9 @@
 			// has to say the batch finished badly — the same split the VR media
 			// zone announces. Every file lands as a row or an error line, so a
 			// batch with no errors always added at least one.
-			stickerStatus =
-				stickerErrors.length > 0 ? m.admin_pack_upload_issues() : m.admin_pack_upload_done({ count: ok });
+			setStickerStatus(
+				stickerErrors.length > 0 ? m.admin_pack_upload_issues() : m.admin_pack_upload_done({ count: ok })
+			);
 		}
 	}
 
@@ -403,8 +413,10 @@
 
 		<!-- Always-mounted live region (a region inserted together with its first
 		     content is often not announced): the zone label and the new rows
-		     report the upload visually only. -->
-		<span class="sr-only" role="status">{stickerStatus}</span>
+		     report the upload visually only. The region itself stays put; only
+		     the node inside it is keyed, so repeating a status still mutates the
+		     region and gets announced. -->
+		<span class="sr-only" role="status">{#key statusUid}<span>{stickerStatus}</span>{/key}</span>
 		<label
 			class="upload-zone multi"
 			class:disabled={uploading || saving}
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 7eb5d896..6cb95719 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -196,6 +196,14 @@
 	// Upload start/done announcements for the media section's live region
 	// (R2-A10) — visually the dropzone label + rows already show both.
 	let mediaStatus = $state('');
+	// Bumped on every status write so {#key} replaces the node inside the live
+	// region: two single-file drops both say the same thing, and re-assigning the
+	// text it already holds changes no DOM, so nothing is announced.
+	let mediaStatusUid = $state(0);
+	function setMediaStatus(text: string) {
+		mediaStatus = text;
+		mediaStatusUid++;
+	}
 
 	const mediaReorder = new DragReorder({
 		count: () => mediaEntries.length,
@@ -241,11 +249,11 @@
 		if (!files.length) {
 			// Nothing to upload, but the status region must not keep last batch's
 			// text beside a fresh bad-type banner.
-			if (rejected.length) mediaStatus = m.admin_vr_media_upload_issues();
+			if (rejected.length) setMediaStatus(m.admin_vr_media_upload_issues());
 			return;
 		}
 		mediaUploading = true;
-		mediaStatus = m.admin_upload_uploading();
+		setMediaStatus(m.admin_upload_uploading());
 		try {
 			for (const file of files) {
 				if (file.size > MAX_MEDIA_BYTES) {
@@ -294,8 +302,9 @@
 			}
 		} finally {
 			mediaUploading = false;
-			mediaStatus =
-				mediaErrors.length > 0 ? m.admin_vr_media_upload_issues() : m.admin_vr_media_upload_done();
+			setMediaStatus(
+				mediaErrors.length > 0 ? m.admin_vr_media_upload_issues() : m.admin_vr_media_upload_done()
+			);
 		}
 	}
 
@@ -770,9 +779,11 @@
 		<h2>{m.admin_vr_section_media()}</h2>
 		<p class="field-hint">{m.admin_vr_media_hint()}</p>
 		<!-- Always-mounted live regions: reorder announcements, and the upload
-		     start/done status (R2-A10). -->
+		     start/done status (R2-A10). The status region itself stays put; only
+		     the node inside it is keyed, so repeating a status still mutates the
+		     region and gets announced. -->
 		<span class="sr-only" aria-live="polite">{mediaReorder.announcement}</span>
-		<span class="sr-only" role="status">{mediaStatus}</span>
+		<span class="sr-only" role="status">{#key mediaStatusUid}<span>{mediaStatus}</span>{/key}</span>
 		{#if mediaEntries.length > 0}
 			<div class="media-list">
 				{#each mediaEntries as item, i (item.uid)}
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index b344974b..c17396d7 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -54,8 +54,10 @@ class FakeEl extends EventTarget {
 
 type PickedFile = { name: string; type: string };
 
-function dragEvent(type: string, files: PickedFile[] = []) {
-	return Object.assign(new Event(type), { dataTransfer: { files, dropEffect: '' } });
+// `types` mirrors what a real file drag carries; the zone reads it to tell a
+// file drag from a dragged link or selection.
+function dragEvent(type: string, files: PickedFile[] = [], types: string[] = ['Files']) {
+	return Object.assign(new Event(type), { dataTransfer: { files, types, dropEffect: '' } });
 }
 
 describe('partitionByAccept', () => {
@@ -131,6 +133,19 @@ describe('dropFiles', () => {
 		expect(el.classes.has('drag-over')).toBe(false);
 	});
 
+	it('treats a drag that lists no types as carrying no files', () => {
+		// Only a drag that says 'Files' lights the zone up: an empty types list is
+		// as much "not a file drag" as a text/uri-list one.
+		const { el } = setup();
+		const ev = Object.assign(new Event('dragover', { cancelable: true }), {
+			dataTransfer: { types: [], files: [], dropEffect: 'copy' }
+		});
+		el.dispatchEvent(ev);
+		expect(ev.defaultPrevented).toBe(true);
+		expect(ev.dataTransfer.dropEffect).toBe('none');
+		expect(el.classes.has('drag-over')).toBe(false);
+	});
+
 	it('sets the copy drop effect so the cursor reads as an upload', () => {
 		const { el } = setup();
 		const ev = dragEvent('dragover');
@@ -171,7 +186,7 @@ describe('dropFiles', () => {
 	it('leaves an event something else already cancelled alone', () => {
 		const { el } = setup(() => true);
 		const over = Object.assign(new Event('dragover', { cancelable: true }), {
-			dataTransfer: { files: [], dropEffect: 'copy' }
+			dataTransfer: { files: [], types: ['Files'], dropEffect: 'copy' }
 		});
 		over.preventDefault();
 		el.dispatchEvent(over);
@@ -184,7 +199,7 @@ describe('dropFiles', () => {
 		inner.el.dispatchEvent(dragEvent('dragenter'));
 		expect(inner.el.classes.has('drag-over')).toBe(true);
 		const drop = Object.assign(new Event('drop', { cancelable: true }), {
-			dataTransfer: { files: [{ name: 'a.png', type: 'image/png' }], dropEffect: '' }
+			dataTransfer: { files: [{ name: 'a.png', type: 'image/png' }], types: ['Files'], dropEffect: '' }
 		});
 		drop.preventDefault();
 		inner.el.dispatchEvent(drop);
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 4f40e58d..cf6d8c8c 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -24,11 +24,10 @@ export function matchesAccept(file: { name: string; type: string }, accept: stri
 }
 
 /** Whether a drag carries files at all. Dragged text or an image element also
- * fires dragover; a zone must not light up for those. A missing `types` (test
- * fakes) counts as files. */
+ * fires dragover; a zone must not light up for those. A drag with no
+ * DataTransfer, or none that lists 'Files', carries none. */
 function carriesFiles(e: DragEvent): boolean {
-	const types = e.dataTransfer?.types;
-	return !types || types.includes('Files');
+	return Array.from(e.dataTransfer?.types ?? []).includes('Files');
 }
 
 /**
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index e7c97d8d..fe9305d9 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -16,7 +16,8 @@ import { expect, type Page } from '@playwright/test';
  *
  * `size`, when given, builds the file from that many zero bytes instead of the
  * usual 4 — the only way to exercise a client-side size cap, which reads
- * `File.size` and never looks at the contents.
+ * `File.size` and never looks at the contents. Given as 0 it means an empty
+ * file, not the default.
  */
 export function dropOn(
 	page: Page,
@@ -28,7 +29,7 @@ export function dropOn(
 			const dt = new DataTransfer();
 			for (const f of files)
 				dt.items.add(
-					new File([f.size ? new ArrayBuffer(f.size) : new Uint8Array([1, 2, 3, 4])], f.name, {
+					new File([f.size === undefined ? new Uint8Array([1, 2, 3, 4]) : new ArrayBuffer(f.size)], f.name, {
 						type: f.type
 					})
 				);
diff --git a/tests/e2e/sticker-pack-form.spec.ts b/tests/e2e/sticker-pack-form.spec.ts
index dd33feb0..9905672e 100644
--- a/tests/e2e/sticker-pack-form.spec.ts
+++ b/tests/e2e/sticker-pack-form.spec.ts
@@ -51,17 +51,17 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	// The stickers section's always-mounted live region.
 	const status = page.locator('span.sr-only[role="status"]');
 
-	// Hydration-retry shape (see vr-admin-form.spec.ts): a drop dispatched before
-	// the attachment has run silently does nothing. The counter resets per try.
+	// A drop dispatched before the attachment has run silently does nothing, so
+	// wait for it rather than retrying the drop: the held request below keeps the
+	// zone disabled, and a retried drop could never recover anyway.
+	await waitForDropAttachment(page, ZONE);
+
 	hold = new Promise<void>((resolve) => (release = resolve));
-	await expect(async () => {
-		uploads = 0;
-		await dropOn(page, ZONE, [{ name: 'sticker.png', type: 'image/png' }]);
-		// The held request keeps the zone busy, so a drop that landed shows up as
-		// the in-progress announcement rather than a finished row.
-		await expect(status).toHaveText('Uploading...', { timeout: 2000 });
-		expect(uploads).toBe(1);
-	}).toPass({ timeout: 20_000 });
+	await dropOn(page, ZONE, [{ name: 'sticker.png', type: 'image/png' }]);
+	// The held request keeps the zone busy, so a drop that landed shows up as
+	// the in-progress announcement rather than a finished row.
+	await expect(status).toHaveText('Uploading...');
+	expect(uploads).toBe(1);
 	release();
 	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveValue('/x.png');
 	// …and the same region reports the finish, as a real plural rather than
@@ -83,7 +83,7 @@ test('dropping a sticker adds a row, and a wrong type is rejected without a requ
 	expect(uploads).toBe(before);
 	// Nothing to upload, so the live region says the batch ended badly rather
 	// than keeping the previous batch's success text.
-	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed is listed with its reason.');
+	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed shows the reason.');
 
 	// The list is uncapped and per-file: a folder dropped whole names every file
 	// it refused instead of collapsing to a count.
@@ -248,7 +248,18 @@ test('a failed upload keeps the successes, and the banner names the file that fa
 		/b\.png — Upload failed\. Check your connection and try again\./
 	]);
 	// The live region says the batch finished badly; the banner carries the names.
-	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed is listed with its reason.');
+	await expect(status).toHaveText('Sticker upload finished with errors. Each file that failed shows the reason.');
+	// Theme-safe text: the banner takes the theme's own foreground, so it stays
+	// readable on the tinted background in every theme rather than assuming one.
+	const [bannerColor, foreground] = await page.evaluate(() => {
+		const probe = document.createElement('span');
+		probe.style.color = 'var(--foreground)';
+		document.body.appendChild(probe);
+		const resolved = getComputedStyle(probe).color;
+		probe.remove();
+		return [getComputedStyle(document.querySelector('.banner.err')!).color, resolved];
+	});
+	expect(bannerColor).toBe(foreground);
 
 	// A fresh batch replaces the previous batch's lines rather than appending to
 	// files the operator has already dealt with.
@@ -408,7 +419,7 @@ test('an oversized sticker is refused client-side, without a POST', async ({ pag
 	]);
 	expect(uploads).toBe(1);
 	await expect(status).toHaveText(
-		'Sticker upload finished with errors. Each file that failed is listed with its reason.'
+		'Sticker upload finished with errors. Each file that failed shows the reason.'
 	);
 });
 
@@ -447,3 +458,61 @@ test('a 413 reads as too large and a 415 as an unsupported type', async ({ page
 	]);
 	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveCount(0);
 });
+
+test('a 200 without a usable url is a failure, not a row pointing nowhere', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	// A 2xx the form cannot read a URL out of. Stored as-is it would add a
+	// sticker row whose imageUrl is empty, and the pack would save broken.
+	let body = '{}';
+	await page.route('**/api/upload', async (route) => {
+		await route.fulfill({ contentType: 'application/json', body });
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+
+	await dropOn(page, ZONE, [{ name: 'a.png', type: 'image/png' }]);
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/a\.png — Upload failed\. Check your connection and try again\./
+	]);
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveCount(0);
+
+	// An empty string is a url the body does carry, so only a non-empty check
+	// keeps it out of a row.
+	body = '{"url":""}';
+	await dropOn(page, ZONE, [{ name: 'b.png', type: 'image/png' }]);
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/b\.png — Upload failed\. Check your connection and try again\./
+	]);
+	await expect(page.locator('input[name="sticker[0][imageUrl]"]')).toHaveCount(0);
+});
+
+test('the same status twice is announced twice', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	await page.route('**/api/upload', async (route) => {
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/stickers/manual');
+	await waitForDropAttachment(page, ZONE);
+	const status = page.locator('span.sr-only[role="status"]');
+
+	await dropOn(page, ZONE, [{ name: 'a.png', type: 'image/png' }]);
+	await expect(status).toHaveText('1 sticker added');
+
+	// Two single-file drops produce the same text, and a screen reader only
+	// announces a live region that CHANGES: re-assigning the string it already
+	// holds touches no DOM and says nothing. Tag the node inside the region,
+	// then prove the tag (and so the node) is gone — the same shape as the model
+	// banner's remount test in vr-admin-form.spec.ts.
+	await status.locator('span').evaluate((el) => el.setAttribute('data-first-status', ''));
+	await dropOn(page, ZONE, [{ name: 'b.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="sticker[1][imageUrl]"]')).toHaveValue('/x.png');
+	await expect(status.locator('span[data-first-status]')).toHaveCount(0);
+	await expect(status).toHaveText('1 sticker added');
+});

From 6ed2e851eb6fa15703aaf8b5017b268a4d936e74 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 12:09:51 -0700
Subject: [PATCH 18/33] fix(admin): guard the VR media upload response like the
 sticker form and test both status regions (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  6 +--
 src/lib/components/VrAvatarForm.svelte    | 11 ++++-
 tests/e2e/vr-admin-form.spec.ts           | 55 +++++++++++++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 6e5fd179..df6b6485 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -124,10 +124,10 @@
 	// Bumped on every status write so {#key} replaces the node inside the live
 	// region: two single-file drops both say "1 sticker added", and re-assigning
 	// the text it already holds changes no DOM, so nothing is announced.
-	let statusUid = $state(0);
+	let stickerStatusUid = $state(0);
 	function setStickerStatus(text: string) {
 		stickerStatus = text;
-		statusUid++;
+		stickerStatusUid++;
 	}
 	// Per-file failure reporting, the same shape the VR media zone uses: a
 	// multi-file pick partially succeeds often, and a toast both disappears and
@@ -416,7 +416,7 @@
 		     report the upload visually only. The region itself stays put; only
 		     the node inside it is keyed, so repeating a status still mutates the
 		     region and gets announced. -->
-		<span class="sr-only" role="status">{#key statusUid}<span>{stickerStatus}</span>{/key}</span>
+		<span class="sr-only" role="status">{#key stickerStatusUid}<span>{stickerStatus}</span>{/key}</span>
 		<label
 			class="upload-zone multi"
 			class:disabled={uploading || saving}
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 6cb95719..270048bf 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -284,7 +284,14 @@
 				// Per-file guard: a malformed response body or probe failure records
 				// that file's error and lets the rest of the batch continue.
 				try {
-					const { url } = (await res.json()) as { url: string };
+					const { url } = (await res.json()) as { url?: string };
+					// A 2xx whose body carries no usable url is a failure too (same
+					// check as the sticker form): a row pointing at nothing renders a
+					// broken tile and is rejected at save time with no file named.
+					if (!url) {
+						mediaErrors = [...mediaErrors, { uid: mediaErrorUid++, name: file.name, reason: 'failed' }];
+						continue;
+					}
 					const { width, height } = await probeDimensions(file);
 					mediaEntries = [
 						...mediaEntries,
@@ -386,6 +393,8 @@
 	}
 
 	function uploadModel(file: File) {
+		// Clearing skips the uid bump on purpose: an empty banner needs no
+		// announcement, and the next error goes through setUploadError.
 		uploadError = null;
 		// Client-side mirror of the server guards ($lib/vr modelFileError), for
 		// instant feedback — the endpoint re-checks all of it.
diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index ed42eeee..1213b08b 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -462,3 +462,58 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 	await expect(page.locator('.media-zone')).not.toHaveClass(/disabled/);
 	await expect(modelZone).not.toHaveClass(/disabled/);
 });
+
+test('a 200 without a usable url is a media failure, not a broken tile', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	// Same guard as the sticker form: a 2xx the form cannot read a URL out of
+	// must land as a named failure, not a media row pointing at nothing.
+	let body = '{}';
+	await page.route('**/api/upload', async (route) => {
+		await route.fulfill({ contentType: 'application/json', body });
+	});
+
+	await page.goto('/admin/vr/new');
+	await waitForDropAttachment(page, '.media-zone');
+
+	await dropOn(page, '.media-zone', [{ name: 'a.png', type: 'image/png' }]);
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/a\.png — Upload failed\. Check your connection and try again\./
+	]);
+	await expect(page.locator('input[name="media[0][url]"]')).toHaveCount(0);
+
+	body = '{"url":""}';
+	await dropOn(page, '.media-zone', [{ name: 'b.png', type: 'image/png' }]);
+	await expect(page.locator('.banner.err .banner-line')).toHaveText([
+		/b\.png — Upload failed\. Check your connection and try again\./
+	]);
+	await expect(page.locator('input[name="media[0][url]"]')).toHaveCount(0);
+});
+
+test('the same media status twice is announced twice', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	await page.route('**/api/upload', async (route) => {
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/x.png' })
+		});
+	});
+
+	await page.goto('/admin/vr/new');
+	await waitForDropAttachment(page, '.media-zone');
+	// The form has two role="status" regions (model upload progress, then the
+	// media status); the media one comes last in the document.
+	const status = page.locator('span.sr-only[role="status"]').last();
+
+	await dropOn(page, '.media-zone', [{ name: 'a.png', type: 'image/png' }]);
+	await expect(status).toHaveText('Media upload finished.');
+
+	// Re-assigning the text the region already holds touches no DOM and is not
+	// announced; the keyed inner node must be replaced (see the sticker spec).
+	await status.locator('span').evaluate((el) => el.setAttribute('data-first-status', ''));
+	await dropOn(page, '.media-zone', [{ name: 'b.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="media[1][url]"]')).toHaveValue('/x.png');
+	await expect(status.locator('span[data-first-status]')).toHaveCount(0);
+	await expect(status).toHaveText('Media upload finished.');
+});

From da9fe87b57590d0a381a296e4638ab4598bb6926 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 14:45:56 -0700
Subject: [PATCH 19/33] test(admin): assert the drop attachment cancels a file
 drop (SONA-216)

---
 src/lib/drop-files.test.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index c17396d7..e0943604 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -57,7 +57,8 @@ type PickedFile = { name: string; type: string };
 // `types` mirrors what a real file drag carries; the zone reads it to tell a
 // file drag from a dragged link or selection.
 function dragEvent(type: string, files: PickedFile[] = [], types: string[] = ['Files']) {
-	return Object.assign(new Event(type), { dataTransfer: { files, types, dropEffect: '' } });
+	// Cancelable, so a test can see that the handler called preventDefault.
+	return Object.assign(new Event(type, { cancelable: true }), { dataTransfer: { files, types, dropEffect: '' } });
 }
 
 describe('partitionByAccept', () => {
@@ -160,7 +161,10 @@ describe('dropFiles', () => {
 		const good = { name: 'a.png', type: 'image/png' };
 		const model = { name: 'b.vrm', type: '' };
 		const bad = { name: 'notes.txt', type: 'text/plain' };
-		el.dispatchEvent(dragEvent('drop', [good, bad, model]));
+		const drop = dragEvent('drop', [good, bad, model]);
+		el.dispatchEvent(drop);
+		// Cancelling the drop is what keeps the browser from opening the file.
+		expect(drop.defaultPrevented).toBe(true);
 		expect(el.classes.has('drag-over')).toBe(false);
 		expect(calls).toHaveLength(1);
 		expect(calls[0].files).toEqual([good, model]);

From 01e74d2e2e1e1af4916eb064ac607bb935852419 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Wed, 2 Sep 2026 14:57:05 -0700
Subject: [PATCH 20/33] fix(admin): type-check the upload response url and
 assert a busy zone cancels the drop (SONA-216)

---
 src/lib/components/StickerPackForm.svelte | 5 +++--
 src/lib/components/VrAvatarForm.svelte    | 5 +++--
 src/lib/drop-files.test.ts                | 6 +++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index df6b6485..5553fcf1 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -156,8 +156,9 @@
 		// A 2xx whose body carries no usable url is a failure too: storing it
 		// would add a row pointing at nothing. Status 0 (no status of its own)
 		// makes the caller name it a plain "failed".
-		const { url } = (await res.json()) as { url?: string };
-		return url ? { url } : { status: 0 };
+		// The cast validates nothing, so check the type as well as emptiness.
+		const { url } = (await res.json()) as { url?: unknown };
+		return typeof url === 'string' && url ? { url } : { status: 0 };
 	}
 
 	function uploadStickers(e: Event) {
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 270048bf..a63be18c 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -284,11 +284,12 @@
 				// Per-file guard: a malformed response body or probe failure records
 				// that file's error and lets the rest of the batch continue.
 				try {
-					const { url } = (await res.json()) as { url?: string };
+					const { url } = (await res.json()) as { url?: unknown };
 					// A 2xx whose body carries no usable url is a failure too (same
 					// check as the sticker form): a row pointing at nothing renders a
 					// broken tile and is rejected at save time with no file named.
-					if (!url) {
+					// The cast validates nothing, so check the type as well.
+					if (typeof url !== 'string' || !url) {
 						mediaErrors = [...mediaErrors, { uid: mediaErrorUid++, name: file.name, reason: 'failed' }];
 						continue;
 					}
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index e0943604..a52f0cbb 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -183,8 +183,12 @@ describe('dropFiles', () => {
 		el.dispatchEvent(ev);
 		expect(el.classes.has('drag-over')).toBe(false);
 		expect(ev.dataTransfer.dropEffect).toBe('none');
-		el.dispatchEvent(dragEvent('drop', [{ name: 'a.png', type: 'image/png' }]));
+		const drop = dragEvent('drop', [{ name: 'a.png', type: 'image/png' }]);
+		el.dispatchEvent(drop);
 		expect(calls).toHaveLength(0);
+		// Still cancelled: a busy zone swallows the drop instead of letting the
+		// browser navigate to the file.
+		expect(drop.defaultPrevented).toBe(true);
 	});
 
 	it('leaves an event something else already cancelled alone', () => {

From 90a63c0e3ed688b1788266eb765e1d7b9311a5e0 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 01:13:56 -0700
Subject: [PATCH 21/33] refactor(admin): move the gallery upload page onto the
 shared drop attachment (SONA-216)

---
 messages/en.json                     |   1 +
 messages/ja.json                     |   1 +
 playwright.config.ts                 |   2 +-
 src/routes/admin/upload/+page.svelte | 121 +++++++++++-------
 tests/e2e/upload.spec.ts             | 181 ++++++++++++++++++++++++++-
 5 files changed, 260 insertions(+), 46 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 90d847e3..b4fae90c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -414,6 +414,7 @@
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
 	"admin_upload_error_too_large": "This file is over {max}. Try a smaller image.",
+	"admin_upload_error_bad_type": "That file type isn't supported. Use PNG, JPEG, GIF, or WebP.",
 	"admin_field_variant_of": "Variant of",
 	"admin_field_variant_label": "Variant label",
 	"admin_variant_none": "Not a variant",
diff --git a/messages/ja.json b/messages/ja.json
index 21d80603..64ff88e4 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -358,6 +358,7 @@
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
+	"admin_upload_error_bad_type": "対応していないファイル形式です。PNG・JPEG・GIF・WebPをご利用ください。",
 	"admin_field_variant_of": "バリエーション元",
 	"admin_field_variant_label": "バリエーションラベル",
 	"admin_variant_none": "バリエーションではない",
diff --git a/playwright.config.ts b/playwright.config.ts
index bd3edb1f..05439087 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -153,7 +153,7 @@ export default defineConfig({
 		{
 			name: 'upload',
 			testMatch: UPLOAD_SPEC,
-			// The three upload specs share one seeded dev server and an admin
+			// The upload tests share one seeded dev server and an admin
 			// session flow that flakes under parallel load — run them serially.
 			workers: 1,
 			use: { ...devices['Desktop Chrome'], baseURL: `http://localhost:${UPLOAD_PORT}` }
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 2fe6329c..6277d1fe 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -4,6 +4,7 @@
 	import { tick } from 'svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
 	import { extractImageFiles, isTextEditable, shouldHandleImagePaste } from '$lib/clipboard';
+	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
 	import { MAX_BUFFER_BYTES } from '$lib/config';
 	import { toast } from '$lib/toast.svelte';
 	import * as m from '$lib/paraglide/messages';
@@ -17,7 +18,6 @@
 	);
 	let selectedArtistId = $state('');
 	let showNewArtist = $state(false);
-	let dragOver = $state(false);
 	let saving = $state(false);
 	let announce = $state('');
 	let fileInput: HTMLInputElement;
@@ -92,8 +92,23 @@
 		}
 	}
 
-	async function handleFiles(files: FileList | File[]) {
-		const incoming = Array.from(files);
+	// MIME types only, mirroring /api/upload's ALLOWED_IMAGE_TYPES for the
+	// artwork folder (no video/webm — that one is scoped to vr-media): the
+	// endpoint validates the DECLARED type and reads an empty one as
+	// application/octet-stream, so accepting a bare .png here would upload the
+	// whole file just to collect a 415. image/jpg is in the server's set too;
+	// leaving it out would refuse a file the server would happily store.
+	const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/webp,image/avif';
+
+	// `rejected` holds files the accept string refused — from a drop, which the
+	// attribute never constrains, or from a picker the operator switched to "All
+	// files". They get a tile like an oversized file does (same slot accounting,
+	// same way to dismiss) but never a dimension probe or a POST.
+	async function handleFiles(files: FileList | File[], rejected: File[] = []) {
+		const incoming = [
+			...Array.from(files).map((file) => ({ file, badType: false })),
+			...rejected.map((file) => ({ file, badType: true }))
+		];
 		const room = Math.max(0, data.maxVariantSet - tiles.length);
 		const fileArray = incoming.slice(0, room);
 		const skipped = incoming.length - fileArray.length;
@@ -107,10 +122,10 @@
 		// over-admit a second drop that lands while this batch is still
 		// uploading, and the announcement below counts tiles that really exist.
 		const batch: { key: number; file: File }[] = [];
-		for (const file of fileArray) {
+		for (const { file, badType } of fileArray) {
 			// Pre-check the server's size cap client-side: a file over it can only
 			// come back as a 413, so fail the tile here instead of a doomed POST.
-			const oversized = file.size > MAX_BUFFER_BYTES;
+			const oversized = !badType && file.size > MAX_BUFFER_BYTES;
 			const tile: Tile = {
 				key: tileKey++,
 				fileName: file.name,
@@ -119,16 +134,21 @@
 				width: 0,
 				height: 0,
 				fileSize: file.size,
-				status: oversized ? 'error' : 'uploading',
-				error: oversized ? m.admin_upload_error_too_large({ max: formatSize(MAX_BUFFER_BYTES) }) : '',
+				status: oversized || badType ? 'error' : 'uploading',
+				error: badType
+					? m.admin_upload_error_bad_type()
+					: oversized
+						? m.admin_upload_error_too_large({ max: formatSize(MAX_BUFFER_BYTES) })
+						: '',
 				label: '',
 				nsfw: false
 			};
 			tiles = [...tiles, tile];
-			// Oversized files never enter the batch: no dimension probe (pass 2
-			// would decode a >64 MB image for a tile that already failed) and no
-			// doomed POST. Their tile keeps 0×0 dims — it can't be saved anyway.
-			if (!oversized) batch.push({ key: tile.key, file });
+			// Oversized and wrong-type files never enter the batch: no dimension
+			// probe (pass 2 would decode a >64 MB image for a tile that already
+			// failed) and no doomed POST. Their tile keeps 0×0 dims — it can't be
+			// saved anyway.
+			if (!oversized && !badType) batch.push({ key: tile.key, file });
 		}
 
 		// Reset then set on the next tick so identical consecutive adds still
@@ -161,27 +181,13 @@
 		if (parentIndex >= tiles.length) parentIndex = 0;
 	}
 
-	function handleDrop(e: DragEvent) {
-		e.preventDefault();
-		dragOver = false;
-		if (e.dataTransfer?.files) {
-			handleFiles(e.dataTransfer.files);
-		}
-	}
-
-	function handleDragOver(e: DragEvent) {
-		e.preventDefault();
-		dragOver = true;
-	}
-
-	function handleDragLeave() {
-		dragOver = false;
-	}
-
 	function handleFileSelect(e: Event) {
 		const input = e.target as HTMLInputElement;
 		if (input.files) {
-			handleFiles(input.files);
+			// `accept` is a filter the OS dialog can override ("All files"), so a
+			// picked SVG can arrive here; partition it the same way a drop is.
+			const { accepted, rejected } = partitionByAccept([...input.files], GALLERY_ACCEPT);
+			handleFiles(accepted, rejected);
 			input.value = '';
 		}
 	}
@@ -215,7 +221,7 @@
 	}
 </script>
 
-<svelte:window onpaste={handlePaste} />
+<svelte:window onpaste={handlePaste} ondragover={swallowStrayFileDrop} ondrop={swallowStrayFileDrop} />
 
 <div class="sr-only" aria-live="polite">{announce}</div>
 
@@ -248,13 +254,10 @@
 	{/each}
 
 	{#if tiles.length === 0}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="dropzone"
-			class:drag-over={dragOver}
-			ondrop={handleDrop}
-			ondragover={handleDragOver}
-			ondragleave={handleDragLeave}
+			class:disabled={saving}
+			{@attach dropFiles({ accept: GALLERY_ACCEPT, onFiles: handleFiles, disabled: () => saving })}
 			onclick={() => fileInput?.click()}
 			role="button"
 			tabindex="0"
@@ -265,12 +268,9 @@
 			<p class="dropzone-hint">{m.admin_upload_formats()}</p>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="tile-grid"
-			ondrop={handleDrop}
-			ondragover={handleDragOver}
-			ondragleave={handleDragLeave}
+			{@attach dropFiles({ accept: GALLERY_ACCEPT, onFiles: handleFiles, disabled: () => saving })}
 		>
 			{#each tiles as tile, i (tile.key)}
 				<div class="tile" class:tile-error={tile.status === 'error'} class:tile-parent={isGroup && groupMode === 'new' && parentIndex === i}>
@@ -324,7 +324,7 @@
 
 	<input
 		type="file"
-		accept="image/*"
+		accept={GALLERY_ACCEPT}
 		multiple
 		bind:this={fileInput}
 		onchange={handleFileSelect}
@@ -505,19 +505,52 @@
 		color: var(--muted-foreground);
 		font-size: 14px;
 		cursor: pointer;
-		transition: border-color 0.15s, background 0.15s;
+		transition: border-color 0.15s, background-color 0.15s;
 	}
 
-	.dropzone:hover,
-	.dropzone.drag-over {
+	.dropzone:hover {
 		border-color: var(--primary);
-		background: rgba(255, 132, 0, 0.05);
+		background-color: color-mix(in srgb, var(--primary) 5%, transparent);
+	}
+
+	/* Highlight while a file is dragged over the zone (SONA-216) — :global
+	   because the drop attachment sets the class imperatively, so Svelte can't
+	   see it in the markup. Same treatment as the VR and sticker zones. */
+	.dropzone:global(.drag-over) {
+		border-color: var(--primary);
+		background-color: color-mix(in srgb, var(--primary) 5%, transparent);
+	}
+
+	/* No pointer-events: none — the attachment has to receive dragover/drop to
+	   preventDefault, or a drop while the save is in flight navigates away from
+	   the form. The zone only shows this state when every tile was removed
+	   after submitting; it still refuses the drop either way. */
+	.dropzone.disabled {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+
+	/* Keeping pointer events also keeps :hover alive, so hold the resting look
+	   while the zone is busy rather than inviting a click it won't take. */
+	.dropzone.disabled:hover {
+		border-color: var(--border);
+		background-color: transparent;
 	}
 
 	.tile-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 		gap: 12px;
+		/* A transparent resting border reserves the space the drag-over highlight
+		   paints into, so dragging over the grid doesn't shift the tiles. */
+		border: 2px dashed transparent;
+		border-radius: var(--radius-s);
+		transition: border-color 0.15s, background-color 0.15s;
+	}
+
+	.tile-grid:global(.drag-over) {
+		border-color: var(--primary);
+		background-color: color-mix(in srgb, var(--primary) 5%, transparent);
 	}
 
 	.tile {
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 306e4459..6db3cc2f 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -1,6 +1,12 @@
-import { test, expect, type Page, type Request } from '@playwright/test';
+import { test, expect, type Page, type Request, type Route } from '@playwright/test';
 import { promises as fs } from 'node:fs';
 import { adminLogin } from './admin-login';
+import {
+	dropOn,
+	dragOver,
+	expectDragOverHighlight,
+	waitForDropAttachment
+} from './drop-files';
 
 // End-to-end round-trip for the streaming upload path (SONA-136): an admin
 // uploads a file, /api/upload streams it to UploadThing (the active provider on
@@ -13,6 +19,10 @@ import { adminLogin } from './admin-login';
 // Runs on its own dev server + seeded DB (the "upload" project in
 // playwright.config.ts): it inserts image rows and depends on the provider
 // staying 'uploadthing', which the ut-stat spec flips on its own server.
+//
+// The drag-and-drop tests below (SONA-216) stay off that round trip: they stub
+// /api/upload and never submit the form, so they leave neither stored files nor
+// rows behind.
 
 // Matches ADMIN_PASSWORD in tests/e2e/wrangler.e2e-uploadthing.toml.
 const PASSWORD = 'e2e-admin-password';
@@ -192,3 +202,172 @@ test('an oversized file fails client-side without a POST; the rest of the batch
 	// Exactly one POST fired — none for the doomed oversized file.
 	expect(uploads.counters.total).toBe(1);
 });
+
+test('dropping images adds tiles, and a wrong type is rejected without a request', async ({
+	page
+}) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	// Stubbed rather than let through: this spec's dev server would really store
+	// the file, and a drop needs no proof the streaming path works — the first
+	// test covers that. The stub also keeps the seeded DB free of rows, since
+	// this test never submits the form.
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/upload');
+	// A drop dispatched before the attachment has run silently does nothing.
+	await waitForDropAttachment(page, '.dropzone');
+	await expectDragOverHighlight(page, '.dropzone');
+
+	await dropOn(page, '.dropzone', [{ name: 'dropped.png', type: 'image/png' }]);
+	// The 15s budget every url assertion in this file carries: /api/upload is
+	// stubbed, but the duplicate check ahead of it still goes to the dev server,
+	// which compiles routes on demand and shares the machine with three others.
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/x1.png', {
+		timeout: 15_000
+	});
+
+	// The first tile replaces the dropzone with the grid, which takes drops too —
+	// otherwise a second file dropped where the zone used to be would navigate
+	// the tab away from a half-filled form.
+	await waitForDropAttachment(page, '.tile-grid');
+	await expectDragOverHighlight(page, '.tile-grid');
+
+	// A dropped file skips the input's accept filter, so the page has to reject
+	// the wrong type itself: an error tile, and no POST.
+	const before = uploads;
+	await dropOn(page, '.tile-grid', [{ name: 'notes.txt', type: 'text/plain' }]);
+	await expect(page.locator('.tile-error .error-text')).toContainText(
+		"That file type isn't supported"
+	);
+	// Past the moment a POST that DID fire would have landed (mutation-checked).
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+
+	// The refused file doesn't poison the zone: the next image still uploads.
+	await dropOn(page, '.tile-grid', [{ name: 'second.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="imageUrl_2"]')).toHaveValue('/x2.png', {
+		timeout: 15_000
+	});
+
+	// A drop that misses both zones (here: the form itself) is swallowed
+	// page-wide, so it can't navigate the tab to the file and lose the form.
+	const beforeStray = uploads;
+	expect(await dropOn(page, 'form.upload-form', [{ name: 'stray.png', type: 'image/png' }])).toBe(
+		true
+	);
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(beforeStray);
+	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(3);
+});
+
+test('a picked file the accept string refuses gets an error tile, not a POST', async ({ page }) => {
+	await adminLogin(page, PASSWORD);
+
+	const uploads = countUploadPosts(page);
+
+	await page.goto('/admin/upload');
+	// `accept` is only a filter the OS dialog can override ("All files"), and
+	// setInputFiles bypasses it the same way — so the picker partitions too. SVG
+	// is the file that matters: /api/upload refuses it because an SVG served
+	// straight from the storage origin can execute script.
+	await stageFiles(
+		page,
+		{ name: 'diagram.svg', mimeType: 'image/svg+xml', buffer: Buffer.from('<svg/>') },
+		1,
+		uploads.reset
+	);
+	await expect(page.locator('.tile-error .error-text')).toContainText(
+		"That file type isn't supported"
+	);
+	await page.waitForTimeout(300);
+	expect(uploads.counters.total).toBe(0);
+});
+
+test('the upload zones refuse files while a save is in flight', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	await dropOn(page, '.dropzone', [{ name: 'saved.png', type: 'image/png' }]);
+	// 15s for the same reason as the drop test above: the duplicate check ahead
+	// of the stubbed upload is a real request to the dev server.
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/x1.png', {
+		timeout: 15_000
+	});
+
+	// Hold the form POST so `saving` stays true. page.route intercepts inside the
+	// browser, so the seeded server never sees the request and no row is written.
+	let holdPost = (_route: Route) => {};
+	const posted = new Promise<Route>((resolve) => (holdPost = resolve));
+	await page.route('**/admin/upload**', async (route) => {
+		if (route.request().method() !== 'POST') {
+			await route.fallback();
+			return;
+		}
+		holdPost(route);
+	});
+
+	await page.fill('input[name="title"]', 'Save gate');
+	await page.selectOption('select[name="artistId"]', '1');
+	await page.getByRole('button', { name: 'Upload Artwork' }).click();
+	const save = page.locator('form.upload-form button[type="submit"]');
+	await expect(save).toBeDisabled();
+
+	// A drop landing now would upload a file the already-serialized submit never
+	// references, orphaning it in storage.
+	const before = uploads;
+	await dropOn(page, '.tile-grid', [{ name: 'late.png', type: 'image/png' }]);
+	await dragOver(page, '.tile-grid');
+	await expect(page.locator('.tile-grid')).not.toHaveClass(/drag-over/);
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(1);
+
+	// Removing the last tile mid-save brings the dropzone back — gated the same
+	// way, and it says so.
+	await page.locator('.tile-remove').click();
+	await expect(page.locator('.dropzone')).toHaveClass(/disabled/);
+	await dropOn(page, '.dropzone', [{ name: 'later.png', type: 'image/png' }]);
+	await dragOver(page, '.dropzone');
+	await expect(page.locator('.dropzone')).not.toHaveClass(/drag-over/);
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+
+	// The zones come back once the submit settles, so a failed save is still
+	// editable. Settled as an action failure rather than an abort: an aborted
+	// fetch makes enhance render the error page, which takes the form away and
+	// leaves nothing to assert on. The data is devalue-encoded, the shape
+	// deserialize() expects.
+	await (await posted).fulfill({
+		contentType: 'application/json',
+		body: JSON.stringify({
+			type: 'failure',
+			status: 400,
+			data: '[{"error":1},"Held by the test"]'
+		})
+	});
+	await expect(page.locator('.dropzone')).not.toHaveClass(/disabled/);
+	await dropOn(page, '.dropzone', [{ name: 'after.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue(/^\/x\d+\.png$/, {
+		timeout: 15_000
+	});
+});

From 502bd9b2c6fd7f3b449764f78928d36bfeea5a18 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 01:17:08 -0700
Subject: [PATCH 22/33] fix(admin): disable the gallery upload picker while a
 save is in flight (SONA-216)

---
 src/routes/admin/upload/+page.svelte | 1 +
 tests/e2e/upload.spec.ts             | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 6277d1fe..7def927b 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -328,6 +328,7 @@
 		multiple
 		bind:this={fileInput}
 		onchange={handleFileSelect}
+		disabled={saving}
 		style="display: none"
 	/>
 
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 6db3cc2f..e54da250 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -346,6 +346,9 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 	// way, and it says so.
 	await page.locator('.tile-remove').click();
 	await expect(page.locator('.dropzone')).toHaveClass(/disabled/);
+	// The click path is gated too: a disabled input ignores the programmatic
+	// click the zone sends it, so the picker can't open mid-save.
+	await expect(page.locator('input[type="file"]')).toBeDisabled();
 	await dropOn(page, '.dropzone', [{ name: 'later.png', type: 'image/png' }]);
 	await dragOver(page, '.dropzone');
 	await expect(page.locator('.dropzone')).not.toHaveClass(/drag-over/);
@@ -366,6 +369,7 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 		})
 	});
 	await expect(page.locator('.dropzone')).not.toHaveClass(/disabled/);
+	await expect(page.locator('input[type="file"]')).toBeEnabled();
 	await dropOn(page, '.dropzone', [{ name: 'after.png', type: 'image/png' }]);
 	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue(/^\/x\d+\.png$/, {
 		timeout: 15_000

From b19ff290c0bf41c92041951d23627ed50df10058 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 01:44:22 -0700
Subject: [PATCH 23/33] fix(admin): let text drags reach the tile labels,
 announce refused files, and finish the upload page's rejected-tile state
 (SONA-216)

---
 messages/en.json                     |   5 +-
 messages/ja.json                     |   5 +-
 src/lib/config.test.ts               |  17 ++++
 src/lib/config.ts                    |  12 +++
 src/lib/drop-files.test.ts           |  37 ++++++++-
 src/lib/drop-files.ts                |  16 +++-
 src/lib/server/storage/index.ts      |   3 +-
 src/routes/admin/upload/+page.svelte | 119 ++++++++++++++++++---------
 tests/e2e/drop-files.ts              |  14 ++++
 tests/e2e/upload.spec.ts             |  59 +++++++++++--
 10 files changed, 232 insertions(+), 55 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index b4fae90c..4b9c398a 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -413,8 +413,9 @@
 	"admin_upload_dropzone_multi": "Choose up to {max} images, drag them here, or paste from the clipboard",
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
+	"admin_upload_images_rejected": "{count} file(s) couldn't be added",
 	"admin_upload_error_too_large": "This file is over {max}. Try a smaller image.",
-	"admin_upload_error_bad_type": "That file type isn't supported. Use PNG, JPEG, GIF, or WebP.",
+	"admin_upload_error_bad_type": "That file type isn't supported. Use PNG, JPEG, GIF, WebP, or AVIF.",
 	"admin_field_variant_of": "Variant of",
 	"admin_field_variant_label": "Variant label",
 	"admin_variant_none": "Not a variant",
@@ -436,7 +437,7 @@
 	"admin_variant_group_title": "Group as variants",
 	"admin_variant_group_pick_parent": "Pick the parent — the other images become its variants.",
 	"admin_variant_group_confirm": "Group",
-	"admin_upload_formats": "Supports PNG, JPG, GIF, WEBP up to 64MB",
+	"admin_upload_formats": "Supports PNG, JPEG, GIF, WebP, AVIF up to 64MB",
 	"admin_upload_image_details": "Image Details",
 	"admin_upload_title_placeholder": "Enter artwork title...",
 	"admin_upload_select_existing": "Select Existing",
diff --git a/messages/ja.json b/messages/ja.json
index 64ff88e4..c6f72e1d 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -357,8 +357,9 @@
 	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグするか、クリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
+	"admin_upload_images_rejected": "{count}件のファイルを追加できませんでした",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
-	"admin_upload_error_bad_type": "対応していないファイル形式です。PNG・JPEG・GIF・WebPをご利用ください。",
+	"admin_upload_error_bad_type": "対応していないファイル形式です。PNG・JPEG・GIF・WebP・AVIFをご利用ください。",
 	"admin_field_variant_of": "バリエーション元",
 	"admin_field_variant_label": "バリエーションラベル",
 	"admin_variant_none": "バリエーションではない",
@@ -380,7 +381,7 @@
 	"admin_variant_group_title": "バリエーションとしてグループ化",
 	"admin_variant_group_pick_parent": "親を選択してください — 他の画像はそのバリエーションになります。",
 	"admin_variant_group_confirm": "グループ化",
-	"admin_upload_formats": "PNG、JPG、GIF、WEBP（最大64MB）に対応しています",
+	"admin_upload_formats": "PNG・JPEG・GIF・WebP・AVIF（最大64MB）に対応しています",
 	"admin_upload_image_details": "画像の詳細",
 	"admin_upload_title_placeholder": "作品のタイトルを入力...",
 	"admin_upload_select_existing": "既存から選択",
diff --git a/src/lib/config.test.ts b/src/lib/config.test.ts
index 0be7f3d4..d89e69f1 100644
--- a/src/lib/config.test.ts
+++ b/src/lib/config.test.ts
@@ -1,4 +1,21 @@
 import { describe, it, expect, vi } from 'vitest';
+import { GALLERY_ACCEPT } from './config';
+import { ALLOWED_IMAGE_TYPES, isAllowedImageType } from './server/storage';
+
+// The picker's accept string and the server's allowlist have to say the same
+// thing: a type only the string has uploads a file /api/upload will refuse with
+// a 415, and a type only the server has is one the admin can't pick at all.
+describe('GALLERY_ACCEPT', () => {
+	const types = GALLERY_ACCEPT.split(',');
+
+	it('offers only types the server stores', () => {
+		for (const t of types) expect(isAllowedImageType(t)).toBe(true);
+	});
+
+	it('offers every type the server stores', () => {
+		expect(new Set(types)).toEqual(ALLOWED_IMAGE_TYPES);
+	});
+});
 
 describe('SESSION_COOKIE', () => {
 	it('uses the __Host- prefix in production', async () => {
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 0afcdd6a..271a6370 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -28,6 +28,18 @@ export const APP_NAME = 'Sona';
  */
 export const MAX_BUFFER_BYTES = 64 * 1024 * 1024;
 
+/**
+ * `accept` string for the admin gallery upload picker, and the filter dropped
+ * files are partitioned by. MIME types only, mirroring the server's
+ * ALLOWED_IMAGE_TYPES (`$lib/server/storage`): /api/upload validates the
+ * DECLARED type and reads an empty one as application/octet-stream, so accepting
+ * a bare `.png` here would upload the whole file just to collect a 415.
+ * Client-safe, and pinned to the server set by a test in config.test.ts — the
+ * two drifting apart either refuses a file the server would store or uploads one
+ * it will refuse.
+ */
+export const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/webp,image/avif';
+
 /**
  * Admin session cookie name. Read in `hooks.server.ts` / `auth.ts` before any
  * DB access, so it must be a build-time constant rather than a setting.
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index a52f0cbb..626b7149 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -100,14 +100,15 @@ describe('swallowStrayFileDrop', () => {
 });
 
 describe('dropFiles', () => {
-	function setup(disabled?: () => boolean) {
+	function setup(disabled?: () => boolean, passThroughNonFileDrags = false) {
 		const el = new FakeEl();
 		const calls: { files: PickedFile[]; rejected: PickedFile[] }[] = [];
 		const attach = dropFiles({
 			accept: 'image/png,.vrm',
 			onFiles: (files, rejected) =>
 				calls.push({ files: files as unknown as PickedFile[], rejected: rejected as unknown as PickedFile[] }),
-			disabled
+			disabled,
+			passThroughNonFileDrags
 		});
 		const cleanup = attach(el as unknown as HTMLElement);
 		return { el, calls, cleanup };
@@ -215,6 +216,38 @@ describe('dropFiles', () => {
 		expect(inner.el.classes.has('drag-over')).toBe(false);
 	});
 
+	it('leaves a text drag alone when the zone passes non-file drags through', () => {
+		// The upload page's tile grid holds the variant label inputs: cancelling a
+		// dragged selection here would stop it ever reaching a label.
+		const { el, calls } = setup(undefined, true);
+		const over = Object.assign(new Event('dragover', { cancelable: true }), {
+			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
+		});
+		el.dispatchEvent(over);
+		expect(over.defaultPrevented).toBe(false);
+		expect(over.dataTransfer.dropEffect).toBe('copy');
+		expect(el.classes.has('drag-over')).toBe(false);
+		const drop = Object.assign(new Event('drop', { cancelable: true }), {
+			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
+		});
+		el.dispatchEvent(drop);
+		expect(drop.defaultPrevented).toBe(false);
+		expect(calls).toHaveLength(0);
+		// A file drag over the same zone is still claimed and still lights it up.
+		const file = dragEvent('dragover');
+		el.dispatchEvent(file);
+		expect(file.defaultPrevented).toBe(true);
+		expect(el.classes.has('drag-over')).toBe(true);
+		// The default instance cancels that same text drag — the option is what
+		// makes the difference, not the drag.
+		const plain = setup();
+		const same = Object.assign(new Event('dragover', { cancelable: true }), {
+			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
+		});
+		plain.el.dispatchEvent(same);
+		expect(same.defaultPrevented).toBe(true);
+	});
+
 	it('removes its listeners on cleanup', () => {
 		const { el, calls, cleanup } = setup();
 		cleanup?.();
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index cf6d8c8c..1b305ee6 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -62,11 +62,18 @@ export function partitionByAccept(files: File[], accept: string): { accepted: Fi
  * The `accept` attribute only constrains the file PICKER — a dropped file skips
  * it entirely — so files are partitioned here and the caller reports the
  * rejected ones without ever posting them.
+ *
+ * `passThroughNonFileDrags` is for a zone that CONTAINS text fields (the upload
+ * page's tile grid holds the variant labels): a zone with no fields inside can
+ * cancel every drag, but cancelling a text drag over this one would block
+ * dropping a selection into a label. Off by default, because leaving a drag
+ * uncancelled is only safe where the drag carries no file.
  */
 export function dropFiles(opts: {
 	accept: string;
 	onFiles: (files: File[], rejected: File[]) => void;
 	disabled?: () => boolean;
+	passThroughNonFileDrags?: boolean;
 }): Attachment<HTMLElement> {
 	return (node) => {
 		// preventDefault on dragenter/dragover is what makes the element a drop
@@ -78,11 +85,15 @@ export function dropFiles(opts: {
 		// never overrides that handler's dropEffect.
 		const over = (e: DragEvent) => {
 			if (e.defaultPrevented) return;
-			e.preventDefault();
 			if (!carriesFiles(e)) {
+				// Leave a non-file drag entirely alone where the zone wraps text
+				// fields, so the browser's own text-drop handling still runs.
+				if (opts.passThroughNonFileDrags) return;
+				e.preventDefault();
 				if (e.dataTransfer) e.dataTransfer.dropEffect = 'none';
 				return;
 			}
+			e.preventDefault();
 			const off = opts.disabled?.() ?? false;
 			if (e.dataTransfer) e.dataTransfer.dropEffect = off ? 'none' : 'copy';
 			if (!off) node.classList.add('drag-over');
@@ -91,6 +102,9 @@ export function dropFiles(opts: {
 		const drop = (e: DragEvent) => {
 			node.classList.remove('drag-over');
 			if (e.defaultPrevented) return;
+			// Same reason as `over`: a text drop inside this zone belongs to the
+			// field it landed on, not here.
+			if (opts.passThroughNonFileDrags && !carriesFiles(e)) return;
 			e.preventDefault();
 			if (opts.disabled?.()) return;
 			const files = [...(e.dataTransfer?.files ?? [])];
diff --git a/src/lib/server/storage/index.ts b/src/lib/server/storage/index.ts
index 9f3bbbe7..fcad44a6 100644
--- a/src/lib/server/storage/index.ts
+++ b/src/lib/server/storage/index.ts
@@ -61,7 +61,8 @@ export function extFromContentType(contentType: string): string {
 // from the R2 custom domain (which serves them directly with their stored
 // content-type, bypassing the worker's security headers), so an SVG with a <script>
 // or a text/html payload would execute in that origin. Keep this strict.
-const ALLOWED_IMAGE_TYPES = new Set([
+// Exported for the test that pins $lib/config's GALLERY_ACCEPT to this set.
+export const ALLOWED_IMAGE_TYPES = new Set([
 	'image/jpeg',
 	'image/jpg',
 	'image/png',
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 7def927b..472fa50f 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { CloudUpload, Check, Loader2, Plus, X } from 'lucide-svelte';
+	import { CloudUpload, Check, FileBox, Loader2, Plus, X } from 'lucide-svelte';
 	import { tick } from 'svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
 	import { extractImageFiles, isTextEditable, shouldHandleImagePaste } from '$lib/clipboard';
 	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
-	import { MAX_BUFFER_BYTES } from '$lib/config';
+	import { GALLERY_ACCEPT, MAX_BUFFER_BYTES } from '$lib/config';
 	import { toast } from '$lib/toast.svelte';
 	import * as m from '$lib/paraglide/messages';
 
@@ -92,14 +92,6 @@
 		}
 	}
 
-	// MIME types only, mirroring /api/upload's ALLOWED_IMAGE_TYPES for the
-	// artwork folder (no video/webm — that one is scoped to vr-media): the
-	// endpoint validates the DECLARED type and reads an empty one as
-	// application/octet-stream, so accepting a bare .png here would upload the
-	// whole file just to collect a 415. image/jpg is in the server's set too;
-	// leaving it out would refuse a file the server would happily store.
-	const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/webp,image/avif';
-
 	// `rejected` holds files the accept string refused — from a drop, which the
 	// attribute never constrains, or from a picker the operator switched to "All
 	// files". They get a tile like an oversized file does (same slot accounting,
@@ -123,39 +115,51 @@
 		// uploading, and the announcement below counts tiles that really exist.
 		const batch: { key: number; file: File }[] = [];
 		for (const { file, badType } of fileArray) {
-			// Pre-check the server's size cap client-side: a file over it can only
-			// come back as a 413, so fail the tile here instead of a doomed POST.
-			const oversized = !badType && file.size > MAX_BUFFER_BYTES;
+			// The two ways a file fails before it is ever sent: a type the server
+			// refuses, and a size over the server's cap (which could only come back
+			// as a 413, so fail it here instead of firing a doomed POST). One
+			// expression drives the status, the message, and the batch below.
+			const error = badType
+				? m.admin_upload_error_bad_type()
+				: file.size > MAX_BUFFER_BYTES
+					? m.admin_upload_error_too_large({ max: formatSize(MAX_BUFFER_BYTES) })
+					: '';
 			const tile: Tile = {
 				key: tileKey++,
 				fileName: file.name,
-				previewUrl: URL.createObjectURL(file),
+				// A wrong-type file gets no object URL: handed to <img> it can only
+				// paint the browser's broken-image glyph. Its tile shows the resting
+				// surface and a file icon instead.
+				previewUrl: badType ? '' : URL.createObjectURL(file),
 				url: '',
 				width: 0,
 				height: 0,
 				fileSize: file.size,
-				status: oversized || badType ? 'error' : 'uploading',
-				error: badType
-					? m.admin_upload_error_bad_type()
-					: oversized
-						? m.admin_upload_error_too_large({ max: formatSize(MAX_BUFFER_BYTES) })
-						: '',
+				status: error ? 'error' : 'uploading',
+				error,
 				label: '',
 				nsfw: false
 			};
 			tiles = [...tiles, tile];
-			// Oversized and wrong-type files never enter the batch: no dimension
-			// probe (pass 2 would decode a >64 MB image for a tile that already
-			// failed) and no doomed POST. Their tile keeps 0×0 dims — it can't be
-			// saved anyway.
-			if (!oversized && !badType) batch.push({ key: tile.key, file });
+			// A failed tile never enters the batch: no dimension probe (pass 2 would
+			// decode a >64 MB image for a tile that already failed) and no doomed
+			// POST. Its tile keeps 0×0 dims — it can't be saved anyway.
+			if (!error) batch.push({ key: tile.key, file });
 		}
 
 		// Reset then set on the next tick so identical consecutive adds still
-		// re-announce to screen readers via the aria-live region.
+		// re-announce to screen readers via the aria-live region. Only files that
+		// really entered the batch are announced as added — the refused ones are
+		// counted separately, so the region never claims a rejected file was added.
+		const refused = fileArray.length - batch.length;
 		announce = '';
 		await tick();
-		announce = m.admin_upload_images_added({ count: fileArray.length });
+		announce = [
+			batch.length > 0 ? m.admin_upload_images_added({ count: batch.length }) : '',
+			refused > 0 ? m.admin_upload_images_rejected({ count: refused }) : ''
+		]
+			.filter(Boolean)
+			.join(' ');
 
 		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
 		// this batch (matching VrAvatarForm's media flow) so a full batch can't
@@ -176,7 +180,8 @@
 	function removeTile(key: number) {
 		const idx = tiles.findIndex((t) => t.key === key);
 		if (idx === -1) return;
-		URL.revokeObjectURL(tiles[idx].previewUrl);
+		// A wrong-type tile never got an object URL to revoke.
+		if (tiles[idx].previewUrl) URL.revokeObjectURL(tiles[idx].previewUrl);
 		tiles = tiles.filter((t) => t.key !== key);
 		if (parentIndex >= tiles.length) parentIndex = 0;
 	}
@@ -211,7 +216,10 @@
 		)
 			return;
 		e.preventDefault();
-		handleFiles(files);
+		// Clipboard images skip the accept filter the same way a drop does — a
+		// pasted SVG is a file /api/upload refuses — so partition them too.
+		const { accepted, rejected } = partitionByAccept(files, GALLERY_ACCEPT);
+		handleFiles(accepted, rejected);
 	}
 
 	function onArtistCreated(artist: { id: number; name: string }) {
@@ -258,10 +266,18 @@
 			class="dropzone"
 			class:disabled={saving}
 			{@attach dropFiles({ accept: GALLERY_ACCEPT, onFiles: handleFiles, disabled: () => saving })}
-			onclick={() => fileInput?.click()}
+			onclick={() => { if (!saving) fileInput?.click(); }}
 			role="button"
 			tabindex="0"
-			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') fileInput?.click(); }}
+			aria-disabled={saving}
+			onkeydown={(e) => {
+				if (saving) return;
+				if (e.key === 'Enter' || e.key === ' ') {
+					// Space on a role="button" scrolls the page unless it's cancelled.
+					if (e.key === ' ') e.preventDefault();
+					fileInput?.click();
+				}
+			}}
 		>
 			<CloudUpload size={40} />
 			<p>{m.admin_upload_dropzone_multi({ max: data.maxVariantSet })}</p>
@@ -270,12 +286,27 @@
 	{:else}
 		<div
 			class="tile-grid"
-			{@attach dropFiles({ accept: GALLERY_ACCEPT, onFiles: handleFiles, disabled: () => saving })}
+			{@attach dropFiles({
+				accept: GALLERY_ACCEPT,
+				onFiles: handleFiles,
+				disabled: () => saving,
+				// This zone wraps the variant label inputs, so a text drag has to
+				// reach them instead of being cancelled on the way.
+				passThroughNonFileDrags: true
+			})}
 		>
 			{#each tiles as tile, i (tile.key)}
 				<div class="tile" class:tile-error={tile.status === 'error'} class:tile-parent={isGroup && groupMode === 'new' && parentIndex === i}>
 					<div class="tile-preview">
-						<img src={tile.previewUrl} alt={tile.fileName} />
+						{#if tile.previewUrl}
+							<img src={tile.previewUrl} alt={tile.fileName} />
+						{:else}
+							<!-- A refused file has no preview to show; the icon stands in
+							     for it and carries the file name the img alt used to. -->
+							<div class="tile-placeholder" role="img" aria-label={tile.fileName}>
+								<FileBox size={28} />
+							</div>
+						{/if}
 						<div class="tile-status">
 							{#if tile.status === 'uploading'}
 								<Loader2 size={16} class="spin" />
@@ -314,7 +345,7 @@
 				</div>
 			{/each}
 			{#if tiles.length < data.maxVariantSet}
-				<button type="button" class="tile tile-add" onclick={() => fileInput?.click()}>
+				<button type="button" class="tile tile-add" disabled={saving} onclick={() => fileInput?.click()}>
 					<Plus size={20} />
 					<span>{m.admin_variant_add_files()}</span>
 				</button>
@@ -554,6 +585,12 @@
 		background-color: color-mix(in srgb, var(--primary) 5%, transparent);
 	}
 
+	/* While the whole grid is the drop target, the add tile's own dashed border
+	   sits 12px inside the grid's and reads as a second, competing zone. */
+	.tile-grid:global(.drag-over) .tile-add {
+		border-color: transparent;
+	}
+
 	.tile {
 		display: flex;
 		flex-direction: column;
@@ -586,6 +623,16 @@
 		object-fit: cover;
 	}
 
+	/* Stand-in for a refused file, which gets no object URL to preview. */
+	.tile-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		color: var(--muted-foreground);
+	}
+
 	.tile-status {
 		position: absolute;
 		bottom: 0;
@@ -692,10 +739,6 @@
 		height: 15px;
 	}
 
-	.error-text {
-		color: var(--destructive);
-	}
-
 	.dropzone-hint {
 		font-size: 12px;
 		color: var(--muted-foreground);
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index fe9305d9..3f3addfa 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -54,6 +54,20 @@ export function dragOver(page: Page, selector: string) {
 	}, selector);
 }
 
+/** Dispatch a `dragover` carrying only text on `selector`, and report whether a
+ * handler cancelled it. A zone that wraps text fields (the upload page's tile
+ * grid) must leave this one alone, or a dragged selection can never reach a
+ * label input inside it. */
+export function dragOverText(page: Page, selector: string) {
+	return page.evaluate((selector) => {
+		const dt = new DataTransfer();
+		dt.setData('text/plain', 'a dragged selection');
+		return document.querySelector(selector)!.dispatchEvent(
+			new DragEvent('dragover', { dataTransfer: dt, bubbles: true, cancelable: true })
+		);
+	}, selector);
+}
+
 /**
  * Wait until the drop attachment is live on `selector`.
  *
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index e54da250..1f1aec19 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -4,6 +4,7 @@ import { adminLogin } from './admin-login';
 import {
 	dropOn,
 	dragOver,
+	dragOverText,
 	expectDragOverHighlight,
 	waitForDropAttachment
 } from './drop-files';
@@ -239,24 +240,39 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	// otherwise a second file dropped where the zone used to be would navigate
 	// the tab away from a half-filled form.
 	await waitForDropAttachment(page, '.tile-grid');
+	// The grid wraps the variant label inputs, so it lets a text drag through
+	// untouched — cancelling it would stop a dragged selection ever reaching a
+	// label. Uncancelled (dispatchEvent true) and no highlight.
+	expect(await dragOverText(page, '.tile-grid')).toBe(true);
+	await expect(page.locator('.tile-grid')).not.toHaveClass(/drag-over/);
+	// A file drag over the same grid is still claimed and still lights it up.
 	await expectDragOverHighlight(page, '.tile-grid');
 
 	// A dropped file skips the input's accept filter, so the page has to reject
-	// the wrong type itself: an error tile, and no POST.
+	// the wrong type itself: an error tile, and no POST for it. Dropped alongside
+	// an image, so the announcement has to tell the two apart.
 	const before = uploads;
-	await dropOn(page, '.tile-grid', [{ name: 'notes.txt', type: 'text/plain' }]);
+	await dropOn(page, '.tile-grid', [
+		{ name: 'second.png', type: 'image/png' },
+		{ name: 'notes.txt', type: 'text/plain' }
+	]);
 	await expect(page.locator('.tile-error .error-text')).toContainText(
 		"That file type isn't supported"
 	);
-	// Past the moment a POST that DID fire would have landed (mutation-checked).
-	await page.waitForTimeout(300);
-	expect(uploads).toBe(before);
-
-	// The refused file doesn't poison the zone: the next image still uploads.
-	await dropOn(page, '.tile-grid', [{ name: 'second.png', type: 'image/png' }]);
-	await expect(page.locator('input[name="imageUrl_2"]')).toHaveValue('/x2.png', {
+	// The live region counts only the file that really entered the batch as
+	// added; the refused one gets its own count.
+	// div, not p: the admin layout has its own sr-only live region.
+	await expect(page.locator('div.sr-only[aria-live="polite"]')).toHaveText(
+		"1 image(s) added 1 file(s) couldn't be added"
+	);
+	// The image in that same drop still uploads...
+	await expect(page.locator('input[name="imageUrl_1"]')).toHaveValue('/x2.png', {
 		timeout: 15_000
 	});
+	// ...and exactly one POST fired — none for the refused file. Past the moment a
+	// POST that DID fire would have landed (mutation-checked).
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before + 1);
 
 	// A drop that misses both zones (here: the form itself) is swallowed
 	// page-wide, so it can't navigate the tab to the file and lose the form.
@@ -269,6 +285,31 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(3);
 });
 
+test('refused files still take slots: nine wrong-type files fill the eight-tile cap', async ({
+	page
+}) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	const uploads = countUploadPosts(page);
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	// A refused file consumes a slot exactly like an accepted one — it holds a
+	// tile the operator has to dismiss — so nine of them hit the cap the seeded
+	// max (8, as the dropzone hint says) sets, and the ninth is skipped.
+	await dropOn(
+		page,
+		'.dropzone',
+		Array.from({ length: 9 }, (_, i) => ({ name: `notes-${i}.txt`, type: 'text/plain' }))
+	);
+	await expect(page.locator('.tile-error')).toHaveCount(8);
+	await expect(page.locator('.alert-message')).toHaveText('1 image(s) skipped — max 8');
+	// None of them was ever sent.
+	await page.waitForTimeout(300);
+	expect(uploads.counters.total).toBe(0);
+});
+
 test('a picked file the accept string refuses gets an error tile, not a POST', async ({ page }) => {
 	await adminLogin(page, PASSWORD);
 

From 19f3ad1d75740300b93d8936b30649e992910cc2 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 02:12:21 -0700
Subject: [PATCH 24/33] fix(admin): pass drags through only to text fields,
 announce upload outcomes on the gallery page, and pin the VR media accept
 list (SONA-216)

---
 messages/en.json                       |   4 +-
 messages/ja.json                       |   2 +
 src/lib/components/VrAvatarForm.svelte |  12 +-
 src/lib/config.test.ts                 |  18 ++-
 src/lib/config.ts                      |   9 ++
 src/lib/drop-files.test.ts             |  50 +++++++--
 src/lib/drop-files.ts                  |  34 ++++--
 src/routes/admin/upload/+page.svelte   |  72 +++++++++---
 tests/e2e/drop-files.ts                |  34 ++++--
 tests/e2e/upload.spec.ts               | 149 +++++++++++++++++++++++--
 10 files changed, 318 insertions(+), 66 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 4b9c398a..1af0f3fa 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -414,6 +414,8 @@
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
 	"admin_upload_images_rejected": "{count} file(s) couldn't be added",
+	"admin_upload_batch_done": "Upload finished.",
+	"admin_upload_batch_issues": "Upload finished with errors. Each file that failed shows the reason.",
 	"admin_upload_error_too_large": "This file is over {max}. Try a smaller image.",
 	"admin_upload_error_bad_type": "That file type isn't supported. Use PNG, JPEG, GIF, WebP, or AVIF.",
 	"admin_field_variant_of": "Variant of",
@@ -437,7 +439,7 @@
 	"admin_variant_group_title": "Group as variants",
 	"admin_variant_group_pick_parent": "Pick the parent — the other images become its variants.",
 	"admin_variant_group_confirm": "Group",
-	"admin_upload_formats": "Supports PNG, JPEG, GIF, WebP, AVIF up to 64MB",
+	"admin_upload_formats": "Supports PNG, JPEG, GIF, WebP, and AVIF up to 64MB",
 	"admin_upload_image_details": "Image Details",
 	"admin_upload_title_placeholder": "Enter artwork title...",
 	"admin_upload_select_existing": "Select Existing",
diff --git a/messages/ja.json b/messages/ja.json
index c6f72e1d..dcf4e17a 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -358,6 +358,8 @@
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
 	"admin_upload_images_rejected": "{count}件のファイルを追加できませんでした",
+	"admin_upload_batch_done": "アップロードが完了しました。",
+	"admin_upload_batch_issues": "アップロードは完了しましたが、エラーがありました。失敗したファイルにはそれぞれ理由が表示されています。",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
 	"admin_upload_error_bad_type": "対応していないファイル形式です。PNG・JPEG・GIF・WebP・AVIFをご利用ください。",
 	"admin_field_variant_of": "バリエーション元",
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index a63be18c..53521e9a 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -10,7 +10,7 @@
 	import { DragReorder } from '$lib/drag-reorder.svelte';
 	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
 	import { probeDimensions } from '$lib/probe-dimensions';
-	import { MAX_BUFFER_BYTES } from '$lib/config';
+	import { MAX_BUFFER_BYTES, VR_MEDIA_ACCEPT } from '$lib/config';
 	import { MAX_VR_MODEL_BYTES, creditRoleLabel, formatBytes, modelFileError, modelFormatLabel, namePlaceholderCharacter, platformLabel } from '$lib/vr';
 	import * as m from '$lib/paraglide/messages';
 
@@ -220,10 +220,6 @@
 		mediaEntries = mediaEntries.filter((_, idx) => idx !== i);
 	}
 
-	// MIME types only: /api/upload validates the declared type and reads an empty
-	// one as application/octet-stream, so accepting a bare .png here would upload
-	// the whole file just to collect a 415.
-	const MEDIA_ACCEPT = 'image/jpeg,image/png,image/gif,image/webp,image/avif,video/webm';
 	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
 	const MAX_MEDIA_BYTES = MAX_BUFFER_BYTES;
 
@@ -234,7 +230,7 @@
 		if (!files.length) return;
 		// `accept` is a filter the OS dialog can override ("All files"), so a
 		// picked .txt would otherwise upload its whole body just to collect a 415.
-		const { accepted, rejected } = partitionByAccept(files, MEDIA_ACCEPT);
+		const { accepted, rejected } = partitionByAccept(files, VR_MEDIA_ACCEPT);
 		uploadMedia(accepted, rejected);
 	}
 
@@ -844,7 +840,7 @@
 			class="upload-zone media-zone"
 			class:disabled={mediaUploading || saving}
 			{@attach dropFiles({
-				accept: MEDIA_ACCEPT,
+				accept: VR_MEDIA_ACCEPT,
 				onFiles: uploadMedia,
 				// Also while saving: a drop after Save would upload and append a row
 				// the already-serialized submit never sees, orphaning the file.
@@ -855,7 +851,7 @@
 			<span>{mediaUploading ? m.admin_upload_uploading() : m.admin_vr_media_dropzone({ max: formatBytes(MAX_MEDIA_BYTES) })}</span>
 			<input
 				type="file"
-				accept={MEDIA_ACCEPT}
+				accept={VR_MEDIA_ACCEPT}
 				multiple
 				onchange={onMediaPicked}
 				disabled={mediaUploading || saving}
diff --git a/src/lib/config.test.ts b/src/lib/config.test.ts
index d89e69f1..be675af4 100644
--- a/src/lib/config.test.ts
+++ b/src/lib/config.test.ts
@@ -1,10 +1,9 @@
 import { describe, it, expect, vi } from 'vitest';
-import { GALLERY_ACCEPT } from './config';
+import { GALLERY_ACCEPT, VR_MEDIA_ACCEPT } from './config';
 import { ALLOWED_IMAGE_TYPES, isAllowedImageType } from './server/storage';
 
-// The picker's accept string and the server's allowlist have to say the same
-// thing: a type only the string has uploads a file /api/upload will refuse with
-// a 415, and a type only the server has is one the admin can't pick at all.
+// A type only the accept string has uploads a file /api/upload refuses with a
+// 415; a type only the server has is one the admin can't pick at all.
 describe('GALLERY_ACCEPT', () => {
 	const types = GALLERY_ACCEPT.split(',');
 
@@ -17,6 +16,17 @@ describe('GALLERY_ACCEPT', () => {
 	});
 });
 
+// Same pin for the VR form's picker, which adds the one video type the showcase
+// renders on top of the gallery's images.
+describe('VR_MEDIA_ACCEPT', () => {
+	const types = VR_MEDIA_ACCEPT.split(',');
+
+	it('offers exactly the server image types, plus video/webm', () => {
+		expect(new Set(types.filter((t) => t.startsWith('image/')))).toEqual(ALLOWED_IMAGE_TYPES);
+		expect(types.filter((t) => !t.startsWith('image/'))).toEqual(['video/webm']);
+	});
+});
+
 describe('SESSION_COOKIE', () => {
 	it('uses the __Host- prefix in production', async () => {
 		// The vitest stub for `$app/environment` sets dev=false (prod). The
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 271a6370..84938fc7 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -40,6 +40,15 @@ export const MAX_BUFFER_BYTES = 64 * 1024 * 1024;
  */
 export const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/webp,image/avif';
 
+/**
+ * `accept` string for the VR avatar form's media picker and drop zone: every
+ * image the gallery takes, plus the one video type the showcase renders. Derived
+ * from GALLERY_ACCEPT rather than spelled out again — the copy that used to live
+ * in the component had drifted (it was missing image/jpg, which the server
+ * accepts), and the same pin test in config.test.ts now covers both.
+ */
+export const VR_MEDIA_ACCEPT = `${GALLERY_ACCEPT},video/webm`;
+
 /**
  * Admin session cookie name. Read in `hooks.server.ts` / `auth.ts` before any
  * DB access, so it must be a build-time constant rather than a setting.
diff --git a/src/lib/drop-files.test.ts b/src/lib/drop-files.test.ts
index 626b7149..9255daff 100644
--- a/src/lib/drop-files.test.ts
+++ b/src/lib/drop-files.test.ts
@@ -61,6 +61,22 @@ function dragEvent(type: string, files: PickedFile[] = [], types: string[] = ['F
 	return Object.assign(new Event(type, { cancelable: true }), { dataTransfer: { files, types, dropEffect: '' } });
 }
 
+// A drag carrying no files (a selection, a link from another tab), reporting
+// `target` as what it landed on. `target` is an accessor on Event.prototype, so
+// it has to be defined as an own property rather than assigned.
+function textDrag(type: string, target: unknown, types = ['text/plain']) {
+	const ev = Object.assign(new Event(type, { cancelable: true }), {
+		dataTransfer: { types, files: [] as PickedFile[], dropEffect: 'copy' }
+	});
+	Object.defineProperty(ev, 'target', { value: target });
+	return ev;
+}
+
+// What a variant label input looks like to isTextEditable, and what the grid
+// itself (a plain div) looks like.
+const LABEL_FIELD = { tagName: 'INPUT', type: 'text' };
+const GRID = { tagName: 'DIV' };
+
 describe('partitionByAccept', () => {
 	it('splits by the accept string and keeps input order in both buckets', () => {
 		const a = { name: 'a.vrm', type: '' };
@@ -216,20 +232,18 @@ describe('dropFiles', () => {
 		expect(inner.el.classes.has('drag-over')).toBe(false);
 	});
 
-	it('leaves a text drag alone when the zone passes non-file drags through', () => {
+	it('leaves a text drag alone when it lands on a field of a pass-through zone', () => {
 		// The upload page's tile grid holds the variant label inputs: cancelling a
-		// dragged selection here would stop it ever reaching a label.
+		// dragged selection here would stop it ever reaching a label. The event has
+		// to report the label as its target — that is the only thing that earns the
+		// pass-through.
 		const { el, calls } = setup(undefined, true);
-		const over = Object.assign(new Event('dragover', { cancelable: true }), {
-			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
-		});
+		const over = textDrag('dragover', LABEL_FIELD);
 		el.dispatchEvent(over);
 		expect(over.defaultPrevented).toBe(false);
 		expect(over.dataTransfer.dropEffect).toBe('copy');
 		expect(el.classes.has('drag-over')).toBe(false);
-		const drop = Object.assign(new Event('drop', { cancelable: true }), {
-			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
-		});
+		const drop = textDrag('drop', LABEL_FIELD);
 		el.dispatchEvent(drop);
 		expect(drop.defaultPrevented).toBe(false);
 		expect(calls).toHaveLength(0);
@@ -241,13 +255,27 @@ describe('dropFiles', () => {
 		// The default instance cancels that same text drag — the option is what
 		// makes the difference, not the drag.
 		const plain = setup();
-		const same = Object.assign(new Event('dragover', { cancelable: true }), {
-			dataTransfer: { types: ['text/plain'], files: [], dropEffect: 'copy' }
-		});
+		const same = textDrag('dragover', LABEL_FIELD);
 		plain.el.dispatchEvent(same);
 		expect(same.defaultPrevented).toBe(true);
 	});
 
+	it('still cancels a non-file drag that misses the fields of a pass-through zone', () => {
+		// The regression that made the option dangerous: a link dragged from
+		// another tab carries no 'Files', so passing every non-file drag through
+		// let a drop on the grid's own padding navigate the tab away from the form.
+		const { el, calls } = setup(undefined, true);
+		const over = textDrag('dragover', GRID, ['text/uri-list']);
+		el.dispatchEvent(over);
+		expect(over.defaultPrevented).toBe(true);
+		expect(over.dataTransfer.dropEffect).toBe('none');
+		expect(el.classes.has('drag-over')).toBe(false);
+		const drop = textDrag('drop', GRID, ['text/uri-list']);
+		el.dispatchEvent(drop);
+		expect(drop.defaultPrevented).toBe(true);
+		expect(calls).toHaveLength(0);
+	});
+
 	it('removes its listeners on cleanup', () => {
 		const { el, calls, cleanup } = setup();
 		cleanup?.();
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 1b305ee6..33387c59 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -1,4 +1,5 @@
 import type { Attachment } from 'svelte/attachments';
+import { isTextEditable } from './clipboard';
 
 /**
  * Does a file satisfy an `accept` attribute string? Handles the three forms the
@@ -30,6 +31,21 @@ function carriesFiles(e: DragEvent): boolean {
 	return Array.from(e.dataTransfer?.types ?? []).includes('Files');
 }
 
+/**
+ * Did the drag land on a text field of the zone's own markup? That is the only
+ * place a pass-through zone may leave a drag uncancelled: a link dragged from
+ * another tab (`text/uri-list`, no `Files`) dropped on the zone's padding would
+ * otherwise navigate the tab away from the form.
+ *
+ * Duck-typed rather than `instanceof HTMLElement` because these tests run in a
+ * DOM-less node environment; `isTextEditable` only reads the three fields below.
+ */
+function droppedOnTextField(e: DragEvent): boolean {
+	const t = e.target as { tagName?: unknown; type?: string; isContentEditable?: boolean } | null;
+	if (typeof t?.tagName !== 'string') return false;
+	return isTextEditable(t as { tagName: string; type?: string; isContentEditable?: boolean });
+}
+
 /**
  * Window-level guard for the admin forms that host drop zones: a file dropped
  * anywhere the zones don't cover (the hint under a zone, a media row, blank
@@ -66,8 +82,9 @@ export function partitionByAccept(files: File[], accept: string): { accepted: Fi
  * `passThroughNonFileDrags` is for a zone that CONTAINS text fields (the upload
  * page's tile grid holds the variant labels): a zone with no fields inside can
  * cancel every drag, but cancelling a text drag over this one would block
- * dropping a selection into a label. Off by default, because leaving a drag
- * uncancelled is only safe where the drag carries no file.
+ * dropping a selection into a label. Off by default, and even when on it only
+ * passes a drag through that landed ON one of those fields — leaving a drag
+ * uncancelled is only safe where the field it hit will handle it.
  */
 export function dropFiles(opts: {
 	accept: string;
@@ -87,8 +104,10 @@ export function dropFiles(opts: {
 			if (e.defaultPrevented) return;
 			if (!carriesFiles(e)) {
 				// Leave a non-file drag entirely alone where the zone wraps text
-				// fields, so the browser's own text-drop handling still runs.
-				if (opts.passThroughNonFileDrags) return;
+				// fields, so the browser's own text-drop handling still runs — but
+				// only on the field itself. Anywhere else in the zone it is cancelled
+				// like any other zone would.
+				if (opts.passThroughNonFileDrags && droppedOnTextField(e)) return;
 				e.preventDefault();
 				if (e.dataTransfer) e.dataTransfer.dropEffect = 'none';
 				return;
@@ -102,9 +121,10 @@ export function dropFiles(opts: {
 		const drop = (e: DragEvent) => {
 			node.classList.remove('drag-over');
 			if (e.defaultPrevented) return;
-			// Same reason as `over`: a text drop inside this zone belongs to the
-			// field it landed on, not here.
-			if (opts.passThroughNonFileDrags && !carriesFiles(e)) return;
+			// Same reason as `over`: a text drop on one of this zone's fields belongs
+			// to that field, not here. A non-file drop anywhere else still gets
+			// cancelled below.
+			if (opts.passThroughNonFileDrags && !carriesFiles(e) && droppedOnTextField(e)) return;
 			e.preventDefault();
 			if (opts.disabled?.()) return;
 			const files = [...(e.dataTransfer?.files ?? [])];
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 472fa50f..cb431072 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { CloudUpload, Check, FileBox, Loader2, Plus, X } from 'lucide-svelte';
 	import { tick } from 'svelte';
+	import { CloudUpload, Check, FileBox, Loader2, Plus, X } from 'lucide-svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
 	import { extractImageFiles, isTextEditable, shouldHandleImagePaste } from '$lib/clipboard';
 	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
@@ -20,6 +20,15 @@
 	let showNewArtist = $state(false);
 	let saving = $state(false);
 	let announce = $state('');
+	// Bumped on every write so {#key} replaces the node inside the live region:
+	// two identical batches say the same thing, and re-assigning text the region
+	// already holds changes no DOM, so nothing would be announced. Same shape the
+	// VR and sticker forms use.
+	let announceUid = $state(0);
+	function setAnnounce(text: string) {
+		announce = text;
+		announceUid++;
+	}
 	let fileInput: HTMLInputElement;
 
 	type Tile = {
@@ -147,19 +156,19 @@
 			if (!error) batch.push({ key: tile.key, file });
 		}
 
-		// Reset then set on the next tick so identical consecutive adds still
-		// re-announce to screen readers via the aria-live region. Only files that
-		// really entered the batch are announced as added — the refused ones are
-		// counted separately, so the region never claims a rejected file was added.
+		// Only files that really entered the batch are announced as added — the
+		// refused ones are counted separately, so the region never claims a
+		// rejected file was added. Two sentences, so join them as sentences;
+		// neither message ends in a period of its own.
 		const refused = fileArray.length - batch.length;
-		announce = '';
-		await tick();
-		announce = [
-			batch.length > 0 ? m.admin_upload_images_added({ count: batch.length }) : '',
-			refused > 0 ? m.admin_upload_images_rejected({ count: refused }) : ''
-		]
-			.filter(Boolean)
-			.join(' ');
+		setAnnounce(
+			[
+				batch.length > 0 ? m.admin_upload_images_added({ count: batch.length }) : '',
+				refused > 0 ? m.admin_upload_images_rejected({ count: refused }) : ''
+			]
+				.filter(Boolean)
+				.join('. ')
+		);
 
 		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
 		// this batch (matching VrAvatarForm's media flow) so a full batch can't
@@ -167,6 +176,11 @@
 		// loop, so the guarantee is per-invocation, not global. Each tile still
 		// shows its own status. Mutate the tile via the `tiles` state proxy
 		// (not the pass-1 local) so updates stay reactive.
+		if (batch.length === 0) return;
+		// The await is load-bearing: without it the counts above and this status
+		// land in one synchronous run and the counts never reach the DOM at all.
+		await tick();
+		setAnnounce(m.admin_upload_uploading());
 		for (const { key, file } of batch) {
 			const dims = await getImageDimensions(file);
 			const tile = tiles.find((t) => t.key === key);
@@ -175,6 +189,12 @@
 			tile.height = dims.height;
 			await uploadOne(tile, file);
 		}
+		// The per-tile outcome is only visible as an icon or a line of text on the
+		// tile, so close the batch out in the live region too (mirroring the VR
+		// media flow). Tiles the batch dropped — a declined duplicate, a removal
+		// mid-upload — are simply gone, so only survivors can report an error.
+		const failed = batch.some(({ key }) => tiles.find((t) => t.key === key)?.status === 'error');
+		setAnnounce(failed ? m.admin_upload_batch_issues() : m.admin_upload_batch_done());
 	}
 
 	function removeTile(key: number) {
@@ -231,7 +251,9 @@
 
 <svelte:window onpaste={handlePaste} ondragover={swallowStrayFileDrop} ondrop={swallowStrayFileDrop} />
 
-<div class="sr-only" aria-live="polite">{announce}</div>
+<!-- The region itself stays put; only the node inside it is keyed, so repeating
+     an announcement still mutates the region and gets read out. -->
+<div class="sr-only" aria-live="polite">{#key announceUid}<span>{announce}</span>{/key}</div>
 
 <div class="page-header">
 	<h1>{m.admin_upload_title()}</h1>
@@ -313,6 +335,8 @@
 							{:else if tile.status === 'done'}
 								<Check size={16} />
 							{:else}
+								<!-- .error-text carries no styling of its own — the status band
+								     already supplies the color; the class is a test hook. -->
 								<span class="error-text">{tile.error}</span>
 							{/if}
 						</div>
@@ -345,7 +369,11 @@
 				</div>
 			{/each}
 			{#if tiles.length < data.maxVariantSet}
-				<button type="button" class="tile tile-add" disabled={saving} onclick={() => fileInput?.click()}>
+				<!-- aria-disabled rather than `disabled`, matching the dropzone: a
+				     native disabled button loses focus the moment the save starts,
+				     dropping the keyboard user back on <body>. The click guard is what
+				     actually refuses. -->
+				<button type="button" class="tile tile-add" aria-disabled={saving} onclick={() => { if (!saving) fileInput?.click(); }}>
 					<Plus size={20} />
 					<span>{m.admin_variant_add_files()}</span>
 				</button>
@@ -721,6 +749,20 @@
 		color: var(--primary);
 	}
 
+	/* Mirrors .dropzone.disabled — the other way into the picker has to read as
+	   unavailable while the save is in flight, not just refuse the click. */
+	.tile-add[aria-disabled='true'] {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+
+	/* aria-disabled leaves the button hoverable, so undo exactly what :hover
+	   above sets and hold the resting look. */
+	.tile-add[aria-disabled='true']:hover {
+		border-color: var(--border);
+		color: var(--muted-foreground);
+	}
+
 	.group-section {
 		gap: 10px;
 	}
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index 3f3addfa..e23cb4ee 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -54,18 +54,28 @@ export function dragOver(page: Page, selector: string) {
 	}, selector);
 }
 
-/** Dispatch a `dragover` carrying only text on `selector`, and report whether a
- * handler cancelled it. A zone that wraps text fields (the upload page's tile
- * grid) must leave this one alone, or a dragged selection can never reach a
- * label input inside it. */
-export function dragOverText(page: Page, selector: string) {
-	return page.evaluate((selector) => {
-		const dt = new DataTransfer();
-		dt.setData('text/plain', 'a dragged selection');
-		return document.querySelector(selector)!.dispatchEvent(
-			new DragEvent('dragover', { dataTransfer: dt, bubbles: true, cancelable: true })
-		);
-	}, selector);
+/**
+ * Dispatch a bubbling `dragover` carrying only text on `selector`, and report
+ * whether a handler cancelled it.
+ *
+ * `selector` is the element the drag LANDS on, which is what decides the
+ * outcome: a zone that wraps text fields (the upload page's tile grid) has to
+ * leave a drag alone that hit one of those fields, or a dragged selection can
+ * never reach a label input — but must still cancel one that hit the zone
+ * itself, since a dropped link would navigate the tab. `type` picks which
+ * flavour of drag: a selection (`text/plain`) or a link (`text/uri-list`).
+ */
+export function dragOverText(page: Page, selector: string, type = 'text/plain') {
+	return page.evaluate(
+		({ selector, type }) => {
+			const dt = new DataTransfer();
+			dt.setData(type, type === 'text/uri-list' ? 'https://example.com/a.png' : 'a dragged selection');
+			return document.querySelector(selector)!.dispatchEvent(
+				new DragEvent('dragover', { dataTransfer: dt, bubbles: true, cancelable: true })
+			);
+		},
+		{ selector, type }
+	);
 }
 
 /**
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 1f1aec19..b1740e70 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -204,6 +204,42 @@ test('an oversized file fails client-side without a POST; the rest of the batch
 	expect(uploads.counters.total).toBe(1);
 });
 
+// Paste one file into the page. The clipboard can't be primed with a file from
+// the test runner, so build the DataTransfer inside the page and dispatch the
+// paste on `document` — it bubbles to the window handler the page listens on.
+function pasteFile(page: Page, name: string, type: string) {
+	return page.evaluate(
+		({ name, type }) => {
+			const dt = new DataTransfer();
+			dt.items.add(new File([new Uint8Array([1, 2, 3, 4])], name, { type }));
+			document.dispatchEvent(
+				new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true })
+			);
+		},
+		{ name, type }
+	);
+}
+
+// The page's own live region (the admin layout has a separate one, a <p>).
+const LIVE_REGION = 'div.sr-only[aria-live="polite"]';
+
+// Record every text the live region is handed. A batch writes it three times in
+// quick succession — the added/refused counts, "Uploading...", then the outcome
+// — and only the last survives long enough for a polling locator assertion to
+// see it, so a MutationObserver is the only way to assert the earlier ones.
+async function recordAnnouncements(page: Page) {
+	await page.evaluate((selector) => {
+		const region = document.querySelector(selector)!;
+		const log: string[] = [];
+		(window as unknown as { __announced: string[] }).__announced = log;
+		new MutationObserver(() => {
+			const text = region.textContent!.trim();
+			if (text && text !== log[log.length - 1]) log.push(text);
+		}).observe(region, { childList: true, characterData: true, subtree: true });
+	}, LIVE_REGION);
+	return () => page.evaluate(() => (window as unknown as { __announced: string[] }).__announced);
+}
+
 test('dropping images adds tiles, and a wrong type is rejected without a request', async ({
 	page
 }) => {
@@ -235,15 +271,21 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/x1.png', {
 		timeout: 15_000
 	});
+	// The per-file outcome is otherwise only an icon on the tile, so the batch
+	// closes out in the live region too. This is the last thing written, so a
+	// plain locator assertion can see it.
+	await expect(page.locator(LIVE_REGION)).toHaveText('Upload finished.');
 
 	// The first tile replaces the dropzone with the grid, which takes drops too —
 	// otherwise a second file dropped where the zone used to be would navigate
 	// the tab away from a half-filled form.
 	await waitForDropAttachment(page, '.tile-grid');
 	// The grid wraps the variant label inputs, so it lets a text drag through
-	// untouched — cancelling it would stop a dragged selection ever reaching a
-	// label. Uncancelled (dispatchEvent true) and no highlight.
-	expect(await dragOverText(page, '.tile-grid')).toBe(true);
+	// untouched — but only one that landed ON a label (asserted after the second
+	// drop below, once a label exists). A drag that hit the grid itself is still
+	// cancelled: a link dragged in from another tab carries no 'Files' either,
+	// and dropping it on the gap between tiles would navigate away from the form.
+	expect(await dragOverText(page, '.tile-grid', 'text/uri-list')).toBe(false);
 	await expect(page.locator('.tile-grid')).not.toHaveClass(/drag-over/);
 	// A file drag over the same grid is still claimed and still lights it up.
 	await expectDragOverHighlight(page, '.tile-grid');
@@ -252,6 +294,7 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	// the wrong type itself: an error tile, and no POST for it. Dropped alongside
 	// an image, so the announcement has to tell the two apart.
 	const before = uploads;
+	const announced = await recordAnnouncements(page);
 	await dropOn(page, '.tile-grid', [
 		{ name: 'second.png', type: 'image/png' },
 		{ name: 'notes.txt', type: 'text/plain' }
@@ -260,11 +303,11 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 		"That file type isn't supported"
 	);
 	// The live region counts only the file that really entered the batch as
-	// added; the refused one gets its own count.
-	// div, not p: the admin layout has its own sr-only live region.
-	await expect(page.locator('div.sr-only[aria-live="polite"]')).toHaveText(
-		"1 image(s) added 1 file(s) couldn't be added"
-	);
+	// added; the refused one gets its own count, and the two are joined as the
+	// separate sentences they are.
+	await expect
+		.poll(announced)
+		.toContain("1 image(s) added. 1 file(s) couldn't be added");
 	// The image in that same drop still uploads...
 	await expect(page.locator('input[name="imageUrl_1"]')).toHaveValue('/x2.png', {
 		timeout: 15_000
@@ -274,6 +317,14 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	await page.waitForTimeout(300);
 	expect(uploads).toBe(before + 1);
 
+	// Three tiles make this a group, so the variant label inputs are rendered.
+	// A text drag that lands on one is the case the grid passes through — the
+	// event bubbles up to the grid's handler with the input as its target, and
+	// the grid has to leave it alone or the selection never reaches the field.
+	await expect(page.locator('.tile-label').first()).toBeVisible();
+	expect(await dragOverText(page, '.tile-label')).toBe(true);
+	await expect(page.locator('.tile-grid')).not.toHaveClass(/drag-over/);
+
 	// A drop that misses both zones (here: the form itself) is swallowed
 	// page-wide, so it can't navigate the tab to the file and lose the form.
 	const beforeStray = uploads;
@@ -329,10 +380,76 @@ test('a picked file the accept string refuses gets an error tile, not a POST', a
 	await expect(page.locator('.tile-error .error-text')).toContainText(
 		"That file type isn't supported"
 	);
+	// A refused file gets no object URL, so its tile shows the placeholder rather
+	// than an <img> pointed at nothing — which would paint the broken-image glyph.
+	// The placeholder carries the file name the alt text used to.
+	await expect(page.locator('.tile-preview img')).toHaveCount(0);
+	await expect(page.getByRole('img', { name: 'diagram.svg' })).toBeVisible();
 	await page.waitForTimeout(300);
 	expect(uploads.counters.total).toBe(0);
 });
 
+// Pasting is the third way a file reaches the queue, and it goes through the
+// same accept partition a drop does — a pasted SVG is one /api/upload refuses.
+test('a pasted image uploads; a pasted SVG gets a placeholder error tile and no POST', async ({
+	page
+}) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/p${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/upload');
+	// The paste handler is on <svelte:window>, and it only claims a paste while
+	// focus is outside a text field — so wait for hydration the same way the drop
+	// tests do, and leave focus on <body>.
+	await waitForDropAttachment(page, '.dropzone');
+	await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
+
+	await pasteFile(page, 'shot.png', 'image/png');
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/p1.png', {
+		timeout: 15_000
+	});
+
+	const before = uploads;
+	await pasteFile(page, 'diagram.svg', 'image/svg+xml');
+	await expect(page.locator('.tile-error .error-text')).toContainText(
+		"That file type isn't supported"
+	);
+	// One preview image for the pasted PNG, none for the refused SVG.
+	await expect(page.locator('.tile-preview img')).toHaveCount(1);
+	await expect(page.getByRole('img', { name: 'diagram.svg' })).toBeVisible();
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+});
+
+test('a failed upload announces the batch as finished with errors', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	await page.route('**/api/upload', (route) => route.fulfill({ status: 500, body: 'nope' }));
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	await dropOn(page, '.dropzone', [{ name: 'doomed.png', type: 'image/png' }]);
+
+	await expect(page.locator('.tile-error .error-text')).toContainText('Upload failed (500)', {
+		timeout: 15_000
+	});
+	// The tile shows the reason; the live region says the batch is over and that
+	// something in it went wrong, so it isn't only visible to a sighted user.
+	await expect(page.locator(LIVE_REGION)).toHaveText(
+		'Upload finished with errors. Each file that failed shows the reason.'
+	);
+});
+
 test('the upload zones refuse files while a save is in flight', async ({ page }) => {
 	test.setTimeout(60_000);
 	await adminLogin(page, PASSWORD);
@@ -348,6 +465,17 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 
 	await page.goto('/admin/upload');
 	await waitForDropAttachment(page, '.dropzone');
+	// While nothing is saving, Space on the focused zone opens the picker and
+	// must NOT also scroll the page — the handler cancels the default for exactly
+	// that. Asserted before the save gate below, since the handler bails early
+	// while saving and would pass this vacuously.
+	expect(
+		await page.evaluate(() => document.documentElement.scrollHeight > window.innerHeight)
+	).toBe(true);
+	await page.locator('.dropzone').focus();
+	await page.keyboard.press(' ');
+	expect(await page.evaluate(() => window.scrollY)).toBe(0);
+
 	await dropOn(page, '.dropzone', [{ name: 'saved.png', type: 'image/png' }]);
 	// 15s for the same reason as the drop test above: the duplicate check ahead
 	// of the stubbed upload is a real request to the dev server.
@@ -382,11 +510,16 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 	await page.waitForTimeout(300);
 	expect(uploads).toBe(before);
 	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(1);
+	// The other way into the picker says it's unavailable too — aria-disabled
+	// rather than `disabled`, so a keyboard user holding it keeps focus.
+	await expect(page.locator('.tile-add')).toHaveAttribute('aria-disabled', 'true');
 
 	// Removing the last tile mid-save brings the dropzone back — gated the same
 	// way, and it says so.
 	await page.locator('.tile-remove').click();
 	await expect(page.locator('.dropzone')).toHaveClass(/disabled/);
+	// The class is the look; aria-disabled is what a screen reader reads.
+	await expect(page.locator('.dropzone')).toHaveAttribute('aria-disabled', 'true');
 	// The click path is gated too: a disabled input ignores the programmatic
 	// click the zone sends it, so the picker can't open mid-save.
 	await expect(page.locator('input[type="file"]')).toBeDisabled();

From f24ccfcc89802bebd31d9029324b919c09f6d966 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 02:15:42 -0700
Subject: [PATCH 25/33] fix(admin): announce a mixed upload batch with one
 message per locale (SONA-216)

---
 messages/en.json                     |  1 +
 messages/ja.json                     |  1 +
 src/routes/admin/upload/+page.svelte | 15 +++++++--------
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 1af0f3fa..e7480ce2 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -414,6 +414,7 @@
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
 	"admin_upload_images_rejected": "{count} file(s) couldn't be added",
+	"admin_upload_images_added_and_rejected": "{added} image(s) added. {rejected} file(s) couldn't be added",
 	"admin_upload_batch_done": "Upload finished.",
 	"admin_upload_batch_issues": "Upload finished with errors. Each file that failed shows the reason.",
 	"admin_upload_error_too_large": "This file is over {max}. Try a smaller image.",
diff --git a/messages/ja.json b/messages/ja.json
index dcf4e17a..f9a8b2e2 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -358,6 +358,7 @@
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
 	"admin_upload_images_rejected": "{count}件のファイルを追加できませんでした",
+	"admin_upload_images_added_and_rejected": "{added}枚の画像を追加しました。{rejected}件のファイルを追加できませんでした",
 	"admin_upload_batch_done": "アップロードが完了しました。",
 	"admin_upload_batch_issues": "アップロードは完了しましたが、エラーがありました。失敗したファイルにはそれぞれ理由が表示されています。",
 	"admin_upload_error_too_large": "このファイルは{max}を超えています。もっと小さい画像をお試しください。",
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index cb431072..145747af 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -158,16 +158,15 @@
 
 		// Only files that really entered the batch are announced as added — the
 		// refused ones are counted separately, so the region never claims a
-		// rejected file was added. Two sentences, so join them as sentences;
-		// neither message ends in a period of its own.
+		// rejected file was added. The mixed case is its own message so each
+		// locale can punctuate the two sentences its own way.
 		const refused = fileArray.length - batch.length;
 		setAnnounce(
-			[
-				batch.length > 0 ? m.admin_upload_images_added({ count: batch.length }) : '',
-				refused > 0 ? m.admin_upload_images_rejected({ count: refused }) : ''
-			]
-				.filter(Boolean)
-				.join('. ')
+			batch.length > 0 && refused > 0
+				? m.admin_upload_images_added_and_rejected({ added: batch.length, rejected: refused })
+				: batch.length > 0
+					? m.admin_upload_images_added({ count: batch.length })
+					: m.admin_upload_images_rejected({ count: refused })
 		);
 
 		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN

From dbc178e9d14c7d04b788eaab2e65dd82584ebfd3 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 02:48:57 -0700
Subject: [PATCH 26/33] fix(admin): announce gallery batches in two writes,
 close them out honestly, and keep the refused-tile icon clear of the status
 band (SONA-216)

---
 messages/en.json                     |   1 -
 messages/ja.json                     |   1 -
 src/lib/config.ts                    |   4 +-
 src/lib/drop-files.ts                |   6 +-
 src/routes/admin/upload/+page.svelte | 100 +++++++++++++----
 tests/e2e/drop-files.ts              |   3 +-
 tests/e2e/upload.spec.ts             | 161 +++++++++++++++++++++++++--
 7 files changed, 234 insertions(+), 42 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index e7480ce2..98906e18 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -409,7 +409,6 @@
 	"admin_upload_uploaded": "Uploaded",
 	"admin_upload_replace_hint": "Click or drag to replace",
 	"admin_upload_retry_hint": "Click or drag to try again",
-	"admin_upload_dropzone": "Choose images, or drag them here",
 	"admin_upload_dropzone_multi": "Choose up to {max} images, drag them here, or paste from the clipboard",
 	"admin_upload_images_added": "{count} image(s) added",
 	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
diff --git a/messages/ja.json b/messages/ja.json
index f9a8b2e2..880a49ae 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -353,7 +353,6 @@
 	"admin_upload_uploaded": "アップロード完了",
 	"admin_upload_replace_hint": "クリックまたはドラッグで差し替え",
 	"admin_upload_retry_hint": "クリックまたはドラッグで再試行",
-	"admin_upload_dropzone": "画像を選択するか、ここにドラッグしてください",
 	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグするか、クリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
 	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 84938fc7..3d9246f9 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -43,9 +43,7 @@ export const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/we
 /**
  * `accept` string for the VR avatar form's media picker and drop zone: every
  * image the gallery takes, plus the one video type the showcase renders. Derived
- * from GALLERY_ACCEPT rather than spelled out again — the copy that used to live
- * in the component had drifted (it was missing image/jpg, which the server
- * accepts), and the same pin test in config.test.ts now covers both.
+ * from GALLERY_ACCEPT rather than spelled out again, so the two can't drift.
  */
 export const VR_MEDIA_ACCEPT = `${GALLERY_ACCEPT},video/webm`;
 
diff --git a/src/lib/drop-files.ts b/src/lib/drop-files.ts
index 33387c59..3c708f41 100644
--- a/src/lib/drop-files.ts
+++ b/src/lib/drop-files.ts
@@ -41,9 +41,11 @@ function carriesFiles(e: DragEvent): boolean {
  * DOM-less node environment; `isTextEditable` only reads the three fields below.
  */
 function droppedOnTextField(e: DragEvent): boolean {
-	const t = e.target as { tagName?: unknown; type?: string; isContentEditable?: boolean } | null;
+	const t = e.target as Parameters<typeof isTextEditable>[0] | null;
+	// The cast is a claim, not a check: an EventTarget can be the document or the
+	// window, neither of which has a tagName.
 	if (typeof t?.tagName !== 'string') return false;
-	return isTextEditable(t as { tagName: string; type?: string; isContentEditable?: boolean });
+	return isTextEditable(t);
 }
 
 /**
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 145747af..6ffcd7f5 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { tick } from 'svelte';
 	import { CloudUpload, Check, FileBox, Loader2, Plus, X } from 'lucide-svelte';
 	import NewArtistDialog from '$lib/components/NewArtistDialog.svelte';
 	import { extractImageFiles, isTextEditable, shouldHandleImagePaste } from '$lib/clipboard';
@@ -46,6 +45,12 @@
 	};
 	let tiles = $state<Tile[]>([]);
 	let tileKey = 0;
+	// Two drops can overlap: a second batch starts while the first is still
+	// uploading. Only the last batch in flight writes the terminal announcement,
+	// so neither closes the other out, and it carries any error either of them
+	// hit. Not $state — nothing renders them.
+	let inFlightBatches = 0;
+	let batchHadErrors = false;
 	let parentIndex = $state(0);
 	// 'new' = the set becomes a new piece (one tile is the parent);
 	// 'existing' = every file becomes a variant of an already-uploaded piece.
@@ -123,6 +128,10 @@
 		// over-admit a second drop that lands while this batch is still
 		// uploading, and the announcement below counts tiles that really exist.
 		const batch: { key: number; file: File }[] = [];
+		// Every tile this call creates, in the batch or not: the terminal
+		// announcement reports on all of them, so a file refused before the batch
+		// opened can't be closed out as a clean finish.
+		const created: number[] = [];
 		for (const { file, badType } of fileArray) {
 			// The two ways a file fails before it is ever sent: a type the server
 			// refuses, and a size over the server's cap (which could only come back
@@ -150,6 +159,7 @@
 				nsfw: false
 			};
 			tiles = [...tiles, tile];
+			created.push(tile.key);
 			// A failed tile never enters the batch: no dimension probe (pass 2 would
 			// decode a >64 MB image for a tile that already failed) and no doomed
 			// POST. Its tile keeps 0×0 dims — it can't be saved anyway.
@@ -159,14 +169,18 @@
 		// Only files that really entered the batch are announced as added — the
 		// refused ones are counted separately, so the region never claims a
 		// rejected file was added. The mixed case is its own message so each
-		// locale can punctuate the two sentences its own way.
-		const refused = fileArray.length - batch.length;
+		// locale can punctuate the two sentences its own way. Refused counts the
+		// wrong-type files alone: an oversized one holds a tile that names its own
+		// limit, so counting it here would report the same problem twice. When
+		// nothing entered the batch every file failed one way or the other, so all
+		// of them are counted as refused.
+		const refused = fileArray.filter(({ badType }) => badType).length;
 		setAnnounce(
 			batch.length > 0 && refused > 0
 				? m.admin_upload_images_added_and_rejected({ added: batch.length, rejected: refused })
 				: batch.length > 0
 					? m.admin_upload_images_added({ count: batch.length })
-					: m.admin_upload_images_rejected({ count: refused })
+					: m.admin_upload_images_rejected({ count: fileArray.length })
 		);
 
 		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
@@ -175,25 +189,39 @@
 		// loop, so the guarantee is per-invocation, not global. Each tile still
 		// shows its own status. Mutate the tile via the `tiles` state proxy
 		// (not the pass-1 local) so updates stay reactive.
+		// Nothing to upload: the counts above are the whole announcement, and no
+		// batch opens, so no "finished" ever follows them.
 		if (batch.length === 0) return;
-		// The await is load-bearing: without it the counts above and this status
-		// land in one synchronous run and the counts never reach the DOM at all.
-		await tick();
-		setAnnounce(m.admin_upload_uploading());
-		for (const { key, file } of batch) {
-			const dims = await getImageDimensions(file);
-			const tile = tiles.find((t) => t.key === key);
-			if (!tile) continue; // removed while the batch was still working
-			tile.width = dims.width;
-			tile.height = dims.height;
-			await uploadOne(tile, file);
+		// The counts above are the batch's start announcement. Writing "Uploading"
+		// on top of them here would land in the same frame and be the only thing a
+		// screen reader ever read out, so the batch says two things: what arrived,
+		// and how it ended.
+		inFlightBatches++;
+		try {
+			for (const { key, file } of batch) {
+				const dims = await getImageDimensions(file);
+				const tile = tiles.find((t) => t.key === key);
+				if (!tile) continue; // removed while the batch was still working
+				tile.width = dims.width;
+				tile.height = dims.height;
+				await uploadOne(tile, file);
+			}
+		} finally {
+			// The per-tile outcome is only visible as an icon or a line of text on
+			// the tile, so close the batch out in the live region too (mirroring the
+			// VR media flow). EVERY tile this call created counts, not just the
+			// uploaded ones — a file refused before the batch opened went wrong too,
+			// and calling that "finished" would be a lie. Tiles the batch dropped —
+			// a declined duplicate, a removal mid-upload — are simply gone, so only
+			// survivors can report an error.
+			if (created.some((key) => tiles.find((t) => t.key === key)?.status === 'error'))
+				batchHadErrors = true;
+			inFlightBatches--;
+			if (inFlightBatches === 0) {
+				setAnnounce(batchHadErrors ? m.admin_upload_batch_issues() : m.admin_upload_batch_done());
+				batchHadErrors = false;
+			}
 		}
-		// The per-tile outcome is only visible as an icon or a line of text on the
-		// tile, so close the batch out in the live region too (mirroring the VR
-		// media flow). Tiles the batch dropped — a declined duplicate, a removal
-		// mid-upload — are simply gone, so only survivors can report an error.
-		const failed = batch.some(({ key }) => tiles.find((t) => t.key === key)?.status === 'error');
-		setAnnounce(failed ? m.admin_upload_batch_issues() : m.admin_upload_batch_done());
 	}
 
 	function removeTile(key: number) {
@@ -325,7 +353,7 @@
 							<!-- A refused file has no preview to show; the icon stands in
 							     for it and carries the file name the img alt used to. -->
 							<div class="tile-placeholder" role="img" aria-label={tile.fileName}>
-								<FileBox size={28} />
+								<FileBox size={36} />
 							</div>
 						{/if}
 						<div class="tile-status">
@@ -644,19 +672,43 @@
 		background: var(--secondary);
 	}
 
+	/* A placeholder tile has no picture for the band to sit over, and its error
+	   line runs to four lines in ja — as an overlay the band covered the icon.
+	   Stack the two in normal flow instead, so the band takes the height it needs
+	   and the icon keeps what's left. Scoped by :has() so an <img> tile is
+	   untouched: there the band still floats over the picture. */
+	.tile-preview:has(.tile-placeholder) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* The band is also tinted toward --destructive here so the failure reads
+	   without parsing the text. Only here: the backdrop is the known tile
+	   surface, where white on this mix measures 6.3:1 to 7.4:1 across the six
+	   themes. Over an image preview the backdrop is the artwork, and on a white
+	   one the same mix falls to 4.2:1 — under AA, and worse than the plain black
+	   band's 5.7:1 — so image tiles keep the black band. */
+	.tile-preview:has(.tile-placeholder) .tile-status {
+		position: static;
+		margin-top: auto;
+		background: color-mix(in srgb, var(--destructive) 55%, rgba(0, 0, 0, 0.6));
+	}
+
 	.tile-preview img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
 	}
 
-	/* Stand-in for a refused file, which gets no object URL to preview. */
+	/* Stand-in for a refused file, which gets no object URL to preview. Takes the
+	   height the band above leaves rather than the whole preview box. */
 	.tile-placeholder {
 		display: flex;
+		flex: 1;
+		min-height: 0;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
-		height: 100%;
 		color: var(--muted-foreground);
 	}
 
diff --git a/tests/e2e/drop-files.ts b/tests/e2e/drop-files.ts
index e23cb4ee..7245de05 100644
--- a/tests/e2e/drop-files.ts
+++ b/tests/e2e/drop-files.ts
@@ -56,7 +56,8 @@ export function dragOver(page: Page, selector: string) {
 
 /**
  * Dispatch a bubbling `dragover` carrying only text on `selector`, and report
- * whether a handler cancelled it.
+ * whether it came back UNcancelled — `true` means no handler called
+ * preventDefault (the inverse of what `dropOn` returns).
  *
  * `selector` is the element the drag LANDS on, which is what decides the
  * outcome: a zone that wraps text fields (the upload page's tile grid) has to
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index b1740e70..50f73bad 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -223,10 +223,12 @@ function pasteFile(page: Page, name: string, type: string) {
 // The page's own live region (the admin layout has a separate one, a <p>).
 const LIVE_REGION = 'div.sr-only[aria-live="polite"]';
 
-// Record every text the live region is handed. A batch writes it three times in
-// quick succession — the added/refused counts, "Uploading...", then the outcome
-// — and only the last survives long enough for a polling locator assertion to
-// see it, so a MutationObserver is the only way to assert the earlier ones.
+// Record every text the live region is handed. A batch writes it twice — the
+// added/refused counts when the files land, then the outcome when the last one
+// is done — and only the second survives long enough for a polling locator
+// assertion to see it, so a MutationObserver is the only way to assert the
+// first. Two writes, not three: an "Uploading..." write between them landed in
+// the same frame as the counts and was the only one a screen reader read out.
 async function recordAnnouncements(page: Page) {
 	await page.evaluate((selector) => {
 		const region = document.querySelector(selector)!;
@@ -302,16 +304,22 @@ test('dropping images adds tiles, and a wrong type is rejected without a request
 	await expect(page.locator('.tile-error .error-text')).toContainText(
 		"That file type isn't supported"
 	);
-	// The live region counts only the file that really entered the batch as
-	// added; the refused one gets its own count, and the two are joined as the
-	// separate sentences they are.
-	await expect
-		.poll(announced)
-		.toContain("1 image(s) added. 1 file(s) couldn't be added");
 	// The image in that same drop still uploads...
 	await expect(page.locator('input[name="imageUrl_1"]')).toHaveValue('/x2.png', {
 		timeout: 15_000
 	});
+	// The live region says exactly two things about this drop, in this order: the
+	// counts (only the file that really entered the batch is "added"; the refused
+	// one gets its own count, joined as the separate sentences they are), then how
+	// the batch ended. The end is "with errors" because the refused file is part
+	// of the drop — a batch that carried one can't report a clean finish.
+	await expect.poll(announced).toEqual([
+		"1 image(s) added. 1 file(s) couldn't be added",
+		'Upload finished with errors. Each file that failed shows the reason.'
+	]);
+	await expect(page.locator(LIVE_REGION)).toHaveText(
+		'Upload finished with errors. Each file that failed shows the reason.'
+	);
 	// ...and exactly one POST fired — none for the refused file. Past the moment a
 	// POST that DID fire would have landed (mutation-checked).
 	await page.waitForTimeout(300);
@@ -385,10 +393,54 @@ test('a picked file the accept string refuses gets an error tile, not a POST', a
 	// The placeholder carries the file name the alt text used to.
 	await expect(page.locator('.tile-preview img')).toHaveCount(0);
 	await expect(page.getByRole('img', { name: 'diagram.svg' })).toBeVisible();
+	// Nothing entered the batch, so the counts are the whole announcement: no
+	// batch opened, and "Upload finished." after a file that never uploaded would
+	// be a lie. Read again after a wait, since a later write would replace it.
+	await expect(page.locator(LIVE_REGION)).toHaveText("1 file(s) couldn't be added");
 	await page.waitForTimeout(300);
+	await expect(page.locator(LIVE_REGION)).toHaveText("1 file(s) couldn't be added");
 	expect(uploads.counters.total).toBe(0);
 });
 
+// The ja bad-type string runs to four lines at tile width. The status band used
+// to be an overlay pinned to the bottom of the preview, so at that height it
+// covered the placeholder icon; on a placeholder tile the band is in normal flow
+// and the icon keeps the space above it. Both widths, since the tile is narrower
+// on a phone and the string wraps further.
+for (const width of [1280, 390]) {
+	test(`the refused-file icon clears the status band at ${width}px in Japanese`, async ({
+		page
+	}) => {
+		await adminLogin(page, PASSWORD);
+		// The paraglide locale cookie (src/lib/paraglide/runtime.js cookieName)
+		// switches the SSR locale, the same way the VR guide spec does.
+		await page
+			.context()
+			.addCookies([{ name: 'PARAGLIDE_LOCALE', value: 'ja', domain: 'localhost', path: '/' }]);
+		await page.setViewportSize({ width, height: 900 });
+		await page.goto('/admin/upload');
+		await stageFiles(
+			page,
+			{ name: 'diagram.svg', mimeType: 'image/svg+xml', buffer: Buffer.from('<svg/>') },
+			1
+		);
+		await expect(page.locator('.tile-error .error-text')).toContainText(
+			'対応していないファイル形式です'
+		);
+
+		const icon = (await page.locator('.tile-placeholder svg').boundingBox())!;
+		const band = (await page.locator('.tile-status').boundingBox())!;
+		const preview = (await page.locator('.tile-preview').boundingBox())!;
+		// The icon sits entirely above the band and inside the preview box, so no
+		// part of it is covered or clipped away.
+		expect(icon.y + icon.height).toBeLessThanOrEqual(band.y + 0.5);
+		expect(icon.y).toBeGreaterThanOrEqual(preview.y - 0.5);
+		// The band fits too — one that overflowed would lose its last line to the
+		// preview's `overflow: hidden`.
+		expect(band.y + band.height).toBeLessThanOrEqual(preview.y + preview.height + 0.5);
+	});
+}
+
 // Pasting is the third way a file reaches the queue, and it goes through the
 // same accept partition a drop does — a pasted SVG is one /api/upload refuses.
 test('a pasted image uploads; a pasted SVG gets a placeholder error tile and no POST', async ({
@@ -450,6 +502,95 @@ test('a failed upload announces the batch as finished with errors', async ({ pag
 	);
 });
 
+test('an overlapping batch does not close out the one still uploading', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	// The first POST is held open until the test releases it; the second fails.
+	// So the second batch finishes FIRST, while the first is still in flight.
+	let arrived = () => {};
+	const firstArrived = new Promise<void>((resolve) => (arrived = resolve));
+	let release = () => {};
+	const held = new Promise<void>((resolve) => (release = resolve));
+	let posts = 0;
+	await page.route('**/api/upload', async (route) => {
+		posts++;
+		if (posts === 1) {
+			arrived();
+			await held;
+			await route.fulfill({
+				contentType: 'application/json',
+				body: JSON.stringify({ url: '/held.png' })
+			});
+			return;
+		}
+		await route.fulfill({ status: 500, body: 'nope' });
+	});
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	const announced = await recordAnnouncements(page);
+
+	await dropOn(page, '.dropzone', [{ name: 'held.png', type: 'image/png' }]);
+	await firstArrived;
+	// Its tile turned the dropzone into the grid, which is where the second drop
+	// lands — mid-flight, so the two batches overlap.
+	await waitForDropAttachment(page, '.tile-grid');
+	await dropOn(page, '.tile-grid', [{ name: 'doomed.png', type: 'image/png' }]);
+	await expect(page.locator('.tile-error .error-text')).toContainText('Upload failed (500)', {
+		timeout: 15_000
+	});
+	// The second batch is over, but the first is still uploading — announcing
+	// anything now would tell the operator a batch finished that hasn't.
+	expect(await announced()).not.toContain('Upload finished.');
+
+	release();
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/held.png', {
+		timeout: 15_000
+	});
+	// The last batch in flight speaks for both, and carries the failure the other
+	// one hit — not the clean finish its own file had.
+	await expect(page.locator(LIVE_REGION)).toHaveText(
+		'Upload finished with errors. Each file that failed shows the reason.'
+	);
+	await page.waitForTimeout(300);
+	expect(await announced()).not.toContain('Upload finished.');
+});
+
+test('the same batch outcome twice is announced twice', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: `/x${uploads}.png` })
+		});
+	});
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	const region = page.locator(LIVE_REGION);
+
+	await dropOn(page, '.dropzone', [{ name: 'first.png', type: 'image/png' }]);
+	await expect(region).toHaveText('Upload finished.', { timeout: 15_000 });
+
+	// Re-assigning the text the region already holds touches no DOM and is not
+	// announced; the keyed inner node must be replaced (same shape as the VR
+	// form's "same media status twice" test). The first tile swapped the dropzone
+	// for the grid, which is where the second file goes.
+	await region.locator('span').evaluate((el) => el.setAttribute('data-first', ''));
+	await waitForDropAttachment(page, '.tile-grid');
+	await dropOn(page, '.tile-grid', [{ name: 'second.png', type: 'image/png' }]);
+	await expect(page.locator('input[name="imageUrl_1"]')).toHaveValue(/^\/x\d+\.png$/, {
+		timeout: 15_000
+	});
+	await expect(region.locator('span[data-first]')).toHaveCount(0);
+	await expect(region).toHaveText('Upload finished.');
+});
+
 test('the upload zones refuse files while a save is in flight', async ({ page }) => {
 	test.setTimeout(60_000);
 	await adminLogin(page, PASSWORD);

From ffaa3a1ea582166cf62edbc255d1408bf9f239eb Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 03:12:31 -0700
Subject: [PATCH 27/33] fix(admin): count every refused tile in the gallery
 announcement, gate paste on a save in flight, and pin the sticker accept list
 (SONA-216)

---
 src/lib/components/StickerPackForm.svelte |  15 +--
 src/lib/components/VrAvatarForm.svelte    |   9 +-
 src/lib/config.test.ts                    |  10 +-
 src/lib/config.ts                         |   8 ++
 src/lib/server/storage/index.ts           |   2 +-
 src/routes/admin/upload/+page.svelte      |  66 ++++++-----
 tests/e2e/upload.spec.ts                  | 133 ++++++++++++++++++++--
 7 files changed, 186 insertions(+), 57 deletions(-)

diff --git a/src/lib/components/StickerPackForm.svelte b/src/lib/components/StickerPackForm.svelte
index 5553fcf1..4f7f8d4c 100644
--- a/src/lib/components/StickerPackForm.svelte
+++ b/src/lib/components/StickerPackForm.svelte
@@ -5,7 +5,7 @@
 	import { toast } from '$lib/toast.svelte';
 	import { DragReorder } from '$lib/drag-reorder.svelte';
 	import { dropFiles, partitionByAccept, swallowStrayFileDrop } from '$lib/drop-files';
-	import { MAX_BUFFER_BYTES } from '$lib/config';
+	import { MAX_BUFFER_BYTES, STICKER_ACCEPT } from '$lib/config';
 	// The shared size formatter; it lives in $lib/vr only because that page needed
 	// it first, and it carries no VR-specific behaviour.
 	import { formatBytes } from '$lib/vr';
@@ -108,15 +108,6 @@
 		}))
 	);
 
-	// Shared by the file input and the drop attachment, so a drop accepts exactly
-	// what the picker offers. MIME types only: /api/upload validates the declared
-	// type and reads an empty one as application/octet-stream, so accepting a
-	// bare .png here would upload the whole file just to collect a 415.
-	const STICKER_ACCEPT = 'image/png,image/webp';
-
-	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
-	const MAX_STICKER_BYTES = MAX_BUFFER_BYTES;
-
 	let uploading = $state(false);
 	// Upload start/done announcements for the stickers section's live region:
 	// the zone label and the new rows show both, but only visually.
@@ -197,7 +188,7 @@
 				// Client-side cap, ahead of the POST: /api/upload would answer 413
 				// only after the whole body went up the wire, so an oversized file
 				// costs the operator the upload before it can be named.
-				if (file.size > MAX_STICKER_BYTES) {
+				if (file.size > MAX_BUFFER_BYTES) {
 					stickerErrors = [
 						...stickerErrors,
 						{ uid: stickerErrorUid++, name: file.name, reason: 'too-large' }
@@ -441,7 +432,7 @@
 					<p class="banner-line">
 						<strong>{err.name}</strong> —
 						{#if err.reason === 'too-large'}
-							{m.admin_pack_error_too_large({ max: formatBytes(MAX_STICKER_BYTES) })}
+							{m.admin_pack_error_too_large({ max: formatBytes(MAX_BUFFER_BYTES) })}
 						{:else if err.reason === 'bad-type'}
 							{m.admin_pack_error_bad_type()}
 						{:else}
diff --git a/src/lib/components/VrAvatarForm.svelte b/src/lib/components/VrAvatarForm.svelte
index 53521e9a..ecc73132 100644
--- a/src/lib/components/VrAvatarForm.svelte
+++ b/src/lib/components/VrAvatarForm.svelte
@@ -220,9 +220,6 @@
 		mediaEntries = mediaEntries.filter((_, idx) => idx !== i);
 	}
 
-	// /api/upload's buffered cap — the shared constant, not a hardcoded twin.
-	const MAX_MEDIA_BYTES = MAX_BUFFER_BYTES;
-
 	function onMediaPicked(e: Event) {
 		const input = e.currentTarget as HTMLInputElement;
 		const files = [...(input.files ?? [])];
@@ -252,7 +249,7 @@
 		setMediaStatus(m.admin_upload_uploading());
 		try {
 			for (const file of files) {
-				if (file.size > MAX_MEDIA_BYTES) {
+				if (file.size > MAX_BUFFER_BYTES) {
 					mediaErrors = [...mediaErrors, { uid: mediaErrorUid++, name: file.name, reason: 'too-large' }];
 					continue;
 				}
@@ -848,7 +845,7 @@
 			})}
 		>
 			<ImagePlus size={20} />
-			<span>{mediaUploading ? m.admin_upload_uploading() : m.admin_vr_media_dropzone({ max: formatBytes(MAX_MEDIA_BYTES) })}</span>
+			<span>{mediaUploading ? m.admin_upload_uploading() : m.admin_vr_media_dropzone({ max: formatBytes(MAX_BUFFER_BYTES) })}</span>
 			<input
 				type="file"
 				accept={VR_MEDIA_ACCEPT}
@@ -866,7 +863,7 @@
 					<p class="banner-line">
 						<strong>{err.name}</strong> —
 						{#if err.reason === 'too-large'}
-							{m.admin_vr_media_error_too_large({ max: formatBytes(MAX_MEDIA_BYTES) })}
+							{m.admin_vr_media_error_too_large({ max: formatBytes(MAX_BUFFER_BYTES) })}
 						{:else if err.reason === 'bad-type'}
 							{m.admin_vr_media_error_bad_type()}
 						{:else}
diff --git a/src/lib/config.test.ts b/src/lib/config.test.ts
index be675af4..ce4c663a 100644
--- a/src/lib/config.test.ts
+++ b/src/lib/config.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { GALLERY_ACCEPT, VR_MEDIA_ACCEPT } from './config';
+import { GALLERY_ACCEPT, STICKER_ACCEPT, VR_MEDIA_ACCEPT } from './config';
 import { ALLOWED_IMAGE_TYPES, isAllowedImageType } from './server/storage';
 
 // A type only the accept string has uploads a file /api/upload refuses with a
@@ -27,6 +27,14 @@ describe('VR_MEDIA_ACCEPT', () => {
 	});
 });
 
+// Stickers deliberately offer fewer formats than the gallery, but never one the
+// server refuses — that would upload a file just to collect a 415.
+describe('STICKER_ACCEPT', () => {
+	it('offers only types the server stores', () => {
+		for (const t of STICKER_ACCEPT.split(',')) expect(isAllowedImageType(t)).toBe(true);
+	});
+});
+
 describe('SESSION_COOKIE', () => {
 	it('uses the __Host- prefix in production', async () => {
 		// The vitest stub for `$app/environment` sets dev=false (prod). The
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 3d9246f9..f349b1fc 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -47,6 +47,14 @@ export const GALLERY_ACCEPT = 'image/jpeg,image/jpg,image/png,image/gif,image/we
  */
 export const VR_MEDIA_ACCEPT = `${GALLERY_ACCEPT},video/webm`;
 
+/**
+ * `accept` string for the sticker pack form's picker and drop zone. Narrower
+ * than GALLERY_ACCEPT on purpose — a sticker is stored as one of these two
+ * formats — but still a subset of what the server stores, pinned by a test in
+ * config.test.ts. MIME types only, for the same reason GALLERY_ACCEPT is.
+ */
+export const STICKER_ACCEPT = 'image/png,image/webp';
+
 /**
  * Admin session cookie name. Read in `hooks.server.ts` / `auth.ts` before any
  * DB access, so it must be a build-time constant rather than a setting.
diff --git a/src/lib/server/storage/index.ts b/src/lib/server/storage/index.ts
index fcad44a6..0560068b 100644
--- a/src/lib/server/storage/index.ts
+++ b/src/lib/server/storage/index.ts
@@ -62,7 +62,7 @@ export function extFromContentType(contentType: string): string {
 // content-type, bypassing the worker's security headers), so an SVG with a <script>
 // or a text/html payload would execute in that origin. Keep this strict.
 // Exported for the test that pins $lib/config's GALLERY_ACCEPT to this set.
-export const ALLOWED_IMAGE_TYPES = new Set([
+export const ALLOWED_IMAGE_TYPES: ReadonlySet<string> = new Set([
 	'image/jpeg',
 	'image/jpg',
 	'image/png',
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 6ffcd7f5..de5c7e16 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -166,21 +166,17 @@
 			if (!error) batch.push({ key: tile.key, file });
 		}
 
-		// Only files that really entered the batch are announced as added — the
-		// refused ones are counted separately, so the region never claims a
-		// rejected file was added. The mixed case is its own message so each
-		// locale can punctuate the two sentences its own way. Refused counts the
-		// wrong-type files alone: an oversized one holds a tile that names its own
-		// limit, so counting it here would report the same problem twice. When
-		// nothing entered the batch every file failed one way or the other, so all
-		// of them are counted as refused.
-		const refused = fileArray.filter(({ badType }) => badType).length;
+		// Every file that did not enter the batch is counted, wrong-type or
+		// oversized alike, so the opening announcement covers every tile this call
+		// created; the mixed case is its own message so each locale can punctuate
+		// the two sentences its own way.
+		const notUploaded = fileArray.length - batch.length;
 		setAnnounce(
-			batch.length > 0 && refused > 0
-				? m.admin_upload_images_added_and_rejected({ added: batch.length, rejected: refused })
+			batch.length > 0 && notUploaded > 0
+				? m.admin_upload_images_added_and_rejected({ added: batch.length, rejected: notUploaded })
 				: batch.length > 0
 					? m.admin_upload_images_added({ count: batch.length })
-					: m.admin_upload_images_rejected({ count: fileArray.length })
+					: m.admin_upload_images_rejected({ count: notUploaded })
 		);
 
 		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
@@ -189,13 +185,18 @@
 		// loop, so the guarantee is per-invocation, not global. Each tile still
 		// shows its own status. Mutate the tile via the `tiles` state proxy
 		// (not the pass-1 local) so updates stay reactive.
-		// Nothing to upload: the counts above are the whole announcement, and no
-		// batch opens, so no "finished" ever follows them.
-		if (batch.length === 0) return;
-		// The counts above are the batch's start announcement. Writing "Uploading"
-		// on top of them here would land in the same frame and be the only thing a
-		// screen reader ever read out, so the batch says two things: what arrived,
-		// and how it ended.
+		// Tiles the batch dropped — a declined duplicate, a removal mid-upload —
+		// are simply gone, so only survivors can report an error.
+		const createdAnError = () =>
+			created.some((key) => tiles.find((t) => t.key === key)?.status === 'error');
+
+		if (batch.length === 0) {
+			// Nothing to upload, so no batch opens and no "finished" follows the
+			// counts above — but a batch already in flight must not close out clean
+			// when this call just put an error tile on the screen.
+			if (inFlightBatches > 0 && createdAnError()) batchHadErrors = true;
+			return;
+		}
 		inFlightBatches++;
 		try {
 			for (const { key, file } of batch) {
@@ -211,11 +212,8 @@
 			// the tile, so close the batch out in the live region too (mirroring the
 			// VR media flow). EVERY tile this call created counts, not just the
 			// uploaded ones — a file refused before the batch opened went wrong too,
-			// and calling that "finished" would be a lie. Tiles the batch dropped —
-			// a declined duplicate, a removal mid-upload — are simply gone, so only
-			// survivors can report an error.
-			if (created.some((key) => tiles.find((t) => t.key === key)?.status === 'error'))
-				batchHadErrors = true;
+			// and calling that "finished" would be a lie.
+			if (createdAnError()) batchHadErrors = true;
 			inFlightBatches--;
 			if (inFlightBatches === 0) {
 				setAnnounce(batchHadErrors ? m.admin_upload_batch_issues() : m.admin_upload_batch_done());
@@ -252,6 +250,9 @@
 		// The New Artist dialog owns the clipboard while open (its name field
 		// autofocuses); don't create tiles behind the modal.
 		if (showNewArtist) return;
+		// A save in flight is already sending these tiles; the drop zone and the
+		// picker are disabled for the same reason, so paste can't be the one way in.
+		if (saving) return;
 		const dt = e.clipboardData;
 		if (!dt) return;
 		const files = extractImageFiles(dt.items);
@@ -362,8 +363,8 @@
 							{:else if tile.status === 'done'}
 								<Check size={16} />
 							{:else}
-								<!-- .error-text carries no styling of its own — the status band
-								     already supplies the color; the class is a test hook. -->
+								<!-- .error-text only tunes its wrapping — the status band already
+								     supplies the color; the class doubles as a test hook. -->
 								<span class="error-text">{tile.error}</span>
 							{/if}
 						</div>
@@ -664,6 +665,13 @@
 		border-color: var(--destructive);
 	}
 
+	/* The two error bands are tinted differently (a placeholder tile mixes in
+	   --destructive, an image tile keeps the black band for contrast over
+	   artwork), so give both the same destructive edge to read as one treatment. */
+	.tile-error .tile-status {
+		border-top: 2px solid var(--destructive);
+	}
+
 	.tile-preview {
 		position: relative;
 		aspect-ratio: 1;
@@ -727,6 +735,12 @@
 		font-size: 11px;
 	}
 
+	/* Error text wraps to several lines in a narrow tile; even it out rather than
+	   leaving a one-word last line. */
+	.error-text {
+		text-wrap: pretty;
+	}
+
 	.tile-remove {
 		position: absolute;
 		top: 6px;
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 50f73bad..87ae63d6 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, type Page, type Request, type Route } from '@playwright/test';
+import { test, expect, type Page, type Request, type Route, type TestInfo } from '@playwright/test';
 import { promises as fs } from 'node:fs';
 import { adminLogin } from './admin-login';
 import {
@@ -48,10 +48,10 @@ async function stageFiles(
 	page: Page,
 	files: Parameters<Page['setInputFiles']>[1],
 	expectedTileCount: number,
-	onAttempt: () => void = () => {}
+	onAttempt: () => void | Promise<void> = () => {}
 ): Promise<void> {
 	await expect(async () => {
-		onAttempt();
+		await onAttempt();
 		await page.setInputFiles('input[type="file"]', files);
 		await page.evaluate(() => {
 			document
@@ -166,6 +166,17 @@ test('a multi-file batch uploads sequentially within the batch — one in-flight
 	expect(uploads.counters.peak).toBe(1);
 });
 
+// A file one byte over the 64 MiB cap. Payload buffers are capped at 50 MB by
+// Playwright, so oversized files go via a path; ftruncate keeps them sparse (no
+// 64 MiB actually written).
+async function makeHugeFile(testInfo: TestInfo, name: string): Promise<string> {
+	const path = testInfo.outputPath(name);
+	const handle = await fs.open(path, 'w');
+	await handle.truncate(64 * 1024 * 1024 + 1);
+	await handle.close();
+	return path;
+}
+
 test('an oversized file fails client-side without a POST; the rest of the batch still uploads', async ({
 	page
 }, testInfo) => {
@@ -174,22 +185,22 @@ test('an oversized file fails client-side without a POST; the rest of the batch
 
 	const uploads = countUploadPosts(page);
 
-	// One real small PNG plus a sparse file just over the 64 MiB cap. Payload
-	// buffers are capped at 50 MB by Playwright, so both go via file paths;
-	// ftruncate keeps the big one sparse (no 64 MiB actually written).
+	// One real small PNG plus a file just over the 64 MiB cap; both go via file
+	// paths, since Playwright caps payload buffers at 50 MB.
 	const smallPath = testInfo.outputPath('e2e-small.png');
 	await fs.writeFile(smallPath, PNG);
-	const hugePath = testInfo.outputPath('e2e-huge.png');
-	const handle = await fs.open(hugePath, 'w');
-	await handle.truncate(64 * 1024 * 1024 + 1);
-	await handle.close();
+	const hugePath = await makeHugeFile(testInfo, 'e2e-huge.png');
 
 	await page.goto('/admin/upload');
+	const announced = await recordAnnouncements(page);
 	// Oversized file FIRST: uploads run in staged order, so if a doomed POST
 	// were ever fired for it, it would land BEFORE the small file's POST — and
 	// the count assertion below (which waits on the small upload finishing)
 	// would catch it. Staged last, its POST could fire after the assertion.
-	await stageFiles(page, [hugePath, smallPath], 2, uploads.reset);
+	await stageFiles(page, [hugePath, smallPath], 2, async () => {
+		uploads.reset();
+		await clearAnnouncements(page);
+	});
 
 	// The oversized tile (tile 0) shows the image-scoped too-large message...
 	await expect(page.locator('.tile-error .error-text')).toContainText('over 64.0 MB');
@@ -202,6 +213,39 @@ test('an oversized file fails client-side without a POST; the rest of the batch
 	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('');
 	// Exactly one POST fired — none for the doomed oversized file.
 	expect(uploads.counters.total).toBe(1);
+	// The counts cover every tile the pick created, oversized as well as
+	// wrong-type: one image entered the batch, one file didn't. And the batch is
+	// closed out as having errors, since the oversized tile is one of its own.
+	await expect.poll(announced).toEqual([
+		"1 image(s) added. 1 file(s) couldn't be added",
+		'Upload finished with errors. Each file that failed shows the reason.'
+	]);
+});
+
+test('a pick of nothing but oversized files is counted, and never says it finished', async ({
+	page
+}, testInfo) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	const uploads = countUploadPosts(page);
+	const firstPath = await makeHugeFile(testInfo, 'e2e-huge-1.png');
+	const secondPath = await makeHugeFile(testInfo, 'e2e-huge-2.png');
+
+	await page.goto('/admin/upload');
+	const announced = await recordAnnouncements(page);
+	await stageFiles(page, [firstPath, secondPath], 2, async () => {
+		uploads.reset();
+		await clearAnnouncements(page);
+	});
+
+	await expect(page.locator('.tile-error')).toHaveCount(2);
+	// No file entered the batch, so the counts are the whole announcement: both
+	// tiles are reported, and no batch opened that could later claim to be done.
+	await expect(page.locator(LIVE_REGION)).toHaveText("2 file(s) couldn't be added");
+	await page.waitForTimeout(300);
+	expect(await announced()).toEqual(["2 file(s) couldn't be added"]);
+	expect(uploads.counters.total).toBe(0);
 });
 
 // Paste one file into the page. The clipboard can't be primed with a file from
@@ -242,6 +286,15 @@ async function recordAnnouncements(page: Page) {
 	return () => page.evaluate(() => (window as unknown as { __announced: string[] }).__announced);
 }
 
+// Drop what the observer has seen so far. A stageFiles retry re-stages the files
+// and writes the counts again, so a test that asserts the exact log has to clear
+// it at the top of every attempt the same way the request counters are reset.
+function clearAnnouncements(page: Page) {
+	return page.evaluate(() => {
+		(window as unknown as { __announced?: string[] }).__announced?.splice(0);
+	});
+}
+
 test('dropping images adds tiles, and a wrong type is rejected without a request', async ({
 	page
 }) => {
@@ -428,9 +481,18 @@ for (const width of [1280, 390]) {
 			'対応していないファイル形式です'
 		);
 
+		// Measure only once the ja face is in: with a fallback font the string
+		// wraps to fewer lines, and a short band clears the icon no matter how the
+		// two are stacked.
+		await page.evaluate(() => document.fonts.ready);
+
 		const icon = (await page.locator('.tile-placeholder svg').boundingBox())!;
 		const band = (await page.locator('.tile-status').boundingBox())!;
 		const preview = (await page.locator('.tile-preview').boundingBox())!;
+		// The band really is the tall multi-line one this test exists for: taller
+		// than the space left over if it split the preview evenly with the icon.
+		// A one-line band would pass every assertion below without proving a thing.
+		expect(band.height).toBeGreaterThan(preview.height / 2 - icon.height / 2);
 		// The icon sits entirely above the band and inside the preview box, so no
 		// part of it is covered or clipped away.
 		expect(icon.y + icon.height).toBeLessThanOrEqual(band.y + 0.5);
@@ -557,6 +619,49 @@ test('an overlapping batch does not close out the one still uploading', async ({
 	expect(await announced()).not.toContain('Upload finished.');
 });
 
+test('a refused drop mid-batch still costs the running batch its clean finish', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+
+	// The one POST is held open until the test releases it, so the batch it
+	// belongs to is still in flight when the second drop lands.
+	let arrived = () => {};
+	const firstArrived = new Promise<void>((resolve) => (arrived = resolve));
+	let release = () => {};
+	const held = new Promise<void>((resolve) => (release = resolve));
+	await page.route('**/api/upload', async (route) => {
+		arrived();
+		await held;
+		await route.fulfill({
+			contentType: 'application/json',
+			body: JSON.stringify({ url: '/held.png' })
+		});
+	});
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+
+	await dropOn(page, '.dropzone', [{ name: 'held.png', type: 'image/png' }]);
+	await firstArrived;
+	// An SVG on its own opens no batch of its own — it only puts an error tile on
+	// the screen — so the held batch is the only one left to report it.
+	await waitForDropAttachment(page, '.tile-grid');
+	await dropOn(page, '.tile-grid', [{ name: 'vector.svg', type: 'image/svg+xml' }]);
+	await expect(page.locator('.tile-error .error-text')).toContainText(
+		"That file type isn't supported"
+	);
+
+	release();
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('/held.png', {
+		timeout: 15_000
+	});
+	// Its own file uploaded fine, but a refused tile arrived while it ran, so
+	// calling the screen clean would send the operator looking for nothing.
+	await expect(page.locator(LIVE_REGION)).toHaveText(
+		'Upload finished with errors. Each file that failed shows the reason.'
+	);
+});
+
 test('the same batch outcome twice is announced twice', async ({ page }) => {
 	test.setTimeout(60_000);
 	await adminLogin(page, PASSWORD);
@@ -651,6 +756,12 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 	await page.waitForTimeout(300);
 	expect(uploads).toBe(before);
 	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(1);
+	// The third way in is gated too: paste has no zone to disable, so the handler
+	// has to bail on its own or it becomes the one route around the save gate.
+	await pasteFile(page, 'pasted.png', 'image/png');
+	await page.waitForTimeout(300);
+	expect(uploads).toBe(before);
+	await expect(page.locator('input[name^="imageUrl_"]')).toHaveCount(1);
 	// The other way into the picker says it's unavailable too — aria-disabled
 	// rather than `disabled`, so a keyboard user holding it keeps focus.
 	await expect(page.locator('.tile-add')).toHaveAttribute('aria-disabled', 'true');

From 9a51a1f30f6344fee9e883f0f10ff57bfd4d0dd5 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 03:22:31 -0700
Subject: [PATCH 28/33] fix(admin): check the gallery upload response url, word
 the over-limit toast for any file, and pin a lone refusal's clean follow-up
 (SONA-216)

---
 messages/en.json                     |  2 +-
 messages/ja.json                     |  2 +-
 src/routes/admin/upload/+page.svelte | 20 ++++++++-----
 tests/e2e/upload.spec.ts             | 45 +++++++++++++++++++++++++++-
 4 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index 98906e18..ada25340 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -411,7 +411,7 @@
 	"admin_upload_retry_hint": "Click or drag to try again",
 	"admin_upload_dropzone_multi": "Choose up to {max} images, drag them here, or paste from the clipboard",
 	"admin_upload_images_added": "{count} image(s) added",
-	"admin_upload_over_limit": "{count} image(s) skipped — max {max}",
+	"admin_upload_over_limit": "{count} file(s) skipped — max {max}",
 	"admin_upload_images_rejected": "{count} file(s) couldn't be added",
 	"admin_upload_images_added_and_rejected": "{added} image(s) added. {rejected} file(s) couldn't be added",
 	"admin_upload_batch_done": "Upload finished.",
diff --git a/messages/ja.json b/messages/ja.json
index 880a49ae..10387316 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -355,7 +355,7 @@
 	"admin_upload_retry_hint": "クリックまたはドラッグで再試行",
 	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグするか、クリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
-	"admin_upload_over_limit": "{count}枚をスキップしました（最大{max}枚）",
+	"admin_upload_over_limit": "{count}件をスキップしました（最大{max}枚）",
 	"admin_upload_images_rejected": "{count}件のファイルを追加できませんでした",
 	"admin_upload_images_added_and_rejected": "{added}枚の画像を追加しました。{rejected}件のファイルを追加できませんでした",
 	"admin_upload_batch_done": "アップロードが完了しました。",
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index de5c7e16..0632dd04 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -97,8 +97,12 @@
 			fd.append('file', file);
 			const uploadRes = await fetch('/api/upload', { method: 'POST', body: fd });
 			if (!uploadRes.ok) throw new Error(m.admin_upload_failed_status({ status: uploadRes.status }));
-			const result = await uploadRes.json();
-			tile.url = result.url;
+			// The cast validates nothing: a 2xx whose body carries no usable url
+			// is a failure too (same check as the other two forms), not a tile
+			// pointing at nothing.
+			const { url } = (await uploadRes.json()) as { url?: unknown };
+			if (typeof url !== 'string' || !url) throw new Error(m.admin_upload_failed());
+			tile.url = url;
 			tile.status = 'done';
 		} catch (e) {
 			tile.error = e instanceof Error ? e.message : m.admin_upload_failed();
@@ -179,12 +183,6 @@
 					: m.admin_upload_images_rejected({ count: notUploaded })
 		);
 
-		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
-		// this batch (matching VrAvatarForm's media flow) so a full batch can't
-		// fire eight concurrent POSTs; a second drop mid-batch starts its own
-		// loop, so the guarantee is per-invocation, not global. Each tile still
-		// shows its own status. Mutate the tile via the `tiles` state proxy
-		// (not the pass-1 local) so updates stay reactive.
 		// Tiles the batch dropped — a declined duplicate, a removal mid-upload —
 		// are simply gone, so only survivors can report an error.
 		const createdAnError = () =>
@@ -197,6 +195,12 @@
 			if (inFlightBatches > 0 && createdAnError()) batchHadErrors = true;
 			return;
 		}
+		// Pass 2: probe dimensions and upload. Uploads run one at a time WITHIN
+		// this batch (matching VrAvatarForm's media flow) so a full batch can't
+		// fire eight concurrent POSTs; a second drop mid-batch starts its own
+		// loop, so the guarantee is per-invocation, not global. Each tile still
+		// shows its own status. Mutate the tile via the `tiles` state proxy
+		// (not the pass-1 local) so updates stay reactive.
 		inFlightBatches++;
 		try {
 			for (const { key, file } of batch) {
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index 87ae63d6..b8623e33 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -416,7 +416,7 @@ test('refused files still take slots: nine wrong-type files fill the eight-tile
 		Array.from({ length: 9 }, (_, i) => ({ name: `notes-${i}.txt`, type: 'text/plain' }))
 	);
 	await expect(page.locator('.tile-error')).toHaveCount(8);
-	await expect(page.locator('.alert-message')).toHaveText('1 image(s) skipped — max 8');
+	await expect(page.locator('.alert-message')).toHaveText('1 file(s) skipped — max 8');
 	// None of them was ever sent.
 	await page.waitForTimeout(300);
 	expect(uploads.counters.total).toBe(0);
@@ -801,3 +801,46 @@ test('the upload zones refuse files while a save is in flight', async ({ page })
 		timeout: 15_000
 	});
 });
+
+test('a lone refused drop does not poison the next clean batch', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+	let uploads = 0;
+	await page.route('**/api/upload', async (route) => {
+		uploads++;
+		await route.fulfill({ contentType: 'application/json', body: JSON.stringify({ url: `/x${uploads}.png` }) });
+	});
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+
+	// Nothing in flight: the refusal is announced and no batch opens.
+	await dropOn(page, '.dropzone', [{ name: 'vector.svg', type: 'image/svg+xml' }]);
+	await expect(page.locator('.tile-error .error-text')).toContainText("That file type isn't supported");
+	await expect(page.locator(LIVE_REGION)).toHaveText("1 file(s) couldn't be added");
+
+	// A clean batch afterwards closes clean: the stale refusal belongs to no
+	// batch, so it must not flip this one's finish to "with errors".
+	await dropOn(page, '.tile-grid', [{ name: 'good.png', type: 'image/png' }]);
+	await expect(page.locator(LIVE_REGION)).toHaveText('Upload finished.', { timeout: 15_000 });
+});
+
+test('a 200 without a usable url fails the tile instead of storing nothing', async ({ page }) => {
+	test.setTimeout(60_000);
+	await adminLogin(page, PASSWORD);
+	await page.route('**/api/upload', (route) =>
+		route.fulfill({ contentType: 'application/json', body: '{}' })
+	);
+
+	await page.goto('/admin/upload');
+	await waitForDropAttachment(page, '.dropzone');
+	await dropOn(page, '.dropzone', [{ name: 'a.png', type: 'image/png' }]);
+
+	// Same guard as the sticker and VR forms: a row pointing at nothing would
+	// be silently dropped at save time, so the tile fails here and says so.
+	await expect(page.locator('.tile-error')).toHaveCount(1, { timeout: 15_000 });
+	await expect(page.locator('input[name="imageUrl_0"]')).toHaveValue('');
+	await expect(page.locator(LIVE_REGION)).toHaveText(
+		'Upload finished with errors. Each file that failed shows the reason.'
+	);
+});

From 35f316c0743b23864b02979d4b475bbe84d5957c Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 03:32:44 -0700
Subject: [PATCH 29/33] fix(admin): localize a non-JSON upload response, check
 the duplicate probe, and revoke a declined tile's preview (SONA-216)

---
 messages/ja.json                     |  2 +-
 src/routes/admin/upload/+page.svelte | 19 +++++++++++++++----
 tests/e2e/upload.spec.ts             |  1 +
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/messages/ja.json b/messages/ja.json
index 10387316..c8c695c9 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -355,7 +355,7 @@
 	"admin_upload_retry_hint": "クリックまたはドラッグで再試行",
 	"admin_upload_dropzone_multi": "最大{max}枚の画像を選択するか、ここにドラッグするか、クリップボードから貼り付けてください",
 	"admin_upload_images_added": "{count}枚の画像を追加しました",
-	"admin_upload_over_limit": "{count}件をスキップしました（最大{max}枚）",
+	"admin_upload_over_limit": "{count}件のファイルをスキップしました（最大{max}枚）",
 	"admin_upload_images_rejected": "{count}件のファイルを追加できませんでした",
 	"admin_upload_images_added_and_rejected": "{added}枚の画像を追加しました。{rejected}件のファイルを追加できませんでした",
 	"admin_upload_batch_done": "アップロードが完了しました。",
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 0632dd04..51bf7efc 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -86,9 +86,12 @@
 				headers: { 'Content-Type': 'application/json' },
 				body: JSON.stringify({ fileName: file.name, fileSize: file.size })
 			});
+			if (!checkRes.ok) throw new Error(m.admin_upload_failed_status({ status: checkRes.status }));
 			const { exists } = await checkRes.json();
 
 			if (exists && !confirm(m.admin_upload_duplicate_confirm({ fileName: file.name }))) {
+				// Declined: the tile goes, and so does the preview it was holding.
+				if (tile.previewUrl) URL.revokeObjectURL(tile.previewUrl);
 				tiles = tiles.filter((t) => t.key !== tile.key);
 				return;
 			}
@@ -97,10 +100,18 @@
 			fd.append('file', file);
 			const uploadRes = await fetch('/api/upload', { method: 'POST', body: fd });
 			if (!uploadRes.ok) throw new Error(m.admin_upload_failed_status({ status: uploadRes.status }));
-			// The cast validates nothing: a 2xx whose body carries no usable url
-			// is a failure too (same check as the other two forms), not a tile
-			// pointing at nothing.
-			const { url } = (await uploadRes.json()) as { url?: unknown };
+			// A 2xx the form cannot read a url out of is a failure too (same check
+			// as the other two forms), not a tile pointing at nothing. That covers
+			// a non-JSON body (a proxy interstitial) as well as a JSON one without
+			// a usable url; either way the tile gets the localized message, not a
+			// parser's.
+			let body: { url?: unknown };
+			try {
+				body = await uploadRes.json();
+			} catch {
+				throw new Error(m.admin_upload_failed());
+			}
+			const { url } = body;
 			if (typeof url !== 'string' || !url) throw new Error(m.admin_upload_failed());
 			tile.url = url;
 			tile.status = 'done';
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index b8623e33..c8dd1bd5 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -821,6 +821,7 @@ test('a lone refused drop does not poison the next clean batch', async ({ page }
 
 	// A clean batch afterwards closes clean: the stale refusal belongs to no
 	// batch, so it must not flip this one's finish to "with errors".
+	await waitForDropAttachment(page, '.tile-grid');
 	await dropOn(page, '.tile-grid', [{ name: 'good.png', type: 'image/png' }]);
 	await expect(page.locator(LIVE_REGION)).toHaveText('Upload finished.', { timeout: 15_000 });
 });

From 2561111de8012dee61e2d9722ee736ab00fb808e Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 04:02:01 -0700
Subject: [PATCH 30/33] fix(admin): pin the sticker accept set exactly and
 localize a bad duplicate-check body (SONA-216)

---
 src/lib/config.test.ts               |  6 ++++++
 src/routes/admin/upload/+page.svelte | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/config.test.ts b/src/lib/config.test.ts
index ce4c663a..e45d7a72 100644
--- a/src/lib/config.test.ts
+++ b/src/lib/config.test.ts
@@ -33,6 +33,12 @@ describe('STICKER_ACCEPT', () => {
 	it('offers only types the server stores', () => {
 		for (const t of STICKER_ACCEPT.split(',')) expect(isAllowedImageType(t)).toBe(true);
 	});
+
+	it('is exactly PNG and WebP, the two formats a sticker is stored as', () => {
+		// A subset check alone would let image/jpeg slip in, since the server
+		// stores it for artwork; the sticker contract is narrower than that.
+		expect(STICKER_ACCEPT.split(',').sort()).toEqual(['image/png', 'image/webp']);
+	});
 });
 
 describe('SESSION_COOKIE', () => {
diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index 51bf7efc..a477122f 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -74,7 +74,10 @@
 				resolve({ width: img.naturalWidth, height: img.naturalHeight });
 				URL.revokeObjectURL(img.src);
 			};
-			img.onerror = () => resolve({ width: 0, height: 0 });
+			img.onerror = () => {
+				resolve({ width: 0, height: 0 });
+				URL.revokeObjectURL(img.src);
+			};
 			img.src = URL.createObjectURL(file);
 		});
 	}
@@ -87,7 +90,14 @@
 				body: JSON.stringify({ fileName: file.name, fileSize: file.size })
 			});
 			if (!checkRes.ok) throw new Error(m.admin_upload_failed_status({ status: checkRes.status }));
-			const { exists } = await checkRes.json();
+			// Same guard as the upload parse below: a non-JSON 2xx must not put a
+			// parser's message on the tile.
+			let exists: unknown;
+			try {
+				({ exists } = await checkRes.json());
+			} catch {
+				throw new Error(m.admin_upload_failed());
+			}
 
 			if (exists && !confirm(m.admin_upload_duplicate_confirm({ fileName: file.name }))) {
 				// Declined: the tile goes, and so does the preview it was holding.

From e7c6c0cabb282cbb6421bad570730456660b09ad Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 04:11:47 -0700
Subject: [PATCH 31/33] test(admin): watch the upload request window on the
 stray-drop assertion (SONA-216)

---
 tests/e2e/vr-admin-form.spec.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/vr-admin-form.spec.ts b/tests/e2e/vr-admin-form.spec.ts
index 1213b08b..50e51552 100644
--- a/tests/e2e/vr-admin-form.spec.ts
+++ b/tests/e2e/vr-admin-form.spec.ts
@@ -441,8 +441,14 @@ test('the showcase media zone refuses files while a save is in flight', async ({
 	await expect(page.locator('input[name="modelUrl"]')).toHaveValue('');
 
 	// A drop that misses every zone (here: the form itself) is swallowed page-
-	// wide, so the browser never navigates to the file.
+	// wide, so the browser never navigates to the file. The request window is
+	// watched, not the counter: a regressed filter could still post a moment
+	// after the drop returns, which an immediate counter read would miss.
+	const strayPost = page
+		.waitForRequest('**/api/upload', { timeout: 300 })
+		.then(() => true, () => false);
 	expect(await dropOn(page, 'form.form', [{ name: 'stray.png', type: 'image/png' }])).toBe(true);
+	expect(await strayPost).toBe(false);
 	expect(uploads).toBe(before);
 
 	// The zone comes back once the submit settles, so a failed save is still

From e3aaa8821e59c8c0793090b7ebb37a773089fdb0 Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 04:46:24 -0700
Subject: [PATCH 32/33] fix(admin): skip the preview for every refused tile so
 an oversized image is never decoded (SONA-216)

---
 src/routes/admin/upload/+page.svelte | 9 +++++----
 tests/e2e/upload.spec.ts             | 2 ++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/routes/admin/upload/+page.svelte b/src/routes/admin/upload/+page.svelte
index a477122f..b8aac088 100644
--- a/src/routes/admin/upload/+page.svelte
+++ b/src/routes/admin/upload/+page.svelte
@@ -170,10 +170,11 @@
 			const tile: Tile = {
 				key: tileKey++,
 				fileName: file.name,
-				// A wrong-type file gets no object URL: handed to <img> it can only
-				// paint the browser's broken-image glyph. Its tile shows the resting
-				// surface and a file icon instead.
-				previewUrl: badType ? '' : URL.createObjectURL(file),
+				// A refused file gets no object URL. A wrong-type one handed to <img>
+				// can only paint the broken-image glyph, and an oversized one would
+				// make the browser decode a huge image for a tile that already
+				// failed. Both show the resting surface and a file icon instead.
+				previewUrl: error ? '' : URL.createObjectURL(file),
 				url: '',
 				width: 0,
 				height: 0,
diff --git a/tests/e2e/upload.spec.ts b/tests/e2e/upload.spec.ts
index c8dd1bd5..d5609c99 100644
--- a/tests/e2e/upload.spec.ts
+++ b/tests/e2e/upload.spec.ts
@@ -423,6 +423,7 @@ test('refused files still take slots: nine wrong-type files fill the eight-tile
 });
 
 test('a picked file the accept string refuses gets an error tile, not a POST', async ({ page }) => {
+	test.setTimeout(60_000);
 	await adminLogin(page, PASSWORD);
 
 	const uploads = countUploadPosts(page);
@@ -464,6 +465,7 @@ for (const width of [1280, 390]) {
 	test(`the refused-file icon clears the status band at ${width}px in Japanese`, async ({
 		page
 	}) => {
+		test.setTimeout(60_000);
 		await adminLogin(page, PASSWORD);
 		// The paraglide locale cookie (src/lib/paraglide/runtime.js cookieName)
 		// switches the SSR locale, the same way the VR guide spec does.

From 1728b8d3a7ecc8e5806a4860f4ddbe19e3d54b0d Mon Sep 17 00:00:00 2001
From: Sparky <1609870+sparkyfen@users.noreply.github.com>
Date: Thu, 3 Sep 2026 05:10:09 -0700
Subject: [PATCH 33/33] docs(storage): describe the sticker form's per-file
 refusal banner (SONA-216)

---
 docs/image-metadata.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/image-metadata.md b/docs/image-metadata.md
index b7fe4c2f..363b878f 100644
--- a/docs/image-metadata.md
+++ b/docs/image-metadata.md
@@ -149,9 +149,9 @@ Each caller handles the refusal in its own way. An upload through `/api/upload`
 returns 422 and asks you to re-export the file. A fursuit import counts that
 photo as failed and logs the reason. Avatar re-hosting logs a warning and keeps
 the source URL as a hotlink. A sticker import reports the failure for that
-sticker. Uploading stickers by hand in the pack form counts the refused files
-among the failures and names the refusal in a second message with its own
-count, because the operator picked those files and can re-export them. A provider migration lists the object as failed and asks you to replace
+sticker. Uploading stickers by hand in the pack form names each refused file
+and the fix on its own line under the upload zone, because the operator picked
+those files and can re-export them. A provider migration lists the object as failed and asks you to replace
 it with a fresh copy. The sticker re-key reports it the same way a migration
 does, because the operator has to replace the file either way.