style: format docs markdown

docs/archive/plan-update-ux.md

@@ -4,48 +4,89 @@
 >
 > **Что сделано по этапам:**
 >
-> - A — общая MIME-валидация `isSupportedImage` + `unsupportedImageMessage` в `core/io.ts`; `DropZone` переведён на них ✔
-> - B — постоянная двухпанельная раскладка: одна карточка-«сцена» с равными половинами «Исходник | Результат», кнопки внутри своих половин, параметры — отдельной карточкой ниже; контент сайта растянут на всю ширину окна ✔
-> - C — Ctrl+V: `<svelte:window onpaste>`, поиск image-item в буфере, общая валидация; текстовые вставки не затрагиваются ✔
-> - D — drag-замена: компонент `DropOverlay` с вуалью-подсказкой и счётчиком `dragenter/dragleave` против мерцания; тот же счётчик в `DropZone` ✔
-> - E — верификация: тесты 85/85, svelte-check 0 ошибок, статический билд с 11 страницами; ручной смоук-чеклист §5 пройден ✔
+> - A — общая MIME-валидация `isSupportedImage` + `unsupportedImageMessage` в
+>   `core/io.ts`; `DropZone` переведён на них ✔
+> - B — постоянная двухпанельная раскладка: одна карточка-«сцена» с равными
+>   половинами «Исходник | Результат», кнопки внутри своих половин, параметры —
+>   отдельной карточкой ниже; контент сайта растянут на всю ширину окна ✔
+> - C — Ctrl+V: `<svelte:window onpaste>`, поиск image-item в буфере, общая
+>   валидация; текстовые вставки не затрагиваются ✔
+> - D — drag-замена: компонент `DropOverlay` с вуалью-подсказкой и счётчиком
+>   `dragenter/dragleave` против мерцания; тот же счётчик в `DropZone` ✔
+> - E — верификация: тесты 85/85, svelte-check 0 ошибок, статический билд с 11
+>   страницами; ручной смоук-чеклист §5 пройден ✔
 >
-> **Отступления от исходного плана в ходе реализации:** вместо пропа `overlay` у `DropZone` сделан отдельный компонент-обёртка `DropOverlay` (drag-события ловит контент под курсором); раскладка доработана по ревью — одна карточка равных половин вместо двух независимых колонок, сайт без ограничения ширины.
+> **Отступления от исходного плана в ходе реализации:** вместо пропа `overlay` у
+> `DropZone` сделан отдельный компонент-обёртка `DropOverlay` (drag-события
+> ловит контент под курсором); раскладка доработана по ревью — одна карточка
+> равных половин вместо двух независимых колонок, сайт без ограничения ширины.
 
 ## 1. Целевое поведение
 
-1. **Постоянная двухпанельная раскладка** страницы инструмента — отдельного состояния «страница загрузки» больше нет:
-   - **Слева — исходник**, панель есть всегда. Не загружено → пустое дроп-поле (drag&drop или клик). Загружено → превью исходника.
-   - **Справа — результат**: до загрузки — `EmptyState` «Результат появится здесь»; во время обработки — `EmptyState` «Обработка…»; после — превью результата (для info-инструмента — `InfoPanel`).
-2. **Ctrl+V** — картинка из буфера обмена вставляется как исходник с любого места страницы.
-3. **Замена перетаскиванием** — новый файл, брошенный на левую панель с загруженной картинкой, заменяет исходник (с оверлеем-подсказкой во время перетаскивания).
-4. **Кнопка «Заменить»** под превью исходника (переносится туда текущая «Загрузить другое изображение»).
+1. **Постоянная двухпанельная раскладка** страницы инструмента — отдельного
+   состояния «страница загрузки» больше нет:
+   - **Слева — исходник**, панель есть всегда. Не загружено → пустое дроп-поле
+     (drag&drop или клик). Загружено → превью исходника.
+   - **Справа — результат**: до загрузки — `EmptyState` «Результат появится
+     здесь»; во время обработки — `EmptyState` «Обработка…»; после — превью
+     результата (для info-инструмента — `InfoPanel`).
+2. **Ctrl+V** — картинка из буфера обмена вставляется как исходник с любого
+   места страницы.
+3. **Замена перетаскиванием** — новый файл, брошенный на левую панель с
+   загруженной картинкой, заменяет исходник (с оверлеем-подсказкой во время
+   перетаскивания).
+4. **Кнопка «Заменить»** под превью исходника (переносится туда текущая
+   «Загрузить другое изображение»).
 
