@vernikr/size-report 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -18,6 +18,88 @@
 где за основу взяты `fixtures/synthetic/config.json`, метрики — `raw`, `min`, `tok`, а
 способ минификации — `strip` или `esbuild`.
 
+## 2.1.0 — 2026-09-15
+
+Вид страницы на десктопе: числам — вся оставшаяся высота, панели — своя прокрутка.
+
+- **Под таблицей была пустота, а список файлов задавал высоту страницы.** На широком
+  экране оба столбца шли каждый со своей высотой (`align-items: start`), поэтому
+  высота страницы равнялась тому, что вышло у панели: замер до правки при окне
+  1440×900 — панель 883 px, страница 1097 при окне 900, под таблицей 195 px пустоты,
+  а нижние файлы дерева — за нижним краем окна (список при этом ещё и резался своим
+  потолком в 62vh). Теперь страница целиком укладывается в окно: строки сетки
+  названы по предмету, тянется одна рабочая — таблица берёт всю оставшуюся высоту
+  (1440×900: 1060 × 735 вместо 602), панель — не больше неё и прокручивается сама
+  (содержимое 804 при высоте 785). Список файлов на широком экране больше не режется:
+  все 23 подписи дерева видны сразу.
+- **Клик по галочке возвращал список к началу.** Панель рисуется заново, и вместе с
+  ней терялось место, до которого докурили: до нижних файлов дерева было не
+  добраться. Прокрутка панели и списка теперь часть вида — запоминается перед
+  пересборкой и ставится обратно (подтверждено в Chrome: при окне 1440×500
+  `panel.scrollTop` = 421 до клика и 421 после).
+- **Строка категорий липнет** к верху панели, пока листается дерево. Чтобы под
+  липкой строкой не читались проезжающие файлы, верхний отступ панели переехал в
+  первое поле: прокручиваемое видно и в отступе прокрутки (в полосе 13 px читались
+  `parity/` и `data.json` — теперь там сама строка).
+- **Расшифровка под деревом убрана**, а шрифт подписей файлов стал как у чисел
+  таблицы (12,5 px): расшифровка отодвигала числа, а её смысл стоит у того, что
+  объясняет — цвет дельты называет знак числа, способ и точность стоят под
+  переключателями метрик, знак пропуска — в подсказке клетки.
+- **Граница широкой раскладки — 899 px.** При ровно 900 px обе половины оформления
+  применялись к одной странице, и от «узкой» в «широкой» оставался потолок высоты
+  таблицы: те же пустые 179 px под ней на одном размере окна.
+
+### Что изменится в числах
+
+**Ничего.** Правка — про вид страницы и прокрутку; движок тот же, что у 2.0.2, а
+страница получает от него готовые числа.
+
+| Файл | raw | min со strip | min с esbuild | tok |
+|---|---|---|---|---|
+| code.js | 735 | 276 | 185 | 168 |
+| modern.js | 246 | 51 | 45 | 44 |
+| config.mjs | 172 | 45 | 40 | 40 |
+| заметки.md | 306 | 303 | 303 | 53 |
+| crlf.txt | 63 | 60 | 60 | 10 |
+| package.json | 87 | 69 | 69 | 34 |
+| style.css | 156 | 55 | 43 | 38 |
+| table.toml | 300 | 299 | 299 | 52 |
+| empty.js | 0 | 0 | 0 | 0 |
+| WORKLOG.md | 446 | 439 | 439 | 101 |
+| **ИТОГО** | **2511** | **1597** | **1483** | **540** |
+
+## 2.0.2 — 2026-09-15
+
+Инструкция перестала обещать лишний ручной шаг и назвала платформенную разницу.
+
+- **README учил ставить хук руками.** В §6 осталась строка прежнего выпуска — «хуки
+  ставятся только командой `install-hook`, ни один обычный запуск их не создаёт», — а с
+  2.0.0 постановка своя (`bin/postinstall.js` и первый запуск). Текст теперь говорит то,
+  что делает код, и называет единственное исключение: pnpm 10 не исполняет скрипты
+  зависимостей («Ignored build scripts») — там хук ставит первый запуск, либо сборка
+  разрешается `pnpm.onlyBuiltDependencies` в манифесте потребителя.
+- **Названа одна ручная ступень, которая была невидимой.** Первый отчёт создаётся, но не
+  коммитится (новый файл в чужой истории — решение человека): это сказано в §6 и в
+  шаблоне `templates/README.md`, дальше отчёт обновляется отдельными коммитами сам.
+
+### Что изменится в числах
+
+**Ничего.** Правка — только текст инструкции; движок тот же, что у 2.0.1.
+
+| Файл | raw | min со strip | min с esbuild | tok |
+|---|---|---|---|---|
+| code.js | 735 | 276 | 185 | 168 |
+| modern.js | 246 | 51 | 45 | 44 |
+| config.mjs | 172 | 45 | 40 | 40 |
+| заметки.md | 306 | 303 | 303 | 53 |
+| crlf.txt | 63 | 60 | 60 | 10 |
+| package.json | 87 | 69 | 69 | 34 |
+| style.css | 156 | 55 | 43 | 38 |
+| table.toml | 300 | 299 | 299 | 52 |
+| empty.js | 0 | 0 | 0 | 0 |
+| WORKLOG.md | 446 | 439 | 439 | 101 |
+| **ИТОГО** | **2511** | **1597** | **1483** | **540** |
+
 ## 2.0.1 — 2026-09-15
 
 Место отчёта в свежем проекте: `docs/size-report.html`, и каталог создаётся сам.

