@vernikr/size-report 2.6.0 → 2.8.0

package/README.md

@@ -10,7 +10,7 @@ shows.
 
 ## Status
 
-**Release 2.6.0 (2026-09-17).** The tool lives as a package of its own: the registry name is
+**Release 2.8.0 (2026-09-18).** The tool lives as a package of its own: the registry name is
 `@vernikr/size-report` (published by tag from CI, with no secret). A project may keep no settings at
 all: without a config file the tool derives them from the project itself and says so in one line,
 and `--init` pins what was derived into a file. The report is **one file**, the self-contained page
@@ -19,6 +19,48 @@ is installed and on the first run. The version is in the manifest, and every rel
 the journal — `worklog/` for today's entries, `worklog/archive/WORKLOG.md` for the earlier ones:
 what changes in the numbers is measured rather than retold.
 
+2.8.0 is about what the report costs whoever opens it, and its figures are measured rather than retold.
+**The table is a window of itself:** every row and every column in sight is built, plus four beyond each edge so that
+the edge of the window is never seen empty, while the rest of the table exists as the extent of the scrolled box and
+nothing else. This repository's own report was a `<table>` of 238 500 cells — 253 770 nodes in the document, 377 396 in
+the browser, 1.46 GB of a fresh Chrome's memory with the page open and nothing else — and the window of it is
+**2 460 nodes, 7 320 and 0.15 GB**: a hundredth of the nodes and a tenth of the memory. Scrolling the whole table cost
+**1.1 s of task time over 251 steps**, against **36 s over 60 steps** for the same page as a full table (a median of
+571 ms a frame, which is the freeze a reader felt). **Every column is 70px wide and fixed** — the numbers are short and
+of one kind, and a width that came out of the text is a measurement of every cell of the column — while a file's name
+that does not fit its group is cut with an ellipsis rather than wrapped (the whole name stands in the tooltip). **The
+stripe over a drawing is gone with the freeze it was drawn for**: a switch costs a few milliseconds, so there is nothing
+for an indicator to indicate, and `src/page/work.js` left the tree with it. A virtualizer library was measured and not
+taken — `@tanstack/virtual-core` is ~6.7 kB gzip and headless, `virtua`'s grid is experimental and `Clusterize.js`
+knows rows and not columns — because each would be vendored into the artifact, which the report then measures as its own
+bytes. **The checks of the old table are deactivated while it is rebuilt:** `test/page-view.test.js`, `page-cols`,
+`page-tree` and `page-choice` skip every check with its reason at the top of the file, and this document names them
+where they are the promise-holders of what they described; `test/page-grid.test.js` is what guards the window meanwhile.
+The figures and the reasoning stand in `worklog/0208-table-window.md`. The checks grow with the work: 81 → **88** in the
+fast profile and 186 → **193** in the full one.
+
+2.7.0 is about the page and what a reader does with it, and its figures are measured rather than retold.
+**The report's address stays clean:** a switch writes the record into the browser's memory and nothing into the
+address bar — the page no longer puts a `#size-report=…` tail on the report it was opened with — while a link
+made by an earlier release is still read, and a foreign or broken one is still explained in words. **A test
+is a category of its own**, right after Code: the files of `test`, `tests` and `fixtures` folders wherever
+they stand, and every name carrying `.test` before its extension — on this repository's own history Tests
+holds **47 of 317 columns**, and the checkbox of the documentation is called **Docs**. **The tree opens
+folded**, and the unfolding is what the memory keeps, under a key of its own; inside a level a hidden name —
+one beginning with a dot — stands after every visible one. **The drawing of a switch is measured, and it is one
+task**: the click is counted and answered, a drawing short enough to be over before the browser could paint is
+done on the click, and a longer one happens in the next task with a stripe over the top edge of the window. The
+price of a switch is the browser's own relayout of the table — 234.5 ms of layout for a *single* cell of this
+repository's report (249 rows, 317 columns, 238 thousand cells), 287 ms for 750, 539 ms for 6 000 — while the
+class changes are about 2 µs a node; on this page the whole Table of Contents of the report (73 columns) is
+867 ms blocked with a 742 ms task. A queue worked off in slices was written first and refused by measurement:
+the same click in 37 slices paid that relayout 37 times — **169 layouts and 151.9 s of pure layout time against
+1.04 s**, with the tab growing to gigabytes of repaint and the reader waiting four minutes for a switch that
+costs him less than a second unsliced. Within one task nothing can repaint, so a bar that filled would be a bar
+nobody could read: the stripe travels and says the work is going on (`probes/step-12-columns.mjs`, the records in
+`worklog/0207-page-choice-bar.md`). The order of the columns did not change there: what the last commit touched
+still stands first, the rest after it in the settings' order.
+
 2.6.0 changes the numbers themselves, and they are measured rather than retold: on this repository's own
 history the page this engine writes is **85 955 B against 1 899 370 B** written by 2.5.0 — 22.1 times
 smaller, −95.5 % — because the data travels as one packed block (49 392 B, `base64+gzip`) instead of a list
