docs: update plans and refs audit

docs/archive/demo-fidelity.md

@@ -1,5 +1,11 @@
 # Demo fidelity: /preview/demo vs refs-html/demo.html
 
+> ⚠️ **УТРАТИЛ АКТУАЛЬНОСТЬ — архивная копия.** Актуальный план фикса верности и
+> текущий статус пунктов B/F — в `docs/plan-design-fix.md` (Этап 1). Аудит верности
+> теперь автоматизирован (`pnpm audit` → `web/audit/audit-report.md`; пиксель-дифф не
+> используется); темы в `refs-html` переключаются (скрипт инжектится в
+> `scripts/extract-static.mjs`). Ниже — исходный текст на момент написания.
+
 Метод: Playwright, viewport 1440×900, скриншоты обеих страниц + замер вычисленных
 стилей ключевых элементов + пиксель-дифф (без чтения картинки моделью).
 Пиксель-дифф: **24.9%** (наш скролл 1731px, реф 1579px). Зоны различий размазаны
@@ -88,6 +94,9 @@ flex/grid раскладок против статичного мока); виз
 
 ## План действий (предлагаю)
 
+> Актуальный пошаговый план фикса вынесен в `docs/plan-design-fix.md`
+> (Этапы 0–1: рефакторинг + верность). Ниже — исходные наброски.
+
 1. Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
 2. По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как сигнатуру нового дизайна).
 3. F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с рефом».

docs/plan-design-fix.md

