@vernikr/size-report 2.8.1 → 2.8.3

package/README.md

@@ -10,7 +10,7 @@ shows.
 
 ## Status
 
-**Release 2.8.1 (2026-09-18).** The tool lives as a package of its own: the registry name is
+**Release 2.8.3 (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,38 @@ 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.3 is about what a sideways scroll of the report costs, and its figures are measured rather than retold. **A step
+sideways moves the window instead of building it:** a row is made once and lives through the move, keeping its node and
+its numbers — the window's columns are the range of that row's numbers, so the columns that entered it are made and the
+ones that left are dropped, the header's line of names and its line of metrics by the same rule. A switch of the
+reader's own and the shell's resize are the one thing that cannot be a move — a column that is not built cannot be
+shown — and they build the window from nothing as they did. **Measured on this repository's own report in live Chrome**
+(`probes/step-12-window.mjs`, two rounds, 1440 × 900): the page's own handling of one step **10.4 → 0.6 ms** (worst
+19.2 → 3.6) and the layout the step forces **14.4 → 5.9 ms**; over a sweep of forty steps the browser's own accounting
+gives layout **0.605 → 0.246 s**, style recalculation 0.169 → 0.056 s and task time **1.281 → 0.350 s**. The checks go
+86 → **87** in the fast profile and 191 → **192** in the full one: `test/page-grid.test.js` holds the rule by node
+identity — a page that built the same numbers again would read the same — and by the numbers of the window built at
+that place in one leap. The figures and the reasoning stand in `worklog/0211-sideways-step.md`.
+
+2.8.2 is about the page's own sources and the checks that guard them, and its figures are measured rather than retold.
+**The four page suites that went quiet with the `<table>` are alive again against the window:** `test/page-view.test.js`,
+`page-cols`, `page-tree` and `page-choice` read the grid and the panel they guard rather than markup that no longer
+exists, and what they promise is what they hold — the pasted program with no second calculation, the sparse block, the
+recount by the choice, the order of the columns, the tree's folds and its memory, the link's refusals. **Their readers
+are no longer each suite's own:** `tools/page-harness.js` keeps one set of them (a file's path at HEAD, the rows the
+window built, the numbers of a row and its captions, a folder's and a category's switch, the place the shell stands at),
+and the copies the suites carried left with it. **And the page's chapters shed the duplication the same request
+found:** the choice's record and the folded tree share one reading and one writing of the browser's memory
+(`appLoad`/`appKeep`), a folder's two figures come from one walk of its subtree (`appSub`), the three walks over the
+metrics and the files of a record became the panels' one question asked twice (`appReach`), and the three paths of a
+click became one drawing (`appChanged`) — while two rules that never took effect went with them (a dead `.cap` of the
+styling, an undefined colour under the folding sign). Measured in bytes for the same history: the chapters **−745 B**
+(37 lines), the suites **−18 462 B** (251 lines), the harness **+4 328 B** — the tree loses **14 879 B and 220 lines**,
+and the artifact **85 730 → 84 991 B**, its program and its styling being exactly what the chapters are. The checks go
+89 → **86** in the fast profile and 194 → **191** in the full one: what a reader of the page does is one place now
+rather than five, and a check that read the table it no longer has is not a check. The figures and the reasoning stand
+in `worklog/0210-page-suites-on-the-window.md`.
+
 2.8.1 is the drawing of the page put right after its table became a window, and its figures are measured rather than
 retold. **The panel and the table were sharing one class:** the table's rows were styled by a bare `.row` while the
 panel's own rows are `.panel .row`, so the table's rule took the metrics row and the three method lines out of the flow
@@ -49,11 +81,10 @@ stripe over a drawing is gone with the freeze it was drawn for**: a switch costs
 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.
+bytes. The checks of the old table went quiet with it, each naming its reason, and 2.8.2 brought them back against the
+window; `test/page-grid.test.js` is what guards the window itself. The figures and the reasons 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
@@ -253,8 +284,8 @@ commits and installs hooks; the reason for each expensive file is named line by
 
 | Run | Command | Checks |
 |---|---|---|
-| Fast — every edit | `pnpm test` | **89 of 194** |
-| Full — release and CI | `pnpm test:all` | **194** |
+| Fast — every edit | `pnpm test` | **87 of 192** |
+| Full — release and CI | `pnpm test:all` | **192** |
 
 No check is lost or weakened: the full run starts every file, 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
 expensive work cannot quietly move into the fast one. Two declarations guard that:
@@ -389,7 +420,10 @@ right edge of the pinned commit column rather than under it, and every line of t
 cell, along a group's left edge — is one pixel of one colour: a heavier line would promise a hierarchy to work out
 rather than read. The geometry is four figures — a column, a row, the header, the pinned column — 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.
+together. **A step sideways moves that window rather than building it:** the rows live through the move and only the
+columns that entered are made, at 10.4 → **0.6 ms** for the page's own handling of the step, 14.4 → **5.9 ms** for the
+layout it forces and 1.281 → **0.350 s** of task time over a sweep of forty steps
+(`probes/step-12-window.mjs`).
 
 **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
