17 KiB
План: дожать перевод инструментов в preview и переезд ветки old/
Статус: план. Основа —
plan-composite-params.md(Фазы 1–5). Текущее состояние: 40 из 125 инструментов переведены вregistry-new, старый UI уже живёт на(old)/-маршрутах, линтер-изоляция old↔preview на месте (плагинisolation/no-mixed-imports). Здесь — что сделать, чтобы:
- в preview был весь каталог инструментов (плюс закрыты известные долги);
- физически перенести старую ветку в папки
old/(шаг 37 основного плана);- после переезда провести детальную проверку в реальных условиях и собрать отзывы пользователей (правки поверх — отдельными задачами).
Порядок: перевод остатка → починить известные долги → переезд в
old/→ пользовательская проверка/фидбек → (позже, отдельным решением) удаление старого кода.
Текущая картина (факты)
registry.ts+registry/— 125 инструментов;registry-new/— 40; остаток — 85. (Ранний подсчёт «104» был занижен: извлечение суффиксом-pngтеряло каналыpng-to-hsl/…, текстовые вердиктыpng-infoи т.п. и обратные конвертерыpng-to-base64/….)- Preview (
/preview) показывает только переведённые 40; старый UI работает на/-маршрутах (группа(old)/):+page,demo,list-tools,tools/[id]. - Плагин
isolation/no-mixed-imports(web/eslint-plugins/isolation/) полностью разделяет ветки: старыйlib/registry.ts|/registry/**,lib/registry-helpers.ts,lib/categories.ts,lib/tools/**,lib/components/**(кромеkit/) vs новыйroutes/preview/**,lib/registry-new/**,lib/preview/**,lib/registry-schema.ts,lib/components/kit/**. Общее:core/,i18n/,theme,assets/, корневойlib. - Правило копий (из основного плана): файл, используемый
(old), не трогаем — делаем копию вlib/preview/(пример:lib/preview/tool-icons.ts). - Известные долги (предсуществующие, не создавались нами): ошибка
ToolCard.svelte:19:36(svelte-check), фейлpalette.test.ts(ENOENTsrc/app.css— из-за негоpnpm testкрасный при 607 passed), ~335 design-tokens ошибокlint:allв старых kit-компонентах, a11y-warning вColorField.svelte, пустой ruleset вToggle.svelte, неиспользуемые токены вpreview.css.
Скоуп перевода: 85 инструментов осталось
По категориям (в скобках — сколько из категории уже переведено; подсчёт по
registry/ vs registry-new/, без учёта генерируемых SpaceId и params):
- color — 18 (из 25, переведено 7): grayscale-png, invert-colors-png,
adjust-brightness-contrast-png, auto-contrast-png, sepia-png, posterize-png,
black-and-white-png, decrease-color-count-png, extract-channel-png,
swap-channels-png, change-png-opacity, change-png-hue, плюс 6 канальных
png-to-{hsl,hsv,hsi,cmyk,ycbcr,lab}(генерируются изSPACES);compress-png/reduce-to-size-png— нет, они в convert. Простое; канальные — наcore/channels.ts(renderSpace). Нюанс:change-png-opacity/hueпохожи на переведённые, но это отдельные инструменты, не дубли. - geometry — 13 (из 18): rotate, flip, skew, zoom, shift, add-padding, tile,
trim-empty-space, change-aspect-ratio, swap-orientation, symmetric-copy,
center-by-alpha, rotate-free. В основном простое (slider/select/color/checkbox).
Нюансы:
rotate-free— угол 0..360 (посмотреть reuseAngleControlили slider);tile— cols/rows (два числа, можноdimensionили два slider);shift— offsetX/Y в px + цвет (не путать сoffset-процентами). - alpha — 14 (из 21): remove-alpha, set-alpha, extract-alpha-mask,
round-corners, invert-alpha, remove-background, make-thicker, make-thinner,
feather-edges, clean-edges, harden-alpha, despeckle-alpha, close-holes +
watermark-image-png(см. особый случай). Остальное простое. - generate — 10 (из 21): emoji-to-png (emoji+size); палитровые генераторы
color-wheel, complementary, analogous, triadic, tetradic, monochromatic,
shades (baseColor + count/spread — простое);
mix-colorsиsort-colors— особые случаи (списки). - convert — 14 (из 16): text-source-инструменты
base64/data-uri/hex/bytes/rgb-values-to-png + обратные
png-to-base64/data-uri/hex/bytes/rgb-values/bmp — особый случай (нужен
text-источник в preview);
compress-png/reduce-to-size-png— особый случай (output/формат, связан с backlog №7);svg-to-png— width. - analyze — 12 (из 13): show-transparent, show-grayscale, show-color,
light/dark-pixel-mask, unique-color-mask (color+opacity+tolerance+mode) —
простое, частично переиспользуемый предикат;
verify-is-png— текстовый вердикт, особый случай; плюс 5 text-вердиктовpng-info,png-is-grayscale,png-file-size,png-is-transparent,png-orientation— тоже текстовый вывод (см. text-source/вердикт-механику). - filters — 3 (из 8): blur (radius), sharpen (strength), silhouette (color+threshold). Простое.
- text — 1 (из 3):
watermark-tile-png— text+font-style+opacity+angle+ stepX/stepY. Переиспользует font-style; угол — AngleControl-подобный.
Особые случаи (требуют достройки фундамента, не просто перевод)
watermark-image-png— нужна overlay-механика: второе изображение-знак (getOverlay/store), которое загружается на странице инструмента и применяется поверх. В новом preview это единственный непереведённый инструмент с источником-картинкой помимо основного входа. Учесть связь сoverlay-store(упомянут вplan-redesign.md).- Text-source / text-вердикты (base64/data-uri/hex/bytes/rgb-values-to-png
и обратные png-to-base64/…; аналитические
png-info,png-is-grayscale,png-file-size,png-is-transparent,png-orientation,verify-is-png) — в старом UI этоtext-параметры, из которых собирается изображение, либо текстовый результат вместо картинки. В новом preview нужно решить, как подаётся текст-вход (текстовое поле/паста на странице инструмента) и как показывается результат для вердиктных инструментов (в конверсиях — не картинка, а текст/бейдж). - Output/формат (
compress-png,reduce-to-size-png; пересекается сconvert-png-to-jpg/webp) — поbacklog.md№7 формат переезжает в кнопку Download, а не в отдельный инструмент. Перед переводом решить: переводим как инструменты с quality-параметром или дожидаемся достройки download-формата. mix-colors/sort-colors— нужен список значений (цвета/веса или источник). В схеме нет list-kind: либо новый kind, либо фиксированное число слотов, либо отложить до отдельной задачи про списки.
Известные долги перед переездом (завести tasks и закрыть)
По AGENTS.md техдолг «чинится только по заведённым tasks, не игнорируется»:
lint:all (~335 design-tokens в kit), неиспользуемые токены preview.css,
a11y ColorField, пустой ruleset Toggle. Плюс два, мешающих зелёной
проверке до/после переезда: svelte-check error ToolCard.svelte:19:36 и фейл
palette.test.ts (ENOENT src/app.css). После их закрытия целевое состояние
проверок перед переездом: pnpm --dir web exec svelte-check → 0 errors,
pnpm --dir web test → зелёный, pnpm --dir web lint:all → только задокумент.
ированный остаток (или 0).
Шаги перевода остатка (порядок)
- Простые пачки (основной объём, 1 инструмент = 1 диф, паттерн Фазы 2): color (18) → filters (3) → geometry простое → alpha (кроме watermark-image).
- Analyze-маски и вердикты (12): переиспользование предикатов
core/masksв новомregistry-new/analyze.ts;show-color-pixels— аналог переведённогоextract-color-from-png(уже в registry-new); text-вердикты (png-info, png-is-grayscale, png-file-size, png-is-transparent, png-orientation, verify-is-png) — вместе с text-source-механикой (п. 5). - Generate-палитры (8 без mix/sort): генераторы с палитрой (как
color-spectrum/step-colors, кнопка Generate). - Raw-пакеты (watermark-tile): font-style + угол + dimension(+),
сверить с
add-text(переведён). - Особые случаи — отдельным переговоренным решением (overlay для watermark-image, text-source, output-формат, списки для mix/sort).
- После категории —
schema.layoutдля сгруппированных инструментов (шаг 32-33 паттерн) и ручная проверка в/preview.
Переезд в old/ (шаг 37 основного плана)
Скоп-сдвиг: «Scoped-пути двигаются вместе с папками» — обновляется
eslint.config.js(isolation-паттерны и design-tokens glob), не код правила.
- Что переезжает:
lib/registry.ts,lib/registry/**,lib/registry-helpers.ts,lib/categories.ts,lib/tools/**,lib/components/**(кромеkit/) → папкиold/(напримерlib/old/registry …,lib/old/tools,lib/old/components) — то есть всё старое в одном поддереве.routes/(old)/остаётся как есть (уже отделено). - Обновить конфиг плагина
isolation/no-mixed-imports: старые glob-ыlib/registry/**…заменить наlib/old/**(+lib/old/components/**и т.п.), «новое» и «общее» не меняются. Проверить, что правило по-прежнему разделяет (тест фолс-позитивов: временный импорт old↔new ловится). - Импорты внутри старого кода — относительные пути остаются рабочими
(папки двигаются целиком); поправить только то, что ссылалось на
$lib/...в другом стиле. Старые тесты (registry.test.tsи др.) переезжают вместе с исходниками и продолжают проходить. - Гейты переезда:
svelte-check0 errors,pnpm --dir web testзелёный,prettier --check .чистый,lint:all= задокументированный остаток, обе ветки открываются (старая/, новая/preview).
Проверка и сбор отзывов после переезда
- Регресс-чеклист по каталогу — пройти все инструменты в
/preview: дефолты совпадают со старыми, валидация/клампы поведения не меняют, результат эквивалентен старому UI (сверить на одинаковых входах). - Тяжёлые кейсы руками: генераторы, маски, font-style/plate/gradient на всем наборе, watermark-image (после overlay), text-source, output-формат.
- Сбор фидбека — отдельные задачи на каждый найденный фикс; чеклист зафиксировать в этом документе по мере находок (или ссылкой на tasks).
- Сверка каталога с
tools-map.md(покрытие/дедупликацияconvert-png-to-jpg/webp), при необходимости — обновить cards/мета. - Решение об удалении старого — после завершения ревью и фидбека,
отдельным шагом: тогда чистятся
lib/old/**,routes/(old)/**,old.css,exports, изоляционный плагин (glob-ы больше не нужны) и открываются «правило копий»-дубли.
Как ревьюить каждый шаг (гайды)
- Диф на один инструмент (или фундамент без инструментов) < ~500 строк.
- Старый
params/run/defaultParams/sanitizeParamsне изменены; вregistry-newкопия логики +schema(дефолты равны старым). - Старый UI и старые тесты продолжают работать:
pnpm --dir web test,pnpm --dir web exec svelte-check. - Новый инструмент проверяется руками в
/previewend-to-end (применение + сброс дефолтов + смена значений). - После переезда каждый move-шаг гоняет 4 гейта (см. выше).
Оценка трудозатрат
| Часть | Сложность | Оценка |
|---|---|---|
| Простые инструменты (color/filters/geometry/alpha без watermark) | Низкая-Средняя | ~5-8ч (≈47 шт) |
| Analyze-маски (12, часть в п.5 с text-source) | Средняя | ~2ч |
| Generate-палитры (8) | Средняя | ~2-3ч |
| watermark-tile (text) | Средняя | ~1ч |
| Особые случаи (overlay/text-source/format/списки) | Средняя-Высокая | ~4-6ч + ревью решения |
| Долги (ToolCard, palette.test.ts, lint:all остаток) | Средняя | ~2-4ч |
Переезд в old/ + конфиг плагина + гейты |
Средняя-Низкая | ~2-4ч |
| Проверка/фидбек + правки | Зависит | ~3-6ч |
| Итого | ~21-34ч по фазам |
Оценки ориентировочные; особые случаи — с ревью решения, объём финальных правок по фидбеку не предсказуем.