@vernikr/size-report 2.5.0 → 2.6.0

package/src/metrics.js

@@ -4,9 +4,9 @@ import { EXACT_STRATEGIES, assertCompilable, byteLen, minifyForm, strategyFor }
 import { MINIFY_LOADERS, minifier, minifyWithEsbuild } from './minify.js';
 import { CHARS_PER_TOKEN, isBinary, tokenCount, tokenizer } from './tokens.js';
 
-/* The registry of metrics: what is measured, whether a metric needs the text, and how honest
- * its number is. Separate from the ways of stripping ballast: a metric is a promise about a
- * number rather than a way to obtain one.
+/* The registry of metrics: what is measured, whether a metric needs the text, and how its
+ * number is obtained. Separate from the ways of stripping ballast: a metric is a promise about
+ * a number rather than a way to obtain one.
  *
  * The description a reader sees comes from `metricView` rather than from the registry fields:
  * for one and the same metric it depends on the settings (`min` is either real compression or
@@ -14,8 +14,8 @@ import { CHARS_PER_TOKEN, isBinary, tokenCount, tokenizer } from './tokens.js';
  * question have nowhere to drift apart. */
 
 /* The ways to obtain the `min` metric: stripping ballast and real compression. Their mechanism
- * differs, and so does their promise, so each has its own method, its own honesty and its own
- * note — and neither is passed off as the other. */
+ * differs, and so does the method a reader is told, so each has its own text — and neither is
+ * passed off as the other. */
 export const MINIFY_ENGINES = ['strip', 'esbuild'];
 
 const STYLES = {
@@ -33,12 +33,12 @@ const STYLES = {
     },
     method: { ru: 'esbuild {version} (minify, rename)', en: 'esbuild {version} (minify, rename)' },
     fallback: {
-      ru: '; остальные форматы ({exts}) — упрощение без комментариев и отступов, то есть приближение',
-      en: '; other formats ({exts}) lose comments and indentation — an approximation'
+      ru: '; остальные форматы ({exts}) — упрощение без комментариев и отступов',
+      en: '; other formats ({exts}) lose comments and indentation'
     },
     unavailable: {
-      ru: ' (минификатор esbuild недоступен — счёт упрощением, то есть приближением)',
-      en: ' (the esbuild minifier is unavailable — comments and indentation are stripped: an approximation)'
+      ru: ' (минификатор esbuild недоступен — счёт идёт упрощением)',
+      en: ' (the esbuild minifier is unavailable — comments and indentation are stripped)'
     }
   },
   tok: {
@@ -48,12 +48,12 @@ const STYLES = {
     },
     method: { ru: '{tool} {version}, {encoding} (BPE)', en: '{tool} {version}, {encoding} (BPE)' },
     binary: {
-      ru: '; для бинарных форматов ({exts}) это счёт байтов, а не текста — приближение',
-      en: '; binary formats ({exts}) are counted by bytes rather than text — an approximation'
+      ru: '; для бинарных форматов ({exts}) это счёт байтов, а не текста',
+      en: '; binary formats ({exts}) are counted by bytes rather than text'
     },
     estimate: {
-      ru: 'оценка по длине: 1 токен ≈ {chars} знака ({encoding} недоступен) — приближение',
-      en: 'length-based estimate: 1 token ≈ {chars} characters ({encoding} is unavailable) — an approximation'
+      ru: 'оценка по длине: 1 токен ≈ {chars} знака ({encoding} недоступен)',
+      en: 'length-based estimate: 1 token ≈ {chars} characters ({encoding} is unavailable)'
     }
   }
 };
@@ -71,7 +71,6 @@ export const METRICS = {
       ru: 'размер объекта git',
       en: 'the size of the git object'
     },
-    accuracy: 'exact',
     measure: (text) => byteLen(text)
   },
   min: {
@@ -103,57 +102,50 @@ export const METRICS = {
     needsText: true,
     note: { ru: 'сжатый поток (zlib, уровень 9)', en: 'compressed stream (zlib, level 9)' },
     method: { ru: 'zlib, уровень 9', en: 'zlib, level 9' },
-    accuracy: 'exact',
     measure: (text) => zlib.gzipSync(Buffer.from(text, 'utf8'), { level: 9 }).length
   }
 };
 
 /* The description of a metric for a reader: `note` is what the number means, `method` how it
- * was obtained, `accuracy` whether it is exact or approximate. */
+ * was obtained. */
 export function metricView(name, cfg) {
   const metric = METRICS[name];
   if (metric.view !== undefined) return metric.view(cfg);
   return {
     label: metric.label,
     note: metric.note[cfg.locale],
-    method: metric.method[cfg.locale],
-    accuracy: metric.accuracy
+    method: metric.method[cfg.locale]
   };
 }
 
