cursedbelt 5.85.1 → 5.87.0

package/src/testing/designAudit.ts

@@ -19,6 +19,7 @@
 /** Every rule this audit decides. The IDs are the design guide's, unchanged. */
 export const DESIGN_RULES = [
   'LAY-10',
+  'LAY-8',
   'FND-6',
   'CPY-1',
   'DAT-16',
@@ -46,6 +47,7 @@ export type DesignRuleId = (typeof DESIGN_RULES)[number];
 /** What each rule says, in one line — printed beside every finding so a red reads on its own. */
 export const DESIGN_RULE_TITLES: Record<DesignRuleId, string> = {
   'LAY-10': 'the page scrolls sideways',
+  'LAY-8': 'a ScrollArea taller than the screen that nothing scrolls — what is below the first screen is unreachable',
   'FND-6': 'visible text under 12px',
   'CPY-1': 'a run of text over 200 characters outside a prose/help surface',
   'DAT-16': 'a non-value (`[object Object]`, `undefined`, `NaN`, `null`, `Invalid Date`) on screen',
@@ -200,6 +202,35 @@ export function designProbe({ rules, allowProse, specimens }: ProbeArgs): Design
     push('LAY-10', null, `scrollWidth ${scroller.scrollWidth}px > viewport ${window.innerWidth}px`);
   }
 
+  // ── LAY-8 · a ScrollArea is bounded, or nothing below the first screen is reachable ──
+  // roms, 2026-10-21 (forge task 3493): `/stats` and `/settings` put their `Page` in a slot that was
+  // a plain block, not a flex column, so the Page grew to its content (2048px in a 900px window),
+  // its ScrollArea had nothing to scroll, and under the shell's `overflow: hidden` every pixel below
+  // the first screen was unreachable — in production, past every gate. A bounded area is never
+  // taller than the screen; one that is, whose bottom no scrolling ancestor and no document scroll
+  // can bring into view, is that bug.
+  if (on.has('LAY-8')) {
+    const scrollsY = (el: Element) => /auto|scroll/.test(getComputedStyle(el).overflowY);
+    const clipped = (el: Element) => /hidden|clip/.test(getComputedStyle(el).overflowY);
+    const documentScrolls =
+      scroller.scrollHeight > window.innerHeight + 1 && !clipped(document.documentElement) && !clipped(document.body);
+    for (const area of document.querySelectorAll('[data-cb-scrollarea]')) {
+      if (!shown(area) || !scrollsY(area)) continue;
+      if (area.clientHeight <= window.innerHeight + 1 || area.getBoundingClientRect().bottom <= window.innerHeight + 1) continue;
+      let reachable = documentScrolls;
+      for (let cur = area.parentElement; !reachable && cur && cur !== document.body; cur = cur.parentElement) {
+        reachable = scrollsY(cur) && cur.scrollHeight > cur.clientHeight + 1;
+      }
+      if (!reachable) {
+        push(
+          'LAY-8',
+          area,
+          `${area.clientHeight}px tall in a ${window.innerHeight}px window, and nothing scrolls it — its Page is not in a flex column (or a slot of definite height)`,
+        );
+      }
+    }
+  }
+
   // ── Text: FND-6 size floor · CPY-1 run length · DAT-16 non-values ───────────
   const fnd6 = new Set<Element>();
   const cpy1 = new Set<Element>();