@monoes/monodesign 1.2.17 → 1.2.20

package/cli/engine/rules/checks-page.mjs

@@ -0,0 +1,465 @@
+import {
+  GENERIC_FONTS,
+  OVERUSED_FONTS,
+  SAFE_TAGS,
+  isBrandFontOnOwnDomain,
+} from '../shared/constants.mjs';
+import { extractGoogleFontFamilies } from '../shared/fonts.mjs';
+import { isCardLikeFromProps } from './checks-pure.mjs';
+import { readOwnBackgroundColor, resolveBorderRadiusPx } from './checks-background.mjs';
+import { parseAnyColor } from './checks-css-values.mjs';
+import { resolveFontSizePx, cssColorIsTransparent } from './checks-quality.mjs';
+
+// ─── Section 6: Page-Level Checks ───────────────────────────────────────────
+
+// Browser page-level checks — use document/getComputedStyle globals
+
+function checkTypography() {
+  const findings = [];
+
+  // Walk actual text-bearing elements and tally font usage by *computed style*.
+  // This is much more accurate than scanning CSS rules — it ignores rules that
+  // exist in the stylesheet but apply to nothing (e.g. demo classes showing
+  // anti-patterns), and counts what the user actually sees.
+  const fontUsage = new Map(); // primary font name → count of elements
+  let totalTextElements = 0;
+  for (const el of document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, dd, blockquote, figcaption, a, button, label, span')) {
+    // Skip monodesign's own elements
+    if (el.closest?.('.monodesign-overlay, .monodesign-label, .monodesign-banner, .monodesign-tooltip')) continue;
+    // Only count elements that actually have visible direct text
+    const hasText = [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim().length > 0);
+    if (!hasText) continue;
+    const style = getComputedStyle(el);
+    const ff = style.fontFamily;
+    if (!ff) continue;
+    const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
+    const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
+    if (!primary) continue;
+    fontUsage.set(primary, (fontUsage.get(primary) || 0) + 1);
+    totalTextElements++;
+  }
+
+  if (totalTextElements >= 20) {
+    // A font is "primary" if it's used by at least 15% of text elements
+    const PRIMARY_THRESHOLD = 0.15;
+    for (const [font, count] of fontUsage) {
+      const share = count / totalTextElements;
+      if (share < PRIMARY_THRESHOLD) continue;
+      if (!OVERUSED_FONTS.has(font)) continue;
+      if (isBrandFontOnOwnDomain(font)) continue;
+      findings.push({ type: 'overused-font', detail: `Primary font: ${font} (${Math.round(share * 100)}% of text)` });
+    }
+
+    // Single-font check: only one distinct primary font across all text
+    if (fontUsage.size === 1) {
+      const only = [...fontUsage.keys()][0];
+      findings.push({ type: 'single-font', detail: `only font used is ${only}` });
+    }
+  }
+
+  const sizes = new Set();
+  for (const el of document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,span,a,li,td,th,label,button,div')) {
+    const fs = parseFloat(getComputedStyle(el).fontSize);
+    if (fs > 0 && fs < 200) sizes.add(Math.round(fs * 10) / 10);
+  }
+  if (sizes.size >= 3) {
+    const sorted = [...sizes].sort((a, b) => a - b);
+    const ratio = sorted[sorted.length - 1] / sorted[0];
+    if (ratio < 2.0) {
+      findings.push({ type: 'flat-type-hierarchy', detail: `Sizes: ${sorted.map(s => `${s}px`).join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
+    }
+  }
+
+  return findings;
+}
+
+function isCardLikeDOM(el) {
+  const tag = el.tagName.toLowerCase();
+  if (SAFE_TAGS.has(tag) || ['input','select','textarea','img','video','canvas','picture'].includes(tag)) return false;
+  const style = getComputedStyle(el);
+  const cls = el.getAttribute('class') || '';
+  const hasShadow = (style.boxShadow && style.boxShadow !== 'none') || /\bshadow(?:-sm|-md|-lg|-xl|-2xl)?\b/.test(cls);
+  const hasBorder = /\bborder\b/.test(cls);
+  const hasRadius = parseFloat(style.borderRadius) > 0 || /\brounded(?:-sm|-md|-lg|-xl|-2xl|-full)?\b/.test(cls);
+  const hasBg = (style.backgroundColor && style.backgroundColor !== 'rgba(0, 0, 0, 0)') || /\bbg-(?:white|gray-\d+|slate-\d+)\b/.test(cls);
+  return isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg);
+}
+
+function checkLayout() {
+  const findings = [];
+  const flaggedEls = new Set();
+
+  for (const el of document.querySelectorAll('*')) {
+    if (!isCardLikeDOM(el) || flaggedEls.has(el)) continue;
+    const cls = el.getAttribute('class') || '';
+    const style = getComputedStyle(el);
+    if (style.position === 'absolute' || style.position === 'fixed') continue;
+    if (/\b(?:dropdown|popover|tooltip|menu|modal|dialog)\b/i.test(cls)) continue;
+    if ((el.textContent?.trim().length || 0) < 10) continue;
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 50 || rect.height < 30) continue;
+
+    let parent = el.parentElement;
+    while (parent) {
+      if (isCardLikeDOM(parent)) { flaggedEls.add(el); break; }
+      parent = parent.parentElement;
+    }
+  }
+
+  for (const el of flaggedEls) {
+    let isAncestor = false;
+    for (const other of flaggedEls) {
+      if (other !== el && el.contains(other)) { isAncestor = true; break; }
+    }
+    if (!isAncestor) findings.push({ type: 'nested-cards', detail: 'Card inside card', el });
+  }
+
+  return findings;
+}
+
+// Node page-level checks — take document/window as parameters
+
+function checkPageTypography(doc, win) {
+  const findings = [];
+
+  const fonts = new Set();
+  const overusedFound = new Set();
+
+  for (const sheet of doc.styleSheets) {
+    let rules;
+    try { rules = sheet.cssRules || sheet.rules; } catch { continue; }
+    if (!rules) continue;
+    for (const rule of rules) {
+      if (rule.type !== 1) continue;
+      const ff = rule.style?.fontFamily;
+      if (!ff) continue;
+      const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
+      const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
+      if (primary) {
+        fonts.add(primary);
+        if (OVERUSED_FONTS.has(primary)) overusedFound.add(primary);
+      }
+    }
+  }
+
+  // Check Google Fonts links in HTML
+  const html = doc.documentElement?.outerHTML || '';
+  for (const f of extractGoogleFontFamilies(html)) {
+    fonts.add(f);
+    if (OVERUSED_FONTS.has(f)) overusedFound.add(f);
+  }
+
+  // Also parse raw HTML/style content for font-family (jsdom may not expose all via CSSOM)
+  const ffRe = /font-family\s*:\s*([^;}]+)/gi;
+  let fm;
+  while ((fm = ffRe.exec(html)) !== null) {
+    for (const f of fm[1].split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase())) {
+      if (f && !GENERIC_FONTS.has(f)) {
+        fonts.add(f);
+        if (OVERUSED_FONTS.has(f)) overusedFound.add(f);
+      }
+    }
+  }
+
+  for (const font of overusedFound) {
+    findings.push({ id: 'overused-font', snippet: `Primary font: ${font}` });
+  }
+
+  // Single font
+  if (fonts.size === 1) {
+    const els = doc.querySelectorAll('*');
+    if (els.length >= 20) {
+      findings.push({ id: 'single-font', snippet: `only font used is ${[...fonts][0]}` });
+    }
+  }
+
+  // Flat type hierarchy
+  const sizes = new Set();
+  const textEls = doc.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div');
+  for (const el of textEls) {
+    const fontSize = parseFloat(win.getComputedStyle(el).fontSize);
+    // Filter out sub-8px values (jsdom doesn't resolve relative units properly)
+    if (fontSize >= 8 && fontSize < 200) sizes.add(Math.round(fontSize * 10) / 10);
+  }
+  if (sizes.size >= 3) {
+    const sorted = [...sizes].sort((a, b) => a - b);
+    const ratio = sorted[sorted.length - 1] / sorted[0];
+    if (ratio < 2.0) {
+      findings.push({ id: 'flat-type-hierarchy', snippet: `Sizes: ${sorted.map(s => `${s}px`).join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
+    }
+  }
+
+  return findings;
+}
+
+function isCardLike(el, win) {
+  const tag = el.tagName.toLowerCase();
+  if (SAFE_TAGS.has(tag) || ['input', 'select', 'textarea', 'img', 'video', 'canvas', 'picture'].includes(tag)) return false;
+
+  const style = win.getComputedStyle(el);
+  const rawStyle = el.getAttribute?.('style') || '';
+  const cls = el.getAttribute?.('class') || '';
+
+  const hasShadow = (style.boxShadow && style.boxShadow !== 'none') ||
+    /\bshadow(?:-sm|-md|-lg|-xl|-2xl)?\b/.test(cls) || /box-shadow/i.test(rawStyle);
+  const hasBorder = /\bborder\b/.test(cls);
+  const widthPx = parseFloat(style.width) || 0;
+  const hasRadius = resolveBorderRadiusPx(el, style, widthPx, win) > 0 ||
+    /\brounded(?:-sm|-md|-lg|-xl|-2xl|-full)?\b/.test(cls) || /border-radius/i.test(rawStyle);
+  const hasBg = /\bbg-(?:white|gray-\d+|slate-\d+)\b/.test(cls) ||
+    /background(?:-color)?\s*:\s*(?!transparent)/i.test(rawStyle);
+
+  return isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg);
+}
+
+function checkPageLayout(doc, win) {
+  const findings = [];
+
+  // Nested cards
+  const allEls = doc.querySelectorAll('*');
+  const flaggedEls = new Set();
+  for (const el of allEls) {
+    if (!isCardLike(el, win)) continue;
+    if (flaggedEls.has(el)) continue;
+
+    const tag = el.tagName.toLowerCase();
+    const cls = el.getAttribute?.('class') || '';
+    const rawStyle = el.getAttribute?.('style') || '';
+
+    if (['pre', 'code'].includes(tag)) continue;
+    if (/\b(?:absolute|fixed)\b/.test(cls) || /position\s*:\s*(?:absolute|fixed)/i.test(rawStyle)) continue;
+    if ((el.textContent?.trim().length || 0) < 10) continue;
+    if (/\b(?:dropdown|popover|tooltip|menu|modal|dialog)\b/i.test(cls)) continue;
+
+    // Walk up to find card-like ancestor
+    let parent = el.parentElement;
+    while (parent) {
+      if (isCardLike(parent, win)) {
+        flaggedEls.add(el);
+        break;
+      }
+      parent = parent.parentElement;
+    }
+  }
+
+  // Only report innermost nested cards
+  for (const el of flaggedEls) {
+    let isAncestorOfFlagged = false;
+    for (const other of flaggedEls) {
+      if (other !== el && el.contains(other)) {
+        isAncestorOfFlagged = true;
+        break;
+      }
+    }
+    if (!isAncestorOfFlagged) {
+      findings.push({ id: 'nested-cards', snippet: `Card inside card (${el.tagName.toLowerCase()})` });
+    }
+  }
+
+  return findings;
+}
+
+// ─── Cream / beige palette (the default "tasteful" AI surface) ────────────────
+// A warm, lightly-tinted off-white page background — light, with R≥G≥B and a
+// small warm tint (not white, not a strong color). The current reflex surface.
+function isCreamColor(rgb) {
+  if (!rgb) return false;
+  const { r, g, b } = rgb;
+  if (Math.min(r, g, b) < 209) return false;   // must be light
+  if (!(r >= g && g >= b)) return false;        // warm ordering
+  const warmth = r - b;
+  return warmth >= 6 && warmth <= 48;           // tinted, not white, not strong
+}
+
+// Tailwind background utilities that render as a warm off-white surface. The
+// static engine doesn't fetch Tailwind's CSS, so a `bg-amber-50` on <body>
+// resolves to nothing in computed style — catch it from the class list
+// instead. Candidate tokens map to their actual Tailwind hex and are still
+// filtered through isCreamColor, so neutral grays (stone) and over-saturated
+// shades drop out on their own.
+const TAILWIND_BG_HEX = {
+  'bg-amber-50': '#fffbeb', 'bg-amber-100': '#fef3c7',
+  'bg-orange-50': '#fff7ed', 'bg-orange-100': '#ffedd5',
+  'bg-yellow-50': '#fefce8',
+  'bg-stone-50': '#fafaf9', 'bg-stone-100': '#f5f5f4', 'bg-stone-200': '#e7e5e4',
+};
+
+function creamFromClassList(cls) {
+  if (!cls) return null;
+  // Arbitrary value: bg-[#f5f0e6] / bg-[rgb(245_240_230)] (underscores = spaces).
+  const arb = cls.match(/\bbg-\[([^\]]+)\]/);
+  if (arb && isCreamColor(parseAnyColor(arb[1].replace(/_/g, ' ')))) return `bg-[${arb[1]}]`;
+  // Named warm-light utilities.
+  for (const [tok, hex] of Object.entries(TAILWIND_BG_HEX)) {
+    if (new RegExp(`(^|\\s)${tok}($|\\s)`).test(cls) && isCreamColor(parseAnyColor(hex))) return tok;
+  }
+  return null;
+}
+
+function checkCreamPalette(doc, win) {
+  const findings = [];
+  const body = doc.body || (doc.querySelector ? doc.querySelector('body') : null);
+  if (!body) return findings;
+  const html = doc.documentElement;
+  const getCS = (el) => (win ? win.getComputedStyle(el) : getComputedStyle(el));
+
+  // 1. Computed background — covers inline / <style> / linked CSS, and Tailwind
+  //    once it's actually rendered (browser path).
+  let bg = readOwnBackgroundColor(body, getCS(body));
+  if (!bg || bg.a === 0) {
+    if (html) bg = readOwnBackgroundColor(html, getCS(html));
+  }
+  if (isCreamColor(bg)) {
+    findings.push({ id: 'cream-palette', snippet: `cream/beige page background rgb(${bg.r}, ${bg.g}, ${bg.b})` });
+    return findings;
+  }
+
+  // 2. Tailwind class fallback — for the static path, where utility classes
+  //    never resolve to computed CSS.
+  for (const el of [body, html]) {
+    const tok = creamFromClassList(el?.getAttribute ? el.getAttribute('class') : '');
+    if (tok) {
+      findings.push({ id: 'cream-palette', snippet: `cream/beige page background (Tailwind ${tok})` });
+      break;
+    }
+  }
+  return findings;
+}
+
+// ─── Oversized hero headline ────────────────────────────────────────────────
+// Fires when a *long* headline is set at display size and actually dominates
+// the viewport. A punchy one- or two-word headline at the same size is a
+// legitimate stylistic choice, and a large-but-contained two-line hero should
+// pass too — length and viewport share together are the tell.
+const OVERSIZED_H1_FONT_PX = 72;
+const OVERSIZED_H1_MIN_CHARS = 40;
+const OVERSIZED_H1_MIN_VIEWPORT_HEIGHT_RATIO = 0.28;
+const OVERSIZED_H1_MIN_VIEWPORT_AREA_RATIO = 0.25;
+function checkOversizedH1({ tag, fontSize, headingText, rect = null, viewportWidth = 0, viewportHeight = 0 }) {
+  if (tag !== 'h1') return [];
+  const textLen = headingText.length;
+  if (fontSize >= OVERSIZED_H1_FONT_PX && textLen >= OVERSIZED_H1_MIN_CHARS) {
+    let viewportDetail = '';
+    if (rect && viewportWidth > 0 && viewportHeight > 0) {
+      const heightRatio = rect.height / viewportHeight;
+      const areaRatio = (rect.width * rect.height) / (viewportWidth * viewportHeight);
+      const dominatesViewport = heightRatio >= OVERSIZED_H1_MIN_VIEWPORT_HEIGHT_RATIO
+        || areaRatio >= OVERSIZED_H1_MIN_VIEWPORT_AREA_RATIO;
+      if (!dominatesViewport) return [];
+      viewportDetail = `, ${Math.round(heightRatio * 100)}vh`;
+    }
+    return [{ id: 'oversized-h1', snippet: `${Math.round(fontSize)}px h1, ${textLen} chars${viewportDetail} "${headingText.slice(0, 60)}"` }];
+  }
+  return [];
+}
+
+function checkElementOversizedH1(el, _style, tag, window) {
+  if (tag !== 'h1') return [];
+  const fontSize = resolveFontSizePx(el, window);
+  const headingText = (el.textContent || '').trim().replace(/\s+/g, ' ');
+  return checkOversizedH1({ tag, fontSize, headingText });
+}
+
+function checkElementOversizedH1DOM(el) {
+  const tag = el.tagName.toLowerCase();
+  if (tag !== 'h1') return [];
+  const style = getComputedStyle(el);
+  const fontSize = parseFloat(style.fontSize) || 0;
+  const headingText = (el.textContent || '').trim().replace(/\s+/g, ' ');
+  const rect = el.getBoundingClientRect();
+  const viewportWidth = (typeof window !== 'undefined' ? window.innerWidth : 0) || 0;
+  const viewportHeight = (typeof window !== 'undefined' ? window.innerHeight : 0) || 0;
+  return checkOversizedH1({ tag, fontSize, headingText, rect, viewportWidth, viewportHeight });
+}
+
+// ─── GPT tell: hairline border + wide diffuse shadow (gated --gpt) ────────────
+const CSS_COLOR_TOKEN_RE = /(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\([^)]*\)|#[0-9a-fA-F]{3,8}\b|\b(?:black|white|transparent|currentcolor)\b/gi;
+
+function shadowLayerAlpha(layer) {
+  CSS_COLOR_TOKEN_RE.lastIndex = 0;
+  const match = CSS_COLOR_TOKEN_RE.exec(layer);
+  if (!match) return 1;
+  if (match[0].toLowerCase() === 'transparent') return 0;
+  const parsed = parseAnyColor(match[0]);
+  return parsed ? (parsed.a ?? 1) : 1;
+}
+
+function shadowMaxBlurPx(boxShadow, { minAlpha = 0 } = {}) {
+  if (!boxShadow || boxShadow === 'none') return 0;
+  let maxBlur = 0;
+  // Split into layers on commas not inside parentheses (rgba(...) etc.).
+  for (const layer of boxShadow.split(/,(?![^()]*\))/)) {
+    if (shadowLayerAlpha(layer) < minAlpha) continue;
+    // Strip colors and keywords (rgba()/hsl()/hex/named/inset/px), leaving the
+    // ordered length tokens: offsetX offsetY blur [spread]. Static jsdom keeps
+    // unitless zeros ("0 0 24px"); browsers normalize to px ("0px 0px 24px") —
+    // both reduce to the same numbers here.
+    const cleaned = layer.replace(CSS_COLOR_TOKEN_RE, ' ').replace(/\b[a-z]+\b/gi, ' ');
+    const nums = [...cleaned.matchAll(/-?\d*\.?\d+/g)].map(m => parseFloat(m[0]));
+    if (nums.length >= 3) maxBlur = Math.max(maxBlur, nums[2]);
+  }
+  return maxBlur;
+}
+
+function cssColorAlpha(value) {
+  if (cssColorIsTransparent(value)) return 0;
+  const parsed = parseAnyColor(value);
+  return parsed ? (parsed.a ?? 1) : 1;
+}
+
+function checkGptThinBorderWideShadow({ borderWidths, borderColors, boxShadow }) {
+  const visibleThinBorders = borderWidths
+    .map((width, index) => ({ width, alpha: cssColorAlpha(borderColors?.[index] || '') }))
+    .filter(({ width, alpha }) => width > 0 && width <= 1.5 && alpha >= 0.28);
+  const maxBorder = Math.max(0, ...visibleThinBorders.map(({ width }) => width));
+  const blur = shadowMaxBlurPx(boxShadow, { minAlpha: 0.12 });
+  if (visibleThinBorders.length >= 2 && blur >= 16) {
+    return [{ id: 'gpt-thin-border-wide-shadow', snippet: `${maxBorder}px border + ${Math.round(blur)}px shadow blur` }];
+  }
+  return [];
+}
+
+function borderWidthsFromStyle(style) {
+  return [
+    parseFloat(style.borderTopWidth) || 0,
+    parseFloat(style.borderRightWidth) || 0,
+    parseFloat(style.borderBottomWidth) || 0,
+    parseFloat(style.borderLeftWidth) || 0,
+  ];
+}
+
+function borderColorsFromStyle(style) {
+  return [
+    style.borderTopColor || '',
+    style.borderRightColor || '',
+    style.borderBottomColor || '',
+    style.borderLeftColor || '',
+  ];
+}
+
+function checkElementGptBorderShadow(_el, style) {
+  return checkGptThinBorderWideShadow({ borderWidths: borderWidthsFromStyle(style), borderColors: borderColorsFromStyle(style), boxShadow: style.boxShadow || '' });
+}
+
+function checkElementGptBorderShadowDOM(el) {
+  const style = getComputedStyle(el);
+  return checkGptThinBorderWideShadow({ borderWidths: borderWidthsFromStyle(style), borderColors: borderColorsFromStyle(style), boxShadow: style.boxShadow || '' });
+}
+
+export {
+  checkTypography,
+  isCardLikeDOM,
+  checkLayout,
+  checkPageTypography,
+  isCardLike,
+  checkPageLayout,
+  isCreamColor,
+  checkCreamPalette,
+  checkOversizedH1,
+  checkElementOversizedH1,
+  checkElementOversizedH1DOM,
+  shadowMaxBlurPx,
+  checkGptThinBorderWideShadow,
+  checkElementGptBorderShadow,
+  checkElementGptBorderShadowDOM,
+};