@vernikr/size-report 2.0.2 → 2.2.0

package/CHANGELOG.md

@@ -18,6 +18,104 @@
 где за основу взяты `fixtures/synthetic/config.json`, метрики — `raw`, `min`, `tok`, а
 способ минификации — `strip` или `esbuild`.
 
+## 2.2.0 — 2026-09-15
+
+Дерево страницы — дерево проекта: видно всё, числа есть у измеряемых.
+
+- **В дереве было видно только то, что стало колонками.** В проекте со 147 файлами
+  и выведёнными настройками колонок двенадцать — дерево и показывало двенадцать
+  листьев, а про остальные молчало: читатель видел не дерево проекта, а список
+  измеренного, и решить, что файлы потерялись, было проще всего. Теперь в контракте
+  (`--data`) едет **каталог** — все пути, которые видит git (`ls-files`), — и дерево
+  строится по нему.
+- **Числа — только у колонок, и это видно, а не подразумевается.** Лист вне отчёта
+  стоит на своём месте, но подписью без галочки, а причина — во всплывающей строке,
+  и причин две: `rule` — такой файл колонкой быть не может (сам отчёт, замок
+  зависимостей, собранное, слишком крупный или формат без текста), `choice` — мог бы,
+  но в набор колонок не выбран (его задают настройки). Знак причины движок ставит
+  **теми же** правилами, по которым выбирает колонки, — иначе подсказка говорила бы
+  одно, а выбор делал другое. Сам отчёт в дереве назван **всегда** — и пока не
+  собран, и когда он вне git: его отслеживаемость это свойство момента, и зависеть
+  от неё отчёт не должен (иначе первая же пересборка в свежем клоне даёт другие
+  байты, и хук коммитит отчёт второй раз на пустом месте).
+- **Счётчик папки со смешанным составом — доля** («2/5»: два файла в отчёте из
+  пяти в папке), а целиком измеряемая папка считает как раньше («5»). Папка, где
+  измеряемых нет вовсе, галочки не получает: включать в ней нечего, но на месте она
+  остаётся — дерево не должно врать о том, что в проекте есть.
+- **Цена названа:** набор колонок этим не меняется, поэтому прогон не подорожал.
+  Замер на этом же проекте (162 колонки × 79 строк против 12): с токенами 16,1 с
+  вместо 2,4 с, а на живой истории полный набор ещё и отказывает (перенос состояния
+  теряет правку пути, которого нет на HEAD) — поэтому «мерить всё» решением не стало.
+
+### Что изменится в числах
+
+**Ничего.** Числа считает тот же движок теми же датчиками: выпуск про то, что видно в
+дереве панели, а не про измерение. Таблица та же, что у 2.1.0, до последней клетки.
+
+| Файл | 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.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
 
 Инструкция перестала обещать лишний ручной шаг и назвала платформенную разницу.

package/README.md

@@ -10,7 +10,7 @@
 
 ## Статус
 
