@etus/seven-skill 0.1.0-beta.2 → 0.1.0-beta.4

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

@@ -21,6 +21,7 @@ import { runChecks } from '../../rules/checks.mjs'
 
 const hasRounded = (line) => /\brounded(?:-\w+)?\b/.test(line)
 const hasBorderRadius = (line) => /border-radius/i.test(line)
+const isCommentLine = (line) => /^\s*(?:\/\/|\/\*|\*|\*\/)/.test(line)
 const isSafeElement = (line) =>
   /<(?:blockquote|nav[\s>]|pre[\s>]|code[\s>]|a\s|input[\s>]|span[\s>])/i.test(line)
 
@@ -53,9 +54,265 @@ const COLORED_BORDER_CLASS_RE =
   /\bborder-(?:[lrtbxy]-)?(?:(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-\d{2,3}|primary|secondary|destructive|warning|success|info|accent|brand)\b/
 const hasColoredSideAccent = (line) => COLORED_BORDER_CLASS_RE.test(line)
 
+function lineAtIndex(content, index) {
+  return content.slice(0, Math.max(0, index)).split('\n').length
+}
+
+function normalizeVisibleText(value) {
+  return String(value || '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+/** Extract text that can plausibly reach product chrome, excluding code and comments. */
+function extractUserFacingText(content) {
+  const masked = String(content || '')
+    .replace(/\/\*[\s\S]*?\*\//g, ' ')
+    .replace(/(^|[^:])\/\/[^\n]*/gm, '$1 ')
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, ' ')
+    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, ' ')
+  const values = []
+  for (const match of masked.matchAll(/>([^<{][^<]*)</g)) {
+    const text = normalizeVisibleText(match[1])
+    if (text) values.push(text)
+  }
+  for (const match of masked.matchAll(/\b(?:aria-label|title|placeholder|label|description|helperText|emptyText)\s*=\s*(?:\{\s*)?["'`]([^"'`]{2,240})["'`]/gi)) {
+    const text = normalizeVisibleText(match[1])
+    if (text) values.push(text)
+  }
+  return values.join('\n')
+}
+
+function parseCssLengthPx(value) {
+  const match = String(value || '').trim().match(/^(-?[\d.]+)(px|rem|em)$/i)
+  if (!match) return null
+  const amount = Number(match[1])
+  if (!Number.isFinite(amount)) return null
+  return match[2].toLowerCase() === 'px' ? amount : amount * 16
+}
+
+function hasShellChromeOutline(attrs) {
+  const classValue =
+    String(attrs || '').match(/\bclass(?:Name)?\s*=\s*["']([^"']*)["']/i)?.[1] || ''
+  const utilityOutline = classValue.split(/\s+/).some((token) => {
+    const utility = token.split(':').at(-1) || ''
+    if (/^shadow(?:$|-)/.test(utility)) return utility !== 'shadow-none'
+    if (/^border(?:$|-[trblxy]$|-[trblxy]-(?!0$|none$)|-(?:\d+|\[[^\]]+\])$)/.test(utility)) {
+      return !/(?:^|-)(?:0|none)$/.test(utility)
+    }
+    return false
+  })
+  return utilityOutline || /\b(?:boxShadow|box-shadow|border(?:Top|Right|Bottom|Left)?(?:Width)?)\s*:/i.test(attrs)
+}
+
+function hasManualSidebarOffset(attrs) {
+  const classValue =
+    String(attrs || '').match(/\bclass(?:Name)?\s*=\s*["']([^"']*)["']/i)?.[1] || ''
+  return classValue.split(/\s+/).some((token) => {
+    const utility = token.split(':').at(-1) || ''
+    return /^(?:m[lr]|p[lr]|left|right)-/.test(utility) || /^w-\[calc\(/.test(utility)
+  })
+}
+
+/**
+ * Lightweight JSX ancestry check for Seven's application shell. Runtime DOM
+ * geometry is checked separately; this catches the same mistake before render.
+ */
+function analyzeSidebarTopbarShell(content, filePath) {
+  if (!/\.[cm]?[jt]sx$/i.test(filePath || '')) return []
+  if (!/<SidebarProvider\b/.test(content) || !/<Sidebar\b/.test(content) || !/<Topbar\b/.test(content)) {
+    return []
+  }
+
+  const providerCount = [...content.matchAll(/<SidebarProvider\b/g)].length
+  const topbarCount = [...content.matchAll(/<Topbar\b/g)].length
+  const tagRe = /<(\/?)(SidebarProvider|SidebarInset|Sidebar|Topbar|SidebarTrigger)\b([^>]*?)(\/?)>/g
+  const stack = []
+  const topbars = []
+  const findings = []
+  let match
+
+  while ((match = tagRe.exec(content)) !== null) {
+    const closing = match[1] === '/'
+    const name = match[2]
+    const attrs = match[3] || ''
+    const selfClosing = match[4] === '/' || /\/\s*$/.test(attrs)
+
+    if (closing) {
+      const index = stack.findLastIndex((entry) => entry.name === name)
+      if (index >= 0) stack.splice(index, 1)
+      continue
+    }
+
+    const provider = [...stack].reverse().find((entry) => entry.name === 'SidebarProvider')
+    const inset = [...stack].reverse().find((entry) => entry.name === 'SidebarInset')
+    const entry = { name, index: match.index, attrs }
+
+    if (name === 'SidebarProvider') {
+      entry.hasSidebar = false
+      entry.staticSidebar = false
+    } else if (name === 'Sidebar' && provider) {
+      provider.hasSidebar = true
+      if (/\bcollapsible\s*=\s*(?:["']none["']|\{\s*["']none["']\s*\})/i.test(attrs)) {
+        provider.staticSidebar = true
+      }
+    } else if (name === 'SidebarInset' && provider && hasManualSidebarOffset(attrs)) {
+      findings.push(
+        finding(
+          'sidebar-topbar-shell',
+          filePath,
+          'SidebarInset uses a manual sidebar offset instead of the provider sibling layout',
+          lineAtIndex(content, match.index)
+        )
+      )
+    } else if (name === 'Topbar') {
+      const validAncestry = Boolean(provider && inset)
+      const topbar = {
+        index: match.index,
+        provider,
+        validAncestry,
+        hasTrigger: false,
+      }
+      topbars.push(topbar)
+      entry.topbar = topbar
+
+      if (provider && !inset) {
+        findings.push(
+          finding(
+            'sidebar-topbar-shell',
+            filePath,
+            'Topbar is inside SidebarProvider but outside SidebarInset',
+            lineAtIndex(content, match.index)
+          )
+        )
+      } else if (!provider && providerCount === 1 && topbarCount === 1) {
+        findings.push(
+          finding(
+            'sidebar-topbar-shell',
+            filePath,
+            'Topbar is outside the only SidebarProvider; the shell would be T-shaped or disconnected',
+            lineAtIndex(content, match.index)
+          )
+        )
+      }
+
+      if (validAncestry && hasShellChromeOutline(attrs)) {
+        findings.push(
+          finding(
+            'sidebar-topbar-shell',
+            filePath,
+            'Shell Topbar adds a border or shadow; Seven chrome is borderless',
+            lineAtIndex(content, match.index)
+          )
+        )
+      }
+    } else if (name === 'SidebarTrigger') {
+      const topbarEntry = [...stack].reverse().find((item) => item.name === 'Topbar')
+      if (topbarEntry?.topbar) topbarEntry.topbar.hasTrigger = true
+    }
+
+    if (!selfClosing) stack.push(entry)
+  }
+
+  for (const topbar of topbars) {
+    if (
+      topbar.validAncestry &&
+      topbar.provider?.hasSidebar &&
+      !topbar.provider.staticSidebar &&
+      !topbar.hasTrigger
+    ) {
+      findings.push(
+        finding(
+          'sidebar-topbar-shell',
+          filePath,
+          'Collapsible Sidebar + Topbar shell has no SidebarTrigger inside Topbar',
+          lineAtIndex(content, topbar.index)
+        )
+      )
+    }
+  }
+
+  return findings
+}
+
+/**
+ * Source contract for the dual Rail. Labels are authored data, so checking
+ * them before render catches the empty 200px overlay that DOM geometry alone
+ * cannot explain. The ancestry pass also rejects Link > button nesting.
+ */
+function analyzeSidebarRailBehavior(content, filePath) {
+  if (!/\.[cm]?[jt]sx$/i.test(filePath || '')) return []
+  if (!/<SidebarRailContent\b/.test(content) || !/<SidebarRailButton\b/.test(content)) {
+    return []
+  }
+
+  const findings = []
+  const stack = []
+  const tagRe = /<(\/?)(SidebarRailButton|NavLink|Link|a)\b([^>]*?)(\/?)>/g
+  let match
+
+  while ((match = tagRe.exec(content)) !== null) {
+    const closing = match[1] === '/'
+    const name = match[2]
+    const attrs = match[3] || ''
+    const selfClosing = match[4] === '/' || /\/\s*$/.test(attrs)
+
+    if (closing) {
+      const index = stack.findLastIndex((entry) => entry.name === name)
+      if (index >= 0) stack.splice(index, 1)
+      continue
+    }
+
+    if (name === 'SidebarRailButton') {
+      if (!/\blabel\s*=/.test(attrs)) {
+        findings.push(
+          finding(
+            'sidebar-rail-behavior',
+            filePath,
+            'SidebarRailButton in a dual Rail has no label for the expanded overlay',
+            lineAtIndex(content, match.index)
+          )
+        )
+      }
+
+      const linkAncestor = [...stack]
+        .reverse()
+        .find((entry) => entry.name === 'Link' || entry.name === 'NavLink' || entry.name === 'a')
+      if (linkAncestor) {
+        findings.push(
+          finding(
+            'sidebar-rail-behavior',
+            filePath,
+            `${linkAncestor.name} wraps SidebarRailButton; put asChild on SidebarRailButton and make the link its child`,
+            lineAtIndex(content, match.index)
+          )
+        )
+      }
+    }
+
+    if (!selfClosing) stack.push({ name })
+  }
+
+  return findings
+}
+
 // Per-line matchers — each emits one Seven rule ID. `test(match, line)` gates
 // the hit; `fmt(match, line)` builds the snippet.
 const REGEX_MATCHERS = [
+  {
+    id: 'broken-image',
+    regex: /<img\b[^>]*?\bsrc\s*=\s*(?:""|''|"\s+"|'\s+'|"#"|'#')/gi,
+    test: (match, line) => !isCommentLine(line),
+    fmt: (match) => match[0],
+  },
+  {
+    id: 'broken-image',
+    regex: /<img\b(?:(?!\bsrc\s*=)[^>])*>/gi,
+    test: (match, line) => !isCommentLine(line) && !/\{\s*\.\.\./.test(match[0]),
+    fmt: () => '<img> without src',
+  },
   // --- Side-stripe border ---
   // A Tailwind side border is a stripe only when it is >=2px AND carries a
   // colored accent. A bare `border-l-2` (default/neutral color) is a
@@ -195,6 +452,200 @@ const REGEX_MATCHERS = [
       return `transition-property: ${found ? found.join(', ') : m[1].trim()}`
     },
   },
+  // --- Current upstream signals adapted to Seven ---
+  {
+    id: 'radial-halo',
+    regex: /radial-gradient\([^;{}\n]*(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\s*\))[^;{}\n]*\)/gi,
+    test: (m, line) => !/(?:chart|heatmap|radar|canvas|mask-image)/i.test(line),
+    fmt: () => 'radial-gradient color wash fading to transparent',
+  },
+  {
+    id: 'marquee',
+    regex: /<marquee\b[^>]*>|\banimate-(?:marquee|ticker|scroll)\b/gi,
+    test: (m, line) => !isCommentLine(line),
+    fmt: (m) => m[0],
+  },
+  {
+    id: 'blinking-cursor',
+    regex: /\banimate-(?:blink|cursor|caret)\b|animation(?:-name)?\s*:\s*(?:blink|cursor|caret)\b/gi,
+    test: (m, line, filePath) =>
+      !/<(?:input|textarea)\b|contenteditable/i.test(line) &&
+      !/(?:input-?otp|otpinput|editable)/i.test(filePath || ''),
+    fmt: (m) => m[0],
+  },
+  {
+    id: 'extreme-negative-tracking',
+    regex: /letter-spacing\s*:\s*(-?[\d.]+)(em|px)|\btracking-\[(-?[\d.]+)(em|px)\]/gi,
+    test: (m) => {
+      const value = Number(m[1] ?? m[3])
+      const unit = String(m[2] ?? m[4]).toLowerCase()
+      return unit === 'em' ? value < -0.075 : value < -1.2
+    },
+    fmt: (m) => m[0],
+  },
+  {
+    id: 'repeating-stripes-gradient',
+    regex: /repeating-(?:linear|radial|conic)-gradient\s*\(/gi,
+    test: (m, line, filePath) =>
+      !/(?:chart|progress|skeleton|mask-image|checkerboard|color-picker|alpha)/i.test(line) &&
+      !/(?:colorpicker|color-picker|colormath)/i.test(filePath || ''),
+    fmt: (m) => m[0],
+  },
+  {
+    id: 'image-hover-transform',
+    regex: /img\s*:\s*hover\s*\{[^}]*transform\s*:\s*(?:scale|rotate)|<img\b[^>]*\bhover:(?:scale|rotate)-[^\s"']+/gi,
+    test: (m, line) => !isCommentLine(line),
+    fmt: () => 'image scales or rotates on hover',
+  },
+  {
+    id: 'undersized-ui-text',
+    regex: /<(?:a|button|label|th|td|time|option|summary)\b[^>]*(?:text-\[(?:length:)?([\d.]+)px\]|font-size\s*:\s*([\d.]+)px)[^>]*>/gi,
+    test: (m) => Number(m[1] ?? m[2]) < 11,
+    fmt: (m) => `${Number(m[1] ?? m[2])}px functional text`,
+  },
+]
+
+const SOURCE_ANALYZERS = [
+  analyzeSidebarTopbarShell,
+  analyzeSidebarRailBehavior,
+  // A small round element using a pulse animation. Static status dots without
+  // animation and real progress indicators are intentionally ignored.
+  (content, filePath) => {
+    const tagRe = /<(span|div|i)\b([^>]*)>/gi
+    let match
+    while ((match = tagRe.exec(content)) !== null) {
+      const attrs = match[2]
+      if (!/(?:animate-pulse|animation\s*:\s*[^;"']*pulse)/i.test(attrs)) continue
+      if (!/(?:rounded-full|border-radius\s*:\s*50%)/i.test(attrs)) continue
+      const tailwindSmall = /\b(?:size|w|h)-(?:1|1\.5|2|2\.5|3|3\.5|4)\b/.test(attrs)
+      const width = attrs.match(/width\s*:\s*([\d.]+)px/i)?.[1]
+      const height = attrs.match(/height\s*:\s*([\d.]+)px/i)?.[1]
+      const inlineSmall = width && height && Number(width) <= 16 && Number(height) <= 16
+      if (!tailwindSmall && !inlineSmall) continue
+      return [finding('pulsing-dot', filePath, 'small round element with pulse animation', lineAtIndex(content, match.index))]
+    }
+    return []
+  },
+  // Large pictorial SVG made from primitive shapes. Lucide-sized icons,
+  // logos, and explicit chart/data graphics stay out of scope.
+  (content, filePath) => {
+    const svgRe = /<svg\b([^>]*)>([\s\S]*?)<\/svg>/gi
+    let match
+    while ((match = svgRe.exec(content)) !== null) {
+      const attrs = match[1]
+      if (/(?:chart|graph|logo|icon|sparkline|data-viz|data-role=["']chart)/i.test(attrs)) continue
+      const primitives = [...match[2].matchAll(/<(?:rect|circle|ellipse|polygon|path)\b/gi)].length
+      const viewBox = attrs.match(/viewBox\s*=\s*["'][^"']*\s([\d.]+)\s+([\d.]+)["']/i)
+      const width = Number(attrs.match(/\bwidth\s*=\s*["']?([\d.]+)/i)?.[1] || viewBox?.[1] || 0)
+      const height = Number(attrs.match(/\bheight\s*=\s*["']?([\d.]+)/i)?.[1] || viewBox?.[2] || 0)
+      if (primitives < 12 || Math.max(width, height) < 200) continue
+      return [finding('shape-assembled-illustration', filePath, `${primitives} primitive SVG shapes in a ${width || '?'}×${height || '?'} visual`, lineAtIndex(content, match.index))]
+    }
+    return []
+  },
+  // Infinite horizontal travel. This deliberately requires both keyframe
+  // movement and infinite use, so finite carousel transitions are not hit.
+  (content, filePath) => {
+    const travelingNames = new Set()
+    for (const match of content.matchAll(/@keyframes\s+([\w-]+)\s*\{([\s\S]*?)\n?\}/gi)) {
+      if (/translateX\s*\(\s*-?(?:50|100)%|translate3d\s*\(\s*-?(?:50|100)%/i.test(match[2])) travelingNames.add(match[1])
+    }
+    for (const name of travelingNames) {
+      const use = new RegExp(`animation(?:-name)?\\s*:[^;{}]*\\b${name}\\b[^;{}]*\\binfinite\\b|animation-iteration-count\\s*:\\s*infinite`, 'i')
+      if (use.test(content)) return [finding('marquee', filePath, `infinite horizontal animation "${name}"`)]
+    }
+    return []
+  },
+  // Repeated rounded icon tiles directly before headings.
+  (content, filePath) => {
+    const matches = [...content.matchAll(/<(?:div|span)\b[^>]*(?:rounded(?:-\w+)?|border-radius)[^>]*>[\s\S]{0,400}?(?:<svg\b|<\w+(?:Icon|icon)\b)[\s\S]{0,500}?<h[2-5]\b/gi)]
+    if (matches.length < 3) return []
+    return [finding('icon-tile-stack', filePath, `${matches.length} rounded icon tiles stacked above headings`, lineAtIndex(content, matches[0].index || 0))]
+  },
+  // Tiny sequence labels repeated as section scaffolding.
+  (content, filePath) => {
+    const matches = [...content.matchAll(/<(?:span|small|div)\b[^>]*(?:text-(?:xs|\[(?:length:)?(?:8|9|10|11)px\])|font-size\s*:\s*(?:8|9|10|11)px)[^>]*>\s*(?:0?\d{1,2}|[IVX]{1,5})\s*<\/[^>]+>[\s\S]{0,240}?<h[2-5]\b/gi)]
+    if (matches.length < 3) return []
+    return [finding('numbered-section-labels', filePath, `${matches.length} tiny numbered section labels`, lineAtIndex(content, matches[0].index || 0))]
+  },
+  // Long display heading: the combination of copy length and scale is the
+  // defect, never display size alone.
+  (content, filePath) => {
+    const h1Re = /<h1\b([^>]*)>([\s\S]*?)<\/h1>/gi
+    let match
+    while ((match = h1Re.exec(content)) !== null) {
+      const attrs = match[1]
+      const text = normalizeVisibleText(match[2].replace(/<[^>]+>/g, ' '))
+      const tailwind = attrs.match(/\btext-(7xl|8xl|9xl)\b/i)
+      const inline = attrs.match(/font-size\s*:\s*([\d.]+)(px|rem|em)/i)
+      const px = inline ? parseCssLengthPx(`${inline[1]}${inline[2]}`) : tailwind ? { '7xl': 72, '8xl': 96, '9xl': 128 }[tailwind[1].toLowerCase()] : 0
+      if ((px || 0) < 64 || (text.length < 32 && text.split(/\s+/).length < 6)) continue
+      return [finding('oversized-h1', filePath, `${Math.round(px || 0)}px h1 with ${text.length} characters`, lineAtIndex(content, match.index))]
+    }
+    return []
+  },
+  // Hairline edge plus diffuse shadow in the same authored block or utility
+  // list. Borders on overlays are allowed; the card-decoration combination is not.
+  (content, filePath) => {
+    for (const match of content.matchAll(/([^{}]+)\{([^{}]+)\}/g)) {
+      const selector = match[1]
+      const body = match[2]
+      if (/(?:dialog|popover|menu|tooltip|overlay)/i.test(selector)) continue
+      if (!/(?:border(?:-width)?\s*:\s*1px|border\s*:\s*1px\s+solid)/i.test(body)) continue
+      const shadow = body.match(/box-shadow\s*:\s*([^;]+)/i)?.[1] || ''
+      const lengthSource = shadow.replace(/(?:rgb|hsl|oklch)a?\([^)]*\)/gi, '')
+      const lengths = [...lengthSource.matchAll(/(-?[\d.]+)px|(?<![\d.])(-?0)(?![\d.])/g)]
+        .map((item) => Math.abs(Number(item[1] ?? item[2])))
+      if (lengths.length >= 3 && lengths[2] >= 16) {
+        return [finding('gpt-thin-border-wide-shadow', filePath, `1px border + ${lengths[2]}px shadow blur`, lineAtIndex(content, match.index || 0))]
+      }
+    }
+    const utility = content.match(/class(?:Name)?\s*=\s*["'][^"']*\bborder\b[^"']*\bshadow-(?:xl|2xl)\b[^"']*["']/i)
+    return utility ? [finding('gpt-thin-border-wide-shadow', filePath, 'border + wide Tailwind shadow', lineAtIndex(content, utility.index || 0))] : []
+  },
+  // Two perpendicular tiled gradients form the generated-UI grid tell.
+  (content, filePath) => {
+    if (/(?:data-role=["'](?:chart|canvas|map)|blueprint|measurement)/i.test(content)) return []
+    const gradients = [...content.matchAll(/linear-gradient\s*\(/gi)]
+    if (gradients.length < 2 || !/background-size\s*:\s*\d+(?:px|rem)\s+\d+(?:px|rem)/i.test(content)) return []
+    if (!/(?:1px|\.5px)[^;{}]{0,160}(?:transparent|rgba\([^)]*,\s*0)/i.test(content)) return []
+    return [finding('codex-grid-background', filePath, 'two-axis tiled hairline gradient grid')]
+  },
+  // Copy analyzers only inspect text that can plausibly reach UI chrome.
+  (content, filePath) => {
+    const text = extractUserFacingText(content)
+    const match = text.match(/\b(?:streamline|empower|supercharge|world-class|enterprise-grade|next-generation|cutting-edge|seamless|revolucione|potencialize|líder de mercado|de ponta|sem atrito|nível empresarial|tudo em um)\b/i)
+    return match ? [finding('marketing-buzzword', filePath, `generic claim: "${match[0]}"`)] : []
+  },
+  (content, filePath) => {
+    const text = extractUserFacingText(content)
+    const patterns = [
+      ...(text.match(/\bnão\s+[^.!?]{2,50}[.!?]\s+(?:é|apenas|simplesmente|só)\s+[^.!?]{2,50}[.!?]/gim) || []),
+      ...(text.match(/\bnot\s+[^.!?]{2,50}[.!?]\s+(?:just|simply)\s+[^.!?]{2,50}[.!?]/gim) || []),
+    ]
+    return patterns.length >= 3 ? [finding('aphoristic-cadence', filePath, `${patterns.length} repeated contrast constructions`)] : []
+  },
+  (content, filePath) => {
+    const text = extractUserFacingText(content)
+    const match = text.match(/\b(?:security|innovation|compliance|productivity|growth|performance|automation|design|innovation|segurança|inovação|conformidade|produtividade|crescimento|performance|automação|design)\s+theater\b/i)
+    return match ? [finding('theater-slop-phrase', filePath, `"${match[0]}"`)] : []
+  },
+]
+
+const SOURCE_ANALYZER_RULE_IDS = [
+  'sidebar-topbar-shell',
+  'sidebar-rail-behavior',
+  'pulsing-dot',
+  'shape-assembled-illustration',
+  'marquee',
+  'icon-tile-stack',
+  'numbered-section-labels',
+  'oversized-h1',
+  'gpt-thin-border-wide-shadow',
+  'codex-grid-background',
+  'marketing-buzzword',
+  'aphoristic-cadence',
+  'theater-slop-phrase',
 ]
 
 // Whole-file analyzers — one per page-level rule. Each returns an array of
@@ -378,7 +829,7 @@ function runRegexMatchers(lines, filePath, lineOffset = 0, blockContext = null,
         const context = blockContext
           ? lines.slice(Math.max(0, i - 3), Math.min(lines.length, i + 4)).join(' ')
           : line
-        if (matcher.test(m, context)) {
+        if (matcher.test(m, context, filePath)) {
           matches.push(finding(matcher.id, filePath, matcher.fmt(m, context), i + 1 + lineOffset))
         }
       }
@@ -469,6 +920,21 @@ function detectText(content, filePath, options = {}) {
     )
   }
 
+  // Pipeline 2b: whole-source analyzers for signals that need sibling
+  // declarations, repeated structures, or UI-copy context.
+  for (let i = 0; i < SOURCE_ANALYZERS.length; i++) {
+    const analyzerRuleId = SOURCE_ANALYZER_RULE_IDS[i]
+    if (ruleIds && !ruleIds.includes(analyzerRuleId)) continue
+    const analyzer = SOURCE_ANALYZERS[i]
+    findings.push(
+      ...profileFindings(
+        profile,
+        { engine: 'regex', phase: 'source-analyzer', ruleId: analyzerRuleId, target: filePath },
+        () => analyzer(content, filePath)
+      )
+    )
+  }
+
   // Deduplicate (same antipattern + snippet within 2 lines).
   const deduped = []
   for (const f of findings) {
@@ -501,6 +967,8 @@ export {
   REGEX_MATCHERS,
   REGEX_ANALYZERS,
   ANALYZER_RULE_IDS,
+  SOURCE_ANALYZERS,
+  SOURCE_ANALYZER_RULE_IDS,
   extractStyleBlocks,
   extractCSSinJS,
   runRegexMatchers,

package/cli/engine/engines/static-html/detect-html.mjs

@@ -21,6 +21,8 @@ import {
   checkPageLayout,
   checkPageQualityFromDoc,
   checkPageTypography,
+  checkSidebarRailBehavior,
+  checkSidebarTopbarShell,
   resolveBackground,
 } from '../../rules/checks.mjs'
 import { detectText } from '../regex/detect-text.mjs'
@@ -44,7 +46,77 @@ import {
 
 // Per-element rules: each names a selector and a check. `customPropMap` is
 // reserved for var() resolution the cascade already performs upstream.
+function checkBrokenImage(element) {
+  const source = String(element.getAttribute('src') || '').trim()
+  if (!source || /^(?:#|about:blank)$|(?:placehold|placeholder|example)\./i.test(source)) {
+    return [{ id: 'broken-image', snippet: source ? `<img src="${source}">` : '<img> without a usable src' }]
+  }
+  return []
+}
+
+function checkClippedPositionedChild(element, style, window) {
+  if (!/(hidden|clip)/.test(`${style.overflow || ''} ${style.overflowX || ''} ${style.overflowY || ''}`)) return []
+  for (const child of element.querySelectorAll('*')) {
+    const childStyle = window.getComputedStyle(child)
+    if (childStyle.position !== 'absolute') continue
+    const identity = `${child.getAttribute('role') || ''} ${child.getAttribute('class') || ''} ${child.getAttribute('data-slot') || ''}`
+    if (!/(menu|tooltip|popover)/i.test(identity)) continue
+    return [{ id: 'clipped-overflow-container', snippet: `${element.tagName.toLowerCase()} clips positioned ${child.tagName.toLowerCase()}` }]
+  }
+  return []
+}
+
+function directText(element) {
+  return [...element.childNodes]
+    .filter((node) => node.nodeType === 3)
+    .map((node) => node.textContent || '')
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function checkUndersizedUiText(element, style, tag) {
+  const identity = `${element.getAttribute('class') || ''} ${element.getAttribute('data-slot') || ''}`
+  if (/(?:sr-only|visually-hidden|legal|smallprint|code|terminal)/i.test(identity)) return []
+  if (['sup', 'sub', 'code', 'pre'].includes(tag) || element.getAttribute('aria-hidden') === 'true') return []
+  const text = directText(element)
+  const size = parseFloat(style.fontSize)
+  if (!text || !Number.isFinite(size) || size >= 11 || size <= 0) return []
+  return [{ id: 'undersized-ui-text', snippet: `${size}px functional ${tag} text "${text.slice(0, 60)}"` }]
+}
+
+function checkOversizedH1(element, style) {
+  const text = String(element.textContent || '').replace(/\s+/g, ' ').trim()
+  const size = parseFloat(style.fontSize)
+  if (!Number.isFinite(size) || size < 64 || (text.length < 32 && text.split(/\s+/).length < 6)) return []
+  return [{ id: 'oversized-h1', snippet: `${Math.round(size)}px h1 with ${text.length} characters` }]
+}
+
+function checkThinBorderWideShadow(element, style) {
+  const identity = `${element.getAttribute('class') || ''} ${element.getAttribute('data-slot') || ''} ${element.getAttribute('role') || ''}`
+  if (/(?:dialog|popover|menu|tooltip|overlay)/i.test(identity)) return []
+  const borders = ['Top', 'Right', 'Bottom', 'Left']
+    .map((side) => parseFloat(style[`border${side}Width`]) || 0)
+    .filter((value) => value > 0)
+  if (borders.length === 0 || Math.max(...borders) > 1.1) return []
+  const shadow = String(style.boxShadow || '')
+  if (!shadow || shadow === 'none') return []
+  const lengths = [...shadow.matchAll(/(-?[\d.]+)px/g)].map((match) => Math.abs(Number(match[1])))
+  if (lengths.length < 3 || lengths[2] < 16) return []
+  return [{ id: 'gpt-thin-border-wide-shadow', snippet: `${Math.max(...borders)}px border + ${lengths[2]}px shadow blur` }]
+}
+
 const STATIC_ELEMENT_RULES = [
+  {
+    id: 'broken-image',
+    selector: 'img',
+    run: (el) => checkBrokenImage(el),
+  },
+  {
+    id: 'clipped-overflow-container',
+    selector: '*',
+    run: (el, tag, style, window) => checkClippedPositionedChild(el, style, window),
+  },
   {
     id: 'side-stripe-border',
     selector: '*',
@@ -86,8 +158,63 @@ const STATIC_ELEMENT_RULES = [
     selector: '*',
     run: (el, tag, style, window) => checkElementQuality(el, style, tag, window),
   },
+  {
+    id: 'undersized-ui-text',
+    selector: 'a,button,label,th,td,time,option,summary,[role="button"],[role="link"],[role="menuitem"],[role="tab"]',
+    run: (el, tag, style) => checkUndersizedUiText(el, style, tag),
+  },
+  {
+    id: 'oversized-h1',
+    selector: 'h1',
+    run: (el, tag, style) => checkOversizedH1(el, style),
+  },
+  {
+    id: 'gpt-thin-border-wide-shadow',
+    selector: '*',
+    run: (el, tag, style) => checkThinBorderWideShadow(el, style),
+  },
 ]
 
+function checkIconTileStacks(document, window) {
+  let count = 0
+  let first = ''
+  for (const heading of document.querySelectorAll('h2,h3,h4,h5')) {
+    const tile = heading.previousElementSibling
+    if (!tile || !tile.querySelector('svg')) continue
+    const style = window.getComputedStyle(tile)
+    const width = parseFloat(style.width) || 0
+    const height = parseFloat(style.height) || 0
+    const radius = parseFloat(style.borderRadius) || parseFloat(style.borderTopLeftRadius) || 0
+    if (radius < 4 || width < 24 || height < 24 || width > 80 || height > 80) continue
+    count++
+    if (!first) first = String(heading.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 60)
+  }
+  return count >= 3 ? [{ id: 'icon-tile-stack', snippet: `${count} rounded icon tiles stacked above headings${first ? `; first: "${first}"` : ''}` }] : []
+}
+
+function checkRepeatedContainerText(document) {
+  const findings = []
+  for (const container of document.querySelectorAll('article,aside,[role="region"],*')) {
+    const identity = `${container.getAttribute('class') || ''} ${container.getAttribute('data-slot') || ''} ${container.getAttribute('role') || ''}`
+    if (!/(?:card|panel|dialog|sheet|sidebar|region)/i.test(identity) && !['article', 'aside'].includes(container.tagName.toLowerCase())) continue
+    const occurrences = new Map()
+    for (const element of container.querySelectorAll('span,p,small,strong,em,label,div')) {
+      const text = directText(element).toLocaleLowerCase('pt-BR')
+      if (text.length < 2 || text.length > 80) continue
+      const entry = occurrences.get(text) || []
+      entry.push(`${element.tagName.toLowerCase()}.${String(element.getAttribute('class') || '').split(/\s+/)[0] || ''}`)
+      occurrences.set(text, entry)
+    }
+    for (const [text, structures] of occurrences) {
+      if (structures.length < 3 || new Set(structures).size < 2) continue
+      findings.push({ id: 'repeated-container-text', snippet: `"${text.slice(0, 60)}" appears ${structures.length} times in one container` })
+      break
+    }
+    if (findings.length >= 10) break
+  }
+  return findings
+}
+
 /**
  * @param {string} filePath path to an HTML file
  * @param {{ ruleIds?: string[], profile?: object }} [options]
@@ -185,6 +312,10 @@ async function detectHtml(filePath, options = {}) {
     pushPage(runPageCheck('flat-type-hierarchy', () => checkPageTypography(document, window)))
     pushPage(runPageCheck('layout-rules', () => checkPageLayout(document, window)))
     pushPage(runPageCheck('skipped-heading', () => checkPageQualityFromDoc(document)))
+    pushPage(runPageCheck('sidebar-topbar-shell', () => checkSidebarTopbarShell(document)))
+    pushPage(runPageCheck('sidebar-rail-behavior', () => checkSidebarRailBehavior(document)))
+    pushPage(runPageCheck('icon-tile-stack', () => checkIconTileStacks(document, window)))
+    pushPage(runPageCheck('repeated-container-text', () => checkRepeatedContainerText(document)))
     pushPage(
       runPageCheck('html-patterns', () =>
         // bounce-easing and layout-transition are already covered by the regex