Check the browser-free cards against Chrome weekly, on request and on a label

[nstarman]

Changing code or schema

What and why: #345 draws the README's software cards without a browser, as a second implementation of the card CSS. Its tests hold it to a recording of Chrome and to properties that must hold of any card — but the equivalence needs an oracle, and the oracle is Chrome. This asks Chrome, about cards nobody recorded.

• tests/cardlayout.differential.test.js: fast-check generates a package, a width (160–900 px), a theme, a title, text, a role, a subset of its buttons and their labels; each card is laid out by the real card CSS in Chrome (the embed page, edited the same way) and by cardlayout.js, and compared op by op. A difference is shrunk to the smallest card that shows it, with a seed and path to replay (FC_SEED, FC_PATH). Skipped unless CARD_FUZZ is set, so npm test is unchanged.
• .github/workflows/card-layout-fuzz.yml runs it:
  • weekly (Mondays 05:00 UTC, 1000 cards);
  • on demand (Actions ▸ Run workflow: number of cards, optionally a seed and path to replay a failure);
  • on a label: adding fuzz-cards to a pull request runs it (300 cards), and the workflow takes the label off again when it ends so adding it again runs it again.
    A failure is in the step summary and kept as an artifact (fuzz-report). It runs on the dev server (the test imports the site's modules into the page), with Chromium from playwright (a new dev dependency; the recorder script uses it too).
• I created the fuzz-cards label (repo ▸ Labels) so it can be added.

What running it found, so far (all fixed in #345, now merged, each with a unit test): a button is never under 24 px; a title breaks anywhere (overflow-wrap); a card with no buttons has no box for them; HarfBuzz instead of opentype.js for text widths; Chrome measures at the font size floored to a hundredth of a px; three Plex Sans kerning pairs (jT, jV, jW) that HarfBuzz-for-JS misses; a labelled button is as wide as its content; the buttons' box leaves 0.8em less to wrap in; lengths are laid out in 1/64 px and a button's list item can be taller than the button; where Chrome breaks lines (after a hyphen before anything, an en dash, an ellipsis, a question mark); line height and half-leading, which turned out to be one rule once fitted to Chrome at 3,000 font sizes (the size to the nearest 1/64 px, the product down to a 64th, the half-leading halved in 64ths toward zero): after it, 500 generated cards in a row agreed with Chrome.

• npm run test:schema passes; unit tests and the build pass (the fuzz is skipped without CARD_FUZZ); the workflow parses as YAML — its first real run is on this PR once the label is added

🤖 Generated with Claude Code

[github-actions]

Preview: https://2b227b5f.nstarkman-space.pages.dev

Built from f5698272d832135d3b5a6c7928fbaeb2efc30958, including the four CV PDFs.
Updated on every push to this pull request.