-На мобильной ширине панели складываются в столбец: исходник сверху, результат снизу.
+На мобильной ширине панели складываются в столбец: исходник сверху, результат
+снизу.
 
 ## 2. Изменения по файлам
 
-Новые компоненты не вводим — `EmptyState`, `Preview`, `DropZone` покрывают всё. Меняем три файла:
+Новые компоненты не вводим — `EmptyState`, `Preview`, `DropZone` покрывают всё.
+Меняем три файла:
 
-- **`core/io.ts`** — экспорт `isSupportedImage(file): boolean`: общая MIME-проверка на базе `ACCEPTED_IMAGE_TYPES`.
-- **`DropZone.svelte`** — переходит на `isSupportedImage`; новый опциональный проп `overlay` — режим «невидимая зона приёма поверх контента» для замены перетаскиванием.
-- **`ToolPage.svelte`** — постоянная сетка из двух панелей; `<svelte:window onpaste>`; drag-оверлей левой панели; кнопки замены/сброса переезжают в левую панель; правая панель — три состояния через `EmptyState`.
+- **`core/io.ts`** — экспорт `isSupportedImage(file): boolean`: общая
+  MIME-проверка на базе `ACCEPTED_IMAGE_TYPES`.
+- **`DropZone.svelte`** — переходит на `isSupportedImage`; новый опциональный
+  проп `overlay` — режим «невидимая зона приёма поверх контента» для замены
+  перетаскиванием.
+- **`ToolPage.svelte`** — постоянная сетка из двух панелей;
+  `<svelte:window onpaste>`; drag-оверлей левой панели; кнопки замены/сброса
+  переезжают в левую панель; правая панель — три состояния через `EmptyState`.
 
 ## 3. Этапы и проверки
 
-- **A. Общая валидация** — `isSupportedImage` в `io.ts`, `DropZone` переведён на неё. Проверка: `pnpm check`.
-- **B. Раскладка** — две постоянные колонки в ToolPage; правая панель через EmptyState; кнопки уходят в левую панель; обёртка `{#if !source}` на всю страницу убирается. Проверка: визуальный осмотр всех инструментов, `check/build`.
-- **C. Ctrl+V** — `onpaste` на окне → поиск image-item в `clipboardData` → тот же `handleFile`; не-изображения игнорируются молча. Проверка: ручной смоук со скриншотом из буфера.
-- **D. Drag-замена** — оверлей DropZone(overlay) при dragover на левой панели; drop → `handleFile` нового файла. Проверка: ручной смоук «бросить файл на загруженный исходник».
-- **E. Итог** — полный ручной смоук-чеклист (§5). Проверка: `test/check/build` зелёные.
+- **A. Общая валидация** — `isSupportedImage` в `io.ts`, `DropZone` переведён на
+  неё. Проверка: `pnpm check`.
+- **B. Раскладка** — две постоянные колонки в ToolPage; правая панель через
+  EmptyState; кнопки уходят в левую панель; обёртка `{#if !source}` на всю
+  страницу убирается. Проверка: визуальный осмотр всех инструментов,
+  `check/build`.
+- **C. Ctrl+V** — `onpaste` на окне → поиск image-item в `clipboardData` → тот
+  же `handleFile`; не-изображения игнорируются молча. Проверка: ручной смоук со
+  скриншотом из буфера.
+- **D. Drag-замена** — оверлей DropZone(overlay) при dragover на левой панели;
+  drop → `handleFile` нового файла. Проверка: ручной смоук «бросить файл на
+  загруженный исходник».
+- **E. Итог** — полный ручной смоук-чеклист (§5). Проверка: `test/check/build`
+  зелёные.
 
 ## 4. Нюансы и решения
 