package/README.md

@@ -10,7 +10,7 @@
 
 ## Статус
 
-**Выпуск 2.0.1 (2026-09-15).** Инструмент живёт отдельным пакетом: имя в
+**Выпуск 2.1.0 (2026-09-15).** Инструмент живёт отдельным пакетом: имя в
 реестре — `@vernikr/size-report` (публикуется тегом из CI, без секрета). Настроек
 проект может не заводить вовсе: без файла инструмент выводит их из самого проекта и
 говорит об этом строкой, а `--init` закрепляет выведенное файлом (чем этот шаг
@@ -22,7 +22,7 @@
 в числах»:
 таблица чисел в нём не пересказ, а замер на фикстуре, который сверяется с живым
 прогоном (`test/changelog.test.js`). Числа этим выпуском не меняются — правки
-лежат в ответах инструмента человеку; `schema: 1` данных, замороженная 1.0.0,
+лежат в виде страницы отчёта на десктопе; `schema: 1` данных, замороженная 1.0.0,
 остаётся той же.
 
 **Шаг 1 плана пройден — перенос без изменения поведения.** Команда —
@@ -219,10 +219,10 @@
 
 | Прогон | Команда | Проверок |
 |---|---|---|
-| Быстрый — каждая правка | `pnpm test` | **65 из 169** |
-| Полный — выкладка и CI | `pnpm test:all` | **169** |
+| Быстрый — каждая правка | `pnpm test` | **66 из 170** |
+| Полный — выкладка и CI | `pnpm test:all` | **170** |
 
-Ни одна проверка не потеряна и не ослаблена: полный прогон запускает все 169 теми же
+Ни одна проверка не потеряна и не ослаблена: полный прогон запускает все 170 теми же
 файлами, а быстрый берёт их часть. Умолчание — полный: файл становится быстрым только
 явно и с причиной, поэтому новое дорогое не может тихо уехать в быстрый. Стерегут это
 объявление `test/suites.test.js` (полнота классификации и причина у каждого файла) и
@@ -309,8 +309,8 @@ Trusted Publisher в настройках пакета), права **publish**
 один набор стилей таблицы на оба вывода (`src/table.css`) — странице достались
 липкие шапка и колонка коммита, которые раньше были только у статического
 артефакта, и она больше не уезжает вбок в узком окне (до правки — 1518px при
-окне 620). Добавились легенда с цветами дельт, состояния «нечего показать»
-(сняты все метрики или все файлы) и переключатели, доступные с клавиатуры. Цвет
+окне 620). Добавились состояния «нечего показать» (сняты все метрики или все
+файлы) и переключатели, доступные с клавиатуры. Цвет
 deльт задан один раз и по артефакту: рост зелёный, спад красный — смена это две
 строки в `src/table.css` плюс пересборка эталона артефакта, больше цвета нигде нет.
 
@@ -319,20 +319,29 @@ deльт задан один раз и по артефакту: рост зел
 папки три состояния — все её файлы включены, часть, ни одного, — и переключатель
 папки ведёт за собой всё поддерево; рядом стоит число файлов. Своего состояния у
 папки и у быстрой кнопки категории нет: обе переставляют галочки файлов, поэтому
