@vernikr/size-report 2.8.0 → 2.8.1

package/README.md

@@ -10,7 +10,7 @@ shows.
 
 ## Status
 
-**Release 2.8.0 (2026-09-18).** The tool lives as a package of its own: the registry name is
+**Release 2.8.1 (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,22 @@ 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.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
+and painted them over one another — every rule of the shared part now hangs off `#grid`, and a check reads the selector
+list of that sheet rather than a sample of the page. **The numbers were placed from the grid's left edge while the commit
+column is pinned over it**, which hid the first column — the overall total — completely; they begin at the column's right
+edge now, a 220px figure written in the script and in the styling and held together like the three beside it. **The order
+of the columns comes from the numbers rather than from the commit's list of paths**: a commit can touch a file without
+moving it — this package's own attachment to itself, 2.7.0 → 2.8.0, is one character for another — and a column of empty
+cells standing in front of the table is what a reader calls a broken order, so a file's newest move decides its place;
+the engine's mark `last` stays in `--data` while the page's block no longer carries it. **One border and one height:**
+every line of the table is 1px of one colour (the header's two lines were 2px and another shade) and the header is two rows
+of the table's own height, while a file's name is centred over its group. The artifact grows 351 B for it — 85 495 B
+against 85 144 B of one history. The checks go 88 → **89** in the fast profile and 193 → **194** in the full one; the
+figures and the reasoning stand in `worklog/0209-page-drawing-order.md`.
+
 2.8.0 is about what the report costs whoever opens it, and its figures are measured rather than retold.
 **The table is a window of itself:** every row and every column in sight is built, plus four beyond each edge so that
 the edge of the window is never seen empty, while the rest of the table exists as the extent of the scrolled box and
@@ -237,11 +253,10 @@ commits and installs hooks; the reason for each expensive file is named line by
 
 | Run | Command | Checks |
 |---|---|---|
-| Fast — every edit | `pnpm test` | **88 of 193** |
-| Full — release and CI | `pnpm test:all` | **193** |
+| Fast — every edit | `pnpm test` | **89 of 194** |
+| Full — release and CI | `pnpm test:all` | **194** |
 
-No check is lost or weakened: the full run starts all 186 with the same files, the fast one takes part
-of them. The default is the full run — a file becomes fast only explicitly and with a reason — so new
+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:
 `test/suites.test.js` (every file classified, and a reason for each) and the documentation guard
 `test/docs-numbers.test.js` (the numbers in the table above).
@@ -367,10 +382,14 @@ a *single* cell of this repository's report, 539 ms for 6 000 (`probes/step-12-c
 table is **2 460 nodes and 0.15 GB**, a hundredth of the nodes and a tenth of the memory, and the whole-table scroll
 pass that took 36 s of task time over 60 steps takes **1.1 s over 251** (`worklog/0208-table-window.md`). **The columns
 are one width and fixed, 70px each**: the numbers are short and of one kind, and a width that came out of the text is a
-measurement of every cell of the column — the very cost this step removed. A file's name over its group is cut with an
-ellipsis rather than wrapped (the header is one line high and the whole name stands in the tooltip). The geometry is
-three figures — a column, a row, the header — written in the styling and in the script that counts the window's ordinals
-in them, and `test/page-grid.test.js` reads both and holds them together.
+measurement of every cell of the column — the very cost this step removed. A file's name stands centred over its group
+and is cut with an ellipsis rather than wrapped — the whole name stays in the tooltip. The header is two lines of one
+row each, the numbers begin at the
+right edge of the pinned commit column rather than under it, and every line of the table — under a row, under a header
+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.
 
 **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
@@ -387,15 +406,16 @@ virtualizes rows out of a string of all of them and knows nothing of columns —
 the artifact, whose bytes this very tool measures. What is left to write after any of them is what the chapter is: the
 window, the cells, the header and the pinned column.
 
-**The columns the last commit touched come first.** The report is rebuilt after every commit, and a
-reader's first question is what that edit brought. The mark comes from the history rather than from the
-numbers — an edit that changed no size is an edit too — and it is taken from the last commit that
-touched at least one column, counting back from the top: a commit that went past the columns, above all
-the report itself, which the hook commits, is skipped, or the mark would depend on the report's own
-commit, the same run would give different bytes and the hook would commit the report a second time.
-Inside each part the order stays as it comes from the settings (the sort is stable): the order of the
-columns is what the reader is used to, and his choice of files does not rearrange it
-(`test/page-grid.test.js`, the contract's `last` field).
+**The columns whose numbers last moved come first.** The report is rebuilt after every commit, and a
+reader's first question is what that edit brought. The mark is taken from the numbers rather than from
+the commit's list of paths, and that is the whole of the difference: a commit can touch a column without
+moving it — a version bumped inside a line of the same length, this package's own attachment to itself is
+one — and a column of empty cells standing in front of the table is what a reader calls a broken order.
+The rest follows in the settings' order (the sort is stable), so the order of the columns is what the
+reader is used to, and his choice of files does not rearrange it (`src/page/table.js`; the rule is counted
+from the contract's own rows in `test/page-grid.test.js`). The engine still answers with `last` — the
+columns the newest commit touched — in `--data`; the page no longer reads it, and the block it carries no
+longer holds it.
 
 **On a wide window the panel stands to the left of the table and takes no room from the numbers** (from
 900px, `src/page/app.css`). That is not decoration: a desktop has much side room and little vertical
@@ -578,13 +598,13 @@ acceptance for each.
 | `src/size-table.js` | The package's entry point: a re-export of the public API (55 names) and no calculation of its own |
 | `src/derived.js` | The report's shared calculation: totals, deltas, a cell, a commit's caption — one for the engine and the page's program |
 | `src/css.js` | Reading the styling from disk: which sets of styles exist and what role each has |
-| `src/table.css` | The report's table: the geometry of the window — one width per column, one height per row, the header — the sticky header and commit column, a file's caption cut with an ellipsis, the colour of deltas |
+| `src/table.css` | The report's table: the geometry of the window — one width per column, one height per row, the two lines of the header, the pinned commit column — the sticky header and commit column, one 1px line of one colour for every border, a file's caption centred over its group and cut with an ellipsis, the colour of deltas |
 | `src/page/app.css` | The page's styling on top of the shared part: the panel with the file tree and its sticky row of categories (a column on the left on a wide screen, the page fitting the window), the empty states, a narrow window |
 | `src/page/payload.js` | The page's block in sparse form, and the one place that unrolls it back: the history as changes (a file's appearance, its moves, its disappearance) turned into the snapshots the calculation and the table already speak — a value that did not move is one object shared by the rows that hold it |
 | `src/page/state.js` | The page's state: the report's data (the block unrolled by the payload chapter), the view of the checkboxes, the pointer "which path is which column", the unfolded folders, the record's passport, the browser's memory and the link that is read out of the address — a chapter of the page's program |
 | `src/page/dom.js` | The page's nodes: the small helpers of markup (`appEl`, `appBox`) — one set for the panel and the table alike |
 | `src/page/panel.js` | The panel of choices: the switches of metrics and files, the categories, the tree of the project's paths (files outside the report keep a checkbox off with a reason and stand after the rest, and a hidden name after every visible one; the tree opens folded and folders carry a sign that hides the subtree by a class rather than by a rebuild); built once, with the fields of the switches and of the folders and categories written where they stand |
-| `src/page/table.js` | The page's table as a window: the rows and the columns the reader can see (plus four beyond each edge), a cell, a commit's caption, the header, the empty states and the two figures of the window — markup over the shared calculation, with the totals counted per row from the choice, the geometry in pixels that the styling mirrors, and the reason a library was not taken |
+| `src/page/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/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 |
@@ -633,7 +653,7 @@ acceptance for each.
 | `test/refusals-catalog.test.js` | The guard of the refusal catalogue: every refusal site in the sources has an entry, every entry declares its advice, and refusals handed to another check are really accepted by it (the named file and line are checked) |
 | `test/contract-data.test.js` | The data contract: the numbers against the reference, the set of fields against the derived quantities, the metric's method against the way the numbers were counted — and the round trip through the page's sparse block, which restores the contract whole and twice over the same bytes |
 | `test/contract-derived.test.js` | The derived quantities against the artifact's numbers: a row's totals, a cell's delta and the delta of a total — on the code that lies in the tree |
-| `test/page-grid.test.js` | The grid of the page as a window: what the reader sees is built and no more, the geometry of the styling against the script's, the rows and the columns that a scroll builds and drops, a number under its own caption, a file and a metric switched off, and every row of the window against the engine's own calculation |
+| `test/page-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 |
@@ -717,7 +737,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.0
+pnpm add -D github:vernikr/size-report#v2.8.1
 ```
 
 With no network (or nothing to fetch from codeload) — the tarball: `pnpm pack` in the package clone, then
@@ -729,7 +749,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.0`, which is also the one in the example (forty characters work as well, but they have to be copied
+`v2.8.1`, 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.0",
+  "version": "2.8.1",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.7.0",
+    "@vernikr/size-report": "2.8.0",
     "c8": "10",
     "dependency-cruiser": "17",
     "eslint": "^9.18.0",

package/src/page/app.css

@@ -14,7 +14,10 @@
   --pad: clamp(16px, 3vw, 34px);
   --radius: 10px;
   --muted: rgba(127, 127, 127, .85);
-  --line: rgba(127, 127, 127, .32);
+  /* The same grey as the table's own lines (`--grid-line` of `src/table.css`): the frame around the numbers and the rows
+   * inside it are one drawing, and a second grey for the chrome is what makes a page look assembled from two. The two
+   * declarations are held together by the check that reads the borders of both sheets. */
+  --line: rgba(127, 127, 127, .25);
   --tint: rgba(127, 127, 127, .07);
 }
 
@@ -231,7 +234,8 @@ 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); }
-  /* 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. */
+  /* The commit column keeps its width on a narrow screen, and that is deliberate rather than forgotten: the numbers
+   * are placed beside it by the script (`APP_COMMIT`), so a narrower column here would leave a band of empty grid
+   * between the two — one number would have to be read from the styling by the script, which is a second copy of a
+   * geometry the check holds together (`test/page-grid.test.js`). */
 }

