feat: upload source by ctrl+v and dropzone

web/src/lib/components/schema/SchemaPreview.svelte

@@ -78,6 +78,7 @@
 		{running}
 		ontextinput={ontextsource}
 		{onrendertext}
+		{onupload}
 	/>
 	<SchemaResultTile
 		{resultKind}

web/src/lib/components/schema/SchemaSourceTile.svelte

@@ -3,6 +3,7 @@
 	import type { PixelImage } from "$lib/core/types";
 	import { t } from "$lib/i18n/t";
 	import type { InputMode } from "$lib/registry";
+	import Dropzone from "./Dropzone.svelte";
 	import PreviewTile from "./PreviewTile.svelte";
 	import SchemaTextSource from "./SchemaTextSource.svelte";
 
@@ -13,6 +14,7 @@
 		running?: boolean;
 		ontextinput?: (text: string) => void;
 		onrendertext?: () => void;
+		onupload?: (file: File) => void;
 	}
 	let {
 		mode,
@@ -21,9 +23,19 @@
 		running = false,
 		ontextinput,
 		onrendertext,
+		onupload,
 	}: Props = $props();
 
 	const sourceUrl = $derived(source ? toDataUrl(source) : null);
+
+	let dragging = $state(false);
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		dragging = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) onupload?.(file);
+	}
 </script>
 
 <PreviewTile label={t("sourceCard.source")} viewMode={mode}>
@@ -37,9 +49,29 @@
 			/>
 		</div>
 	{:else if mode === "image" && sourceUrl}
-		<img data-testid="source-image" src={sourceUrl} alt={t("sourceCard.alt")} />
+		<div
+			class="tile-drop"
+			class:dragging
+			role="region"
+			aria-label={t("dropZone.overlayDefault")}
+			ondragover={(e) => {
+				e.preventDefault();
+				dragging = true;
+			}}
+			ondragleave={() => (dragging = false)}
+			ondrop={onDrop}
+		>
+			<img
+				data-testid="source-image"
+				src={sourceUrl}
+				alt={t("sourceCard.alt")}
+			/>
+			{#if dragging}
+				<span class="drop-hint">{t("dropZone.overlayDefault")}</span>
+			{/if}
+		</div>
 	{:else if mode === "image"}
-		<span class="empty">{t("sourceCard.chooseImage")}</span>
+		<Dropzone onfile={onupload} />
 	{:else}
 		<span class="empty">{t("sourceCard.noSource")}</span>
 	{/if}
@@ -54,4 +86,32 @@
 		padding: var(--space-l);
 		box-sizing: border-box;
 	}
+	.tile-drop {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		align-self: stretch;
+	}
+	.tile-drop.dragging::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border: var(--size-border-thick) dashed var(--color-main);
+		border-radius: var(--radius-m);
+		background: var(--color-main-tint);
+		pointer-events: none;
+	}
+	.tile-drop .drop-hint {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		padding: var(--space-l);
+		color: var(--color-main);
+		font: var(--font-size-s) var(--font-mono);
+		text-align: center;
+		pointer-events: none;
+	}
 </style>

web/src/lib/components/schema/SchemaToolView.svelte

@@ -22,6 +22,7 @@
 		type ToolSchema,
 	} from "$lib/registry-schema";
 	import { downloadZip } from "$lib/zip";
+	import { onMount } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
 
 	interface Props {
@@ -235,6 +236,25 @@
 		init();
 	});
 
+	onMount(() => {
+		if (inputMode !== "image") return;
+		function onPaste(e: ClipboardEvent) {
+			const target = e.target as HTMLElement | null;
+			if (target?.closest("input, textarea, [contenteditable]")) return;
+			for (const item of e.clipboardData?.items ?? []) {
+				if (item.kind !== "file" || !item.type.startsWith("image/")) continue;
+				const file = item.getAsFile();
+				if (file) {
+					e.preventDefault();
+					void handleFile(file);
+				}
+				return;
+			}
+		}
+		window.addEventListener("paste", onPaste);
+		return () => window.removeEventListener("paste", onPaste);
+	});
+
 	$effect(() => {
 		if (!started) return;
 		if (inputMode === "image" && !source) return;

web/src/lib/i18n/en.ts

@@ -122,7 +122,7 @@ export const en: Dict = {
 		pickDefault: "Drop an image here or click to choose a file",
 		overlayDefault: "Release the file to replace the image",
 		pickTitle: "Drop a PNG here",
-		pickHint: "or click to browse — processed locally",
+		pickHint: "or click / paste (Ctrl+V) — processed locally",
 	},
 	search: {
 		placeholder: "Find a tool…",

web/src/lib/i18n/ru.ts

@@ -123,7 +123,7 @@ export const ru: Dict = {
 		pickDefault: "Перетащите изображение сюда или нажмите, чтобы выбрать файл",
 		overlayDefault: "Отпустите файл, чтобы заменить изображение",
 		pickTitle: "Перетащите PNG сюда",
-		pickHint: "или нажмите, чтобы выбрать — всё локально",
+		pickHint: "или нажмите / вставьте (Ctrl+V) — всё локально",
 	},
 	search: {
 		placeholder: "Найдите инструмент…",