@monoes/monodesign 1.2.9 → 1.2.12

package/cli/engine/browser/injected/index.mjs

@@ -112,7 +112,7 @@ if (IS_BROWSER) {
   }
 
   function showSpotlight(target) {
-    if (!target || !target.getBoundingClientRect) return;
+    if (!target?.getBoundingClientRect) return;
     // Respect the spotlightBlur setting: if disabled, don't show the backdrop
     if (window.__MONODESIGN_CONFIG__?.spotlightBlur === false) {
       spotlightTarget = target;
@@ -258,10 +258,8 @@ if (IS_BROWSER) {
     }
   });
 
-  const highlight = function(el, findings) {
+  const highlight = (el, findings) => {
     if (el._monodesignOverlay) detachOverlay(el._monodesignOverlay);
-    const hasSlop = findings.some(f => RULE_CATEGORY[f.type || f.id] === 'slop');
-
     const fixed = isInFixedContext(el);
     const rect = el.getBoundingClientRect();
     const outline = document.createElement('div');
@@ -405,7 +403,7 @@ if (IS_BROWSER) {
     overlays.push(outline);
   };
 
-  const showPageBanner = function(findings) {
+  const showPageBanner = (findings) => {
     if (!findings.length) return;
     const banner = document.createElement('div');
     banner.className = 'monodesign-overlay monodesign-banner';
@@ -505,7 +503,7 @@ if (IS_BROWSER) {
         .filter(c => !c.startsWith('monodesign-') && !isLikelyHashedClass(c))
         .slice(0, 2);
       if (classes.length > 0) {
-        sel += '.' + classes.map(c => CSS.escape(c)).join('.');
+        sel += `.${classes.map(c => CSS.escape(c)).join('.')}`;
       }
     }
 
@@ -513,7 +511,7 @@ if (IS_BROWSER) {
     const parent = el.parentElement;
     if (parent) {
       try {
-        const matching = parent.querySelectorAll(':scope > ' + sel);
+        const matching = parent.querySelectorAll(`:scope > ${sel}`);
         if (matching.length > 1) {
           const sameType = [...parent.children].filter(c => c.tagName === el.tagName);
           const idx = sameType.indexOf(el) + 1;
@@ -530,7 +528,7 @@ if (IS_BROWSER) {
   function generateSelector(el) {
     if (el === document.body) return 'body';
     if (el === document.documentElement) return 'html';
-    if (el.id) return '#' + CSS.escape(el.id);
+    if (el.id) return `#${CSS.escape(el.id)}`;
 
     const parts = [];
     let current = el;
@@ -542,7 +540,7 @@ if (IS_BROWSER) {
 
       // Anchor on an ancestor's ID and stop walking up
       if (current.id) {
-        parts[0] = '#' + CSS.escape(current.id);
+        parts[0] = `#${CSS.escape(current.id)}`;
         break;
       }
 
@@ -682,7 +680,7 @@ if (IS_BROWSER) {
 
       const textColor = parseRgb(style.color);
       const fontSize = parseFloat(style.fontSize) || 16;
-      const fontWeight = parseInt(style.fontWeight) || 400;
+      const fontWeight = parseInt(style.fontWeight, 10) || 400;
       const isLargeText = fontSize >= WCAG_LARGE_TEXT_PX || (fontSize >= WCAG_LARGE_BOLD_TEXT_PX && fontWeight >= 700);
       const threshold = isLargeText ? 3.0 : 4.5;
       const clip = {
@@ -900,7 +898,7 @@ if (IS_BROWSER) {
   function sampleDrawablePixel(drawable, sourcePoint) {
     if (visualContrastRasterCache.has(drawable)) {
       const cached = visualContrastRasterCache.get(drawable);
-      if (!cached || !cached.ctx) return { status: 'unresolved', reason: cached?.reason || 'image sample failed' };
+      if (!cached?.ctx) return { status: 'unresolved', reason: cached?.reason || 'image sample failed' };
       try {
         const x = Math.max(0, Math.min(cached.width - 1, Math.floor(sourcePoint.x * cached.scaleX)));
         const y = Math.max(0, Math.min(cached.height - 1, Math.floor(sourcePoint.y * cached.scaleY)));
@@ -1035,7 +1033,7 @@ if (IS_BROWSER) {
     const unresolved = [];
 
     for (const node of nodes) {
-      if (!node || node.nodeType !== 1) continue;
+      if (node?.nodeType !== 1) continue;
       if (node.closest?.('.monodesign-overlay, .monodesign-label, .monodesign-banner, .monodesign-tooltip')) continue;
       const tag = node.tagName?.toLowerCase();
       if (tag === 'img') {
@@ -1232,7 +1230,7 @@ if (IS_BROWSER) {
     }));
   }
 
-  const printSummary = function(allFindings) {
+  const printSummary = (allFindings) => {
     if (allFindings.length === 0) {
       console.log('%c[monodesign] No anti-patterns found.', 'color: #22c55e; font-weight: bold');
       return;
@@ -1559,7 +1557,7 @@ if (IS_BROWSER) {
       try { rules = sheet.cssRules; } catch { continue; }
       if (!rules) continue;
       for (const rule of Array.from(rules)) {
-        try { stylesheetCssText += rule.cssText + '\n'; } catch { /* ignore */ }
+        try { stylesheetCssText += `${rule.cssText}\n`; } catch { /* ignore */ }
       }
     }
     const stylesheetFindings = [
@@ -1832,7 +1830,7 @@ if (IS_BROWSER) {
   }
 
   let firstScanDone = false;
-  const scan = function(options = {}) {
+  const scan = (options = {}) => {
     clearOverlays();
     const generation = scanGeneration;
     const collected = collectBrowserFindings();
@@ -1849,7 +1847,7 @@ if (IS_BROWSER) {
     return allFindings;
   };
 
-  const scanAsync = async function(options = {}) {
+  const scanAsync = async (options = {}) => {
     clearOverlays();
     const generation = scanGeneration;
     if (shouldRunVisualContrast(options)) {
@@ -1861,13 +1859,13 @@ if (IS_BROWSER) {
     return renderBrowserFindings(collectBrowserFindings(), options);
   };
 
-  const detect = function(options = {}) {
+  const detect = (options = {}) => {
     lastVisualContrastAnalyses = [];
     const { allFindings } = collectBrowserFindings();
     return options.serialize === false ? allFindings : serializeFindings(allFindings);
   };
 
-  const detectAsync = async function(options = {}) {
+  const detectAsync = async (options = {}) => {
     if (shouldRunVisualContrast(options)) {
       const { allFindings } = await collectBrowserFindingsAsync(options);
       return options.serialize === false ? allFindings : serializeFindings(allFindings);

package/cli/engine/cli/main.mjs

@@ -309,9 +309,9 @@ async function detectCli() {
   allFindings = filterByScopes(allFindings, scopes);
 
   if (allFindings.length > 0) {
-    if (jsonMode) process.stdout.write(formatFindings(allFindings, true) + '\n');
-    else if (quietMode) process.stderr.write(formatFindingSummary(allFindings.length) + '\n');
-    else process.stderr.write(formatFindings(allFindings, false) + '\n');
+    if (jsonMode) process.stdout.write(`${formatFindings(allFindings, true)}\n`);
+    else if (quietMode) process.stderr.write(`${formatFindingSummary(allFindings.length)}\n`);
+    else process.stderr.write(`${formatFindings(allFindings, false)}\n`);
     process.exit(2);
   }
   if (jsonMode) process.stdout.write('[]\n');

package/cli/engine/detect-antipatterns-browser.js

@@ -67,7 +67,7 @@ function isBrandFontOnOwnDomain(font) {
   const allowed = BRAND_FONT_DOMAINS[font];
   if (!allowed) return false;
   const host = location.hostname.toLowerCase();
-  return allowed.some(suffix => host === suffix || host.endsWith('.' + suffix));
+  return allowed.some(suffix => host === suffix || host.endsWith(`.${suffix}`));
 }
 
 const GENERIC_FONTS = new Set([
@@ -672,7 +672,7 @@ function contrastRatio(c1, c2) {
 }
 
 function parseGradientColors(bgImage) {
-  if (!bgImage || !bgImage.includes('gradient')) return [];
+  if (!bgImage?.includes('gradient')) return [];
   const colors = [];
   for (const m of bgImage.matchAll(/rgba?\([^)]+\)/g)) {
     const c = parseRgb(m[0]);
@@ -709,7 +709,7 @@ function getHue(c) {
 
 function colorToHex(c) {
   if (!c) return '?';
-  return '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('');
+  return `#${[c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('')}`;
 }
 
 // --- cli/engine/shared/fonts.mjs ---
@@ -778,8 +778,8 @@ function checkBorders(tag, widths, colors, radius) {
 // (plus whitespace / variation selectors). Emojis render as multicolor glyphs
 // regardless of CSS `color`, so contrast checks against the element's text
 // color are meaningless for these nodes.
-const EMOJI_CHAR_RE = /[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]/u;
-const EMOJI_CHARS_GLOBAL = /[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]/gu;
+const EMOJI_CHAR_RE = /(?:[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}]|\u{FE0F}|\u{200D}|[\u{1F3FB}-\u{1F3FF}])/u;
+const EMOJI_CHARS_GLOBAL = /(?:[\u{1F1E6}-\u{1F1FF}\u{1F300}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{27BF}\u{2300}-\u{23FF}]|\u{FE0F}|\u{200D}|[\u{1F3FB}-\u{1F3FF}])/gu;
 function isEmojiOnlyText(text) {
   if (!text) return false;
   if (!EMOJI_CHAR_RE.test(text)) return false;
@@ -805,7 +805,7 @@ function checkColors(opts) {
   if (hasDirectText && textColor && !isEmojiOnly) {
     // Run background-dependent checks against either a solid bg or, if the
     // ancestor is a gradient, against every gradient stop (use the worst case).
-    const bgs = effectiveBg ? [effectiveBg] : (effectiveBgStops && effectiveBgStops.length ? effectiveBgStops : null);
+    const bgs = effectiveBg ? [effectiveBg] : (effectiveBgStops?.length ? effectiveBgStops : null);
     if (bgs) {
       // Gray on colored background — flag if every stop is chromatic
       const textLum = relativeLuminance(textColor);
@@ -986,7 +986,6 @@ function isAccentColor(cssColor) {
   if (!cssColor) return false;
   const s = String(cssColor).trim();
   // rgb / rgba — direct channel-distance check.
-  const rgbM = /rgba?\(\s*(\d+)\s*,?\s+|\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(s.replace(/rgba?\(\s*/, 'rgb(').replace(/,/g, ', '));
   const rgbStrict = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(s);
   if (rgbStrict) {
     const r = +rgbStrict[1], g = +rgbStrict[2], b = +rgbStrict[3];
@@ -1031,7 +1030,7 @@ function isAccentColor(cssColor) {
 // uppercase eyebrow OR the modern accent-colored bold eyebrow.
 function checkHeroEyebrow(opts) {
   const {
-    headingTag, headingText, headingFontSize,
+    headingTag, headingText,
     siblingTag, siblingText, siblingTextTransform,
     siblingFontSize, siblingLetterSpacing,
     siblingFontWeight, siblingColor,
@@ -1502,7 +1501,7 @@ function parseRadiusToPx(value, widthPx) {
   return num;
 }
 
-function resolveBorderRadiusPx(el, style, widthPx, win) {
+function resolveBorderRadiusPx(_el, style, widthPx, _win) {
   const fromComputed = parseRadiusToPx(style.borderRadius, widthPx);
   if (fromComputed !== null) return fromComputed;
   return 0;
@@ -1545,7 +1544,7 @@ function checkElementColorsDOM(el) {
     effectiveBg,
     effectiveBgStops: effectiveBg ? null : resolveGradientStops(el),
     fontSize: parseFloat(style.fontSize) || 16,
-    fontWeight: parseInt(style.fontWeight) || 400,
+    fontWeight: parseInt(style.fontWeight, 10) || 400,
     hasDirectText,
     isEmojiOnly: isEmojiOnlyText(directText),
     bgClip: style.webkitBackgroundClip || style.backgroundClip || '',
@@ -1653,7 +1652,7 @@ function buildCustomPropMap(document) {
       if (!style) continue;
       for (let i = 0; i < style.length; i++) {
         const prop = style[i];
-        if (!prop || !prop.startsWith('--')) continue;
+        if (!prop?.startsWith('--')) continue;
         const val = style.getPropertyValue(prop).trim();
         if (val) map.set(prop, val);
       }
@@ -1695,7 +1694,7 @@ function oklchToRgb(L, C, H) {
   const bLin = -0.0041960863 * lc - 0.7034186147 * mc + 1.7076147010 * sc;
   const enc = (x) => {
     const c = Math.max(0, Math.min(1, x));
-    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
   };
   return {
     r: Math.round(enc(rLin) * 255),
@@ -1997,7 +1996,7 @@ function resolveFontSizePx(el, win) {
     const v = chain[i];
     if (!v || v === 'inherit') continue;
     const num = parseFloat(v);
-    if (isNaN(num)) continue;
+    if (Number.isNaN(num)) continue;
     if (v.endsWith('px')) px = num;
     else if (v.endsWith('rem')) px = num * 16;
     else if (v.endsWith('em')) px = num * px;
@@ -2012,7 +2011,7 @@ function resolveFontSizePx(el, win) {
 function resolveLengthPx(value, fontSizePx) {
   if (!value || value === 'normal' || value === 'auto' || value === 'inherit') return null;
   const num = parseFloat(value);
-  if (isNaN(num)) return null;
+  if (Number.isNaN(num)) return null;
   if (value.endsWith('px')) return num;
   if (value.endsWith('rem')) return num * 16;
   if (value.endsWith('em')) return num * fontSizePx;
@@ -2128,7 +2127,7 @@ function checkQuality(opts) {
   // font-size — bigger text demands proportionally more padding.
   //   vertical:   max(4px, fontSize × 0.3)
   //   horizontal: max(8px, fontSize × 0.5)
-  const isInlineCode = tag === 'code' && !(el.closest && el.closest('pre'));
+  const isInlineCode = tag === 'code' && !el.closest?.('pre');
   if (!isInlineCode && rect && hasDirectText && textLen > 20 && rect.width > 100 && rect.height > 30) {
     const borders = {
       top: parseFloat(style.borderTopWidth) || 0,
@@ -2244,7 +2243,7 @@ function checkQuality(opts) {
         const CHILD_INSULATE_THRESHOLD = 4;
         const childrenInsulate = { top: false, right: false, bottom: false, left: false };
         for (const child of el.children) {
-          let childStyle = getComputedStyleFor(win, child);
+          const childStyle = getComputedStyleFor(win, child);
           if (!childStyle) continue;
           const childPad = {
             top:    resolveLengthPx(childStyle.paddingTop,    fontSize) ?? 0,
@@ -2376,7 +2375,7 @@ function checkQuality(opts) {
   // Only flag actual body content, not UI labels (buttons, tabs, badges, captions, footer text, etc.)
   if (hasDirectText && textLen > 20 && fontSize < 12) {
     const skipTags = ['sub', 'sup', 'code', 'kbd', 'samp', 'var', 'caption', 'figcaption'];
-    const inUIContext = el.closest && el.closest('button, a, label, summary, pre, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], nav, footer, [aria-hidden="true"], [class*="badge" i], [class*="caption" i], [class*="chip" i], [class*="code" i], [class*="console" i], [class*="diff" i], [class*="label" i], [class*="meta" i], [class*="mock" i], [class*="pill" i], [class*="preview" i], [class*="tag" i], [class*="terminal" i], [class*="writes" i]');
+    const inUIContext = el.closest?.('button, a, label, summary, pre, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], nav, footer, [aria-hidden="true"], [class*="badge" i], [class*="caption" i], [class*="chip" i], [class*="code" i], [class*="console" i], [class*="diff" i], [class*="label" i], [class*="meta" i], [class*="mock" i], [class*="pill" i], [class*="preview" i], [class*="tag" i], [class*="terminal" i], [class*="writes" i]');
     const isUppercase = style.textTransform === 'uppercase';
     if (!skipTags.includes(tag) && !inUIContext && !isUppercase) {
       findings.push({ id: 'tiny-text', snippet: `${fontSize}px body text` });
@@ -2441,7 +2440,7 @@ function checkPageQualityFromDoc(doc) {
   let prevLevel = 0;
   let prevText = '';
   for (const h of headings) {
-    const level = parseInt(h.tagName[1]);
+    const level = parseInt(h.tagName[1], 10);
     const text = (h.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 60);
     if (prevLevel > 0 && level > prevLevel + 1) {
       findings.push({
@@ -2489,7 +2488,7 @@ function checkElementBorders(tag, style, overrides, resolvedRadius) {
     if (widths[s] === 0 && overrides && overrides[s]) {
       widths[s] = overrides[s].width;
       colors[s] = overrides[s].color;
-    } else if (colors[s] && colors[s].startsWith('var(') && overrides && overrides[s]) {
+    } else if (colors[s]?.startsWith('var(') && overrides?.[s]) {
       // Longhand case: jsdom kept the width but left the color as the
       // literal `var(...)` string. Substitute the resolved color.
       colors[s] = overrides[s].color;
@@ -2550,7 +2549,7 @@ function checkElementColors(el, style, tag, window, customPropMap, hasAnchorInhe
     effectiveBg,
     effectiveBgStops: effectiveBg ? null : resolveGradientStops(el, window),
     fontSize: parseFloat(style.fontSize) || 16,
-    fontWeight: parseInt(style.fontWeight) || 400,
+    fontWeight: parseInt(style.fontWeight, 10) || 400,
     hasDirectText,
     isEmojiOnly: isEmojiOnlyText(directText),
     bgClip: style.webkitBackgroundClip || style.backgroundClip || '',
@@ -2677,7 +2676,7 @@ function checkTypography() {
   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 && el.closest('.monodesign-overlay, .monodesign-label, .monodesign-banner, .monodesign-tooltip')) continue;
+    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;
@@ -2718,7 +2717,7 @@ function checkTypography() {
     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)` });
+      findings.push({ type: 'flat-type-hierarchy', detail: `Sizes: ${sorted.map(s => `${s}px`).join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
     }
   }
 
@@ -2837,7 +2836,7 @@ function checkPageTypography(doc, win) {
     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)` });
+      findings.push({ id: 'flat-type-hierarchy', snippet: `Sizes: ${sorted.map(s => `${s}px`).join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
     }
   }
 
@@ -2969,7 +2968,7 @@ function checkCreamPalette(doc, win) {
   // 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 && el.getAttribute ? el.getAttribute('class') : '');
+    const tok = creamFromClassList(el?.getAttribute ? el.getAttribute('class') : '');
     if (tok) {
       findings.push({ id: 'cream-palette', snippet: `cream/beige page background (Tailwind ${tok})` });
       break;
@@ -3005,7 +3004,7 @@ function checkOversizedH1({ tag, fontSize, headingText, rect = null, viewportWid
   return [];
 }
 
-function checkElementOversizedH1(el, style, tag, window) {
+function checkElementOversizedH1(el, _style, tag, window) {
   if (tag !== 'h1') return [];
   const fontSize = resolveFontSizePx(el, window);
   const headingText = (el.textContent || '').trim().replace(/\s+/g, ' ');
@@ -3089,7 +3088,7 @@ function borderColorsFromStyle(style) {
   ];
 }
 
-function checkElementGptBorderShadow(el, style) {
+function checkElementGptBorderShadow(_el, style) {
   return checkGptThinBorderWideShadow({ borderWidths: borderWidthsFromStyle(style), borderColors: borderColorsFromStyle(style), boxShadow: style.boxShadow || '' });
 }
 
@@ -3239,7 +3238,7 @@ function checkClippedOverflow(el, style, getStyle) {
   return [];
 }
 
-function checkElementClippedOverflow(el, style, tag, window) {
+function checkElementClippedOverflow(el, style, _tag, window) {
   return checkClippedOverflow(el, style, (n) => window.getComputedStyle(n));
 }
 
@@ -3358,6 +3357,29 @@ function checkElementTextOverflowDOM(el) {
 // conditions can't be read off a resting element. Shared by the regex, static
 // and browser engines (each hands over its own CSS text).
 
+// Split a selector list on top-level commas only — i.e. commas inside a
+// functional pseudo-class's parens (`:is(a, button)`, `:where(a, b)`,
+// `:not(a, b)`, `:has(x, y)`) don't split. A naive `str.split(',')` breaks
+// `:is(a, button):focus { outline: none }` into `:is(a` and `button):focus`,
+// which both selectorTargetsInteractive() and the dark/light selector maps
+// below then treat as two unrelated (and malformed) selectors — producing
+// false-positive missing-focus-visible findings and double-counted rules.
+function splitTopLevelCommas(str) {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let k = 0; k < str.length; k++) {
+    const ch = str[k];
+    if (ch === '(') depth++;
+    else if (ch === ')') depth = Math.max(0, depth - 1);
+    else if (ch === ',' && depth === 0) {
+      parts.push(str.slice(start, k));
+      start = k + 1;
+    }
+  }
+  parts.push(str.slice(start));
+  return parts;
+}
+
 // Parse flat CSS into { selector, body, dark } tuples, tracking one level of
 // dark-scheme context (a `@media (prefers-color-scheme: dark)` ancestor).
 // @supports / @layer / @container / @scope are transparently descended.
@@ -3387,7 +3409,7 @@ function collectCssRules(css, dark = false, depth = 0) {
       }
       continue;
     }
-    for (const sel of prelude.split(',').map(s => s.trim()).filter(Boolean)) {
+    for (const sel of splitTopLevelCommas(prelude).map(s => s.trim()).filter(Boolean)) {
       out.push({ selector: sel, body, dark });
     }
   }
@@ -3562,7 +3584,7 @@ function checkElementImageDimensions(el, style) {
   const parts = [el.getAttribute?.('style') || el.attribs?.style || ''];
   const ar = style && (style.aspectRatio || style['aspect-ratio']);
   if (ar && ar !== 'auto') parts.push(`aspect-ratio:${ar}`);
-  const h = style && style.height;
+  const h = style?.height;
   if (h && h !== 'auto' && h !== '') parts.push(`height:${h}`);
   return checkImageDimensions({ hasWidthAttr, hasHeightAttr, style: parts.join(';') });
 }
@@ -3622,7 +3644,7 @@ function checkElementSmallTouchTarget(el, style, tag) {
   // (button-like). jsdom returns '' for the default inline display, so key
   // off "not blockish" rather than "== inline".
   const isBlockish = /^(block|flex|grid|inline-block|inline-flex|table)/.test(style.display || '');
-  const inProse = !!(el.closest && el.closest(PROSE_ANCESTOR_SELECTOR));
+  const inProse = !!el.closest?.(PROSE_ANCESTOR_SELECTOR);
   const isInlineLinkInProse = tag === 'a' && !isBlockish && inProse;
   return checkSmallTouchTarget({ tag, role, href, inputType, widthPx, heightPx, isInlineLinkInProse });
 }
@@ -3636,7 +3658,7 @@ function checkElementSmallTouchTargetDOM(el) {
   const inputType = el.getAttribute('type') || '';
   const style = getComputedStyle(el);
   const isBlockish = /^(block|flex|grid|inline-block|inline-flex|table)/.test(style.display || '');
-  const inProse = !!(el.closest && el.closest(PROSE_ANCESTOR_SELECTOR));
+  const inProse = !!el.closest?.(PROSE_ANCESTOR_SELECTOR);
   const isInlineLinkInProse = tag === 'a' && !isBlockish && inProse;
   return checkSmallTouchTarget({ tag, role, href, inputType, widthPx: rect.width, heightPx: rect.height, isInlineLinkInProse });
 }
@@ -3756,7 +3778,7 @@ if (IS_BROWSER) {
   }
 
   function showSpotlight(target) {
-    if (!target || !target.getBoundingClientRect) return;
+    if (!target?.getBoundingClientRect) return;
     // Respect the spotlightBlur setting: if disabled, don't show the backdrop
     if (window.__MONODESIGN_CONFIG__?.spotlightBlur === false) {
       spotlightTarget = target;
@@ -3902,10 +3924,8 @@ if (IS_BROWSER) {
     }
   });
 
-  const highlight = function(el, findings) {
+  const highlight = (el, findings) => {
     if (el._monodesignOverlay) detachOverlay(el._monodesignOverlay);
-    const hasSlop = findings.some(f => RULE_CATEGORY[f.type || f.id] === 'slop');
-
     const fixed = isInFixedContext(el);
     const rect = el.getBoundingClientRect();
     const outline = document.createElement('div');
@@ -4049,7 +4069,7 @@ if (IS_BROWSER) {
     overlays.push(outline);
   };
 
-  const showPageBanner = function(findings) {
+  const showPageBanner = (findings) => {
     if (!findings.length) return;
     const banner = document.createElement('div');
     banner.className = 'monodesign-overlay monodesign-banner';
@@ -4149,7 +4169,7 @@ if (IS_BROWSER) {
         .filter(c => !c.startsWith('monodesign-') && !isLikelyHashedClass(c))
         .slice(0, 2);
       if (classes.length > 0) {
-        sel += '.' + classes.map(c => CSS.escape(c)).join('.');
+        sel += `.${classes.map(c => CSS.escape(c)).join('.')}`;
       }
     }
 
@@ -4157,7 +4177,7 @@ if (IS_BROWSER) {
     const parent = el.parentElement;
     if (parent) {
       try {
-        const matching = parent.querySelectorAll(':scope > ' + sel);
+        const matching = parent.querySelectorAll(`:scope > ${sel}`);
         if (matching.length > 1) {
           const sameType = [...parent.children].filter(c => c.tagName === el.tagName);
           const idx = sameType.indexOf(el) + 1;
@@ -4174,7 +4194,7 @@ if (IS_BROWSER) {
   function generateSelector(el) {
     if (el === document.body) return 'body';
     if (el === document.documentElement) return 'html';
-    if (el.id) return '#' + CSS.escape(el.id);
+    if (el.id) return `#${CSS.escape(el.id)}`;
 
     const parts = [];
     let current = el;
@@ -4186,7 +4206,7 @@ if (IS_BROWSER) {
 
       // Anchor on an ancestor's ID and stop walking up
       if (current.id) {
-        parts[0] = '#' + CSS.escape(current.id);
+        parts[0] = `#${CSS.escape(current.id)}`;
         break;
       }
 
@@ -4326,7 +4346,7 @@ if (IS_BROWSER) {
 
       const textColor = parseRgb(style.color);
       const fontSize = parseFloat(style.fontSize) || 16;
-      const fontWeight = parseInt(style.fontWeight) || 400;
+      const fontWeight = parseInt(style.fontWeight, 10) || 400;
       const isLargeText = fontSize >= WCAG_LARGE_TEXT_PX || (fontSize >= WCAG_LARGE_BOLD_TEXT_PX && fontWeight >= 700);
       const threshold = isLargeText ? 3.0 : 4.5;
       const clip = {
@@ -4544,7 +4564,7 @@ if (IS_BROWSER) {
   function sampleDrawablePixel(drawable, sourcePoint) {
     if (visualContrastRasterCache.has(drawable)) {
       const cached = visualContrastRasterCache.get(drawable);
-      if (!cached || !cached.ctx) return { status: 'unresolved', reason: cached?.reason || 'image sample failed' };
+      if (!cached?.ctx) return { status: 'unresolved', reason: cached?.reason || 'image sample failed' };
       try {
         const x = Math.max(0, Math.min(cached.width - 1, Math.floor(sourcePoint.x * cached.scaleX)));
         const y = Math.max(0, Math.min(cached.height - 1, Math.floor(sourcePoint.y * cached.scaleY)));
@@ -4679,7 +4699,7 @@ if (IS_BROWSER) {
     const unresolved = [];
 
     for (const node of nodes) {
-      if (!node || node.nodeType !== 1) continue;
+      if (node?.nodeType !== 1) continue;
       if (node.closest?.('.monodesign-overlay, .monodesign-label, .monodesign-banner, .monodesign-tooltip')) continue;
       const tag = node.tagName?.toLowerCase();
       if (tag === 'img') {
@@ -4876,7 +4896,7 @@ if (IS_BROWSER) {
     }));
   }
 
-  const printSummary = function(allFindings) {
+  const printSummary = (allFindings) => {
     if (allFindings.length === 0) {
       console.log('%c[monodesign] No anti-patterns found.', 'color: #22c55e; font-weight: bold');
       return;
@@ -5203,7 +5223,7 @@ if (IS_BROWSER) {
       try { rules = sheet.cssRules; } catch { continue; }
       if (!rules) continue;
       for (const rule of Array.from(rules)) {
-        try { stylesheetCssText += rule.cssText + '\n'; } catch { /* ignore */ }
+        try { stylesheetCssText += `${rule.cssText}\n`; } catch { /* ignore */ }
       }
     }
     const stylesheetFindings = [
@@ -5476,7 +5496,7 @@ if (IS_BROWSER) {
   }
 
   let firstScanDone = false;
-  const scan = function(options = {}) {
+  const scan = (options = {}) => {
     clearOverlays();
     const generation = scanGeneration;
     const collected = collectBrowserFindings();
@@ -5493,7 +5513,7 @@ if (IS_BROWSER) {
     return allFindings;
   };
 
-  const scanAsync = async function(options = {}) {
+  const scanAsync = async (options = {}) => {
     clearOverlays();
     const generation = scanGeneration;
     if (shouldRunVisualContrast(options)) {
@@ -5505,13 +5525,13 @@ if (IS_BROWSER) {
     return renderBrowserFindings(collectBrowserFindings(), options);
   };
 
-  const detect = function(options = {}) {
+  const detect = (options = {}) => {
     lastVisualContrastAnalyses = [];
     const { allFindings } = collectBrowserFindings();
     return options.serialize === false ? allFindings : serializeFindings(allFindings);
   };
 
-  const detectAsync = async function(options = {}) {
+  const detectAsync = async (options = {}) => {
     if (shouldRunVisualContrast(options)) {
       const { allFindings } = await collectBrowserFindingsAsync(options);
       return options.serialize === false ? allFindings : serializeFindings(allFindings);

package/cli/engine/engines/regex/detect-text.mjs

@@ -106,22 +106,22 @@ const REGEX_MATCHERS = [
     fmt: (m) => `Google Fonts: ${m.overusedGoogleFont || firstOverusedGoogleFont(m[0])}` },
   // --- Gradient text ---
   { id: 'gradient-text', regex: /background-clip\s*:\s*text|-webkit-background-clip\s*:\s*text/gi,
-    test: (m, line) => /gradient/i.test(line),
+    test: (_m, line) => /gradient/i.test(line),
     fmt: () => 'background-clip: text + gradient' },
   // --- Gradient text (Tailwind) ---
   { id: 'gradient-text', regex: /\bbg-clip-text\b/g,
-    test: (m, line) => /\bbg-gradient-to-/i.test(line),
+    test: (_m, line) => /\bbg-gradient-to-/i.test(line),
     fmt: () => 'bg-clip-text + bg-gradient' },
   // --- Tailwind gray on colored bg ---
   { id: 'gray-on-color', regex: /\btext-(?:gray|slate|zinc|neutral|stone)-(\d+)\b/g,
-    test: (m, line) => /\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/.test(line),
+    test: (_m, line) => /\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/.test(line),
     fmt: (m, line) => { const bg = line.match(/\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d+\b/); return `${m[0]} on ${bg?.[0] || '?'}`; } },
   // --- Tailwind AI palette ---
   { id: 'ai-color-palette', regex: /\btext-(?:purple|violet|indigo)-(\d+)\b/g,
-    test: (m, line) => /\btext-(?:[2-9]xl|[3-9]xl)\b|<h[1-3]/i.test(line),
+    test: (_m, line) => /\btext-(?:[2-9]xl|[3-9]xl)\b|<h[1-3]/i.test(line),
     fmt: (m) => `${m[0]} on heading` },
   { id: 'ai-color-palette', regex: /\bfrom-(?:purple|violet|indigo)-(\d+)\b/g,
-    test: (m, line) => /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(line),
+    test: (_m, line) => /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(line),
     fmt: (m) => `${m[0]} gradient` },
   // --- Bounce/elastic easing ---
   { id: 'bounce-easing', regex: /\banimate-bounce\b/g,
@@ -226,7 +226,7 @@ const REGEX_ANALYZERS = [
     const lines = content.split('\n');
     let line = 1;
     for (let i = 0; i < lines.length; i++) { if (/font-size/i.test(lines[i]) || /\btext-(?:xs|sm|base|lg|xl|\d)/i.test(lines[i])) { line = i + 1; break; } }
-    return [finding('flat-type-hierarchy', filePath, `Sizes: ${sorted.map(s => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)`, line)];
+    return [finding('flat-type-hierarchy', filePath, `Sizes: ${sorted.map(s => `${s}px`).join(', ')} (ratio ${ratio.toFixed(1)}:1)`, line)];
   },
   // Monotonous spacing (regex)
   (content, filePath) => {