package/src/page/build.js

@@ -126,11 +126,13 @@ function uiText(page, loc) {
  * 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.
+ * What the block leaves out besides the sparse form are two facts the page does not read. The list of skipped commits
+ * 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 does not show it. The other is `last`, the columns the newest commit touched: the page orders the
+ * columns by the numbers themselves, which is a different fact (`src/page/table.js` says why), and the block would
+ * carry a list nothing asks for. Both stay 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
@@ -139,7 +141,7 @@ function uiText(page, loc) {
 /* 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'];
+  'catalog', 'rows', '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
@@ -227,10 +229,8 @@ export function pagePayload(data) {
       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;
 }
 

package/src/page/payload.js

@@ -15,7 +15,9 @@
  * 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`,
+ * The model after `appDecode` is exactly `--data` but for one field: the history's mark `last` (the columns the
+ * newest commit touched) is not carried, because the page orders its columns by the numbers rather than by the
+ * commit's list of paths (`src/page/table.js`). 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
@@ -149,8 +151,6 @@ function appRowOf(p, r, values) {
 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,
@@ -162,7 +162,6 @@ export function appDecode(p) {
       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
+    now: hist.now
   };
 }

package/src/page/table.js

@@ -13,7 +13,8 @@ import { appData, appUi, appView } from './state.js';
  * to build less rather than to promise the browser will skip it. A grid of `position: absolute` rows has no layout to
  * be redone: a row is placed by its `top`, a column by the `left` of the group of cells that starts it, and the
  * browser never measures a cell to decide a width — every column is `--col` wide (70px), which is what the numbers
- * need and no more (the counted widths this step replaced were 47–70px).
+ * need and no more (the counted widths this step replaced were 47–70px), and they begin at the right edge of the
+ * pinned commit column (`APP_COMMIT`) rather than under it.
  *
  * **Why not a library.** A virtualizer for two axes is not a solved problem for a page like this one — measured from
  * the tarballs, `@tanstack/virtual-core` is ~6.7 kB gzip and headless (the rows and columns are two virtualizers and
@@ -37,10 +38,12 @@ import { appData, appUi, appView } from './state.js';
  */
 
 /* The geometry in pixels: written here and read by the styling (`src/table.css`), which is one copy too many — hence
- * `test/page-grid.test.js` holds the two together, and the report says the same numbers in its journal. */
+ * `test/page-grid.test.js` holds the two together, and the report says the same numbers in its journal. The header is
+ * two lines of one row each, and the commit column is as wide as the styling pins it. */
 export const APP_COL = 70;
 export const APP_ROW = 25;
-export const APP_HEAD = 44;
+export const APP_HEAD = APP_ROW * 2;
+export const APP_COMMIT = 220;
 
 /* How much more than the visible window is built, in rows and in columns. A window that ends exactly at the edge of
  * the shell shows an empty band while the browser scrolls a notch; four rows and four columns of slack are cheaper
@@ -53,15 +56,41 @@ export const APP_OVER = 4;
 export const APP_MIN_ROWS = 24;
 export const APP_MIN_COLS = 10;
 
-/* The order of the columns: the files 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 is the settings', and
- * it depends on the files rather than on the choice: that is what lets a column be switched off without moving the
- * others. */
+/* The order of the columns: the files whose numbers last moved come first, and the older the move the further right the
+ * column stands. A reader opens the report after a commit, and what he looks for is what that edit brought — while the
+ * rest may as well be ordered by the settings, which is the order of the ties.
+ *
+ * The mark is taken from the numbers rather than from the history's list of paths, and that is the whole of the
+ * difference: a commit can touch a column without moving it (a version bumped inside a line of the same length, this
+ * package's own attachment to itself is one), and a column of empty cells standing in front of the table is what a
+ * reader sees as a broken order. The list of paths is the engine's (`--data`), which is where a fact about a commit
+ * belongs; what stands here is a fact about the numbers.
+ *
+ * The order depends on the files rather than on the choice: that is what lets a column be switched off without moving
+ * the others. Counted once per document — the model does not change while the page is open — because every window the
+ * reader scrolls to asks for it. */
+function appRank() {
+  const rank = appData.files.map(() => -1);
+  let was = null;
+  appData.rows.forEach((row, i) => {
+    /* The rows of a file are the same object until it moves (`src/page/payload.js`), so one comparison per file and
+     * row says whether the file appeared, moved or went away at this commit — the three cases a cell is not empty. */
+    row.values.forEach((v, j) => { if (was === null || was[j] !== v) rank[j] = i; });
+    was = row.values;
+  });
+  return rank;
+}
+
+let appOrderValue = null;
+
 export function appOrder() {
-  const files = [];
-  appData.files.forEach((_f, i) => files.push(i));
-  files.sort((a, b) => (appData.last[a] === true ? 0 : 1) - (appData.last[b] === true ? 0 : 1));
-  return files;
+  if (appOrderValue === null) {
+    const rank = appRank();
+    const files = [];
+    appData.files.forEach((_f, i) => files.push(i));
+    appOrderValue = files.sort((a, b) => rank[b] - rank[a]);
+  }
+  return appOrderValue;
 }
 
 /* The files whose columns are built, in the order of the columns: what is switched off is not among them, which is
@@ -141,7 +170,9 @@ function appRow(cache, r, span) {
   else commit.appendChild(appCommit(appData.rows[i]));
   row.appendChild(commit);
   const cells = appEl('div', 'cells');
-  cells.style.left = (span.c0 * APP_COL) + 'px';
+  /* 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;
@@ -173,7 +204,7 @@ 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 = (g0 * count * APP_COL) + 'px';
+  const left = (APP_COMMIT + g0 * count * APP_COL) + 'px';
   const head = appEl('div', 'head');
   head.appendChild(appEl('div', 'c-commit', appUi.commit));
   const groups = appEl('div', 'hgroups');
@@ -214,7 +245,7 @@ export function appSpan(cache) {
   cache.slot = cache.list.map((i) => cache.rank[i]);
   const cols = count * (cache.list.length + 1);
   const rows = appData.rows.length + 1;
-  cache.grid.style.width = (cols * APP_COL) + 'px';
+  cache.grid.style.width = (APP_COMMIT + cols * APP_COL) + 'px';
   cache.grid.style.height = (APP_HEAD + rows * APP_ROW) + 'px';
   if (count === 0) return { r0: 0, r1: -1, c0: 0, c1: -1 };
   const high = shell.clientHeight || APP_MIN_ROWS * APP_ROW;

package/src/table.css

@@ -1,25 +1,29 @@
 /* The report's table: a grid of plain elements rather than a `<table>`, and only the part of it the reader looks at is
  * built (`src/page/table.js` says why, and what was measured).
  *
- * Three figures are the whole geometry — a metric column, a row and the header — and they are written twice, here and
- * in the script that counts the window's ordinals in them. Two copies of a number are two answers waiting to happen,
- * hence `test/page-grid.test.js` reads these three declarations and holds the script to them. The fourth, the commit
- * column's width, is the styling's alone: the script places the numbers from the left edge of the grid, and the caption
- * is pinned over them.
+ * Everything here hangs off `#grid`, and that is not a habit: this sheet is the package's **shared** part (`src/css.js`)
+ * while the page brings a `.panel .row` of its own, and an unscoped rule for the table's rows took that row out of the
+ * flow with it (the panel's switches stood on top of one another until the rules were scoped).
+ *
+ * Four figures are the whole geometry — a metric column, a row, the header and the commit column — and they are written
+ * twice, here and in the script that counts the window's ordinals in them. Two copies of a number are two answers waiting
+ * to happen, hence `test/page-grid.test.js` reads these four declarations and holds the script to them.
+ *
+ * One border: 1px of one colour — a row's bottom edge, a group's left edge, the lines of the header. A heavier line or a
+ * second colour would promise a hierarchy to be worked out rather than read.
  *
  * One type face for the whole table; numbers line up by their digits thanks to tabular-nums rather than through a
- * monospaced font. Every column is the same width and fixed: the numbers are short and of one kind, and a width that
- * came out of the text would have to be measured over every cell of the column — the very cost this step removed.
- * A file's caption over its group is cut with an ellipsis rather than wrapped (`appCaption`), because the header is one
- * line high and the grid is built of rows of one height.
+ * monospaced font. Every column is the same width and fixed: the numbers are short and of one kind, and a width that came
+ * out of the text would have to be measured over every cell of the column — the very cost this step removed. The header is
+ * two lines of one row each — `--head` is exactly two `--row` — and a name too long for its group is cut with an ellipsis
+ * rather than wrapped (`appCaption`) or run over its neighbour.
  */
 #grid {
   --col: 70px;
   --row: 25px;
-  --head: 44px;
+  --head: 50px;
   --commit: 220px;
   --grid-line: rgba(127, 127, 127, .25);
-  --grid-edge: rgba(127, 127, 127, .35);
   position: relative;
   font-variant-numeric: tabular-nums;
 }
@@ -28,8 +32,8 @@
  * painting — no layout and no script — while the width of the content gives the scrollbar its length and the script its
  * ordinals. The cells of a row are one grid of fixed tracks (`grid-auto-columns`): a cell cannot change the width of a
  * column, and it cannot push its neighbour. */
-.row { position: absolute; left: 0; width: 100%; height: var(--row); }
-.cells {
+#grid .row { position: absolute; left: 0; width: 100%; height: var(--row); }
+#grid .cells {
   position: absolute;
   top: 0;
   display: grid;
@@ -37,32 +41,42 @@
   grid-auto-columns: var(--col);
   height: var(--row);
 }
-.cells > span, .hgroups > span, .hmetrics > span { box-sizing: border-box; white-space: nowrap; }
-.cells > span { padding: 2px 4px; line-height: 20px; border-bottom: 1px solid var(--grid-line); }
-.num { text-align: right; }
+#grid .cells > span, #grid .hgroups > span, #grid .hmetrics > span { box-sizing: border-box; white-space: nowrap; }
+/* Two pixels of padding and a line of twenty: with the border, a cell is one `--row` high — the same for the header's
+ * cells as for the numbers, or the header would be a band of another rhythm. */
+#grid .cells > span {
+  padding: 2px 4px;
+  line-height: 20px;
+  border-bottom: 1px solid var(--grid-line);
+}
+#grid .num { text-align: right; }
 /* The left edge of a group — the total, and every file — is carried by the group's first metric. One class instead of
  * the four rules of "which metric is switched on": the window is built out of the files that are on, so which column
  * stands first in a group is the page's own answer rather than something the styling has to work out. */
