@etus/seven-skill 0.1.0-beta.3 → 0.1.0-beta.5

package/cli/engine/rules/checks.mjs

@@ -927,6 +927,88 @@ export function checkHtmlPatterns(html) {
     }
   }
 
+  // Current generic signals retained by Seven. They are advisory unless the
+  // registry classifies a concrete readability/layout failure as quality.
+  if (/radial-gradient\([^;{}\n]*(?:transparent|rgba\([^)]*,\s*0(?:\.0+)?\s*\))/i.test(html) &&
+      !/(?:data-role=["']chart|heatmap|radar|mask-image)/i.test(html)) {
+    findings.push({ id: 'radial-halo', snippet: 'radial-gradient color wash fading to transparent' })
+  }
+
+  if (/<marquee\b/i.test(html) || /\banimate-(?:marquee|ticker|scroll)\b/i.test(html)) {
+    findings.push({ id: 'marquee', snippet: 'auto-scrolling marquee' })
+  }
+
+  if (/\banimate-(?:blink|cursor|caret)\b|animation(?:-name)?\s*:\s*(?:blink|cursor|caret)\b/i.test(html) &&
+      !/(?:input-?otp|otpinput|contenteditable|<input\b|<textarea\b)/i.test(html)) {
+    findings.push({ id: 'blinking-cursor', snippet: 'decorative blink/caret animation' })
+  }
+
+  const pulseTag = html.match(/<(?:span|div|i)\b[^>]*(?:animate-pulse|animation\s*:\s*[^;"']*pulse)[^>]*(?:rounded-full|border-radius\s*:\s*50%)[^>]*>/i)
+  if (pulseTag && /\b(?:size|w|h)-(?:1|1\.5|2|2\.5|3|3\.5|4)\b|(?:width|height)\s*:\s*(?:[1-9]|1[0-6])px/i.test(pulseTag[0])) {
+    findings.push({ id: 'pulsing-dot', snippet: 'small round element with pulse animation' })
+  }
+
+  const svgRe = /<svg\b([^>]*)>([\s\S]*?)<\/svg>/gi
+  let svgMatch
+  while ((svgMatch = svgRe.exec(html)) !== null) {
+    if (/(?:chart|graph|logo|icon|sparkline|data-viz|data-role=["']chart)/i.test(svgMatch[1])) continue
+    const primitives = [...svgMatch[2].matchAll(/<(?:rect|circle|ellipse|polygon|path)\b/gi)].length
+    const dimensions = `${svgMatch[1]}`.match(/(?:width|height|viewBox)\s*=\s*["'][^"']*(?:2\d{2}|[3-9]\d{2,})/i)
+    if (primitives >= 12 && dimensions) {
+      findings.push({ id: 'shape-assembled-illustration', snippet: `${primitives} primitive SVG shapes in a large visual` })
+      break
+    }
+  }
+
+  const numberedLabels = [...html.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 (numberedLabels.length >= 3) findings.push({ id: 'numbered-section-labels', snippet: `${numberedLabels.length} tiny numbered section labels` })
+
+  const displayH1 = html.match(/<h1\b([^>]*(?:\btext-(?:7xl|8xl|9xl)\b|font-size\s*:\s*(?:6[4-9]|[7-9]\d|\d{3,})px)[^>]*)>([\s\S]*?)<\/h1>/i)
+  if (displayH1) {
+    const text = displayH1[2].replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
+    if (text.length >= 32 || text.split(/\s+/).length >= 6) findings.push({ id: 'oversized-h1', snippet: `display h1 with ${text.length} characters` })
+  }
+
+  const tracking = html.match(/letter-spacing\s*:\s*(-?[\d.]+)(em|px)|\btracking-\[(-?[\d.]+)(em|px)\]/i)
+  if (tracking) {
+    const value = Number(tracking[1] ?? tracking[3])
+    const unit = String(tracking[2] ?? tracking[4]).toLowerCase()
+    if ((unit === 'em' && value < -0.075) || (unit === 'px' && value < -1.2)) {
+      findings.push({ id: 'extreme-negative-tracking', snippet: tracking[0] })
+    }
+  }
+
+  if (/repeating-(?:linear|radial|conic)-gradient\s*\(/i.test(html) &&
+      !/(?:data-role=["']chart|progress|skeleton|mask-image|checkerboard|color-picker|alpha)/i.test(html)) {
+    findings.push({ id: 'repeating-stripes-gradient', snippet: 'repeating-gradient decorative stripes' })
+  }
+
+  const linearGradients = [...html.matchAll(/linear-gradient\s*\(/gi)]
+  if (linearGradients.length >= 2 && /background-size\s*:\s*\d+(?:px|rem)\s+\d+(?:px|rem)/i.test(html) &&
+      /(?:1px|\.5px)[^;{}]{0,160}(?:transparent|rgba\([^)]*,\s*0)/i.test(html) &&
+      !/(?:data-role=["'](?:chart|canvas|map)|blueprint|measurement)/i.test(html)) {
+    findings.push({ id: 'codex-grid-background', snippet: 'two-axis tiled hairline gradient grid' })
+  }
+
+  if (/img\s*:\s*hover\s*\{[^}]*transform\s*:\s*(?:scale|rotate)|<img\b[^>]*\bhover:(?:scale|rotate)-/i.test(html)) {
+    findings.push({ id: 'image-hover-transform', snippet: 'image scales or rotates on hover' })
+  }
+
+  const visibleCopy = html
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, ' ')
+    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, ' ')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+  const buzzword = visibleCopy.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)
+  if (buzzword) findings.push({ id: 'marketing-buzzword', snippet: `generic claim: "${buzzword[0]}"` })
+  const aphorisms = [
+    ...(visibleCopy.match(/\bnão\s+[^.!?]{2,50}[.!?]\s+(?:é|apenas|simplesmente|só)\s+[^.!?]{2,50}[.!?]/gim) || []),
+    ...(visibleCopy.match(/\bnot\s+[^.!?]{2,50}[.!?]\s+(?:just|simply)\s+[^.!?]{2,50}[.!?]/gim) || []),
+  ]
+  if (aphorisms.length >= 3) findings.push({ id: 'aphoristic-cadence', snippet: `${aphorisms.length} repeated contrast constructions` })
+  const theater = visibleCopy.match(/\b(?:security|innovation|compliance|productivity|growth|performance|automation|design|segurança|inovação|conformidade|produtividade|crescimento|performance|automação|design)\s+theater\b/i)
+  if (theater) findings.push({ id: 'theater-slop-phrase', snippet: `"${theater[0]}"` })
+
   return findings
 }
 
@@ -1264,8 +1346,285 @@ export function checkElementQualityDOM(el) {
   })
 }
 
+function directSlotChild(parent, slot) {
+  if (!parent) return null
+  return [...parent.querySelectorAll(`[data-slot="${slot}"]`)].find(
+    (element) => element.parentElement === parent
+  ) || null
+}
+
+function isVisibleElement(element, win) {
+  if (!element || !win?.getComputedStyle || typeof element.getBoundingClientRect !== 'function') {
+    return Boolean(element)
+  }
+  const style = win.getComputedStyle(element)
+  const rect = element.getBoundingClientRect()
+  return (
+    style.display !== 'none' &&
+    style.visibility !== 'hidden' &&
+    Number(style.opacity || 1) > 0 &&
+    rect.width > 0 &&
+    rect.height > 0
+  )
+}
+
+function hasAncestorWithAttribute(element, attribute, value = null) {
+  let current = element?.parentElement
+  while (current) {
+    if (
+      current.hasAttribute?.(attribute) &&
+      (value === null || current.getAttribute(attribute) === value)
+    ) {
+      return true
+    }
+    current = current.parentElement
+  }
+  return false
+}
+
+/**
+ * Seven dual-Rail contract. Static HTML verifies stable labels and valid
+ * interactive markup. Browser mode additionally verifies that mobile ARIA and
+ * panel visibility follow openMobile, never the desktop panel state.
+ * @param {any} doc
+ * @param {any} [win]
+ */
+export function checkSidebarRailBehavior(doc, win = null) {
+  const findings = []
+  const wrappers = [...doc.querySelectorAll('[data-slot="sidebar-wrapper"][data-mode="dual"]')]
+  const viewportWidth = Number(win?.innerWidth)
+  const isMobileViewport = Number.isFinite(viewportWidth) && viewportWidth > 0 && viewportWidth < 768
+
+  for (const wrapper of wrappers) {
+    for (const button of wrapper.querySelectorAll('[data-slot="sidebar-rail-button"]')) {
+      const label = String(button.getAttribute('data-label') || '').trim()
+      if (!label) {
+        findings.push({
+          id: 'sidebar-rail-behavior',
+          snippet: 'Dual Rail button has no stable data-label for its expanded state',
+        })
+      }
+
+      const tag = String(button.tagName || '').toLowerCase()
+      const parentTag = String(button.parentElement?.tagName || '').toLowerCase()
+      const nestedInteractive = button.querySelector?.('a,button,[role="button"],[role="link"]')
+      if (
+        (tag === 'button' && (parentTag === 'a' || button.parentElement?.getAttribute?.('role') === 'link')) ||
+        nestedInteractive
+      ) {
+        findings.push({
+          id: 'sidebar-rail-behavior',
+          snippet: 'Dual Rail navigation nests interactive elements instead of using asChild',
+        })
+      }
+    }
+
+    if (!isMobileViewport) continue
+
+    const visibleMobileSidebar = [...doc.querySelectorAll(
+      '[data-slot="sidebar"][data-mobile="true"]'
+    )].find((element) => isVisibleElement(element, win)) || null
+    const sheetOpen = Boolean(visibleMobileSidebar)
+    const triggers = [...wrapper.querySelectorAll('[data-slot="sidebar-trigger"]')].filter(
+      (trigger) =>
+        !hasAncestorWithAttribute(trigger, 'data-mobile', 'true') &&
+        isVisibleElement(trigger, win)
+    )
+
+    for (const trigger of triggers) {
+      if (trigger.getAttribute('aria-expanded') !== String(sheetOpen)) {
+        findings.push({
+          id: 'sidebar-rail-behavior',
+          snippet: 'Mobile SidebarTrigger aria-expanded does not match the visible Sheet',
+        })
+        break
+      }
+    }
+
+    if (!visibleMobileSidebar) continue
+    const panel = visibleMobileSidebar.querySelector('[data-slot="sidebar-panel-content"]')
+    if (
+      !panel ||
+      panel.getAttribute('data-state') !== 'expanded' ||
+      !isVisibleElement(panel, win)
+    ) {
+      findings.push({
+        id: 'sidebar-rail-behavior',
+        snippet: 'Open dual mobile Sheet does not expose a full expanded panel',
+      })
+      continue
+    }
+
+    const sheetRect = visibleMobileSidebar.getBoundingClientRect()
+    const panelRect = panel.getBoundingClientRect()
+    if (sheetRect.width > 0 && panelRect.width < sheetRect.width * 0.75) {
+      findings.push({
+        id: 'sidebar-rail-behavior',
+        snippet: 'Dual mobile panel retained the collapsed desktop width',
+      })
+    }
+  }
+
+  return findings
+}
+
+/**
+ * Seven application-shell contract shared by static HTML and the live browser:
+ * Sidebar + SidebarInset are direct siblings and the shell Topbar is the
+ * borderless first chrome child of the Inset. Browser mode adds L-geometry,
+ * the visible mobile trigger assertion, and mobile leading-slot overflow.
+ */
+export function checkSidebarTopbarShell(doc, win = null) {
+  const findings = []
+  const wrappers = [...doc.querySelectorAll('[data-slot="sidebar-wrapper"]')]
+  const viewportWidth = Number(win?.innerWidth)
+  const hasViewport = Number.isFinite(viewportWidth) && viewportWidth > 0
+
+  for (const wrapper of wrappers) {
+    const inset = directSlotChild(wrapper, 'sidebar-inset')
+    const directOutsideTopbar = directSlotChild(wrapper, 'topbar')
+    const siblingOutsideTopbar = [...(wrapper.parentElement?.children || [])].find(
+      (element) =>
+        element !== wrapper &&
+        element.getAttribute?.('data-slot') === 'topbar'
+    ) || null
+    const outsideTopbar = directOutsideTopbar || siblingOutsideTopbar
+    if (!inset) {
+      if (outsideTopbar) {
+        findings.push({
+          id: 'sidebar-topbar-shell',
+          snippet: 'Shell Topbar renders outside SidebarInset',
+        })
+      }
+      continue
+    }
+
+    const topbars = [...inset.querySelectorAll('[data-slot="topbar"]')].filter(
+      (element) => element.parentElement === inset
+    )
+    if (topbars.length === 0) {
+      if (outsideTopbar) {
+        findings.push({
+          id: 'sidebar-topbar-shell',
+          snippet: 'Shell Topbar renders outside SidebarInset',
+        })
+      }
+      continue
+    }
+
+    const firstElement = [...inset.children][0]
+    if (firstElement !== topbars[0]) {
+      findings.push({
+        id: 'sidebar-topbar-shell',
+        snippet: 'Shell Topbar is not the first direct child of SidebarInset',
+      })
+    }
+
+    const sidebar = directSlotChild(wrapper, 'sidebar')
+    const staticSidebar = sidebar?.getAttribute('data-collapsible') === 'none'
+    if ((!hasViewport || viewportWidth >= 768) && !sidebar) {
+      findings.push({
+        id: 'sidebar-topbar-shell',
+        snippet: 'Sidebar and SidebarInset are not direct siblings under SidebarProvider',
+      })
+    }
+
+    if (win?.getComputedStyle) {
+      for (const topbar of topbars) {
+        const style = win.getComputedStyle(topbar)
+        const borderWidth = Math.max(
+          parseFloat(style.borderTopWidth) || 0,
+          parseFloat(style.borderRightWidth) || 0,
+          parseFloat(style.borderBottomWidth) || 0,
+          parseFloat(style.borderLeftWidth) || 0
+        )
+        if (borderWidth > 0 || (style.boxShadow && style.boxShadow !== 'none')) {
+          findings.push({
+            id: 'sidebar-topbar-shell',
+            snippet: 'Shell Topbar renders a border or shadow',
+          })
+          break
+        }
+      }
+    }
+
+    if (
+      hasViewport &&
+      viewportWidth >= 768 &&
+      sidebar &&
+      typeof sidebar.getBoundingClientRect === 'function'
+    ) {
+      const sidebarRect = sidebar.getBoundingClientRect()
+      const topbarRect = topbars[0].getBoundingClientRect()
+      const side = sidebar.getAttribute('data-side') || 'left'
+      const overlapsSidebar =
+        side === 'right'
+          ? topbarRect.right > sidebarRect.left + 1
+          : topbarRect.left < sidebarRect.right - 1
+      if (sidebarRect.width > 0 && topbarRect.width > 0 && overlapsSidebar) {
+        findings.push({
+          id: 'sidebar-topbar-shell',
+          snippet: 'Topbar overlaps the desktop Sidebar; rendered shell is T-shaped',
+        })
+      }
+
+      const wrapperRect = wrapper.getBoundingClientRect()
+      if (sidebarRect.height + 1 < wrapperRect.height) {
+        findings.push({
+          id: 'sidebar-topbar-shell',
+          snippet: 'Desktop Sidebar does not span the full shell height',
+        })
+      }
+    }
+
+    if (hasViewport && viewportWidth < 768) {
+      if (!staticSidebar) {
+        const triggers = topbars.flatMap((topbar) => [
+          ...topbar.querySelectorAll('[data-slot="sidebar-trigger"]'),
+        ])
+        if (!triggers.some((trigger) => isVisibleElement(trigger, win))) {
+          findings.push({
+            id: 'sidebar-topbar-shell',
+            snippet: 'Collapsible mobile shell has no visible SidebarTrigger in Topbar',
+          })
+        }
+      }
+
+      const leading = directSlotChild(topbars[0], 'topbar-leading')
+      if (
+        leading &&
+        isVisibleElement(leading, win) &&
+        leading.clientWidth > 0 &&
+        leading.scrollWidth > leading.clientWidth + 1
+      ) {
+        findings.push({
+          id: 'sidebar-topbar-shell',
+          snippet: 'Mobile TopbarLeading overflows underneath the trailing chrome',
+        })
+      }
+    }
+  }
+
+  return findings
+}
+
 export function checkPageQualityDOM() {
-  return checkPageQualityFromDoc(document).map((f) => ({ type: f.id, detail: f.snippet }))
+  const findings = checkPageQualityFromDoc(document)
+  findings.push(...checkSidebarTopbarShell(document, window))
+  findings.push(...checkSidebarRailBehavior(document, window))
+  let iconTileCount = 0
+  for (const heading of document.querySelectorAll('h2,h3,h4,h5')) {
+    const tile = heading.previousElementSibling
+    if (!tile || !tile.querySelector('svg')) continue
+    const style = getComputedStyle(tile)
+    const rect = tile.getBoundingClientRect()
+    const radius = parseFloat(style.borderRadius) || parseFloat(style.borderTopLeftRadius) || 0
+    if (radius >= 4 && rect.width >= 24 && rect.height >= 24 && rect.width <= 80 && rect.height <= 80) iconTileCount++
+  }
+  if (iconTileCount >= 3) {
+    findings.push({ id: 'icon-tile-stack', snippet: `${iconTileCount} rounded icon tiles stacked above headings` })
+  }
+  return findings
 }
 
 // ─── Section 6: Node element adapters (static cascade) ──────────────────────

package/cli/engine/shared/tokens.mjs

@@ -18,6 +18,25 @@ export function tokenDataAvailable() {
   return Boolean(TOKEN_DATA && Object.keys(TOKEN_DATA.colorByRgba || {}).length > 0)
 }
 
+/** Every CSS variable declared by the exact Seven token snapshot. */
+export function allTokenVars() {
+  return [...(TOKEN_DATA.cssVars || [])]
+}
+
+export function isKnownTokenVar(value) {
+  return (TOKEN_DATA.cssVars || []).includes(String(value || '').trim())
+}
+
+/** Minimal serializable token profile used by the browser runtime audit. */
+export function browserTokenProfile() {
+  return {
+    colorVars: [...(TOKEN_DATA.colorVars || [])],
+    fontFamilies: allowedFontFamilies(),
+    fontSizesPx: fontSizesPx(),
+    radiiPx: [...(TOKEN_DATA.radii?.all || [])],
+  }
+}
+
 // ─── Color ──────────────────────────────────────────────────────────────────
 
 /**