-/* The label of the `min` metric. The honesty convention: `accuracy` speaks about the worst in
- * the column, while the method says where exactly the approximation is — so one format without
- * a minifier makes the whole metric approximate instead of hiding behind the "exact" of a
- * neighbouring file. The worst is taken by the same rule as the cell marks (`pointExact`)
- * rather than by the name of the method: a report with no approximate format at all is exact
- * even with the ballast stripped. */
+/* The label of the `min` metric. The method names the formats this metric counts another way: a
+ * format the minifier does not take is given in words rather than hidden behind the neighbouring
+ * one, so a reader sees what the column is made of. The list comes from the same rule the counting
+ * uses (`otherCountFormats`) rather than from the name of the method. */
 function minView(cfg) {
   const loc = cfg.locale;
-  const rough = approximateFormats('min', cfg);
+  const other = otherCountFormats('min', cfg);
   if (minEngine(cfg) === 'esbuild') {
     let method = STYLES.esbuild.method[loc].replace('{version}', minifier().version);
-    if (rough.length > 0) method += STYLES.esbuild.fallback[loc].replace('{exts}', rough.join(' '));
+    if (other.length > 0) method += STYLES.esbuild.fallback[loc].replace('{exts}', other.join(' '));
     return {
       label: METRICS.min.label,
       note: STYLES.esbuild.note[loc],
-      method: method,
-      accuracy: rough.length === 0 ? 'exact' : 'approximate'
+      method: method
     };
   }
   const degraded = cfg.minify.engine === 'esbuild';
   return {
     label: METRICS.min.label,
     note: STYLES.strip.note[loc],
-    method: STYLES.strip.method[loc] + (degraded ? STYLES.esbuild.unavailable[loc] : ''),
-    accuracy: rough.length === 0 ? 'exact' : 'approximate'
+    method: STYLES.strip.method[loc] + (degraded ? STYLES.esbuild.unavailable[loc] : '')
   };
 }
 
-/* The label of the `tok` metric. The honesty convention is the same as for `min`: the method
- * says which dictionary produced the number (family and encoding are part of the count rather
- * than a detail), and `accuracy` says whether it is exact or approximate. It turns approximate
- * in two cases, both spelled out: formats for which tokens are not counted (their number runs
- * by bytes) and a missing dictionary (then the count is an estimate by length). */
+/* The label of the `tok` metric. The method says which dictionary produced the number (family and
+ * encoding are part of the count rather than a detail) and names the two cases where the count is
+ * another one, both spelled out: formats for which tokens are not counted (their number runs by
+ * bytes) and a missing dictionary (then the count is an estimate by length). */
 function tokView(cfg) {
   const loc = cfg.locale;
   const settings = cfg.tokens;
@@ -163,44 +155,38 @@ function tokView(cfg) {
       label: METRICS.tok.label,
       note: STYLES.tok.note[loc],
       method: STYLES.tok.estimate[loc]
-        .replace('{chars}', CHARS_PER_TOKEN).replace('{encoding}', settings.encoding),
-      accuracy: 'approximate'
+        .replace('{chars}', CHARS_PER_TOKEN).replace('{encoding}', settings.encoding)
     };
   }
-  const binary = approximateFormats('tok', cfg);
+  const binary = otherCountFormats('tok', cfg);
   let method = STYLES.tok.method[loc]
     .replace('{tool}', 'gpt-tokenizer').replace('{version}', version).replace('{encoding}', settings.encoding);
   if (binary.length > 0) method += STYLES.tok.binary[loc].replace('{exts}', binary.join(' '));
   return {
     label: METRICS.tok.label,
     note: STYLES.tok.note[loc],
-    method: method,
-    accuracy: binary.length === 0 ? 'exact' : 'approximate'
+    method: method
   };
 }
 
