@vernikr/size-report 2.7.0 → 2.8.0

package/README.md

@@ -10,7 +10,7 @@ shows.
 
 ## Status
 
-**Release 2.7.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,26 @@ 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
@@ -217,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
@@ -336,35 +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 switch draws its columns in one task, with a stripe over the page while it is going on.** The class
-changes are cheap — about 2 µs a node, so a category of this repository's report (73 columns, 55 042 nodes) is
-120 ms of them — while the browser lays the whole table out again for any change of a column's visibility, and
-that is where the seconds are (`probes/step-12-columns.mjs`). So `src/page/work.js` asks for the drawing once:
-work short enough to be over before the browser could paint goes on the click itself, and a longer one goes to
-the next task with the stripe over the top edge of the window. **The stripe carries no share, and that is the
-measurement rather than a shortcut**: inside one task the browser cannot repaint, so a length would be a length
-nobody could keep; what moves is an indeterminate highlight. A queue worked off between timeouts was written
-first and refused by the same probe — 37 slices paid the table's relayout 37 times (2.5–4 s each, 169 layouts
-against 1) — and the numbers stay out of all of it, because the totals are counted on the click itself, where
-they cost arithmetic rather than nodes. Nothing is asked for a column that is already right either
-(`appColumnStale`): a report opened with everything switched on has nothing to draw, and a record from the
-memory or a link queues exactly the columns that differ from it. What guards the two halves is
-`test/page-choice.test.js` — a long drawing that leaves the click's line at once, runs in the next task and
-takes the stripe away, and a short one that is over before the click returns.
-
-**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
@@ -374,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
@@ -557,15 +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", 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, 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, 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, and the count answerable for how many nodes a column holds |
-| `src/page/work.js` | The page's long drawing: the columns of a switch in one task, on the click when they are few and in the next task with an indeterminate stripe over the top edge of the window when they are many — one task because the browser's relayout of the table is the price, and it is paid once (this is where the measurement that refused the slices stands) |
-| `src/page/app.js` | Assembling and starting the page: the first drawing, then a switch that counts the numbers on the click, hands the columns to the queue and writes the fields it reached without making a node; an anchor change; pasted into the assembled page |
+| `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 |
@@ -597,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 |
@@ -613,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), 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 |
-| `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 |
-| `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 |
@@ -696,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.7.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
@@ -708,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.7.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.7.0",
+  "version": "2.8.0",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.6.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/locales.js

@@ -53,9 +53,6 @@ export const LOCALES = {
        * таблица не сказала бы читателю ничего. */
       unpack: 'Данные отчёта сжаты, а браузер не умеет их распаковать: в нём нет DecompressionStream. '
         + 'Обновите браузер — таблицу показывать не из чего.',
-      /* Полоска вверху страницы: имя для тех, кто читает страницу не глазами, — она показывает,
-       * что идёт отрисовка колонок, а не что отчёт завис. */
-      working: 'отрисовка колонок',
       note: 'Абсолютные размеры стоят один раз — в строке «{now}». Строк: {rows}: коммиты без '
         + 'изменения объёма и коммиты, тронувшие только выключенные файлы, строк не получают. '
         + 'Собрано из истории git: {command}.'
@@ -116,9 +113,6 @@ export const LOCALES = {
        * browser without `DecompressionStream` gets instead of an empty table. */
       unpack: 'The report\u2019s data is compressed and this browser cannot unpack it: there is no '
         + 'DecompressionStream. Update the browser — there is nothing to build the table from.',
-      /* The bar at the top of the page: a name for whoever reads the page without eyes — it shows
-       * that the columns are being drawn rather than that the report has hung. */
-      working: 'drawing the columns',
       note: 'Absolute sizes appear once — in the “{now}” row. Rows: {rows}: commits that change '
         + 'no number, and commits touching only the disabled files, get no row. '
         + 'Collected from git history: {command}.'

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,34 +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 stripe of a long drawing: over the window's own top edge for as long as a switch is being drawn (`src/page/work.js`).
- * It is fixed rather than laid out — the page's shape is a grid of five rows, and a stripe appearing inside it would move the
- * numbers every time a switch is drawn — and it is taken away as soon as the drawing is over, so the reader never sees it at
- * rest. It **does not fill**: the drawing is one task of the browser's own layout, inside which nothing can repaint, so a
- * share would be a share nobody has (`src/page/work.js` says what was measured). What moves instead is an indeterminate
- * stripe — a travelling highlight, which is what this state is in the language of progress — and it moves by a transform,
- * so the stripe itself costs the compositor rather than the page. Its colour is the system accent, the one colour the page
- * uses for anything but the numbers, and it carries a role and a name, because a reader without eyes has to be told that
- * work is going on rather than that the report is broken. */
-.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 3px; overflow: hidden; }
-.bar[hidden] { display: none; }
-.bar > i {
-  display: block;
-  width: 30%;
-  height: 100%;
-  background: AccentColor;
-  animation: bar-run 1.1s linear infinite;
-}
-@keyframes bar-run {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(333%); }
-}
-/* Whoever asked the system for less motion gets a still stripe: the state is what matters, not its travelling. */
-@media (prefers-reduced-motion: reduce) {
-  .bar > i { animation: none; width: 100%; }
-}
-
-/* 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,42 +1,23 @@
 import { appUnpack } from './payload.js';
 import { appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
-import { appColumn, appColumnSize, appColumnStale, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
-import { appDraw } from './work.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. The numbers are counted on the click itself — that is arithmetic over the data — while the nodes of the
- * columns are handed to the work chapter (`appDraw`), which draws the short work on the click and the long one in the
- * next task with a stripe over the page (`src/page/work.js` says what was measured: the price of a switch is the
- * browser's own relayout of the table, and it is paid once here rather than once per slice). Neither path 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;
 
-/* One file's column drawn from the view — the state is read when the slice runs rather than kept from the click that
- * queued it, so a click that arrives while the queue is running is drawn by the next slice rather than after it. */
-function appDrawColumn(i) {
-  appColumn(appCache, i, appView.files[i] === true);
-}
-
-/* The columns of a switch that have to be drawn, as the units the work chapter weighs (`{i, units}` — the file and the
- * nodes of its column). Only the columns whose nodes are out of step with the view are asked for (`appColumnStale`): a
- * report opened with everything switched on has nothing to draw, and a column that is already right would cost its
- * nodes again. The count is the table's (`appColumnSize`), because the table is the only place that knows how many
- * nodes a column has. */
-function appColumns(indexes) {
-  const todo = indexes.filter((i) => appColumnStale(appCache, i));
-  appDraw(appDrawColumn, todo.map((i) => ({ i: i, units: appColumnSize(appCache, i) })));
-}
-
 /* 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
  * written once — with the table rather than with every drawing of it. */
 function appNote() {
@@ -45,68 +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() {
-  appColumns(appData.files.map((_f, i) => i));
-  appTotalsReset(appCache);
-  appMetrics(appCache);
+  appWindow(appCache, true);
   appCounts();
   appPanelAll();
   appWrite();
 }
 
-/* One file switched by the reader: the view, its share of the totals, the fields it shows in and its column — the
- * last through the queue, because a column may be long. 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;
-  appContribute(appCache, i, on);
-  appTotals(appCache);
+  appWindow(appCache, true);
   appCounts();
   appPanelState([i]);
   appWrite();
   appNotice('');
-  appColumns([i]);
 }
 
-/* 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). The columns of the whole group go into the queue together, so the bar
- * counts them as one piece of work. */
+/* 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;
-    appContribute(appCache, i, on);
-  });
-  appTotals(appCache);
+  touched.forEach((i) => { appView.files[i] = on; });
+  appWindow(appCache, true);
   appCounts();
   appPanelState(touched);
   appWrite();
   appNotice('');
-  appColumns(touched);
 }
 
-/* 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'));

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))
@@ -43,7 +45,7 @@ export function pageSource(file) {
 /* The list of chapters lives here rather than in the tests: one copy for the builder and for the guard
  * (`test/page-view.test.js` reads the same program and compares it with the sources). The payload chapter comes
  * first of the page's own: it is what turns the block into the data everything else reads. */
-export const PAGE_PARTS = ['./payload.js', './state.js', './dom.js', './work.js', './panel.js', './table.js', './app.js'];
+export const PAGE_PARTS = ['./payload.js', './state.js', './dom.js', './panel.js', './table.js', './app.js'];
 
 /* The form the artifact carries: the same stripping the `min` metric counts (`src/strip.js`) — comments out,
  * indentation and blank lines out — applied to what is pasted, while the sources on disk keep everything: they are
@@ -255,14 +257,9 @@ export function pageHtml(data, cfg) {
     + squeezedCss(TABLE_CSS) + '\n' + squeezedCss(PAGE_CSS) + '\n</style>\n</head>\n<body>\n'
     + '<header>\n<h1>' + esc(data.report.heading) + '</h1>\n'
     + '<p class="sub">' + esc(subText(data, loc.page)) + '</p>\n</header>\n'
-    /* The stripe of the drawing stands first in the page and is fixed to the window's top edge rather than laid out
-     * with the rest: the page's shape is a grid of five rows (`src/page/app.css`), and a stripe that appeared and
-     * disappeared inside it would move the numbers under the reader's eyes every time a switch is drawn. It holds an
-     * empty child rather than a share: the length of an indeterminate stripe is the styling's business. */
-    + '<div id="bar" class="bar" role="progressbar" aria-label="' + esc(loc.page.working) + '" hidden><i></i></div>\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">'