docs: update backlog and mvp plan

docs/archive/mvp-plan.md

@@ -1,10 +1,23 @@
 # План начальной реализации: минимальный рабочий MVP
 
-Сопутствующие документы: [roadmap.md](./roadmap.md) — общий план по фазам, [analysis.md](./analysis.md) — перечень утилит.
+> **СТАТУС: ВЫПОЛНЕН И ЗАКРЫТ 2026-08-22. Документ перенесён в архив** (`docs/archive/`) и больше не развивается.
+>
+> **Что сделано по плану:**
+> - Шаг 0 — каркас: SvelteKit + adapter-static, design-токены на CSS, лейаут с навигацией по категориям ✔
+> - Шаг 1 — ядро: `PixelImage`, декодирование файлов, кодирование PNG/JPEG/WebP, скачивание ✔
+> - Шаг 2 — операции ядра: color / geometry / alpha / analyze, чистые функции без DOM ✔
+> - Шаг 3 — реестр из 11 инструментов + санитизация параметров ✔
+> - Шаг 4 — универсальные UI-компоненты (DropZone, Preview, ParamForm, DownloadButton, InfoPanel, ToolPage) ✔
+> - Шаг 5 — маршруты: `/tools/[id]` с prerender всех страниц, главная-каталог по категориям ✔
+> - Шаги 6–7 — обработка ошибок, состояния, полировка; верификация ✔
+>
+> **Checkpoint пройден:** все 11 инструментов вручную проверены в браузере (загрузка → применение → скачивание), включая найденный и исправленный баг resize с сохранением пропорций. Тесты 75/75, svelte-check 0 ошибок, статический экспорт собирается.
+>
+> **Попутные улучшения сверх плана:** корневой скрипт `pnpm dev`; `sanitizeParams` против пустых/невалидных значений полей; семантика «вписать в размеры» для resize.
 
 ## 0. Зафиксированные решения
 
-- **Объём MVP:** только одиночные инструменты «загрузил → настроил → скачал». Пайплайн-workspace (`/workspace`) — сразу следующим шагом после checkpoint'а, не внутри MVP.
+- **Объём MVP:** только одиночные инструменты «загрузил → настроил → скачал». Пайплайн-workspace (`/workspace`) вне скоупа этого плана.
 - **Набор инструментов первого среза:** ~11 базовых EASY (см. §3). Достаточно, чтобы проверить насквозь ядро → реестр → универсальную страницу.
 - **Стили:** обычный CSS без фреймворка — design-токены на CSS custom properties, ноль зависимостей.
 - **Стек:** SvelteKit + `@sveltejs/adapter-static` + TypeScript, пакетный менеджер pnpm (уже зафиксирован в корневом `package.json`). Весь код сайта — в `web/`.
@@ -50,7 +63,7 @@
 
 - `color.ts`: `grayscale(img)` (luma), `invert(img)`, `brightnessContrast(img, brightness −100..100, contrast −100..100)`.
 - `geometry.ts`: `flip(img, axis)`, `rotate90(img, turns)`, `crop(img, x, y, w, h)` — индексная математика; `resize(img, w, h)` — билинейная интерполяция на TS (не `drawImage`, чтобы ядро осталось DOM-free и воспроизводимым бит-в-бит).
-- `alpha.ts`: `removeColorToAlpha(img, hex, tolerancePercent)` — цветовое расстояние → альфа 0; остальное — позже.
+- `alpha.ts`: `removeColorToAlpha(img, hex, tolerancePercent)` — цветовое расстояние → альфа 0.
 - `analyze.ts`: `imageInfo(img)` → `{ width, height, hasAlpha, colorCount }`.
 
 **Проверка:** vitest на маленьких матрицах пикселей (2×2, 3×3): flip, rotate, crop, grayscale — ожидаемые значения руками.
@@ -150,15 +163,3 @@ cd web && pnpm test       # vitest: ядро (геометрия/цвет) + ц
 Ручной smoke-тест каждого из 11 инструментов: загрузка PNG → применить → скачать → открыть результат.
 
 **Checkpoint MVP:** любой из 11 инструментов доступен по прямому URL с главной страницы; PNG загружается drag&drop; параметры применяются; результат скачивается; всё работает офлайн со статического хостинга; ни одной серверной зависимости.
-
----
-
-## 9. Сразу после MVP (не входит в план)
-
-По roadmap.md §Фаза 1, в порядке следования:
-
-1. Пайплайн-workspace `/workspace` (шаги, превью шагов, localStorage, экспорт/импорт JSON).
-2. Расширение набора до ~40 топовых EASY из analysis.md §6.2.
-3. Web Worker для тяжёлых операций, полировка UX, SEO-описания.
-
-Что сознательно отложено: wasm/Rust, эталонные файлы, Playwright, CLI — фазы 2+ из roadmap.md.

docs/backlog.md

@@ -14,3 +14,12 @@
 
 - **Range slider вместо полей ввода** там, где это удобнее (яркость/контраст, качество JPEG/WebP, порог похожести) — желательно slider с присоединённым числовым значением.
 - **Пипетка для цвета** — выбор цвета удаления/подложки кликом прямо по превью изображения (в дополнение к `<input type="color">`).
+
+## 3. Загрузка изображений и раскладка страницы
+
+Убрать отдельное состояние «страница загрузки» и сделать постоянную двухпанельную раскладку:
+
+- **Слева — исходная картинка**, всегда присутствует: если не загружена, панель — пустое поле, на которое можно перетащить файл (или кликнуть для выбора).
+- **Справа — результат работы инструмента** (до загрузки — пустое состояние/подсказка).
+- **Ctrl+V** — вставка изображения из буфера обмена сразу в исходник.
+- **Drag&drop поверх загруженной картинки** — перетаскивание нового файла на левую панель заменяет текущее исходное изображение.