@@ -76,7 +118,8 @@ selection" are impossible in principle. The contract tells how each number was o
 no rule of counting of its own, and the split of numbers into exact and approximate was taken out of the
 package. The page's panel is a
 tree of files by folder, with a switch per folder for the whole subtree; a reader's choice survives
-a revisit and travels in a link — the page's address is the link. The contract carries the **project
+a revisit in the browser's memory, and the address keeps a clean tail — an address with a link of its
+own is read and never written (release 2.7.0). The contract carries the **project
 catalogue** too: every path git sees, so the page's tree is the project's tree, while numbers exist
 only for the files that became columns (release 2.2.0).
 
@@ -194,8 +237,8 @@ commits and installs hooks; the reason for each expensive file is named line by
 
 | Run | Command | Checks |
 |---|---|---|
-| Fast — every edit | `pnpm test` | **81 of 186** |
-| Full — release and CI | `pnpm test:all` | **186** |
+| Fast — every edit | `pnpm test` | **88 of 193** |
+| Full — release and CI | `pnpm test:all` | **193** |
 
 No check is lost or weakened: the full run starts all 186 with the same files, the fast one takes part
 of them. The default is the full run — a file becomes fast only explicitly and with a reason — so new
@@ -287,7 +330,9 @@ choice. The report itself is always in the catalogue, whether or not it is track
 of the moment, and the page must not depend on it, or the first rebuild in a fresh clone would give
 different bytes. A folder whose files are only partly in the report writes its count as a fraction
 ("2/5"), and everything outside the report stands after everything inside it — folders and leaves
-alike — so that the report is seen at once in a list where half the rows do not switch
+alike — so that the report is seen at once in a list where half the rows do not switch. The name of a level
+holds a second rule: a hidden name — one beginning with a dot — stands after every visible one, the alphabet
+deciding the rest, so the service files of a project do not stand in the reader's way
 (`test/page-tree.test.js`).
 
 **A folder is a switch like a file, and its sign is a decision of its own.** The checkbox of a folder
@@ -296,8 +341,10 @@ next to it. Neither a folder nor a category button keeps state of its own: both
 checkboxes, so the tree, the buttons and the table cannot drift apart. The sign beside a folder answers
 a different question — how much of the tree is visible, which is the onlooker's business rather than the
 reader's choice — so it is remembered between visits in a record of its own, under a key of its own and
-the same report passport, and it never goes into the link; unfolding every folder removes that record,
-just as turning the checkboxes back on removes the choice.
+the same report passport, and it never goes into a link. The tree opens **folded**: a project's tree is
+longer than the window, and the reader looks at a short list first, so what the record keeps is the
+unfolding rather than the folding — folding every folder back removes the record, just as turning the
+checkboxes back on removes the choice.
 
 **The list scrolls, and there is one scroll.** On a narrow window it is the file list that scrolls —
 the panel grows with the page there — while on a wide one the whole panel does: otherwise the controls
@@ -309,19 +356,36 @@ row hides it, so a click on the sign changes exactly the three things the reader
 sign and the note in the memory. What guards this is that after folding the table is the same markup
 rather than a rebuilt one (`test/page-tree.test.js`).
 
