@fasl-work/caos-app-shell 0.7.2 → 0.8.1

package/gate/inpage.mjs

@@ -17,6 +17,11 @@ export function installLib() {
       });
   }
 
+  /** The ancestors of an element up to (not including) `stop`. */
+  function* ancestorsUntil(el, stop) {
+    for (let a = el.parentElement; a && a !== stop && a !== document.body; a = a.parentElement) yield a;
+  }
+
   const visible = (el) => {
     if (!el || el.nodeType !== 1) return false;
     const r = el.getBoundingClientRect();
@@ -154,10 +159,10 @@ export function installLib() {
       if (s.textOverflow !== 'ellipsis' || el.scrollWidth <= el.clientWidth + 1 || !visible(el)) continue;
       // The full text must be readable somewhere: a title (or accessible name) on the element or its two nearest
       // ancestors that CONTAINS it. Any label nearby is not enough: the rail's own aria-label would excuse everything.
-      const full = (el.textContent || '').trim().replace(/s+/g, ' ');
+      const full = (el.textContent || '').trim().replace(/\s+/g, ' ');
       let named = false;
       for (let i = 0, t = el; i < 3 && t; i += 1, t = t.parentElement) {
-        const label = `${t.getAttribute('title') || ''} ${t.getAttribute('aria-label') || ''}`.replace(/s+/g, ' ');
+        const label = `${t.getAttribute('title') || ''} ${t.getAttribute('aria-label') || ''}`.replace(/\s+/g, ' ');
         if (full && label.includes(full)) {
           named = true;
           break;
@@ -233,7 +238,9 @@ export function installLib() {
           y,
           w: x2 - x,
           h: y2 - y,
-          right: r.right,
+          // a table or drawing inside a box that SCROLLS sideways (a wide table on a phone, ADR-0071 rule 3) ends where
+          // its box ends: a reader scrolls it; one cut by a box that hides its overflow still extends past the page
+          right: Math.min(r.right, ...[...ancestorsUntil(el, inst)].filter((a) => ['auto', 'scroll'].includes(getComputedStyle(a).overflowX)).map((a) => a.getBoundingClientRect().right)),
           stageKey: path(stageEl),
           stage: clipRect(stageEl.getBoundingClientRect()),
           viewKey: path(viewEl),
@@ -323,19 +330,24 @@ export function installLib() {
       const ar = a.getBoundingClientRect();
       let r = el.getBoundingClientRect();
       // An element larger than the container is aligned by its start: aligning its end pushed its start out of
-      // view, and the probe then landed on whatever covers the container (known shell defect 18).
+      // view, and the probe then landed on whatever covers the container (known shell defect 18). An element that
+      // fits is scrolled until its end shows with a margin, never past its start: with less slack than the margin,
+      // the margin pushed its start out and the probe reported the element it had moved (known shell defect 25).
       if ((s.overflowX === 'auto' || s.overflowX === 'scroll') && a.scrollWidth > a.clientWidth) {
         if (r.left < ar.left || r.width > ar.width) setScroll(a, a.scrollLeft - (ar.left - r.left), a.scrollTop);
-        else if (r.right > ar.right) setScroll(a, a.scrollLeft + (r.right - ar.right + 8), a.scrollTop);
+        else if (r.right > ar.right) setScroll(a, a.scrollLeft + Math.min(r.right - ar.right + 8, r.left - ar.left), a.scrollTop);
       }
       r = el.getBoundingClientRect();
       if ((s.overflowY === 'auto' || s.overflowY === 'scroll') && a.scrollHeight > a.clientHeight) {
         if (r.top < ar.top || r.height > ar.height) setScroll(a, a.scrollLeft, a.scrollTop - (ar.top - r.top));
-        else if (r.bottom > ar.bottom) setScroll(a, a.scrollLeft, a.scrollTop + (r.bottom - ar.bottom + 8));
+        else if (r.bottom > ar.bottom) setScroll(a, a.scrollLeft, a.scrollTop + Math.min(r.bottom - ar.bottom + 8, r.top - ar.top));
       }
     }
+    // the document is scrolled so the element shows below a header stuck at the top of the viewport (0.8.0: the
+    // sticky header sticks in a scrolling document since known shell defect 26 was fixed)
+    const cover = el.closest('header, [role="banner"]') ? 0 : stuckTop();
     const r = el.getBoundingClientRect();
-    if (r.top < 0 || r.bottom > window.innerHeight) winScroll(window.scrollX, window.scrollY + r.top + r.height / 2 - window.innerHeight / 2);
+    if (r.top < cover || r.bottom > window.innerHeight) winScroll(window.scrollX, window.scrollY + r.top + r.height / 2 - (cover + (window.innerHeight - cover) / 2));
     const r2 = el.getBoundingClientRect();
     if (r2.left < 0 || r2.right > window.innerWidth) winScroll(window.scrollX + r2.left + r2.width / 2 - window.innerWidth / 2, window.scrollY);
   };
@@ -347,8 +359,22 @@ export function installLib() {
   };
 
   /** The viewport cut by every ancestor that clips its content (overflow other than visible). */
+  /** The bottom of a page header stuck to the top of the viewport (sticky or fixed), or 0: what it covers is not in
+   * view for a reader. */
+  function stuckTop() {
+    let bottom = 0;
+    for (const h of document.querySelectorAll('header, [role="banner"]')) {
+      if (h.parentElement && h.parentElement.closest('header, [role="banner"], [role="dialog"]')) continue;
+      const s = getComputedStyle(h);
+      if (s.position !== 'sticky' && s.position !== 'fixed') continue;
+      const r = h.getBoundingClientRect();
+      if (r.top <= 1 && r.bottom > 0 && r.width >= window.innerWidth * 0.5) bottom = Math.max(bottom, r.bottom);
+    }
+    return bottom;
+  }
+
   const visibleArea = (el) => {
-    const area = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    const area = { left: 0, top: el.closest('header, [role="banner"]') ? 0 : stuckTop(), right: window.innerWidth, bottom: window.innerHeight };
     for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
       const s = getComputedStyle(a);
       if (s.overflowX === 'visible' && s.overflowY === 'visible') continue;
@@ -382,7 +408,8 @@ export function installLib() {
       // pointer lands on a fragment, so the largest one is tested.
       const frags = [...el.getClientRects()].filter((q) => q.width >= 1 && q.height >= 1);
       const r = frags.length ? frags.reduce((a, b) => (b.width * b.height > a.width * a.height ? b : a)) : el.getBoundingClientRect();
-      if (r.width < 1 || r.height < 1) continue;
+      // a 1x1 box is the visually hidden pattern (the skip link, screen-reader text): not a pointer target
+      if (r.width <= 1 || r.height <= 1) continue;
       checked += 1;
       // The area the element can show in: the viewport cut by every ancestor that clips (known shell defect 18; an
       // element that fits the window but not its scroll container was reported as never brought into view).
@@ -480,6 +507,11 @@ export function installLib() {
   G.controls = () =>
     [...document.querySelectorAll('[data-control]')]
       .filter((c) => visible(c) && c.getAttribute('data-control') !== 'case')
+      // a control that cannot act in this selection is not moved (known shell defect 20): every input in it disabled
+      .filter((c) => {
+        const inputs = c.matches('input, select, button, textarea') ? [c] : [...c.querySelectorAll('input, select, button, textarea')];
+        return inputs.length === 0 || inputs.some((e) => !e.disabled);
+      })
       .map((c) => {
         let kind = 'unknown';
         if (c.tagName === 'SELECT' || c.querySelector('select')) kind = 'select';
@@ -495,4 +527,243 @@ export function installLib() {
     [...document.querySelectorAll('[data-plot], [data-readout]')]
       .filter(visible)
       .map((v) => ({ label: describe(v), key: v.getAttribute('data-state-key') || '', stale: v.getAttribute('data-stale') === '1' }));
+
+  // ---- 0.8.0 measures ----------------------------------------------------------------------------------------
+
+  /** The part of the page the ancestors of an element let it show when they CUT their content (overflow hidden or
+   * clip). A scroll container does not cut (a reader scrolls it), and neither does the viewport. */
+  const cutArea = (el) => {
+    const area = { left: -Infinity, top: -Infinity, right: Infinity, bottom: Infinity };
+    for (let a = el.parentElement; a && a !== document.body && a !== document.documentElement; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      const ar = a.getBoundingClientRect();
+      if (s.overflowX === 'hidden' || s.overflowX === 'clip') {
+        area.left = Math.max(area.left, ar.left);
+        area.right = Math.min(area.right, ar.right);
+      }
+      if (s.overflowY === 'hidden' || s.overflowY === 'clip') {
+        area.top = Math.max(area.top, ar.top);
+        area.bottom = Math.min(area.bottom, ar.bottom);
+      }
+    }
+    return area;
+  };
+
+  /** The boxes a text element occupies on screen: one per line (tspan) when it has several. */
+  const textBoxes = (t) => {
+    const spans = [...t.querySelectorAll('tspan')].filter((s) => (s.textContent || '').trim());
+    const parts = spans.length ? spans : [t];
+    return parts
+      .map((p) => p.getBoundingClientRect())
+      .filter((r) => r.width > 0.5 && r.height > 0.5)
+      .map((r) => ({ left: r.left, top: r.top, right: r.right, bottom: r.bottom }));
+  };
+
+  /**
+   * G10, text in drawings: in every drawing a reader looks at (a declared chart, any SVG in the instrument, any figure
+   * in a document) each label lies inside the drawing and inside the part of it its containers show, and no two
+   * labels overlap. Measured on the rendered glyph boxes, so a label sized for one font and drawn in a wider one fails
+   * (the wide-font pass renders every page in a wider fallback font). A halo drawn as a second identical label at the
+   * same place is not an overlap. A drawing that crosses labels on purpose declares `data-text-overlap="allowed"`.
+   */
+  G.drawingText = () => {
+    const out = [];
+    const svgs = new Set([
+      ...document.querySelectorAll('svg[data-chart], [data-instrument] svg, .prose svg, figure svg'),
+    ]);
+    for (const svg of svgs) {
+      if (svg.parentElement && svg.parentElement.closest('svg')) continue;
+      if (svg.classList.contains('lucide') || !visible(svg)) continue;
+      const sr = svg.getBoundingClientRect();
+      if (sr.width < 48 || sr.height < 24) continue;
+      const area = cutArea(svg);
+      const box = { left: Math.max(sr.left, area.left), top: Math.max(sr.top, area.top), right: Math.min(sr.right, area.right), bottom: Math.min(sr.bottom, area.bottom) };
+      const name = describe(svg.closest('[data-plot]') || svg);
+      const texts = [...svg.querySelectorAll('text')].filter((t) => (t.textContent || '').trim() && visible(t));
+      const items = [];
+      for (const t of texts) {
+        for (const b of textBoxes(t)) {
+          // a label outside the visible part of the drawing: cut, or drawn where no one sees it
+          if (b.top >= box.bottom || b.bottom <= box.top) {
+            out.push(`${name}: the label "${(t.textContent || '').trim().slice(0, 40)}" lies outside the drawing`);
+            continue;
+          }
+          const cutX = Math.max(0, box.left - b.left) + Math.max(0, b.right - box.right);
+          const cutY = Math.max(0, box.top - b.top) + Math.max(0, b.bottom - box.bottom);
+          if (cutX > 1.5 || cutY > 2.5) out.push(`${name}: the label "${(t.textContent || '').trim().slice(0, 40)}" is cut by ${Math.round(Math.max(cutX, cutY))}px at the drawing's edge`);
+          items.push({ t, b, text: (t.textContent || '').trim() });
+        }
+      }
+      if (svg.closest('[data-text-overlap="allowed"]') || items.length > 600) continue;
+      for (let i = 0; i < items.length; i += 1) {
+        for (let j = i + 1; j < items.length; j += 1) {
+          const a = items[i];
+          const c = items[j];
+          if (a.t === c.t || a.t.contains(c.t) || c.t.contains(a.t)) continue;
+          const w = Math.min(a.b.right, c.b.right) - Math.max(a.b.left, c.b.left);
+          const h = Math.min(a.b.bottom, c.b.bottom) - Math.max(a.b.top, c.b.top);
+          if (w <= 1.5 || h <= 2.5) continue;
+          // a halo: the same label drawn twice at the same place
+          if (a.text === c.text && Math.abs(a.b.left - c.b.left) < 1.5 && Math.abs(a.b.top - c.b.top) < 1.5) continue;
+          out.push(`${name}: the labels "${a.text.slice(0, 30)}" and "${c.text.slice(0, 30)}" overlap by ${Math.round(w)}x${Math.round(h)}px`);
+        }
+      }
+    }
+    return [...new Set(out)];
+  };
+
+  /**
+   * G11, numbers in Spanish: a page in Spanish writes decimals with a comma (conventions/languages.md). Reads every
+   * visible text, SVG labels included, outside code, formulas, versions and anything marked translate="no"; a number
+   * with a decimal point fails, a Spanish thousands group (27.345) passes. A canvas is not read.
+   */
+  G.decimals = () => {
+    const out = [];
+    const skip = 'code, pre, kbd, samp, .katex, [data-version], [data-build], [translate="no"], script, style, [aria-hidden="true"]';
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const re = /(?<![\w.,/:@#])(\d+)\.(\d+)(?![\w/@]|\.\d)/g;
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const text = n.nodeValue || '';
+      if (!/\d\.\d/.test(text)) continue;
+      const el = n.parentElement;
+      if (!el || el.closest(skip) || !shown(el)) continue;
+      for (const m of text.matchAll(re)) {
+        // a thousands group of the Spanish locale: 1 to 3 digits, not starting with 0, then groups of exactly 3
+        const token = text.slice(m.index).match(/^\d+(?:\.\d+)+/)?.[0] ?? m[0];
+        if (/^[1-9]\d{0,2}(\.\d{3})+$/.test(token)) continue;
+        out.push(`"${text.trim().slice(0, 60)}" writes ${m[0]} with a decimal point (${describe(el)})`);
+      }
+    }
+    return [...new Set(out)].slice(0, 12);
+  };
+
+  /** The scroll container of an element: the nearest ancestor that scrolls vertically, or the document. */
+  const scroller = (el) => {
+    for (let a = el.parentElement; a && a !== document.body; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      if ((s.overflowY === 'auto' || s.overflowY === 'scroll') && a.scrollHeight > a.clientHeight + 1) return a;
+    }
+    return null;
+  };
+
+  /**
+   * G12, the vertical sub-tab list stays in view: on a vertical SubTabs whose panel is taller than its scroll box,
+   * scroll to the end of the panel and require the active sub-tab to be visible (known shell defect 24). Restores the
+   * position it changed.
+   */
+  G.sticky = () => {
+    const out = [];
+    for (const st of document.querySelectorAll('.subtabs-vertical')) {
+      if (!visible(st)) continue;
+      const list = st.querySelector(':scope > .subtablist');
+      const active = list && list.querySelector('.subtab.active');
+      if (!list || !active || getComputedStyle(list).flexDirection !== 'column') continue;
+      const sc = scroller(st);
+      const viewH = sc ? sc.clientHeight : window.innerHeight;
+      const rect = st.getBoundingClientRect();
+      if (rect.height <= viewH + 4) continue;
+      const before = sc ? sc.scrollTop : window.scrollY;
+      // scroll so the end of the sub-tab block is at the bottom of the scroll box
+      const delta = rect.bottom - (sc ? sc.getBoundingClientRect().bottom : window.innerHeight);
+      if (sc) setScroll(sc, sc.scrollLeft, sc.scrollTop + delta);
+      else winScroll(window.scrollX, window.scrollY + delta);
+      const a = active.getBoundingClientRect();
+      const area = visibleArea(active);
+      const headerBottom = (() => {
+        const h = document.querySelector('.site-header');
+        if (!h || sc) return 0;
+        const hs = getComputedStyle(h);
+        return hs.position === 'sticky' || hs.position === 'fixed' ? h.getBoundingClientRect().bottom : 0;
+      })();
+      const top = Math.max(area.top, headerBottom);
+      if (a.bottom <= top + 2 || a.top >= area.bottom - 2) out.push(`${describe(list)}: at the end of a ${Math.round(rect.height)}px section the active sub-tab "${(active.textContent || '').trim().slice(0, 30)}" is out of view (the list scrolled away)`);
+      if (sc) setScroll(sc, sc.scrollLeft, before);
+      else winScroll(window.scrollX, before);
+    }
+    return out;
+  };
+
+  const parseColor = (c) => {
+    const m = /rgba?\(([^)]+)\)/.exec(c || '');
+    if (!m) return null;
+    const p = m[1].split(/[\s,/]+/).filter(Boolean).map(Number);
+    return { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 };
+  };
+  const over = (top, bottom) => ({
+    r: top.r * top.a + bottom.r * (1 - top.a),
+    g: top.g * top.a + bottom.g * (1 - top.a),
+    b: top.b * top.a + bottom.b * (1 - top.a),
+    a: 1,
+  });
+  const lum = (c) => {
+    const ch = (v) => {
+      const x = v / 255;
+      return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * ch(c.r) + 0.7152 * ch(c.g) + 0.0722 * ch(c.b);
+  };
+  /** The colour behind an element: its ancestors' backgrounds composited, or null when an image or gradient is there. */
+  const backdrop = (el) => {
+    const layers = [];
+    for (let a = el; a; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      if (s.backgroundImage && s.backgroundImage !== 'none') return null;
+      const c = parseColor(s.backgroundColor);
+      if (c && c.a > 0) {
+        layers.push(c);
+        if (c.a >= 1) break;
+      }
+    }
+    let base = { r: 255, g: 255, b: 255, a: 1 };
+    for (let i = layers.length - 1; i >= 0; i -= 1) base = over(layers[i], base);
+    return base;
+  };
+  const opacityOf = (el) => {
+    let o = 1;
+    for (let a = el; a; a = a.parentElement) o *= Number(getComputedStyle(a).opacity || 1);
+    return o;
+  };
+
+  /**
+   * G13, text contrast (WCAG 2.2 AA, 1.4.3): every visible text a reader can read, SVG labels included, against the
+   * colour behind it: 4.5:1, or 3:1 for large text (24px, or 18.66px bold). Disabled controls are exempt, as WCAG
+   * exempts inactive components; text over an image or a gradient is not judged.
+   */
+  G.contrast = () => {
+    const out = [];
+    const seen = new Set();
+    // a colour transition still running reads as a colour between two states (a chip just selected read 3.89:1 at
+    // 87% of its way to white): finish every finite transition first; looping animations are left alone
+    if (document.getAnimations) {
+      for (const a of document.getAnimations()) {
+        const end = a.effect && a.effect.getComputedTiming ? a.effect.getComputedTiming().endTime : Infinity;
+        if (typeof CSSTransition !== 'undefined' && a instanceof CSSTransition && Number.isFinite(Number(end))) a.finish();
+      }
+    }
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      if (!(n.nodeValue || '').trim()) continue;
+      const el = n.parentElement;
+      if (!el || seen.has(el)) continue;
+      seen.add(el);
+      if (el.closest('script, style, [aria-hidden="true"], .sr-only, .skip-link, :disabled, [aria-disabled="true"], .katex-mathml') || !visible(el)) continue;
+      const s = getComputedStyle(el);
+      const isSvg = el.namespaceURI === 'http://www.w3.org/2000/svg';
+      const fg = parseColor(isSvg ? s.fill : s.color);
+      if (!fg) continue;
+      const host = isSvg ? el.closest('svg')?.parentElement ?? el : el;
+      const bg = backdrop(host);
+      if (!bg) continue;
+      const alpha = fg.a * opacityOf(el);
+      const shownColor = over({ ...fg, a: alpha }, bg);
+      const l1 = lum(shownColor);
+      const l2 = lum(bg);
+      const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+      const px = parseFloat(s.fontSize) || 16;
+      const bold = Number(s.fontWeight) >= 700;
+      const need = px >= 24 || (bold && px >= 18.66) ? 3 : 4.5;
+      if (ratio + 1e-6 < need) out.push(`${describe(el)}: contrast ${ratio.toFixed(2)}:1, below ${need}:1 (${s.color || s.fill} on rgb(${Math.round(bg.r)}, ${Math.round(bg.g)}, ${Math.round(bg.b)}))`);
+    }
+    return out.slice(0, 10);
+  };
 }

package/gate/run.mjs

@@ -15,11 +15,18 @@
 //                            waiting for declared state (data-state, data-stale, data-drawn), never networkidle
 //   G8 idle at rest          no sustained animation frames or DOM mutations after load and after a tab switch
 //   G9 reactivity            each registered control changes the selection key and no view keeps an old one; the
-//                            rendered case is the case asked for
+//                            rendered case is the case asked for; a disabled control is not moved
+//   G10 text in drawings     every label of a chart, an instrument SVG or a document figure inside the drawing and
+//                            clear of the others, also when every page is rendered in a wider fallback font (the
+//                            wide-font pass: Verdana, else DejaVu Sans, the Linux runner's font)
+//   G11 Spanish numbers      a page in Spanish writes no decimal point (canvas text excepted)
+//   G12 sticky lists         a vertical sub-tab list is still in view at the end of a long section
+//   G13 contrast             every visible text at WCAG AA against the colour behind it (primary size, both themes)
+//   G14 captures index       gate-output/index.html shows every capture by route and mode, the failures first
 // plus the ADR-0071 and ADR-0017 measures (viewport, one-row tabs, rail without scroll, centred prose, captions,
 // references).
 
-import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { decodePng, paintedBox, unionArea } from './png.mjs';
 import { servePages } from './serve.mjs';
@@ -38,8 +45,14 @@ export const DEFAULTS = {
   viewportMinWidth: 1280,
   out: 'gate-output',
   maxShots: 40,
+  wideFont: true,
+  wideFontSizes: '390x844,1280x800',
 };
 
+/** The wide fallback font of the G10 pass: wider than the Windows and macOS sans fonts; DejaVu Sans is what a Linux
+ * reader (and the CI runner) gets. Applied before the first frame, so a drawing that measures its text measures it. */
+const WIDE_FONT = ':root, :root[data-theme] { --font-sans: Verdana, "DejaVu Sans", sans-serif !important; }';
+
 const RATE_LIMIT = 5; // frames or mutations per second at rest above which a loop is reported (G8)
 
 async function loadKeys() {
@@ -103,8 +116,26 @@ export async function runGate(o) {
   const artifacts = new Map();
 
   const browser = await chromium.launch();
-  const openContext = async ([w, h], theme, lang) => {
+  const openContext = async ([w, h], theme, lang, wide = false) => {
     const ctx = await browser.newContext({ viewport: { width: w, height: h }, deviceScaleFactor: 1 });
+    if (wide) {
+      await ctx.addInitScript((css) => {
+        const add = () => {
+          const st = document.createElement('style');
+          st.setAttribute('data-caos-gate-font', '');
+          st.textContent = css;
+          document.documentElement.appendChild(st);
+        };
+        if (document.documentElement) add();
+        else
+          new MutationObserver((_, o) => {
+            if (document.documentElement) {
+              o.disconnect();
+              add();
+            }
+          }).observe(document, { childList: true });
+      }, WIDE_FONT);
+    }
     await ctx.addInitScript(
       ([tk, lk, t, l]) => {
         try {
@@ -223,6 +254,7 @@ export async function runGate(o) {
           const mode = `${w}x${h} ${theme} ${lang}`;
           const primary = size === primarySize && theme === themes[0] && lang === langs[0];
           const idleHere = theme === themes[0] && lang === langs[0];
+          const contrast = size === primarySize && lang === langs[0];
           const ctx = await openContext(size, theme, lang);
           const { page, sink } = await newPage(ctx);
           for (const route of routes) {
@@ -248,7 +280,7 @@ export async function runGate(o) {
             if (route !== '/' && id.activeHref && routeOf(id.activeHref) !== route) fail('G4', at, `loaded directly, the page shows route ${routeOf(id.activeHref)}`);
 
             const walkState = { tested: new Set(), keyedViews: 0, controls: 0, tablists: 0 };
-            await processState(page, sink, { ...at, trail: '' }, { route, isWorkbench, primary, idle: idleHere, first: true, size, w, h, theme, lang, walkState });
+            await processState(page, sink, { ...at, trail: '' }, { route, isWorkbench, primary, idle: idleHere, first: true, size, w, h, theme, lang, walkState, contrast });
 
             if (primary && route !== '/') {
               // G4: the trailing-slash form a static host serves for a materialised route.
@@ -268,9 +300,9 @@ export async function runGate(o) {
               sink.splice(0);
             }
 
-            await walkTabs(page, sink, { ...at }, [], new Set(), { route, isWorkbench, primary, idle: primary, size, w, h, theme, lang, walkState });
+            await walkTabs(page, sink, { ...at }, [], new Set(), { route, isWorkbench, primary, idle: primary, size, w, h, theme, lang, walkState, contrast });
 
-            if (isWorkbench) await walkCases(page, sink, at, { route, isWorkbench, primary, size, w, h, theme, lang, walkState });
+            if (isWorkbench) await walkCases(page, sink, at, { route, isWorkbench, primary, size, w, h, theme, lang, walkState, contrast });
 
             if (primary && isWorkbench) {
               const f = await page.evaluate(() => window.__caosGate.facts());
@@ -311,6 +343,39 @@ export async function runGate(o) {
       }
     }
 
+    // ---- G10: the wide-font pass. Every route, tab and sampled case again, in Spanish (the longer labels) when it is
+    // measured, rendered in the wide fallback font from the first frame: what a reader with wider fonts sees.
+    if (opt.wideFont !== false && opt.wideFontSizes) {
+      const wideSizes = String(opt.wideFontSizes).split(',').map((x) => x.trim()).filter(Boolean).map((x) => x.split('x').map(Number));
+      const wlang = langs.includes('es') ? 'es' : langs[0];
+      const theme = themes[0];
+      for (const size of wideSizes) {
+        const [w, h] = size;
+        const mode = `${w}x${h} ${theme} ${wlang} wide-font`;
+        const ctx = await openContext(size, theme, wlang, true);
+        const { page, sink } = await newPage(ctx);
+        for (const route of routes) {
+          const isWorkbench = workbenchRoutes.has(route);
+          const at = { route, mode };
+          const res = await page.goto(urlFor(route), { waitUntil: 'load', timeout: 30000 }).catch((e) => e);
+          const status = res && typeof res.status === 'function' ? res.status() : `error ${res?.message ?? res}`;
+          if (status !== 200) {
+            fail('G4', at, `loaded directly, ${urlFor(route)} answered ${status}`);
+            drain(sink, at);
+            continue;
+          }
+          const why = await settle(page);
+          if (why) fail('G7', at, `never settled: ${why}`);
+          const walkState = { tested: new Set(), keyedViews: 0, controls: 0, tablists: 0 };
+          const s = { route, isWorkbench, primary: false, idle: false, size, w, h, theme, lang: wlang, walkState, wide: true };
+          await processState(page, sink, { ...at, trail: '' }, { ...s, first: true });
+          await walkTabs(page, sink, { ...at }, [], new Set(), s);
+          if (isWorkbench) await walkCases(page, sink, at, s);
+        }
+        await ctx.close();
+      }
+    }
+
     // ---- G4: artifacts answered as JSON.
     for (const [pathname, first] of artifacts) {
       const c = await first;
@@ -348,6 +413,10 @@ export async function runGate(o) {
     for (const r of f.repeatedTicks ?? []) {
       fail('G6', where, `${r.label}: ${r.n} axis tick label(s) repeat the label before them (give the axis fixed decimals)`);
     }
+    for (const m of await page.evaluate(() => window.__caosGate.drawingText())) fail('G10', where, m);
+    if (s.lang === 'es') for (const m of await page.evaluate(() => window.__caosGate.decimals())) fail('G11', where, m);
+    if (s.w > 760) for (const m of await page.evaluate(() => window.__caosGate.sticky())) fail('G12', where, m);
+    if (s.contrast) for (const m of await page.evaluate(() => window.__caosGate.contrast())) fail('G13', where, m);
     if (f.sectionsWithoutRefs) fail('ADR-0017.4', where, `${f.sectionsWithoutRefs} section(s) end without references or a stated reason`);
     if (s.first && !s.isWorkbench && f.pageText < opt.textFloor) fail('G4', where, `the page body holds ${f.pageText} characters of text (floor ${opt.textFloor}); the route rendered without its content`);
 
@@ -360,7 +429,7 @@ export async function runGate(o) {
       }
     }
 
-    if (s.first) await saveShot(page, `${slug(s.route)}_${s.w}x${s.h}_${s.theme}_${s.lang}.png`);
+    if (s.first) await saveShot(page, `${slug(s.route)}_${s.w}x${s.h}_${s.theme}_${s.lang}${s.wide ? '_wide' : ''}.png`);
 
     if (s.idle) {
       const idle = await page.evaluate((ms) => window.__caosGate.idle(ms), opt.idleMs);
@@ -376,7 +445,7 @@ export async function runGate(o) {
     if (s.primary && s.isWorkbench && s.walkState) await reactivity(page, sink, where, s);
     drain(sink, where);
     const failedHere = failures.some((x) => x.route === where.route && x.mode === where.mode && x.trail === where.trail && x.check !== 'G3');
-    if (failedHere) await saveShot(page, `fail_${slug(s.route)}_${s.w}x${s.h}_${s.theme}_${s.lang}_${shots + 1}.png`, true);
+    if (failedHere) await saveShot(page, `fail_${slug(s.route)}_${s.w}x${s.h}_${s.theme}_${s.lang}${s.wide ? '_wide' : ''}_${shots + 1}.png`, true);
   }
 
   async function paintedChecks(page, f, where, big) {
@@ -470,6 +539,8 @@ export async function runGate(o) {
         if (i !== tl.active) {
           const tab = page.locator(tl.key).locator('[role="tab"]').filter({ visible: true }).nth(i);
           try {
+            // a reader scrolls the tab clear of the sticky header first; so does the gate, then clicks it
+            await tab.evaluate((el) => window.__caosGate.bringEl(el)).catch(() => undefined);
             await tab.click({ timeout: 5000 });
           } catch (e) {
             fail('G7', at, `the tab could not be clicked: ${e.message.split('\n')[0]}`);
@@ -586,13 +657,59 @@ export async function runGate(o) {
   function finish() {
     const checks = {};
     for (const f of failures) checks[f.check] = (checks[f.check] ?? 0) + 1;
-    const report = { ok: failures.length === 0, base, expectBrand: opt.expectBrand, sizes: opt.sizes, themes: opt.themes, langs: opt.langs, states, minima, checks, failures };
     mkdirSync(opt.out, { recursive: true });
+    const captures = existsSync(shotsDir) ? readdirSync(shotsDir).filter((n) => n.endsWith('.png')).sort() : [];
+    const report = {
+      ok: failures.length === 0,
+      base,
+      expectBrand: opt.expectBrand,
+      sizes: opt.sizes,
+      themes: opt.themes,
+      langs: opt.langs,
+      wideFontSizes: opt.wideFont === false ? '' : opt.wideFontSizes,
+      states,
+      minima,
+      checks,
+      captures: captures.length,
+      failures,
+    };
     writeFileSync(join(opt.out, 'gate-report.json'), JSON.stringify(report, null, 2));
+    // G14: the captures are for a person to read (the gate measures, it does not judge content); one page shows them.
+    writeFileSync(join(opt.out, 'index.html'), captureIndex(report, captures));
     return report;
   }
 }
 
+const esc = (t) => String(t).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+
+/** G14: one page with every capture, grouped by route, the failure captures and the failure list first. */
+export function captureIndex(report, captures) {
+  const groups = new Map();
+  for (const name of captures) {
+    const key = name.startsWith('fail_') ? 'failures' : name.split('_')[0];
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(name);
+  }
+  const order = ['failures', ...[...groups.keys()].filter((k) => k !== 'failures')];
+  const rows = report.failures
+    .slice(0, 400)
+    .map((f) => `<tr><td>${esc(f.check)}</td><td>${esc(f.route)}</td><td>${esc(f.mode)}</td><td>${esc(f.trail)}</td><td>${esc(f.message)}</td></tr>`)
+    .join('');
+  const figure = (n) => `<figure><a href="shots/${esc(n)}"><img loading="lazy" src="shots/${esc(n)}" alt="${esc(n)}"></a><figcaption>${esc(n.replace(/\.png$/, ''))}</figcaption></figure>`;
+  const sections = order
+    .filter((k) => groups.has(k))
+    .map((k) => `<h2>${esc(k)} (${groups.get(k).length})</h2><div class="grid">${groups.get(k).map(figure).join('')}</div>`)
+    .join('');
+  const style =
+    'body{font:14px system-ui,sans-serif;margin:16px;background:#f6f8fa;color:#1f2328}h1{font-size:18px}h2{font-size:15px;margin-top:24px}' +
+    'table{border-collapse:collapse;font-size:12px}td{border-bottom:1px solid #d0d7de;padding:3px 6px;vertical-align:top}' +
+    '.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}figure{margin:0;background:#fff;border:1px solid #d0d7de;padding:6px}' +
+    'img{width:100%;height:auto;display:block}figcaption{font-size:11px;color:#57606a;margin-top:4px}';
+  const head = `caos-shell-gate: ${esc(report.expectBrand)} at ${esc(report.base)}: ${report.ok ? 'OK' : `${report.failures.length} failure(s)`} in ${report.states} states, ${captures.length} captures`;
+  const table = rows ? `<table><tr><td>check</td><td>route</td><td>mode</td><td>trail</td><td>message</td></tr>${rows}</table>` : '';
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${head}</title><style>${style}</style></head><body><h1>${head}</h1>${table}${sections}</body></html>\n`;
+}
+
 function slug(route) {
   return route === '/' ? 'app' : route.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fasl-work/caos-app-shell",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "Shared web-app shell, workbench primitives, content primitives, design system and measured gate for the CAOS / Faena public apps (ADR-0016, ADR-0017, ADR-0071).",
   "license": "MIT",
   "author": "Felipe Santibáñez-Leal",