Give the render probes the one open-root walk their comments already claim (#120)

## Problem

Three comments across the render probes name `OPEN_ROOTS` as the one
answer to which trees are the page, and the identifier does not exist.
The shadow-root walk it names is written out inline six times —
byte-identical — in `words.js` (twice), `widgets.js` (twice),
`framing.js`, and `runtime.js`.

Each of the three comments states the opposite of what the code does:

- `words.js` carried a section note ending "Written once, because it is
one claim about the page and two copies of it are two things to keep
level", sitting above two copies in that same file.
- `framing.js`'s `trappedMargins` opens "Which document each box is in,
imported rather than restated, for the same reason UNMARKABLE_ITEMS
imports its two" — and the next four lines restate it.
- `widgets.js`'s `retiredSlots` says the holders "are found through
OPEN_ROOTS too".

`UNMARKABLE_ITEMS`, `COVERED_WORDS` and `TINY_BOXES` all resolve — the
prose convention is SCREAMING_CASE for a camelCase export, and
`unmarkableItems` really does import `shownBox`/`shownParts` rather than
restate them. `OPEN_ROOTS` is the one reference in the directory with
nothing behind it, so the file that documents the invariant is the file
that breaks it.

## Solution

Extract `openRoots` into `render-checks/open-roots.js` and import it in
the four modules, deleting all six copies. The section note moves to the
new module, where it is now true, and gains the two boundaries a reader
has to know: why this is not the runtime's `shadowRootsIn` (that one
reads the registry's `x-shadow` list and is right to, this one walks so
an undeclared root is still read), and why `standalone.js` keeps a walk
of its own (it is served import-free so a BAKE'd copy can be probed from
a `file://` URL). The three prose references are left spelled
`OPEN_ROOTS`, which is now the same kind of reference as its neighbours.

`PROBE_SOURCES` is glob-built over the directory, so the new module is
served with no change to `render_checks.py` or `http.py`. It is
deliberately not added to `index.js`: it is a helper the probes import,
not a probe the gate calls.

## Testing

No regression test. The change is behaviour-preserving by construction —
six byte-identical expressions replaced by one import of the same
expression — so there is no state in which the old code and the new
disagree, and a test could only assert that the file count is one, which
is what `git` already shows. The probes themselves are covered by the
existing gate suite, and the walk is load-bearing across all of it:
`pageSettled` (`runtime.js`) is the wait almost every render test hangs
on, so a broken walk fails the suite rather than one case.

Run on this branch:

- `tests/test_render_commands.py`, `tests/test_render_export.py` — 32
passed.
- `tests/test_render_gate.py`, `tests/test_render_projection.py`,
`tests/test_render_startup.py` — 182 passed, 4 failed.
- `pre-commit` over the five changed files — prettier, eslint, typos all
pass.

<details><summary>The four failures are the layout regression already
red on main</summary>

