chore: add audit script for compare with refs

2026-09-14 21:46:35 +00:00 · 2026-08-27 23:52:32 +05:00
parent adcc255107
commit bcdfc4cf12
6 changed files with 2553 additions and 1 deletions
@@ -0,0 +1,84 @@
+# Demo fidelity: /preview/demo vs refs-html/demo.html
+
+Метод: Playwright, viewport 1440×900, скриншоты обеих страниц + замер вычисленных
+стилей ключевых элементов + пиксель-дифф (без чтения картинки моделью).
+Пиксель-дифф: **24.9%** (наш скролл 1731px, реф 1579px). Зоны различий размазаны
+по всей высоте → править надо глобально, не точечно.
+
+Теперь процесс автоматизирован: `pnpm audit` (Playwright) пишет
+`web/audit/audit-report.md` — light/dark токены + поэлементный дифф стилей по тексту.
+Пиксель-дифф убран (неудобен для работы). Фиксы можно делать в любой момент и
+перепроверять аудитом.
+
+## Баги (объективно, правим в любом случае)
+
+- **B1. Кнопки/инпуты рендерятся шрифтом Arial, а не IBM Plex Sans.**
+  Доказательство: пробы `Reset pipeline` → `fontFamily: Arial`. Причина: у `button/input`
+  не задан `font-family: inherit`. Фикс: добавить в reset `design2.css`
+  `button, input, select, textarea { font-family: inherit; }`. Влияет на все страницы. (P1)
+- **B2. Двойной топбар.** Страница демо рендерит свой `.topbar` (brand / AUTO PIPELINE /
+  help / theme / lang), который перекрывается глобальным `fixed` Header из
+  `preview/+layout.svelte` (в нём только theme-toggle). В рефе — один топбар.
+  Контент демо-топбара (brand, статус, язык) визуально спрятан за фикс-хедером.
+  Фикс: убрать кастомный `.topbar` из демо и сделать хедер лейаута реф-стайл топбаром
+  (brand + version + status + help + theme + lang) — улучшит и C9/C10. (P1)
+
+## Расхождения дизайна (нужно решение)
+
+- **F1. Фон холста.** Реф: плоский серый `#EEF1F4`. Наш: белый + blueprint-сетка.
+  Решение: совпасть с рефом (убрать сетку на демо) или оставить сетку как сигнатуру нового дизайна.
+- **F2. Бейдж типа шага** (BACKGROUND/TRANSFORM/STYLE). Реф: приглушённый серый `#6D787F`.
+  Наш (`StepCard` type → `Badge accent`): синий `#1769D2`. Решение: сделать приглушённым
+  (меняет `StepCard` глобально) или оставить синим.
+- **F3. Подписи превью-тайлов** (SOURCE / STEP 01 / FINAL OUTPUT). Реф: синий `#1769D2`,
+  weight 400. Наш (`PreviewTile` label): серый, weight 500.
+- **F4. Раскладка preview-stack.** Реф: одна колонка (5 строк, выше). Наш: 2 колонки (grid).
+  Решение: одна колонка (как реф) или оставить 2 колонки как выбор нового дизайна.
+- **F5. Вес лейблов контролов.** Реф: 400. Наш (`MonoLabel`): 500. Мелко.
+- **F6. Мета-подписи** (DIMENSIONS/FORMAT/SIZE): реф fs 9px, наш 10px. Мелко.
+- **F7. Копирайт:** `Add tool` у нас `+ Add tool`; кнопка `Download result` — сверить стиль
+  (в рефе синяя с белым текстом 478×42). Пробы `Download result`/`Add tool`/`DIRECTION`
+  вернули NOT FOUND — скорее артефакт замера (вложенный текст/чип размера), проверить визуально.
+- **F8. h1 line-height** чуть выше (наш 150px vs реф 115px) — мелкий зазор.
+- **F9. Вертикальный ритм:** контент на ~152px выше, зазоры между секциями отличаются
+  (pipeline-head y 434 vs 400 и т.д.) — подровнять паддинги под реф.
+- **F10. Внутренние отступы preview-панели** (Hide intermediate x 907 vs 1218) — паддинг панели.
+
+## Темы (отложено — F1-F4)
+
+Серый фон `#EEF1F4` — это **светлая** тема. Уточнение по F1: наш токен `--background`
+уже равен `#EEF1F4` (совпадает с рефом); видимое отличие — только blueprint-сетка
+поверх фона, а не «белый vs серый». То есть F1 = «сетка против плоского», не цвет фона.
+
+Перед тем как сверять цвета бейджей/тайлов/раскладок (F2-F4), нужно сначала
+зафиксировать палитры light/dark как единый источник токенов. Сейчас они есть в
+`web/src/lib/styles/design2.css` (`:root` + `[data-theme="dark"]`), но не сверены с рефом.
+
+**Как проверить темы в refs-html:**
+
+- Открыть `refs-html/demo.html` (и соседние `gradient.html`, `background-remover.html`)
+  через Playwright/браузер.
+- Нажать theme-toggle в топбаре рефа (иконка луны/солнца) — переключает тему
+  (скорее всего меняет атрибут/класс на `<html>` или `.page` и переопределяет CSS-переменные).
+- Снять скриншоты светлой и тёмной темы, замерить computed-стиль `:root` переменных
+  рефа (через `getComputedStyle(document.documentElement).getPropertyValue('--...')`)
+  и сопоставить с нашими токенами в `design2.css`.
+- Рефы, похоже, не доделаны по тёмной теме — зафиксировать, какие именно токены
+  меняются и где расхождения. На основе этого выровнять наши токены, затем вернуться
+  к F2 (бейдж типа), F3 (тайлы), F4 (раскладка preview-stack).
+
+Решение по F1-F4 принимается только после сверки токенов светлой/тёмной темы с рефом.
+
+**Состояние тем (уточнение):** наша dark-тема реализована в `design2.css`
+(`[data-theme="dark"]`), но пока подключена только на preview-маршрутах (старые
+страницы грузят `app.css`). Этого достаточно для сверки: токены, отличные от light,
+соберём по всем `refs-html/*.html` (не только `demo.html`), остальные токены
+не меняются. Light-токены уже совпадают с рефом (`--background`, `--panel`,
+`--foreground`, `--muted`, `--line`, `--blue` равны).
+
+## План действий (предлагаю)
+
+1. Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
+2. По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как сигнатуру нового дизайна).
+3. F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с рефом».
+4. Переснять скриншоты и перепроверить пиксель-дифф.