docs: update plans\docs - actual info

docs/archive/plan-design-fix.md

@@ -0,0 +1,141 @@
+# План: доводка дизайна до верности (фикс по refs)
+
+> **СТАТУС: ЗАКРЫТ (2026-09-07).** Актуальный дизайн (`preview/*`) ушёл вперёд
+> от референсов `refs-html/` — сверка с ними больше не информативна
+> (новые компоненты `SchemaToolView`/`SchemaPreview`/каталог не имеют
+> рефовой копии). Аудит против рефа прекращается; качество дизайна дальше
+> гоняется ревью руками и специализированными проверками
+> (`lint:all` — stylelint/design-tokens/токен-аудит). Порядок удаления старого
+> и перехода — по `plan-redesign.md` (C17–C21).
+
+> Статус: к выполнению. Ветка `feat/redesign`.
+> Источники: `docs/archive/demo-fidelity.md` (архивная копия старого отчёта по
+> верности, неактуальна), `docs/plan-redesign.md` (общая стратегия, фазы 1–4
+> выполнены до C16). Актуальный аудит верности — `pnpm refs-cdp-audit` /
+> `pnpm refs-css-audit` / `pnpm refs-dom-audit` → `web/audit/audit-report.md`
+> (текущий список скриптов — в `web/package.json`, см. `refs-*audit`).
+
+## Контекст
+
+- Новый дизайн собран параллельно под `preview/*` (см. `plan-redesign.md`),
+  старый сайт `(old)/` не трогаем до C17.
+- `refs/` и `refs-html/` приведены к консистентному виду — текущая «правда по
+  пикселям». Механизм синхронизации ref→код не создаётся (см. §9 plan-redesign).
+- Аудит верности автоматизирован: `pnpm refs-cdp-audit` (1440×900,
+  `scripts/audit-cdp.mjs`) пишет
+  `web/audit/audit-report.md` — light/dark токены + поэлементный дифф стилей;
+  пиксель-дифф не используется. Палитры токенов уже сверены с рефом (light
+  совпадает, dark собран). Темы в `refs-html` переключаются — скрипт инжектится
+  в `scripts/extract-static.mjs`.
+- Исходный отчёт `demo-fidelity.md` перенесён в `docs/archive/` как утративший
+  актуальность; его данные актуализированы ниже (Этап 1).
+- Зафиксированные решения (подтверждены автором):
+  - **F1 — плоский фон холста**, без blueprint-сетки (как в рефе).
+  - **F4 — preview-stack в одну колонку** (как в рефе).
+
+## Принципы
+
+- Никаких правок старого дизайна `(old)/` и старого `ui/`.
+- Компоненты пишем в `kit/` (переименование в `ui/` — на C19 по plan-redesign).
+- Коммиты атомарные (< ~500 строк), по 1–2 компонента; после каждого —
+  `svelte-check` + `lint` + `build` + `refs-cdp-audit` (diff% не должен расти без причины).
+- Коммиты делает автор (агент не коммитит).
+
+## Этап 0 — Рефакторинг (SRP / дизайн-обёртки), без изменения визуала
+
+Гигантские страницы (`demo` ~513, `tools/[id]` ~451 строк) дробим на
+компоненты единой ответственности; убираем дублирующиеся inline-стили.
+
+Новые обёртки в `src/lib/components/kit/`:
+
+- `FieldGrid` — сетка полей (заменяет `.controls` / `.controls.compact`).
+- `ToggleRow` — лейбл + `Toggle` (дублировался в `demo` и `tools/[id]`).
+- `PreviewStack` — контейнер превью-плиток, **одна колонка** (реализует F4 в
+  одном месте).
+- `SectionLabel` — label + strong + actions (вместо `.pipeline-head` /
+  `.preview-top`).
+- `FileChip` — пилюля файла.
+- `PipelineFooter` — reset + auto-note.
+- `WorkspaceLayout` — двухпанельная сетка (settings | preview) со sticky +
+  брейкпоинт 800px.
+
+Декомпозиция страниц:
+
+- `tools/[id]`: вынести `ParamControl` (диспетчер полей по `ParamDef`),
+  `SettingsPanel` (левая панель), `PreviewPanel` (правая панель) —
+  колоцированно в `routes/preview/tools/[id]/`. Страница сжимается до
+  состояния + глёв.
+- `demo`: переписать на те же обёртки + `WorkspaceHeader` (eyebrow + h1 + lede +
+  file-chip).
+
+Побочный баг, устраняемый тут же: в `demo` поля сейчас обёрнуты в
+`<div class="control-block"><MonoLabel>…</MonoLabel><SliderField label>` —
+**двойной лейбл**, т.к. `ColorField`/`SliderField`/`SelectField`/`NumberField`
+уже содержат `Field` (MonoLabel) изнутри. При рефакторе убираем внешний
+`MonoLabel`, оставляем само поле.
+
+Критерий Этапа 0: визуал идентичен (audit diff% без регрессии), старые тесты
+зелёные.
+
+## Этап 1 — Верность (по refs-html; статус на момент плана)
+
+Аудит: `pnpm refs-cdp-audit` (1440×900) пишет `web/audit/audit-report.md` —
+light/dark токены + поэлементный дифф стилей. Пиксель-дифф не используется.
+Палитры токенов уже сверены с рефом: light совпадает (`--background`,
+`--panel`, `--foreground`, `--muted`, `--line`, `--blue`), dark собран (16
+токенов). Темы в `refs-html` переключаются (скрипт инжектится в
+`extract-static.mjs`).
+
+Открытые / решённые пункты (исходник — `docs/archive/demo-fidelity.md`):
+
+- **B1** (открыт, P1): `button, input, select, textarea` рендерятся Arial —
+  добавить в reset `design2.css` `font-family: inherit`. Влияет на все страницы.
+- **B2** (решён — проверить): двойного топбара нет. `preview/+layout.svelte`
+  рендерит ровно один `TopBar`; `demo` свой `.topbar` не рендерит. Подтвердить
+  аудитом/визуально при Этапе 1.
+- **F1** (решено — плоский фон): наш `--background` уже `#EEF1F4` (как реф);
+  видимое отличие было в blueprint-сетке поверх фона. Фикс: убрать `BlueprintGrid`
+  из `AppShell`.
+- **F2** (сделано C16): тип шага (`StepCard`) — приглушённый mono-текст, не
+  синий бейдж; индекс шага — синий `#1769D2`.
+- **F3** (сделано C16): подпись превью-тайла (`PreviewTile`) — синяя `#1769D2`.
+- **F4** (решено — одна колонка): реализуется в `PreviewStack` (Этап 0),
+  колонка = `1fr`.
+- **F5** (открыт): вес `MonoLabel` 500 → 400 (как в рефе).
+- **F6** (открыт): мета-подписи (MetaRow/MetaList, DIMENSIONS/FORMAT/SIZE)
+  fs 10px → 9px.
+- **F7** (низкий): копирайт/стиль — у нас `+ Add tool` (реф `Add tool`);
+  кнопка `Download result` — сверить с рефом (синяя, ~478×42). Проверить
+  визуально (замеры NOT FOUND — артефакт вложенного чипа размера).
+- **F8** (низкий): `h1` line-height чуть выше рефа (150px vs 115px).
+- **F9** (открыт): вертикальный ритм — подровнять паддинги секций под реф
+  (pipeline-head и пр.).
+- **F10** (открыт): внутренние отступы preview-панели (паддинг панели).
+
+После Этапа 1 — повторный `refs-cdp-audit`, зафиксировать остаточный diff (sub-pixel /
+структурный) и обновить статус пунктов выше прямо в этом файле.
+
+## Этап 2 — plan-redesign.md (C17–C21), ОТЛОЖЕНО
+
+Выполняется **только после** того, как новый дизайн доведён до приемлемого
+уровня верности (Этапы 0–1). Сами пункты — в `plan-redesign.md` §10 Шаг 5–6:
+
+- **C17**: `preview/*` → реальные маршруты, удалить `(old)/`, корневой
+  `+layout.svelte` ← `design2.css`, поправить `newCode` в `eslint.config.js`
+  (`src/routes/preview/**` → `src/routes/**`).
+- **C18**: правки импортов/редиректов, проверка билда.
+- **C19**: удалить старое `ui/` + `app.css`, `kit/` → `ui/` (или оставить),
+  раскрыть ESLint `recommended` на весь код.
+- **C20**: брейкпоинты 1200/1100/800/480; build без предупреждений; `grep` по
+  старым токенам/классам пуст.
+- **C21**: опц. удалить `refs/` и `refs-html/` из репо.
+
+## Порядок коммитов (Этап 0)
+
+1. `kit/`: `FieldGrid`, `ToggleRow`, `PreviewStack`, `SectionLabel`, `FileChip`,
+   `PipelineFooter`, `WorkspaceLayout` — по 1–2 на коммит.
+2. `tools/[id]`: `ParamControl` → `SettingsPanel` + `PreviewPanel` → тонкая
+   страница.
+3. `demo`: переписать на обёртки.
+
+После каждого коммита: `svelte-check` + `lint` + `build` + `refs-cdp-audit`.