-дерево, кнопки и таблица не могут разойтись. Список файлов длиной больше экрана
-прокручивается внутри панели, а не выталкивает таблицу: на живой истории
-(87 строк × 12 колонок) дерево занимает 558 px из 883 у панели.
-
-**На широком экране панель стоит слева от таблицы** (от 900 px, `src/page/app.css`).
-Это не украшение: на десктопе бокового места много, а вертикального мало —
-переключатели, дерево и числа видны одновременно, и прокрутка нижних строк не
-уводит управление за верх экрана. Раскладка сделана сеткой на `body`: обёртки в
-разметке нет, потому что страница собирается вклейкой глав и форма страницы должна
-жить в одном месте. Порог один с адаптациями — промежутка без правил между «широко»
-и «узко» нет. Измерено в настоящем Chrome на живой истории: при окне 1440×900
-панель — колонка 300 px слева, таблица начинается на 346-м и на той же высоте
-(103), её собственное окно 1060 × 602; при 1024 — те же 300 и 651; при 899
-раскладка снимается и столбцы снова идут друг под другом (панель 79, таблица 557).
+дерево, кнопки и таблица не могут разойтись. Список файлов длиннее панели
+прокручивается, а не выталкивает таблицу, — и прокрутка эта одна: на широком
+экране листается панель целиком (дерево в ней видно целиком: 23 подписи из 23 при
+окне 1440×900), а на узком — сам список, потому что там панель растёт вместе со
+страницей.
+
+**На широком экране панель стоит слева от таблицы и не вытесняет числа**
+(от 900 px, `src/page/app.css`). Это не украшение: на десктопе бокового места
+много, а вертикального мало — переключатели, дерево и числа видны одновременно, и
+ни прокрутка чисел, ни прокрутка дерева не уводит управление за верх экрана.
+Раскладка сделана сеткой на `body`: обёртки в разметке нет, потому что страница
+собирается вклейкой глав и форма страницы должна жить в одном месте. Строк у сетки
+пять и они названы по предмету (заголовок, сообщение о ссылке, работа, сообщение
+пустоты, подпись), тянется только рабочая: таблица берёт всю оставшуюся высоту, а
+панель — не больше неё. Цена прежнего поведения была видна глазом: высоту страницы
+задавал список файлов, и под таблицей оставалась пустота (замер до правки при окне
+1440×900: панель 883 px, страница 1097 при окне 900, под таблицей 195 px).
+Измерено в настоящем Chrome после правки: при 1440×900 страница ровно в окно
+(900), панель — колонка 300 px слева (103…888, содержимое 804 — дальше она
+прокручивается), таблица 1060 × 735 на том же верху 103 (до правки 1060 × 602), а
+под ней остаётся только подпись под таблицей (62 px); при 1024×800 — те же 300 и
+таблица 651 × 620; при 899 раскладка снимается и столбцы снова идут друг под
+другом (панель 871, таблица 871 × 442, страница прокручивается — 972).
 Стрежет это проверка на числах таблицы, а не на разметке: выключение папки убирает
 ровно её колонки и ровно её объём из итога (`test/contract.test.js`). Проверено в
 настоящем Chrome: 9 папок до трёх уровней вложенности (`.github/workflows`,
@@ -340,6 +349,29 @@ deльт задан один раз и по артефакту: рост зел
 ни одной ошибки в консоли, `docs/6` после выключения одного своего файла показала
 третье состояние, а после выключения целиком — 52 колонки → 40.
 
+**Галочка не отбирает ни прокрутку, ни место у чисел** (правка вида страницы
+2026-09-15, `src/page/app.js`, `src/page/app.css`). Панель рисуется заново после
+каждого переключения, и вместе с ней терялось место, до которого читатель
+долистал: клик по галочке возвращал список к началу, а до нижних файлов дерева так
+и не добирались. Теперь прокрутка панели и списка — часть вида, как галочки: она
+запоминается перед пересборкой и ставится обратно после (фокус возвращается без
+прокрутки — `preventScroll`), а поле «Файлы» больше не режет дерево своим
+потолком в 62vh. Строка категорий («Код», «Документация», «Служебные») в широкой
+раскладке липнет к верху панели — фон у неё тот же, что у панели, поэтому под ней
+не читаются проезжающие файлы; верхний отступ панели для этого переехал в первое
+поле (прокручиваемое видно и в отступе прокрутки — замер: до него в полосе 13 px
+читались «parity/» и «data.json», после — сама строка). Шрифт подписей файлов
+стал как у чисел таблицы (12,5 px), а расшифровка под деревом убрана: она
+отодвигала числа, а её смысл и так стоит у того, что объясняет (знак числа называет
+цвет дельты, способ и точность — под переключателями метрик, знак пропуска —
+в подсказке клетки). Заодно граница широкой раскладки стала 899 px: при ровно
+900 px обе половины оформления применялись к одной странице, и от «узкой» в
+«широкой» оставался потолок высоты таблицы — те же пустые 179 px под ней на одном
+единственном размере окна. Проверено в настоящем Chrome на этой странице: при
+окне 1440×500 (панель прокручивается) и прокрутке до последнего файла
+`panel.scrollTop` = 421 до клика и 421 после, строка категорий стоит на 1 px от
+верхнего края панели, а под ней на всех полосах прокрутки — только её же подписи.
+
 **Панель помнит выбор читателя** (`REFACTOR.md` R-2.5). Запись хранится в памяти
 браузера, и она привязана к «паспорту отчёта» — имя инструмента, схема данных,
 путь артефакта, заголовок и метки колонок; в ключ входит отпечаток паспорта,
@@ -518,12 +550,12 @@ deльт задан один раз и по артефакту: рост зел
 | `src/derived.js` | Общий расчёт отчёта: итоги, дельты, клетка, подпись коммита — один на движок и программу страницы |
 | `src/css.js` | Чтение оформления с диска: какие наборы стилей есть и какая у них роль |
 | `src/table.css` | Таблица отчёта: геометрия клеток, липкие шапка и колонка, цвет дельт |
-| `src/page/app.css` | Оформление страницы сверх общей части: панель с деревом файлов (на широком экране — колонка слева от таблицы), состояния пустоты, узкое окно |
+| `src/page/app.css` | Оформление страницы сверх общей части: панель с деревом файлов и липкой строкой категорий (на широком экране — колонка слева, страница в окно), состояния пустоты, узкое окно |
 | `src/page/state.js` | Состояние страницы: данные отчёта, вид галочек, паспорт записи, память браузера и обмен ссылкой — глава программы страницы |
 | `src/page/dom.js` | Узлы страницы: мелкие помощники разметки (`appEl`, `appBox`) — одни на панель и таблицу |
-| `src/page/panel.js` | Панель выбора: галочки метрик и файлов, категории, дерево путей, легенда; перерисовку просит у главы сборки |
+| `src/page/panel.js` | Панель выбора: галочки метрик и файлов, категории, дерево путей; перерисовку просит у главы сборки |
 | `src/page/table.js` | Таблица страницы: клетка, подпись коммита, шапка и состояния пустоты — разметка поверх общего расчёта |
-| `src/page/app.js` | Сборка и запуск страницы: таблица целиком, перерисовка по выбору читателя, первая отрисовка и смена якоря; вклеивается в собранную страницу
+| `src/page/app.js` | Сборка и запуск страницы: таблица целиком, перерисовка по выбору читателя (с возвратом фокуса и прокрутки), первая отрисовка и смена якоря; вклеивается в собранную страницу
 | `src/page/build.js` | Сборка страницы: данные, оформление и программа в одном файле без внешних ссылок |
 | `src/git.js` | Единственная граница вызова git: закрепления настроек, блобы пачкой, история, сверка с диском |
 | `src/strip.js` | Снятие балласта: какая форма к какому файлу (расширение, стратегия) и что считать точным числом — вход разбора форм |
@@ -643,7 +675,7 @@ pnpm add -D @vernikr/size-report
 ```
 
 Пакет **опубликован в реестре**, и публично: `npm view @vernikr/size-report
-version` отвечает `2.0.1`, `npm access get status @vernikr/size-report` — `public`,
+version` отвечает `2.1.0`, `npm access get status @vernikr/size-report` — `public`,
 а анонимный запрос тарболла — код 200. `npm i -D` и `yarn add -D` принимают то же
 имя; ни ключа, ни ссылки на репозиторий не нужно.
 
@@ -651,11 +683,11 @@ version` отвечает `2.0.1`, `npm access get status @vernikr/size-report`
 реестра, но остаётся привязанной к ревизии:
 
 ```bash
-pnpm add -D github:vernikr/size-report#v2.0.1
+pnpm add -D github:vernikr/size-report#v2.1.0
 ```
 
 Без сети (или если тянуть из codeload нечем) — тарболл: `pnpm pack` в клоне
-пакета, затем `pnpm add -D ./vernikr-size-report-2.0.1.tgz`.
+пакета, затем `pnpm add -D ./vernikr-size-report-2.1.0.tgz`.
 
 **Почему тег, а не sha.** Короткий sha pnpm разрешает только через видимые рефы, а
 `git ls-remote` отдаёт одни верхушки веток: пока ревизия — верхушка, короткий sha
@@ -663,7 +695,7 @@ pnpm add -D github:vernikr/size-report#v2.0.1
 <sha> to a commit`. Это не рассуждение, а проба: короткий пин `6530237` ставился,
 пока `main` стоял на нём, и перестал — на следующем же коммите, а тот же sha
 целиком поставился. Имя ветки (`#main`) или тег принимаются оба, но ветка —
-движущаяся цель, а тег постоянен: этот выпуск стоит на теге `v2.0.1`, он же и в
+движущаяся цель, а тег постоянен: этот выпуск стоит на теге `v2.1.0`, он же и в
 примере (сорок знаков тоже годятся, но их придётся брать глазами из истории).
 
 Ревизия в примере — не украшение, а часть утверждения: она закреплена за тем, что
@@ -836,18 +868,26 @@ pnpm exec size doctor     # 0 — делать нечего; иначе перв
 | 4 | нет датчика | `minify.engine: "esbuild"`, а минификатора нет: числа получены упрощением. Отчёт собран, причина и починка — в тексте; если при этом таблица расходится с историей, код остаётся **1** (нарушение старше приближения), а заметка о другом счёте печатается рядом |
 | 5 | внутренняя ошибка | это дефект инструмента: текст нужен нам, см. «Ловушки» ниже |
 
-### 6. Отчёт обновляется сам после коммита (по желанию)
+### 6. Отчёт обновляется сам после коммита
 
 ```bash
 pnpm exec size install-hook     # поставить post-commit и post-merge
 pnpm exec size uninstall-hook   # снять и вернуть проект к прежнему поведению
 ```
 
-Хуки ставятся **только этой командой**: ни один обычный запуск их не создаёт и
-проект до неё не меняется (файлы живут в `.git`, `git status` их не видит). После
-каждого коммита и слияния отчёт пересобирается, а если он лежит в git — ложится
-отдельным коммитом с подписью `chore(report): отчёт пересобран после <sha>`.
-Коммитится только путь отчёта: чужой индекс и незакоммиченная работа не тронуты.
+Хуки ставятся **сами**, и это единственное, что проект замечает от установки пакета:
+после `npm i` — скриптом установки, у pnpm 10 — первым запуском инструмента (pnpm не
+исполняет скрипты зависимостей: «Ignored build scripts»; разрешить можно
+`pnpm.onlyBuiltDependencies: ["@vernikr/size-report"]` в своём манифесте). Ставшие
+файлы живут в `.git`, `git status` их не видит, снимаются командой выше. После
+каждого коммита и слияния отчёт пересобирается: каталог `docs` и файл `size-report.html`
+создаются, если их ещё нет, а **отслеживаемый** в git отчёт ложится отдельным коммитом
+с подписью `chore(report): отчёт пересобран после <sha>`. Коммитится только путь отчёта:
+чужой индекс и незакоммиченная работа не тронуты.
+
+Первый отчёт — исключение из «сам»: файл создан, но не закоммичен, потому что новый
+файл в чужой истории — решение человека, а не услуга. Один `git add docs/size-report.html`
+(или обычный `git add -A`, если отчёт нужен в проекте) — и дальше он едет коммитами сам.
 Слияние обрабатывается тем же входом, что обычный коммит, но другим файлом —
 `post-merge`: git создаёт коммит слияния сам и `post-commit` при этом не зовёт.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vernikr/size-report",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -66,7 +66,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.0.0",
+    "@vernikr/size-report": "2.0.2",
     "c8": "10",
     "dependency-cruiser": "17",
     "eslint": "^9.18.0",

package/src/css.js

@@ -10,7 +10,7 @@ import fs from 'node:fs';
  *   1. `table.css` — **таблица**: геометрия клеток, липкие шапка и колонка коммита,
  *      подпись коммита, цвета дельт.
  *   2. `page/app.css` — оформление страницы **сверх таблицы**: холст, панель
- *      выбора, легенда, состояния пустоты и адаптации под узкое окно.
+ *      выбора, состояния пустоты и адаптации под узкое окно.
  *
  * Соглашение о цвете дельт задано один раз — в `table.css`: `.up` зелёный, `.down`
  * красный (рост — «больше логики», а не тревога). Второго места у него нет

package/src/locales.js

@@ -21,11 +21,6 @@ export const LOCALES = {
       dir: 'все файлы папки {name} ({n})',
       all: 'все',
       sub: '{tool} {version} · {artifact}',
-      legendUp: 'рост',
-      legendDown: 'спад',
-      legendSame: 'пустая клетка — не менялось',
-      legendMiss: '«—» — файла в этой ревизии ещё нет',
-      legendApprox: 'подчёркнутое число — приближённое: способ назван под метриками',
       /* Слова точности: подпись метрики говорит про худшее в колонке, а клетки —
        * про своё число. Одно слово на подпись и на подсказку клетки, чтобы не
        * разошлось и не звучало по-разному. */
@@ -77,11 +72,6 @@ export const LOCALES = {
       dir: 'all files in “{name}” ({n})',
       all: 'all',
       sub: '{tool} {version} · {artifact}',
-      legendUp: 'growth',
-      legendDown: 'fall',
-      legendSame: 'an empty cell — no change',
-      legendMiss: '“—” — the file does not exist in that revision yet',
-      legendApprox: 'an underlined number is approximate: its way of measuring is named under the metrics',
       exact: 'an exact number',
       approximate: 'an approximation',
       approximateCell: 'an approximate number: ',

package/src/page/app.css

@@ -1,5 +1,5 @@
 /* Оформление страницы отчёта — то, что стоит сверх общей таблицы (`src/table.css`):
- * холст и типографика, панель выбора с легендой, состояния пустоты и адаптации под
+ * холст и типографика, панель выбора, состояния пустоты и адаптации под
  * узкое окно. Чисел и цвета дельт здесь нет намеренно: их задаёт общая часть, и она
  * же попадает в статический артефакт, поэтому двух наборов одной таблицы не
  * бывает. Страница открывается с диска, без сервера и без сети, поэтому ни одной
@@ -64,8 +64,13 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 /* Дерево файлов: вложенность показана отступом и линией уровня, папка — такой же
  * переключатель, как файл, только его галочка отвечает за всё поддерево, а число
  * рядом говорит, за сколько файлов. Список файлов длиннее окна, поэтому панель
- * прокручивается сама: иначе управление вытолкнуло бы таблицу за экран. */
-.panel .files { max-height: min(30vh, 320px); overflow: auto; }
+ * прокручивается сама: иначе управление вытолкнуло бы таблицу за экран.
+ *
+ * На узком экране прокручивается сам список (панель там растёт вместе со
+ * страницей), на широком — панель целиком (ниже): прокрутка одна, и она у того,
+ * кто и вправду ограничен окном. Шрифт файлов — тот же, что у чисел таблицы:
+ * подписей в списке много и они короткие, а рядом с ними стоит таблица. */
+.panel .files { max-height: min(30vh, 320px); overflow: auto; font-size: 12.5px; }
 .panel .tree { margin: 0; padding: 0; list-style: none; }
 .panel .tree .tree { margin-left: 14px; padding-left: 9px; border-left: 1px solid var(--line); }
 .panel .tree .box { padding: 1px 7px 1px 5px; }
@@ -87,25 +92,12 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 .box input { margin: 0; accent-color: AccentColor; }
 .box.all { font-weight: 600; }
 
-/* Легенда: те же классы цвета, что и в клетках (.up/.down из общей части), поэтому
- * образец в легенде не может разойтись с цветом числа. */
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3px 18px;
-  margin: 10px 0 0;
-  padding: 0;
-  list-style: none;
-  color: var(--muted);
-  font-size: 12px;
-}
-.legend li { display: inline-flex; gap: 6px; align-items: center; }
-.swatch { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
-.swatch.same { background: none; border: 1px dashed currentColor; }
-.swatch.miss { background: none; border: 1px solid currentColor; border-radius: 0; }
-.swatch.approx { background: none; border-bottom: 2px dotted currentColor; }
-
-/* Приближённое число помечено пунктиром, а не цветом: цвет в таблице занят дельтой
+/* Расшифровки под деревом файлов нет намеренно: под списком она отодвигала
+ * числа, а её содержимое и так стоит рядом с тем, что объясняет, — цвет дельт
+ * называет сам знак числа, точность стоит под переключателями метрик, а знак
+ * «файла ещё нет» — в подсказке клетки.
+ *
+ * Приближённое число помечено пунктиром, а не цветом: цвет в таблице занят дельтой
  * (рост и спад), и второй смысл на том же признаке читался бы как первый. */
 #grid td.approx { text-decoration: underline dotted; text-underline-offset: 2.5px; }
 
@@ -154,39 +146,76 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
  * сдвигает разметку. Ссылки журнала и все переключатели доступны с Tab. */
 :focus-visible { outline: 2px solid AccentColor; outline-offset: 2px; border-radius: 3px; }
 
-/* Широкая страница: панель выбора (метрики, дерево файлов, легенда) стоит **слева**
- * от таблицы. Это не украшение: на десктопе бокового места много, а вертикального
- * мало — переключатели и числа видны одновременно, и прокрутка страницы не уводит
+/* Широкая страница: панель выбора (метрики, дерево файлов) стоит **слева** от
+ * таблицы, а страница целиком укладывается в окно. Это не украшение: на десктопе
+ * бокового места много, а вертикального мало — переключатели и числа видны
+ * одновременно, и ни прокрутка чисел, ни прокрутка списка файлов не уводит
  * управление за экран. Узкое окно эту же раскладку снимает (ниже): там столбцы
  * снова идут друг под другом, потому что рядом им не хватает ширины.
  *
  * Раскладка — сетка на `body`, а не обёртка в разметке: страница собирается
  * вклейкой глав (`src/page/build.js`), и добавлять ей узлы ради оформления значило
- * бы менять форму страницы в двух местах вместо одного.
+ * бы менять форму страницы в двух местах вместо одного. Строк пять, и они названы
+ * по предмету: заголовок, сообщение о ссылке, **рабочая строка**, сообщение
+ * пустоты и подпись. Тянется только рабочая — таблица получает всю оставшуюся
+ * высоту, а панель не больше неё; при этом своя высота у панели не «сколько
+ * получилось» (тогда она вытолкнула бы таблицу за экран), а та же рабочая строка,
+ * внутри которой она прокручивается: список файлов длиннее окна — обычное дело.
  *
  * Порог 900px — тот же, что у адаптаций ниже: одна граница на «широко» и «узко»,
  * иначе между двумя порогами страница осталась бы без ни одного правила. */
 @media (min-width: 900px) {
   body {
+    box-sizing: border-box;
+    height: 100vh;
+    height: 100dvh;
+    padding-bottom: var(--gap);
+    overflow: auto;
     display: grid;
     grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
     column-gap: var(--gap);
-    /* Оба столбца начинаются сверху и не растягиваются под соседа: у панели своя
-     * высота, у таблицы своя. */
-    align-content: start;
-    align-items: start;
+    align-items: stretch;
+  }
+  header { grid-area: 1 / 1 / 2 / -1; }
+  #notice { grid-area: 2 / 2 / 3 / 3; }
+  #shell { grid-area: 3 / 2 / 4 / 3; }
+  #state { grid-area: 4 / 2 / 5 / 3; align-self: start; }
+  #note { grid-area: 5 / 2 / 6 / 3; }
+  /* Работа — на всю высоту, как и таблица: панель кончается там же, где она.
+   * Прокручивается панель, а не страница. Верхнего отступа у неё здесь нет:
+   * список проезжает под ним, и липкая строка категорий стояла бы не вплотную к
+   * краю, а под полосой проезжающих файлов. Отступ никуда не делся — он у первого
+   * поля, и уезжает вместе с ним. */
+  #panel { grid-area: 2 / 1 / -1 / 2; min-height: 0; margin-bottom: 0; padding-top: 0; overflow: auto; }
+  .panel > fieldset:first-child { padding-top: 12px; }
+  /* Высоту таблицы здесь задаёт строка, а не окно: своё правило высоты ей нужно
+   * только в узком окне, где страница прокручивается целиком. */
+  .shell { max-height: none; }
+  /* Прокрутка у панели одна: список файлов больше её не заводит, и поле «Файлы»
+   * не режет дерево своим потолком. */
+  .panel .files { max-height: none; overflow: visible; }
+  /* Переключатели категорий остаются на виду, пока листаешь дерево. Фон — тот же,
+   * что у панели (поверхность плюс её подсветка), иначе под ними читались бы
+   * проезжающие строки списка. */
+  .panel .cats {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: Canvas;
+    background-image: linear-gradient(var(--tint), var(--tint));
   }
-  header { grid-column: 1 / -1; }
-  #panel { grid-column: 1; }
-  #notice, #shell, #state, #note { grid-column: 2; }
-  /* В столбце дерево прокручивается выше, чем над таблицей: место занимает
-   * боковая колонка, а числа не отодвигает. */
-  .panel .files { max-height: min(62vh, 620px); }
+  /* Без метрик таблицы нет, и растянутая пустая строка ей не место: свободное
+   * место этой строки забирает сообщение о пустоте, а не полоса над ним. */
+  body:has(#shell[hidden]) #state { grid-area: 3 / 2 / 4 / 3; }
 }
 
 /* Адаптации: единственное место, где страница правит общую геометрию, — потому что
- * общая часть заморожена байтами артефакта, а не потому что так удобнее. */
-@media (max-width: 900px) {
+ * общая часть заморожена байтами артефакта, а не потому что так удобнее. Порог —
+ * 899px, а не 900: при ровно 900px обе половины применились бы к одной странице, и
+ * от «узкой» в «широкой» остался бы потолок высоты таблицы — то есть пустое место
+ * под ней на одном единственном размере окна. */
+@media (max-width: 899px) {
   body { padding: 14px 14px 32px; }
   h1 { font-size: 18px; }
   #grid { font-size: 12px; }

package/src/page/app.js

@@ -25,14 +25,39 @@ function appTable() {
   appWrite();
 }
 
-/* Панель перерисовывается целиком, поэтому поле, стоящее под клавиатурой, после
- * каждой пересборки возвращается на своё место: иначе переключение с Tab и Space
- * требовало бы начинать обход панели заново. Место опознаётся порядковым номером
- * поля — порядок полей панели от данных не зависит. */
+/* Прокрутка панели — свойство панели, а не разметки, поэтому она переживает
+ * пересборку: иначе каждый клик по галочке возвращал бы список к началу, и до
+ * нижних файлов дерева было бы не добраться. Запоминается прокрутка панели и
+ * списка файлов — у каждого она своя, а в узком окне прокручивается список.
+ * Элементы берутся те, что есть в разметке страницы (`src/page/build.js`):
+ * второго перечисления мест прокрутки в пакете нет. */
+const appScrolled = ['#panel', '#panel .files'];
+function appScrollTop() {
+  return appScrolled.map((sel) => {
+    const el = document.querySelector(sel);
+    return el === null ? 0 : el.scrollTop;
+  });
+}
+
+function appScrollBack(saved) {
+  appScrolled.forEach((sel, i) => {
+    const el = document.querySelector(sel);
+    if (el !== null) el.scrollTop = saved[i];
+  });
+}
+
+/* Панель перерисовывается целиком, поэтому поле, стоящее под клавиатурой, и
+ * прокрутка после каждой пересборки возвращаются на своё место: иначе
+ * переключение с Tab и Space требовало бы начинать обход панели заново, а
+ * прокрутка — искать своё место заново. Место поля опознаётся порядковым номером —
+ * порядок полей панели от данных не зависит. Фокус ставится без прокрутки (`preventScroll`):
+ * он возвращает клавиатуру, а не двигает список. */
 function appRender(keepNotice) {
   const at = Array.from(document.querySelectorAll('#panel input')).indexOf(document.activeElement);
+  const saved = appScrollTop();
   appPanel();
-  if (at >= 0) document.querySelectorAll('#panel input')[at].focus();
+  appScrollBack(saved);
+  if (at >= 0) document.querySelectorAll('#panel input')[at].focus({ preventScroll: true });
   appTable();
   /* Сообщение о ссылке переживает отрисовку, которая сама же им и вызвана, и
    * гаснет от действия читателя: он его уже прочитал. */

package/src/page/build.js

@@ -72,13 +72,6 @@ function uiText(page, loc) {
     approximate: page.approximate,
     approxCell: page.approximateCell,
     methodLabel: page.panelMethod,
-    legend: [
-      { cls: 'up', text: page.legendUp },
-      { cls: 'down', text: page.legendDown },
-      { cls: 'approx', text: page.legendApprox },
-      { cls: 'same', text: page.legendSame },
-      { cls: 'miss', text: page.legendMiss }
-    ],
     empty: page.emptyMetrics,
     noFiles: page.noFiles,
     /* {command} подставляет страница: у неё есть данные, а {now} — уже здесь. */

package/src/page/panel.js

@@ -1,19 +1,6 @@
 import { appEl, appBox } from './dom.js';
 import { appData, appUi, appView, appFileAt } from './state.js';
 
-/* Легенда: образцы — теми же классами, что и числа в клетках (`up`/`down` из
- * общей части оформления), поэтому образец не может разойтись с цветом числа. */
-function appLegend() {
-  const list = appEl('ul', 'legend');
-  appUi.legend.forEach((item) => {
-    const li = appEl('li');
-    li.appendChild(appEl('span', 'swatch ' + item.cls));
-    li.appendChild(appEl('span', null, item.text));
-    list.appendChild(li);
-  });
-  return list;
-}
-
 /* Галочку файла ставит только файл: и категория, и папка в дереве — способы
  * переставить те же галочки сразу группой, а своего состояния у них нет. Иначе
  * одно и то же решение жило бы в двух местах и расходилось. */
@@ -106,7 +93,9 @@ export function appPanel() {
 
   const files = appEl('fieldset', 'files');
   files.appendChild(appEl('legend', null, appUi.files));
-  const cats = appEl('div', 'row');
+  /* Строка категорий помечена классом: список файлов листается, и она остаётся на
+   * виду (липкость — в широкой раскладке, там панель и прокручивается). */
+  const cats = appEl('div', 'row cats');
   appData.categories.forEach((cat) => {
     const idx = [];
     appData.files.forEach((f, i) => { if (f.category === cat.key) idx.push(i); });
@@ -119,6 +108,4 @@ export function appPanel() {
   files.appendChild(cats);
   files.appendChild(appTree());
   panel.appendChild(files);
-
-  panel.appendChild(appLegend());
 }

package/templates/README.md

@@ -56,7 +56,7 @@ README и журнал колонкой не отслеживаются, — т
   именно этот объект выводит `size --init`, когда журнал в проекте есть.
 - `paths` внутри колонки — псевдонимы одного файла: если файл переименовывали,
   перечислите и старое имя, и новое, и колонка не разорвётся.
-- `output: "docs/size-report.html"` — файл отчёта (он один: самодостаточная страница со всеми числами, фильтрами и ссылкой); каталог инструмент создаст сам, а хук — тоже: после установки пакета и первого запуска отчёт обновляется после каждого коммита без ручного шага.
+- `output: "docs/size-report.html"` — файл отчёта (он один: самодостаточная страница со всеми числами, фильтрами и ссылкой); каталог инструмент создаст сам. Хук обновления ставится сам — скриптом установки (npm, yarn) или первым запуском (pnpm 10 не исполняет скрипты зависимостей, если не разрешить `pnpm.onlyBuiltDependencies`), и после каждого коммита отчёт пересобирается. Первый отчёт остаётся неотслеживаемым, пока вы не добавите его в git; дальше он обновляется коммитами сам.
 
 ## Проверка в CI