diff --git a/docs/plan-workspace.md b/docs/plan-workspace.md index 90b5e03..96eb777 100644 --- a/docs/plan-workspace.md +++ b/docs/plan-workspace.md @@ -1,79 +1,75 @@ -# План: пайплайн-workspace +# План: главная страница как рабочая область с цепочкой -> Статус: план к выполнению. +> Статус: план к выполнению. Заменяет идею отдельной страницы рабочего пространства. -## 1. Что получается +## 1. Модель -Страница `/workspace`: одна картинка-исходник слева, справа результат всей цепочки; между ними — список шагов, где каждый шаг это инструмент из реестра со своими параметрами. Результат каждого шага становится входом следующего. Шаги можно добавлять, удалять, перемещать, выбирать для просмотра промежуточного результата и правки параметров. Цепочка переживает перезагрузку страницы и переносится файлом JSON. +1. **Главная страница — это рабочая область.** Без выбранного инструмента на ней большой поиск: начните вводить название — список отфильтровывается; выбор разворачивает инструмент прямо здесь, без перехода. +2. Развернутый инструмент выглядит как привычная страница: слева исходник, справа результат со своей кнопкой скачивания, параметры — в отдельной карточке под сценой. +3. Под результатом рядом с кнопкой скачивания — кнопка **«⛓ Chain with…»**: добавляет пустую секцию, внутри которой такой же поиск; выбор заполняет секцию следующим инструментом. Так цепочка растёт сколько угодно. +4. Каждая заполненная секция цепи — полноценная: свои параметры, своё превью, своя кнопка скачивания промежуточного результата. Крестик убирает секцию; кнопка «✂ Remove chain» снимает всю цепь разом (без подтверждения). +5. Чекбокс «Показать маску» живёт в карточке параметров базового инструмента и влияет только на его превью: в цепь всегда передаётся сам результат. +6. Сетка-каталог инструментов переезжает на отдельную страницу `/list-tools` — для SEO и визуального поиска. Основная работа происходит на главной; в шапке появляются ссылки на обе. +7. Прямые адреса `/tools/` сохраняются: тот же развернутый инструмент для глубоких ссылок. +8. Цепочка переживает перезагрузку (автосохранение в localStorage). Экспорт/импорт файлом отложен до появления CLI/wasm-части. -## 2. Модель данных +## 2. Архитектура -```ts -type PipelineStep = { id: string; toolId: string; values: Record }; -type PipelineDocument = { version: 1; steps: PipelineStep[] }; -``` +- Страница инструмента уже собрана как самодостаточный компонент, принимающий запись реестра, — он и становится встраиваемым блоком. Маршруты `/tools/[id]` и главная используют один и тот же компонент: первая — по адресу из URL, вторая — по выбору из поиска. +- Состояние главной: выбран ли инструмент; если да — рендерится блок инструмента, целиком владеющий своим исходником, параметрами, результатом и цепочкой. +- Смена инструмента на главной (через повторный поиск) сбрасывает блок целиком. +- Цепочка хранится массивом шагов; у пустого звена инструмент ещё не выбран — такие звенья не сохраняются в localStorage и не участвуют в прогоне. +- Исполнение — последовательная свёртка: выход каждого звена — вход следующего; результаты всех звеньев доступны их секциям. Общий авто-раннер даёт токен отмены и задержку ~300 мс. -- Значения параметров сериализуемы по определению (числа/строки/логические). -- Загрузка из хранилища или файла проходит валидацию: версия, массив шагов, каждый `toolId` существует в реестре, значения прогнаны через санитизацию — мусор отбрасывается, а не ломает страницу. +## 3. Переиспользование и доработки существующего -## 3. Исполнение цепочки +Готовое берётся как есть: `SourceCard`, `Preview`, `ParamForm`, `DownloadButton`, `EmptyState`, модуль пайплайна, авто-раннер, `PNG_OUTPUT`. -- Один прогон = свёртка по шагам: текущее изображение пропускается через `run` каждого инструмента; попутно собираются все промежуточные результаты — они и есть превью шагов. -- Тот же механизм надёжности, что на страницах инструментов: токен запусков (устаревший ответ отбрасывается) и задержка ~300 мс после последнего изменения исходника или шагов. -- Ошибка любого шага — баннер с именем инструмента; предыдущие промежуточные результаты остаются видимыми. +Доработки: -## 4. Переиспользование и точечные доработки +- **Блок страницы инструмента** — расширяется секцией цепочки: список заполненных звеньев, каждое со своими параметрами, превью и скачиванием, плюс пустые звенья с поиском. Кнопки «⛓» и «✂ Remove chain» — рядом со скачиванием базового результата. +- **`ParamsCard`** — опциональный блок «Показать маску» (флаг preview у инструмента + двусторонний флаг). +- **Карточка результата** — упрощается: получает готовую картинку, маска уходит в карточку параметров. +- **Существующая главная-каталог** — переезжает на маршрут `/list-tools` почти без изменений. -Готовое берётся целиком: `SourceCard` (загрузка/замена/Ctrl+V), `Preview`, `ParamForm` (форма шага), `DownloadButton`, `EmptyState`, карточка результата собирается из этих примитивов — `ResultCard` намеренно не переделывается, он специфичен для одиночного инструмента. +Удаляется: черновой маршрут рабочего пространства и его компоненты списка/селектора — вместо них новые, под вертикальную модель. -Три небольшие доработки ради отсутствия повторов: +## 4. Новые компоненты -- **Общий авто-раннер**: текущий паттерн «токен + таймер + очистка» выносится из страницы инструмента в небольшой модуль и используется обеими страницами — единственное место, где трогается работающий код. -- **Константа PNG-формата** экспортируется из реестра: рабочему пространству нужно то же имя файла и формат вывода, что и кнопке скачивания. -- **`DropZone` получает опциональный проп типа принимаемых файлов** — им же импортируется JSON-файл цепочки; валидация переключается на этот тип. +- **`ToolSearch.svelte`** — поиск с нечётким совпадением: поле ввода, отфильтрованный список (регистронезависимая подпоследовательность по названию и описанию, приоритет совпадению с начала), клавиатура ↑↓ Enter Esc; два размера — герой на главной и компактный внутри пустого звена. Предлагает только инструменты-трансформеры. +- **`ChainStep.svelte`** — секция одного звена: пустое звено показывает компактный поиск; заполненное — заголовок с номером и крестиком, форму параметров, превью результата, кнопку скачивания. +- **`ChainBar.svelte`** — строка под результатом базового инструмента: «⛓ Chain with…» и «✂ Remove chain» (видна только при непустой цепи). -Пипетка и маски в параметрах шагов сознательно выключены (колбэки `ParamForm` опциональны, так что просто не прокидываются) — они остаются фичей одиночных инструментов. +## 5. Этапы и проверки -## 5. Новые компоненты +- **A. Поиск и главная** — `ToolSearch`, герой поиска на главной, встраивание блока инструмента, перенос каталога на `/list-tools`, ссылки в шапке. Проверка: `check/build`, визуально. +- **B. Цепочка** — состояние цепи в блоке инструмента, пустые звенья с поиском, прогон, промежуточные превью и скачивания, ошибки звеньев. Проверка: смоук §8 пп. 1–6. +- **C. Маска и упрощение** — блок маски в `ParamsCard`, упрощение карточки результата. Проверка: смоук §8 п. 7. +- **D. Хранение и итог** — автосохранение и восстановление цепочки, удаление чернового маршрута рабочего пространства, полный регресс каталога, `test/check/build`. -- **`StepList.svelte`** — список шагов: порядковый номер, название инструмента, кнопки выше/ниже/удалить; клик выбирает шаг. -- **`StepEditor.svelte`** — карточка выбранного шага: имя инструмента и его `ParamForm`. -- **`StepPicker.svelte`** — добавление шага: выпадающий список инструментов, сгруппированный по категориям, и кнопка «Добавить». -- Страница `routes/workspace/+page.svelte` — оркестратор: состояние исходника, шагов, выбранного шага, промежуточных результатов; вызов общего раннера; сборка сцены из готовых карточек. +## 6. Смоук-чеклист -Хранение: автосохранение документа цепочки (без картинок) в localStorage при каждом изменении; восстановление при открытии страницы; кнопки экспорта и импорта JSON рядом со списком шагов. - -## 6. Этапы и проверки - -- **A. Механизмы** — модуль модели и валидации, общий авто-раннер, перевод страницы инструмента на него, экспорт PNG-константы. Проверка: полный регресс старых страниц, `test/check/build`. -- **B. Каркас** — маршрут и три компонента, прогон цепочки, превью выбранного шага, скачивание результата. Проверка: смоук §8 пп. 1–5. -- **C. Сохранение** — автосохранение, восстановление, экспорт/импорт JSON через доработанную зону перетаскивания. Проверка: смоук §8 пп. 6–9. -- **D. Итог** — полный прогон и регресс всего каталога. +1. На главной — большое поле поиска; ввод фильтрует список по мере набора; Enter выбирает подсвеченный. +2. Выбранный инструмент разворачивается на той же странице: исходник, параметры, результат. +3. «⛓ Chain with…» добавляет пустую секцию с компактным поиском; выбор заполняет её. +4. У каждой секции своё превью и своё скачивание промежуточного результата. +5. Крестик убирает секцию; «✂ Remove chain» снимает все звенья разом. +6. Ошибка звена — баннер «Шаг N (имя): …»; последние успешные результаты секций не исчезают. +7. «Показать маску» переключает превью базового инструмента; в цепь идёт результат, скачивание базового отдаёт результат, не маску. +8. Перезагрузка восстанавливает цепочку заполненных звеньев; пустые звенья при этом исчезают. +9. Быстрые правки подряд — один финальный пересчёт всей вертикали. +10. `/list-tools` открывает старый каталог по категориям; прямые адреса `/tools/` работают. ## 7. Критерии готовности -- Цепочка из нескольких инструментов даёт корректно составленный эффект; порядок шагов влияет на результат. -- Промежуточное превью соответствует выбранному шагу; скачивается итог. -- Цепочка восстанавливается после перезагрузки и переносится файлом; битые файлы не ломают страницу. -- Ни одного дублирования паттерна запуска; старые инструменты работают без изменений поведения. -- `test/check/build` зелёные, смоук §8 пройден. +- Работа начинается с главной: поиск → инструмент → цепочка звеньями, каждый со своим превью и скачиванием. +- Отдельной страницы рабочего пространства нет; каталог доступен на `/list-tools`; прямые ссылки инструментов работают. +- Пустые звенья не попадают в сохранение и не ломают прогон. +- `test/check/build` зелёные, смоук §6 пройден. -## 8. Смоук-чеклист +## 8. Что сознательно не делаем -1. Исходник → добавить «чёрно-белый по порогу», затем «поля», затем «изменить прозрачность» — результат составленный, скачивается. -2. Клик по среднему шагу показывает его промежуточный результат; правка его порога пересчитывает всю цепочку. -3. Перестановка шагов местами меняет итог; удаление шага убирает его эффект. -4. Замена исходника перезапускает всю цепочку; чип занятости виден на тяжёлых прогонах. -5. Инструмент с ошибкой параметров подсвечивается баннером с его именем, прежний итог не исчезает. -6. Перезагрузка страницы восстанавливает цепочку шагов (без картинки). -7. Экспорт сохраняет JSON; импорт того же файла восстанавливает шаги. -8. Импорт повреждённого JSON — баннер ошибки, текущая цепочка цела. -9. Быстрые правки подряд дают один финальный пересчёт. -10. Все страницы одиночных инструментов ведут себя как раньше после перевода на общий раннер. - -## 9. Что сознательно не делаем - -- Пер-шаговые маски и пипетка в параметрах шагов. -- Ленивые инкрементальные пересчёты длинных цепочек — полный прогон, операции уровня EASY быстрые. -- Ветвления, несколько исходников, смешивание картинок. -- Перетаскивание шагов мышью — только кнопки порядка. +- Ветвления и прицепывание от середины цепи — новое звено всегда добавляется в конец. +- Пипетка и маски внутри звеньев цепи — они остаются фичей базового инструмента. +- Экспорт и импорт цепочки файлом — отложено до появления CLI/wasm-части. +- Несколько параллельных инструментов на главной одновременно — один активный блок за раз.