-.cells > .g, .hmetrics > .g, .hgroups > .gh { border-left: 1px solid var(--grid-edge); }
+#grid .cells > .g, #grid .hmetrics > .g, #grid .hgroups > .gh { border-left: 1px solid var(--grid-line); }
 
 /* The header: one row of groups (the total and the files) over one row of metrics, stuck to the top edge of the shell,
  * and the commit column stuck to its left edge. Both carry an opaque background (Canvas), or the numbers would show
- * through them while the reader scrolls. */
-.head { position: sticky; top: 0; left: 0; z-index: 3; height: var(--head); background: Canvas; }
-.hgroups, .hmetrics { position: absolute; display: grid; grid-auto-flow: column; grid-auto-columns: var(--col); }
-.hgroups { top: 0; height: 22px; }
-.hmetrics { top: 22px; height: 22px; }
-.hgroups > span, .hmetrics > span { padding: 0 4px; line-height: 20px; border-bottom: 2px solid var(--grid-edge); }
-.hgroups > span { text-align: left; }
-/* A file's name is one line of a fixed room: a name that does not fit is cut with an ellipsis (`appCaption` puts the
- * whole of it into the tooltip) rather than wrapped — the grid is rows of one height — or run over its neighbour. */
-.hgroups > span { overflow: hidden; text-overflow: ellipsis; }
-.hmetrics > span { text-align: center; color: CanvasText; }
+ * through them while the reader scrolls. The two lines are placed by `top` and are one row high each, so the header
+ * aligns with the table below it rather than standing a size of its own. */
+#grid .head { position: sticky; top: 0; left: 0; z-index: 3; height: var(--head); background: Canvas; }
+#grid .hgroups, #grid .hmetrics { position: absolute; display: grid; grid-auto-flow: column; grid-auto-columns: var(--col); }
+#grid .hgroups { top: 0; height: var(--row); }
+#grid .hmetrics { top: var(--row); height: var(--row); }
+#grid .hgroups > span, #grid .hmetrics > span {
+  padding: 2px 4px;
+  line-height: 20px;
+  border-bottom: 1px solid var(--grid-line);
+}
+/* A file's name stands over its group of metrics and is centred on it: the group is a column of numbers, and a caption
+ * that began at its left edge would carry the eye to the wrong place. */
+#grid .hgroups > span { text-align: center; overflow: hidden; text-overflow: ellipsis; }
+#grid .hmetrics > span { text-align: center; color: CanvasText; }
 
