@nodegx/mcp 0.2.0 → 0.2.2

package/dist/render-harness/measure-from-disk.js

@@ -492,6 +492,122 @@ var require_src = __commonJS({
   // viewport height with content laid out past it is clipped; a page that is
   // simply short has nothing past it. That difference is the whole of
   // \`clipped-page\`, and neither number alone can tell them apart.
+  // P112-OWN019-LAPTOPGAPS (R39) \u2014 where the INK is, not where the boxes are. Richard on RL1's laptop page: a
+  // feature number in a Columns "1 4" row had a fifth of the page to itself, ~215 px of nothing before its title;
+  // L1's pricing toggle and price sat ~260 px left of their centred heading. Every box there is well-formed \u2014 the
+  // number's column box abuts the title's \u2014 so the measure is each child's ink: the union of its shown text runs
+  // (a Range, so a full-width text block counts only as far as its words reach) and its painted boxes. Desktop only:
+  // that is where a row has room to open a hole. Raw numbers here; the judgement is summarise's.
+  const layout = { rowGaps: [], drifts: [] };
+  // (The API guard is for the fake DOMs the unit suites hand this expression; every browser has both.)
+  if (vw >= 1024 && typeof document.createRange === 'function' && typeof document.createTreeWalker === 'function') {
+    const shown = new Set(visible);
+    const textInk = [];
+    const range = document.createRange();
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      if (!n.textContent.trim() || !shown.has(n.parentElement)) continue;
+      range.selectNodeContents(n);
+      const r = range.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) textInk.push({ node: n, r });
+    }
+    const PAINTED_TAGS = ['IMG', 'SVG', 'CANVAS', 'VIDEO', 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'svg'];
+    const paintedInk = visible
+      .filter((el) => {
+        if (PAINTED_TAGS.includes(el.tagName)) return true;
+        const cs = styleOf(el);
+        const bg = cs.backgroundColor;
+        return (bg && bg !== 'transparent' && !/rgba\\([^)]*,\\s*0\\)$/.test(bg)) || cs.backgroundImage !== 'none' || parseFloat(cs.borderTopWidth) > 0;
+      })
+      .map((el) => ({ el, r: el.getBoundingClientRect() }))
+      .filter((p) => p.r.width > 0 && p.r.height > 0 && p.r.width < vw * 0.98);
+    const inkOf = (el) => {
+      let l = Infinity, t = Infinity, rr = -Infinity, b = -Infinity, text = '';
+      const take = (r) => { l = Math.min(l, r.left); t = Math.min(t, r.top); rr = Math.max(rr, r.right); b = Math.max(b, r.bottom); };
+      for (const x of textInk) if (el.contains(x.node)) { take(x.r); if (!text) text = x.node.textContent.trim().slice(0, 50); }
+      for (const p of paintedInk) if (el === p.el || el.contains(p.el)) take(p.r);
+      return l === Infinity ? null : { left: l, top: t, right: rr, bottom: b, width: rr - l, height: b - t, text };
+    };
+    const ROW_GAP_MIN_PX = 160;
+    for (const parent of visible) {
+      const kids = [...parent.children].filter((k) => shown.has(k));
+      if (kids.length < 2) continue;
+      const pr = parent.getBoundingClientRect();
+      if (pr.width < 600) continue;
+      const inks = kids.map(inkOf).filter(Boolean);
+      if (inks.length < 2) continue;
+      // Side by side: consecutive by left edge, overlapping vertically, the second starting after the first ends.
+      const byLeft = [...inks].sort((a, b) => a.left - b.left);
+      for (let i = 1; i < byLeft.length; i++) {
+        const a = byLeft[i - 1], b = byLeft[i];
+        const overlap = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+        const gap = b.left - a.right;
+        if (overlap <= 0 || gap < ROW_GAP_MIN_PX) continue;
+        layout.rowGaps.push({ cls: cls(parent), gap: round(gap), rowWidth: round(pr.width), tallest: round(Math.max(a.height, b.height)), left: a.text, right: b.text });
+      }
+      // Stacked, each starting below the one before, and the parts of ONE section: every part under 240 px tall (a
+      // page whose children are whole sections compared section against section \u2014 measured on L1 and GL1, s5). The
+      // section's axis is set by a centred part among its first two (its heading, usually); L1's pricing is just
+      // two parts, a centred heading block and a toggle-and-price group ~260 px left of it.
+      const byTop = [...inks].sort((a, b) => a.top - b.top);
+      if (!byTop.every((k, i) => i === 0 || k.top >= byTop[i - 1].bottom - 2)) continue;
+      // Two or more tall parts, not one: RL1's waitlist is eyebrow, heading, line and a 290 px form card in ONE group,
+      // and "any part > 240" skipped it \u2014 Richard saw the eyebrow off the centred heading (s6). A page of sections
+      // has many tall children; a section with one card has one.
+      if (byTop.filter((k) => k.height > 240).length > 1) continue;
+      const centre = pr.left + pr.width / 2;
+      const offOf = (k) => k.left + k.width / 2 - centre;
+      const centred = byTop.filter((k) => Math.abs(offOf(k)) <= 12 && k.width < pr.width * 0.9);
+      if (!centred.some((k) => byTop.indexOf(k) < 2)) continue;
+      for (const k of byTop) {
+        if (Math.abs(offOf(k)) > 40 && k.width < pr.width * 0.8) {
+          layout.drifts.push({ cls: cls(parent), offBy: round(offOf(k)), sectionWidth: round(pr.width), text: k.text, centredText: centred[0].text });
+        }
+      }
+    }
+  }
+
+  // P112-OWN019-LETTEREDGE \u2014 words hard against the edge of the box that frames them. Richard on TL2's hero: seven
+  // outlined day chips, each letter pressed to its chip's left edge. The chip Group centred its child the way CSS
+  // would, but a Text stretches to its Group's width and sets its letters left, so the centring moved nothing. The
+  // frame is the nearest of the text's first four ancestors with a border or a fill (a page-wide band is not a frame,
+  // nor an inline highlight); the reading is the gap between the words' own ink (a Range) and the frame's inner left
+  // and right edges. Every width: a chip is a chip on a phone too. Raw numbers here; the judgement is summarise's.
+  layout.edgeTexts = [];
+  const EDGE_TEXT_MAX_GAP = 3;
+  if (typeof document.createRange === 'function' && typeof document.createTreeWalker === 'function') {
+    const shown = new Set(visible);
+    const range = document.createRange();
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const framed = (el) => {
+      const cs = styleOf(el);
+      if (cs.display === 'inline') return false;
+      const bg = cs.backgroundColor;
+      return (bg && bg !== 'transparent' && !/rgba\\([^)]*,\\s*0\\)$/.test(bg)) || cs.backgroundImage !== 'none' ||
+        parseFloat(cs.borderLeftWidth) > 0 || parseFloat(cs.borderRightWidth) > 0;
+    };
+    const frames = new Set();
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const text = n.textContent.trim();
+      if (!text || !shown.has(n.parentElement)) continue;
+      let frame = null;
+      for (let e = n.parentElement, i = 0; e && e !== document.body && i < 4; e = e.parentElement, i++) {
+        if (framed(e)) { frame = e; break; }
+      }
+      if (!frame || frames.has(frame)) continue;
+      const fr = frame.getBoundingClientRect();
+      if (fr.width < 16 || fr.width >= vw * 0.98) continue;
+      range.selectNodeContents(n);
+      const r = range.getBoundingClientRect();
+      if (!(r.width > 0 && r.height > 0)) continue;
+      const fcs = styleOf(frame);
+      const left = r.left - (fr.left + (parseFloat(fcs.borderLeftWidth) || 0));
+      const right = fr.right - (parseFloat(fcs.borderRightWidth) || 0) - r.right;
+      frames.add(frame);
+      if (Math.min(left, right) < EDGE_TEXT_MAX_GAP) layout.edgeTexts.push({ cls: cls(frame), text: text.slice(0, 50), left: round(left), right: round(right), frameWidth: round(fr.width), frameHeight: round(fr.height) });
+    }
+  }
+
   const contentBottom = visible.reduce((lowest, el) => {
     const r = el.getBoundingClientRect();
     return r.width > 0 && r.height > 0 && r.bottom > lowest ? r.bottom : lowest;
@@ -499,6 +615,7 @@ var require_src = __commonJS({
 
   return {
     lists,
+    layout,
     // FLD-012 AC3 \u2014 the SIZE of the population every rule below is computed over, and the number of
     // elements the visibility correction took out of it. Reported directly because a rule's finding
     // count can move for several reasons at once, and 'the fix changed what is measured' is a
@@ -637,9 +754,24 @@ var require_src = __commonJS({
        */
       SingleGround: "single-ground",
       NoImagery: "no-imagery",
-      NoDisplayType: "no-display-type"
+      NoDisplayType: "no-display-type",
+      /**
+       * P112-OWN019-LAPTOPGAPS (R39, Richard 2026-10-14). On a laptop, two things side by side in one row with a hole
+       * between their ink — RL1's feature number given a fifth of the page by a Columns "1 4" row, L1's text and card
+       * pushed to the row's two edges. A warning: a hole can be meant, and the screenshots are the arbiter.
+       */
+      RowGap: "row-gap",
+      /** P112-OWN019-LAPTOPGAPS — a section that centres its heading and leaves another part off that centre (L1's price). */
+      AlignmentDrift: "alignment-drift",
+      /**
+       * P112-OWN019-LETTEREDGE (Richard 2026-10-15, TL2's hero). Words within 3 px of the inner left or right edge of the
+       * box that frames them (a border or a fill) — a letter in an outlined chip set left because its Text stretched.
+       */
+      TextAgainstEdge: "text-against-edge"
     };
     var SEVERITY_ORDER = { error: 0, warning: 1, info: 2 };
+    var ROW_GAP_MIN_TALLEST = 48;
+    var ROW_GAP_MIN_SHARE = 0.12;
     var POVERTY_FINDINGS = [RenderFinding.SingleGround, RenderFinding.NoImagery, RenderFinding.NoDisplayType];
     function isPovertyFinding(finding) {
       return Boolean(finding) && POVERTY_FINDINGS.indexOf(finding.code) !== -1;
@@ -855,6 +987,43 @@ var require_src = __commonJS({
             evidence: v.grounds.values
           });
         }
+        if (isDesktop && v.layout) {
+          const gaps = (v.layout.rowGaps || []).filter((g) => (g.left || g.right) && g.tallest >= ROW_GAP_MIN_TALLEST && g.gap >= g.rowWidth * ROW_GAP_MIN_SHARE);
+          const seen2 = /* @__PURE__ */ new Set();
+          for (const g of gaps) {
+            const key = `${g.left}|${g.right}`;
+            if (seen2.has(key) || seen2.size >= 3) continue;
+            seen2.add(key);
+            add({
+              code: RenderFinding.RowGap,
+              severity: "warning",
+              viewport: name,
+              message: `"${g.left}" and "${g.right}" sit side by side with ${g.gap}px of empty space between them (${Math.round(g.gap / g.rowWidth * 100)}% of the ${g.rowWidth}px row). A label or number beside text reads as one thing at its own width with a small gap \u2014 a row Group, the label at its natural width and the text growing \u2014 not a column given a share of the page (Columns widths are proportions); two parts pushed to a wide row's edges leave the same hole: give the row a max width and a gap. Look at this width's screenshot.`,
+              evidence: g
+            });
+          }
+          const drifts = (v.layout.drifts || []).slice(0, 3);
+          for (const d of drifts) {
+            add({
+              code: RenderFinding.AlignmentDrift,
+              severity: "warning",
+              viewport: name,
+              message: `This section centres "${d.centredText}", but "${d.text}" sits ${Math.abs(d.offBy)}px ${d.offBy < 0 ? "left" : "right"} of that centre. One section, one alignment: centre the rest too, or align everything to the same left edge. Look at this width's screenshot.`,
+              evidence: d
+            });
+          }
+        }
+        const edges = v.layout && v.layout.edgeTexts || [];
+        if (edges.length) {
+          const named = edges.slice(0, 3).map((e) => `"${e.text}" ${Math.max(0, Math.min(e.left, e.right))}px from the ${e.left <= e.right ? "left" : "right"} edge of its ${e.frameWidth}\xD7${e.frameHeight}px box`);
+          add({
+            code: RenderFinding.TextAgainstEdge,
+            severity: "warning",
+            viewport: name,
+            message: `${plural(edges.length, "text sits", "texts sit")} hard against the edge of the outlined or filled box that frames ${edges.length === 1 ? "it" : "them"}: ${named.join("; ")}. Centring a Group does not centre a Text's letters \u2014 the Text stretches to the Group's width and sets them left \u2014 so give the Text textAlignX: center, or give the box padding. Look at this width's screenshot.`,
+            evidence: edges.slice(0, 6)
+          });
+        }
         if (v.consoleErrors && v.consoleErrors.length) {
           add({
             code: RenderFinding.ConsoleError,
@@ -964,6 +1133,7 @@ var require_render_report = __commonJS({
     var WS_MODULE = HARNESS_PATHS.WS_MODULE.path;
     var {
       DEFAULT_VIEWPORTS,
+      NAMED_VIEWPORTS,
       DESKTOP_WIDTH,
       RenderFinding,
       SEVERITY_ORDER,
@@ -1499,7 +1669,7 @@ var require_render_report = __commonJS({
     }
     function parseViewports2(spec) {
       if (!spec) return DEFAULT_VIEWPORTS;
-      const known = new Map(DEFAULT_VIEWPORTS.map((v) => [v.name, v]));
+      const known = new Map(NAMED_VIEWPORTS.map((v) => [v.name, v]));
       return spec.split(",").map((token) => {
         const trimmed = token.trim();
         if (known.has(trimmed)) return known.get(trimmed);