@litfamily/litopencode 1.0.31 → 1.0.33

package/skills/frontend-ui-ux/scripts/probe-lock.mjs

@@ -0,0 +1,235 @@
+// Design-lock conformance for the interface probe (DS-001..DS-008). The rule table and the lock
+// lookup run in Node; measureLock runs in the page. probe.mjs serialises measureLock into the
+// browser, so that one function may not import anything or close over module scope: every
+// threshold comes from DS_RULES through `options.rules`, and the lock arrives as `options.lock`.
+import { existsSync, readFileSync, statSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+
+export const LOCK_SCHEMA = "litopencode.design-lock/v1";
+export const LOCK_FILE = "design.lock.json";
+export const LOCK_LIMITS = Object.freeze({ findingsPerRule: 12, nodes: 3000, textChars: 4000 });
+
+// These run only when the page's directory holds a design.lock.json written by
+// scripts/design-lock.mjs, or when --lock names one. The lock is the run's own declaration, so
+// drifting from it is a defect the build introduced.
+export const DS_RULES = Object.freeze({
+  "DS-001": { title: "Design lock not applied", severity: "HIGH", tier: "measured", threshold: { property: "--ui-lock" }, fix: "Link ui/tokens.css (written by scripts/design-lock.mjs) before any other stylesheet so the page renders the locked style." },
+  "DS-002": { title: "Font family outside the lock", severity: "HIGH", tier: "measured", threshold: null, fix: "Use var(--font-text), var(--font-display) or var(--font-mono); a new family needs a new lock, not a page rule." },
+  "DS-003": { title: "Colour outside the locked palette", severity: "HIGH", tier: "measured", threshold: { channelTolerance: 8, minAlpha: 0.05, highCount: 4, lowSeverity: "MEDIUM" }, fix: "Replace the literal colour with the var(--c-*) role that means the same thing; a colour with no role is a decoration to delete." },
+  "DS-004": { title: "Font size off the locked scale", severity: "MEDIUM", tier: "measured", threshold: { tolerancePx: 0.5 }, fix: "Use a var(--fs-*) step, or var(--fs-display) for the one display title." },
+  "DS-005": { title: "Corner radius off the lock", severity: "LOW", tier: "measured", threshold: { tolerancePx: 0.5 }, fix: "Use a var(--radius-*) value (inner radius one step below its container) or make it fully round." },
+  "DS-006": { title: "Starter slot left in the page", severity: "HIGH", tier: "measured", threshold: { pattern: "\\{\\{(?! )[^{}\\n]{1,80}(?<! )\\}\\}" }, fix: "Replace every {{slot}} from the kit layout with real content, or delete the element that holds it." },
+  "DS-007": { title: "Elevation outside the lock grammar", severity: "MEDIUM", tier: "measured", threshold: { hairlinePx: 1 }, fix: "Use var(--shadow-raised), var(--shadow-overlay) or var(--shadow-control): a flat lock takes no blurred or offset shadow, an offset lock takes no blurred one." },
+  "DS-008": { title: "Signature moment missing, buried or generic", severity: "HIGH", tier: "measured", threshold: { attribute: "data-ui-moment", boldMinAreaPx: 40000, smallMinAreaPx: 4800, smallMaxViewportShare: 0.5, foldMinViewportPx: 1024, foldMinVisiblePx: 120, phoneScreens: 1.5, coverShare: 0.5, needs: { "hero-composition": "media", "type-set-piece": "display-type", "data-moment": "data", diagram: "media", "motion-detail": "motion", "interactive-object": "control", chart: "data", "empty-state": null, "header-detail": null }, media: "svg, img, canvas, video, picture, figure, table, [role=\"img\"], .ui-pixel, .ui-frame, .ui-readout, .ui-panel, .ui-chart, .ui-meter, .ui-sticker, .ui-bignum", data: "svg, canvas, table, [role=\"img\"], .ui-chart, .ui-meter, .ui-readout, .ui-bignum", control: "input, select, textarea, details, [role=\"slider\"], [role=\"switch\"], [role=\"tab\"], [aria-pressed], [aria-expanded]" }, fix: "Record the page's one signature moment with design-lock.mjs (--moment or the moment command), build it from this page's content, mark that element with data-ui-moment=\"<kind>\", and keep a read-once page's moment in the first screen." },
+});
+
+// The design lock beside the page (or named by --lock) turns the DS-* rules on. A lock that cannot
+// be read is reported, never silently skipped.
+export function findLock(entry, source, explicit) {
+  const dirs = [entry && dirname(entry), source && (existsSync(source) && statSync(source).isFile() ? dirname(source) : source)].filter(Boolean);
+  const candidates = explicit ? [resolve(explicit)] : dirs.map((dir) => join(dir, LOCK_FILE));
+  const path = candidates.find((candidate) => existsSync(candidate));
+  if (!path) return { lock: null, path: null, error: explicit ? `lock not found: ${explicit}` : null };
+  try {
+    const lock = JSON.parse(readFileSync(path, "utf8"));
+    if (lock.schema_id !== LOCK_SCHEMA || typeof lock.style !== "string") return { lock: null, path, error: `${LOCK_FILE} is not a ${LOCK_SCHEMA} file` };
+    return { lock, path, error: null };
+  } catch (error) {
+    return { lock: null, path, error: `${LOCK_FILE} unreadable: ${error.message}` };
+  }
+}
+
+// In-page conformance. Keep everything below this line self-contained.
+export function measureLock(options) {
+  const { rules, limits, lock } = options;
+  const findings = [];
+  const notVerified = [];
+  const push = (rule, selector, value, threshold, severity) => {
+    if (findings.filter((f) => f.rule === rule).length >= limits.findingsPerRule) return;
+    findings.push({ rule, severity: severity ?? rules[rule].severity, tier: rules[rule].tier, selector, value, threshold });
+  };
+  const describe = (el) => {
+    if (el.id) return `#${el.id}`;
+    const cls = [...el.classList].slice(0, 2).map((c) => `.${c}`).join("");
+    return `${el.tagName.toLowerCase()}${cls}`;
+  };
+  const exempt = (el) => Boolean(el.closest("[data-lock-exempt], img, video, canvas, iframe, picture, object"));
+  const visible = (el) => {
+    if (typeof el.checkVisibility === "function" && !el.checkVisibility({ checkOpacity: false, checkVisibilityCSS: true })) return false;
+    const box = el.getBoundingClientRect();
+    return box.width >= 1 && box.height >= 1;
+  };
+
+  // DS-001: the generated tokens.css carries the lock id on :root.
+  const applied = getComputedStyle(document.documentElement).getPropertyValue(rules["DS-001"].threshold.property).trim().replace(/^["']|["']$/gu, "");
+  if (applied !== lock.style) {
+    push("DS-001", ":root", applied ? `${rules["DS-001"].threshold.property}: ${applied}` : `${rules["DS-001"].threshold.property} missing`, `"${lock.style}" from design.lock.json`);
+    return { findings, notVerified };
+  }
+
+  const parse = (value) => {
+    let match = /^rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)$/u.exec(value);
+    if (match) return { rgb: [Number(match[1]), Number(match[2]), Number(match[3])], alpha: match[4] === undefined ? 1 : Number(match[4]) };
+    match = /^color\(srgb\s+([-\d.e]+)\s+([-\d.e]+)\s+([-\d.e]+)(?:\s*\/\s*([\d.]+))?\)$/u.exec(value);
+    if (match) return { rgb: [match[1], match[2], match[3]].map((n) => Math.round(Number(n) * 255)), alpha: match[4] === undefined ? 1 : Number(match[4]) };
+    return null;
+  };
+  const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const palette = [...Object.values(lock.colors.light), ...Object.values(lock.colors.dark)].map(hex);
+  const tolerance = rules["DS-003"].threshold.channelTolerance;
+  const onPalette = (rgb) => palette.some((p) => Math.abs(p[0] - rgb[0]) <= tolerance && Math.abs(p[1] - rgb[1]) <= tolerance && Math.abs(p[2] - rgb[2]) <= tolerance);
+  const toHex = (rgb) => `#${rgb.map((n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0")).join("")}`;
+  const families = new Set(lock.fonts.map((f) => f.toLowerCase()));
+  const sizes = lock.type.scale_px;
+  const display = lock.type.display_px;
+  // Inside the declared signature moment type may run past the display range up to the lock's ceiling.
+  const momentMax = lock.type.moment_px?.max ?? display.max;
+  const momentAttr = rules["DS-008"].threshold.attribute;
+  const sizeTolerance = rules["DS-004"].threshold.tolerancePx;
+  const radii = lock.radius_px;
+  const radiusTolerance = rules["DS-005"].threshold.tolerancePx;
+
+  const offColours = new Map();
+  const offFamilies = new Map();
+  const offSizes = new Map();
+  const offRadii = new Map();
+  const offShadows = new Map();
+  let unparsed = 0;
+  // DS-007: the lock names an elevation grammar. "flat" allows only rings (no blur, no offset past a
+  // hairline); "offset" allows hard offsets but no blur; "soft" is left to CF-403. Insets never count.
+  const elevation = lock.elevation ?? "soft";
+  const hairline = rules["DS-007"].threshold.hairlinePx;
+  const shadowLengths = (value) => (value === "none" ? [] : value.split(/,(?![^()]*\))/u)).filter((part) => !/\binset\b/u.test(part))
+    .map((part) => part.replace(/\b(?:rgba?|color|hsla?|oklch|lab|lch)\([^)]*\)/gu, "").match(/-?[\d.]+px/gu)?.map(Number.parseFloat) ?? []);
+  const noteColour = (value, el, where) => {
+    const colour = parse(value);
+    if (!colour) { if (value !== "transparent" && value !== "none") unparsed += 1; return; }
+    if (colour.alpha < rules["DS-003"].threshold.minAlpha || onPalette(colour.rgb)) return;
+    const key = toHex(colour.rgb);
+    if (!offColours.has(key)) offColours.set(key, `${describe(el)} ${where}`);
+  };
+
+  const elements = [...document.body.querySelectorAll("*")].slice(0, limits.nodes);
+  for (const el of elements) {
+    if (exempt(el) || !visible(el)) continue;
+    const style = getComputedStyle(el);
+    const isSvgShape = el instanceof SVGElement && !(el instanceof SVGSVGElement);
+    if (isSvgShape) {
+      if (["rect", "path", "circle", "ellipse", "polygon", "polyline", "line"].includes(el.tagName.toLowerCase())) {
+        if (style.fill !== "none") noteColour(style.fill, el, "fill");
+        if (style.stroke !== "none") noteColour(style.stroke, el, "stroke");
+      }
+      continue;
+    }
+    const ownText = [...el.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim());
+    if (ownText) {
+      noteColour(style.color, el, "text");
+      const family = style.fontFamily.split(",")[0].trim().replace(/^["']|["']$/gu, "").toLowerCase();
+      if (!families.has(family) && !offFamilies.has(family)) offFamilies.set(family, describe(el));
+      const px = Number.parseFloat(style.fontSize);
+      const ceiling = el.closest(`[${momentAttr}]`) ? momentMax : display.max;
+      const onScale = sizes.some((s) => Math.abs(s - px) <= sizeTolerance) || (px >= display.min - sizeTolerance && px <= ceiling + sizeTolerance);
+      if (!onScale && !offSizes.has(px)) offSizes.set(px, describe(el));
+    }
+    noteColour(style.backgroundColor, el, "background");
+    for (const side of ["Top", "Right", "Bottom", "Left"]) {
+      if (Number.parseFloat(style[`border${side}Width`]) > 0 && style[`border${side}Style`] !== "none") noteColour(style[`border${side}Color`], el, "border");
+    }
+    if (elevation !== "soft") {
+      for (const [x = 0, y = 0, blur = 0] of shadowLengths(style.boxShadow)) {
+        const offset = Math.abs(x) > hairline || Math.abs(y) > hairline;
+        if ((blur > 0 || (elevation === "flat" && offset)) && !offShadows.has(describe(el))) offShadows.set(describe(el), `${x}px ${y}px ${blur}px`);
+      }
+    }
+    const box = el.getBoundingClientRect();
+    for (const corner of ["TopLeft", "TopRight", "BottomRight", "BottomLeft"]) {
+      const raw = style[`border${corner}Radius`];
+      if (!raw || raw.includes(" ") || raw.includes("%")) continue;
+      const r = Number.parseFloat(raw);
+      if (!(r > 0)) continue;
+      const round = r >= Math.min(box.width, box.height) / 2 - radiusTolerance;
+      if (!round && !radii.some((v) => Math.abs(v - r) <= radiusTolerance) && !offRadii.has(r)) offRadii.set(r, describe(el));
+    }
+  }
+
+  for (const [family, where] of offFamilies) push("DS-002", where, `font-family "${family}"`, `one of ${lock.fonts.join(", ")}`);
+  if (offColours.size) {
+    const list = [...offColours.entries()];
+    const severity = list.length >= rules["DS-003"].threshold.highCount ? "HIGH" : rules["DS-003"].threshold.lowSeverity;
+    push("DS-003", list.slice(0, 4).map(([, where]) => where).join(" | "), `${list.length} off-palette colour(s): ${list.slice(0, 8).map(([c]) => c).join(", ")}`, `the ${lock.style} palette (light and dark roles)`, severity);
+  }
+  if (offSizes.size) push("DS-004", [...offSizes.values()].slice(0, 3).join(" | "), `${offSizes.size} size(s) off scale: ${[...offSizes.keys()].slice(0, 8).map((n) => `${n}px`).join(", ")}`, `${sizes.join("/")}px or display ${display.min}–${display.max}px`);
+  if (offRadii.size) push("DS-005", [...offRadii.values()].slice(0, 3).join(" | "), `${offRadii.size} radius value(s) off lock: ${[...offRadii.keys()].slice(0, 6).map((n) => `${n}px`).join(", ")}`, `${radii.join("/")}px or fully round`);
+  if (offShadows.size) push("DS-007", [...offShadows.keys()].slice(0, 3).join(" | "), `${offShadows.size} element(s) with ${[...offShadows.values()].slice(0, 3).join(", ")} shadows`, elevation === "flat" ? "flat lock: rings only, no blur or offset" : "offset lock: zero-blur offsets only");
+  if (unparsed) notVerified.push({ rule: "DS-003", reason: `${unparsed} colour value(s) in a format the probe cannot compare` });
+
+  // DS-006: a starter-layout slot such as {{Product}} left in visible text or a labelling attribute.
+  const slot = new RegExp(rules["DS-006"].threshold.pattern, "u");
+  const textHit = slot.exec(document.body.innerText.slice(0, limits.textChars * 10));
+  if (textHit) push("DS-006", "page text", textHit[0], "no {{slot}} from the kit layouts");
+  for (const el of document.querySelectorAll("[title], [aria-label], [alt], [placeholder]")) {
+    for (const attr of ["title", "aria-label", "alt", "placeholder"]) {
+      const value = el.getAttribute(attr);
+      const hit = value && slot.exec(value);
+      if (hit) push("DS-006", `${describe(el)}[${attr}]`, hit[0], "no {{slot}} from the kit layouts");
+    }
+  }
+  const title = slot.exec(document.title);
+  if (title) push("DS-006", "title", title[0], "no {{slot}} from the kit layouts");
+
+  // DS-008: the one signature moment the lock declares. It must be declared, marked, big enough to
+  // read, in the first screen on a read-once page, hold what its kind promises, and not be the
+  // generic gradient-and-centred-text hero.
+  const m = rules["DS-008"].threshold;
+  const declared = lock.moment;
+  if (!declared) {
+    push("DS-008", "design.lock.json", "the lock predates signature moments and records none", "a moment recorded with design-lock.mjs moment");
+    return { findings, notVerified };
+  }
+  if (!declared.kind) {
+    push("DS-008", "design.lock.json", "the lock declares no signature moment", `a ${declared.scale} moment recorded with design-lock.mjs moment`);
+    return { findings, notVerified };
+  }
+  const marked = [...document.querySelectorAll(`[${m.attribute}]`)].filter(visible);
+  if (!marked.length) {
+    push("DS-008", "page", `no [${m.attribute}] element for the declared ${declared.kind}`, `one element marked ${m.attribute}="${declared.kind}"`);
+    return { findings, notVerified };
+  }
+  if (marked.length > 1) push("DS-008", marked.slice(0, 3).map(describe).join(" | "), `${marked.length} elements claim the signature moment`, "one moment per page", "MEDIUM");
+  const el = marked.find((node) => node.getAttribute(m.attribute) === declared.kind) ?? marked[0];
+  const where = describe(el);
+  const kind = el.getAttribute(m.attribute);
+  if (kind !== declared.kind) push("DS-008", where, `marked "${kind}" but the lock declares "${declared.kind}"`, "the declared kind");
+  const box = el.getBoundingClientRect();
+  const area = box.width * box.height;
+  const minArea = declared.scale === "bold" ? m.boldMinAreaPx : m.smallMinAreaPx;
+  if (area < minArea) push("DS-008", where, `${Math.round(box.width)}×${Math.round(box.height)} px moment is too small to read as one`, `≥ ${minArea} px²`);
+  const base = options.pass === "base";
+  if (declared.scale === "small" && base && innerWidth >= m.foldMinViewportPx && area > m.smallMaxViewportShare * innerWidth * innerHeight) push("DS-008", where, `a work-surface moment covering ${Math.round((100 * area) / (innerWidth * innerHeight))}% of the screen`, `≤ ${m.smallMaxViewportShare * 100}%: work surfaces stay calm`, "MEDIUM");
+  if (declared.above_fold && base) {
+    const top = box.top + scrollY;
+    const wide = innerWidth >= m.foldMinViewportPx;
+    const limit = wide ? innerHeight - m.foldMinVisiblePx : innerHeight * m.phoneScreens;
+    if (top > limit) push("DS-008", where, `moment starts ${Math.round(top)} px down, below the fold`, wide ? `starts by ${Math.round(limit)} px (first screen)` : `starts within ${m.phoneScreens} screens (${Math.round(limit)} px)`);
+  }
+  const has = (selector) => el.matches(selector) || [...el.querySelectorAll(selector)].some(visible);
+  const media = has(m.media);
+  const inside = [el, ...el.querySelectorAll("*")].filter(visible);
+  const texts = inside.filter((node) => [...node.childNodes].some((child) => child.nodeType === Node.TEXT_NODE && child.textContent.trim()));
+  const need = m.needs[declared.kind];
+  const wants = {
+    media: ["an image, drawing, figure, frame or product view", () => media],
+    data: ["chart, table, figure or readout", () => has(m.data)],
+    control: ["control a reader can operate", () => has(m.control)],
+    "display-type": ["type at display size or above", () => texts.some((node) => Number.parseFloat(getComputedStyle(node).fontSize) >= display.min - sizeTolerance)],
+    motion: ["animation or transition", () => options.pass === "reduced-motion" || inside.some((node) => { const cs = getComputedStyle(node); return cs.animationName !== "none" || cs.transitionDuration.split(",").some((d) => Number.parseFloat(d) > 0); })],
+  }[need];
+  if (wants && !wants[1]()) push("DS-008", where, `declared ${declared.kind} but it holds no ${wants[0]}`, `a ${declared.kind} built from the page's content`);
+  const gradient = (node) => /gradient\(/u.test(getComputedStyle(node).backgroundImage) && !node.matches(".ui-scan, .ui-ruler");
+  const chain = [];
+  for (let node = el; node && node !== document.body && node !== document.documentElement; node = node.parentElement) chain.push(node);
+  const behind = chain.some(gradient) || inside.some((node) => { const b = node.getBoundingClientRect(); return gradient(node) && b.width * b.height >= m.coverShare * area; });
+  const biggest = texts.reduce((best, node) => (Number.parseFloat(getComputedStyle(node).fontSize) > (best ? Number.parseFloat(getComputedStyle(best).fontSize) : 0) ? node : best), null);
+  if (behind && !media && biggest && getComputedStyle(biggest).textAlign === "center") push("DS-008", where, "a generic gradient-and-centred-text hero", "a moment built from this page's content (composition, set piece, data, diagram, motion or object)");
+  return { findings, notVerified };
+}

package/skills/frontend-ui-ux/scripts/probe-page.mjs

@@ -19,7 +19,9 @@ export function inspectPage(viewport, t, state = {}) {
   const color = (value) => {
     const hex = value?.match(/^#([\da-f]{3}|[\da-f]{6})$/iu);
     if (hex) { const raw = hex[1].length === 3 ? [...hex[1]].map((digit) => digit + digit).join('') : hex[1]; return { c: [0, 2, 4].map((index) => Number.parseInt(raw.slice(index, index + 2), 16)), a: 1 }; }
-    const n = value?.match(/[\d.]+/gu)?.map(Number); return n?.length >= 3 ? { c: n.slice(0, 3), a: n[3] ?? 1 } : null;
+    // color-mix() and relative colours compute to color(srgb r g b / a) with 0 to 1 channels; other spaces are not sampled.
+    if (/^(?:color\((?!srgb[ )])|lab\(|lch\(|oklab\(|oklch\()/iu.test(value ?? '')) return null;
+    const n = value?.match(/[\d.]+/gu)?.map(Number), unit = /^color\(srgb /iu.test(value ?? '') ? 255 : 1; return n?.length >= 3 ? { c: n.slice(0, 3).map((v) => v * unit), a: n[3] ?? 1 } : null;
   };
   const luminance = (channels) => { const c = channels.map((n) => { const v = n / 255; return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4; }); return .2126 * c[0] + .7152 * c[1] + .0722 * c[2]; };
   const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + .05) / (Math.min(luminance(a), luminance(b)) + .05);
@@ -38,7 +40,7 @@ export function inspectPage(viewport, t, state = {}) {
   const gradientStops = (el) => {
     for (let node = el; node; node = node.parentElement) {
       const css = getComputedStyle(node), paint = color(css.backgroundColor);
-      if (/gradient\(/iu.test(css.backgroundImage)) return [...css.backgroundImage.matchAll(/rgba?\([^)]*\)|#[\da-f]{3,6}\b/giu)].map((match) => color(match[0])).filter(Boolean);
+      if (/gradient\(/iu.test(css.backgroundImage)) return [...css.backgroundImage.matchAll(/rgba?\([^)]*\)|#[\da-f]{3,6}\b/giu)].map((match) => color(match[0])).filter((stop) => stop && stop.a >= .5);
       if (css.backgroundImage !== 'none' || paint && paint.a * Number(css.opacity) >= .99) break;
     }
     return [];
@@ -63,7 +65,7 @@ export function inspectPage(viewport, t, state = {}) {
     if (state.zoomEmulation) add('RS-004', 'HIGH', 'derived', null, overflow, t.pageOverflowTolerancePx);
   }
   const elements = [...document.querySelectorAll('body *')].slice(0, 3000).filter(visible);
-  const textElements = [], hues = [], accentSamples = [], targets = [], spacing = [], fontFamilies = new Set(), roles = new Set(), eyebrows = [], glows = [], stripes = [], tileGrids = [];
+  const textElements = [], gradientText = [], hues = [], accentSamples = [], targets = [], spacing = [], fontFamilies = new Set(), roles = new Set(), eyebrows = [], glows = [], stripes = [], tileGrids = [];
   const destructive = /\b(?:delete|remove|destroy|erase|discard|삭제|제거|폐기)\b/iu;
   const isTarget = (el) => el.matches('button,a[href],input,select,textarea,[role="button"]');
   const firstFilled = elements.find((el) => isTarget(el) && el.getBoundingClientRect().top < innerHeight && el.matches('button,a,[role="button"]') && color(getComputedStyle(el).backgroundColor)?.a > .5);
@@ -85,8 +87,10 @@ export function inspectPage(viewport, t, state = {}) {
         if (!/mono/u.test(family) && !/tabular-nums/u.test(css.fontVariantNumeric) && !/["'](?:tnum|lnum)["']\s*1/u.test(css.fontFeatureSettings)) add('CF-106', 'LOW', 'measured', el, css.fontVariantNumeric, 'tabular numerals');
       }
       const rects = textRects(el);
+      // A strip that scrolls sideways inside its own box (a tab or nav row) keeps its overflow reachable.
+      const inScroller = (() => { for (let p = el.parentElement; p && p !== document.body && p !== document.documentElement; p = p.parentElement) if (/(auto|scroll)/u.test(getComputedStyle(p).overflowX) && p.scrollWidth > p.clientWidth) return true; return false; })();
       const clipped = rects.some((r) => {
-        if (r.left < -t.clippedTextTolerancePx || r.right > innerWidth + t.clippedTextTolerancePx) return true;
+        if (!inScroller && (r.left < -t.clippedTextTolerancePx || r.right > innerWidth + t.clippedTextTolerancePx)) return true;
         for (let parent = el; parent; parent = parent.parentElement) {
           const pc = getComputedStyle(parent);
           if (!/(hidden|clip)/u.test(`${pc.overflowX} ${pc.overflowY}`) || pc.textOverflow === 'ellipsis' || Number.parseInt(pc.webkitLineClamp, 10) > 0 || Number.parseInt(pc.lineClamp, 10) > 0) continue;
@@ -107,7 +111,8 @@ export function inspectPage(viewport, t, state = {}) {
         const size = Number.parseFloat(css.fontSize), large = size >= t.largeTextPx || (size >= t.boldLargeTextPx && Number.parseFloat(css.fontWeight) >= 700);
         const floor = large ? t.largeTextContrast : t.smallTextContrast;
         if (value < floor) add('CF-201', large ? 'MEDIUM' : 'HIGH', 'derived', el, Number(value.toFixed(2)), floor);
-      } else if (!el.closest(':disabled,[aria-disabled="true"]')) {
+      } else if (!el.closest(':disabled,[aria-disabled="true"]') && !((css.backgroundClip === 'text' || css.webkitBackgroundClip === 'text') && /gradient\(/iu.test(css.backgroundImage))) {
+        // Gradient text paints its own gradient; SLOP-009 checks the stops against the surface.
         const stops = !obscured && fg ? gradientStops(el) : [];
         if (stops.length) {
           const size = Number.parseFloat(css.fontSize), large = size >= t.largeTextPx || size >= t.boldLargeTextPx && Number.parseFloat(css.fontWeight) >= 700;
@@ -134,7 +139,7 @@ export function inspectPage(viewport, t, state = {}) {
       if (flourishDashes) add('SLOP-040', 'MEDIUM', 'measured', el, flourishDashes.length, 0);
       if (/\b(?:unleash|revolutionize|transformative platform|seamless experience|next.gen)\b/iu.test(text)) add('SLOP-036', 'MEDIUM', 'measured', el, text.slice(0, 120), 'specific claim');
       if (/\b(?:lorem ipsum|\[placeholder\]|\[todo\]|todo:)\b/iu.test(text)) add('SLOP-060', 'LOW', 'measured', el, text.slice(0, 120), 'finished copy');
-      if (el.matches('button,a,label,[role="button"],nav *') && /^\p{Lu}[\p{L}]+(?:\s+\p{Lu}[\p{L}]+)+$/u.test(text) && !/\bExample\b/u.test(text)) add('CF-107', 'LOW', 'derived', el, text, 'sentence case');
+      if (el.matches('button,a,label,[role="button"],nav *') && !el.matches('[class*="brand"],[class*="logo"]') && /^\p{Lu}[\p{L}]+(?:\s+\p{Lu}\p{Ll}[\p{L}]*)+$/u.test(text) && !/\bExample\b/u.test(text)) add('CF-107', 'LOW', 'derived', el, text, 'sentence case');
       if (el.nextElementSibling?.matches('h1,h2,h3') && css.textTransform === 'uppercase' && Number.parseFloat(css.letterSpacing) > 0 && Number.parseFloat(css.fontSize) < Number.parseFloat(getComputedStyle(el.nextElementSibling).fontSize) * .65) eyebrows.push(el);
       if (el.matches('button,a,[role="button"]') && /^[\p{Extended_Pictographic}\uFE0F\s]+$/u.test(text) && box.width <= 32) add('SLOP-053', 'LOW', 'derived', el, text, 'named icon set');
     }
@@ -145,7 +150,9 @@ export function inspectPage(viewport, t, state = {}) {
       const fg = color(getComputedStyle(el, '::placeholder').color), bg = background(el);
       if (fg && bg) { const value = contrast(fg.c, bg); if (value < t.smallTextContrast) add('CF-807', 'MEDIUM', 'derived', el, Number(value.toFixed(2)), t.smallTextContrast); }
     }
-    if (el.matches('a[href]') && /^(#|javascript:)/iu.test(el.getAttribute('href')?.trim() ?? '')) add('SLOP-058', el.closest('nav') || el.classList.contains('primary') ? 'HIGH' : 'MEDIUM', 'derived', el, el.getAttribute('href'), 'real destination');
+    // A bare "#" or a javascript: URL goes nowhere; an in-page "#section" is real when the target exists.
+    const href = el.matches('a[href]') ? el.getAttribute('href').trim() : '', fragment = href.length > 1 && href.startsWith('#') ? href.slice(1) : null;
+    if (el.matches('a[href]') && (/^(#|javascript:)/iu.test(href) && fragment === null || fragment !== null && !document.getElementById(fragment) && !document.getElementsByName(fragment).length)) add('SLOP-058', el.closest('nav') || el.classList.contains('primary') ? 'HIGH' : 'MEDIUM', 'derived', el, el.getAttribute('href'), 'real destination');
     if (el.matches('button:not([type])') && el.form && [...el.form.querySelectorAll('button,input[type="submit"],input[type="image"]'), ...document.querySelectorAll(`button[form="${CSS.escape(el.form.id)}"]`)].filter((button) => button.form === el.form && (button.matches('button:not([type]),button[type="submit"],input[type="submit"],input[type="image"]'))).length >= 2) add('SLOP-059', 'HIGH', 'derived', el, 'implicit submit among submit-capable controls', 'explicit button or submit');
     if (el.matches('img')) {
       const source = el.getAttribute('src') || el.getAttribute('srcset');
@@ -168,7 +175,7 @@ export function inspectPage(viewport, t, state = {}) {
       const accessibleName = el.getAttribute('aria-label')?.trim() || labelledBy || el.getAttribute('title')?.trim() || el.innerText?.trim() || el.querySelector('img[alt]')?.getAttribute('alt')?.trim() || el.labels?.[0]?.textContent?.trim() || el.getAttribute('value')?.trim();
       if (!accessibleName && !el.matches('input[type="hidden"]')) add('CF-603', 'HIGH', 'derived', el, 'no accessible name', 'accessible name');
     }
-    if ((css.backgroundClip === 'text' || css.webkitBackgroundClip === 'text') && /gradient\(/iu.test(css.backgroundImage)) add('SLOP-009', 'MEDIUM', 'measured', el, css.backgroundImage.slice(0, 100), 'solid text');
+    if ((css.backgroundClip === 'text' || css.webkitBackgroundClip === 'text') && /gradient\(/iu.test(css.backgroundImage)) gradientText.push({ el, css });
     if (/repeating-(?:linear|radial)-gradient/iu.test(css.backgroundImage) && !el.closest('figure,[role="img"]') && !el.querySelector('canvas,svg,table')) {
       const section = el.closest('section') ?? el;
       if (section.querySelector('[class*="blob"],[class*="halo"]') || /(?:rgb|hsl)a?\([^)]*(?:22\d|2[3-7]\d)/iu.test(css.backgroundImage)) add('SLOP-012', 'MEDIUM', 'derived', el, css.backgroundImage.slice(0, 100), 'data-linked grid');
@@ -208,8 +215,17 @@ export function inspectPage(viewport, t, state = {}) {
   }
   if (fontFamilies.size > t.fontFamilyMax) add('SLOP-019', 'MEDIUM', 'derived', null, [...fontFamilies], t.fontFamilyMax);
   if (viewport === '390' && roles.size > t.typeRoleMax) add('CF-108', 'MEDIUM', 'derived', null, [...roles], t.typeRoleMax);
-  if (glows.length >= t.glowRepeatMin) add('SLOP-010', 'MEDIUM', 'derived', glows[0], glows.length, 1);
-  if (stripes.some((row) => row.inset) || stripes.length >= t.stripeRepeatMin) add('SLOP-015', 'MEDIUM', 'derived', stripes[0].el, stripes.length, 'no decorative stripe');
+  if (glows.length >= t.glowRepeatMin) add('SLOP-010', 'MEDIUM', 'derived', glows[0], glows.length, `fewer than ${t.glowRepeatMin} repeated halos`);
+  if (stripes.filter((row) => row.inset).length >= t.stripeInsetRepeatMin || stripes.length >= t.stripeRepeatMin) add('SLOP-015', 'MEDIUM', 'derived', stripes[0].el, stripes.length, `fewer than ${t.stripeRepeatMin} accent stripes (inset form: ${t.stripeInsetRepeatMin})`);
+  // One gradient headline in the palette's own hues is craft. The reflex is a violet stop, the effect repeated across the page, or a stop the text cannot be read on.
+  for (const { el, css } of gradientText) {
+    const surface = background(el.parentElement ?? el), stops = [...css.backgroundImage.matchAll(/rgba?\([^)]*\)|#[\da-f]{3,6}\b/giu)].map((match) => color(match[0])).filter((stop) => stop && stop.a >= .1);
+    const floor = Number.parseFloat(css.fontSize) >= t.largeTextPx ? t.gradientTextLargeStopContrast : t.gradientTextStopContrast;
+    const weakest = surface && stops.length ? Math.min(...stops.map((stop) => contrast(stop.c.map((value, index) => stop.a * value + (1 - stop.a) * surface[index]), surface))) : null;
+    const violet = stops.some((stop) => Math.max(...stop.c) - Math.min(...stop.c) >= t.bannedAccentSpreadMin && hsl(stop.c).h >= t.bannedAccentHueMin && hsl(stop.c).h <= t.bannedAccentHueMax);
+    const reason = violet ? 'a violet stop' : gradientText.length > t.gradientTextMaxElements ? `${gradientText.length} gradient-filled text elements` : weakest !== null && weakest < floor ? `a stop at ${weakest.toFixed(2)}:1` : null;
+    if (reason) add('SLOP-009', 'MEDIUM', 'measured', el, `${css.backgroundImage.slice(0, 80)} (${reason})`, `at most ${t.gradientTextMaxElements} gradient headline, palette hues, every stop at least ${floor}:1`);
+  }
   const sections = elements.filter((el) => el.tagName === 'SECTION');
   for (const heading of elements.filter((el) => /^H[1-6]$/u.test(el.tagName))) {
     let anchor = heading, previous = null;
@@ -262,7 +278,11 @@ export function inspectPage(viewport, t, state = {}) {
       const ca = getComputedStyle(a), cb = getComputedStyle(b);
       const painted = [ca, cb].some((css) => css.backgroundColor !== 'rgba(0, 0, 0, 0)' || Number.parseFloat(css.borderTopWidth) > 0);
       const floor = painted ? t.borderedBlockGapPx : t.borderlessBlockGapPx;
-      if (gap < floor && !a.contains(b) && !b.contains(a)) add('CF-303', 'MEDIUM', 'measured', b, Number(gap.toFixed(1)), floor);
+      // Full-bleed section bands carry their own padding, so a flush stack of them is the page rhythm, not a cramped pair.
+      const bleed = Math.min(ra.width, rb.width) >= innerWidth * .95 && /^(SECTION|HEADER|FOOTER)$/u.test(a.tagName) && /^(SECTION|HEADER|FOOTER)$/u.test(b.tagName);
+      // A heading and what it introduces, or the rows of a table, belong together; the spacing rule is for separate blocks.
+      const related = /^H[1-6]$/u.test(a.tagName) || /table/u.test(getComputedStyle(parent).display) || /^T(HEAD|BODY|FOOT)$/u.test(b.tagName);
+      if (gap < floor && !bleed && !related && !a.contains(b) && !b.contains(a)) add('CF-303', 'MEDIUM', 'measured', b, Number(gap.toFixed(1)), floor);
     }
     if (gaps.length >= 3) {
       const sorted = [...gaps].sort((a, b) => a - b), middle = sorted[Math.floor(sorted.length / 2)];
@@ -285,7 +305,9 @@ export function inspectPage(viewport, t, state = {}) {
   }
   const clusters = [];
   for (const hue of hues) if (!clusters.some((v) => Math.min(Math.abs(hue - v), 360 - Math.abs(hue - v)) <= t.accentHueToleranceDegrees)) clusters.push(hue);
-  if (clusters.length > 1) add('CF-205', 'MEDIUM', 'derived', null, clusters.length, 1, 'review separate status colours');
+  // Rich is the default register; a lock recorded as calm keeps the single-accent limit.
+  const clusterLimit = state.density === 'calm' ? t.accentClusterCalmMax : t.accentClusterMax;
+  if (clusters.length > clusterLimit) add('CF-205', 'MEDIUM', 'derived', null, clusters.length, clusterLimit, 'review separate status colours');
   const banned = accentSamples.filter((sample) => sample.hue >= t.bannedAccentHueMin && sample.hue <= t.bannedAccentHueMax);
   if (banned.length && new Set(banned.map((sample) => sample.el.closest('section') ?? sample.el.closest('main') ?? sample.el)).size < 2) add('SLOP-008', 'MEDIUM', 'derived', banned[0].el, Number(banned[0].hue.toFixed(1)), 'brand-consistent hue or alternate accent');
   for (let i = 0; i < Math.min(textElements.length, 150); i++) for (let j = i + 1; j < Math.min(textElements.length, 150); j++) {

package/skills/frontend-ui-ux/scripts/probe-static.mjs

@@ -17,7 +17,7 @@ export function staticScan(root, viewport = "static") {
   const findings = [];
   const base = root && existsSync(root) && statSync(root).isFile() ? dirname(root) : root;
   const signatures = [
-    ["SLOP-058", /href\s*=\s*["'](?:#|javascript:)[^"']*["']/giu, "MEDIUM", "real destination"],
+    ["SLOP-058", /href\s*=\s*["'](?:#|javascript:[^"']*)["']/giu, "MEDIUM", "real destination"],
     ["SLOP-057", /<img\b[^>]*src\s*=\s*["'](?:|#|undefined)["']/giu, "HIGH", "decodable source"],
     ["SLOP-009", /(?:background-clip|webkit-background-clip)\s*:\s*text[^}]{0,300}gradient\(/giu, "MEDIUM", "solid text"],
     ["SLOP-060", /lorem ipsum|\[placeholder\]|\[todo\]/giu, "LOW", "finished copy"],
@@ -29,14 +29,27 @@ export function staticScan(root, viewport = "static") {
     ["CF-507", /will-change\s*:\s*(?:all|width|height|left|top|margin|padding)/giu, "LOW", "transform, opacity or filter"],
     ["CF-508", /transition(?:-property)?\s*:[^;]*(?:width|height|padding|margin|top|left)/giu, "MEDIUM", "transform or opacity"],
   ];
+  const gradientText = [];
   for (const file of sourceFiles(root)) {
     const body = readFileSync(file, "utf8");
+    // A kit starter slot left in a page. Framework templates use {{ }} on purpose, so only HTML is read.
+    if ([".html", ".htm"].includes(extname(file))) {
+      for (const match of body.matchAll(/\{\{(?! )[^{}\n]{1,80}(?<! )\}\}/gu)) {
+        if (findings.filter((entry) => entry.rule === "DS-006").length >= 30) break;
+        findings.push({ rule: "DS-006", severity: "HIGH", tier: "derived", viewport, selector: `${relative(base, file)}:${body.slice(0, match.index).split("\n").length}`, value: match[0], threshold: "no {{slot}} from the kit layouts", note: "source signature; render not observed" });
+      }
+    }
     for (const [rule, pattern, severity, threshold] of signatures) {
       for (const match of body.matchAll(pattern)) {
-        if (findings.filter((row) => row.rule === rule).length >= 30) break;
-        findings.push({ rule, severity, tier: "derived", viewport, selector: `${relative(base, file)}:${body.slice(0, match.index).split("\n").length}`, value: match[0], threshold, note: "source signature; render not observed" });
+        const row = { rule, severity, tier: "derived", viewport, selector: `${relative(base, file)}:${body.slice(0, match.index).split("\n").length}`, value: match[0], threshold, note: "source signature; render not observed" };
+        if (rule === "SLOP-009") { gradientText.push(row); continue; }
+        if (findings.filter((entry) => entry.rule === rule).length >= 30) break;
+        findings.push(row);
       }
     }
   }
+  // Source alone cannot weigh contrast, so a static match is the violet form or a repeated one.
+  const violet = (row) => (row.value.match(/#[\da-f]{6}\b/giu) ?? []).some((hex) => { const [r, g, b] = [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16)); const hi = Math.max(r, g, b), lo = Math.min(r, g, b); if (hi - lo < 50) return false; const d = hi - lo; const h = ((hi === r ? ((g - b) / d) % 6 : hi === g ? (b - r) / d + 2 : (r - g) / d + 4) * 60 + 360) % 360; return h >= 260 && h <= 310; });
+  findings.push(...gradientText.filter((row) => gradientText.length > 1 || violet(row)).slice(0, 30));
   return { findings, notVerified: renderedRules.map((rule) => ({ rule, viewport, reason: "static fallback: needs a rendered DOM" })) };
 }

package/skills/frontend-ui-ux/scripts/probe-thresholds.json

@@ -61,13 +61,19 @@
     "fontFamilyMax": 3,
     "focusOutlineMinPx": 2,
     "focusContrastMin": 3,
-    "glowRepeatMin": 2,
-    "stripeRepeatMin": 2,
+    "glowRepeatMin": 3,
+    "stripeRepeatMin": 3,
+    "stripeInsetRepeatMin": 2,
     "tileBoxTolerancePx": 4,
     "tileCountMin": 4,
     "tileGridRepeatMin": 1,
     "statSiblingMin": 4,
     "statSiblingMarketingMin": 3,
+    "accentClusterMax": 4,
+    "accentClusterCalmMax": 1,
+    "gradientTextMaxElements": 1,
+    "gradientTextStopContrast": 4.5,
+    "gradientTextLargeStopContrast": 3,
     "bannedAccentHueMin": 260,
     "bannedAccentHueMax": 310,
     "bannedAccentSpreadMin": 50,

package/skills/frontend-ui-ux/scripts/probe.mjs

@@ -6,17 +6,28 @@ import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { inspectPage } from "./probe-page.mjs";
 import { staticScan } from "./probe-static.mjs";
+import { DS_RULES, LOCK_LIMITS, findLock, measureLock } from "./probe-lock.mjs";
 
 const here = dirname(fileURLToPath(import.meta.url));
 const args = process.argv.slice(2);
 const option = (name) => { const i = args.indexOf(name); return i < 0 ? null : args[i + 1]; };
 const input = option("--path") ?? option("--url");
 const output = option("--out") ? resolve(option("--out")) : null;
-if (!input || !output) { process.stderr.write("Usage: probe.mjs --path FILE|DIR or --url LOOPBACK --out DIR\n"); process.exit(2); }
+if (!input || !output) { process.stderr.write("Usage: probe.mjs --path FILE|DIR or --url LOOPBACK --out DIR [--lock design.lock.json] [--viewports ids]\n"); process.exit(2); }
 const spec = JSON.parse(readFileSync(join(here, "probe-thresholds.json"), "utf8"));
 const session = `uiux-${process.pid}-${Date.now()}`;
 const browserEnv = { ...process.env, AGENT_BROWSER_HIDE_SCROLLBARS: "true", AGENT_BROWSER_IDLE_TIMEOUT_MS: "120000" };
 delete browserEnv.AGENT_BROWSER_ALLOW_FILE_ACCESS;
+// The fixed look rubric printed under every rendered run: concrete questions a screenshot answers.
+const LOOK_RUBRIC = [
+  ["LOOK-1", "One focal point: the signature moment (data-ui-moment) is where the eye lands first at 1440 and at 390; nothing else competes with it."],
+  ["LOOK-2", "Shared edges: section content starts on the same left edge at 1440; no block floats on a width of its own."],
+  ["LOOK-3", "Grouping by space: gaps between groups are visibly larger than gaps inside them; no empty band separates nothing."],
+  ["LOOK-4", "Kit, not costume: every block is a kit part or a page rule on the locked tokens; nothing decorative without a job."],
+  ["LOOK-5", "Composed mobile: at 390 and 320 the title breaks well, navigation and tables stay usable, nothing is a squeezed desktop."],
+  ["LOOK-6", "Specific content: names, numbers and copy belong to this brief; no filler and no leftover slot."],
+];
+const subset = option("--viewports") ? new Set(option("--viewports").split(",").map((id) => id.trim()).filter(Boolean)) : null;
 const blockedRules = ["RS-001", "RS-002", "RS-003", "RS-004", "RS-006", "RS-007", "CF-201", "CF-202", "CF-701"];
 
 function entryFor(pathname) {
@@ -81,15 +92,18 @@ function writeReport(manifest, findings) {
   const rows = ["| Severity | Rule | Where | Measured | Fix |", "| --- | --- | --- | --- | --- |"];
   for (const f of findings) rows.push(`| ${f.severity} | ${f.rule} | ${String(f.selector ?? "document").replaceAll("|", "\\|")} @ ${f.viewport} | ${f.tier}: ${JSON.stringify(f.value).replaceAll("|", "\\|")} | ${JSON.stringify(f.threshold).replaceAll("|", "\\|")} |`);
   const missing = manifest.not_verified.map((item) => `- ${item.rule} @ ${item.viewport ?? "all"}: ${item.reason}`);
-  writeFileSync(join(output, "review.md"), `# Interface probe\n\n${manifest.exit_code === 2 ? "Blocked" : manifest.exit_code === 1 ? "Block" : "Approve"}\n\n${rows.join("\n")}\n\n## Not verified\n\n${missing.join("\n") || "None"}\n`);
+  const shots = manifest.screenshots.filter(({ viewport }) => ["1440", "390", "320"].includes(viewport));
+  const look = shots.length ? ["", "Look before calling it done (open these screenshots; fix the two worst answers, re-run the probe, two look rounds at most):", ...shots.map((shot) => `- ${shot.viewport}: ${shot.path}`), ...LOOK_RUBRIC.map(([id, text]) => `${id} ${text}`)].join("\n") : "";
+  writeFileSync(join(output, "review.md"), `# Interface probe\n\n${manifest.exit_code === 2 ? "Blocked" : manifest.exit_code === 1 ? "Block" : "Approve"}\n\n${rows.join("\n")}\n\n## Not verified\n\n${missing.join("\n") || "None"}\n${look ? `\n## Look\n${look}\n` : ""}`);
   if (manifest.exit_code === 2) process.stdout.write(`BLOCKED: ${manifest.blocked_reason}\n`);
   else process.stdout.write(`${findings.length} findings; ${manifest.exit_code === 1 ? "Block" : "Approve"}\n`);
+  if (look) process.stdout.write(`${look.trimStart()}\n`);
   process.exitCode = manifest.exit_code;
 }
 
 const source = option("--source") ?? (option("--path") ? resolve(option("--path")) : null);
 const fallback = staticScan(source);
-const manifest = { url: null, viewports_run: [], browser_version: null, zoom_emulation: "viewport-halved", not_verified: [], screenshots: [], exit_code: 2, blocked_reason: null };
+const manifest = { url: null, viewports_run: [], browser_version: null, zoom_emulation: "viewport-halved", not_verified: [], screenshots: [], exit_code: 2, blocked_reason: null, design_lock: null };
 const findings = [];
 const block = (reason) => {
   manifest.blocked_reason = reason;
@@ -97,9 +111,13 @@ const block = (reason) => {
   findings.push(...fallback.findings);
 };
 
-let server = null, command = null, browserAttempted = false, socketDir = null;
+let server = null, command = null, browserAttempted = false, socketDir = null, lock = null;
 try {
   const entry = option("--path") ? entryFor(option("--path")) : null;
+  const lockState = findLock(entry, source, option("--lock"));
+  lock = lockState.lock;
+  if (lock) manifest.design_lock = { path: lockState.path, style: lock.style, family: lock.family ?? null, density: lock.density ?? null };
+  else manifest.not_verified.push({ rule: "DS-001", reason: lockState.error ?? "no design.lock.json beside the page; lock conformance not checked" });
   if (option("--path") && !entry) { block("no entry page found"); }
   else if (option("--url") && !localUrl(option("--url"))) { block("browser unavailable"); }
   else if (args.includes("--static-only")) { block("browser unavailable"); }
@@ -118,7 +136,7 @@ try {
         manifest.url = `http://127.0.0.1:${server.port}/${encodeURIComponent(basename(entry))}`;
       } else manifest.url = option("--url");
       const started = Date.now();
-      for (const probeCase of spec.matrix) {
+      for (const probeCase of spec.matrix.filter((entry) => !subset || subset.has(entry.name))) {
         if (Date.now() - started > spec.values.runTimeBudgetMs) {
           manifest.not_verified.push(...blockedRules.map((rule) => ({ rule, viewport: probeCase.name, reason: "time budget exceeded" })));
           manifest.blocked_reason = "matrix incomplete";
@@ -138,10 +156,20 @@ try {
           manifest.blocked_reason = "matrix incomplete";
           break;
         }
-        const state = { scheme: probeCase.scheme, reducedMotion: !!probeCase.reducedMotion, zoomEmulation: probeCase.zoomEmulation };
+        const state = { scheme: probeCase.scheme, reducedMotion: !!probeCase.reducedMotion, zoomEmulation: probeCase.zoomEmulation, density: lock?.density ?? null };
         const inspected = parseEval(await browser(command, ["eval", "--stdin"], `JSON.stringify((${inspectPage.toString()})(${JSON.stringify(probeCase.name)},${JSON.stringify(spec.values)},${JSON.stringify(state)}))`));
         findings.push(...inspected.findings);
         manifest.not_verified.push(...inspected.notVerified);
+        if (lock) {
+          const pass = probeCase.reducedMotion ? "reduced-motion" : probeCase.zoomEmulation ? "zoom" : probeCase.scheme === "dark" ? "dark" : "base";
+          try {
+            const locked = parseEval(await browser(command, ["eval", "--stdin"], `JSON.stringify((${measureLock.toString()})(${JSON.stringify({ rules: DS_RULES, limits: LOCK_LIMITS, lock, pass })}))`));
+            findings.push(...locked.findings.map((finding) => ({ ...finding, viewport: probeCase.name })));
+            manifest.not_verified.push(...locked.notVerified.map((item) => ({ ...item, viewport: probeCase.name })));
+          } catch (error) {
+            manifest.not_verified.push({ rule: "DS-001", viewport: probeCase.name, reason: `design-lock pass failed: ${error.message.slice(0, 120)}` });
+          }
+        }
         for (const selector of inspected.hoverSelectors.slice(0, 5)) {
           await browser(command, ["hover", selector]);
           const duration = parseEval(await browser(command, ["eval", "--stdin"], `JSON.stringify((() => { const el = document.querySelector(${JSON.stringify(selector)}); return el ? Math.max(...getComputedStyle(el).transitionDuration.split(',').map((value) => value.trim().endsWith('ms') ? Number.parseFloat(value) : Number.parseFloat(value) * 1000)) : null; })())`));
@@ -157,7 +185,7 @@ try {
         if (errors && !/no errors|0 errors/iu.test(errors)) writeFileSync(join(output, `${probeCase.name}-errors.txt`), `${errors}\n`);
       }
       const missing = spec.requiredViewports.filter((name) => !manifest.viewports_run.includes(name));
-      if (missing.length) manifest.blocked_reason = `matrix incomplete (${missing.join(', ')})`;
+      if (missing.length) manifest.blocked_reason = subset && !manifest.blocked_reason ? `partial matrix (--viewports ${[...subset].join(",")}); only the full matrix can approve` : `matrix incomplete (${missing.join(', ')})`;
       manifest.exit_code = findings.some((row) => row.severity === "HIGH" && ["measured", "derived"].includes(row.tier)) ? 1 : manifest.blocked_reason ? 2 : 0;
     }
   }