-**A click shows and hides rather than builds.** The table is assembled once, with every column of every
-file, and a switch afterwards changes only what is visible: a metric is one class on the table plus the
-`colSpan` of the group headings, a file's column is a class per node of it, and a folder or a category is
-the same for each file of its subtree. The table's own nodes stay the objects the first drawing made:
-`test/page-view.test.js` counts what a click appends (a metric: nothing at all; a file, a folder or a
-category: at most the cells of the totals, rows × metrics) and checks that the rows and the cells are
-still the very same objects. What makes this possible is that the order of the columns depends on the
-files rather than on the choice — the last commit's first, then the settings' order — so a hidden column
-keeps its place and the visible ones do not move. The totals are the only numbers a choice changes, and
-they are carried rather than recounted: a sum is linear, so a file switched off subtracts exactly its own
-values, which costs its own rows instead of rows × files. That arithmetic is the step's one new piece,
-and it is held against the engine's own `rowModel` cell by cell for a mixed choice, so that counting a
-row stays in one place (`test/page-view.test.js`).
+**The table is a window of itself, and the window is what a scroll moves.** A row stands at its own `top` inside the
+scrolled content and a column at its own `left`, so scrolling costs the browser nothing but painting — no layout of the
+table to redo and no script to run — while the page works only when the window has really moved, and then only on what
+left it and what entered it. The header sticks to the top of the shell and the commit column to its left, so the commit a
+number belongs to and the file it stands under are always in sight. The price of a table is what this step removed:
+238 500 cells were 253 770 nodes in the document and 377 396 in the browser, **1.46 GB** of a fresh Chrome's memory at
+rest, and any change of a column's visibility meant the browser laying the whole of it out again — 234.5 ms of layout for
+a *single* cell of this repository's report, 539 ms for 6 000 (`probes/step-12-columns.mjs`). A window of the same
+table is **2 460 nodes and 0.15 GB**, a hundredth of the nodes and a tenth of the memory, and the whole-table scroll
+pass that took 36 s of task time over 60 steps takes **1.1 s over 251** (`worklog/0208-table-window.md`). **The columns
+are one width and fixed, 70px each**: the numbers are short and of one kind, and a width that came out of the text is a
+measurement of every cell of the column — the very cost this step removed. A file's name over its group is cut with an
+ellipsis rather than wrapped (the header is one line high and the whole name stands in the tooltip). The geometry is
+three figures — a column, a row, the header — written in the styling and in the script that counts the window's ordinals
+in them, and `test/page-grid.test.js` reads both and holds them together.
+
+**A click builds the window again, and that is cheap now.** A file switched off is simply not among the columns that
+are built, and a metric switched off not among the metrics: there is nothing to hide and nothing to carry, and the
+window is built from the choice as it is — a few hundred cells, 1–5 ms on this repository's report against the ~1 s the
+same click cost as a table. The totals are the sum over the files that are on, counted by the shared `rowModel` for the
+rows the window holds (`src/derived.js`), rather than kept in a running cache that a second road would have to agree
+with. **There is no stripe over the page any longer, and that is a measurement rather than an omission:** it stood over
+the browser's relayout of the whole table, and work that is over before a frame could paint it has no moment to be
+shown in (`src/page/work.js` left the tree with the freeze it was drawn for). **Nothing of it is a library**, and that
+was measured too: a virtualizer of both axes is not a solved problem for a page like this one —
+`@tanstack/virtual-core` is ~6.7 kB gzip and headless (the rows and the columns are two virtualizers, and every node
+is still yours to write), `virtua` calls its grid `experimental_VGrid` and has no sticky pieces, `Clusterize.js`
+virtualizes rows out of a string of all of them and knows nothing of columns — and each would have to be vendored into
+the artifact, whose bytes this very tool measures. What is left to write after any of them is what the chapter is: the
+window, the cells, the header and the pinned column.
 
 **The columns the last commit touched come first.** The report is rebuilt after every commit, and a
 reader's first question is what that edit brought. The mark comes from the history rather than from the
@@ -331,7 +395,7 @@ the report itself, which the hook commits, is skipped, or the mark would depend
 commit, the same run would give different bytes and the hook would commit the report a second time.
 Inside each part the order stays as it comes from the settings (the sort is stable): the order of the
 columns is what the reader is used to, and his choice of files does not rearrange it
