diff --git a/docs/plan-hero-search.md b/docs/archive/plan-hero-search.md similarity index 99% rename from docs/plan-hero-search.md rename to docs/archive/plan-hero-search.md index 5a744f9..5c40ad9 100644 --- a/docs/plan-hero-search.md +++ b/docs/archive/plan-hero-search.md @@ -1,6 +1,6 @@ # План: герой-поиск v2 — иконки, популярность, карточки -> Статус: план к выполнению. +> **СТАТУС: ВЫПОЛНЕН 2026-08-23.** ## 1. Что получается diff --git a/docs/backlog.md b/docs/backlog.md index ac95892..f120e22 100644 --- a/docs/backlog.md +++ b/docs/backlog.md @@ -1,42 +1,20 @@ # Backlog -## 1. Популярность инструментов — оценка: S +## 1. Несколько языков — оценка: L, разбита на подзадачи -Поле `popularity` (число) в записи реестра; проставить всем текущим инструментам значения вручную (crop/resize/rescale выше остальных). - -- Сортировка выдачи поиска и каталога: сначала популярные среди равного скоринга. -- Опционально: блок «Популярные» под героем поиска на главной. - -## 2. Иконки инструментов — оценка: M - -У каждой записи поле `icon`; отображается в результатах поиска, каталоге `/list-tools`, легендах шагов цепочки. - -- Источник иконок: готовый открытый набор (Lucide, MIT) — подобрать по смыслу для всех инструментов; недостающие — нейтральная заглушка. -- Рендер одним SVG-спрайтом, без отдельных файлов на иконку. -- Кропотливая часть — подбор 50 осмысленных иконок, техника тривиальна. - -## 3. Карточки результатов поиска — оценка: S - -Заменить строки выдачи на карточки: иконка слева, название и описание справа; сетка в одну-две колонки в зависимости от размера героя. - -- Зависимость: лучше делать после №1 (иконка), но можно раньше с плейсхолдером. -- Сохранить клавиатурную навигацию ↑↓ Enter Esc и подсветку активной карточки. - -## 4. Несколько языков — оценка: L, разбита на подзадачи - -### 4a. Инфраструктура i18n — M +### 1a. Инфраструктура i18n — M Модуль словарей (`locales/ru.ts`, `locales/en.ts`), функция перевода с фолбэком на базовый язык, состояние активной локали (localStorage), переключатель в шапке, обновление ``. -### 4b. Перевод каркаса интерфейса — S/M +### 1b. Перевод каркаса интерфейса — S/M Шапка, кнопки, подписи полей и состояний («Результат появится здесь», тексты ошибок исполнителя), главная-герой, страница каталога. -### 4c. Перевод контента реестра — L по объёму, механическая +### 1c. Перевод контента реестра — L по объёму, механическая Вынести title/description инструментов и label/options параметров в словари локалей с фолбэком. Объём: ~51 инструмент плюс параметры — основной трудозатратный кусок волны. -### 4d. Поиск по любому языку — M +### 1d. Поиск по любому языку — M Матчинг запроса против названий/описаний во всех поддерживаемых локалях сразу (не только активной); нормализация: нижний регистр, ё→е, снятие диакритики (NFD). Скоринг существующий сохраняется, лучшая локаль даёт балл. diff --git a/docs/plan-medium-wave2.md b/docs/plan-medium-wave2.md new file mode 100644 index 0000000..098fdc5 --- /dev/null +++ b/docs/plan-medium-wave2.md @@ -0,0 +1,71 @@ +# План: MEDIUM-волна №2 — морфология прозрачности + +> Статус: план к выполнению. + +## 1. Зачем + +Одна пара функций — расширение и сужение непрозрачных областей — открывает целое семейство пользовательских операций: обводка логотипов и иконок, контуры, утолщение и утончение подписей, удаление мелкого мусора и закрытие дырок. Всё это частые запросы в наборах PNG-утилит, а ядро получается компактным и легко покрывается тестами. + +## 2. Инструменты — 7 (все в категории «Прозрачность») + +- **Обвести PNG** (`add-stroke-png`) — кольцо выбранного цвета вокруг непрозрачного содержимого; параметры: цвет, толщина 1–10 px. +- **Найти контур PNG** (`find-contour-png`) — линия по краю непрозрачных областей; параметр: толщина линии. +- **Утолщить PNG** (`make-thicker-png`) — расширение содержимого на N пикселей. +- **Утончить PNG** (`make-thinner-png`) — сужение содержимого на N пикселей. +- **Жёсткие края PNG** (`harden-alpha-png`) — бинаризация альфы по порогу: полупрозрачность уходит, остаётся два состояния. +- **Убрать мусор PNG** (`despeckle-alpha-png`) — открытие: удаляет одиночные полупрозрачные пиксели и мелкие крапинки. +- **Закрыть дыры PNG** (`close-holes-png`) — закрытие: заполняет одиночные прозрачные точки внутри объекта. + +Все операции применяются к альфа-каналу; RGB пикселей сохраняется. + +## 3. Ядро `core/morphology.ts` + +Чистые функции над бинарной маской и над альфа-каналом: + +- `buildAlphaMask(img)` — 1 там, где альфа > 0. +- `dilateMask(mask, w, h, radius, shape)` — расширение; `shape`: квадрат или диск (для обводок диск даёт ровную круглую линию). +- `erodeMask(...)` — зеркальная операция. +- `dilateImage / erodeImage(img, radiusPx)` — применяют маскирование к альфе изображения, RGB сохраняется. +- Сборщики: + - обводка: `dilate(mask) − mask` → новое кольцо заливается цветом; + - контур: `mask − erode(mask)` → линия; + - открытие: `erode → dilate`; закрытие: `dilate → erode`. +- `hardenAlpha(img, thresholdPercent)` — отдельно от морфологии, но той же волной. + +Структурирующий элемент при радиусе r — диск радиуса r (расстояние до центра ≤ r); квадрат не используем, чтобы углы обводок не были угловатыми. + +## 4. Web Worker + +Ничего не требуется: новые операции попадают в реестр, исполнитель автоматически исполняет их в воркере. Тесты ядра идут мимо воркера (чистые функции). + +## 5. Этапы и проверки + +- **A. Ядро** — `morphology.ts` + точные тесты на матрицах 5×5: расширение диска, сужение, открытие убирает одиночный пиксель, закрытие закрывает одиночную дыру, кольцо обводки нужного цвета и толщины. Проверка: `pnpm test/check`. +- **B. Реестр** — семь записей, тест целостности обновляется (51 → 58). Проверка: `test/build`, визуально. +- **C. Итог** — полный прогон, смоук §7. + +## 6. Критерии готовности + +- Семь новых инструментов работают на прозрачных PNG: обводка, контур, толще/тоньше, жёсткие края, убрать мусор, закрыть дыры. +- Все операции детерминированы и покрыты юнит-тестами с ручными ожиданиями. +- Исполнение автоматически идёт в воркере. +- `test/check/build` зелёные, смоук §7 пройден. + +## 7. Смоук-чеклист + +1. Обводка толщиной 3 вокруг круглого стикера — ровное кольцо выбранного цвета, без угловатости. +2. Толщина 1 — тонкая аккуратная линия; 10 — толстая, форма содержимого не искажается сверх роста. +3. Контур показывает только край содержимого линией. +4. Толще/тоньше на тонкой надписи — штрихи растут/сжимаются без разрывов при умеренных значениях. +5. Жёсткие края: полупрозрачность исчезает, силуэт сохраняется. +6. Убрать мусор убирает одиночные точки-крапинки, не трогая крупные области. +7. Закрыть дыры заполняет одиночные прозрачные точки внутри логотипа. +8. Цепочка: обводка после удаления фона работает; каждое звено скачивает свой промежуток. +9. Регресс остальных инструментов без изменений. + +## 8. Что сознательно не делаем + +- Морфология по яркости для непрозрачных сканов — волна фокусируется на альфе прозрачных PNG. +- Выбор структурирующего элемента пользователем — всегда диск. +- Feather/свечение краёв — отдельная будущая задача поверх размытия. +- Произвольные SVG-маски и градиентные обводки.