@@ -568,7 +602,7 @@ acceptance for each.
 | `tools/parity-freeze.js` | Takes the parity reference (`pnpm run parity`): with the frozen copy, at the project revision from the manifest — `--json`, the config, the artifact's hash, the tool's hash |
 | `tools/make-fixture.js` | Assembles the synthetic fixture (`pnpm run fixture`): a deterministic history with traps plus the reference numbers |
 | `tools/synthetic/` | The subjects of that assembly, one per matter: `repo.js` — how git is spoken to (pinned time, author, settings), `content.js` — what the files hold, `history.js` — which commits come of it, `note.js` — the fixture's note with the list of traps |
-| `probes/` | The scripted measurements behind `plans/2026-09-17-page-perf/`: one file per step, run by hand against live Chrome at the debug port — the fixed layout, where `content-visibility` acts at all, and the two border models with their pixels (`probes/README.md`). Outside the sensors' paths on purpose: they measure the product rather than being part of it, and a suite cannot see layout, paint or a browser's own skipping |
+| `probes/` | The scripted measurements behind `plans/2026-09-17-page-perf/`: one file per step, run by hand against live Chrome at the debug port — the fixed layout, where `content-visibility` acts at all, the price of a switch and of a step sideways — (`probes/README.md`). Outside the sensors' paths on purpose: they measure the product rather than being part of it, and a suite cannot see layout, paint or a browser's own skipping |
 | `tools/parity-live.js` | Compares the engine with the live project on a clone: the numbers and the self-contained report at the path the consumer's settings give (`pnpm run parity:live`) |
 | `tools/pack-check.js` | Assembles the tarball and checks that everything works from it: all sources arrived, the numbers and the report as from the repository (`pnpm run pack:check`) |
 | `tools/check-standards.js` | Checks that both references reproduce: a re-take goes nowhere and is compared with what is committed (our files byte for byte, the bundle by content), and that the live-history bundle carries `HEAD` (`pnpm run check:standards`) |
@@ -604,7 +638,7 @@ acceptance for each.
 | `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 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 order of the columns — 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/table.js` | The page's table as a window: the rows and the columns the reader can see (plus four beyond each edge), moved by a scroll rather than built again (a row lives through a step sideways and only the columns that entered it are made), a cell, a commit's caption, the header, the empty states and the order of the columns — 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 |