-**Выпуск 2.0.2 (2026-09-15).** Инструмент живёт отдельным пакетом: имя в
+**Выпуск 2.2.0 (2026-09-15).** Инструмент живёт отдельным пакетом: имя в
 реестре — `@vernikr/size-report` (публикуется тегом из CI, без секрета). Настроек
 проект может не заводить вовсе: без файла инструмент выводит их из самого проекта и
 говорит об этом строкой, а `--init` закрепляет выведенное файлом (чем этот шаг
@@ -22,8 +22,9 @@
 в числах»:
 таблица чисел в нём не пересказ, а замер на фикстуре, который сверяется с живым
 прогоном (`test/changelog.test.js`). Числа этим выпуском не меняются — правки
-лежат в ответах инструмента человеку; `schema: 1` данных, замороженная 1.0.0,
-остаётся той же.
+лежат в виде страницы отчёта на десктопе и в том, что видно в её дереве; `schema: 1`
+данных, замороженная 1.0.0, остаётся той же (выпуск добавил поле, а не поменял
+смысл прежних).
 
 **Шаг 1 плана пройден — перенос без изменения поведения.** Команда —
 `bin/size.js`, точка входа пакета — `src/size-table.js` (только реэкспорт),
@@ -76,7 +77,10 @@
 вывод: страница показывает то, что сказал движок, и своего правила точности не
 заводит. Панель страницы — дерево файлов по папкам, с переключателем у каждой
 папки на всё поддерево; выбор читателя переживает перезаход и передаётся
-ссылкой — адрес страницы и есть ссылка.
+ссылкой — адрес страницы и есть ссылка. В контракте же едет **каталог проекта** —
+все пути, которые видит git: дерево страницы — дерево проекта, а числа есть только
+у тех файлов, что стали колонками (чем это отличается от прежнего дерева, где
+были одни колонки, — `CHANGELOG.md` 2.2.0).
 Минификация и токены сделаны первыми срезами шагов 3 и 4 (ниже).
 Разбиение движка по файлам сделано (пункт D1 плана, R-1.3 `REFACTOR.md`).
 Источник инструмента — скрипт `size-table.js` (1145 строк) в проекте
@@ -219,10 +223,10 @@
 
 | Прогон | Команда | Проверок |
 |---|---|---|
-| Быстрый — каждая правка | `pnpm test` | **65 из 169** |
-| Полный — выкладка и CI | `pnpm test:all` | **169** |
+| Быстрый — каждая правка | `pnpm test` | **68 из 172** |
+| Полный — выкладка и CI | `pnpm test:all` | **172** |
 
-Ни одна проверка не потеряна и не ослаблена: полный прогон запускает все 169 теми же
+Ни одна проверка не потеряна и не ослаблена: полный прогон запускает все 172 теми же
 файлами, а быстрый берёт их часть. Умолчание — полный: файл становится быстрым только
 явно и с причиной, поэтому новое дорогое не может тихо уехать в быстрый. Стерегут это
 объявление `test/suites.test.js` (полнота классификации и причина у каждого файла) и
@@ -309,30 +313,45 @@ Trusted Publisher в настройках пакета), права **publish**
 один набор стилей таблицы на оба вывода (`src/table.css`) — странице достались
 липкие шапка и колонка коммита, которые раньше были только у статического
 артефакта, и она больше не уезжает вбок в узком окне (до правки — 1518px при
-окне 620). Добавились легенда с цветами дельт, состояния «нечего показать»
-(сняты все метрики или все файлы) и переключатели, доступные с клавиатуры. Цвет
+окне 620). Добавились состояния «нечего показать» (сняты все метрики или все
+файлы) и переключатели, доступные с клавиатуры. Цвет
 deльт задан один раз и по артефакту: рост зелёный, спад красный — смена это две
 строки в `src/table.css` плюс пересборка эталона артефакта, больше цвета нигде нет.
 
-**Левая панель страницы — дерево файлов** (`REFACTOR.md` R-2.4). Папки берутся из
-тех же путей, что показаны в подписи файла (ни одного перечисления руками), у
+**Левая панель страницы — дерево файлов проекта** (`REFACTOR.md` R-2.4, каталог
+путей — `CHANGELOG.md` 2.2.0). Дерево строится по путям проекта, а не по одним
+колонкам, поэтому в нём видно и то, что в отчёт не попало: такой лист — подпись без
+галочки с причиной во всплывающей строке («колонкой быть не может» — правило пакета
+— или «в набор колонок не попал» — выбор проекта), а счётчик папки со смешанным
+составом написан долей («2/5»: два файла в отчёте из пяти в папке). Сам отчёт в
+дереве назван всегда: его отслеживаемость — свойство момента, и от неё содержимое
+страницы не зависит. У
 папки три состояния — все её файлы включены, часть, ни одного, — и переключатель
 папки ведёт за собой всё поддерево; рядом стоит число файлов. Своего состояния у
 папки и у быстрой кнопки категории нет: обе переставляют галочки файлов, поэтому
