@ggui-ai/ui-gen 0.28.0 → 0.29.0

package/src/evaluation/criteria/bank.ts

@@ -10,7 +10,7 @@
  * never mid-run. Fields the loader does not read (`examples`, `fields`, `groups`, `seed`) are page
  * matter and are dropped here; an additive field tomorrow does not break today's loader.
  */
-import { z } from 'zod';
+import * as z from 'zod';
 
 /** `family.property[.facet]` — `read.contrast`, `hello.field`. */
 const CRITERION_ID = /^[a-z][a-z0-9-]*(?:\.[a-zA-Z][a-zA-Z0-9-]*)+$/;

package/src/evaluation/criteria/edge-instruments.ts

@@ -0,0 +1,14 @@
+/**
+ * #1765 — the identity of each edge instrument on a capture: its row id and the sha256 of the page expression it ran,
+ * so every reading names exactly which probe produced it (v1 is frozen at `cec465319`; v2 is a separate instrument).
+ */
+import { createHash } from 'node:crypto';
+import { EDGE_BLOCKS_EXPRESSION } from './edge-probe.js';
+import { EDGE_BLOCKS_V2_EXPRESSION } from './edge-probe-v2.js';
+
+const digest = (expression: string): string => createHash('sha256').update(expression).digest('hex').slice(0, 12);
+
+export const EDGE_INSTRUMENT_IDS = {
+  v1: `space.edge@${digest(EDGE_BLOCKS_EXPRESSION)}`,
+  v2: `space.edge.v2@${digest(EDGE_BLOCKS_V2_EXPRESSION)}`,
+} as const;

package/src/evaluation/criteria/edge-probe-v2.ts