-(`test/page-view.test.js`, the contract's `last` field).
+(`test/page-grid.test.js`, the contract's `last` field).
 
 **On a wide window the panel stands to the left of the table and takes no room from the numbers** (from
 900px, `src/page/app.css`). That is not decoration: a desktop has much side room and little vertical
@@ -372,17 +436,18 @@ neither the numbers nor the markup. The passport holds neither the tool's versio
 history, and on purpose: updating the tool does not change what a column means, while a grown history is
 the very history the reader comes back to.
 
-**The same choice travels as a link.** The page's address is the link: the record that goes into the
-browser's memory goes into the anchor too (`#size-report=…`), so the sender copies the address and the
-recipient sees that choice with no action at all. The link outranks the memory — it is the sender's
-explicit choice — while it does not replace the reader's own until he changes something. A foreign or
-broken address is not applied, and is not silent either: a line above the table names the reason ("the
-link was made in another report" / "the choice in the address is unreadable"), the view stays the
-reader's own, and the incoming address is not rewritten; names the report does not hold are reported by
-count, skipped, and the rest is applied. The link works on an already open page as well: the browser does
-not reload the document when the anchor changes, so the page reads the address itself, or a link would
-only work in a new tab. The page makes no request to the network at all, and that is an assertion of a
-check rather than a promise (`test/page-view.test.js`, `test/parity.test.js`).
+**The link is read and never written.** The page's address is the report's own: a choice lives in the
+browser's memory, and the page puts nothing into the address bar — a report opened from disk keeps the
+address it was opened with, and not one switch lands in the tab's title bar. What an earlier release sent
+as a link is still read, though — the record in `#size-report=…`, in the same shape the memory holds it —
+and such a link outranks the memory while it does not replace the reader's own until he changes something.
+A foreign or broken address is not applied, and is not silent either: a line above the table names the
+reason ("the link was made in another report" / "the choice in the address is unreadable"), the view stays
+the reader's own, and the incoming address is not rewritten; names the report does not hold are reported
+by count, skipped, and the rest is applied. The link works on an already open page as well: the browser
+does not reload the document when the anchor changes, so the page reads the address itself, or a link
+would only work in a new tab. The page makes no request to the network at all, and that is an assertion of
+a check rather than a promise (`test/page-view.test.js`, `test/parity.test.js`).
 
 **The `min` metric can count for real.** The way of counting is chosen in the settings:
 `"minify": {"engine": "esbuild"}` minifies JS/TS/CSS for real through an optional dependency, while
@@ -513,14 +578,14 @@ acceptance for each.
 | `src/size-table.js` | The package's entry point: a re-export of the public API (55 names) and no calculation of its own |
 | `src/derived.js` | The report's shared calculation: totals, deltas, a cell, a commit's caption — one for the engine and the page's program |
 | `src/css.js` | Reading the styling from disk: which sets of styles exist and what role each has |
-| `src/table.css` | The report's table: the geometry of a cell, the sticky header and commit column, the colour of deltas |
+| `src/table.css` | The report's table: the geometry of the window — one width per column, one height per row, the header — the sticky header and commit column, a file's caption cut with an ellipsis, the colour of deltas |
 | `src/page/app.css` | The page's styling on top of the shared part: the panel with the file tree and its sticky row of categories (a column on the left on a wide screen, the page fitting the window), the empty states, a narrow window |
 | `src/page/payload.js` | The page's block in sparse form, and the one place that unrolls it back: the history as changes (a file's appearance, its moves, its disappearance) turned into the snapshots the calculation and the table already speak — a value that did not move is one object shared by the rows that hold it |
-| `src/page/state.js` | The page's state: the report's data (the block unrolled by the payload chapter), the view of the checkboxes, the pointer "which path is which column", folded folders, the record's passport, the browser's memory and the exchange by link — a chapter of the page's program |
+| `src/page/state.js` | The page's state: the report's data (the block unrolled by the payload chapter), the view of the checkboxes, the pointer "which path is which column", the unfolded folders, the record's passport, the browser's memory and the link that is read out of the address — a chapter of the page's program |
 | `src/page/dom.js` | The page's nodes: the small helpers of markup (`appEl`, `appBox`) — one set for the panel and the table alike |
-| `src/page/panel.js` | The panel of choices: the switches of metrics and files, the categories, the tree of the project's paths (files outside the report keep a checkbox off with a reason and stand after the rest; folders carry a folding sign that hides the subtree by a class rather than by a rebuild); built once, with the fields of the switches and of the folders and categories written where they stand |
-| `src/page/table.js` | The page's table, built once: a cell, a commit's caption, the header, the empty states and the cache of the nodes of every column — markup over the shared calculation, with the totals carried rather than recounted |
-| `src/page/app.js` | Assembling and starting the page: the first drawing, then a switch that shows, hides and rewrites the totals without making a node; an anchor change; pasted into the assembled page |
+| `src/page/panel.js` | The panel of choices: the switches of metrics and files, the categories, the tree of the project's paths (files outside the report keep a checkbox off with a reason and stand after the rest, and a hidden name after every visible one; the tree opens folded and folders carry a sign that hides the subtree by a class rather than by a rebuild); built once, with the fields of the switches and of the folders and categories written where they stand |
+| `src/page/table.js` | The page's table as a window: the rows and the columns the reader can see (plus four beyond each edge), a cell, a commit's caption, the header, the empty states and the two figures of the window — markup over the shared calculation, with the totals counted per row from the choice, the geometry in pixels that the styling mirrors, and the reason a library was not taken |
+| `src/page/app.js` | Assembling and starting the page: the first drawing, then a switch that builds the window again and writes the fields it reached without making a node of the panel; an anchor change; pasted into the assembled page |
 | `src/page/build.js` | Assembling the page: data, styling and program in one file with no external references — the pasted text is **squeezed** on the way in (comments and indentation out, the same stripping the `min` metric counts) while the sources keep them, and the result is guarded by the stripper's own `assertCompilable` |
 | `src/git.js` | The only border where git is called: the pinned settings, blobs by the batch, the history, the comparison with the working tree |
 | `src/strip.js` | Removing ballast: which form goes to which file (extension, strategy) and which strategies are minification itself — the entry to the parsing of forms |
@@ -541,7 +606,7 @@ acceptance for each.
 | `bin/postinstall.js` | Installing the hook after the package is added: it looks for the consumer project and stays silent when there is nowhere to install |
 | `src/artifact.js` | The report on disk: the only place where it becomes a file (both `--write` and the hook use it); the report is a self-contained page |
 | `src/journal.js` | The journal and links: which section a commit belongs to and where a description leads |
-| `src/data.js` | The file categories and the contract with the page (`--data`): the numbers, the shape of the table and the catalogue of the project's paths |
+| `src/data.js` | The file categories (a test by its path — a `test`, `tests` or `fixtures` folder, or `.test` before the extension — otherwise the extension, and the settings above both) and the contract with the page (`--data`): the numbers, the shape of the table and the catalogue of the project's paths |
 | `src/config.js` | The consumer project's settings: the defaults, reading them, checking them |
 | `src/project.js` | The settings derived from the project itself (its tree and history): columns, the journal, the exceptions, the catalogue of paths for the page's tree. Without a settings file it *is* the settings; `--init` pins it as a file |
 | `src/locales.js`, `src/refusal.js`, `src/tool.js` | The report's texts; the exit codes and the help; the package's name and version |
@@ -552,7 +617,7 @@ acceptance for each.
 | `test/api.test.js` | The package's public API: the list of names is frozen, and splitting the engine may not change it |
 | `eslint.config.js` | The rules of formatting: the same as the consumer project's, plus a ban on gluing operators into one line (`pnpm run lint`, `pnpm run lint:strict`) |
 | `tools/harness.js` | The harness of the checks: paths, clones of the fixture (including one shared per suite and one with CRLF), running the tool, reading refusals, hashes |
-| `tools/page-harness.js` | The harness of the contract and page checks: the contract data, the assembled page, reading it in a real DOM, the panel's switches, the page's calculation and its decoder evaluated from their sources, the block unpacked, and the platform's unpacker put into jsdom (which has none) — one for six suites |
+| `tools/page-harness.js` | The harness of the contract and page checks: the contract data, the assembled page, reading it in a real DOM, the panel's switches, the page's calculation and its decoder evaluated from their sources, the block unpacked, and the platform's unpacker put into jsdom (which has none) — one for seven suites |
 | `tools/suites.js` | The split of the suite: which files go into the fast run (with a reason for each) and why every dear one is in the full run |
 | `tools/run-tests.js` | Running the suite (`pnpm test`, `pnpm test:all`, `pnpm run suites:measure`): each file's duration measured on its own, and the counts of checks adding up |
 | `tools/docs-facts.js` | Reading facts out of the documentation — one layer for the four checks of the documentation guard: what a document names (paths, calls, section addresses) against what the repository holds |
@@ -568,10 +633,11 @@ acceptance for each.
 | `test/refusals-catalog.test.js` | The guard of the refusal catalogue: every refusal site in the sources has an entry, every entry declares its advice, and refusals handed to another check are really accepted by it (the named file and line are checked) |
 | `test/contract-data.test.js` | The data contract: the numbers against the reference, the set of fields against the derived quantities, the metric's method against the way the numbers were counted — and the round trip through the page's sparse block, which restores the contract whole and twice over the same bytes |
 | `test/contract-derived.test.js` | The derived quantities against the artifact's numbers: a row's totals, a cell's delta and the delta of a total — on the code that lies in the tree |
-| `test/page-view.test.js` | The assembled page: pasted with no copy of the calculation, self-contained, the empty states, the styling, the switches, a click that makes no table and the carried totals against the engine's own sums |
-| `test/page-tree.test.js` | The panel's file tree: folders by the project's paths, three states, the subtree, files and folders outside the report (a checkbox off, a place after the rest), folding without a rebuild and a scroll a click does not touch |
-| `test/page-choice.test.js` | The memory of the choice and the exchange by link: a revisit, someone else's report, a foreign and a broken record, an address change on an open page |
-| `test/page-cols.test.js` | The fixed layout the page carries: a column's width is counted from the model rather than measured in a laid-out cell, the clip keeps a caption inside its column, the sticky header and commit column keep their edges, and the table names its own width (`width: auto` would hand the layout back to the automatic algorithm) |
+| `test/page-grid.test.js` | The grid of the page as a window: what the reader sees is built and no more, the geometry of the styling against the script's, the rows and the columns that a scroll builds and drops, a number under its own caption, a file and a metric switched off, and every row of the window against the engine's own calculation |
+| `test/page-view.test.js` | The assembled page: pasted with no copy of the calculation, self-contained, the empty states, the styling, the switches, a click that makes no table and the carried totals against the engine's own sums — **deactivated** while the table is rebuilt, every check skipped with its reason in the file |
+| `test/page-tree.test.js` | The panel's file tree: folders by the project's paths, three states, the subtree, files and folders outside the report (a checkbox off, a place after the rest), the hidden names at the end of a level, the tree that opens folded and the unfolding the memory keeps, folding without a rebuild and a scroll a click does not touch — **deactivated** with the table, the checks skipped with their reason |
+| `test/page-choice.test.js` | The reader's choice and the work a click starts: the memory and a revisit, someone else's report, a foreign and a broken record, an address that stays clean, a link read at opening and on an open page, and the drawing of a long switch in a task of its own behind the stripe — **deactivated**: the choice and the link are the same, while the counts and the stripe are not |
+| `test/page-cols.test.js` | The fixed layout the page carries: a column's width is counted from the model rather than measured in a laid-out cell, the clip keeps a caption inside its column, the sticky header and commit column keep their edges, and the table names its own width — **deactivated** with the table: the columns are one fixed width now |
 | `test/module.test.js` | A module under a `.js` extension: measured without touching the settings; the stripper's guard is alive (proved by mutation) and does not accuse the innocent |
 | `test/guard.test.js` | Parsing a module: it goes through a thread, both paths give one verdict, the fallback works with the thread's file away, and hundreds of parses are cheaper than a launch |
 | `test/runner.test.js` | Reading a process's output: chunks are glued as buffers rather than appended to a string — a multi-byte character at a chunk border does not turn into two replacement characters |
@@ -651,7 +717,7 @@ The same release can be taken by a reference to the repository — installation
 registry, but stays tied to a revision:
 
 ```bash
-pnpm add -D github:vernikr/size-report#v2.6.0
+pnpm add -D github:vernikr/size-report#v2.8.0
 ```
 
 With no network (or nothing to fetch from codeload) — the tarball: `pnpm pack` in the package clone, then
@@ -663,7 +729,7 @@ the branch moves on the installation fails with `Could not resolve <sha> to a co
 observation rather than reasoning: the short pin `6530237` installed while `main` stood on it and stopped
 working at the very next commit, while the same sha in full installed. A branch name (`#main`) and a tag
 are both accepted, but a branch is a moving target and a tag is constant: this release stands on the tag
-`v2.6.0`, which is also the one in the example (forty characters work as well, but they have to be copied
+`v2.8.0`, which is also the one in the example (forty characters work as well, but they have to be copied
 out of the history by eye).
 
 The revision in the example is a part of the claim rather than decoration: what is described below is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vernikr/size-report",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.5.0",
+    "@vernikr/size-report": "2.7.0",
     "c8": "10",
     "dependency-cruiser": "17",
     "eslint": "^9.18.0",

package/src/css.js

@@ -7,8 +7,8 @@ import fs from 'node:fs';
  *
  * There are two sets, each with a role of its own:
  *
- *   1. `table.css` — the **table**: cell geometry, the sticky header and commit column, a commit's caption,
- *      the colours of the deltas.
+ *   1. `table.css` — the **table**: the geometry of the window (a column, a row, the header), the sticky header
+ *      and commit column, a commit's caption, the colours of the deltas.
  *   2. `page/app.css` — the page's look **on top of the table**: the canvas, the panel of choices, the empty
  *      states and the adaptation to a narrow window.
  *

package/src/data.js

@@ -10,19 +10,35 @@ import { TOOL_PKG } from './tool.js';
  * derived quantity at all. Everything the page counts itself begins where this module ends. */
 
 /* A file's category is only for the page's quick on/off buttons for a group: it does not reach the
- * numbers. The rule is one: the extension gives the category, everything else counts as code; a category
- * set in the column's settings outranks that rule, and the data says where it came from (`categoryBy`) — a
- * manual decision is explainable, while a table of extensions is a guess by file name. */
+ * numbers. The rule is: a category set in the column's settings outranks everything, a test is
+ * recognised by its path rather than by its extension, and for the rest the extension gives the
+ * category while everything else counts as code. The data says where the category came from
+ * (`categoryBy`) — a manual decision is explainable, while a table of extensions is a guess by file
+ * name. */
 export const CATEGORY_EXTS = {
   docs: ['.md', '.markdown', '.rst', '.txt', '.adoc'],
   chore: ['.json', '.yaml', '.yml', '.toml', '.ini', '.cfg', '.conf', '.lock', '.editorconfig'],
   assets: ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.woff', '.woff2', '.ttf', '.otf']
 };
-export const CATEGORY_ORDER = ['code', 'docs', 'chore', 'assets'];
+/* Tests stand next to code: they are files of the same kind (`*.test.js` is JavaScript too), and a reader
+ * switching code off wants to see what the tests weigh separately. */
+export const CATEGORY_ORDER = ['code', 'tests', 'docs', 'chore', 'assets'];
+
+/* What makes a file a test: the folder it lies in, wherever that folder is in the project, or a name
+ * carrying `.test` before its extension. Both are read off the path rather than off the extension, which is
+ * how a test is recognised in practice — a test may be written in any language the tool can measure. */
+const TEST_DIRS = ['test', 'tests', 'fixtures'];
+const TEST_NAME = /\.test\.[^./]+$/;
+
+function isTest(p) {
+  return p.split('/').some((part) => TEST_DIRS.indexOf(part) >= 0) || TEST_NAME.test(path.basename(p));
+}
 
 export function categoryOf(col) {
   if (col.category) return { key: col.category, by: 'config' };
-  const ext = path.extname(col.paths[col.paths.length - 1]).toLowerCase();
+  const last = col.paths[col.paths.length - 1];
+  if (isTest(last)) return { key: 'tests', by: 'auto' };
+  const ext = path.extname(last).toLowerCase();
   const known = CATEGORY_ORDER.find((key) => (CATEGORY_EXTS[key] || []).indexOf(ext) >= 0);
   return { key: known === undefined ? 'code' : known, by: 'auto' };
 }

package/src/locales.js

@@ -9,7 +9,7 @@ export const LOCALES = {
     commit: 'Коммит',
     total: 'Общий объём',
     now: 'сейчас',
-    categories: { code: 'Код', docs: 'Документация', chore: 'Служебные', assets: 'Ресурсы' },
+    categories: { code: 'Код', tests: 'Тесты', docs: 'Документация', chore: 'Служебные', assets: 'Ресурсы' },
     /* The page texts live inside the report file itself (a dictionary of their own, next to
      * the data), so changing a word costs a rebuild of the report — otherwise the file
      * drifts from the history. */
@@ -80,7 +80,7 @@ export const LOCALES = {
     commit: 'Commit',
     total: 'Total',
     now: 'now',
-    categories: { code: 'Code', docs: 'Documentation', chore: 'Chores', assets: 'Assets' },
+    categories: { code: 'Code', tests: 'Tests', docs: 'Docs', chore: 'Chores', assets: 'Assets' },
     page: {
       metrics: 'Metrics',
       files: 'Files',

package/src/page/app.css

@@ -116,7 +116,8 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 
 /* The table has a frame and a scroll of its own: the header and the commit column stick to it (the rules of stickiness
  * live in the shared part) rather than to the page, so scrolling sideways shows whose row it is while scrolling down shows
- * which column it is. */
+ * which column it is. What stands inside that frame is a window of the grid rather than the whole of it
+ * (`src/page/table.js`). */
 .shell {
   overflow: auto;
   max-height: calc(100vh - 300px);
@@ -127,7 +128,11 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 /* Numbers are denser than the page's text: there are more of them, they are shorter, and they are read by their digits. */
 #grid { font-size: 12.5px; }
 
-/* The message about a link that came in stands above the table, so that it cannot be missed, while it does not push the
+/* There is no stripe of progress over the page any longer, and that is a measurement rather than an omission: it stood
+ * over the browser's relayout of the whole table, and the table is built as a window now — a switch costs a few
+ * milliseconds (`src/page/table.js`), so an indicator would be a promise the page does not keep.
+ *
+ * The message about a link that came in stands above the table, so that it cannot be missed, while it does not push the
  * table away: one line in the place of the page. Its colour is the system one (the accent), for the page keeps no colours
  * of its own. */
 .notice {

package/src/page/app.js

@@ -1,19 +1,21 @@
 import { appUnpack } from './payload.js';
-import { appAddressDrop, appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
-import { appColumn, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
+import { appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
+import { appState, appTable, appWindow } from './table.js';
 import { appPanel, appPanelAll, appPanelState } from './panel.js';
 
-/* Assembling the report: the table is built once (`appTable` of the table chapter) and everything afterwards only
- * shows, hides and recounts. A click on any switch therefore costs a class, a number and the fields it reached — the
- * whole table used to be destroyed and built again, which was 81 % of the cost of a click and produced a hundred
- * thousand dead nodes for the collector to walk.
+/* Assembling the report: the table is a window of the grid (`appWindow` of the table chapter) and nothing is built
+ * that the reader cannot see. Two paths and no third, as before: `appPaint` draws the whole view (the first drawing, a
+ * record from the browser's memory, a link in the address), while a click on a box does the same work for the choice
+ * it made — and the difference between them is only how much of the view moved.
  *
- * Hence two paths and no third: `appPaint` draws the whole view (the first drawing, a record from the browser's
- * memory, a link in the address), while `appSwitch`, `appSwitchGroup` and `appSwitchMetric` are what one click on a
- * box does. Neither makes a node.
+ * What a click costs now: the window of rows and columns is built again — a few hundred cells, measured at 1–5 ms on
+ * this repository's report — instead of a class on every node of a column of a table the browser lays out whole. The
+ * stripe that used to stand over a long drawing (`src/page/work.js`) is gone with the reason for it: a switch no
+ * longer has anything to wait for, and an indicator over work that is over before it could be painted would be a
+ * promise the page does not keep.
  */
 
-// The table's cache of node references: made once, at the first drawing.
+// The table's window: made once, at the first drawing.
 let appCache = null;
 
 /* The note under the table: what a row is and how the report was made. It does not depend on the choice, so it is
@@ -24,66 +26,59 @@ function appNote() {
     .replace('{command}', appData.report.fixCommand);
 }
 
-/* What the empty states are told: how many metrics and how many files are left. The table stands there in either
- * case (it is built once) — the words are about what is shown. */
+/* What the empty states are told: how many metrics and how many files are left. The window stands there in either
+ * case — the words are about what is shown. */
 export function appCounts() {
   appState(appData.metrics.filter((m) => appView.metrics[m.key] === true).length,
     appView.files.filter((on) => on === true).length);
 }
 
-/* The whole view drawn: every column, the totals of the whole selection, the metrics, the empty states and the panel's
- * fields. This is what a link, a record from the memory and the first drawing need — and it makes no node either. */
+/* The whole view drawn: the window of the grid, the metrics, the empty states and the panel's fields. This is what a
+ * link, a record from the memory and the first drawing need. */
 export function appPaint() {
-  appData.files.forEach((_f, i) => appColumn(appCache, i, appView.files[i]));
-  appTotalsReset(appCache);
-  appMetrics(appCache);
+  appWindow(appCache, true);
   appCounts();
   appPanelAll();
   appWrite();
 }
 
-/* One file switched by the reader: the view, its column, its share of the totals and the fields it shows in — each in
- * its own place. The message about a link fades here: by this action the reader has read it. */
+/* One file switched by the reader: the view, the window (its column is simply not among the columns that are built),
+ * the fields it shows in. The message about a link fades here: by this action the reader has read it. */
 export function appSwitch(i, on) {
   if (appView.files[i] === on) return;
   appView.files[i] = on;
-  appColumn(appCache, i, on);
-  appContribute(appCache, i, on);
-  appTotals(appCache);
+  appWindow(appCache, true);
   appCounts();
   appPanelState([i]);
   appWrite();
   appNotice('');
 }
 
-/* A group switched at once — a folder or a category: the same work per file, then the totals once and the fields of
- * the files the choice really reached (switching a folder on when a part of it was already on touches only the rest,
- * and a field that did not move is not written). */
+/* A group switched at once — a folder or a category: the same work per file, then the fields of the files the choice
+ * really reached (switching a folder on when a part of it was already on touches only the rest, and a field that did
+ * not move is not written). The columns of the whole group leave or enter the window together. */
 export function appSwitchGroup(indexes, on) {
   const touched = indexes.filter((i) => appView.files[i] !== on);
-  touched.forEach((i) => {
-    appView.files[i] = on;
-    appColumn(appCache, i, on);
-    appContribute(appCache, i, on);
-  });
-  appTotals(appCache);
+  touched.forEach((i) => { appView.files[i] = on; });
+  appWindow(appCache, true);
   appCounts();
   appPanelState(touched);
   appWrite();
   appNotice('');
 }
 
-/* One metric switched: a class on the table and the headings' `colSpan`. The totals do not move with a metric — they
- * are sums over files — and the metric's own field is the box the reader just clicked. */
+/* One metric switched: the columns of that metric are not among the columns that are built any longer, so this is the
+ * same drawing as a file's switch. The metric's own field is the box the reader just clicked. */
 export function appSwitchMetric() {
-  appMetrics(appCache);
+  appWindow(appCache, true);
   appCounts();
   appWrite();
   appNotice('');
 }
 
 /* The first drawing: the choice is already in the view (the link and the memory are applied above), the panel is
- * built to match it, the table is built once — every column of every file — and the view is painted over it. */
+ * built to match it, the window of the grid is built — the columns the choice leaves and the rows the shell shows —
+ * and the panel's fields are written from the view. */
 function appFirst() {
   appPanel();
   appCache = appTable(document.getElementById('grid'));
@@ -110,19 +105,18 @@ async function appBegin() {
     return;
   }
   const appStart = appLinkUse();
-  if (appStart === 'ours') appTransient = true;
-  else if (appStart === 'refused') appForeign = true;
+  /* A link that came in is the sender's choice rather than the reader's: while it is drawn, the memory is not touched
+   * (`appWrite`), so opening a link does not make it the reader's own. */
+  appTransient = appStart === 'ours';
   if (appStart !== 'ours') {
     const appSaved = appRead();
     if (appSaved !== null) appApply(appSaved);
   }
-  /* The folded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
+  /* The unfolded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
    * else's link is open (otherwise a link sent over would unfold the tree again on every visit). */
   appFoldRead();
   appFirst();
   appBooted = true;
-  appStartup = false;
-  appForeign = false;
   appTransient = false;
 }
 
@@ -138,13 +132,10 @@ window.addEventListener('hashchange', () => {
   /* The first drawing has not happened yet: the address the page was opened with is the business of that drawing,
    * and a change that arrives before it has drawn nothing to replace. */
   if (!appBooted) return;
-  /* An address that came in from outside is read first and a write this page was still holding is dropped: the reader
-   * has the address they were sent, not the one the previous click armed (see `appAddressDrop`). */
-  appAddressDrop();
-  const state = appLinkUse();
-  if (state === 'refused') appForeign = true;
-  appTransient = state === 'ours';
+  /* An address that came in from outside is read here the way it is read at opening, and a link is not the reader's
+   * choice until he changes something — the memory stays his own. The address itself is never rewritten: the page has
+   * no business in the tab's title bar, and what a link holds is read rather than made. */
+  appTransient = appLinkUse() === 'ours';
   appPaint();
-  appForeign = false;
   appTransient = false;
 });

package/src/page/build.js

@@ -24,8 +24,10 @@ export function esc(s) {
  *
  * The chapters follow the page's subjects, and the order of pasting (the list below) is the order of declarations in
  * the assembled program: the calculation first, then the choice's state, the nodes, the panel, the table and the
- * assembling. The chapters are **slices of one text**: pasting glues them in a row, so the assembled page would stay
- * the same if the chapters became one file again. */
+ * assembling. A chapter that is gone leaves the page with one subject fewer rather than with a hole: the stripe over
+ * a long drawing left with the freeze it was drawn for (`src/page/app.js` says what a switch costs now). The
+ * chapters are **slices of one text**: pasting glues them in a row, so the assembled page would stay the same if
+ * the chapters became one file again. */
 export function stripModules(src) {
   return src.split('\n')
     .filter((line) => !/^import\s.*;\s*$/.test(line))
@@ -257,7 +259,7 @@ export function pageHtml(data, cfg) {
     + '<p class="sub">' + esc(subText(data, loc.page)) + '</p>\n</header>\n'
     + '<div id="panel" class="panel"></div>\n'
     + '<p id="notice" class="notice" hidden></p>\n'
-    + '<div id="shell" class="shell"><table id="grid"></table></div>\n'
+    + '<div id="shell" class="shell"><div id="grid" class="grid"></div></div>\n'
     + '<p id="state" class="state" hidden></p>\n'
     + '<p id="note" class="note"></p>\n'
     + '<script type="application/octet-stream" id="data" data-pack="base64+gzip">'