feat: update drop file flow

web/src/lib/components/DropOverlay.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { isSupportedImage, unsupportedImageMessage } from '$lib/core/io';
+
+	interface Props {
+		onFile: (file: File) => void;
+		onError?: (message: string) => void;
+		label?: string;
+		children: Snippet;
+	}
+
+	let {
+		onFile,
+		onError,
+		label = 'Отпустите файл, чтобы заменить изображение',
+		children
+	}: Props = $props();
+
+	let depth = $state(0);
+	const dragging = $derived(depth > 0);
+
+	function enter() {
+		depth += 1;
+	}
+
+	function leave() {
+		depth = Math.max(0, depth - 1);
+	}
+
+	function over(event: DragEvent) {
+		event.preventDefault();
+	}
+
+	function end() {
+		depth = 0;
+	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		depth = 0;
+		const file = event.dataTransfer?.files[0];
+		if (!file) return;
+		if (!isSupportedImage(file)) {
+			onError?.(unsupportedImageMessage(file));
+			return;
+		}
+		onFile(file);
+	}
+</script>
+
+<div
+	class="area"
+	class:dragging
+	role="region"
+	aria-label={label}
+	ondragenter={enter}
+	ondragleave={leave}
+	ondragover={over}
+	ondragend={end}
+	ondrop={drop}
+>
+	{@render children()}
+	{#if dragging}
+		<div class="veil" aria-hidden="true">
+			<p>{label}</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.area {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.veil {
+		position: absolute;
+		inset: 0;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-3);
+		background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+		border: 2px dashed var(--accent);
+		border-radius: var(--radius-m);
+		color: var(--accent);
+		font-weight: 600;
+		text-align: center;
+		pointer-events: none;
+	}
+</style>

web/src/lib/components/DropZone.svelte

@@ -11,7 +11,24 @@
 		$props();
 
 	let input = $state<HTMLInputElement | undefined>();
-	let dragging = $state(false);
+	let depth = $state(0);
+	const dragging = $derived(depth > 0);
+
+	function enter() {
+		depth += 1;
+	}
+
+	function leave() {
+		depth = Math.max(0, depth - 1);
+	}
+
+	function over(event: DragEvent) {
+		event.preventDefault();
+	}
+
+	function end() {
+		depth = 0;
+	}
 
 	function accept(file: File | undefined | null) {
 		if (!file) return;
@@ -40,14 +57,13 @@
 			openPicker();
 		}
 	}}
-	ondragover={(e) => {
+	ondragenter={enter}
-		e.preventDefault();
+	ondragleave={leave}
-		dragging = true;
+	ondragover={over}
-	}}
+	ondragend={end}
-	ondragleave={() => (dragging = false)}
 	ondrop={(e) => {
 		e.preventDefault();
-		dragging = false;
+		depth = 0;
 		accept(e.dataTransfer?.files[0]);
 	}}
 >

web/src/lib/components/ToolPage.svelte

@@ -5,6 +5,7 @@
 	import { defaultParams, outputOf, sanitizeParams, type ToolEntry } from '$lib/registry';
 	import Button from './ui/Button.svelte';
 	import DownloadButton from './DownloadButton.svelte';
+	import DropOverlay from './DropOverlay.svelte';
 	import DropZone from './DropZone.svelte';
 	import EmptyState from './ui/EmptyState.svelte';
 	import InfoPanel from './InfoPanel.svelte';
@@ -109,10 +110,12 @@
 			{#if !source}
 				<DropZone onFile={handleFile} onError={(message) => (errorText = message)} />
 			{:else}
-				<div class="media">
+				<DropOverlay onFile={handleFile} onError={(message) => (errorText = message)}>
-					<Preview image={source} />
+					<div class="media">
-				</div>
+						<Preview image={source} />
-				<Button variant="secondary" onclick={reset}>Заменить изображение</Button>
+					</div>
+					<Button variant="secondary" onclick={reset}>Заменить изображение</Button>
+				</DropOverlay>
 			{/if}
 		</div>