lazycodex-ai 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/script-error.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { scriptError } from "./script-error"
+import { lintSnapshot } from "../../lint"
+
+test("#given captured errors duplicates and blanks #then only three distinct errors report", () => {
+	const check = (scriptErrors: readonly string[]) => scriptError.check({ snapshot: buildSnapshot([], { scriptErrors }), config: {} })
+	const hits = check(["", "TypeError: cart is undefined", "TypeError: cart is undefined", "SyntaxError: invalid token", "ReferenceError: missing", "Error: fourth"])
+	expect(hits.map((hit) => hit.snippet)).toEqual(["TypeError: cart is undefined", "SyntaxError: invalid token", "ReferenceError: missing"])
+	expect(check([])).toHaveLength(0)
+})
+test("#given recoverable media hydration and ad-tech errors #then lint preserves advisory severities and project overrides", () => {
+	const snapshot = buildSnapshot([], { scriptErrors: [
+		"Minified React error #418", "AbortError: The play() request was interrupted",
+		"adsbygoogle failed", "TypeError: cart missing",
+	] })
+	expect(lintSnapshot(snapshot, { rules: [scriptError] }).map(hit => hit.severity)).toEqual([
+		"advisory", "advisory", "advisory", "error",
+	])
+	expect(lintSnapshot(snapshot, { rules: [scriptError], config: { rules: { "script-error": "warning" } } }).map(hit => hit.severity))
+		.toEqual(["warning", "warning", "warning", "warning"])
+})
+
+test("#given recoverable errors before application crashes #then each class retains separate slots", () => {
+	const snapshot = buildSnapshot([], { scriptErrors: [
+		"Minified React error #418", "Minified React error #419", "Minified React error #422", "Minified React error #423",
+		"adsbygoogle 1", "adsbygoogle 2", "adsbygoogle 3", "adsbygoogle 4",
+		"Minified React error #4180", "AbortError: fetch aborted", "TypeError: cart missing", "Error: fourth",
+	] })
+	const hits = scriptError.check({ snapshot, config: {} })
+	expect(hits).toHaveLength(9)
+	expect(hits.filter((hit) => hit.message === "Uncaught page script error").map((hit) => hit.snippet)).toEqual([
+		"Minified React error #4180", "AbortError: fetch aborted", "TypeError: cart missing",
+	])
+	expect(scriptError.check({ snapshot: buildSnapshot([]), config: {} })).toHaveLength(0)
+})
+
+test("#given a renderer that could not install the error probe #then one advisory says errors were not captured", () => {
+	const snapshot = buildSnapshot([], { scriptErrorsCaptured: false })
+	expect(lintSnapshot(snapshot, { rules: [scriptError] }).map((f) => [f.severity, f.location.kind])).toEqual([["advisory", "page"]])
+	expect(lintSnapshot(buildSnapshot([]), { rules: [scriptError] })).toHaveLength(0)
+})
+
+test("#given a project override that raises script-error #then the not-captured notice stays advisory and off still drops it", () => {
+	const snapshot = buildSnapshot([], { scriptErrorsCaptured: false })
+	expect(lintSnapshot(snapshot, { rules: [scriptError], config: { rules: { "script-error": "error" } } }).map((f) => f.severity)).toEqual(["advisory"])
+	expect(lintSnapshot(snapshot, { rules: [scriptError], config: { rules: { "script-error": "off" } } })).toHaveLength(0)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/script-error.ts

@@ -0,0 +1,38 @@
+import type { PageHit, PageRule } from "../../rule"
+
+export const scriptError: PageRule = {
+	meta: {
+		id: "script-error", name: "Uncaught script error on load", category: "quality", severity: "error", engine: "page",
+		description: "An uncaught exception or rejected promise occurred while the page loaded.",
+		fixHint: "Fix the failing script or handle its rejected promise, then verify the page loads without uncaught errors.",
+	},
+	check: ({ snapshot }) => {
+		if (!snapshot.scriptErrorsCaptured) {
+			return [{
+				element: null,
+				message: "Script errors were not captured: this renderer could not install its error probe before the page's scripts",
+				snippet: snapshot.url,
+				severity: "advisory",
+				severityFixed: true,
+			}]
+		}
+		const counts = new Map<string, number>()
+		const hits: PageHit[] = []
+		for (const error of new Set(snapshot.scriptErrors)) {
+			const hydration = /Minified React error #(418|419|422|423|425)(?!\d)/.test(error)
+			const media = error.includes("AbortError") && error.includes("The play() request was interrupted")
+			const adTech = /browsingTopics|joinAdInterestGroup|runAdAuction|adsbygoogle|_prebidjs/.test(error)
+			const kind = adTech ? "ad-tech" : hydration || media ? "recoverable" : "uncaught"
+			const count = counts.get(kind) ?? 0
+			if (error.trim() === "" || count >= 3) continue
+			counts.set(kind, count + 1)
+			hits.push({
+				element: null,
+				message: kind === "uncaught" ? "Uncaught page script error" : `Page script error (${kind})`,
+				snippet: error,
+				severity: kind === "uncaught" ? "error" : "advisory",
+			})
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/skipped-heading.test.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { skippedHeading } from "./skipped-heading"
+
+test("#given a skipped rank followed by a descending rank #then only the forward skip reports", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "h1", text: "Title" }, { tag: "h3", id: "skip", text: "Section" }, { tag: "h2", id: "back", text: "Next section" },
+		{ tag: "h3", id: "ordinary", text: "Subsection" },
+	])
+	expect(skippedHeading.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#skip"])
+})
+
+test("#given hidden panels and screen reader headings #then hidden panels leave the outline", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "h1", text: "Title" },
+		{ style: { display: "none" }, children: [{ tag: "h4", id: "hidden", text: "Closed menu" }] },
+		{ tag: "h2", text: "Section" },
+		{ style: { visibility: "hidden" }, children: [{ tag: "h5", id: "hidden-widget", text: "Widget" }] },
+		{ tag: "h4", id: "sr", text: "Screen reader title", attributes: { class: "sr-only" }, rect: { width: 1, height: 1 } },
+		{ tag: "h5", id: "faded", text: "Reveal", style: { opacity: "0" } },
+	])
+	expect(skippedHeading.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#sr"])
+})
+
+test("#given footer columns and closing calls to action #then later internal skips still report", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "h1", text: "Title" }, { tag: "h2", text: "Last section" },
+		{ tag: "footer", children: [
+			{ tag: "h2", text: "Join us" }, { tag: "h4", id: "column", text: "Company" },
+			{ tag: "h6", id: "footer-skip", text: "Bad nested title" },
+		] },
+		{ tag: "h2", text: "Content resumes" }, { tag: "h4", id: "content-skip", text: "Bad content title" },
+	])
+	expect(skippedHeading.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#footer-skip", "#content-skip"])
+})
+
+test("#given a declared mockup beside real content #then only the real content enters the outline", () => {
+	const check = (hidden: string) => skippedHeading.check({ snapshot: buildSnapshot([
+		{ tag: "h1", text: "The product overview" },
+		{ tag: "p", text: "This paragraph explains the actual product and its concrete capabilities for a visitor. ".repeat(8) },
+		{ tag: "h2", text: "Content section" },
+		{ attributes: { "aria-hidden": hidden }, rect: { width: 320, height: 180 }, children: [
+			{ tag: "h4", id: "mock-title", text: "Window" }, { tag: "span", text: "Inbox" }, { tag: "span", text: "Messages" },
+		] },
+		{ tag: "h3", text: "Content subsection" },
+	]), config: {} })
+	expect(check("true")).toHaveLength(0)
+	expect(check("false").map((hit) => hit.element?.selector)).toEqual(["#mock-title"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/skipped-heading.ts

@@ -0,0 +1,81 @@
+import { childrenOf, descendants, headingLevel, parentOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import { displayed, lineage } from "./support/page-text"
+
+export const skippedHeading: PageRule = {
+	meta: {
+		id: "skipped-heading", name: "Skipped heading level", category: "quality", severity: "warning", engine: "page",
+		description: "A heading jumps over a level in the visible content outline.",
+		fixHint: "Use the next heading level and style it independently of its semantic rank.",
+	},
+	check: ({ snapshot }) => {
+		const hits: PageHit[] = []
+		let previous = 0
+		let previousText = ""
+		let previousFooter: number | undefined
+		let previousOpensFooter = false
+		const squash = (text: string): string => text.replace(/\s/g, "")
+		const sourceTags = ["script", "style", "noscript", "template"]
+		const textChars = snapshot.elements.filter((el) => displayed(snapshot, el) && el.style["visibility"] !== "hidden" && !sourceTags.includes(el.tag))
+			.reduce((total, el) => total + [...squash(el.ownText)].length, 0)
+		const hidden = (el: typeof snapshot.elements[number]): boolean =>
+			el.attributes["inert"] !== undefined || el.attributes["aria-hidden"]?.trim().toLowerCase() === "true"
+		const modals = snapshot.elements.filter((el) =>
+			(el.attributes["aria-modal"] === "true" || ["dialog", "alertdialog"].includes(el.attributes["role"] ?? "")
+				|| el.tag === "dialog" && el.attributes["open"] !== undefined)
+			&& !hidden(el) && displayed(snapshot, el) && el.rect.width > 0 && el.rect.height > 0 && el.style["visibility"] !== "hidden")
+		const mockups = new Set(snapshot.elements.filter((root) => {
+			if (!hidden(root) || root.rect.width < 120 || root.rect.height < 80) return false
+			if (["html", "body", "main", "header", "footer", "nav", "aside", "section", "article", "form", "dialog", "li", "tr", "td", "th", "tbody", "thead", "table", "details", "summary"].includes(root.tag)) return false
+			if ((root.attributes["role"] ?? "").trim().split(/\s+/).some((r) => r !== "" && !["presentation", "none", "img", "figure", "group"].includes(r))) return false
+			if (root.attributes["aria-modal"] !== undefined || root.attributes["data-aria-hidden"] !== undefined || ["fixed", "sticky"].includes(root.style["position"] ?? "")) return false
+			const names = `${root.attributes["class"] ?? ""} ${root.attributes["id"] ?? ""}`
+			if (/(?:^|[\s_-])(clones?|cloned|copy|duplicate|dup|carousel|embla|flicking|glide|keen|slick|slides?|slider|splide|swiper|marquee|ticker|menu|submenu|dropdown|popup|popover|modal|drawer|dialog|tooltip|toast|offcanvas|overlay|nav|navbar|navigation|panel|tab|tabpanel|accordion|collapse|collapsible|intro|splash|loader|preloader|loading|banner|cookies?|consent|sidebar|sidenav|toc)(?:$|[\s_-])/i.test(names)) return false
+			const ancestors = lineage(snapshot, root).slice(1)
+			if (ancestors.some((a) => ["h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "button", "label", "summary", "legend", "caption", "figcaption", "blockquote", "q"].includes(a.tag))) return false
+			const nodes = [root, ...descendants(snapshot, root)]
+			if (nodes.length > 3000 || nodes.some((el) => el.tag === "h1")) return false
+			const runs = nodes.filter((el) => displayed(snapshot, el) && el.style["visibility"] !== "hidden"
+				&& !sourceTags.includes(el.tag) && squash(el.ownText) !== "")
+			const chars = runs.reduce((total, el) => total + [...squash(el.ownText)].length, 0)
+			if (runs.length < 3 || textChars === 0 || chars * 2 >= textChars) return false
+			const fields = nodes.filter((el) => ["input", "select", "textarea"].includes(el.tag) && !(el.tag === "input" && el.attributes["type"]?.toLowerCase() === "hidden"))
+			const linkedRuns = runs.filter((el) => lineage(snapshot, el).some((a) => a.tag === "a" && (a.attributes["href"] ?? "").trim() !== ""))
+			if (fields.length >= 2 || fields.length > 0 && nodes.some((el) => el.tag === "label") || linkedRuns.length * 2 >= runs.length) return false
+			if (modals.some((modal) => !nodes.includes(modal) && !lineage(snapshot, root).includes(modal))) return false
+			const text = squash(root.text)
+			if (text !== "" && ancestors.some((a) => squash(a.attributes["aria-label"] ?? "").includes(text))) return false
+			const parent = parentOf(snapshot, root)
+			const peers = parent ? childrenOf(snapshot, parent).filter((el) => el.index !== root.index) : []
+			const classes = (root.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+			return !peers.some((peer) => {
+				const peerClasses = (peer.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+				const sameShape = peer.tag === root.tag && (classes.length === 0) === (peerClasses.length === 0) && classes.every((c) => peerClasses.includes(c))
+				const shown = displayed(snapshot, peer) && peer.style["visibility"] !== "hidden" && !hidden(peer)
+				if (shown && (sameShape && peer.rect.width > 0 && peer.rect.height > 0 || text !== "" && squash(peer.text) === text)) return true
+				const alternative = peer.rect.width <= 1 || peer.rect.height <= 1 || /sr-only|visually-?hidden|screen-?reader|a11y-hidden|hidden-visually/i.test(peer.attributes["class"] ?? "")
+				return shown && alternative && peer.text.trim() !== "" && !/\b(demo|demonstration|illustrat\w*|interface|screen ?shots?|mock-?ups?|graphic|animation|animated|preview|image|video|visual|diagram|depict\w*|shows|showing|displayed)\b/i.test(peer.text)
+			})
+		}).map((el) => el.index))
+		for (const el of snapshot.elements) {
+			const level = headingLevel(el)
+			if (level === null || !displayed(snapshot, el) || el.rect.width <= 0 || el.rect.height <= 0) continue
+			const path = lineage(snapshot, el)
+			if (path.some((a) => mockups.has(a.index))) continue
+			if (path.some((a) => a.style["visibility"] === "hidden" || (a.tag === "dialog" && a.attributes["open"] === undefined))) continue
+			const footer = path.find((a) => a.tag === "footer" || a.attributes["role"] === "contentinfo" || a.attributes["id"] === "footer")?.index
+			const opensFooter = footer !== undefined && footer !== previousFooter
+			const intoFooter = footer !== undefined && (opensFooter || previousOpensFooter)
+			const skips = previous > 0 && level > previous + 1
+			if (skips && !intoFooter) hits.push({
+				element: el, message: `h${previous} followed by h${level}; missing h${previous + 1}`,
+				snippet: `${previousText.slice(0, 60)} / ${el.text.slice(0, 60)}`,
+			})
+			previousOpensFooter = opensFooter && previous > 0 && !skips
+			previousFooter = footer
+			previous = level
+			previousText = el.text
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/support/numbered-label.ts

@@ -0,0 +1,94 @@
+import { childrenOf, descendants, effectiveBackground, fontSizePx, parentOf, px, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import { parseShadow } from "../../../core/shadow"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { displayed, lineage } from "./page-text"
+
+export const parsedIndex = (text: string): number | null => {
+	if (text.length > 40) return null
+	const hash = /^#([0-9]{1,2})(?: [^ ].*)?$/.exec(text)
+	if (hash && /^#\d+ (rated|ranked|rank|best|top|in|pick|choice|overall|seller|bestseller|selling|voted|place|trending)\b/i.test(text)) return null
+	const match = hash ?? /^([0-9]{2})$/.exec(text) ?? /^([0-9]{1,2})\s*[^0-9A-Za-z_\s]\s*\S/.exec(text)
+	return match?.[1] !== undefined && Number(match[1]) <= 40 ? Number(match[1]) : null
+}
+
+export const labelBefore = (snapshot: PageSnapshot, heading: ElementSnapshot): ElementSnapshot | null => {
+	let current = heading
+	for (let level = 0; level <= 4; level++) {
+		const parent = parentOf(snapshot, current)
+		if (!parent) return null
+		const siblings = childrenOf(snapshot, parent)
+		const label = siblings[siblings.findIndex((s) => s.index === current.index) - 1]
+		if (label) {
+			const l = label.rect
+			const h = heading.rect
+			if (level > 1 && (l.width <= 0 || l.height <= 0 || h.width <= 0 || h.height <= 0 || l.y >= h.y + h.height
+				|| Math.max(h.y - l.y - l.height, h.x - l.x - l.width, 0) > 96)) return null
+			return label
+		}
+		if (["body", "html"].includes(parent.tag)) return null
+		current = parent
+	}
+	return null
+}
+
+export const labelType = (snapshot: PageSnapshot, label: ElementSnapshot): ElementSnapshot => {
+	let el = label
+	for (let level = 0; level < 3; level++) {
+		if (el.ownText !== "") return el
+		const children = childrenOf(snapshot, el).filter((c) => c.text.trim() !== "")
+		const only = children[0]
+		if (children.length !== 1 || !only) return el
+		el = only
+	}
+	return el
+}
+
+const drawsBox = (snapshot: PageSnapshot, el: ElementSnapshot): boolean => {
+	const parent = parentOf(snapshot, el)
+	const under = parent ? effectiveBackground(snapshot, parent) : { r: 255, g: 255, b: 255 }
+	const fill = effectiveBackground(snapshot, el)
+	const image = styleOf(el, "background-image")
+	const border = ["top", "right", "bottom", "left"].filter((side) =>
+		(px(styleOf(el, `border-${side}-width`)) ?? 0) >= 0.5
+		&& !["none", "hidden", ""].includes(styleOf(el, `border-${side}-style`))
+		&& (parseColor(styleOf(el, `border-${side}-color`))?.a ?? 0) > 0).length >= 3
+	return Math.max(Math.abs(fill.r - under.r), Math.abs(fill.g - under.g), Math.abs(fill.b - under.b)) > 3
+		|| image !== "" && image !== "none" || border
+		|| parseShadow(styleOf(el, "box-shadow")).some((layer) => layer.color.a >= 0.03
+			&& (layer.x !== 0 || layer.y !== 0 || layer.blur > 0 || layer.spread !== 0))
+}
+
+export const labelContext = (snapshot: PageSnapshot, el: ElementSnapshot, partner: ElementSnapshot = el): boolean => {
+	const path = lineage(snapshot, el)
+	if (!displayed(snapshot, el) || path.some((a) => ["nav", "form", "table", "thead", "tbody", "tfoot", "figure", "figcaption", "ol", "ul", "li"].includes(a.tag)
+		|| a.attributes["role"] === "navigation" || a.attributes["aria-hidden"] === "true"
+		|| a.attributes["data-impeccable-allow-kickers"] !== undefined
+		|| /breadcrumb/i.test(`${a.attributes["class"] ?? ""} ${a.attributes["aria-label"] ?? ""}`))) return false
+	const context = path.find((a) => ["article", "button", "a", "li"].includes(a.tag) || ["listitem", "option"].includes(a.attributes["role"] ?? ""))
+	if (!context || context.rect.height > snapshot.viewport.height * 2 || !lineage(snapshot, partner).includes(context)) return true
+	if (context.tag !== "article") return false
+	const above = lineage(snapshot, context).slice(1)
+	if (above.some((a) => ["a", "button", "li"].includes(a.tag) || ["listitem", "option"].includes(a.attributes["role"] ?? ""))) return false
+	if (path.slice(1, path.findIndex((a) => a.index === context.index) + 1).some((a) =>
+		lineage(snapshot, partner).includes(a) && drawsBox(snapshot, a))) return false
+	let below = context
+	for (const up of above.slice(0, 3)) {
+		if (up.tag === "body") break
+		const otherArticle = [...descendants(snapshot, up)].some((a) => a.tag === "article" && a.index !== context.index)
+		if (!otherArticle && drawsBox(snapshot, up)) return false
+		if (up.children.length !== 1 || up.children[0] !== below.index) break
+		below = up
+	}
+	return true
+}
+
+export const styledLabel = (label: ElementSnapshot, heading: ElementSnapshot): boolean => {
+	const size = fontSizePx(label)
+	const headingSize = fontSizePx(heading)
+	if (size <= 0 || size > Math.max(13, Math.min(16, headingSize * 0.45)) || headingSize > 0 && headingSize < size * 1.3) return false
+	const color = parseColor(styleOf(label, "color"))
+	return /mono/i.test(styleOf(label, "font-family")) || Number(styleOf(label, "font-weight")) >= 600
+		|| (px(styleOf(label, "letter-spacing")) ?? 0) >= 0.5 || styleOf(label, "text-transform") === "uppercase"
+		|| (color !== null && Math.max(color.r, color.g, color.b) - Math.min(color.r, color.g, color.b) >= 40)
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/support/page-text.ts

@@ -0,0 +1,37 @@
+import { ancestors, isRendered, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export const lineage = (snapshot: PageSnapshot, el: ElementSnapshot): readonly ElementSnapshot[] =>
+	[el, ...ancestors(snapshot, el)]
+
+export const displayed = (snapshot: PageSnapshot, el: ElementSnapshot): boolean =>
+	lineage(snapshot, el).every((a) => styleOf(a, "display") !== "none" && styleOf(a, "content-visibility") !== "hidden")
+
+export const visibleText = (snapshot: PageSnapshot, el: ElementSnapshot): boolean => {
+	if (!isRendered(snapshot, el) || !displayed(snapshot, el)) return false
+	return lineage(snapshot, el).every((a) => styleOf(a, "visibility") !== "hidden"
+		&& !(a.tag === "dialog" && a.attributes["open"] === undefined))
+}
+
+export const pageText = (snapshot: PageSnapshot): string =>
+	snapshot.elements.filter((el) => visibleText(snapshot, el) && !["script", "style", "template", "noscript"].includes(el.tag))
+		.map((el) => el.ownText).filter(Boolean).join(" ").replace(/\s+/g, " ").trim()
+
+export const paintedText = (snapshot: PageSnapshot, el: ElementSnapshot): boolean => {
+	if (!visibleText(snapshot, el)) return false
+	let left = el.rect.x
+	let top = el.rect.y
+	let right = left + el.rect.width
+	let bottom = top + el.rect.height
+	for (const a of ancestors(snapshot, el)) {
+		if (["hidden", "clip", "auto", "scroll"].includes(styleOf(a, "overflow-x"))) {
+			left = Math.max(left, a.rect.x)
+			right = Math.min(right, a.rect.x + a.rect.width)
+		}
+		if (["hidden", "clip", "auto", "scroll"].includes(styleOf(a, "overflow-y"))) {
+			top = Math.max(top, a.rect.y)
+			bottom = Math.min(bottom, a.rect.y + a.rect.height)
+		}
+	}
+	return right > left && bottom > top
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/theater-slop-phrase.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { theaterSlopPhrase } from "./theater-slop-phrase"
+
+test("#given dismissive framing and literal theaters #then only the closed vocabulary reports", () => {
+	const check = (text: string) => theaterSlopPhrase.check({ snapshot: buildSnapshot([{ text }]), config: {} })
+	for (const text of ["Security theater", "growth THEATER", "Accessibility theater"]) expect(check(text)).toHaveLength(1)
+	for (const text of ["Southern Theater Command", "The official theater", "A theater of operations", "security theatrical"]) expect(check(text)).toHaveLength(0)
+})
+
+test("#given framing split across inline elements #then rendered words still match", () => {
+	const check = (text: string) => theaterSlopPhrase.check({
+		snapshot: buildSnapshot([{ tag: "p", children: [{ tag: "span", text }, { tag: "em", text: "theater" }] }]), config: {},
+	})
+	expect(check("privacy")).toHaveLength(1)
+	expect(check("national")).toHaveLength(0)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/copy/theater-slop-phrase.ts

@@ -0,0 +1,21 @@
+import type { PageRule } from "../../rule"
+import { pageText } from "./support/page-text"
+
+const HEADS = [
+	"accessibility", "accountability", "agile", "alignment", "compliance", "diversity", "engagement", "governance", "growth",
+	"hiring", "hygiene", "innovation", "inclusion", "kindness", "leadership", "metrics", "privacy", "process", "productivity",
+	"quality", "safety", "security", "strategy", "sustainability", "transparency", "trust", "wellness",
+] as const
+
+export const theaterSlopPhrase: PageRule = {
+	meta: {
+		id: "theater-slop-phrase", name: "Theater framing copy", category: "slop", severity: "advisory", engine: "page",
+		description: "Calling a practice theater dismisses it without explaining the defect.",
+		fixHint: "Describe the missing behavior or evidence instead of dismissing it as theater.",
+	},
+	check: ({ snapshot }) => {
+		const match = [...pageText(snapshot).matchAll(/\b(\w+)\s+theater\b/gi)]
+			.find((m) => HEADS.some((head) => head === m[1]?.toLowerCase()))
+		return match ? [{ element: null, message: "Dismissive theater framing", snippet: match[0] }] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/blinking-cursor.test.ts

@@ -0,0 +1,43 @@
+import { test } from "bun:test"
+import { blinkingCursor } from "./blinking-cursor"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const caret = (id: string): NodeSpec => ({
+	id,
+	rect: { width: 10, height: 18, y: 40 },
+	style: { "background-color": "rgb(30,200,80)", "animation-name": "blink", "animation-iteration-count": "infinite" },
+})
+test("#given a cursor captured during its off phase #then its own opacity and visibility do not hide it", () => {
+	assertCases(blinkingCursor, [
+		{ ...caret("opacity"), style: { ...caret("opacity").style, opacity: "0" } },
+		{ ...caret("visibility"), style: { ...caret("visibility").style, visibility: "hidden" } },
+		{ style: { visibility: "hidden" }, children: [caret("panel")] },
+		{ ...caret("none"), style: { ...caret("none").style, display: "none" } },
+	], ["#opacity", "#visibility"])
+})
+test("#given fake cursors and real editable surfaces #then only fake carets report", () => {
+	assertCases(
+		blinkingCursor,
+		[
+			caret("flag"),
+			{ attributes: { contenteditable: "true" }, children: [caret("editable")] },
+			{ attributes: { role: "textbox" }, children: [caret("textbox")] },
+			{ ...caret("deep"), rect: { width: 10, height: 18, y: 1400 } },
+			{ ...caret("dot"), rect: { width: 8, height: 8 }, style: { ...caret("dot").style, ...round("50%") } },
+		],
+		["#flag"],
+	)
+})
+test("#given visibility keyframes without cursor names #then glyph and bar cursors report", () => {
+	assertCases(
+		blinkingCursor,
+		[
+			{ id: "glyph", tag: "span", text: "\u258c", style: { "animation-name": "flicker", "animation-iteration-count": "infinite" } },
+			{ ...caret("bar"), rect: { width: 12, height: 3 } },
+			{ id: "word", text: "LIVE", style: { "animation-name": "flicker", "animation-iteration-count": "infinite" } },
+			{ ...caret("panel"), rect: { width: 200, height: 90 } },
+		],
+		["#glyph", "#bar"],
+		{ cssText: ["@keyframes flicker {50%{opacity:0}}"] },
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/blinking-cursor.ts

@@ -0,0 +1,48 @@
+import type { PageRule } from "../../rule"
+import { parseColor } from "../../core/color"
+import { ancestors, shortSnippet, styleOf } from "../../core/page"
+import { context, radii, visible } from "./support/appearance"
+import { infiniteNames, keyframes, toggles } from "./support/keyframes"
+export const blinkingCursor: PageRule = {
+	meta: {
+		id: "blinking-cursor",
+		name: "Decorative blinking cursor",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "A fake caret blinks in non-editable landing content.",
+		fixHint: "Remove the decorative cursor and let actual editable fields draw their caret.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((e) => {
+			if (
+				e.rect.width <= 0 || e.rect.height <= 0 ||
+				styleOf(e, "display") === "none" || e.attributes["hidden"] !== undefined ||
+				[...ancestors(snapshot, e)].some(a => !visible(snapshot, a)) ||
+				["input", "textarea", "select", "img", "svg", "script", "style"].includes(e.tag) ||
+				e.rect.y > 1200 ||
+				context(
+					snapshot,
+					e,
+					(a) => a.attributes["role"] === "textbox" || ["", "true", "plaintext-only"].includes(a.attributes["contenteditable"] ?? "false"),
+				)
+			)
+				return []
+			const animated = infiniteNames(e.style).some((n) => /blink|caret|cursor/i.test(n) || toggles(keyframes(snapshot, n) ?? []))
+			if (!animated) return []
+			const text = e.text.trim(),
+				{ width: w, height: h } = e.rect
+			const glyph = /^[_|\u2580-\u259f\u25a0\u25ae\u2759\u275a\uff5c]$/.test(text)
+			const bg = parseColor(styleOf(e, "background-color"))
+			const filled =
+				(bg !== null && bg.a > 0.2) ||
+				["left", "right", "bottom"].some((side) => Number.parseFloat(styleOf(e, "border-" + side + "-width")) >= 1)
+			const block =
+				text === "" &&
+				e.children.length === 0 &&
+				filled &&
+				((w >= 1 && w <= 24 && h >= 6 && h <= 48 && h >= w) || (h >= 1 && h <= 6 && w >= 4 && w <= 24)) &&
+				Math.max(...radii(e)) < 0.4 * Math.min(w, h)
+			return glyph || block ? [{ element: e, message: "Blinking decorative cursor in the landing region", snippet: shortSnippet(e) }] : []
+		}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/border-accent-on-rounded.test.ts

@@ -0,0 +1,33 @@
+import { test } from "bun:test"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { assertCases, round, border } from "./support/assert-cases"
+
+test("#given top and bottom accent borders #then rounded visible boxes report", () => {
+	const style = { ...round("8px"), "border-top-width": "3px", "border-top-style": "solid", "border-top-color": "rgb(220,40,60)" }
+	assertCases(
+		borderAccentOnRounded,
+		[
+			{ id: "flag", style },
+			{ id: "square", style: { ...style, ...round("0px") } },
+			{ id: "neutral", style: { ...style, "border-top-color": "rgb(20,20,20)" } },
+			{ id: "status", attributes: { role: "status" }, style },
+			{ id: "hidden", style: { ...style, visibility: "hidden" } },
+		],
+		["#flag"],
+	)
+})
+test("#given ring arcs and even frames #then only dominant rounded accents report", () => {
+	assertCases(
+		borderAccentOnRounded,
+		[
+			{ id: "flag", style: { ...round("8px"), "border-bottom-width": "4px", "border-bottom-color": "rgb(40,80,220)" } },
+			{ id: "frame", style: { ...round("8px"), ...border("3px", "rgb(40,80,220)") } },
+			{
+				id: "circle",
+				rect: { width: 64, height: 64 },
+				style: { ...round("50%"), "border-top-width": "4px", "border-top-color": "rgb(40,80,220)" },
+			},
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/border-accent-on-rounded.ts

@@ -0,0 +1,14 @@
+import type { PageRule } from "../../rule"
+import { borderHits } from "./support/borders"
+export const borderAccentOnRounded: PageRule = {
+	meta: {
+		id: "border-accent-on-rounded",
+		name: "Border accent on rounded element",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A heavy accent band competes with rounded corners.",
+		fixHint: "Remove the accent border or square the container.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((e) => borderHits(snapshot, e, "border-accent-on-rounded")),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/bounce-easing.test.ts

@@ -0,0 +1,72 @@
+import { test } from "bun:test"
+import { bounceEasing } from "./bounce-easing"
+import { assertCases } from "./support/assert-cases"
+
+test("#given overshooting curves and calm transitions #then only the overshoot reports", () => {
+	assertCases(
+		bounceEasing,
+		[
+			{ id: "flag", style: { "transition-timing-function": "cubic-bezier(.34,1.56,.64,1)" } },
+			{ id: "calm", style: { "transition-timing-function": "cubic-bezier(.2,.8,.4,1)" } },
+			{ id: "boundary", style: { "transition-timing-function": "cubic-bezier(.2,-.1,.4,1.1)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given bounce names with readable pulse and travel keyframes #then pulses pass", () => {
+	assertCases(
+		bounceEasing,
+		[
+			{ id: "flag", style: { "animation-name": "fixture-bounce" } },
+			{ id: "pulse", style: { "animation-name": "bounceDelay" } },
+			{ id: "unknown", style: { "animation-name": "elastic-in" } },
+		],
+		["#flag", "#unknown"],
+		{
+			cssText: [
+				"@keyframes bounceDelay {from {transform:scale(0)} to {transform:scale(1)}} @keyframes fixture-bounce {from {transform:translateY(-25%)} to {transform:none}}",
+			],
+		},
+	)
+})
+test("#given allowed timing functions #then unrelated overshoot remains reportable", () => {
+	assertCases(
+		bounceEasing,
+		[
+			{ id: "flag", style: { "transition-timing-function": "cubic-bezier(.2,1.4,.4,1)" } },
+			{ id: "allowed", style: { "transition-timing-function": "cubic-bezier(0.34, 1.56, 0.64, 1)" } },
+			{ id: "calm" },
+		],
+		["#flag"],
+		{ config: { allowEasings: ["cubic-bezier(0.34,1.56,0.64,1)"] } },
+	)
+})
+
+test("#given an offscreen tray #then its parked seek bar does not report", () => {
+	const style = { "transition-timing-function": "cubic-bezier(.34,1.56,.64,1)" }
+	assertCases(bounceEasing, [
+		{ style: { position: "absolute" }, rect: { x: -2000, width: 300, height: 100 }, children: [
+			{ id: "parked", rect: { x: -2000, width: 140, height: 2 }, style },
+		] },
+		{ id: "shown", style },
+	], ["#shown"])
+})
+
+test("#given an unbound keyframe easing #then its page form remains unless a matching element covers it", () => {
+	const cssText = ["@keyframes springy { to { animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); } }"]
+	assertCases(bounceEasing, [{ text: "Ordinary copy" }], ["page"], { cssText })
+	assertCases(bounceEasing, [{ id: "covered", style: { "transition-timing-function": "cubic-bezier(.30,1.80,.60,1.0)" } }], ["#covered"], { cssText })
+	assertCases(bounceEasing, [{ text: "Ordinary copy" }], [], { cssText, config: { allowEasings: ["cubic-bezier(0.3,1.8,0.6,1)"] } })
+})
+
+test("#given pulse aliases unused tokens and hidden declared motion #then silent declarations create no page finding", () => {
+	assertCases(bounceEasing, [
+		{ attributes: { class: "pulse" }, style: { "animation-name": "bounceDelay", "animation-iteration-count": "infinite" } },
+		{ attributes: { class: "hidden" }, style: { opacity: "0", "transition-timing-function": "cubic-bezier(.68,-.55,.265,1.55)" } },
+	], [], { cssText: [
+		":root { --unused: cubic-bezier(.34,1.56,.64,1); }",
+		".missing { transition: transform .3s cubic-bezier(.2,1.4,.4,1); }",
+		".hidden { transition: transform .3s cubic-bezier(.68,-.55,.265,1.55); }",
+		".pulse { animation: bounceDelay 1s infinite; } @keyframes bounceDelay { from { transform: scale(0); } to { transform: scale(1); } }",
+	] })
+})