@@ -0,0 +1,352 @@
+/**
+ * `space.edge.v2`'s measurement (#1765): `edge-probe.ts` (v1, frozen at `cec465319`) with what the v2 rule
+ * (`edge-v2.ts`) reads added, and nothing v1 measures changed. It runs where the screenshot is taken, on the same DOM at
+ * the same width, and only reads layout.
+ *
+ * Added to every block: `bottom`. Added to surfaces: their content box (`contentLeft` / `contentRight`, inside border
+ * and padding). Added to controls: `textEdge`, the first control's first character, so a control is compared by its
+ * content (rule 5). Added blocks: `media`, a painted image, video or icon that is not a text's marker and sits in no
+ * text, control or table, so a row led by an icon alone has a leader. Added to blocks in rows: `follows` and `item`, when
+ * the block sits in an item of a horizontal flex or grid row that is not the row's leading item on its line (rule 2).
+ * Added to the read: the card's own content box. Everything else is v1's, word for word.
+ */
+import type { CardContentBox, EdgeBlockV2 } from './edge-v2.js';
+
+/** What the probe returns: the measured blocks, and whether the frame showed nothing to evaluate. */
+export interface EdgeProbeV2 {
+  readonly blocks: readonly EdgeBlockV2[];
+  readonly cardContent: CardContentBox;
+  readonly placeholdersOnly: boolean;
+  /** What the probe saw and did not measure, by rule, so a dropped block is counted rather than silent. */
+  readonly skipped: { readonly rowItems: number; readonly ornaments: number };
+}
+
+// Plain ES2020 for the page: no imports, no template literals, no helpers a bundler might rename.
+export const EDGE_BLOCKS_V2_EXPRESSION = String.raw`(() => {
+  const root = document.getElementById('root');
+  if (!root) return null;
+  const rootBox = root.getBoundingClientRect();
+  const x0 = rootBox.left;
+  const px = (v) => Math.round((v - x0) * 2) / 2;
+  const CONTROL = 'button,input,select,textarea,[role="button"],[role="tab"],[role="switch"],[role="checkbox"],[role="radio"],[role="option"],[role="link"],a[href]';
+  const ALNUM = /[\p{L}\p{N}]/u;
+  const css = (el) => getComputedStyle(el);
+  const clear = (c) => !c || c === 'transparent' || /rgba\([^)]*,\s*0(\.0+)?\)$/.test(c);
+  // Visible through every ancestor (an ancestor at opacity 0 or visibility hidden hides it), and not degenerate.
+  const shown = (el) => {
+    const s = css(el);
+    if (s.display === 'none' || s.visibility === 'hidden' || Number(s.opacity) === 0) return false;
+    if (typeof el.checkVisibility === 'function' && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return false;
+    const r = el.getBoundingClientRect();
+    return r.width > 1 && r.height > 1;
+  };
+  const inline = (s) => /^inline/.test(s.display) && s.display !== 'inline-block' && s.display !== 'inline-flex' && s.display !== 'inline-grid';
+  const groundOf = (el) => {
+    for (let p = el.parentElement; p; p = p.parentElement) { const b = css(p).backgroundColor; if (!clear(b)) return b; }
+    return 'rgb(255, 255, 255)';
+  };
+  const sides = (s) => ['Top', 'Right', 'Bottom', 'Left'].filter((k) => parseFloat(s['border' + k + 'Width']) > 0 && s['border' + k + 'Style'] !== 'none' && !clear(s['border' + k + 'Color'])).length;
+  const bounded = (el) => { const s = css(el); return sides(s) >= 1 || (!clear(s.backgroundColor) && s.backgroundColor !== groundOf(el)); };
+  // A control: a native or ARIA one, or a bounded box the visitor clicks (a pointer cursor or a tab stop) that holds no
+  // control of its own and is not the whole card. Its contents are not blocks of the column (decided 2026-10-02).
+  const isControl = (el) => {
+    const s = css(el);
+    if (inline(s)) return false;
+    if (el.matches(CONTROL)) return true;
+    if (el === root) return false;
+    const clickable = s.cursor === 'pointer' || (el.hasAttribute('tabindex') && el.tabIndex >= 0);
+    if (!clickable || !bounded(el) || el.querySelector(CONTROL)) return false;
+    const r = el.getBoundingClientRect();
+    return r.width * r.height < 0.6 * rootBox.width * rootBox.height;
+  };
+  const isTable = (el) => el.matches('table,[role="table"],[role="grid"]');
+  const isSurface = (el) => {
+    if (el === root || isControl(el)) return false;
+    const s = css(el);
+    if (/^inline/.test(s.display) || s.display === 'contents') return false;
+    if (isTable(el)) return true;
+    // v2 (the design lead, #1765): what paints owns its edge — any border side (a single rule counts), a fill, a shadow.
+    return sides(s) >= 1 || (!clear(s.backgroundColor) && s.backgroundColor !== groundOf(el)) || (s.boxShadow && s.boxShadow !== 'none');
+  };
+  const path = (el) => {
+    const parts = [];
+    // v2: the whole path from the root, so nested boxes with the same tail and text never share an id (v1 kept four
+    // steps, and three nested surfaces of one card read as one container).
+    for (let e = el; e && e !== root; e = e.parentElement) {
+      const i = e.parentElement ? Array.prototype.indexOf.call(e.parentElement.children, e) + 1 : 1;
+      parts.unshift(e.tagName.toLowerCase() + ':' + i);
+    }
+    return parts.join('>');
+  };
+  const label = (el) => { const t = (el.innerText || '').replace(/\s+/g, ' ').trim(); return path(el) + (t ? ' "' + t.slice(0, 24) + '"' : ''); };
+  const surfaces = [];
+  const surfaceOf = (el, self) => { for (let p = self ? el : el.parentElement; p && p !== root; p = p.parentElement) if (surfaces.indexOf(p) >= 0) return p; return null; };
+  const inTable = (el) => { for (let p = el.parentElement; p && p !== root; p = p.parentElement) if (isTable(p)) return true; return false; };
+  const inControl = (el) => { for (let p = el; p && p !== root; p = p.parentElement) if (isControl(p)) return p; return null; };
+  const all = Array.prototype.slice.call(root.querySelectorAll('*')).filter(shown);
+  for (const el of all) if (isSurface(el) && !inTable(el) && !inControl(el)) surfaces.push(el);
+  const ids = new Map();
+  const idOf = (el) => { if (!ids.has(el)) ids.set(el, label(el)); return ids.get(el); };
+  const blocks = [];
+  // Per block: the element it stands for and its first line's box, for rows.
+  const owners = [];
+  const lines = [];
+  // Per block: its raw line boxes and left, so a row reads the line two items share, not a wrapped item's widest line.
+  const rects = [];
+  const rawLeft = [];
+  const words = [];
+  const within = (el, self) => { const s = surfaceOf(el, self); return s ? { within: idOf(s) } : {}; };
+  for (const s of surfaces) {
+    const r = s.getBoundingClientRect();
+    owners.push(s); lines.push({ top: r.top, bottom: r.bottom }); rects.push([r]); rawLeft.push(r.left); words.push('');
+    // A placeholder: a box with no text, no control and no image or icon inside it (a loading bar). Not a block.
+    const holds = Array.prototype.some.call(s.querySelectorAll('*'), (el) => shown(el) && (el.matches(CONTROL) || el.tagName === 'IMG' || el.tagName.toLowerCase() === 'svg')) || ALNUM.test(s.innerText || '');
+    const ss = css(s);
+    const cl = r.left + parseFloat(ss.borderLeftWidth) + parseFloat(ss.paddingLeft);
+    const cr = r.right - parseFloat(ss.borderRightWidth) - parseFloat(ss.paddingRight);
+    blocks.push(Object.assign({ id: idOf(s), kind: 'surface', edge: px(r.left), left: px(r.left), right: px(r.right), top: Math.round(r.top), bottom: Math.round(r.bottom), contentLeft: px(cl), contentRight: px(cr) }, within(s, false), isTable(s) ? { role: 'table' } : holds ? {} : { role: 'placeholder' }));
+  }
+  const blockOf = (node) => { for (let p = node.parentElement; p && p !== root; p = p.parentElement) if (!inline(css(p))) return p; return root; };
+  const groups = new Map();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    if (!/\S/.test(n.data) || !n.parentElement || n.parentElement.closest('style,script,noscript,template') || !shown(n.parentElement) || inControl(n.parentElement) || inTable(n.parentElement)) continue;
+    const b = blockOf(n);
+    if (!groups.has(b)) groups.set(b, []);
+    groups.get(b).push(n);
+  }
+  // Ink: text whose own colour is not transparent. The edge is the first visible character in ink (decided 2026-10-02):
+  // leading invisible text, private-use icon-font glyphs and formatting characters are not characters of the block,
+  // while a currency sign or a quotation mark is.
+  const inked = (n) => !clear(css(n.parentElement).color) && ALNUM.test(n.data);
+  const textRects = (nodes) => {
+    const rs = [];
+    for (const n of nodes) { if (!inked(n)) continue; const range = document.createRange(); range.selectNodeContents(n); for (const r of range.getClientRects()) if (r.width > 0 && r.height > 0) rs.push(r); }
+    return rs;
+  };
+  const glyphAt = (n, i) => { const range = document.createRange(); range.setStart(n, i); range.setEnd(n, i + 1); const r = range.getClientRects()[0]; return r || null; };
+  const firstGlyph = (nodes) => {
+    for (const n of nodes) { if (!inked(n)) continue; const i = n.data.search(/[^\s\p{Co}\p{Cf}]/u); if (i < 0) continue; const r = glyphAt(n, i); if (r) return r; }
+    return null;
+  };
+  // A marker paints: a loaded image, an SVG with a filled or stroked shape, or an element with its own fill, border
+  // or visible text. An element that paints nothing is not a marker.
+  const painted = (m) => {
+    if (!shown(m)) return false;
+    if (m.tagName === 'IMG') return m.complete && m.naturalWidth > 0;
+    if (m.tagName.toLowerCase() === 'svg' || m.closest('svg')) {
+      const shapes = m.querySelectorAll('path,circle,rect,line,polyline,polygon,ellipse,use,text');
+      return Array.prototype.some.call(shapes, (sh) => { const st = css(sh); return (st.fill !== 'none' && !clear(st.fill)) || (st.stroke !== 'none' && !clear(st.stroke)); });
+    }
+    const s = css(m);
+    if (!clear(s.backgroundColor) || sides(s) >= 1 || ((m.textContent || '').trim().length > 0 && !clear(s.color))) return true;
+    // A wrapper that paints nothing itself is a marker when an image or icon inside it paints.
+    return Array.prototype.some.call(m.querySelectorAll('svg,img'), (k) => painted(k));
+  };
+  const markerEls = [];
+  const markerBefore = (b, textLeft, lineTop, lineBottom) => {
+    const cands = [];
+    const consider = (m) => { if (!painted(m)) return; const r = m.getBoundingClientRect(); if (r.left < textLeft - 2 && r.bottom > lineTop && r.top < lineBottom) { cands.push(r.left); markerEls.push(m); } };
+    for (const m of b.querySelectorAll('svg,img,[aria-hidden="true"],i')) if ((m.textContent || '').trim().length <= 2) consider(m);
+    const p = b.parentElement;
+    if (p && p !== root && /flex/.test(css(p).display) && !/column/.test(css(p).flexDirection)) for (const sib of p.children) { if (sib === b) break; if (sib.matches('svg,img,i,[aria-hidden="true"]') || !(sib.textContent || '').trim()) consider(sib); }
+    return cands.length ? Math.min.apply(null, cands) : null;
+  };
+  let texts = 0;
+  let ornaments = 0;
+  for (const [b, nodes] of groups) {
+    if (!nodes.some((n) => ALNUM.test(n.data))) { ornaments += 1; continue; }
+    const rs = textRects(nodes);
+    const g = firstGlyph(nodes);
+    if (!rs.length || g === null) continue;
+    texts += 1;
+    const first = g.left;
+    const left = Math.min.apply(null, rs.map((r) => r.left));
+    const right = Math.max.apply(null, rs.map((r) => r.right));
+    const top = Math.min.apply(null, rs.map((r) => r.top));
+    const marker = markerBefore(b, first, g.top, g.bottom);
+    const s = css(b);
+    const box = b.getBoundingClientRect();
+    const parent = b.parentElement ? css(b.parentElement) : null;
+    const centredText = s.textAlign === 'center' && right - left < box.width * 0.9;
+    const centredBox = parent && /flex/.test(parent.display) && /column/.test(parent.flexDirection) && parent.alignItems === 'center';
+    const list = b.matches('li') || s.display === 'list-item' ? b.closest('ul,ol') : null;
+    const inProse = list && list.previousElementSibling && list.previousElementSibling.matches('p');
+    const bottom = Math.max.apply(null, rs.map((r) => r.bottom));
+    const block = { id: idOf(b), kind: 'text', edge: px(marker !== null ? marker : first), left: px(Math.min(left, marker !== null ? marker : left)), right: px(right), top: Math.round(top), bottom: Math.round(bottom) };
+    if (marker !== null) block.textEdge = px(first);
+    if (centredText || centredBox) block.role = 'centred';
+    else if (inProse) block.role = 'list-item';
+    owners.push(b); lines.push({ top: g.top, bottom: g.bottom }); rects.push(rs); rawLeft.push(Math.min(left, marker !== null ? marker : left)); words.push(nodes.map((n) => n.data).join('').trim());
+    blocks.push(Object.assign(block, within(b, true)));
+  }
+  const ctlGroups = new Map();
+  for (const el of all) { if (!isControl(el) || inTable(el) || (el.parentElement && inControl(el.parentElement))) continue; const p = el.parentElement || root; if (!ctlGroups.has(p)) ctlGroups.set(p, []); ctlGroups.get(p).push(el); }
+  let controls = 0;
+  for (const [p, els] of ctlGroups) {
+    const rs = els.map((e) => e.getBoundingClientRect());
+    const topRow = Math.min.apply(null, rs.map((r) => r.top));
+    let firstEl = null; let firstR = null;
+    els.forEach((e, i) => { const r = rs[i]; if (r.top - topRow < r.height / 2 && (!firstR || r.left < firstR.left)) { firstEl = e; firstR = r; } });
+    let edge = firstR.left;
+    const tw = document.createTreeWalker(firstEl, NodeFilter.SHOW_TEXT); const ns = []; for (let n = tw.nextNode(); n; n = tw.nextNode()) ns.push(n);
+    const cg = firstGlyph(ns);
+    if (!bounded(firstEl) && cg) edge = cg.left;
+    // v2: a control's edge is its first painted content — its first character or a painted icon inside its box,
+    // whichever is leftmost; an icon drawn over a native field counts. A field with neither reads its padding edge.
+    const fs = css(firstEl);
+    const fieldEdge = firstEl.matches('input,select,textarea') ? firstR.left + parseFloat(fs.borderLeftWidth) + parseFloat(fs.paddingLeft) : null;
+    const iconLefts = all.filter((k) => k.matches('svg,img,i,[aria-hidden="true"]') && !(k.parentElement && k.parentElement.closest('svg')) && painted(k)).map((k) => k.getBoundingClientRect()).filter((r) => r.left >= firstR.left - 1 && r.right <= firstR.right + 1 && r.top >= firstR.top - 1 && r.bottom <= firstR.bottom + 1).map((r) => r.left);
+    const iconLeft = iconLefts.length ? Math.min.apply(null, iconLefts) : null;
+    controls += 1;
+    const ps = css(p);
+    const centred = ps.justifyContent === 'center' || (ps.textAlign === 'center' && !/flex|grid/.test(ps.display));
+    const block = { id: idOf(p) + ' [controls]', kind: 'controls', edge: px(edge), left: px(Math.min.apply(null, rs.map((r) => r.left))), right: px(Math.max.apply(null, rs.map((r) => r.right))), top: Math.round(topRow), bottom: Math.round(Math.max.apply(null, rs.map((r) => r.bottom))) };
+    const firstPaint = [cg ? cg.left : null, iconLeft].filter((v) => v !== null);
+    if (firstPaint.length) block.textEdge = px(Math.min.apply(null, firstPaint));
+    else if (fieldEdge !== null) block.textEdge = px(fieldEdge);
+    if (centred) block.role = 'centred';
+    owners.push(firstEl); lines.push({ top: firstR.top, bottom: firstR.bottom }); rects.push(rs); rawLeft.push(Math.min.apply(null, rs.map((r) => r.left))); words.push('');
+    blocks.push(Object.assign(block, within(firstEl, true)));
+  }
+  // v2: media — a painted image, video or icon that is not a text's marker and sits in no text, control or table.
+  const textOwners = Array.from(groups.keys());
+  for (const el of all) {
+    if (!el.matches('img,video,picture,svg') || (el.parentElement && el.parentElement.closest('svg')) || !painted(el) || inControl(el) || inTable(el)) continue;
+    if (markerEls.some((m) => m === el || m.contains(el))) continue;
+    if (textOwners.some((t) => t.contains(el))) continue;
+    const r = el.getBoundingClientRect();
+    // An icon drawn inside a control's box (a search field's glass) is the control's adornment, not a block.
+    if (all.some((k) => isControl(k) && (() => { const kr = k.getBoundingClientRect(); return r.left >= kr.left - 1 && r.right <= kr.right + 1 && r.top >= kr.top - 1 && r.bottom <= kr.bottom + 1; })())) continue;
+    owners.push(el); lines.push({ top: r.top, bottom: r.bottom }); rects.push([r]); rawLeft.push(r.left); words.push('');
+    blocks.push(Object.assign({ id: idOf(el) + ' [media]', kind: 'media', edge: px(r.left), left: px(r.left), right: px(r.right), top: Math.round(r.top), bottom: Math.round(r.bottom) }, within(el, false)));
+  }
+  // v2 rule 2, trailing: the right content edge of the box a block sits in (its nearest wider, non-inline ancestor
+  // inside its container), where a right-anchored item ends.
+  for (let i = 0; i < blocks.length; i += 1) {
+    const el = owners[i];
+    const w = el.getBoundingClientRect().width;
+    for (let p = el.parentElement; p && p !== root.parentElement; p = p.parentElement) {
+      const ps = css(p);
+      if (inline(ps) || ps.display === 'contents') continue;
+      const pr = p.getBoundingClientRect();
+      if (pr.width <= w + 2) continue;
+      blocks[i].parentRight = px(pr.right - parseFloat(ps.borderRightWidth) - parseFloat(ps.paddingRight));
+      break;
+    }
+  }
+  // v2 rule 2: a block in a row item that is not the row's leading item on its line follows that leader. A row is a
+  // horizontal flex or grid box; the leading item is the leftmost of the shown children that share the item's line.
+  const isRowBox = (el) => { const s = css(el); return (/flex/.test(s.display) && !/column/.test(s.flexDirection)) || /grid/.test(s.display); };
+  const vOverlap = (a, b) => Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 1;
+  for (let i = 0; i < blocks.length; i += 1) {
+    const el = owners[i];
+    const c = (blocks[i].kind === 'surface' ? surfaceOf(el, false) : surfaceOf(el, true)) || root;
+    for (let e = el; e && e !== c && e !== root; e = e.parentElement) {
+      const p = e.parentElement;
+      if (!p) break;
+      if (isRowBox(p)) {
+        const er = e.getBoundingClientRect();
+        const line = Array.prototype.filter.call(p.children, (k) => shown(k) && vOverlap(k.getBoundingClientRect(), er));
+        if (line.length >= 2) {
+          const lead = line.reduce((a, k) => (k.getBoundingClientRect().left < a.getBoundingClientRect().left ? k : a));
+          // A leader that paints nothing (an empty icon slot) leads nothing: the item after it stands alone on its line.
+          const leads = painted(lead) || ALNUM.test(lead.innerText || '');
+          if (lead !== e && leads) { blocks[i].follows = label(lead); blocks[i].item = label(e); break; }
+        }
+      }
+      if (p === c) break;
+    }
+  }
+  // Rows (decided 2026-10-01, read by geometry 2026-10-02): items set on one line, however the CSS sets them. An item
+  // after another measured item on its line that holds one block (a text, a control, or a box holding at most one
+  // text) belongs to the row and is not measured; an item with a stack inside it is a column.
+  const dropped = new Set();
+  const sameLine = (a, b) => Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > Math.min(a.bottom - a.top, b.bottom - b.top) / 2;
+  const contains = (o, el) => o === el || o.contains(el);
+  const innerTexts = (i) => owners.map((el, k) => k).filter((k) => k !== i && blocks[k].kind !== 'surface' && contains(owners[i], owners[k]));
+  const isPill = (i) => blocks[i].kind === 'surface' && innerTexts(i).length <= 1 && !owners.some((el, k) => k !== i && blocks[k].kind === 'surface' && contains(owners[i], el));
+  const itemOf = (el, other) => { let e = el; while (e.parentElement && e.parentElement !== root && !e.parentElement.contains(other)) e = e.parentElement; return e; };
+  for (let i = 0; i < blocks.length; i += 1) {
+    if (blocks[i].kind === 'surface' && !isPill(i)) continue;
+    const before = blocks.findIndex((bj, j) => j !== i && bj.within === blocks[i].within && !(bj.kind === 'surface' && !isPill(j)) && !contains(owners[j], owners[i]) && !contains(owners[i], owners[j]) && rects[j].some((r) => sameLine(r, lines[i]) && r.right <= rawLeft[i] + 1));
+    if (before < 0) continue;
+    // A number or bullet in front of a text on its line is a hanging marker, not a row: the pair is one block with two
+    // edges, the marker's and the text's.
+    if (blocks[i].kind === 'text' && blocks[before].kind === 'text' && /^[\p{N}\p{P}\p{S}]{1,3}$/u.test(words[before])) {
+      blocks[i] = Object.assign({}, blocks[i], { edge: blocks[before].edge, left: Math.min(blocks[i].left, blocks[before].left), textEdge: blocks[i].edge });
+      delete blocks[i].role;
+      // v2: the merged block's edge is its marker's, which leads the row, so it stands in its container's column.
+      delete blocks[i].follows;
+      delete blocks[i].item;
+      dropped.add(before);
+      continue;
+    }
+    const item = itemOf(owners[i], owners[before]);
+    const inside = owners.map((el, k) => k).filter((k) => contains(item, owners[k]) && blocks[k].kind !== 'surface');
+    const boxes = owners.map((el, k) => k).filter((k) => contains(item, owners[k]) && blocks[k].kind === 'surface' && k !== i);
+    if (blocks[i].kind === 'surface') { if (boxes.length === 0) { dropped.add(i); for (const k of innerTexts(i)) dropped.add(k); } continue; }
+    if (inside.length === 1 && boxes.length === 0) dropped.add(i);
+  }
+  const kept = blocks.filter((_, i) => !dropped.has(i));
+  // Placeholders: a frame with no text in ink shows nothing to evaluate, whatever controls or boxes it draws.
+  const rs0 = css(root);
+  const cardContent = { left: px(rootBox.left + parseFloat(rs0.borderLeftWidth) + parseFloat(rs0.paddingLeft)), right: px(rootBox.right - parseFloat(rs0.borderRightWidth) - parseFloat(rs0.paddingRight)) };
+  return { blocks: kept, cardContent, placeholdersOnly: texts === 0, skipped: { rowItems: dropped.size, ornaments } };
+})()`;
+
+const KINDS: readonly EdgeBlockV2['kind'][] = ['text', 'controls', 'surface', 'media'];
+const ROLES: readonly NonNullable<EdgeBlockV2['role']>[] = ['list-item', 'table', 'centred', 'placeholder'];
+const isKind = (v: unknown): v is EdgeBlockV2['kind'] => KINDS.some((k) => k === v);
+const isRole = (v: unknown): v is NonNullable<EdgeBlockV2['role']> => ROLES.some((r) => r === v);
+const num = (v: unknown): v is number => typeof v === 'number' && Number.isFinite(v);
+const field = (o: object, key: string): unknown => Reflect.get(o, key);
+const optNum = (v: unknown): boolean => v === undefined || num(v);
+const optStr = (v: unknown): boolean => v === undefined || typeof v === 'string';
+
+/**
+ * The v2 probe's typed read: `null` when the page had no `#root` or returned something else, so a failed measurement
+ * is reported as unmeasured and never read as "no offsets". A malformed block fails the whole read for the same reason.
+ */
+export function parseEdgeProbeV2(value: unknown): EdgeProbeV2 | null {
+  if (typeof value !== 'object' || value === null) return null;
+  const raw = field(value, 'blocks');
+  const placeholdersOnly = field(value, 'placeholdersOnly');
+  const cc = field(value, 'cardContent');
+  if (!Array.isArray(raw) || typeof placeholdersOnly !== 'boolean' || typeof cc !== 'object' || cc === null) return null;
+  const ccLeft = field(cc, 'left');
+  const ccRight = field(cc, 'right');
+  if (!num(ccLeft) || !num(ccRight)) return null;
+  const skippedRaw = field(value, 'skipped');
+  if (typeof skippedRaw !== 'object' || skippedRaw === null) return null;
+  const rowItems = field(skippedRaw, 'rowItems');
+  const ornaments = field(skippedRaw, 'ornaments');
+  if (!num(rowItems) || !num(ornaments)) return null;
+  const blocks: EdgeBlockV2[] = [];
+  for (const entry of raw) {
+    if (typeof entry !== 'object' || entry === null) return null;
+    const [id, kind, edge, left, right, top, bottom] = ['id', 'kind', 'edge', 'left', 'right', 'top', 'bottom'].map((k) => field(entry, k));
+    const [within, textEdge, role, contentLeft, contentRight, follows, item, parentRight] = ['within', 'textEdge', 'role', 'contentLeft', 'contentRight', 'follows', 'item', 'parentRight'].map((k) => field(entry, k));
+    if (typeof id !== 'string' || !isKind(kind) || !num(edge) || !num(left) || !num(right) || !num(top) || !num(bottom)) return null;
+    if (!optStr(within) || !optNum(textEdge) || !optNum(contentLeft) || !optNum(contentRight) || !optStr(follows) || !optStr(item) || !optNum(parentRight)) return null;
+    if (role !== undefined && !isRole(role)) return null;
+    blocks.push({
+      id,
+      kind,
+      edge,
+      left,
+      right,
+      top,
+      bottom,
+      ...(typeof within === 'string' ? { within } : {}),
+      ...(num(textEdge) ? { textEdge } : {}),
+      ...(role !== undefined ? { role } : {}),
+      ...(num(contentLeft) ? { contentLeft } : {}),
+      ...(num(contentRight) ? { contentRight } : {}),
+      ...(typeof follows === 'string' ? { follows } : {}),
+      ...(typeof item === 'string' ? { item } : {}),
+      ...(num(parentRight) ? { parentRight } : {}),
+    });
+  }
+  return { blocks, cardContent: { left: ccLeft, right: ccRight }, placeholdersOnly, skipped: { rowItems, ornaments } };
+}

