План: параметры между исходником и результатом

СТАТУС: УСТАРЕЛ (2026-09-07). Раскладка описывалась для старого ToolPage; перекрыта редизайном (plan-redesign.md) — страницы инструментов теперь SchemaToolView/SchemaPreview в новом дизайне. Сама идея «инлайн: исходник → параметры → результат» живёт в backlog.md (№2).

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

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

Альтернативная раскладка этапа инструмента: три колонки «Исходник | Параметры | Результат» на широких экранах, вертикальный стек на узких. Цель — отдать вариант дизайнеру как отправную точку. Откат к текущей раскладке — замена одной строки в ToolPage.

2. Решения

Два взаимозаменяемых компонента этапа с одинаковым набором пропсов; ToolPage рендерит один тег. Попробовать новое — поменять компонент в этом теге; вернуть старое — поменять обратно. Никаких флагов и конфигов.
Общая типизация пропсов в одном файле рядом с компонентами; сами карточки (SourceCard, ResultCard, TextInputCard, ParamsCard) переиспользуются как есть — вся логика исполнения, маски, пипетки и автозапуска остаётся в ToolPage и приходит сверху.
Chain-звенья используют ту же панельную систему «Вход | Параметры | Результат» — общие классы .pane / .pane-legend / .pane-params вынесены в app.css, вертикальные поля в узкой колонке заданы один раз глобально.
Один порог отзывчивости: три колонки от ~75rem, ниже — стек «исходник → параметры → результат». Промежуточные перестроения не придумываем до фидбека дизайнера.

3. Компоненты

src/lib/components/stage/
  stage-props.ts          # интерфейс StageProps + сборщик дефолтов
  ToolStageClassic.svelte # текущая разметка .tool-stage, перенесена 1:1 из ToolPage
  ToolStageInline.svelte  # новая сетка [source | params | result]

ToolStageClassic — вырезка существующего шаблона со стилями; после извлечения страница должна быть пиксель-в-пиксель прежней.
ToolStageInline — grid-колонки minmax(0, 1fr) | фикс-ширина параметров | minmax(0, 1fr); легенда «Параметры» над средней колонкой в том же стиле edge-legend.
Модификаторы состояний через классы на корне компонента: no-params (инструменты без параметров → две колонки), no-source (генераторы → параметры и результат), текстовый вход до декодирования занимает левую ячейку как сейчас.

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

Каждый этап заканчивается зелёными test/check/build и ревью.

A. Извлечение классики — перенос разметки и стилей этапа из ToolPage в ToolStageClassic без изменений поведения; пропсы собираются в одном объекте. Критерий: страница неотличима, diff по логике ToolPage нулевой.
B. Инлайн-раскладка — ToolStageInline, переключение в ToolPage на новый компонент, прогон смоука §5. Ревью в браузере; решение дизайнера — потом, код уже позволяет жить в обоих вариантах.

5. Смоук

Замена компонента этапа — одна строка; обе версии собираются без предупреждений.
Инструмент без параметров (например Автоконтраст): две колонки, пустой середины нет.
Генератор без исходника: параметры и результат в две колонки.
Текстовый инструмент до декодирования: вход слева, параметры в центре, пустое состояние результата справа.
Маска, пипетка, слайдеры в средней колонке; изменение параметра перезапускает инструмент как раньше.
Узкий экран: стек без горизонтального скролла, порядок исходник → параметры → результат.
Легенды присутствуют у всех трёх зон в обеих раскладках.

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

Редизайн визуального языка (цвета, типографика, формы) — материал для дизайнера, не для этого плана.
Новая логика: исполнение, автосохранение, пресеты — раскладка ничего не знает про исполнение.

6.0 KiB Raw Blame History