@domandigital/craft 0.11.0 → 0.12.0

package/dist/audit.d.ts

@@ -11,7 +11,13 @@
  * to a report and judged again later without a browser. Capturing one needs a
  * browser (see `@domandigital/craft/audit`); judging one does not.
  */
-declare const SNAPSHOT_VERSION = 1;
+/**
+ * 2 adds `role` and `geometry` per section, `rhythmVariance` for the page and
+ * the screenshot measures in `visual`. All four are optional: a version 1
+ * snapshot reads as version 2 without them (see `readSnapshot`), and nothing
+ * that judged a v1 snapshot judges it differently.
+ */
+declare const SNAPSHOT_VERSION = 2;
 interface SnapshotColour {
     /** `rgb(r, g, b)` or `rgba(r, g, b, a)`, as the browser computed it. */
     value: string;
@@ -50,6 +56,27 @@ interface SnapshotControl {
     text: string;
 }
 type SectionKind = "hero" | "logos" | "stats" | "cards" | "marquee" | "text" | "other";
+/**
+ * What a section is for, finer than `kind`. `kind` keeps its version 1
+ * meaning because the rendered tells, the null models and the estate were
+ * calibrated on it; `role` is what component-level comparison reads.
+ */
+type SectionRole = SectionKind | "cta-band" | "footer-cta" | "pricing" | "testimonials" | "faq" | "process" | "features" | "team" | "contact";
+/** How a section is laid out, measured, not judged. */
+interface SectionGeometry {
+    /** Share of the section's text blocks that are centred, 0 to 1. */
+    centredShare: number;
+    /** Content area balance about the vertical centre line: 1 mirror-even, 0 all on one side. */
+    mirrorSymmetry: number;
+    /** Share of the section's area with no text, image or control in it, 0 to 1. */
+    whitespaceRatio: number;
+    /** Width the content spans, over the viewport width. */
+    contentWidthRatio: number;
+    /** The painted background behind the section, as computed. */
+    background: string;
+    /** Buttons and button-styled links in the section. */
+    controls: number;
+}
 interface SnapshotSection {
     top: number;
     height: number;
@@ -62,6 +89,26 @@ interface SnapshotSection {
     iconCards: number;
     /** Hidden at load, waiting for a scroll to reveal it. */
     hiddenAtLoad: boolean;
+    /** Version 2. */
+    role?: SectionRole;
+    /** Version 2. */
+    geometry?: SectionGeometry;
+}
+/**
+ * Measures of the rendered pixels, from a full-page screenshot (capped at
+ * `height`). None of them passes or fails anything: they describe.
+ */
+interface SnapshotVisual {
+    /** Hasler and Süsstrunk (2003) colourfulness, M = σ_rgyb + 0.3 μ_rgyb, on 0-255 channels. Grey is 0. */
+    colourfulness: number;
+    /** Share of sampled pixels on a luminance edge: a complexity proxy, 0 to 1. */
+    edgeDensity: number;
+    /** 1 minus the mean luminance difference between each pixel and its left-right mirror, 0 to 1. */
+    symmetry: number;
+    width: number;
+    height: number;
+    /** Pixels actually read: large pages are sampled on a grid. */
+    sampled: number;
 }
 interface SnapshotGradient {
     /** Colour stops, as computed. */
@@ -116,6 +163,12 @@ interface Snapshot {
     sections: SnapshotSection[];
     effects: SnapshotEffects;
     motion: SnapshotMotion;
+    /** Version 2: coefficient of variation of the section heights. Null with fewer than two sections. */
+    rhythmVariance?: number | null;
+    /** Version 2: absent when the page could not be screenshotted. */
+    visual?: SnapshotVisual;
+    /** Set when a version 1 snapshot was read and upgraded in memory. */
+    migratedFrom?: 1;
     /** The design-system measures trawl has collected since v7, kept so it can switch to this. */
     metrics: {
         fontSizes: number[];
@@ -266,9 +319,16 @@ type FontClass = "serif" | "sans" | "mono" | "script" | "system";
  * Pure. Built from a Snapshot, so it describes what a visitor gets.
  */
 
-declare const FINGERPRINT_VERSION = 1;
+/** One section as layout comparison sees it. */
+interface FingerprintSection {
+    role: SectionRole;
+    /** Share of centred text, 0 to 1. */
+    centred: number;
+    /** Content width over viewport width, 0 to 1. */
+    width: number;
+}
 interface Fingerprint {
-    version: typeof FINGERPRINT_VERSION;
+    version: 1 | 2;
     /** The most prominent chromatic colour: button fills first, then painted area, then text. */
     accent: Oklch | null;
     ground: Oklch;
@@ -288,6 +348,8 @@ interface Fingerprint {
     effects: string[];
     /** Section kinds in running order, hero first. */
     layout: SectionKind[];
+    /** Version 2: present when every section carries a role and geometry. */
+    sections?: FingerprintSection[];
 }
 
 /**
@@ -329,6 +391,8 @@ interface SnapshotOptions {
     /** A Chromium to launch instead of Playwright's own. Also read from CRAFT_CHROMIUM. */
     executablePath?: string;
     timeoutMs?: number;
+    /** Take a screenshot and measure its pixels (`visual`). Default true. */
+    visual?: boolean;
 }
 interface MinimalPage {
     close?(): Promise<void>;
@@ -338,7 +402,20 @@ interface MinimalPage {
     }): Promise<unknown>;
     evaluate<R>(fn: () => R): Promise<R>;
     waitForTimeout(ms: number): Promise<void>;
+    /** Optional: a driver without it gets a snapshot with no `visual` measures. */
+    screenshot?(options: {
+        fullPage?: boolean;
+        type?: "png";
+        clip?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    }): Promise<Uint8Array>;
 }
+/** The most of a page the screenshot measures read, in CSS px. A long page is judged on its opening. */
+declare const VISUAL_MAX_HEIGHT = 6000;
 interface MinimalBrowser {
     newPage(options?: {
         viewport?: {
@@ -388,4 +465,4 @@ interface AuditResult {
 /** Snapshot a URL, judge it against the rendered tells, and fingerprint it. */
 declare function audit(url: string, options?: SnapshotOptions & CheckOptions): Promise<AuditResult>;
 
-export { type AuditResult, type SnapshotOptions, type SnapshotResult, audit, collectInPage, loadPlaywright, overlayInPage, snapshotPage, snapshotUrl, snapshotUrls };
+export { type AuditResult, type SnapshotOptions, type SnapshotResult, VISUAL_MAX_HEIGHT, audit, collectInPage, loadPlaywright, overlayInPage, snapshotPage, snapshotUrl, snapshotUrls };

package/dist/audit.js

@@ -1535,6 +1535,7 @@ var REFLEX_FONTS_2 = [
   "Plus Jakarta Sans",
   "Outfit",
   "Geist",
+  "Cal Sans",
   "Sora",
   "Instrument Sans",
   "Instrument Serif",
@@ -1756,7 +1757,7 @@ function iconTiles(file) {
     return sized && has(unit, /^rounded-(?:md|lg|xl|2xl|full)$/) && has(unit, /^(?:items-center|place-items-center|place-content-center)$/) && has(unit, /^bg-/);
   });
 }
-var ICON_LIBRARY = /from\s+["'](?:lucide-react|@heroicons\/react[^"']*|react-icons[^"']*|@phosphor-icons\/react|@tabler\/icons-react|@radix-ui\/react-icons)["']/;
+var ICON_LIBRARY = /from\s+["'](?:lucide-react|@heroicons\/react[^"']*|react-icons[^"']*|@phosphor-icons\/react|@tabler\/icons-react|@radix-ui\/react-icons|@iconscout\/react-unicons[^"']*|@mui\/icons-material[^"']*|react-material-symbols[^"']*)["']/;
 function iconTileStackHits(ctx) {
   const hits = [];
   for (const file of ctx.files) {
@@ -1903,6 +1904,12 @@ function shadcnHits(ctx) {
   const detail = unused.length > 0 ? `; ${unused.length} imported nowhere` : "";
   return [{ path: ui[0].path, offset: 0, message: `${ui.length} stock shadcn primitives${detail}` }];
 }
+function shadcnCardHits(ctx) {
+  return eachUnit(
+    ctx,
+    (unit) => has(unit, /^bg-card$/) && has(unit, /^text-card-foreground$/) && has(unit, /^border$/) && has(unit, /^rounded-(?:lg|xl)$/) && has(unit, /^shadow(?:-sm)?$/) ? "the registry Card recipe, unchanged" : null
+  );
+}
 function marqueeHits(ctx) {
   const hits = [];
   const pattern = /@keyframes\s+[\w-]*marquee|animate-(?:marquee|scroll-x|infinite-scroll)\b|<Marquee\b|["']react-fast-marquee["']|ui\/marquee["']|animation(?:-name)?\s*:\s*[^;]*marquee/i;
@@ -2120,6 +2127,23 @@ const inter = Inter({ subsets: ["latin"] });`),
       pass: [f3("src/components/ui/button.tsx", `export function Button() { return null; }`)]
     }
   },
+  {
+    id: "shadcn-card-stock",
+    name: "Stock shadcn Card",
+    generation: 1,
+    severity: "warn",
+    surface: "source",
+    why: "The registry Card (bg-card, a plain border, rounded-lg or rounded-xl, shadow-sm) is the container every generated page is built from. Left as shipped, every card on the site looks like every other shadcn site's.",
+    fix: "Give the card this site's radius and shadow from the restraint budget, or drop the shadow and let a visible border carry it.",
+    detect: shadcnCardHits,
+    fixtures: {
+      flag: [
+        f3("components/ui/card.tsx", `className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}`),
+        f3("components/ui/card.tsx", `className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}`)
+      ],
+      pass: [f3("components/ui/card.tsx", `className={cn("rounded-sm border-2 border-ink bg-card text-card-foreground", className)}`)]
+    }
+  },
   {
     id: "cream-palette",
     name: "Cream ground",
@@ -2363,7 +2387,7 @@ function excerptAt(text, offset, max = 140) {
 }
 
 // src/snapshot/types.ts
-var SNAPSHOT_VERSION = 1;
+var SNAPSHOT_VERSION = 2;
 
 // src/snapshot/fixture.ts
 function makeSnapshot(patch = {}) {
@@ -2697,7 +2721,7 @@ var RENDERED_PATHS = {
 };
 
 // src/character/check.ts
-var CATALOGUE_VERSION = "2026.09.8";
+var CATALOGUE_VERSION = "2026.09.9";
 var CATALOGUE = [...SOURCE_TELLS, ...COPY_TELLS, ...RESEARCH_TELLS, ...DENSITY_TELLS].map(
   (t) => RENDERED_PATHS[t.id] ? { ...t, rendered: RENDERED_PATHS[t.id] } : t
 );
@@ -2795,7 +2819,7 @@ function auditSnapshot(snapshot, options = {}) {
 }
 
 // src/fingerprint/index.ts
-var FINGERPRINT_VERSION = 1;
+var FINGERPRINT_VERSION = 2;
 var CHROMATIC = 0.03;
 var MIN_ACCENT_AREA = 2e4;
 var oklch = (value) => {
@@ -2850,7 +2874,8 @@ function fingerprint(s) {
     roundness: median(s.controls.map((c) => Math.min(0.5, c.radiusPx / Math.max(1, c.heightPx)))),
     motion: below ? Math.min(1, s.motion.hiddenSections / below) : 0,
     effects: effects.sort(),
-    layout: s.sections.map((x) => x.kind)
+    layout: s.sections.map((x) => x.kind),
+    ...s.sections.length > 0 && s.sections.every((x) => x.role && x.geometry) ? { sections: s.sections.map((x) => ({ role: x.role, centred: x.geometry.centredShare, width: x.geometry.contentWidthRatio })) } : {}
   };
 }
 
@@ -2951,18 +2976,26 @@ function collectInPage() {
       top: Math.round(box(h).top)
     };
   });
+  const isButtonEl = (el) => el.tagName === "BUTTON" || el.tagName === "INPUT" && /^(submit|button)$/i.test(el.type);
+  const isControl = (el) => {
+    const isButton = isButtonEl(el);
+    if (!isButton && el.tagName !== "A") return false;
+    if (!shown(el)) return false;
+    const cs = style(el);
+    const b = box(el);
+    const label = (el.textContent ?? el.value ?? "").replace(/\s+/g, " ").trim();
+    if (!label || b.height < 24 || b.height > 90) return false;
+    if (!isButton && !(painted(cs.backgroundColor) || px(cs.borderTopWidth) >= 1)) return false;
+    if (!isButton && px(cs.paddingLeft) < 8) return false;
+    return true;
+  };
   const controls = [];
   for (const el of all) {
-    const tag = el.tagName;
-    const isButton = tag === "BUTTON" || tag === "INPUT" && /^(submit|button)$/i.test(el.type);
-    if (!isButton && tag !== "A") continue;
-    if (!shown(el)) continue;
+    if (!isControl(el)) continue;
+    const isButton = isButtonEl(el);
     const cs = style(el);
     const b = box(el);
     const label = (el.textContent ?? el.value ?? "").replace(/\s+/g, " ").trim();
-    if (!label || b.height < 24 || b.height > 90) continue;
-    if (!isButton && !(painted(cs.backgroundColor) || px(cs.borderTopWidth) >= 1)) continue;
-    if (!isButton && px(cs.paddingLeft) < 8) continue;
     const r = cs.borderTopLeftRadius;
     const radius = r.endsWith("%") ? parseFloat(r) / 100 * b.height : px(r);
     controls.push({
@@ -3042,7 +3075,80 @@ function collectInPage() {
     }
     return best;
   };
-  const sections = blocks.slice(0, 40).map((el, index) => {
+  const backgroundOf = (el) => {
+    for (let n = el; n && n !== document.documentElement; n = n.parentElement) {
+      const c = style(n).backgroundColor;
+      if (painted(c)) return c;
+    }
+    return ground;
+  };
+  const geometryOf = (el, b) => {
+    const leaves = Array.from(el.querySelectorAll("*")).slice(0, 1500).filter((n) => (ownText(n).length > 1 || /^(IMG|SVG|VIDEO|PICTURE|BUTTON|INPUT|TEXTAREA|SELECT)$/i.test(n.tagName)) && shown(n)).slice(0, 400);
+    const centreX = b.left + b.width / 2;
+    let left = 0;
+    let right = 0;
+    let covered = 0;
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let textBlocks = 0;
+    let centred = 0;
+    for (const n of leaves) {
+      const r = box(n);
+      const area = r.width * r.height;
+      covered += area;
+      minX = Math.min(minX, r.left);
+      maxX = Math.max(maxX, r.left + r.width);
+      const split = Math.max(0, Math.min(r.width, centreX - r.left));
+      left += split * r.height;
+      right += (r.width - split) * r.height;
+      if (ownText(n).length > 1) {
+        textBlocks += 1;
+        const mid = r.left + r.width / 2;
+        if (style(n).textAlign === "center" || Math.abs(mid - centreX) < vw * 0.03 && r.width < b.width * 0.8) centred += 1;
+      }
+    }
+    const round = (v) => Math.round(v * 1e3) / 1e3;
+    return {
+      centredShare: textBlocks ? round(centred / textBlocks) : 0,
+      mirrorSymmetry: left + right > 0 ? round(1 - Math.abs(left - right) / (left + right)) : 1,
+      whitespaceRatio: round(Math.max(0, 1 - Math.min(1, covered / Math.max(1, b.width * b.height)))),
+      contentWidthRatio: leaves.length ? round(Math.min(1, (maxX - minX) / vw)) : 0,
+      background: backgroundOf(el),
+      controls: Array.from(el.querySelectorAll("a, button, input")).slice(0, 200).filter(isControl).length
+    };
+  };
+  const CURRENCY = /[£$€]\s?\d/;
+  const roleOf = (el, kind, geo, b, cards, iconCards, last) => {
+    if (kind === "marquee" || kind === "hero") return kind;
+    const heading = (el.querySelector("h1, h2, h3")?.textContent ?? "").toLowerCase();
+    const leaves = Array.from(el.querySelectorAll("*")).slice(0, 1500);
+    const own = leaves.map(ownText);
+    const questions = own.filter((t) => /\?$/.test(t) && t.length > 8).length;
+    if (el.querySelectorAll("details").length >= 3 || el.querySelectorAll("[aria-expanded]").length >= 3 || /\bfaq|frequently asked|questions\b/.test(heading) && questions >= 3) return "faq";
+    const prices = own.filter((t) => CURRENCY.test(t) && t.length < 40).length;
+    if (prices >= 2 && (cards >= 2 || /pric|plan|package/.test(heading))) return "pricing";
+    const quotes = el.querySelectorAll("blockquote, q").length;
+    if (quotes >= 2 || /testimonial|review|what (?:our )?(?:clients|customers|people) say/.test(heading)) return "testimonials";
+    const steps = Math.max(0, ...Array.from(el.querySelectorAll("ol")).map((ol) => ol.children.length));
+    const numbered = own.filter((t) => /^(?:step\s*)?0?[1-9][.:]?$/i.test(t)).length;
+    if (steps >= 3 || numbered >= 3 || /how it works|our process|\bsteps?\b/.test(heading)) return "process";
+    const form = el.querySelector("form");
+    const fields = form ? form.querySelectorAll("input:not([type=hidden]):not([type=submit]), textarea, select").length : 0;
+    if (fields >= 2 || /contact|get in touch/.test(heading)) return "contact";
+    const portraits = Array.from(el.querySelectorAll("img")).filter((i) => {
+      const r = box(i);
+      return r.width >= 80 && r.width <= 420 && Math.abs(r.width - r.height) < r.width * 0.25;
+    }).length;
+    if (portraits >= 3 && /team|people|meet|who we are/.test(heading)) return "team";
+    if (kind === "stats" || kind === "logos") return kind;
+    const words = (el.textContent ?? "").replace(/\s+/g, " ").trim().length;
+    const setApart = geo.background !== ground || geo.centredShare >= 0.6;
+    if (setApart && heading && b.height <= vh * 0.9 && geo.controls >= 1 && geo.controls <= 2 && words < 400 && cards < 3) return last ? "footer-cta" : "cta-band";
+    if (cards >= 3 && iconCards >= 2) return "features";
+    return kind;
+  };
+  const kept = blocks.slice(0, 40);
+  const sections = kept.map((el, index) => {
     const b = box(el);
     const heading = el.querySelector("h1, h2, h3");
     const label = (heading?.textContent ?? el.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 60);
@@ -3056,6 +3162,7 @@ function collectInPage() {
     else if (images.length >= 4 && textChars < 300) kind = "logos";
     else if (numbers >= 3 && textChars < 600) kind = "stats";
     else if (cards >= 3) kind = "cards";
+    const geometry = geometryOf(el, b);
     return {
       top: Math.round(b.top),
       height: Math.round(b.height),
@@ -3063,7 +3170,9 @@ function collectInPage() {
       label,
       cards,
       iconCards,
-      hiddenAtLoad: b.top > vh && hiddenAtLoad(el)
+      hiddenAtLoad: b.top > vh && hiddenAtLoad(el),
+      role: roleOf(el, kind, geometry, b, cards, iconCards, index === kept.length - 1),
+      geometry
     };
   });
   if (header && sections.length === 0) {
@@ -3156,6 +3265,13 @@ function collectInPage() {
     headings: headings2,
     controls,
     sections,
+    rhythmVariance: (() => {
+      const hs = sections.map((x) => x.height);
+      if (hs.length < 2) return null;
+      const mean = hs.reduce((t, v) => t + v, 0) / hs.length;
+      const sd = Math.sqrt(hs.reduce((t, v) => t + (v - mean) ** 2, 0) / hs.length);
+      return mean > 0 ? Math.round(sd / mean * 1e3) / 1e3 : null;
+    })(),
     effects,
     motion: {
       hiddenSections: sections.filter((s) => s.hiddenAtLoad).length,
@@ -3189,7 +3305,139 @@ function overlayInPage() {
   return false;
 }
 
+// src/direction/png.ts
+import { inflateSync } from "zlib";
+function decodePng(buf) {
+  const sig = [137, 80, 78, 71, 13, 10, 26, 10];
+  if (!sig.every((b, i) => buf[i] === b)) throw new Error("not a PNG");
+  const view = new DataView(buf.buffer, buf.byteOffset, buf.byteLength);
+  let pos = 8;
+  let width = 0;
+  let height = 0;
+  let depth = 0;
+  let colour = 0;
+  let interlace = 0;
+  const idat = [];
+  while (pos < buf.length) {
+    const len = view.getUint32(pos);
+    const type = String.fromCharCode(...buf.subarray(pos + 4, pos + 8));
+    const data = buf.subarray(pos + 8, pos + 8 + len);
+    if (type === "IHDR") {
+      width = view.getUint32(pos + 8);
+      height = view.getUint32(pos + 12);
+      depth = data[8];
+      colour = data[9];
+      interlace = data[12];
+    } else if (type === "IDAT") idat.push(data);
+    else if (type === "IEND") break;
+    pos += 12 + len;
+  }
+  const channels = { 0: 1, 2: 3, 4: 2, 6: 4 }[colour];
+  if (depth !== 8 || !channels || interlace !== 0) throw new Error(`unsupported PNG (depth ${depth}, colour type ${colour}${interlace ? ", interlaced" : ""}); export it as 8-bit RGB`);
+  const raw = inflateSync(Buffer.concat(idat.map((d) => Buffer.from(d))));
+  const stride = width * channels;
+  const out = new Uint8Array(width * height * 4);
+  const prev = new Uint8Array(stride);
+  const line = new Uint8Array(stride);
+  for (let y = 0; y < height; y += 1) {
+    const filter = raw[y * (stride + 1)];
+    const src = raw.subarray(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+    for (let x = 0; x < stride; x += 1) {
+      const a = x >= channels ? line[x - channels] : 0;
+      const b = prev[x];
+      const c = x >= channels ? prev[x - channels] : 0;
+      let v = src[x];
+      if (filter === 1) v += a;
+      else if (filter === 2) v += b;
+      else if (filter === 3) v += a + b >> 1;
+      else if (filter === 4) {
+        const p = a + b - c;
+        const pa = Math.abs(p - a);
+        const pb = Math.abs(p - b);
+        const pc = Math.abs(p - c);
+        v += pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+      }
+      line[x] = v & 255;
+    }
+    for (let x = 0; x < width; x += 1) {
+      const i = x * channels;
+      const o = (y * width + x) * 4;
+      if (channels >= 3) {
+        out[o] = line[i];
+        out[o + 1] = line[i + 1];
+        out[o + 2] = line[i + 2];
+        out[o + 3] = channels === 4 ? line[i + 3] : 255;
+      } else {
+        out[o] = out[o + 1] = out[o + 2] = line[i];
+        out[o + 3] = channels === 2 ? line[i + 1] : 255;
+      }
+    }
+    prev.set(line);
+  }
+  return { width, height, rgba: out };
+}
+
+// src/snapshot/visual.ts
+var EDGE_STEP = 32;
+function visualMeasures(img, maxSamples = 1e6) {
+  const { width: w, height: h, rgba } = img;
+  if (w < 2 || h < 2 || rgba.length < w * h * 4) throw new Error(`visualMeasures: ${w}x${h} image with ${rgba.length} bytes`);
+  const step = Math.max(1, Math.ceil(Math.sqrt(w * h / maxSamples)));
+  const lum = (x, y) => {
+    const i = (y * w + x) * 4;
+    return 0.2126 * rgba[i] + 0.7152 * rgba[i + 1] + 0.0722 * rgba[i + 2];
+  };
+  let n = 0;
+  let sumRg = 0;
+  let sumYb = 0;
+  let sumRg2 = 0;
+  let sumYb2 = 0;
+  let edges = 0;
+  let edgeN = 0;
+  let asym = 0;
+  let asymN = 0;
+  for (let y = 0; y < h; y += step) {
+    for (let x = 0; x < w; x += step) {
+      const i = (y * w + x) * 4;
+      const r = rgba[i];
+      const g = rgba[i + 1];
+      const b = rgba[i + 2];
+      const rg = r - g;
+      const yb = 0.5 * (r + g) - b;
+      sumRg += rg;
+      sumYb += yb;
+      sumRg2 += rg * rg;
+      sumYb2 += yb * yb;
+      n += 1;
+      const l = lum(x, y);
+      if (x + step < w && y + step < h) {
+        if (Math.abs(lum(x + step, y) - l) + Math.abs(lum(x, y + step) - l) > EDGE_STEP) edges += 1;
+        edgeN += 1;
+      }
+      if (x < w / 2) {
+        asym += Math.abs(l - lum(w - 1 - x, y));
+        asymN += 1;
+      }
+    }
+  }
+  const meanRg = sumRg / n;
+  const meanYb = sumYb / n;
+  const sdRg = Math.sqrt(Math.max(0, sumRg2 / n - meanRg * meanRg));
+  const sdYb = Math.sqrt(Math.max(0, sumYb2 / n - meanYb * meanYb));
+  const colourfulness = Math.sqrt(sdRg ** 2 + sdYb ** 2) + 0.3 * Math.sqrt(meanRg ** 2 + meanYb ** 2);
+  const round = (v, d = 3) => Math.round(v * 10 ** d) / 10 ** d;
+  return {
+    colourfulness: round(colourfulness, 1),
+    edgeDensity: round(edgeN ? edges / edgeN : 0),
+    symmetry: round(asymN ? 1 - asym / asymN / 255 : 1),
+    width: w,
+    height: h,
+    sampled: n
+  };
+}
+
 // src/audit/index.ts
+var VISUAL_MAX_HEIGHT = 6e3;
 async function loadPlaywright() {
   for (const name of ["playwright", "playwright-core"]) {
     try {
@@ -3207,12 +3455,23 @@ async function snapshotPage(page, url, options = {}) {
   await page.waitForTimeout(options.introWindowMs ?? 5e3);
   const late = await page.evaluate(overlayInPage).catch(() => false);
   const data = await page.evaluate(collectInPage);
+  let visual;
+  if (page.screenshot && options.visual !== false) {
+    try {
+      const height = Math.min(data.pageHeight, VISUAL_MAX_HEIGHT);
+      const png = await page.screenshot({ fullPage: true, type: "png", clip: { x: 0, y: 0, width: data.viewport.width, height } });
+      visual = visualMeasures(decodePng(png));
+    } catch {
+      visual = void 0;
+    }
+  }
   return {
     version: SNAPSHOT_VERSION,
     url,
     capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
     ...data,
-    motion: { ...data.motion, introOverlay: early && !late }
+    motion: { ...data.motion, introOverlay: early && !late },
+    ...visual ? { visual } : {}
   };
 }
 async function launch(pw, url, options) {
@@ -3258,6 +3517,7 @@ async function audit(url, options = {}) {
   return { snapshot, report: auditSnapshot(snapshot, options), fingerprint: fingerprint(snapshot) };
 }
 export {
+  VISUAL_MAX_HEIGHT,
   audit,
   collectInPage,
   loadPlaywright,

package/dist/{chunk-3NGWXZZE.js → chunk-AL6MRG6V.js}

@@ -330,7 +330,7 @@ function extractStrings(file) {
 }
 
 // src/snapshot/types.ts
-var SNAPSHOT_VERSION = 1;
+var SNAPSHOT_VERSION = 2;
 
 // src/character/tells/copy.ts
 var f = (path, text) => ({ path, text });
@@ -1902,6 +1902,7 @@ var REFLEX_FONTS_2 = [
   "Plus Jakarta Sans",
   "Outfit",
   "Geist",
+  "Cal Sans",
   "Sora",
   "Instrument Sans",
   "Instrument Serif",
@@ -2123,7 +2124,7 @@ function iconTiles(file) {
     return sized && has(unit, /^rounded-(?:md|lg|xl|2xl|full)$/) && has(unit, /^(?:items-center|place-items-center|place-content-center)$/) && has(unit, /^bg-/);
   });
 }
-var ICON_LIBRARY = /from\s+["'](?:lucide-react|@heroicons\/react[^"']*|react-icons[^"']*|@phosphor-icons\/react|@tabler\/icons-react|@radix-ui\/react-icons)["']/;
+var ICON_LIBRARY = /from\s+["'](?:lucide-react|@heroicons\/react[^"']*|react-icons[^"']*|@phosphor-icons\/react|@tabler\/icons-react|@radix-ui\/react-icons|@iconscout\/react-unicons[^"']*|@mui\/icons-material[^"']*|react-material-symbols[^"']*)["']/;
 function iconTileStackHits(ctx) {
   const hits = [];
   for (const file of ctx.files) {
@@ -2270,6 +2271,12 @@ function shadcnHits(ctx) {
   const detail = unused.length > 0 ? `; ${unused.length} imported nowhere` : "";
   return [{ path: ui[0].path, offset: 0, message: `${ui.length} stock shadcn primitives${detail}` }];
 }
+function shadcnCardHits(ctx) {
+  return eachUnit(
+    ctx,
+    (unit) => has(unit, /^bg-card$/) && has(unit, /^text-card-foreground$/) && has(unit, /^border$/) && has(unit, /^rounded-(?:lg|xl)$/) && has(unit, /^shadow(?:-sm)?$/) ? "the registry Card recipe, unchanged" : null
+  );
+}
 function marqueeHits(ctx) {
   const hits = [];
   const pattern = /@keyframes\s+[\w-]*marquee|animate-(?:marquee|scroll-x|infinite-scroll)\b|<Marquee\b|["']react-fast-marquee["']|ui\/marquee["']|animation(?:-name)?\s*:\s*[^;]*marquee/i;
@@ -2487,6 +2494,23 @@ const inter = Inter({ subsets: ["latin"] });`),
       pass: [f3("src/components/ui/button.tsx", `export function Button() { return null; }`)]
     }
   },
+  {
+    id: "shadcn-card-stock",
+    name: "Stock shadcn Card",
+    generation: 1,
+    severity: "warn",
+    surface: "source",
+    why: "The registry Card (bg-card, a plain border, rounded-lg or rounded-xl, shadow-sm) is the container every generated page is built from. Left as shipped, every card on the site looks like every other shadcn site's.",
+    fix: "Give the card this site's radius and shadow from the restraint budget, or drop the shadow and let a visible border carry it.",
+    detect: shadcnCardHits,
+    fixtures: {
+      flag: [
+        f3("components/ui/card.tsx", `className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}`),
+        f3("components/ui/card.tsx", `className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}`)
+      ],
+      pass: [f3("components/ui/card.tsx", `className={cn("rounded-sm border-2 border-ink bg-card text-card-foreground", className)}`)]
+    }
+  },
   {
     id: "cream-palette",
     name: "Cream ground",
@@ -2713,6 +2737,17 @@ var HOUSE = {
 function houseRule(id, name = id) {
   return HOUSE[id] ?? { tier: "review", label: name };
 }
+var HOUSE_LOCKED = "the house blocking tier cannot be lowered by a repo. A genuine one-off takes copy-ok on its line; a rule that is wrong is changed in craft's house.ts and COPY.md";
+function holdHouseBlocks(exceptions, severity) {
+  const blocks = (tell) => HOUSE[tell]?.tier === "block";
+  const refusedSeverity = Object.entries(severity).filter(([tell, o]) => blocks(tell) && o.level !== "block").map(([tell]) => tell);
+  return {
+    exceptions: exceptions.filter((e) => !blocks(e.tell)),
+    refused: exceptions.filter((e) => blocks(e.tell)),
+    severity: Object.fromEntries(Object.entries(severity).filter(([tell]) => !refusedSeverity.includes(tell))),
+    refusedSeverity
+  };
+}
 
 // src/snapshot/fixture.ts
 function makeSnapshot(patch = {}) {
@@ -3046,7 +3081,7 @@ var RENDERED_PATHS = {
 };
 
 // src/character/check.ts
-var CATALOGUE_VERSION = "2026.09.8";
+var CATALOGUE_VERSION = "2026.09.9";
 var CATALOGUE = [...SOURCE_TELLS, ...COPY_TELLS, ...RESEARCH_TELLS, ...DENSITY_TELLS].map(
   (t) => RENDERED_PATHS[t.id] ? { ...t, rendered: RENDERED_PATHS[t.id] } : t
 );
@@ -3171,6 +3206,8 @@ export {
   REFLEX_FONTS_1,
   REFLEX_FONTS_2,
   houseRule,
+  HOUSE_LOCKED,
+  holdHouseBlocks,
   fileKind,
   extractCopy,
   extractStrings,