@@ -0,0 +1,131 @@
+# План: доводка дизайна до верности (фикс по refs)
+
+> Статус: к выполнению. Ветка `feat/redesign`.
+> Источники: `docs/archive/demo-fidelity.md` (архивная копия старого отчёта по
+> верности, неактуальна), `docs/plan-redesign.md` (общая стратегия, фазы 1–4
+> выполнены до C16). Актуальный аудит верности — `pnpm refs-audit` (Playwright) →
+> `web/audit/audit-report.md`.
+
+## Контекст
+
+- Новый дизайн собран параллельно под `preview/*` (см. `plan-redesign.md`),
+  старый сайт `(old)/` не трогаем до C17.
+- `refs/` и `refs-html/` приведены к консистентному виду — текущая «правда по
+  пикселям». Механизм синхронизации ref→код не создаётся (см. §9 plan-redesign).
+- Аудит верности автоматизирован: `pnpm refs-audit` (Playwright, 1440×900) пишет
+  `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-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-audit` (Playwright, 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-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-audit`.

docs/plan-redesign.md

@@ -1,6 +1,8 @@
 # План: переезд на новый дизайн (refs) — параллельная сборка
 
-> Статус: план к выполнению.
+> Статус: план к выполнению. Шаги 5–6 (C17–C21) **отложены** до вывода нового
+> дизайна на приемлемый уровень верности — см. `docs/plan-design-fix.md`
+> (Этапы 0–1: рефакторинг + верность по `demo-fidelity.md`).
 >
 > Источники: `refs/` — Next/React-референс (правда по пикселям и интерактиву),
 > `refs-html/` — статические HTML-снимки для быстрого просмотра в браузере.
@@ -341,7 +343,11 @@ src/routes/preview/tools/[id]/+page.svelte
       (доказательство отсутствия регресса). Фиксы по результатам — отдельными
       мелкими коммитами.
 
-### Шаг 5. Сделать новый дизайн основным
+### Шаг 5. Сделать новый дизайн основным — ОТЛОЖЕНО
+
+> Выполняется только после Этапов 0–1 из `docs/plan-design-fix.md` (новый
+> дизайн доведён до приемлемой верности). Пока не трогаем `preview/*` и
+> `(old)/`.
 
 - [ ] **[C17]** Перенести `preview/*` → реальные маршруты (move), удалить
       `(old)/`, корневой `+layout.svelte` импортирует `design2.css` + новый shell.

web/audit/audit-report.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-28T07:02:47.972Z",
+  "generatedAt": "2026-08-28T11:41:19.954Z",
   "ours": "http://127.0.0.1:5179/preview/demo",
   "ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
   "tokenDiffs": {
@@ -165,39 +165,9 @@
       "tag": "button",
       "text": "RU",
       "deltas": {
-        "color": {
-          "ours": "rgb(255, 255, 255)",
-          "ref": "rgb(238, 241, 244)"
-        },
-        "backgroundColor": {
-          "ours": "rgb(23, 105, 210)",
-          "ref": "rgb(23, 33, 43)"
-        },
-        "padding": {
-          "ours": "0px 11.2px",
-          "ref": "6px 9px"
-        },
         "letterSpacing": {
           "ours": "0.6px",
           "ref": "normal"
-        },
-        "display": {
-          "ours": "flex",
-          "ref": "block"
-        },
-        "rect": {
-          "ours": {
-            "x": 1309,
-            "y": 17,
-            "w": 36,
-            "h": 30
-          },
-          "ref": {
-            "x": 1323,
-            "y": 20,
-            "w": 29,
-            "h": 24
-          }
         }
       }
     },
@@ -206,24 +176,16 @@
       "tag": "button",
       "text": "EN",
       "deltas": {
-        "padding": {
-          "ours": "0px 11.2px",
-          "ref": "6px 9px"
-        },
         "letterSpacing": {
           "ours": "0.6px",
           "ref": "normal"
         },
-        "display": {
-          "ours": "flex",
-          "ref": "block"
-        },
         "rect": {
           "ours": {
-            "x": 1345,
+            "x": 1349,
-            "y": 17,
+            "y": 19,
-            "w": 37,
+            "w": 32,
-            "h": 30
+            "h": 25
           },
           "ref": {
             "x": 1352,
@@ -239,9 +201,33 @@
       "tag": "span",
       "text": "/",
       "deltas": {
+        "fontFamily": {
+          "ours": "\"IBM Plex Mono\", monospace",
+          "ref": "\"IBM Plex Sans\", sans-serif"
+        },
+        "fontSize": {
+          "ours": "10px",
+          "ref": "16px"
+        },
         "color": {
           "ours": "rgb(23, 105, 210)",
-          "ref": "rgb(109, 120, 131)"
+          "ref": "rgb(23, 33, 43)"
+        },
+        "margin": {
+          "ours": "0px 7px",
+          "ref": "0px"
+        },
+        "letterSpacing": {
+          "ours": "1.2px",
+          "ref": "normal"
+        },
+        "lineHeight": {
+          "ours": "normal",
+          "ref": "24px"
+        },
+        "display": {
+          "ours": "inline",
+          "ref": "block"
         },
         "rect": {
           "ours": {
@@ -251,10 +237,10 @@
             "h": 13
           },
           "ref": {
-            "x": 165,
+            "x": 1348,
-            "y": 124,
+            "y": 20,
-            "w": 13,
+            "w": 4,
-            "h": 12
+            "h": 24
           }
         }
       }
@@ -1380,6 +1366,7 @@
     }
   ],
   "onlyOurs": [
+    "/ DEMO",
     "+ Add tool",
     "AUTO",
     "Gradient color",
@@ -1396,7 +1383,11 @@
     "18px"
   ],
   "onlyRef": [
-    "/ DEMO",
+    "/ \n            WORKSPACE",
+    "Workspace",
+    "Catalog",
+    "Gradient",
+    "Background remover",
     "135\n                        °",
     "100%",
     "2\n                        px",
@@ -1408,7 +1399,7 @@
     "tokenLight": 10,
     "tokenDark": 16,
     "elements": 47,
-    "onlyOurs": 14,
+    "onlyOurs": 15,
-    "onlyRef": 7
+    "onlyRef": 11
   }
 }

web/audit/audit-report.md

@@ -2,14 +2,14 @@
 
 vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
 
-_2026-08-28T07:02:47.972Z_
+_2026-08-28T11:41:19.954Z_
 
 ## Сводка
 
 - Токены light: **10** расх.
 - Токены dark: **16** расх.
 - Элементы (стиль/геометрия): **47** расх.
-- Только у нас: 14, только в рефе: 7
+- Только у нас: 15, только в рефе: 11
 
 ## Токены — Light
 
@@ -49,13 +49,15 @@ _2026-08-28T07:02:47.972Z_
 
 ## Расхождения элементов (топ 47)
 
-### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
-    - **color**: `rgb(255, 255, 255)` → `rgb(238, 241, 244)`
+    - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif`
-    - **backgroundColor**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
+    - **fontSize**: `10px` → `16px`
-    - **padding**: `0px 11.2px` → `6px 9px`
+    - **color**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
-    - **letterSpacing**: `0.6px` → `normal`
+    - **margin**: `0px 7px` → `0px`
-    - **display**: `flex` → `block`
+    - **letterSpacing**: `1.2px` → `normal`
-    - **rect**: `1309,17 36x30` → `1323,20 29x24`
+    - **lineHeight**: `normal` → `24px`
+    - **display**: `inline` → `block`
+    - **rect**: `173,124 7x13` → `1348,20 4x24`
 
 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "COLOR"
     - **fontWeight**: `500` → `400`
@@ -72,12 +74,6 @@ _2026-08-28T07:02:47.972Z_
     - **display**: `inline` → `block`
     - **rect**: `1090,240 36x13` → `1246,291 79x13`
 
-### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
-    - **padding**: `0px 11.2px` → `6px 9px`
-    - **letterSpacing**: `0.6px` → `normal`
-    - **display**: `flex` → `block`
-    - **rect**: `1345,17 37x30` → `1352,20 29x24`
-
 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100"
     - **padding**: `0px 11.2px` → `0px`
     - **letterSpacing**: `0.6px` → `normal`
@@ -148,9 +144,9 @@ _2026-08-28T07:02:47.972Z_
     - **letterSpacing**: `0.8px` → `normal`
     - **rect**: `806,1185 262x13` → `808,1378 59x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
-    - **color**: `rgb(23, 105, 210)` → `rgb(109, 120, 131)`
+    - **letterSpacing**: `0.6px` → `normal`
-    - **rect**: `173,124 7x13` → `165,124 13x12`
+    - **rect**: `1349,19 32x25` → `1352,20 29x24`
 
 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>h1:nth-child(1)` — "Build your image pipeline."
     - **lineHeight**: `normal` → `57.6px`
@@ -211,6 +207,9 @@ _2026-08-28T07:02:47.972Z_
 ### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
     - **rect**: `98,23 118x18` → `98,23 108x17`
 
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
+    - **letterSpacing**: `0.6px` → `normal`
+
 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(2)` — "Chain simple tools together. Every chang"
     - **rect**: `58,321 474x51` → `58,285 482x51`
 
@@ -255,6 +254,7 @@ _2026-08-28T07:02:47.972Z_
 
 ## Только у нас (структурно)
 
+- `/ DEMO`
 - `+ Add tool`
 - `AUTO`
 - `Gradient color`
@@ -272,7 +272,12 @@ _2026-08-28T07:02:47.972Z_
 
 ## Только в рефе (структурно)
 
-- `/ DEMO`
+- `/ 
+            WORKSPACE`
+- `Workspace`
+- `Catalog`
+- `Gradient`
+- `Background remover`
 - `135
                         °`
 - `100%`

web/package.json

@@ -13,7 +13,7 @@
 		"test": "vitest run",
 		"format": "prettier --write .",
 		"lint": "eslint .",
-		"audit": "node scripts/audit.mjs"
+		"refs-audit": "node scripts/audit.mjs"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",