-дерево, кнопки и таблица не могут разойтись. Список файлов длиной больше экрана
-прокручивается внутри панели, а не выталкивает таблицу: на живой истории
-(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 +359,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 +560,12 @@ deльт задан один раз и по артефакту: рост зел
 | `src/derived.js` | Общий расчёт отчёта: итоги, дельты, клетка, подпись коммита — один на движок и программу страницы |
 | `src/css.js` | Чтение оформления с диска: какие наборы стилей есть и какая у них роль |
 | `src/table.css` | Таблица отчёта: геометрия клеток, липкие шапка и колонка, цвет дельт |
-| `src/page/app.css` | Оформление страницы сверх общей части: панель с деревом файлов (на широком экране — колонка слева от таблицы), состояния пустоты, узкое окно |
-| `src/page/state.js` | Состояние страницы: данные отчёта, вид галочек, паспорт записи, память браузера и обмен ссылкой — глава программы страницы |
+| `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` | Снятие балласта: какая форма к какому файлу (расширение, стратегия) и что считать точным числом — вход разбора форм |
@@ -544,9 +586,9 @@ deльт задан один раз и по артефакту: рост зел
 | `bin/postinstall.js` | Установка хука после постановки пакета: ищет проект-потребитель и молчит, если поставить негде |
 | `src/artifact.js` | Отчёт на диске: единственное место, где он превращается в файл (им пользуются и `--write`, и хук); отчёт — самодостаточная страница |
 | `src/journal.js` | Журнал и ссылки: к какому разделу относится коммит и куда ведёт описание |
-| `src/data.js` | Категории файлов и контракт со страницей (`--data`) |
+| `src/data.js` | Категории файлов и контракт со страницей (`--data`): числа, устройство таблицы и каталог путей проекта |
 | `src/config.js` | Настройки проекта-потребителя: умолчания, чтение, проверка |
-| `src/project.js` | Настройки, выведенные из самого проекта (дерево и история): колонки, журнал, исключения. Без файла настроек он и есть настройки; `--init` закрепляет его файлом |
+| `src/project.js` | Настройки, выведенные из самого проекта (дерево и история): колонки, журнал, исключения, каталог путей для дерева страницы. Без файла настроек он и есть настройки; `--init` закрепляет его файлом |
 | `src/locales.js`, `src/refusal.js`, `src/tool.js` | Тексты отчёта; коды выхода и справка; имя и версия пакета |
 | `src/cli.js` | Вход инструмента: разбор строки, чтение проекта и доставка запроса режиму; главный файл пакета |
 | `src/args.js` | Грамматика командной строки: режимы, ключи и команды плюс проверки их сочетаний — отказ называет виновника и готовую команду |
@@ -571,7 +613,8 @@ deльт задан один раз и по артефакту: рост зел
 | `test/refusals-catalog.test.js` | Сторож каталога отказов: у каждого места отказа в исходниках есть пункт, у каждого пункта — объявленный совет, а отказы, отданные другой проверке, ею в самом деле утверждаются (названные файл и строка проверяются) |
 | `test/contract-data.test.js` | Контракт данных: числа против эталона, состав полей против производных, пометки приближения против подписи метрики |
 | `test/contract-derived.test.js` | Производные против чисел артефакта: итоги строки, дельты клетки и дельта итога — на коде, который лежит в дереве |
-| `test/page-view.test.js` | Собранная страница: вклейка без копий расчёта, самодостаточность, дерево файлов, состояния пустоты, оформление и переключатели |
+| `test/page-view.test.js` | Собранная страница: вклейка без копий расчёта, самодостаточность, состояния пустоты, оформление и переключатели |
+| `test/page-tree.test.js` | Дерево файлов панели: папки по путям проекта, три состояния, поддерево, файлы вне отчёта и прокрутка при пересборке |
 | `test/page-choice.test.js` | Память выбора и обмен ссылкой: перезаход, чужой отчёт, чужая и битая запись, смена адреса на открытой странице |
 | `test/module.test.js` | Модуль в расширении `.js`: измеряется без правок настроек; гард стриппера жив (доказано мутацией) и не обвиняет невиновного |
 | `test/guard.test.js` | Разбор модуля: идёт потоком, оба пути дают один вердикт, отступление работает без файла потока, сотни разборов дешевле запуска |
@@ -643,7 +686,7 @@ pnpm add -D @vernikr/size-report
 ```
 
 Пакет **опубликован в реестре**, и публично: `npm view @vernikr/size-report
-version` отвечает `2.0.2`, `npm access get status @vernikr/size-report` — `public`,
+version` отвечает `2.2.0`, `npm access get status @vernikr/size-report` — `public`,
 а анонимный запрос тарболла — код 200. `npm i -D` и `yarn add -D` принимают то же
 имя; ни ключа, ни ссылки на репозиторий не нужно.
 
@@ -651,11 +694,11 @@ version` отвечает `2.0.2`, `npm access get status @vernikr/size-report`
 реестра, но остаётся привязанной к ревизии:
 
 ```bash
-pnpm add -D github:vernikr/size-report#v2.0.2
+pnpm add -D github:vernikr/size-report#v2.2.0
 ```
 
 Без сети (или если тянуть из codeload нечем) — тарболл: `pnpm pack` в клоне
-пакета, затем `pnpm add -D ./vernikr-size-report-2.0.2.tgz`.
+пакета, затем `pnpm add -D ./vernikr-size-report-2.2.0.tgz`.
 
 **Почему тег, а не sha.** Короткий sha pnpm разрешает только через видимые рефы, а
 `git ls-remote` отдаёт одни верхушки веток: пока ревизия — верхушка, короткий sha
@@ -663,7 +706,7 @@ pnpm add -D github:vernikr/size-report#v2.0.2
 <sha> to a commit`. Это не рассуждение, а проба: короткий пин `6530237` ставился,
 пока `main` стоял на нём, и перестал — на следующем же коммите, а тот же sha
 целиком поставился. Имя ветки (`#main`) или тег принимаются оба, но ветка —
-движущаяся цель, а тег постоянен: этот выпуск стоит на теге `v2.0.2`, он же и в
+движущаяся цель, а тег постоянен: этот выпуск стоит на теге `v2.2.0`, он же и в
 примере (сорок знаков тоже годятся, но их придётся брать глазами из истории).
 
 Ревизия в примере — не украшение, а часть утверждения: она закреплена за тем, что

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vernikr/size-report",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -66,7 +66,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.0.1",
+    "@vernikr/size-report": "2.1.0",
     "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/data.js

@@ -3,6 +3,7 @@ import { LOCALES } from './locales.js';
 import { metricView } from './metrics.js';
 import { rowHref } from './journal.js';
 import { build, skipLine } from './history.js';
+import { projectTree } from './project.js';
 import { TOOL_PKG } from './tool.js';
 
 /* Категории файлов и контракт со страницей: абсолютные значения и устройство
@@ -66,6 +67,10 @@ export function reportData(cfg, root) {
     categories: CATEGORY_ORDER.filter((key) => files.some((f) => f.category === key))
       .map((key) => ({ key: key, label: loc.categories[key] })),
     files: files,
+    /* Дерево страницы — дерево проекта: все пути, а не только колонки. Числа есть
+     * лишь у колонок, поэтому у каждой записи каталога сказано, чего ей не
+     * досталось: `why` пусто — файл измеряется, иначе названа причина. */
+    catalog: projectTree(root, cfg.output, files.map((f) => (f.path === null ? f.paths[0] : f.path))),
     rows: rows.map((r) => Object.assign(rowShape(r),
       { href: rowHref(r.section, r.sha, cfg), values: r.cells })),
     now: state.map((s) => (s === null ? null : s.cells)),

package/src/locales.js

@@ -19,13 +19,15 @@ export const LOCALES = {
       metrics: 'Метрики',
       files: 'Файлы',
       dir: 'все файлы папки {name} ({n})',
+      dirNone: 'ни один файл папки {name} в отчёт не попал (в папке {n})',
+      /* Причина — у листа: в дереве он подписью, а не галочкой, и без этих слов
+       * читатель решил бы, что файл потерялся. */
+      notMeasuredRule: 'не измеряется: такой файл колонкой быть не может'
+        + ' (собранный, замок зависимостей, сам отчёт или слишком крупный)',
+      notMeasuredChoice: 'не измеряется: в набор колонок отчёта не попал'
+        + ' — набор задают настройки (columns)',
       all: 'все',
       sub: '{tool} {version} · {artifact}',
-      legendUp: 'рост',
-      legendDown: 'спад',
-      legendSame: 'пустая клетка — не менялось',
-      legendMiss: '«—» — файла в этой ревизии ещё нет',
-      legendApprox: 'подчёркнутое число — приближённое: способ назван под метриками',
       /* Слова точности: подпись метрики говорит про худшее в колонке, а клетки —
        * про своё число. Одно слово на подпись и на подсказку клетки, чтобы не
        * разошлось и не звучало по-разному. */
@@ -75,13 +77,13 @@ export const LOCALES = {
       metrics: 'Metrics',
       files: 'Files',
       dir: 'all files in “{name}” ({n})',
+      dirNone: 'no file of “{name}” made it into the report ({n} in it)',
+      notMeasuredRule: 'not measured: such a file cannot be a column'
+        + ' (built, a dependency lock, the report itself, or too large)',
+      notMeasuredChoice: 'not measured: it is not in the report’s set of columns'
+        + ' — that set comes from the settings (columns)',
       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; }
@@ -86,26 +91,17 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 .box:hover { background: var(--tint); }
 .box input { margin: 0; accent-color: AccentColor; }
 .box.all { font-weight: 600; }
+/* Файл вне отчёта: подпись на месте галочки — чисел для него не измеряли. Он
+ * приглушён и не отзывается на мышь: обещать нажатие нечем. */
+.box.plain { cursor: default; opacity: .55; }
+.box.plain:hover { background: none; }
 
-/* Легенда: те же классы цвета, что и в клетках (.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 +150,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

@@ -62,6 +62,7 @@ function uiText(page, loc) {
     metrics: page.metrics,
     files: page.files,
     dir: page.dir,
+    dirNone: page.dirNone,
     all: page.all,
     linkForeign: page.linkForeign,
     linkBroken: page.linkBroken,
@@ -71,14 +72,11 @@ function uiText(page, loc) {
     exact: page.exact,
     approximate: page.approximate,
     approxCell: page.approximateCell,
+    /* Почему файла нет в отчёте — словами: причину называет движок знаком (`why`),
+     * а страница одевает знак в текст, как и всё остальное в панели. */
+    notMeasuredRule: page.notMeasuredRule,
+    notMeasuredChoice: page.notMeasuredChoice,
     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,18 +1,5 @@
 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;
-}
+import { appData, appUi, appView, appFileAt, appMeasured } from './state.js';
 
 /* Галочку файла ставит только файл: и категория, и папка в дереве — способы
  * переставить те же галочки сразу группой, а своего состояния у них нет. Иначе
@@ -27,56 +14,114 @@ function appFileBox(i) {
   });
 }
 
-/* Все файлы поддерева — то, чем управляет переключатель папки. */
+/* Файл, которого в отчёте нет: он стоит в дереве на своём месте, но галочки у
+ * него нет — чисел для него не измеряли, и переключать нечего. Причину читатель
+ * видит во всплывающей строке, а не догадывается по виду. */
+function appUnmeasuredBox(entry) {
+  const box = appEl('span', 'box plain', entry.path.split('/').pop());
+  box.title = entry.path + ' · '
+    + (entry.why === 'rule' ? appUi.notMeasuredRule : appUi.notMeasuredChoice);
+  return box;
+}
+
+/* Все измеряемые файлы поддерева — то, чем управляет переключатель папки: файл
+ * вне отчёта переключать нечего. */
 function appIndexes(node) {
   const out = node.files.slice();
   node.dirs.forEach((sub) => { out.push(...appIndexes(sub)); });
   return out;
 }
 
-/* Узлы одного уровня: сперва папки по алфавиту, затем файлы в порядке данных.
- * Переключатель папки стоит над своим поддеревом и показывает три состояния: все
- * файлы включены, часть, ни одного. */
-function appTreeList(node) {
-  const list = appEl('ul', 'tree');
-  [...node.dirs.keys()].sort().forEach((name) => {
-    const sub = node.dirs.get(name);
-    const idx = appIndexes(sub);
+/* Сколько файлов в поддереве — вместе с теми, что в отчёт не попали. */
+function appCount(node) {
+  let n = node.files.length + node.others.length;
+  node.dirs.forEach((sub) => { n += appCount(sub); });
+  return n;
+}
+
+/* Узел дерева: измеряемые файлы (колонки), прочие файлы проекта и подпапки. */
+function appNode() {
+  return { files: [], others: [], dirs: new Map() };
+}
+
+/* Переключатель папки: его галочка ведёт за собой всё поддерево и показывает три
+ * состояния — все файлы включены, часть, ни одного. Рядом число файлов; если в
+ * папке есть и те, что вне отчёта, оно написано долей («2/5»): читателю важно, что
+ * в папке пять файлов, а измеряются два. Папка без единого измеряемого файла
+ * галочки не получает — включать в ней нечего, — но на месте остаётся. */
+function appDirHead(name, sub) {
+  const idx = appIndexes(sub);
+  const total = appCount(sub);
+  const label = name + '/';
+  let head;
+  if (idx.length === 0) {
+    head = appEl('span', 'box dir plain', label);
+    head.title = appUi.dirNone.replace('{name}', name).replace('{n}', total);
+  } else {
     const on = idx.map((i) => appView.files[i]);
-    const some = on.some((v) => v);
-    const head = appBox(name + '/', appUi.dir.replace('{name}', name).replace('{n}', idx.length),
-      some && on.every((v) => v), (e) => {
+    const every = on.every((v) => v);
+    head = appBox(label, appUi.dir.replace('{name}', name).replace('{n}', idx.length),
+      every, (e) => {
         idx.forEach((i) => { appView.files[i] = e.target.checked; });
         appRender();
       }, 'dir');
-    head.querySelector('input').indeterminate = some && !on.every((v) => v);
-    head.appendChild(appEl('span', 'n', idx.length));
+    head.querySelector('input').indeterminate = !every && on.some((v) => v);
+  }
+  head.appendChild(appEl('span', 'n', idx.length === total ? String(total) : idx.length + '/' + total));
+  return head;
+}
+
+/* Листья уровня: измеряемые файлы и файлы вне отчёта — вперемешку и по алфавиту
+ * имени, как в дереве файлов, а не отдельными списками. */
+function appLeaves(node) {
+  const items = node.files.map((i) => ({ name: appData.files[i].label, i: i, entry: null }));
+  node.others.forEach((entry) => {
+    items.push({ name: entry.path.split('/').pop(), i: null, entry: entry });
+  });
+  return items.sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
+}
+
+/* Узлы одного уровня: сперва папки по алфавиту, затем листья (их порядок — из
+ * `appLeaves`). */
+function appTreeList(node) {
+  const list = appEl('ul', 'tree');
+  [...node.dirs.keys()].sort().forEach((name) => {
+    const sub = node.dirs.get(name);
     const li = appEl('li');
-    li.appendChild(head);
+    li.appendChild(appDirHead(name, sub));
     li.appendChild(appTreeList(sub));
     list.appendChild(li);
   });
-  node.files.forEach((i) => {
+  appLeaves(node).forEach((leaf) => {
     const li = appEl('li');
-    li.appendChild(appFileBox(i));
+    li.appendChild(leaf.entry === null ? appFileBox(leaf.i) : appUnmeasuredBox(leaf.entry));
     list.appendChild(li);
   });
   return list;
 }
 
-/* Дерево файлов: путь делится по «/», папки становятся узлами, файлы — листьями.
- * Строится из тех же путей, что показаны в подписи файла, поэтому дерево и список
- * файлов не могут разойтись. */
+/* Место листа в дереве: путь делится по «/», промежуточные папки заводятся по
+ * дороге. Одно место на измеряемые и прочие — иначе они разошлись бы папками. */
+function appLeafAt(node, p, i, entry) {
+  const parts = p.split('/');
+  for (let d = 0; d < parts.length - 1; d++) {
+    if (!node.dirs.has(parts[d])) node.dirs.set(parts[d], appNode());
+    node = node.dirs.get(parts[d]);
+  }
+  if (entry === null) node.files.push(i);
+  else node.others.push(entry);
+}
+
+/* Дерево страницы — дерево проекта: узлы берутся из каталога (все пути, которые
+ * видит git), поэтому в нём есть и файлы вне отчёта. Измеряемый лист — колонка, и
+ * путь у него тот же, что в подписи файла; колонка, чьего файла на HEAD уже нет, в
+ * каталог не попала (в индексе её нет) и стоит на месте по последнему известному
+ * пути. */
 function appTree() {
-  const root = { files: [], dirs: new Map() };
-  appData.files.forEach((f, i) => {
-    const parts = (f.path === null ? f.paths[0] : f.path).split('/');
-    let node = root;
-    for (let d = 0; d < parts.length - 1; d++) {
-      if (!node.dirs.has(parts[d])) node.dirs.set(parts[d], { files: [], dirs: new Map() });
-      node = node.dirs.get(parts[d]);
-    }
-    node.files.push(i);
+  const root = appNode();
+  appData.files.forEach((_f, i) => appLeafAt(root, appFileAt(i), i, null));
+  appData.catalog.forEach((entry) => {
+    if (appMeasured[entry.path] === undefined) appLeafAt(root, entry.path, null, entry);
   });
   return appTreeList(root);
 }
@@ -106,7 +151,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 +166,4 @@ export function appPanel() {
   files.appendChild(cats);
   files.appendChild(appTree());
   panel.appendChild(files);
-
-  panel.appendChild(appLegend());
 }

package/src/page/state.js

@@ -35,6 +35,13 @@ appData.files.forEach(() => { appView.files.push(true); });
 export const appMetric = {};
 appData.metrics.forEach((m) => { appMetric[m.key] = m; });
 
+/* Колонка по пути файла: дерево страницы — дерево проекта (все пути каталога), а
+ * числа есть только у колонок, поэтому лист дерева по этому указателю и решает,
+ * галочка он или подпись. Имя берётся тем же правилом, что у записи выбора
+ * (`appFileAt`), — дерево и память читателя разойтись не могут. */
+export const appMeasured = {};
+appData.files.forEach((_f, i) => { appMeasured[appFileAt(i)] = i; });
+
 /* Ссылка — это тот же выбор в адресе, под своим именем: чужой якорь страницы
  * ссылкой не считается, и спорить с ним нечем. */
 const APP_LINK = '#size-report=';

package/src/project.js

@@ -239,6 +239,32 @@ export function projectConfig(root) {
   };
 }
 
+/* Путь самого отчёта — в проекте ли он назван (не пустой, не абсолютный и не с
+ * выходом наверх): только такой путь дереву можно назвать листом. */
+const ownPath = (output) => output !== '' && !path.isAbsolute(output) && output.indexOf('..') !== 0;
+
+/* Каталог проекта для страницы: все пути, которые видит git, и причина у тех из
+ * них, что колонкой не стали (`null` — стал: страница по этому знаку решает, лист
+ * — галочка или подпись). Дерево страницы — дерево проекта, поэтому пути берутся
+ * из индекса, а не из колонок; причины — **теми же** правилами, по которым профиль
+ * выбирает колонки (`generated` и предел размера), иначе подсказка говорила бы
+ * одно, а выбор колонок делал другое. Колонка, чьего файла на HEAD уже нет, в
+ * каталог не попадает: в индексе её нет, а на месте в дереве её держит страница.
+ *
+ * Сам отчёт в каталоге есть всегда — и пока он ещё не собран, и когда он вне git:
+ * его отслеживаемость — свойство момента, а не проекта. Зависеть от неё отчёт не
+ * должен: иначе первая же пересборка в свежем клоне даёт другие байты (отчёт в
+ * каталоге появился), и хук коммитит его второй раз на пустом месте. */
+export function projectTree(root, output, measured) {
+  const files = indexFiles(root);
+  if (ownPath(output) && files.every((f) => f.p !== output)) files.push({ p: output, size: 0 });
+  return files.sort((a, b) => (a.p < b.p ? -1 : 1)).map((f) => ({
+    path: f.p,
+    why: measured.indexOf(f.p) >= 0 ? null
+      : (generated(f.p, output) || f.size > MAX_BYTES ? 'rule' : 'choice')
+  }));
+}
+
 /* Имя черновика (`sniffColumns`) осталось публичным: на него опираются те, кто звал
  * вывод колонок (`test/api.test.js` держит список имён), и форма ответа та же —
  * колонки, знакомые расширения проекта и сколько путей всего. */

package/src/size-table.js

@@ -63,10 +63,10 @@
  *   strip → refusal, parse                             — снятие балласта и гард;
  *   metrics → strip                                    — реестр метрик;
  *   git → refusal                                      — всё, что читается у git;
- *   project → git, refusal, data                       — что проект говорит о себе сам;
+ *   project → git, refusal                            — что проект говорит о себе сам;
  *   config → project, git, refusal, locales, metrics, data — настройки проекта;
  *   history → git, metrics, journal, refusal           — сборка по истории;
- *   data → locales, metrics, journal, history, tool    — контракт со страницей;
+ *   data → locales, metrics, journal, history, project, tool — контракт со страницей;
  *   page/build → locales, css                          — отчёт одним файлом;
  *   artifact → data, page/build                        — запись отчёта;
  *   modes → почти все                                  — что делать по запросу;