package/src/evaluation/criteria/edge-v2.ts

@@ -0,0 +1,242 @@
+/**
+ * `space.edge.v2` (#1765): the edge rule as the design lead rewrote it, as a SEPARATE instrument beside the frozen v1
+ * (`edge.ts` / `edge-probe.ts`, validated at `cec465319`). v1 is untouched and keeps reporting; both verdicts go on
+ * every capture until v2 has its own fresh sealed draw.
+ *
+ * The rule (the design lead, #1765): in each column of a card the things that stack start on one content edge.
+ * 1. One-step nesting is legal only inside a visible surface (its own fill or a hairline): a surface's content may sit
+ *    on the surface's content edge. An unboxed wrapper is not a surface; its content is compared at its container.
+ * 2. In a row, the leading item sits on the content edge; every item after it in the same row is measured from the
+ *    item before it, not from the card. A trailing item is legal when its right edge sits on its container's right
+ *    content edge (within 2 px) or when the row has a leading item on the edge. A block alone on its line whose right
+ *    edge sits mid-card is a split.
+ * 3. Grid columns (items side by side in a row) each have their own edge: they are rows' later items (rule 2).
+ * 4. A media column may centre its image.
+ * 5. Content to content: a control is compared by its content's edge (its first character), never its border box.
+ *
+ * Input is the measured block list from `edge-probe-v2.ts`; this module measures nothing itself.
+ */
+import { EDGE_TOLERANCE_PX, type EdgeBlock, type EdgeOffset, type EdgeVerdict } from './edge.js';
+
+/** One block of a captured card, as the v2 probe measures it: v1's fields, plus what the v2 rule reads. */
+export interface EdgeBlockV2 extends Omit<EdgeBlock, 'kind'> {
+  /** v1's kinds, plus `media`: a painted image, video or icon that is not a text's marker. */
+  readonly kind: EdgeBlock['kind'] | 'media';
+  /** The block's bottom, CSS px from the card's top, for rows. */
+  readonly bottom: number;
+  /** A surface's content box (inside its border and padding): where its content may sit, and where a trailing item may end. */
+  readonly contentLeft?: number;
+  readonly contentRight?: number;
+  /**
+   * Rule 2: the block sits in a row item that is not the row's leading item. The value names the row's leading item, so
+   * the block is measured with the other blocks of its own item, never against its container's column.
+   */
+  readonly follows?: string;
+  /** A row item's own id, so blocks that follow the same leader in the same item are grouped together. */
+  readonly item?: string;
+  /** Rule 2, trailing: the right content edge of the box the block sits in, where a right-anchored item ends. */
+  readonly parentRight?: number;
+}
+
+/** The card's own content box, from the probe: where the card's content edge is and where a trailing item may end. */
+export interface CardContentBox {
+  readonly left: number;
+  readonly right: number;
+}
+
+export { EDGE_TOLERANCE_PX };
+export type { EdgeOffset, EdgeVerdict };
+
+// ── v1's column logic, copied verbatim from `edge.ts` at `cec465319` (that file stays frozen), typed for v2 blocks ──
+const CARD = 'card';
+const same = (a: number, b: number): boolean => Math.abs(a - b) <= EDGE_TOLERANCE_PX;
+const overlaps = (a: EdgeBlockV2, b: EdgeBlockV2): boolean => a.left < b.right && b.left < a.right;
+const axis = (b: EdgeBlockV2): number => (b.left + b.right) / 2;
+
+/** A surface's content edge: where its first text starts (its topmost text block's edge), or undefined if it has none. */
+function contentEdge(surface: EdgeBlockV2, blocks: readonly EdgeBlockV2[]): number | undefined {
+  const texts = blocks.filter((b) => b.within === surface.id && b.kind !== 'surface' && b.role !== 'centred');
+  if (texts.length === 0) return undefined;
+  const first = texts.reduce((a, b) => (b.top < a.top ? b : a));
+  return first.textEdge ?? first.edge;
+}
+
+/** Columns among a container's direct blocks: non-surface blocks that overlap horizontally, transitively. */
+function columns(direct: readonly EdgeBlockV2[]): EdgeBlockV2[][] {
+  const all = direct.filter((b) => b.kind !== 'surface');
+  // A block that spans two columns side by side (it overlaps two blocks that do not overlap each other) belongs to
+  // their parent column, never to either (decided 2026-10-02): it must not chain them into one.
+  const bridges = (b: EdgeBlockV2): boolean => {
+    const under = all.filter((x) => x !== b && overlaps(x, b));
+    return under.some((x, i) => under.slice(i + 1).some((y) => !overlaps(x, y)));
+  };
+  const flow = all.filter((b) => !bridges(b));
+  const parentPool: EdgeBlockV2[] = all.filter((b) => bridges(b));
+  const parent = flow.map((_, i) => i);
+  const find = (i: number): number => (parent[i] === i ? i : (parent[i] = find(parent[i]!)));
+  for (let i = 0; i < flow.length; i += 1) for (let j = i + 1; j < flow.length; j += 1) if (overlaps(flow[i]!, flow[j]!)) parent[find(i)] = find(j);
+  const groups = new Map<number, EdgeBlockV2[]>();
+  flow.forEach((b, i) => groups.set(find(i), [...(groups.get(find(i)) ?? []), b]));
+  const cols = [...groups.values()];
+  // A surface joins the one column whose text or controls it overlaps. One that overlaps two or more columns spans
+  // them and goes to their parent, like a spanning text block; one that overlaps none stands with the other
+  // unclaimed blocks. Only flow blocks decide, so a surface never chains another surface into a column.
+  for (const s of direct.filter((b) => b.kind === 'surface')) {
+    const hit = cols.filter((c) => c.some((b) => b.kind !== 'surface' && overlaps(b, s)));
+    if (hit.length === 1) hit[0]!.push(s);
+    else parentPool.push(s);
+  }
+  // The parent's blocks and the unclaimed surfaces form columns among themselves: blocks that overlap stack.
+  const lp = parentPool.map((_, i) => i);
+  const lfind = (i: number): number => (lp[i] === i ? i : (lp[i] = lfind(lp[i]!)));
+  for (let i = 0; i < parentPool.length; i += 1) for (let j = i + 1; j < parentPool.length; j += 1) if (overlaps(parentPool[i]!, parentPool[j]!)) lp[lfind(i)] = lfind(j);
+  const lgroups = new Map<number, EdgeBlockV2[]>();
+  parentPool.forEach((b, i) => lgroups.set(lfind(i), [...(lgroups.get(lfind(i)) ?? []), b]));
+  cols.push(...lgroups.values());
+  return cols;
+}
+
+/** One column's check: one edge, or a stacked surface's content edge (the surface is then a ground). */
+function checkColumn(container: string, col: readonly EdgeBlockV2[], blocks: readonly EdgeBlockV2[]): EdgeOffset[] {
+  const surfaces = col.filter((b) => b.kind === 'surface');
+  const grounds = surfaces.flatMap((s) => {
+    const c = s.role === 'table' ? undefined : contentEdge(s, blocks);
+    return c === undefined ? [] : [c];
+  });
+  const flow = col.filter((b) => b.kind !== 'surface' && b.role !== 'centred' && b.role !== 'list-item');
+  const listItems = col.filter((b) => b.role === 'list-item');
+  // Every edge a flow block or a surface offers; the common edge E must sit on one of them.
+  const candidates = [...flow.flatMap((b) => [b.edge, ...(b.textEdge !== undefined ? [b.textEdge] : [])]), ...surfaces.flatMap((s) => [s.edge]), ...grounds];
+  const blockEdges = (b: EdgeBlockV2): number[] => [b.edge, ...(b.textEdge !== undefined ? [b.textEdge] : [])];
+  // The end edges another block of the column offers: its boxes' and its other control sets'.
+  const endEdgesBesides = (b: EdgeBlockV2): number[] => [...surfaces.map((s) => s.right), ...flow.filter((x) => x !== b && x.kind === 'controls').map((x) => x.right)];
+  // A column of only list items or only a centred group has no common edge to find; their own checks below still run.
+  let best: EdgeOffset[] | null = candidates.length === 0 ? [] : null;
+  for (const E of candidates) {
+    const allowed = [E, ...grounds];
+    const off: EdgeOffset[] = [];
+    for (const b of flow) {
+      if (blockEdges(b).some((x) => allowed.some((a) => same(x, a)))) continue;
+      // A control set alone on its line may END on the end edge its column's boxes or other controls share.
+      if (b.kind === 'controls' && endEdgesBesides(b).some((r) => same(b.right, r))) continue;
+      const nearest = allowed.reduce((n, a) => (Math.abs(a - b.edge) < Math.abs(n - b.edge) ? a : n));
+      off.push({ container, block: b.id, at: b.edge, nearest, offPx: Math.abs(b.edge - nearest) });
+    }
+    for (const s of surfaces) {
+      const c = s.role === 'table' ? undefined : contentEdge(s, blocks);
+      if (same(s.edge, E) || (c !== undefined && same(c, E))) continue;
+      const nearest = c !== undefined && Math.abs(c - E) < Math.abs(s.edge - E) ? c : s.edge;
+      off.push({ container, block: s.id, at: nearest, nearest: E, offPx: Math.abs(nearest - E) });
+    }
+    if (best === null || off.length < best.length || (off.length === best.length && sum(off) < sum(best))) best = off;
+    if (best.length === 0) break;
+  }
+  const offsets = best ?? [];
+  // A list inside running text: its items share an edge of their own.
+  if (listItems.length > 1) {
+    const e0 = listItems[0]!.edge;
+    for (const li of listItems.slice(1)) if (!same(li.edge, e0)) offsets.push({ container, block: li.id, at: li.edge, nearest: e0, offPx: Math.abs(li.edge - e0) });
+  }
+  // A centred group: its members share one centre axis, and it must be the whole content of its column. A column is
+  // edge-aligned or centred, never both (decided 2026-10-02).
+  const centred = col.filter((b) => b.role === 'centred');
+  // A centred group of two or more may follow a label or heading when nothing edge-aligned follows it (an empty state
+  // under its section label). One centred block among edge-aligned ones, or a column that returns to an edge after
+  // the group, fails (decided 2026-10-02).
+  const edgeAligned = col.filter((b) => b.role !== 'centred');
+  const groupTop = centred.length > 0 ? Math.min(...centred.map((c) => c.top)) : 0;
+  const groupEndsColumn = centred.length > 1 && edgeAligned.every((b) => b.top < groupTop);
+  if (centred.length > 0 && edgeAligned.some((b) => b.kind !== 'surface') && !groupEndsColumn) {
+    const E = flow[0]?.edge ?? edgeAligned[0]!.edge;
+    for (const c of centred) offsets.push({ container, block: c.id, at: c.edge, nearest: E, offPx: Math.abs(c.edge - E), reason: 'a centred block in an edge-aligned column' });
+  } else if (centred.length > 1) {
+    const a0 = axis(centred[0]!);
+    for (const c of centred.slice(1)) if (!same(axis(c), a0)) offsets.push({ container, block: c.id, at: axis(c), nearest: a0, offPx: Math.abs(axis(c) - a0) });
+  }
+  return offsets;
+}
+const sum = (o: readonly EdgeOffset[]): number => o.reduce((s, x) => s + x.offPx, 0);
+
+// ── v2 ──
+
+/** Rule 2: a block in a row item after the row's leader is measured with its own item, never against its container. */
+const follower = (b: EdgeBlockV2): boolean => b.follows !== undefined;
+const vOverlap = (a: EdgeBlockV2, b: EdgeBlockV2): boolean => Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 1;
+
+/**
+ * Judge one captured width under the v2 rule. `cardContent` is the card's own content box from the probe;
+ * `placeholdersOnly`: the frame shows only loading placeholders, so the row is not evaluated.
+ */
+export function judgeEdgesV2(
+  measured: readonly EdgeBlockV2[],
+  opts: { readonly cardContent: CardContentBox; readonly placeholdersOnly?: boolean },
+): EdgeVerdict {
+  if (opts.placeholdersOnly === true) return { verdict: 'n/a', offsets: [], evidence: 'only loading placeholders are shown; not evaluated' };
+  const content = measured.filter((b) => b.role !== 'placeholder' && (b.kind === 'text' || b.kind === 'controls')).length;
+  if (content < 2) return { verdict: 'n/a', offsets: [], evidence: measured.length === 0 ? 'no blocks were measured' : 'fewer than two blocks once placeholders are set aside; not evaluated' };
+  const byId = new Map(measured.map((b) => [b.id, b]));
+  const containerOf = (b: EdgeBlockV2): string => b.within ?? CARD;
+  const contentBoxOf = (container: string): CardContentBox | undefined => {
+    if (container === CARD) return opts.cardContent;
+    const s = byId.get(container);
+    return s?.contentLeft !== undefined && s.contentRight !== undefined ? { left: s.contentLeft, right: s.contentRight } : undefined;
+  };
+  // A placeholder leads its row when a block of its container follows it on its line; otherwise it is not a block (v1).
+  const leadsARow = (p: EdgeBlockV2): boolean => measured.some((b) => b !== p && containerOf(b) === containerOf(p) && follower(b) && b.left >= p.right - 1 && vOverlap(b, p));
+  // Rule 4 (re-registered): media is a painted image, or a painted box with no control inside, that is the only block
+  // on its line in its container; it may centre in its column, and its own content may centre inside it.
+  const holdsControl = (s: EdgeBlockV2): boolean => {
+    const inside = (b: EdgeBlockV2): boolean => { for (let w = b.within; w !== undefined; w = byId.get(w)?.within) if (w === s.id) return true; return false; };
+    return measured.some((b) => b.kind === 'controls' && inside(b));
+  };
+  const aloneOnItsLine = (m: EdgeBlockV2): boolean =>
+    !measured.some((b) => b !== m && containerOf(b) === containerOf(m) && b.role !== 'placeholder' && vOverlap(b, m));
+  // Centred, and narrower than its column: a box that starts on its container's content edge is full width, not centred.
+  const centredInContainer = (m: EdgeBlockV2): boolean => {
+    const box = contentBoxOf(containerOf(m));
+    return box !== undefined && same((m.left + m.right) / 2, (box.left + box.right) / 2) && !same(m.left, box.left);
+  };
+  const mediaKind = (b: EdgeBlockV2): boolean => b.kind === 'media' || (b.kind === 'surface' && b.role !== 'table' && !holdsControl(b));
+  const blocks = measured.filter((b) => {
+    if (b.role === 'placeholder') return leadsARow(b);
+    if (b.kind === 'media' && centredInContainer(b)) return false;
+    return true;
+  });
+
+  // A surface that bleeds to the card's own edge (x0, full width): its outer edge is the card's, not a content edge,
+  // so it is compared by its content edge alone (the design lead, c.6263664713: the root's content edge against every
+  // bleeding surface's content).
+  const bleeds = (b: EdgeBlockV2): boolean => b.kind === 'surface' && containerOf(b) === CARD && b.left <= EDGE_TOLERANCE_PX && b.right >= opts.cardContent.right - EDGE_TOLERANCE_PX;
+  const judged = blocks.map((b) => (bleeds(b) && b.contentLeft !== undefined ? { ...b, edge: b.contentLeft } : b));
+  // Rule 2, trailing: a block alone on its line that ends on its container's right content edge is right-anchored.
+  // A trailing item trails: it starts in the right half of its container's content box, and is never a bleed.
+  const rightAnchored = (b: EdgeBlockV2): boolean => {
+    const box = contentBoxOf(containerOf(b));
+    const ends = (r: number | undefined): boolean => r !== undefined && same(b.right, r);
+    return (ends(box?.right) || ends(b.parentRight)) && box !== undefined && b.left >= (box.left + box.right) / 2 && !bleeds(b);
+  };
+  const offsets: EdgeOffset[] = [];
+  const containers = [CARD, ...judged.filter((b) => b.kind === 'surface' && b.role !== 'table').map((b) => b.id)];
+  for (const container of containers) {
+    const inContainer = judged.filter((b) => containerOf(b) === container);
+    // The container's own column: its blocks that lead (or are not in) a row, less right-anchored trailing items.
+    const direct = inContainer.filter((b) => !follower(b) && !rightAnchored(b));
+    for (const col of columns(direct)) {
+      // Rule 4: media alone in its column, centred in its container, may centre (the design lead, c.6282971546). A
+      // lone block of any kind passes its own column; this only exempts the media from its NEIGHBOURS' column, which
+      // is how a centred cover beside or above edge-aligned text reaches a column at all.
+      const only = col.length === 1 ? col[0]! : undefined;
+      if (only !== undefined && mediaKind(only) && aloneOnItsLine(only) && centredInContainer(only)) continue;
+      offsets.push(...checkColumn(container, col, judged));
+    }
+    // Each row item after a leader is its own column group, measured among its own blocks.
+    const items = new Map<string, EdgeBlockV2[]>();
+    for (const b of inContainer.filter(follower)) items.set(b.item ?? b.id, [...(items.get(b.item ?? b.id) ?? []), b]);
+    for (const [item, group] of items) for (const col of columns(group)) offsets.push(...checkColumn(`${container} › ${item}`, col, judged));
+  }
+  if (offsets.length === 0) return { verdict: 'pass', offsets, evidence: 'every column shares its content edge, every row item after its leader shares its own, within 2 px' };
+  const worst = offsets.reduce((a, b) => (b.offPx > a.offPx ? b : a));
+  const lines = offsets.map((o) => `${o.block} at x${round(o.at)} is ${round(o.offPx)} px from x${round(o.nearest)} (in ${o.container}${o.reason !== undefined ? `; ${o.reason}` : ''})`);
+  return { verdict: 'fail', offsets, evidence: `${offsets.length} block(s) off the allowed edges, largest ${round(worst.offPx)} px: ${lines.join('; ')}` };
+}
+const round = (n: number): string => (Math.round(n * 10) / 10).toString();