easy-png-tools2/docs/plan-workspace.md

План: пайплайн-workspace

Статус: план к выполнению.

1. Что получается

Страница /workspace: одна картинка-исходник слева, справа результат всей цепочки; между ними — список шагов, где каждый шаг это инструмент из реестра со своими параметрами. Результат каждого шага становится входом следующего. Шаги можно добавлять, удалять, перемещать, выбирать для просмотра промежуточного результата и правки параметров. Цепочка переживает перезагрузку страницы и переносится файлом JSON.

2. Модель данных

type PipelineStep = { id: string; toolId: string; values: Record<string, unknown> };
type PipelineDocument = { version: 1; steps: PipelineStep[] };

• Значения параметров сериализуемы по определению (числа/строки/логические).
• Загрузка из хранилища или файла проходит валидацию: версия, массив шагов, каждый toolId существует в реестре, значения прогнаны через санитизацию — мусор отбрасывается, а не ломает страницу.

3. Исполнение цепочки

• Один прогон = свёртка по шагам: текущее изображение пропускается через run каждого инструмента; попутно собираются все промежуточные результаты — они и есть превью шагов.
• Тот же механизм надёжности, что на страницах инструментов: токен запусков (устаревший ответ отбрасывается) и задержка ~300 мс после последнего изменения исходника или шагов.
• Ошибка любого шага — баннер с именем инструмента; предыдущие промежуточные результаты остаются видимыми.

4. Переиспользование и точечные доработки

Готовое берётся целиком: SourceCard (загрузка/замена/Ctrl+V), Preview, ParamForm (форма шага), DownloadButton, EmptyState, карточка результата собирается из этих примитивов — ResultCard намеренно не переделывается, он специфичен для одиночного инструмента.

Три небольшие доработки ради отсутствия повторов:

• Общий авто-раннер: текущий паттерн «токен + таймер + очистка» выносится из страницы инструмента в небольшой модуль и используется обеими страницами — единственное место, где трогается работающий код.
• Константа PNG-формата экспортируется из реестра: рабочему пространству нужно то же имя файла и формат вывода, что и кнопке скачивания.
• DropZone получает опциональный проп типа принимаемых файлов — им же импортируется JSON-файл цепочки; валидация переключается на этот тип.

Пипетка и маски в параметрах шагов сознательно выключены (колбэки ParamForm опциональны, так что просто не прокидываются) — они остаются фичей одиночных инструментов.

5. Новые компоненты

• StepList.svelte — список шагов: порядковый номер, название инструмента, кнопки выше/ниже/удалить; клик выбирает шаг.
• StepEditor.svelte — карточка выбранного шага: имя инструмента и его ParamForm.
• StepPicker.svelte — добавление шага: выпадающий список инструментов, сгруппированный по категориям, и кнопка «Добавить».
• Страница routes/workspace/+page.svelte — оркестратор: состояние исходника, шагов, выбранного шага, промежуточных результатов; вызов общего раннера; сборка сцены из готовых карточек.

Хранение: автосохранение документа цепочки (без картинок) в localStorage при каждом изменении; восстановление при открытии страницы; кнопки экспорта и импорта JSON рядом со списком шагов.

6. Этапы и проверки

• A. Механизмы — модуль модели и валидации, общий авто-раннер, перевод страницы инструмента на него, экспорт PNG-константы. Проверка: полный регресс старых страниц, test/check/build.
• B. Каркас — маршрут и три компонента, прогон цепочки, превью выбранного шага, скачивание результата. Проверка: смоук §8 пп. 1–5.
• C. Сохранение — автосохранение, восстановление, экспорт/импорт JSON через доработанную зону перетаскивания. Проверка: смоук §8 пп. 6–9.
• D. Итог — полный прогон и регресс всего каталога.

7. Критерии готовности

• Цепочка из нескольких инструментов даёт корректно составленный эффект; порядок шагов влияет на результат.
• Промежуточное превью соответствует выбранному шагу; скачивается итог.
• Цепочка восстанавливается после перезагрузки и переносится файлом; битые файлы не ломают страницу.
• Ни одного дублирования паттерна запуска; старые инструменты работают без изменений поведения.
• test/check/build зелёные, смоук §8 пройден.

8. Смоук-чеклист

1. Исходник → добавить «чёрно-белый по порогу», затем «поля», затем «изменить прозрачность» — результат составленный, скачивается.
2. Клик по среднему шагу показывает его промежуточный результат; правка его порога пересчитывает всю цепочку.
3. Перестановка шагов местами меняет итог; удаление шага убирает его эффект.
4. Замена исходника перезапускает всю цепочку; чип занятости виден на тяжёлых прогонах.
5. Инструмент с ошибкой параметров подсвечивается баннером с его именем, прежний итог не исчезает.
6. Перезагрузка страницы восстанавливает цепочку шагов (без картинки).
7. Экспорт сохраняет JSON; импорт того же файла восстанавливает шаги.
8. Импорт повреждённого JSON — баннер ошибки, текущая цепочка цела.
9. Быстрые правки подряд дают один финальный пересчёт.
10. Все страницы одиночных инструментов ведут себя как раньше после перевода на общий раннер.

9. Что сознательно не делаем

• Пер-шаговые маски и пипетка в параметрах шагов.
• Ленивые инкрементальные пересчёты длинных цепочек — полный прогон, операции уровня EASY быстрые.
• Ветвления, несколько исходников, смешивание картинок.
• Перетаскивание шагов мышью — только кнопки порядка.