-/* Whether a particular cell holds an exact number — one rule for both the metric label and the
- * cell mark. That is why the label cannot drift from the cells, and why the list of
- * approximate formats is computed here, by the same rule.
- *
- * `min` is exact where the file really is minified: by the minifier, or by parsing a format
- * that cannot get any shorter (JSON loses only insignificant whitespace — the list of exact
- * strategies is owned by `strip.js`, where the strategies live). `tok` is exact where a
- * dictionary exists and the format is text: the "tokens" of a picture or a font are its bytes.
- * `raw` and `gzip` are always exact: they are unambiguous quantities. */
-export function pointExact(name, file, cfg) {
-  if (name === 'min') return minifiedForm(file, cfg);
-  if (name === 'tok') return tokenizer(cfg.tokens).tool !== null && !isBinary(file);
-  return true;
+/* Whether a file of this report is really minified: by the minifier, or by parsing a format that
+ * cannot get any shorter (JSON loses only insignificant whitespace — the list of exact strategies
+ * is owned by `strip.js`, where the strategies live). */
+function minifiedForm(file, cfg) {
+  return esbuildLoader(file, cfg) !== null || EXACT_STRATEGIES.indexOf(strategyFor(file, cfg)) >= 0;
 }
 
-/* The formats of this report that will be measured approximately. The list is derived from the
- * settings and the rule of exactness rather than written by hand. */
-function approximateFormats(name, cfg) {
+/* The formats of this report that the metric counts another way — the minifier does not take
+ * them, or tokens are meaningless for them (the "tokens" of a picture or a font are its bytes).
+ * The list is derived from the settings and the counting rule rather than written by hand, and
+ * it is what the method names in words. */
+function otherCountFormats(name, cfg) {
   const exts = [];
   cfg.columns.forEach((col) => {
     col.paths.forEach((p) => {
-      if (pointExact(name, p, cfg)) return;
+      const counted = name === 'min' ? minifiedForm(p, cfg)
+        : tokenizer(cfg.tokens).tool !== null && !isBinary(p);
+      if (counted) return;
       const ext = path.extname(p).toLowerCase();
       if (exts.indexOf(ext) < 0) exts.push(ext);
     });
@@ -208,10 +194,6 @@ function approximateFormats(name, cfg) {
   return exts.sort();
 }
 
-function minifiedForm(file, cfg) {
-  return esbuildLoader(file, cfg) !== null || EXACT_STRATEGIES.indexOf(strategyFor(file, cfg)) >= 0;
-}
-
 /* Whether the file goes to the minifier: compression is requested, available and not overridden
  * by an explicit choice of the project — `minify.ext` outranks the engine and serves as the way
  * out when an extension lied about its content. One answer serves two questions: how to count
@@ -224,8 +206,8 @@ function esbuildLoader(file, cfg) {
 }
 
 /* The engine actually in force: the requested one may be unavailable, in which case the metric
- * falls back to another count — and the fallback is announced (`sensorGaps`), or an
- * approximation would travel as an exact number. */
+ * counts another way — and that is announced (`sensorGaps`), or a different count would travel
+ * into CI as the requested one. */
 export function minEngine(cfg) {
   if (cfg.minify.engine !== 'esbuild') return 'strip';
   return minifier().tool === null ? 'strip' : 'esbuild';

package/src/minify.js

@@ -10,8 +10,8 @@ import { refuseCause } from './refusal.js';
  * number. */
 
 /* The extensions the minifier answers for. This table is the single source of truth both for
- * the measurement and for the metric label ("the other formats are an approximation"), so the
- * two cannot drift apart. JSX and TSX are not here: the output depends on the project's `jsx`
+ * the measurement and for the metric label ("the other formats lose comments and
+ * indentation"), so the two cannot drift apart. JSX and TSX are not here: the output depends on the project's `jsx`
  * setting (`React.createElement` versus `react/jsx-runtime`), and measuring someone else's
  * decision about a runtime is not this tool's business — such files are honestly counted as a
  * simplification. */

package/src/modes.js

@@ -26,9 +26,9 @@ function kmb(bytes) {
 }
 
 /* Degradation is a fact of the report, not an error: the numbers came from a different
- * method (stripping instead of minification, an estimate instead of an exact count) because
+ * method (stripping instead of minification, an estimate instead of a counted one) because
  * an optional dependency is missing. The fact is printed once per sensor and becomes code
- * 4 — otherwise an approximation would travel into CI as success. */
+ * 4 — otherwise a different count would travel into CI as the requested one. */
 function note(gaps) {
   gaps.forEach((gap) => console.error('! ' + gap.why + '\n  fix: ' + gap.fix));
   return gaps.length === 0 ? EXIT.OK : EXIT.SENSOR;
@@ -39,11 +39,11 @@ function sensorNote(cfg) {
 }
 
 /* The mode's verdict together with the sensor notes: the note is printed always — silence
- * about a different count reads as an exact number, and a disagreement would be left without
- * a cause — while the code stays the more important one. A violation outranks an
- * approximation (the same order as in `check` and `doctor`): code 4 claims the numbers are
- * honest but counted differently, and when the table disagrees nobody checked that — the
- * disagreement may be a real edit that went past the report. */
+ * about a different count reads as the requested one, and a disagreement would be left without
+ * a cause — while the code stays the more important one. A violation outranks a sensor note
+ * (the same order as in `check` and `doctor`): code 4 claims the difference is explained by the
+ * missing sensor, and when the table disagrees nobody checked that — the disagreement may be a
+ * real edit that went past the report. */
 function verdict(code, gaps) {
   const sensors = note(gaps);
   return code === EXIT.OK ? sensors : code;
@@ -127,7 +127,7 @@ export function coverageMode(cfg, root, configFile, asJson) {
 /* Diagnostics in one answer (`size doctor`): environment, dependencies, settings and
  * coverage, assembled from the same pieces as the other modes. The exit code is not
  * "something is wrong" but the first by importance (settings → history → coverage →
- * approximation): an agent branches on it, a human reads the text. */
+ * sensor): an agent branches on it, a human reads the text. */
 export function doctorMode(root, configFile, asJson) {
   return answer(doctor(root, configFile), asJson, doctorText).exit;
 }

package/src/optional.js

@@ -1,8 +1,8 @@
 import { createRequire } from 'module';
 
 /* Optional dependencies: the minifier and the tokenizer. Missing ones are not a refusal but a
- * different count (a simplification instead of compression, an estimate instead of an exact
- * count), so their loading is shared and shaped the same way: lazy, synchronous
+ * different count (a simplification instead of compression, an estimate instead of a counted
+ * one), so their loading is shared and shaped the same way: lazy, synchronous
  * (`createRequire` — measuring is one synchronous pass, and `import()` would make the whole
  * chain asynchronous for the sake of a single sensor) and without an exception escaping —
  * unavailability comes back as an answer.

package/src/page/app.css

@@ -6,7 +6,7 @@
  *
  * The shared part is frozen by the artifact's bytes (`src/css.js`), which is why everything where the page departs from
  * its geometry is gathered in the "adaptations" section together with its reason: the shared part cannot grow, while on a
- * narrow screen the 300px commit column would eat the whole screen. */
+ * narrow screen the commit column would eat the whole screen. */
 
 :root {
   color-scheme: light dark;
@@ -111,12 +111,8 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 .box.plain input { cursor: default; }
 
 /* There is no legend under the file tree, and on purpose: below the list it pushed the numbers away, while its content
- * already stands next to what it explains — the colour of a delta is named by the sign of the number itself, accuracy
- * stands under the metric switches, and the mark of a file that is not there yet lives in the cell's tooltip.
- *
- * An approximate number is marked by a dashed line rather than a colour: colour in the table is taken by the delta (growth
- * and fall), and a second meaning on the same sign would read as the first. */
-#grid td.approx { text-decoration: underline dotted; text-underline-offset: 2.5px; }
+ * already stands next to what it explains — the colour of a delta is named by the sign of the number itself, the way each
+ * number was counted stands under the metric switches, and the mark of a gap lives in the cell's text. */
 
 /* 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
@@ -230,5 +226,7 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
   h1 { font-size: 18px; }
   #grid { font-size: 12px; }
   .shell { max-height: calc(100vh - 260px); }
-  .clip { width: 190px; }
+  /* The commit column needs no rule of its own here any more: its width is the measure `--clip` of the shared part
+   * (`src/table.css`), and on a narrow screen that measure stands as it is. A shorter one would be `--clip: 150px`
+   * here — the adaptation the shared part cannot make for itself. */
 }

package/src/page/app.js

@@ -1,101 +1,150 @@
-import { appData, appUi, appView, appWrite, appNotice, appLinkUse, appRead, appApply, appFoldRead } from './state.js';
-import { appBody, appHead, appState } from './table.js';
-import { appPanel } from './panel.js';
+import { appUnpack } from './payload.js';
+import { appAddressDrop, appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
+import { appColumn, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
+import { appPanel, appPanelAll, appPanelState } from './panel.js';
 
-/* Assembling the table: what to show (the metrics and files the reader left on) and where to put it. The table
- * chapter builds the markup of the head and the rows, the shared calculation gives the numbers — all that is
- * left here is the decision and the insertion, with no numbers of its own. */
-function appTable() {
-  const shown = appData.metrics.filter((m) => appView.metrics[m.key]);
-  const metrics = shown.map((m) => m.key);
-  const on = appView.files;
-  const files = [];
-  appData.files.forEach((f, i) => { if (on[i]) files.push(i); });
-  /* 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. Inside each part the order stays as it comes from the settings — `sort` is
-   * stable, and the order of the columns is what the reader is used to. The mark comes from the history (which the
-   * engine knows) rather than from the numbers: an edit that changed no size is an edit too. */
-  files.sort((a, b) => (appData.last[a] === true ? 0 : 1) - (appData.last[b] === true ? 0 : 1));
+/* 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.
+ *
+ * Hence two paths and no third: `appPaint` draws the whole view (the first drawing, a record from the browser's
+ * memory, a link in the address), while `appSwitch`, `appSwitchGroup` and `appSwitchMetric` are what one click on a
+ * box does. Neither makes a node.
+ */
 
-  const table = document.getElementById('grid');
-  table.textContent = '';
-  appState(metrics.length, files.length);
-  if (metrics.length === 0) return;
+// The table's cache of node references: made once, at the first drawing.
+let appCache = null;
 
-  table.appendChild(appHead(shown, files, metrics));
-  table.appendChild(appBody(metrics, files));
+/* 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() {
   document.getElementById('note').textContent = appUi.note
     .replace('{rows}', appData.rows.length)
     .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. */
+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. */
+export function appPaint() {
+  appData.files.forEach((_f, i) => appColumn(appCache, i, appView.files[i]));
+  appTotalsReset(appCache);
+  appMetrics(appCache);
+  appCounts();
+  appPanelAll();
   appWrite();
 }
 
-/* The panel's scroll is a property of the panel rather than of the markup, which is why it survives a rebuild:
- * otherwise every click on a checkbox would send the list back to the top and the files at its end would be
- * unreachable. Both the panel's scroll and the file list's are remembered — each has one of its own, and in a
- * narrow window it is the list that scrolls. The elements are the ones the page really has (`#panel` from the
- * markup, `.files` inside it from the panel): there is no second list of scroll places in the package. */
-const appScrolled = ['#panel', '#panel .files'];
-function appScrollTop() {
-  return appScrolled.map((sel) => {
-    const el = document.querySelector(sel);
-    return el === null ? 0 : el.scrollTop;
-  });
+/* One file switched by the reader: the view, its column, its share of the totals and the fields it shows in — each in
+ * its own place. The message about a link fades here: by this action the reader has read it. */
+export function appSwitch(i, on) {
+  if (appView.files[i] === on) return;
+  appView.files[i] = on;
+  appColumn(appCache, i, on);
+  appContribute(appCache, i, on);
+  appTotals(appCache);
+  appCounts();
+  appPanelState([i]);
+  appWrite();
+  appNotice('');
 }
 
-function appScrollBack(saved) {
-  appScrolled.forEach((sel, i) => {
-    const el = document.querySelector(sel);
-    if (el !== null) el.scrollTop = saved[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). */
+export function appSwitchGroup(indexes, on) {
+  const touched = indexes.filter((i) => appView.files[i] !== on);
+  touched.forEach((i) => {
+    appView.files[i] = on;
+    appColumn(appCache, i, on);
+    appContribute(appCache, i, on);
   });
+  appTotals(appCache);
+  appCounts();
+  appPanelState(touched);
+  appWrite();
+  appNotice('');
 }
 
-/* The panel is redrawn whole, so the field under the keyboard and the scroll come back to their places after every
- * rebuild: otherwise switching with Tab and Space would mean walking the panel from the start again, and the scroll
- * would have to find its place anew. A field is identified by its ordinal number — the order of the panel's fields
- * does not change between rebuilds. The focus is set without scrolling (`preventScroll`): it returns the keyboard
- * rather than moving the list. */
-function appRender(keepNotice) {
-  const at = Array.from(document.querySelectorAll('#panel input')).indexOf(document.activeElement);
-  const saved = appScrollTop();
+/* 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. */
+export function appSwitchMetric() {
+  appMetrics(appCache);
+  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. */
+function appFirst() {
   appPanel();
-  appScrollBack(saved);
-  if (at >= 0) document.querySelectorAll('#panel input')[at].focus({ preventScroll: true });
-  appTable();
-  /* The message about the link survives the very drawing it caused, and fades on the reader's next action: he has read
-   * it by then. */
-  if (keepNotice !== true) appNotice('');
+  appCache = appTable(document.getElementById('grid'));
+  appNote();
+  appPaint();
 }
 
+/* The page's one asynchronous step, and why there is one. The block in the artifact is packed, and the platform's own
+ * unpacker answers with a promise, so the first drawing waits for it; everything after the first drawing is as
+ * synchronous as it was, and a click costs what it cost. A host that cannot unpack is told in words instead of being
+ * left with an empty table — the reader would not know whether the report or the browser is at fault. */
+let appBooted = false;
+
 /* Restoring happens before the first drawing: for someone opening the page for the first time the view has to be the
  * default rather than someone else's choice. A link outranks the memory: it is the sender's explicit choice, and
  * while the reader has changed nothing it does not replace his own — writing it to the memory is what does not
  * happen. A refused link is not an empty table but a message: the reader sees both what happened and what is shown
  * instead. */
-const appStart = appLinkUse();
-if (appStart === 'ours') appTransient = true;
-else if (appStart === 'refused') appForeign = true;
-if (appStart !== 'ours') {
-  const appSaved = appRead();
-  if (appSaved !== null) appApply(appSaved);
+async function appBegin() {
+  try {
+    appBoot(await appUnpack(document.getElementById('data')));
+  } catch (_e) {
+    appNotice(appUi.unpack);
+    return;
+  }
+  const appStart = appLinkUse();
+  if (appStart === 'ours') appTransient = true;
+  else if (appStart === 'refused') appForeign = true;
+  if (appStart !== 'ours') {
+    const appSaved = appRead();
+    if (appSaved !== null) appApply(appSaved);
+  }
+  /* The folded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
+   * else's link is open (otherwise a link sent over would unfold the tree again on every visit). */
+  appFoldRead();
+  appFirst();
+  appBooted = true;
+  appStartup = false;
+  appForeign = false;
+  appTransient = false;
 }
-/* The folded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone else's
- * link is open (otherwise a link sent over would unfold the tree again on every visit). */
-appFoldRead();
-appRender(true);
-appStartup = false;
-appForeign = false;
-appTransient = false;
+
+/* Whoever opened the page and has to know when the first drawing is over waits for this promise — the checks do
+ * (`tools/page-harness.js`); the page itself has no use for it. */
+window.appDrawn = appBegin();
 
 /* The anchor changed on an open page: the choice in the new address is applied by the same code as at opening. The
  * page's own address raises no such event (`replaceState` does not), so there is no loop here. A refusal touches
  * neither the view — the reader keeps looking at what he looked at — nor the address: it was sent to the reader,
- * and until he acts it is not ours. */
+ * and until he acts it is not ours. The message about the link stays: this drawing is exactly what it explains. */
 window.addEventListener('hashchange', () => {
+  /* The first drawing has not happened yet: the address the page was opened with is the business of that drawing,
+   * and a change that arrives before it has drawn nothing to replace. */
+  if (!appBooted) return;
+  /* An address that came in from outside is read first and a write this page was still holding is dropped: the reader
+   * has the address they were sent, not the one the previous click armed (see `appAddressDrop`). */
+  appAddressDrop();
   const state = appLinkUse();
   if (state === 'refused') appForeign = true;
   appTransient = state === 'ours';
-  appRender(true);
+  appPaint();
   appForeign = false;
   appTransient = false;
 });