@vernikr/size-report 2.5.0 → 2.6.0

package/src/page/build.js

@@ -1,6 +1,8 @@
 import fs from 'fs';
+import zlib from 'zlib';
 import { fill, LOCALES } from '../locales.js';
 import { PAGE_CSS, TABLE_CSS } from '../css.js';
+import { assertCompilable, stripCss, stripJs, stripLines } from '../strip.js';
 
 /* Escaping text for markup lives here, because this builder is the only place that turns data into markup: the rest
  * is drawn as nodes by the page. */
@@ -17,6 +19,9 @@ export function esc(s) {
  * `import` with, and the declarations have to reach the shared scope in the order of pasting — the calculation first,
  * then the chapters.
  *
+ * What is pasted is **squeezed** on the way in (`squeezedJs`, `squeezedCss`): comments and indentation leave only the
+ * copy inside the report, which is read in a browser, while the sources stay the ordinary files a person edits.
+ *
  * 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
@@ -24,7 +29,10 @@ export function esc(s) {
 export function stripModules(src) {
   return src.split('\n')
     .filter((line) => !/^import\s.*;\s*$/.test(line))
-    .map((line) => line.replace(/^export\s+(function|const|let|var|class)\s/, '$1 '))
+    /* `async` is part of the form rather than a decoration of it: a declaration marked `export async` is as ordinary
+     * a source as the rest, and the pasted page has no module syntax to resolve either of them with. */
+    .map((line) => line.replace(/^export\s+(?:async\s+)?(?:function|const|let|var|class)\s/,
+      (head) => head.slice('export '.length)))
     .join('\n');
 }
 
@@ -33,11 +41,32 @@ 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). */
-export const PAGE_PARTS = ['./state.js', './dom.js', './panel.js', './table.js', './app.js'];
+ * (`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', './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
+ * read, edited and linted by people, and only the copy inside the report is squeezed. Exported because the checks
+ * compare the page with exactly this form rather than with the sources. */
+export function squeezedJs(code) {
+  return stripLines(stripJs(code));
+}
 
+export function squeezedCss(css) {
+  return stripLines(stripCss(css));
+}
+
+/* The page's program: the chapters glued, the module syntax stripped line by line, the text squeezed — in that
+ * order, because the stripping works line by line and a comment could otherwise hide a line's shape. The squeeze
+ * may throw away nothing but comments and air, so what comes out has to parse, and the same guard the `min` metric
+ * uses says so: with no revision (the text is built here and now) and without the unparsed original, because a text
+ * that does not parse at all is not "a damaged file" but a bug of this assembler. */
 export function pageScript() {
-  return pageSource('../derived.js') + '\n' + PAGE_PARTS.map((part) => pageSource(part)).join('');
+  const code = squeezedJs(pageSource('../derived.js') + '\n'
+    + PAGE_PARTS.map((part) => pageSource(part)).join(''));
+  assertCompilable(code, '', 'the page’s program');
+  return code;
 }
 
 /* The note under the heading: what built the report and where it lies. The path is plain text rather than a link: the
@@ -67,11 +96,9 @@ function uiText(page, loc) {
     linkForeign: page.linkForeign,
     linkBroken: page.linkBroken,
     linkExtra: page.linkExtra,
-    /* Accuracy in two words: a metric's caption speaks about the worst in its column, while a cell's tooltip speaks
-     * about its own number. */
-    exact: page.exact,
-    approximate: page.approximate,
-    approxCell: page.approximateCell,
+    /* What a host that cannot unpack the block is told: the page's one message about its own file rather than about
+     * the report's numbers (see `appBegin`). */
+    unpack: page.unpack,
     /* Why a file is not in the report, in words: the engine names the reason with a mark (`why`), and the page dresses
      * the mark in text, as it does with everything else in the panel. */
     notMeasuredRule: page.notMeasuredRule,
@@ -91,19 +118,133 @@ function uiText(page, loc) {
   };
 }
 
-/* What does not go into the file. First, the list of skipped commits: it changes with the report's own commit (one
- * with nothing to say lands in the list), and the file would stop being a **fixed point** — a rebuild after its own
- * commit would yield different bytes and the hook would commit the report forever. The page has no use for the list
- * at all: it does not show it. It stays available to the reader — `--data`, `--json` and `explain` answer from the
- * same run. */
-const NOT_IN_FILE = ['skipped'];
+/* The page's block is the contract in **sparse form** (`schema: 2`): the history as changes rather than as a snapshot
+ * per commit, the texts in a dictionary of their own, and the rows' links cut by the part they share. The dense form
+ * stays what `--data` answers with — an agent reads the contract as it is — and the page's own chapter unrolls this
+ * one (`src/page/payload.js`, `appDecode`), so the two places it is read are the encoder here and the decoder there.
+ * `test/contract-data.test.js` holds the round trip between them.
+ *
+ * What the block leaves out besides the sparse form is the list of skipped commits: it changes with the report's own
+ * commit (one with nothing to say lands in the list), and the file would stop being a **fixed point** — a rebuild
+ * after its own commit would yield different bytes and the hook would commit the report forever. The page has no use
+ * for the list at all: it does not show it. It stays available to the reader — `--data`, `--json` and `explain`
+ * answer from the same run.
+ *
+ * How much this is worth: the artifact of this repository carried 1 370 627 B of data as a snapshot per commit — 95 %
+ * of the whole file — while nine tenths of the cells repeat the row above; the same history as changes is about 84 000
+ * B. Reproducibility is untouched: the artifact stays a fixed point, rebuilt byte for byte after its own commit. */
+
+/* The block's fields, in the order the encoder writes them. The shape is closed: a field added here has to be read in
+ * the decoder, and the page's checks compare the block with this list rather than with a description of it. */
+export const PAGE_KEYS = ['schema', 'tool', 'report', 'hrefPrefix', 'strs', 'metrics', 'cats', 'files',
+  'catalog', 'rows', 'last', 'hist'];
+
+/* The texts of the block, each written once. The dictionary is extended in the order of the walk `pagePayload` makes
+ * — files in the column order, rows in the history order — and the order of the first appearance is what decides an
+ * index. That is part of the format rather than a detail: the artifact is rebuilt after every commit and has to come
+ * out byte-identical on any machine. */
+function dictionary() {
+  const list = [];
+  const at = new Map();
+  function of(text) {
+    if (text === null) return null;
+    const seen = at.get(text);
+    if (seen !== undefined) return seen;
+    list.push(text);
+    at.set(text, list.length - 1);
+    return list.length - 1;
+  }
+  return { list: list, of: of };
+}
+
+/* What the rows' links have in common: for an ordinary row the commit template with the sha cut out, and, when some
+ * rows lead to a journal section instead, the part the two kinds share. A row keeps only the rest of its link — which
+ * for an ordinary row is the sha the row carries anyway, so a link costs nothing beyond the prefix written once. */
+function linkPrefix(rows) {
+  const links = rows.map((r) => r.href).filter((href) => href !== null);
+  let out = links.length === 0 ? null : links[0];
+  links.forEach((href) => {
+    let n = 0;
+    while (n < out.length && href[n] === out[n]) n++;
+    out = out.slice(0, n);
+  });
+  return out;
+}
+
+/* One file between two commits: nothing when the numbers are the same, the absolute numbers when the file was absent
+ * before, the deltas when it moved, and a record of the row alone when it is gone — the three shapes the decoder
+ * reads. A commit that did not touch a file has no record for it, which is what makes the block small: the numbers are
+ * compared rather than the list of paths a commit changed. */
+function change(was, nums) {
+  if (nums === null) return was === null ? null : [];
+  if (was === null) return nums;
+  const deltas = nums.map((n, mi) => n - was[mi]);
+  return deltas.every((d) => d === 0) ? null : deltas;
+}
+
+// The history of every file, in the column order: the rows it appeared in, moved in and disappeared in.
+function history(keys, files, rows) {
+  const was = files.map(() => null);
+  const hist = files.map(() => []);
+  rows.forEach((row, r) => {
+    row.values.forEach((v, i) => {
+      const nums = v === null ? null : keys.map((key) => v[key]);
+      const rec = change(was[i], nums);
+      if (rec !== null) hist[i].push([r].concat(rec));
+      was[i] = nums;
+    });
+  });
+  return hist;
+}
 
 export function pagePayload(data) {
-  const out = Object.assign({}, data);
-  NOT_IN_FILE.forEach((key) => delete out[key]);
+  const keys = data.metrics.map((m) => m.key);
+  const dict = dictionary();
+  const prefix = linkPrefix(data.rows);
+  const out = {
+    schema: 2,
+    tool: data.tool,
+    /* The report's own words are the ones the page reads: `heading` is the artifact's `<h1>` and `journal` is null
+     * today, so neither is carried — the page builds no heading and prints no journal. */
+    report: {
+      locale: data.report.locale,
+      title: data.report.title,
+      artifact: data.report.artifact,
+      fixCommand: data.report.fixCommand,
+      showSha: data.report.showSha
+    },
+    hrefPrefix: prefix,
+    strs: dict.list,
+    metrics: data.metrics.map((m) => [dict.of(m.key), dict.of(m.label), dict.of(m.note), dict.of(m.method)]),
+    cats: data.categories.map((c) => [dict.of(c.key), dict.of(c.label)]),
+    files: data.files.map((f) => [dict.of(f.label), dict.of(f.path),
+      f.paths.map((p) => dict.of(p)), dict.of(f.category), dict.of(f.categoryBy)]),
+    catalog: data.catalog.map((e) => [dict.of(e.path), dict.of(e.why)]),
+    rows: data.rows.map((r) => [dict.of(r.sha), dict.of(r.when), dict.of(r.subject),
+      r.section === null ? null : dict.of(r.section.id),
+      r.section === null ? null : dict.of(r.section.head),
+      r.section !== null && r.section.added ? 1 : 0,
+      r.href === null ? null : dict.of(r.href.slice(prefix.length))]),
+    last: [],
+    hist: history(keys, data.files, data.rows)
+  };
+  data.last.forEach((on, i) => { if (on) out.last.push(i); });
   return out;
 }
 
+/* The block as the artifact carries it: gzip of its JSON, base64. The packing is a **transport, not the shape** —
+ * what the page unpacks is the very block it received before (`schema: 2`), and `--data`/`--json` keep answering
+ * with the dense contract. It is here because the block is most of the file: this repository's report carried
+ * 88 786 B of it against 32 142 B compressed, 42 856 B with base64's third.
+ *
+ * Level 9 because the block is written once per commit and read by whoever opens the file, not by a server under
+ * load. What the fixed point rests on is that the bytes are reproducible: zlib writes no time into the gzip header,
+ * so the same text gives the same bytes (the version of zlib is the machine's, like the version of git). Base64 is
+ * what makes the bytes survive a text file — a gzip stream is not valid UTF-8, and the report is one. */
+export function pagePacked(text) {
+  return zlib.gzipSync(Buffer.from(text, 'utf8'), { level: 9 }).toString('base64');
+}
+
 /* The report's page is one file: the data lies in it, the script is pasted in, there are no external references. Hence
  * it opens with a double click and works without a network. */
 export function pageHtml(data, cfg) {
@@ -111,7 +252,7 @@ export function pageHtml(data, cfg) {
   return '<!doctype html>\n<html lang="' + esc(loc.html) + '">\n<head>\n<meta charset="utf-8">\n'
     + '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
     + '<title>' + esc(data.report.title) + '</title>\n<style>\n'
-    + TABLE_CSS + '\n' + PAGE_CSS + '\n</style>\n</head>\n<body>\n'
+    + 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'
     + '<div id="panel" class="panel"></div>\n'
@@ -119,7 +260,8 @@ export function pageHtml(data, cfg) {
     + '<div id="shell" class="shell"><table id="grid"></table></div>\n'
     + '<p id="state" class="state" hidden></p>\n'
     + '<p id="note" class="note"></p>\n'
-    + '<script type="application/json" id="data">' + jsonInHtml(pagePayload(data)) + '</script>\n'
+    + '<script type="application/octet-stream" id="data" data-pack="base64+gzip">'
+    + pagePacked(jsonInHtml(pagePayload(data))) + '</script>\n'
     + '<script type="application/json" id="ui">' + jsonInHtml(uiText(loc.page, loc)) + '</script>\n'
     + '<script>\n' + pageScript() + '</script>\n</body>\n</html>\n';
 }

package/src/page/panel.js

@@ -7,12 +7,11 @@ import { appData, appUi, appView, appFileAt, appFoldSet, appMeasured } from './s
 function appFileBox(i) {
   const f = appData.files[i];
   const where = appFileAt(i) + (f.path === null ? appUi.notOnHead : '');
-  return appBox(f.label, where + appUi.category
+  const box = appBox(f.label, where + appUi.category
     + (f.categoryBy === 'config' ? appUi.categoryFromConfig : appUi.categoryByExtension),
-  appView.files[i], (e) => {
-    appView.files[i] = e.target.checked;
-    appRender();
-  });
+  appView.files[i], (e) => appSwitch(i, e.target.checked));
+  appFields.file[i] = box.querySelector('input');
+  return box;
 }
 
 /* A file that is not in the report: it stands in its place in the tree with its checkbox off and unavailable — no
@@ -48,7 +47,7 @@ function appNode() {
  * a fraction ("2/5"): what matters to the reader is that the folder holds five files while two are measured. A folder
  * 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, sub) {
+function appDirHead(name, here, sub) {
   const idx = appIndexes(sub);
   const total = appCount(sub);
   const label = name + '/';
@@ -59,11 +58,9 @@ function appDirHead(name, sub) {
     const on = idx.map((i) => appView.files[i]);
     const every = on.every((v) => v);
     head = appBox(label, appUi.dir.replace('{name}', name).replace('{n}', idx.length),
-      every, (e) => {
-        idx.forEach((i) => { appView.files[i] = e.target.checked; });
-        appRender();
-      }, 'dir');
+      every, (e) => appSwitchGroup(idx, e.target.checked), 'dir');
     head.querySelector('input').indeterminate = !every && on.some((v) => v);
+    appFields.dir[here] = head;
   }
   head.appendChild(appEl('span', 'n', idx.length === total ? String(total) : idx.length + '/' + total));
   return head;
@@ -111,7 +108,7 @@ function appDir(name, sub, prefix) {
   const folded = appView.folded[here] === true;
   const li = appEl('li', folded ? 'folded' : null);
   li.appendChild(appFoldBox(name, here));
-  li.appendChild(appDirHead(name, sub));
+  li.appendChild(appDirHead(name, here, sub));
   li.appendChild(appTreeList(sub, here));
   return li;
 }
@@ -165,6 +162,10 @@ function appTree() {
   return appTreeList(root, '');
 }
 
+/* The panel: built once, at the first drawing, and afterwards only its fields change. A rebuild would count the whole
+ * table for nothing — the tree, the counters and the tooltips are the same after every click — while it would also
+ * take the reader's place in the list away: the scroll of the panel and of the tree, and the field under the
+ * keyboard, would have to be put back by hand. Nothing of that is here, because there is nothing to put back. */
 export function appPanel() {
   const panel = document.getElementById('panel');
   panel.textContent = '';
@@ -173,11 +174,12 @@ export function appPanel() {
   metrics.appendChild(appEl('legend', null, appUi.metrics));
   const mrow = appEl('div', 'row');
   appData.metrics.forEach((m) => {
-    const word = m.accuracy === 'exact' ? appUi.exact : appUi.approximate;
-    mrow.appendChild(appBox(m.label, m.note + ' · ' + word, appView.metrics[m.key], (e) => {
+    const box = appBox(m.label, m.note, appView.metrics[m.key], (e) => {
       appView.metrics[m.key] = e.target.checked;
-      appRender();
-    }, 'metric'));
+      appSwitchMetric();
+    }, 'metric');
+    appFields.metric[m.key] = box.querySelector('input');
+    mrow.appendChild(box);
   });
   metrics.appendChild(mrow);
   /* What produced each number is visible rather than hidden in a tooltip: the token dictionary and the way of
@@ -196,13 +198,102 @@ export function appPanel() {
   appData.categories.forEach((cat) => {
     const idx = [];
     appData.files.forEach((f, i) => { if (f.category === cat.key) idx.push(i); });
-    cats.appendChild(appBox(cat.label, appUi.all + ' · ' + cat.label, idx.every((i) => appView.files[i]),
-      (e) => {
-        idx.forEach((i) => { appView.files[i] = e.target.checked; });
-        appRender();
-      }, 'all'));
+    const box = appBox(cat.label, appUi.all + ' · ' + cat.label, idx.every((i) => appView.files[i]),
+      (e) => appSwitchGroup(idx, e.target.checked), 'all');
+    appFields.cat[cat.key] = box.querySelector('input');
+    cats.appendChild(box);
   });
   files.appendChild(cats);
   files.appendChild(appTree());
   panel.appendChild(files);
 }
+
+/* -------- the panel's fields after a choice -------- */
+
+/* The fields of the panel by name: the markup is built once, so a click needs a reference to the field it changes
+ * rather than a rebuild of the panel. Only a file owns a state — a folder and a category are ways to set the same
+ * boxes — which is why their fields are read from the files below them rather than kept. */
+const appFields = { metric: {}, file: {}, dir: {}, cat: {} };
+
+/* The boxes of a row's own subtree, read from the tree itself: the panel keeps no second list of the files a folder
+ * holds, and what the reader sees is exactly the boxes that are here. A file outside the report stands in the tree
+ * with nothing to switch, hence it is left out. */
+function appRowBoxes(box) {
+  return [...box.closest('li').querySelectorAll('.box:not(.dir):not(.plain) input')];
+}
+
+// A folder's field from its files: all on — checked, some — the third state, none — simply unchecked.
+function appDirState(box) {
+  const boxes = appRowBoxes(box);
+  const on = boxes.filter((b) => b.checked).length;
+  const input = box.querySelector('input');
+  input.checked = on === boxes.length;
+  input.indeterminate = on > 0 && on < boxes.length;
+}
+
+/* A category's field from its files — the same rule, taken from the data: a category's files are named by the
+ * category itself (`category`), and the boxes of the tree are a different view of the same files. */
+function appCatState(key) {
+  let all = 0;
+  let on = 0;
+  appData.files.forEach((f, i) => {
+    if (f.category !== key) return;
+    all++;
+    if (appView.files[i] === true) on++;
+  });
+  const input = appFields.cat[key];
+  input.checked = on === all;
+  input.indeterminate = on > 0 && on < all;
+}
+
+/* The folders a file lies in: the prefixes of its path, from the root down. The tree's folders are exactly those
+ * prefixes — that is how it is built (`appLeafAt`) — so no second naming rule is needed. */
+function appDirPath(path) {
+  const parts = path.split('/');
+  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) {
+  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);
+  });
+}
+
+/* What a click changed, written where it stands: the files' own boxes, then the fields of the folders and categories
+ * that hold them. Nothing is rebuilt, and no field the choice did not reach is touched. */
+export function appPanelState(indexes) {
+  indexes.forEach((i) => {
+    const input = appFields.file[i];
+    if (input !== undefined) input.checked = appView.files[i] === true;
+  });
+  appDirsOf(indexes);
+  appCatsOf(indexes);
+}
+
+/* The whole panel from the view: what a link, a record from the memory and the first drawing need. The metric boxes
+ * are the reader's own click otherwise, which is why they are not refreshed on a file's switch. */
+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]));
+}

package/src/page/payload.js

@@ -0,0 +1,168 @@
+/* The page's block: how the file carries it (gzipped and base64 encoded, `appUnpack`) and how the block in
+ * sparse form is turned back into the model the page already spoke.
+ *
+ * The packing is a **transport rather than the shape**: what comes out of the unpacker is the very block the
+ * page received before this chapter knew about gzip, with no field added or removed, and `--data`/`--json`
+ * answer with the dense contract as they always did. It buys the artifact's weight (the block is the whole file)
+ * and pays for it in two ways, both on purpose: the block can no longer be read by eye or by `diff`, and
+ * unpacking is **asynchronous** — the platform's own `DecompressionStream` is the only unpacker here, no library
+ * travels in the page and nothing is fetched, so the first drawing waits for a promise where it used to happen
+ * during the parse.
+ *
+ * Why the block is sparse. Of 56 019 cells of this repository's report the non-empty ones hold 1 183 distinct
+ * triples, and about a thousand cells differ from the row above: nine tenths of the block is yesterday's
+ * numbers written again. So the block keeps, for every file, the rows in which it appeared (absolute numbers),
+ * moved (deltas against its own previous record) or disappeared, and this chapter puts the snapshots back
+ * together. The whole history walk is O(number of changes) rather than O(rows × files).
+ *
+ * The model after `appDecode` is exactly `--data`: the calculation (`rowModel`, `totalsOf`, `cellParts`,
+ * `valueParts`), the table and the panel know nothing about the sparse form, so there is no second way to
+ * count a row. A value that did not move is **one object shared by the rows that hold it** — the heap keeps
+ * the distinct numbers rather than a copy per commit — and because every consumer reads `v[metric]` and
+ * compares nothing by identity, sharing changes no answer.
+ *
+ * Two rules of the chapters bind here as well: no `import` lines and no module state (the text is pasted into
+ * one file), and nothing but declarations (the round-trip check evaluates this file on its own).
+ *
+ * The dictionary (`strs`) is walked by the encoder in a stated order — files in the column order, rows in the
+ * history order, and only the order of the first appearance decides an index. The artifact is rebuilt after
+ * every commit and has to come out byte-identical on any machine, so the order of the walk is part of the
+ * format rather than a detail of the encoder.
+ */
+
+/* The block as the file carries it: the tag's `data-pack` says which packing it is, so the page asks rather than
+ * guesses, and a packing it does not know is an error rather than a half-read block. A tag without the marker
+ * carries the block itself — the same page works for a build that packs nothing.
+ *
+ * `DecompressionStream` answers with streams rather than with bytes, hence the reader loop: the promise this
+ * function is *is* the price of the weight (see the file's note). `atob` gives one character per byte, and every
+ * character above 127 has to be taken back as a byte (`charCodeAt`) rather than as text; `TextDecoder` turns the
+ * inflated bytes into the JSON text, which is UTF-8 with the report's own words in it. */
+export async function appUnpack(el) {
+  const pack = el.getAttribute('data-pack');
+  const text = el.textContent;
+  if (pack === null) return text;
+  if (pack !== 'base64+gzip') throw new Error('the page’s data is packed as “' + pack + '”, which this page cannot read');
+  const stream = new DecompressionStream('gzip');
+  const sink = stream.writable.getWriter();
+  /* The writing is not waited for before the reading: a stream that is filled before it is drained would stall on
+   * its own backpressure. A failure of the write surfaces in the reading loop, which is what this promise returns. */
+  const feeding = sink.write(appBytes(text)).then(() => sink.close()).catch(() => null);
+  const source = stream.readable.getReader();
+  const parts = [];
+  for (;;) {
+    const step = await source.read();
+    if (step.done) break;
+    parts.push(step.value);
+  }
+  await feeding;
+  return new TextDecoder().decode(appJoined(parts));
+}
+
+// base64 read as bytes: the browser's `atob` hands out one character per byte, whatever the byte.
+function appBytes(text) {
+  const raw = atob(text);
+  const bytes = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes;
+}
+
+/* The chunks of an inflated stream as one array: a chunk boundary falls wherever the platform put it. The length is
+ * summed by hand rather than by `reduce` — the page's shell computes no totals of its own, and this chapter is part
+ * of the shell the checks read (`test/page-view.test.js`). */
+function appJoined(parts) {
+  let size = 0;
+  parts.forEach((part) => { size += part.length; });
+  const all = new Uint8Array(size);
+  let at = 0;
+  parts.forEach((part) => { all.set(part, at); at += part.length; });
+  return all;
+}
+
+// The dictionary's entry: a text the block does not carry stays absent rather than becoming an empty string.
+function appText(p, i) {
+  return i === null ? null : p.strs[i];
+}
+
+// A value as the page reads it: the metrics by their keys, in the order the block lists them.
+function appValue(keys, nums) {
+  const out = {};
+  keys.forEach((key, mi) => { out[key] = nums[mi]; });
+  return out;
+}
+
+/* One record of a file's history applied to what the file was: the numbers are absolute when the file was
+ * absent and deltas against its own previous record otherwise. A record with nothing but a row means the file
+ * is gone from that revision, which is the same `null` the dense contract carries. What comes out is the
+ * object every later row shares until the file moves again. */
+function appStep(keys, was, rec) {
+  if (rec.length === 1) return null;
+  const nums = rec.slice(1);
+  if (was === null) return appValue(keys, nums);
+  return appValue(keys, nums.map((d, mi) => was[keys[mi]] + d));
+}
+
+/* The history unrolled, once, into a snapshot per commit — the shape the contract hands out. The records of
+ * every file are consumed in the order of the rows, and each row takes what the files were at it: a file whose
+ * record has not come around is the very object it was in the row above.
+ *
+ * The tail of the walk is "now": the report's last row is its last commit that moved a number, the commits
+ * after it moved none, and what the files were at the end is the state at HEAD — which is what the dense
+ * `now` is. */
+function appUnroll(p, keys) {
+  const at = p.files.map(() => 0);
+  const live = p.files.map(() => null);
+  const rows = [];
+  for (let r = 0; r < p.rows.length; r++) {
+    const row = [];
+    p.files.forEach((_f, i) => {
+      const rec = p.hist[i][at[i]];
+      if (rec !== undefined && rec[0] === r) {
+        live[i] = appStep(keys, live[i], rec);
+        at[i]++;
+      }
+      row.push(live[i]);
+    });
+    rows.push(row);
+  }
+  return { rows: rows, now: live.slice() };
+}
+
+/* A commit row: the caption and where it leads. The address is the block's one prefix plus what the row kept
+ * of its own link with the sha, and `added` travels as a mark rather than as a word. The name is not `appRow`:
+ * the chapters are pasted into **one scope**, where the table's own `appRow` would quietly win and this one
+ * would never be called (`test/page-view.test.js` holds the names apart for that very reason). */
+function appRowOf(p, r, values) {
+  const section = r[3] === null ? null : { id: appText(p, r[3]), head: appText(p, r[4]), added: r[5] === 1 };
+  return {
+    sha: appText(p, r[0]),
+    when: appText(p, r[1]),
+    subject: appText(p, r[2]),
+    section: section,
+    href: r[6] === null ? null : p.hrefPrefix + appText(p, r[6]),
+    values: values
+  };
+}
+
+/* The whole block, unrolled into the dense contract the page reads: `schema: 2` is refused by `appRecordOk`
+ * rather than unrolled — a record written for a block of another form describes another choice. */
+export function appDecode(p) {
+  const keys = p.metrics.map((m) => appText(p, m[0]));
+  const hist = appUnroll(p, keys);
+  const last = p.files.map(() => false);
+  p.last.forEach((i) => { last[i] = true; });
+  return {
+    schema: p.schema,
+    tool: p.tool,
+    report: p.report,
+    metrics: p.metrics.map((m) => ({ key: appText(p, m[0]), label: appText(p, m[1]),
+      note: appText(p, m[2]), method: appText(p, m[3]) })),
+    categories: p.cats.map((c) => ({ key: appText(p, c[0]), label: appText(p, c[1]) })),
+    files: p.files.map((f) => ({ label: appText(p, f[0]), path: appText(p, f[1]),
+      paths: f[2].map((i) => p.strs[i]), category: appText(p, f[3]), categoryBy: appText(p, f[4]) })),
+    catalog: p.catalog.map((e) => ({ path: appText(p, e[0]), why: appText(p, e[1]) })),
+    rows: p.rows.map((r, ri) => appRowOf(p, r, hist.rows[ri])),
+    now: hist.now,
+    last: last
+  };
+}