-- **Мерцание dragleave** — классическая проблема оверлеев: используем счётчик `dragenter/dragleave`, оверлей скрывается только когда счётчик обнулился и произошёл `drop`/`dragend`.
-- **Paste при фокусе в поле параметров** — обрабатываем всегда: если в буфере именно изображение, пользователь очевидно хочет заменить исходник; текстовые вставки обработчик не трогает.
-- **Форматы буфера** — скриншоты приходят как PNG, часть приложений отдаёт JPEG/WebP; все проходят общую `isSupportedImage`. GIF/BMP из буфера редки, но тоже допустимы.
-- **Info-инструменты** — ведут себя так же: слева исходник, справа после загрузки появляется `InfoPanel`.
-- **Состояние ошибки** — баннер остаётся сверху страницы; неудачная замена не сбрасывает старый исходник.
+- **Мерцание dragleave** — классическая проблема оверлеев: используем счётчик
+  `dragenter/dragleave`, оверлей скрывается только когда счётчик обнулился и
+  произошёл `drop`/`dragend`.
+- **Paste при фокусе в поле параметров** — обрабатываем всегда: если в буфере
+  именно изображение, пользователь очевидно хочет заменить исходник; текстовые
+  вставки обработчик не трогает.
+- **Форматы буфера** — скриншоты приходят как PNG, часть приложений отдаёт
+  JPEG/WebP; все проходят общую `isSupportedImage`. GIF/BMP из буфера редки, но
+  тоже допустимы.
+- **Info-инструменты** — ведут себя так же: слева исходник, справа после
+  загрузки появляется `InfoPanel`.
+- **Состояние ошибки** — баннер остаётся сверху страницы; неудачная замена не
+  сбрасывает старый исходник.
 
 ## 5. Чеклист ручного смоука
 
@@ -54,7 +95,8 @@
 3. Ctrl+V со скриншотом → исходник заменился, результат пересчитался.
 4. Drag файла на загруженную левую панель → оверлей виден, после drop — замена.
 5. Отмена перетаскивания (Esc / мимо) → оверлей скрылся, исходник не изменился.
-6. Бросок неподдерживаемого файла (например .txt) → баннер ошибки, старый исходник цел.
+6. Бросок неподдерживаемого файла (например .txt) → баннер ошибки, старый
+   исходник цел.
 7. Кнопка «Заменить» открывает выбор файла.
 8. png-info: работает та же схема, справа сводка.
 9. Мобильная ширина: панели в столбец, порядок исходник → результат.
@@ -62,7 +104,8 @@
 
 ## 6. Критерии готовности
 
-- На странице инструмента нет состояния «только дропзона на всю страницу» — раскладка двухпанельная всегда.
+- На странице инструмента нет состояния «только дропзона на всю страницу» —
+  раскладка двухпанельная всегда.
 - Загрузка работает тремя способами: клик, drag&drop (включая замену), Ctrl+V.
 - Ошибочные файлы и отмена перетаскивания не портят текущий исходник.
 - `test/check/build` зелёные; чеклист §5 пройден.
@@ -71,4 +114,5 @@
 
 - Множественная загрузка / пакетная обработка — вне скоупа этого плана.
 - Камера/скриншот-инструменты захвата — только буфер обмена.
-- Прогресс-бары декодирования — файлы читаются быстро, достаточно индикации «Обработка…».
+- Прогресс-бары декодирования — файлы читаются быстро, достаточно индикации
+  «Обработка…».