@@ -637,7 +671,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 seven 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, one set of readers for every page suite (a file's path at HEAD, the rows the window built and their numbers, the captions over them, the order of the columns, a folder's and a category's switch, the place the shell stands at), 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 |
@@ -654,10 +688,10 @@ acceptance for each.
 | `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-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, every row of the window against the engine's own calculation, and the drawing's own rules — the order of the columns by the numbers, one border, the header's rows of one height, and the panel out of the shared styling's reach |
-| `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/page-view.test.js` | The assembled page: pasted with no copy of the calculation, self-contained, the sparse block, the recount by the choice, every total of the window against the engine's own sums, no mark of precision left on a cell, the shared styling pasted once and the delta colour set once, the empty states, and the switches' focus |
+| `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: 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 a host without an unpacker that is told so in words |
+| `test/page-cols.test.js` | The columns of the grid: their order by the newest row a file's numbers moved in, a caption over exactly the metrics of its group, and a choice that moves no other column |
 | `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 |
@@ -737,7 +771,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.8.1
+pnpm add -D github:vernikr/size-report#v2.8.3
 ```
 
 With no network (or nothing to fetch from codeload) — the tarball: `pnpm pack` in the package clone, then
@@ -749,7 +783,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.8.1`, which is also the one in the example (forty characters work as well, but they have to be copied
+`v2.8.3`, 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.8.1",
+  "version": "2.8.3",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.8.0",
+    "@vernikr/size-report": "2.8.2",
     "c8": "10",
     "dependency-cruiser": "17",
     "eslint": "^9.18.0",

package/src/page/app.css

@@ -45,7 +45,7 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 }
 .panel fieldset { margin: 0; padding: 0; border: 0; }
 .panel fieldset + fieldset { margin-top: 10px; }
-.panel legend, .panel .cap {
+.panel legend {
   padding: 0;
   color: var(--muted);
   font-size: 11px;
@@ -53,7 +53,6 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
   text-transform: uppercase;
   letter-spacing: .07em;
 }
-.panel .cap { display: block; margin-bottom: 4px; }
 .panel .row { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; }
 /* The way of counting is visible text under the switches: the token dictionary and the way of compression come from the
  * settings of the run rather than from a checkbox, so pointing a mouse is not enough — the reader has to see what produced
@@ -91,7 +90,7 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
   cursor: pointer;
   user-select: none;
 }
-.panel .tree li > .fold:hover { color: var(--ink); }
+.panel .tree li > .fold:hover { color: CanvasText; }
 
 /* A switch is a label around an input: one label and one click target, which is why a mouse, the keyboard (`Space` on the
  * input) and assistive technology all reach it. */
@@ -131,11 +130,7 @@ 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; }
 
-/* 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
+/* 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

@@ -4,15 +4,11 @@ import { appState, appTable, appWindow } from './table.js';
 import { appPanel, appPanelAll, appPanelState } from './panel.js';
 
 /* 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.
- *
- * 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.
+ * that the reader cannot see. 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 a click on a box does the same work for the choice it made — the
+ * difference between them is only how much of the view moved. Neither has anything to wait for: a switch builds the
+ * window of the grid, a few hundred cells and milliseconds, so the page needs no indicator and keeps no promise it
+ * cannot measure.
  */
 
 // The table's window: made once, at the first drawing.
@@ -42,38 +38,36 @@ export function appPaint() {
   appWrite();
 }
 
-/* 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;
+/* One drawing after a click, whatever was clicked: the window of the grid (the columns of what is switched off are
+ * simply not among the columns that are built), the counts of the empty states, the fields the choice really reached
+ * (`touched` — a whole group is one click, and a field that did not move is not written) and the memory. The message
+ * about a link fades here: by this action the reader has read it. */
+function appChanged(touched) {
   appWindow(appCache, true);
   appCounts();
-  appPanelState([i]);
+  if (touched.length > 0) appPanelState(touched);
   appWrite();
   appNotice('');
 }
 
-/* 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. */
+// One file switched by the reader. A switch that changes nothing is not a change: the click costs no drawing.
+export function appSwitch(i, on) {
+  if (appView.files[i] === on) return;
+  appView.files[i] = on;
+  appChanged([i]);
+}
+
+/* A group switched at once — a folder or a category: the same work per file, 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). */
 export function appSwitchGroup(indexes, on) {
   const touched = indexes.filter((i) => appView.files[i] !== on);
   touched.forEach((i) => { appView.files[i] = on; });
-  appWindow(appCache, true);
-  appCounts();
-  appPanelState(touched);
-  appWrite();
-  appNotice('');
+  appChanged(touched);
 }
 
-/* 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. */
+/* One metric switched. Only the panel's metric box shows it, and that box is the one the reader just clicked. */
 export function appSwitchMetric() {
-  appWindow(appCache, true);
-  appCounts();
-  appWrite();
-  appNotice('');
+  appChanged([]);
 }
 
 /* The first drawing: the choice is already in the view (the link and the memory are applied above), the panel is

package/src/page/panel.js

@@ -22,19 +22,18 @@ function appUnmeasuredBox(entry) {
     + (entry.why === 'rule' ? appUi.notMeasuredRule : appUi.notMeasuredChoice));
 }
 
-/* Every measured file of a subtree — what a folder's switch controls: a file outside the report has nothing to
- * switch. */
-function appIndexes(node) {
-  const out = node.files.slice();
-  node.dirs.forEach((sub) => { out.push(...appIndexes(sub)); });
-  return out;
-}
-
-/* How many files a subtree holds — including the ones that made it into no report. */
-function appCount(node) {
-  let n = node.files.length + node.others.length;
-  node.dirs.forEach((sub) => { n += appCount(sub); });
-  return n;
+/* A subtree in the two figures its folder shows: the measured files its checkbox controls, and how many files the
+ * folder holds at all — including the ones that made it into no report. One walk, because the two are asked together
+ * (a folder of five files with two measured reads "2/5"). */
+function appSub(node) {
+  const idx = node.files.slice();
+  let total = node.files.length + node.others.length;
+  node.dirs.forEach((sub) => {
+    const inner = appSub(sub);
+    idx.push(...inner.idx);
+    total += inner.total;
+  });
+  return { idx: idx, total: total };
 }
 
 /* A tree node: the measured files (columns), the project's other files and the subfolders. */
@@ -48,8 +47,9 @@ function appNode() {
  * without a single measured file stays in place with its checkbox off and unavailable: there is nothing to switch on
  * in it. */
 function appDirHead(name, here, sub) {
-  const idx = appIndexes(sub);
-  const total = appCount(sub);
+  const own = appSub(sub);
+  const idx = own.idx;
+  const total = own.total;
   const label = name + '/';
   let head;
   if (idx.length === 0) {
@@ -141,13 +141,14 @@ function appLeaf(leaf) {
 function appTreeList(node, prefix) {
   const list = appEl('ul', 'tree');
   const dirs = [...node.dirs.keys()].sort(appName)
-    .map((name) => ({ name: name, sub: node.dirs.get(name), inReport: appIndexes(node.dirs.get(name)).length > 0 }));
+    .map((name) => ({ name: name, sub: node.dirs.get(name), inReport: appSub(node.dirs.get(name)).idx.length > 0 }));
   const leaves = appLeaves(node);
   const inside = leaves.filter((leaf) => leaf.entry === null);
+  const outside = leaves.filter((leaf) => leaf.entry !== null);
   dirs.filter((d) => d.inReport).forEach((d) => list.appendChild(appDir(d.name, d.sub, prefix)));
   inside.forEach((leaf) => list.appendChild(appLeaf(leaf)));
   dirs.filter((d) => !d.inReport).forEach((d) => list.appendChild(appDir(d.name, d.sub, prefix)));
-  leaves.filter((leaf) => leaf.entry !== null).forEach((leaf) => list.appendChild(appLeaf(leaf)));
+  outside.forEach((leaf) => list.appendChild(appLeaf(leaf)));
   return list;
 }
 
@@ -237,10 +238,10 @@ function appRowBoxes(box) {
 }
 
 // A folder's field from its files: all on — checked, some — the third state, none — simply unchecked.
-function appDirState(box) {
-  const boxes = appRowBoxes(box);
+function appDirState(path) {
+  const boxes = appRowBoxes(appFields.dir[path]);
   const on = boxes.filter((b) => b.checked).length;
-  const input = box.querySelector('input');
+  const input = appFields.dir[path].querySelector('input');
   input.checked = on === boxes.length;
   input.indeterminate = on > 0 && on < boxes.length;
 }
@@ -267,29 +268,17 @@ function appDirPath(path) {
   return parts.slice(0, -1).map((_part, i) => parts.slice(0, i + 1).join('/'));
 }
 
-/* A click reaches a folder's field through the files below it: every folder on the path of a switched file shows the
- * share of what is left on. A folder without measured files has a field of its own too — it is off and unavailable,
- * which is not the reader's state and must not be overwritten here. */
-function appDirsOf(indexes) {
-  const seen = {};
-  indexes.forEach((i) => {
-    appDirPath(appFileAt(i)).forEach((path) => {
-      if (seen[path] === true) return;
-      seen[path] = true;
-      if (appFields.dir[path] !== undefined) appDirState(appFields.dir[path]);
-    });
-  });
-}
-
-// The same for the quick buttons of the categories: every category one of the switched files belongs to.
-function appCatsOf(indexes) {
+/* A click reaches the fields of a folder and of a category through the files below them — one walk for both, because
+ * it is one question: which groups the reader sees hold a switched file, and what do they show now. A field that is not
+ * there is left alone: a folder without measured files has a box of its own, off and unavailable, which is not the
+ * reader's state. */
+function appReach(indexes, fields, namesOf, stateOf) {
   const seen = {};
-  indexes.forEach((i) => {
-    const key = appData.files[i].category;
-    if (seen[key] === true || appFields.cat[key] === undefined) return;
-    seen[key] = true;
-    appCatState(key);
-  });
+  indexes.forEach((i) => namesOf(i).forEach((name) => {
+    if (seen[name] === true || fields[name] === undefined) return;
+    seen[name] = true;
+    stateOf(name);
+  }));
 }
 
 /* What a click changed, written where it stands: the files' own boxes, then the fields of the folders and categories
@@ -299,8 +288,8 @@ export function appPanelState(indexes) {
     const input = appFields.file[i];
     if (input !== undefined) input.checked = appView.files[i] === true;
   });
-  appDirsOf(indexes);
-  appCatsOf(indexes);
+  appReach(indexes, appFields.dir, (i) => appDirPath(appFileAt(i)), appDirState);
+  appReach(indexes, appFields.cat, (i) => [appData.files[i].category], appCatState);
 }
 
 /* The whole panel from the view: what a link, a record from the memory and the first drawing need. The metric boxes
@@ -309,5 +298,5 @@ export function appPanelAll() {
   appData.categories.forEach((c) => appCatState(c.key));
   appData.metrics.forEach((m) => { appFields.metric[m.key].checked = appView.metrics[m.key] === true; });
   appData.files.forEach((_f, i) => { appFields.file[i].checked = appView.files[i] === true; });
-  Object.keys(appFields.dir).forEach((path) => appDirState(appFields.dir[path]));
+  Object.keys(appFields.dir).forEach((path) => appDirState(path));
 }

package/src/page/state.js

@@ -106,15 +106,16 @@ function appPassport() {
   return appPassportValue;
 }
 
-/* One record of the choice for everything: it goes both into the memory and into the address, so there are no two formats
- * of one state. Only what is switched off is kept, by name: "switched on" and "no record" are the same state, which is
- * why turning every checkbox back on removes the record instead of leaving a trace indistinguishable from a choice. */
+/* One record of the choice: only what is switched off is kept, by name. "Switched on" and "no record" are the same
+ * state, hence `null` rather than an empty record — turning every checkbox back on removes the record instead of leaving
+ * a trace indistinguishable from a choice. */
 function appRecord() {
   const metrics = {};
   const files = {};
   appData.metrics.forEach((m) => { if (!appView.metrics[m.key]) metrics[m.key] = false; });
   appData.files.forEach((_f, i) => { if (!appView.files[i]) files[appFileAt(i)] = false; });
-  return { v: 1, passport: appPassport(), metrics: metrics, files: files };
+  const empty = Object.keys(metrics).length === 0 && Object.keys(files).length === 0;
+  return empty ? null : { v: 1, passport: appPassport(), metrics: metrics, files: files };
 }
 
 // Whether a record is ours and of the right format — one rule for the memory and the address alike.
@@ -122,24 +123,40 @@ function appRecordOk(rec) {
   return rec !== null && typeof rec === 'object' && rec.v === 1 && rec.passport === appPassport();
 }
 
-/* The record goes into the browser's memory and nowhere else: it is written on the click itself, which is what survives
- * a closing, and the page's address keeps a clean tail — the report is a local page whose address is copied as it is,
- * and a reader's choice belongs in the browser that made it rather than in the tab's title bar. What a link sent from an
- * earlier release holds is still read (`appLinkUse`), and it is not written into the reader's memory: what came in is
- * not his choice until he changes something. */
-export function appWrite() {
-  if (appTransient) return;
-  const rec = appRecord();
-  const empty = Object.keys(rec.metrics).length === 0 && Object.keys(rec.files).length === 0;
+/* A record into the browser's memory or out of it, and what is read back from it: the two halves of the memory, written
+ * once, because the page keeps two records of the same kind under two keys — the choice and the unfolded tree — and
+ * their rules are one. Nothing but the browser's memory is written: it is written on the click itself, which is what
+ * survives a closing, and the page's address keeps a clean tail — the report is a local page whose address is copied as
+ * it is, and a reader's choice belongs in the browser that made it rather than in the tab's title bar. What a link sent
+ * from an earlier release holds is still read (`appLinkUse`), and it is not written into the reader's memory: what came
+ * in is not his choice until he changes something. */
+function appKeep(key, rec) {
   try {
-    if (empty) window.localStorage.removeItem(appKey);
-    else window.localStorage.setItem(appKey, JSON.stringify(rec));
+    if (rec === null) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, JSON.stringify(rec));
   } catch (_e) {
     /* There is no memory (the browser grants this page none): the choice will not survive a closing, while the numbers
      * and the markup do not depend on it. */
   }
 }
 
+export function appWrite() {
+  if (!appTransient) appKeep(appKey, appRecord());
+}
+
+/* What the browser saved under a key: its absence, a foreign record, a broken one and a record of another report amount
+ * to the same thing here — nothing to read. `JSON.parse` of a missing value answers `null`, so the two absences need no
+ * telling apart. */
+function appLoad(key) {
+  let rec = null;
+  try {
+    rec = JSON.parse(window.localStorage.getItem(key));
+  } catch (_e) {
+    return null;
+  }
+  return appRecordOk(rec) ? rec : null;
+}
+
 /* A reset to "everything on": the border between "this is no longer in the report" and "switched off" is the record
  * rather than a missing value. A link carries the sender's whole choice, which is why it is applied to a clean view
  * rather than on top of someone else's. */
@@ -174,15 +191,12 @@ function appLinkRead() {
 }
 
 /* How many names in the link are unknown to this report: the reader has to be told about them — otherwise he would look
- * in the table for something that was never there. */
+ * in the table for something that was never there. The two tables the model already holds answer it: a file by its path
+ * at HEAD (`appMeasured`) and a metric by its key (`appMetric`), the same names a record is written in (`appFileAt`). */
 function appUnknown(rec) {
-  const known = {};
-  const metricKeys = {};
-  appData.files.forEach((_f, i) => { known[appFileAt(i)] = true; });
-  appData.metrics.forEach((m) => { metricKeys[m.key] = true; });
   let n = 0;
-  Object.keys(rec.metrics || {}).forEach((k) => { if (!metricKeys[k]) n++; });
-  Object.keys(rec.files || {}).forEach((k) => { if (!known[k]) n++; });
+  Object.keys(rec.metrics || {}).forEach((k) => { if (appMetric[k] === undefined) n++; });
+  Object.keys(rec.files || {}).forEach((k) => { if (appMeasured[k] === undefined) n++; });
   return n;
 }
 
@@ -213,23 +227,9 @@ export function appLinkUse() {
   return 'none';
 }
 
-/* Reading: only a record of ours — of our format version and our passport. Another report's record lies under another key,
- * while a foreign, outdated or broken one amounts to its absence. */
+// Reading: the reader's own choice, as he left it — another report's record lies under another key.
 export function appRead() {
-  let text = null;
-  try {
-    text = window.localStorage.getItem(appKey);
-  } catch (_e) {
-    return null;
-  }
-  if (text === null) return null;
-  let rec = null;
-  try {
-    rec = JSON.parse(text);
-  } catch (_e) {
-    return null;
-  }
-  return appRecordOk(rec) ? rec : null;
+  return appLoad(appKey);
 }
 
 /* Applying goes by name: a file is recognised by its path, a metric by its key. A name the report does not hold matches
@@ -248,37 +248,22 @@ export function appApply(rec) {
  * what the onlooker looks at rather than about which numbers are read, which is why it never goes into a link and never
  * leaves the browser. The tree opens folded, so **the unfolded folders are what is kept** (`true`) — the default is the
  * absence of the name, the same way "switched on" is the absence of a choice. A folder's name is its path ("src/page"),
- * so a vanished name simply means nothing, and unfolding nothing is the state the page opens in: then the record is not
- * kept at all rather than being kept empty. `appFoldKey` is set with the model (`appBoot`), for the reason the key
- * itself is. */
+ * so a vanished name simply means nothing. `appFoldKey` is set with the model (`appBoot`), for the reason the key itself
+ * is. */
 export function appFoldRead() {
-  let text = null;
-  try {
-    text = window.localStorage.getItem(appFoldKey);
-  } catch (_e) {
-    return;
-  }
-  if (text === null) return;
-  let rec = null;
-  try {
-    rec = JSON.parse(text);
-  } catch (_e) {
-    return;
-  }
-  if (!appRecordOk(rec)) return;
+  const rec = appLoad(appFoldKey);
+  if (rec === null) return;
   const open = rec.open || {};
   Object.keys(open).forEach((p) => { if (open[p] === true) appView.open[p] = true; });
 }
 
+/* What a folder's sign does with the memory: the unfolded folders are what is kept (`true`), so a tree folded whole is
+ * the absence of the record — the default — and the record goes away with the last unfolded folder. */
 export function appFoldSet(path, open) {
   if (open) appView.open[path] = true;
   else delete appView.open[path];
-  const rec = { v: 1, passport: appPassport(), open: Object.assign({}, appView.open) };
-  try {
-    if (Object.keys(rec.open).length === 0) window.localStorage.removeItem(appFoldKey);
-    else window.localStorage.setItem(appFoldKey, JSON.stringify(rec));
-  } catch (_e) {
-    /* There is no memory: what is unfolded will not survive a closing, while the view does not depend on it — the tree
-     * is unfolded exactly the way the reader unfolded it just now. */
-  }
+  const names = Object.keys(appView.open);
+  appKeep(appFoldKey, names.length === 0
+    ? null
+    : { v: 1, passport: appPassport(), open: appView.open });
 }

package/src/page/table.js

@@ -31,6 +31,14 @@ import { appData, appUi, appView } from './state.js';
  * table, against 6.5 ms for building the whole window again). The header sticks to the shell's top and the commit
  * column to its left (both `position: sticky`), so the row and the column a number belongs to are always in sight.
  *
+ * **A step down the table and a step sideways cost the same kind of work.** A row is made once and then stands at its
+ * own place in the scrolled content while the window moves over it: the window's columns are the range of that row's
+ * numbers, so a step sideways makes the columns that entered and drops the ones that left (`appStrip`) — a cell per
+ * row, the header's two lines included. A row that left the window vertically is dropped and made again when the
+ * reader comes back to it, which is what makes a jump down the table cost the same as a step. Building the rows again
+ * on every sideways scroll — the first version of this step — is what `probes/step-12-window.mjs` measures against the
+ * splice (`worklog/0211-sideways-step.md`).
+ *
  * The choice is applied by building the window again: the columns of a switched-off file are simply not among the
  * columns that are built, so there is nothing to hide and nothing to recount — the totals are the sum over the files
  * that are on, counted by `rowModel` for the rows the window holds (`src/derived.js`, one place for that
@@ -138,6 +146,27 @@ export function appState(metricsCount, filesCount) {
   document.getElementById('shell').hidden = metricsCount === 0;
 }
 
+/* A strip of pieces of one range, moved to another: the pieces the two ranges share are kept, and only the ends are
+ * made and dropped. The unit of a strip is its child — a row's numbers are one column to a child, the header's line of
+ * names one group, its line of metrics one column — so the same movement serves all three, and a group of metrics
+ * cannot be split by the window (a column of numbers would lose its caption). A window that jumped clear of the old
+ * range — the reader dragged the scrollbar — has nothing to keep and the strip is made again; the empty range
+ * `[c, c - 1]` is how a strip that holds nothing yet says so. */
+function appStrip(strip, was, now, make) {
+  const a = Math.max(was[0], now[0]);
+  const b = Math.min(was[1], now[1]);
+  if (a > b) {
+    strip.textContent = '';
+    for (let c = now[0]; c <= now[1]; c++) strip.appendChild(make(c));
+    return;
+  }
+  for (let n = a - was[0]; n > 0; n--) strip.firstChild.remove();
+  for (let n = was[1] - b; n > 0; n--) strip.lastChild.remove();
+  const edge = strip.firstChild;
+  for (let c = a - 1; c >= now[0]; c--) strip.insertBefore(make(c), edge);
+  for (let c = b + 1; c <= now[1]; c++) strip.appendChild(make(c));
+}
+
 /* One cell of the window: the column decides what it holds. The group is the column's ordinal divided by the number of
  * metrics — `0` is the total over the files, `g ≥ 1` is the g-th column of the order — and it is the same arithmetic
  * the header is placed by, so a column and its caption cannot drift apart. The model lists the *enabled* files in the
@@ -153,9 +182,13 @@ function appCell(model, c, now, cache) {
   return appNum(now ? valueParts(cell) : cellParts(cell.value, cell.delta, '−'), cls);
 }
 
-/* A row of the window: the caption of the commit and the numbers of the columns the window holds. The top row is the
- * state at HEAD (`nowModel`) rather than the last commit's cells: an absolute number stands in the table once, and
- * the deltas below it add up to it. */
+/* A row of the window: the caption of the commit and an empty strip of numbers for the window to fill (`appCells`).
+ * The top row is the state at HEAD (`nowModel`) rather than the last commit's cells: an absolute number stands in the
+ * table once, and the deltas below it add up to it.
+ *
+ * The model is kept in the entry beside the node because the numbers of a row depend on the commit and the choice
+ * rather than on the place the window stands at: a step sideways asks for a cell's arithmetic, never for `rowModel`
+ * again. The strip is born empty — the range `[c0, c0 - 1]` — and is filled by the first `appCells`. */
 function appRow(cache, r, span) {
   const last = appData.rows.length;
   const now = r === 0;
@@ -163,28 +196,36 @@ function appRow(cache, r, span) {
   const model = now
     ? nowModel(appData.now, cache.keys, appView.files)
     : rowModel(appData.rows[i].values, i === 0 ? null : appData.rows[i - 1].values, cache.keys, appView.files);
-  const row = appEl('div', 'row' + (now ? ' now' : ''));
-  row.style.top = (APP_HEAD + r * APP_ROW) + 'px';
+  const el = appEl('div', 'row' + (now ? ' now' : ''));
+  el.style.top = (APP_HEAD + r * APP_ROW) + 'px';
   const commit = appEl('div', 'c-commit');
   if (now) commit.textContent = appUi.now;
   else commit.appendChild(appCommit(appData.rows[i]));
-  row.appendChild(commit);
+  el.appendChild(commit);
   const cells = appEl('div', 'cells');
-  /* The numbers stand beside the commit column rather than under it: the column is pinned over the content, so what the
-   * grid holds begins where the column ends. */
-  cells.style.left = (APP_COMMIT + span.c0 * APP_COL) + 'px';
-  for (let c = span.c0; c <= span.c1; c++) cells.appendChild(appCell(model, c, now, cache));
-  row.appendChild(cells);
-  return row;
+  el.appendChild(cells);
+  return { el: el, cells: cells, model: model, now: now, cols: [span.c0, span.c0 - 1] };
+}
+
+/* A row's numbers at the window's columns: the columns the two windows share keep their cells, and a column that
+ * entered is made. The numbers stand beside the pinned commit column rather than under it — the column lies over the
+ * content — so the strip is placed by the window's first column, and the cells of it follow their strip. A step down
+ * the table asks for the columns it already holds, and the row is not touched at all. */
+function appCells(entry, cache, span) {
+  const cols = [span.c0, span.c1];
+  if (entry.cols[0] === cols[0] && entry.cols[1] === cols[1]) return;
+  entry.cells.style.left = (APP_COMMIT + cols[0] * APP_COL) + 'px';
+  appStrip(entry.cells, entry.cols, cols, (c) => appCell(entry.model, c, entry.now, cache));
+  entry.cols = cols;
 }
 
 /* A built row into the window: the map is what says which rows are in the markup, so a row goes into it where it is
  * made — otherwise a window that moved would build its rows beside the ones that are still there. */
 function appPlace(cache, r, span) {
-  const row = appRow(cache, r, span);
-  cache.rows.set(r, row);
-  cache.grid.appendChild(row);
-  return row;
+  const entry = appRow(cache, r, span);
+  cache.rows.set(r, entry);
+  appCells(entry, cache, span);
+  cache.grid.appendChild(entry.el);
 }
 
 /* A caption of the header: a file's name or a metric's. The room is a fixed number of columns, so a name that does
@@ -197,30 +238,39 @@ function appCaption(text, cls, span) {
   return el;
 }
 
-/* The header: the total and the enabled files over their columns, and one caption per metric column under them. It
- * holds the window's columns alone and is built again only when the window moves sideways — scrolling down leaves it
- * untouched, and the two rows of it are placed by `grid-column`, so a group of metrics is a group in the grid. */
-function appHead(cache, span) {
-  const count = cache.keys.length;
-  const g0 = Math.floor(span.c0 / count);
-  const g1 = Math.floor(span.c1 / count);
-  const left = (APP_COMMIT + g0 * count * APP_COL) + 'px';
-  const head = appEl('div', 'head');
-  head.appendChild(appEl('div', 'c-commit', appUi.commit));
+/* The header's frame: the commit column and the two empty strips that `appStrip` fills — the names of the groups over
+ * the columns, their metrics under them. An empty strip says `[0, -1]`, which is what makes the first `appHead` fill
+ * it rather than move it. */
+function appHeadNew() {
+  const el = appEl('div', 'head');
   const groups = appEl('div', 'hgroups');
-  groups.style.left = left;
   const metrics = appEl('div', 'hmetrics');
-  metrics.style.left = left;
-  for (let g = g0; g <= g1; g++) {
-    const label = g === 0 ? appUi.total : appData.files[cache.list[g - 1]].label;
-    groups.appendChild(appCaption(label, 'gh', count));
-    for (let mi = 0; mi < count; mi++) {
-      metrics.appendChild(appCaption(cache.labels[mi], mi === 0 ? 'g' : '', 1));
-    }
-  }
-  head.appendChild(groups);
-  head.appendChild(metrics);
-  return head;
+  el.appendChild(appEl('div', 'c-commit', appUi.commit));
+  el.appendChild(groups);
+  el.appendChild(metrics);
+  return { el: el, groups: groups, metrics: metrics, g: [0, -1] };
+}
+
+/* The header: the total and the enabled files over their columns, and one caption per metric column under them. The two
+ * strips move by the same `appStrip` as a row's numbers, and the unit of the metrics line is a column, so its strip is
+ * asked for whole groups — the metrics of a column stand under their file even when the window cuts the last group.
+ * A window that did not leave a group (a step down the table) leaves the header alone. */
+function appHead(cache, span) {
+  const count = cache.keys.length;
+  const g0 = count === 0 ? 0 : Math.floor(span.c0 / count);
+  const g1 = count === 0 ? -1 : Math.floor(span.c1 / count);
+  if (cache.head === null) cache.head = appHeadNew();
+  const h = cache.head;
+  if (h.g[0] === g0 && h.g[1] === g1) return h.el;
+  const was = h.g;
+  h.g = [g0, g1];
+  h.groups.style.left = (APP_COMMIT + g0 * count * APP_COL) + 'px';
+  h.metrics.style.left = h.groups.style.left;
+  appStrip(h.groups, was, h.g, (g) => appCaption(
+    g === 0 ? appUi.total : appData.files[cache.list[g - 1]].label, 'gh', count));
+  appStrip(h.metrics, [was[0] * count, was[1] * count + count - 1], [g0 * count, g1 * count + count - 1],
+    (c) => appCaption(cache.labels[c % count], c % count === 0 ? 'g' : '', 1));
+  return h.el;
 }
 
 /* The window the shell shows: the rows and the columns, in the ordinals of the whole grid, and the size of that
@@ -259,26 +309,32 @@ export function appSpan(cache) {
   };
 }
 
-/* The window drawn. A scroll costs what left the window and what entered it, and nothing else: the row that is
- * already built is not touched. Sideways — the window of columns is another window — the header and the rows are
- * built again, because a column that is not there cannot be shown; the reader's own choice (`redraw`) is the same
- * kind of change, and comes here by the same road. */
+/* The window drawn. Moving over the grid costs what left it and what entered it, and nothing else: the rows in the
+ * markup are the window's rows (what left it is dropped, what entered it is made) and each of them holds the columns
+ * of the window (`appCells`), so a step in either direction is paid by the rows that moved rather than by the table.
+ *
+ * The reader's own choice (`redraw`) is the one thing that cannot be a move: the columns of a switched-off file are
+ * simply not among the columns that are built, so there is nothing to hide and nothing to recount — the totals are the
+ * sum over the files that are on (`rowModel`), and the window is built from nothing. The shell's own size is the same
+ * kind of change: it decides how much of the grid is in sight, which is not a place to move to. */
 export function appWindow(cache, redraw) {
   const span = appSpan(cache);
   const was = cache.win;
   cache.win = span;
-  if (redraw === true || was === null || was.c0 !== span.c0 || was.c1 !== span.c1) {
-    const head = cache.grid.querySelector('.head');
-    if (head !== null) head.remove();
-    cache.grid.insertBefore(appHead(cache, span), cache.grid.firstChild);
+  if (redraw === true || was === null) {
+    /* The grid holds the header and the rows of the window and nothing else, so the whole of it is thrown away rather
+     * than tracked piece by piece — and the rows that are made below say in the map that they are there. */
+    cache.grid.textContent = '';
     cache.rows.clear();
-    [...cache.grid.querySelectorAll('.row')].forEach((row) => row.remove());
+    cache.head = null;
+    cache.grid.appendChild(appHead(cache, span));
     for (let r = span.r0; r <= span.r1; r++) appPlace(cache, r, span);
     return;
   }
+  appHead(cache, span);
   [...cache.rows.keys()].forEach((r) => {
-    if (r >= span.r0 && r <= span.r1) return;
-    cache.rows.get(r).remove();
+    if (r >= span.r0 && r <= span.r1) { appCells(cache.rows.get(r), cache, span); return; }
+    cache.rows.get(r).el.remove();
     cache.rows.delete(r);
   });
   for (let r = span.r0; r <= span.r1; r++) {
@@ -299,6 +355,7 @@ export function appTable(grid) {
     rank: [],
     slot: [],
     rows: new Map(),
+    head: null,
     win: null
   };
   cache.shell.addEventListener('scroll', () => appWindow(cache));