-/* The commit column: a sticky cell of every row, so the commit a number belongs to is in sight while the reader
- * scrolls sideways. Its width is fixed, and a caption longer than it is clipped — the whole subject stands in the
- * tooltip. */
-.c-commit {
+/* The commit column: a sticky cell of every row, so the commit a number belongs to is in sight while the reader scrolls
+ * sideways. Its width is fixed and is the script's `APP_COMMIT` as well — the numbers are placed from the left edge of
+ * the grid *beside* the column, and a caption longer than it is clipped (the whole subject stands in the tooltip). */
+#grid .c-commit {
   position: sticky;
   left: 0;
   z-index: 2;
@@ -79,24 +93,24 @@
   white-space: nowrap;
   border-bottom: 1px solid var(--grid-line);
 }
-.c-commit a { color: inherit; }
-.head .c-commit { z-index: 6; height: var(--head); line-height: var(--head); border-bottom-width: 2px; }
+#grid .c-commit a { color: inherit; }
+#grid .head .c-commit { z-index: 6; height: var(--head); line-height: var(--head); }
 /* This block fills the commit column: the cell clips what does not fit, and the subject is what gives way (the flex
  * item of `flex: 1 1 auto`), while the date and the journal mark keep their own width. */
-.clip { display: flex; align-items: baseline; gap: 6px; width: 100%; }
-.when { flex: none; opacity: .7; }
-.subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
-.subj.plain { opacity: .7; }
-.sect { flex: none; opacity: .7; font-size: 11px; text-decoration: none; border-bottom: 1px dotted currentColor; }
+#grid .clip { display: flex; align-items: baseline; gap: 6px; width: 100%; }
+#grid .when { flex: none; opacity: .7; }
+#grid .subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
+#grid .subj.plain { opacity: .7; }
+#grid .sect { flex: none; opacity: .7; font-size: 11px; text-decoration: none; border-bottom: 1px dotted currentColor; }
 /* Growth green, fall red — by agreement with whoever asked for the report (growth is "more logic" rather than alarm). */
-.up { color: #1e8449; }
-.down { color: #c0392b; }
-.miss { opacity: .5; }
-/* The top row holds the current sizes: it is also what explains what the deltas below refer to. */
-.row.now > .c-commit { font-weight: 600; }
-.row.now > .c-commit, .row.now > .cells > span { border-bottom-width: 2px; }
+#grid .up { color: #1e8449; }
+#grid .down { color: #c0392b; }
+#grid .miss { opacity: .5; }
+/* The top row holds the current sizes: it is also what explains what the deltas below refer to — by its weight rather
+ * than by a heavier line, which would be a second border among the rows. */
+#grid .row.now > .c-commit { font-weight: 600; }
 /* A row's highlight is laid over rather than swapped in: the sticky column has to stay opaque, or numbers show through
  * it while the reader scrolls sideways. */
-.row:hover > .c-commit, .row:hover > .cells > span {
+#grid .row:hover > .c-commit, #grid .row:hover > .cells > span {
   background-image: linear-gradient(rgba(127, 127, 127, .08), rgba(127, 127, 127, .08));
 }