They are not this branch's. [`ci` run
33296070275](https://github.com/max-sixty/leaf/actions/runs/33296070275)
on `3d494e1` and [run
33295489155](https://github.com/max-sixty/leaf/actions/runs/33295489155)
on `26feec8` both report the same four from this file, with the same
assertions:

-
`test_a_reader_arrives_at_what_they_left_rather_than_watching_it_arrive`
-
`test_the_render_gate_tells_a_float_in_the_margin_from_one_spilling_out_of_it`
- `test_the_reader_draws_an_edge_to_the_width_they_want[comments]`
-
`test_a_window_with_no_room_for_a_chosen_width_does_not_un_choose_it[comments]`

They belong to a 13-test cluster spanning `test_render_controls.py`,
`test_render_gate.py`, `test_render_options.py`, `test_render_pages.py`
and `test_render_widgets.py`, all reporting sideways document scroll or
a 12–15px offset (`assert -15 == 0`, "the page scrolls sideways with the
tray up"). `tend-ci-fix` runs are in flight for both commits, so this
branch leaves them alone.

</details>

Co-authored-by: leaf-agent <318509791+leaf-agent@users.noreply.github.com>

Author: leaf-agent

skills/leaf/scripts/leaf/render-checks/framing.js

@@ -1,4 +1,5 @@
 import { inChrome } from "/runtime/widget-api.js";
+import { openRoots } from "./open-roots.js";
 
 // A box that draws an inset and shows a different one. A child's outer margin normally
 // collapses through its parent and is spent between blocks; where the parent draws
@@ -27,16 +28,10 @@ import { inChrome } from "/runtime/widget-api.js";
 //
 // Deduped per tag and edge, because one mistake is on every instance of that widget.
 export function trappedMargins() {
-  // Which document each box is in, imported rather than restated, for the same
-  // reason UNMARKABLE_ITEMS imports its two: the runtime's layer holds shadow roots
-  // of its own, and a `closest` written out here stops at the first of them and
+  // Which document each box is in is OPEN_ROOTS', imported rather than restated, for
+  // the same reason UNMARKABLE_ITEMS imports its two: the runtime's layer holds shadow
+  // roots of its own, and a `closest` written out here stops at the first of them and
   // calls what it finds the page's.
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
   const px = (v) => parseFloat(v) || 0;
   // The platform's own answer to "does a child's margin reach my edge, and can it get
   // past it": a box that establishes a formatting context keeps every margin inside.
@@ -78,7 +73,7 @@ export function trappedMargins() {
     return out;
   };
   const found = [];
-  for (const root of roots(document))
+  for (const root of openRoots(document))
     for (const el of root.querySelectorAll("*")) {
       const s = getComputedStyle(el);
       if (s.display === "none" || s.display === "contents") continue;

skills/leaf/scripts/leaf/render-checks/open-roots.js

@@ -0,0 +1,23 @@
+/* Which trees are the page, for the readings that answer for what a widget renders
+ * rather than for what it declares.
+ *
+ * Every open root, found by walking rather than read off the registry's x-shadow list:
+ * a root a module attached without declaring one still holds words and code the reader
+ * has to read, and a reading that asked the registry would look away from exactly the
+ * tree nobody vouched for. That is the whole of the difference from the runtime's own
+ * `shadowRootsIn`, which answers the document's question — whose words these are — and
+ * is right to stop at what a version promised.
+ *
+ * Written once, because it is one claim about the page and two copies of it are two
+ * things to keep level. Every probe that crosses a shadow boundary imports it rather
+ * than restating it, for the same reason UNMARKABLE_ITEMS imports its two readings
+ * from the runtime: what one probe walks and what another walks cannot come apart.
+ *
+ * `standalone.js` keeps a walk of its own, and has to: it is served import-free so a
+ * BAKE'd copy can be probed from a file:// URL with no module graph behind it. */
+export const openRoots = (root) => [
+  root,
+  ...[...root.querySelectorAll("*")]
+    .filter((el) => el.shadowRoot)
+    .flatMap((el) => openRoots(el.shadowRoot)),
+];

skills/leaf/scripts/leaf/render-checks/runtime.js

@@ -1,4 +1,5 @@
 import { ARRANGEMENTS } from "/runtime/widget-api.js";
+import { openRoots } from "./open-roots.js";
 
 export const runtimeStarted = () => document.querySelector(".lf-banner") !== null;
 export const upgraded = () => document.body.dataset.lfUpgraded === "1";
@@ -9,20 +10,14 @@ export const logApplied = (applied) =>
   Number(document.body.dataset.lfApplied ?? -1) >= applied;
 
 export function moving() {
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
   const at = (el) => {
     for (let node = el; node; node = node.getRootNode?.()?.host) {
       const named = node.closest?.("[id]");
       if (named) return `<${named.tagName.toLowerCase()} id=${named.id}>`;
     }
     return `<${el?.tagName?.toLowerCase() ?? "?"}>`;
   };
-  return roots(document)
+  return openRoots(document)
     .flatMap((root) => root.getAnimations())
     .filter(
       (animation) =>

skills/leaf/scripts/leaf/render-checks/widgets.js

@@ -5,6 +5,7 @@ import {
   quoted,
   textNodesUnder,
 } from "/runtime/widget-api.js";
+import { openRoots } from "./open-roots.js";
 
 export const failSoftErrors = () =>
   [...document.querySelectorAll(".lf-error")].map((el) => el.textContent.trim());
@@ -75,19 +76,13 @@ export const missingConversations = (widgets) =>
 //
 // Deduped and reported per tag and attribute, because one mistake is on every instance.
 export function undeclaredAttrs(widgets) {
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
   // What a module may write without declaring: the platform's own vocabulary for
   // what a control is and how it behaves, and the data-* namespace the runtime and
   // the widgets both paint in. `class` and `style` are the same kind of fact — a
   // look, not a state a version could carry.
   const painted = /^(?:data-|aria-)/;
   const platform = new Set(["role", "class", "style", "hidden", "tabindex"]);
-  const all = roots(document);
+  const all = openRoots(document);
   const found = [];
   for (const [tag, entry] of Object.entries(widgets)) {
     if (!entry.properties) continue;
@@ -134,13 +129,7 @@ export function undeclaredAttrs(widgets) {
 // `Animation.finished` here would give page.evaluate a promise the driver cannot
 // interrupt if the compositor stops.
 export function retiredSlots(holders) {
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
-  const all = roots(document);
+  const all = openRoots(document);
   const find = (id) => {
     for (const r of all) {
       const el = r.getElementById(id);

skills/leaf/scripts/leaf/render-checks/words.js

@@ -1,4 +1,5 @@
 import { says } from "/runtime/widget-api.js";
+import { openRoots } from "./open-roots.js";
 
 export const shownVerbatim = ({ widgets, touched }) =>
   Object.entries(widgets)
@@ -106,14 +107,6 @@ export function paperWords() {
 // group that has been opened and closed, which is where the test pins it.
 export { coveredWords } from "./standalone.js";
 
-// Which trees are the page, for the two readings below that answer for what a widget
-// renders rather than for what it declares. Every open root, found by walking rather than
-// read off the registry's x-shadow list: a root a module attached without declaring one
-// still holds words and code the reader has to read, and a reading that asked the
-// registry would look away from exactly the tree nobody vouched for. Written once,
-// because it is one claim about the page and two copies of it are two things to keep
-// level.
-
 // Code that came out the colour of the code around it. Colouring takes two halves that
 // meet nowhere a static lint can reach: the runtime writes data-lf-syn in the browser,
 // and the theme answers it with a var() the browser resolves. Either half can stop
@@ -150,17 +143,11 @@ export { coveredWords } from "./standalone.js";
 // asked for colour-contrast alone on the example carrying the beige comment, it returned
 // 44 passing elements, no violation, and not one of the spans among them.
 //
-// Which shadow roots it crosses into is OPEN_ROOTS' answer (the section note above says
-// why it crosses at all), which is the choice everything else here makes — colour is
+// Which shadow roots it crosses into is OPEN_ROOTS' answer (that module says why it
+// crosses at all), which is the choice everything else here makes — colour is
 // asked of what the browser painted, so where it painted is too, and a root a widget
 // attached without declaring one still holds code the reader has to read.
 export function unreadSyntax() {
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
   const cx = document.createElement("canvas").getContext("2d");
   const paint = (...layers) => {
     cx.clearRect(0, 0, 1, 1);
@@ -185,7 +172,7 @@ export function unreadSyntax() {
   };
   const seen = new Set(),
     found = new Map();
-  for (const span of roots(document).flatMap((r) => [
+  for (const span of openRoots(document).flatMap((r) => [
     ...r.querySelectorAll("[data-lf-syn]"),
   ])) {
     const role = span.dataset.lfSyn;
@@ -254,14 +241,8 @@ export function unreadSyntax() {
 // `hidden` and `hidden="until-found"` are two of the ways an element stops rendering, and
 // asking whether it renders covers both and the panel besides.
 export function silentWords(widgets) {
-  const roots = (root) => [
-    root,
-    ...[...root.querySelectorAll("*")]
-      .filter((el) => el.shadowRoot)
-      .flatMap((el) => roots(el.shadowRoot)),
-  ];
   const found = [];
-  const all = roots(document);
+  const all = openRoots(document);
   const at = (el) => `<${el.localName}${el.id ? " id=" + el.id : ""}>`;
   const every = (tag) => all.flatMap((r) => [...r.querySelectorAll(tag)]);
   for (const [tag, entry] of Object.entries(widgets)) {