lazycodex-ai 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/labels.ts

@@ -0,0 +1,85 @@
+import { ancestors, childrenOf, descendants, fontSizePx, isHeading, parentOf, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { chroma, context, length, radii, visible } from "./appearance"
+function previous(s: PageSnapshot, e: ElementSnapshot): ElementSnapshot | null {
+	const p = parentOf(s, e)
+	if (!p) return null
+	const siblings = childrenOf(s, p),
+		at = siblings.findIndex((n) => n.index === e.index)
+	return siblings[at - 1] ?? null
+}
+export function labelBefore(s: PageSnapshot, h: ElementSnapshot): { label: ElementSnapshot; levels: number } | null {
+	let at = h
+	for (let levels = 0; levels <= 4; levels++) {
+		const label = previous(s, at)
+		if (label) return { label, levels }
+		const p = parentOf(s, at)
+		if (!p || ["body", "html"].includes(p.tag)) return null
+		at = p
+	}
+	return null
+}
+export function labelType(s: PageSnapshot, e: ElementSnapshot): ElementSnapshot {
+	let at = e
+	for (let i = 0; i < 3; i++) {
+		if (at.ownText.trim() !== "") return at
+		const children = childrenOf(s, at).filter((c) => c.text.trim() !== "")
+		const only = children[0]
+		if (children.length !== 1 || !only) return at
+		at = only
+	}
+	return at
+}
+export const application = (s: PageSnapshot, e: ElementSnapshot): boolean =>
+	context(s, e, (a) => a.tag === "dialog" || ["tabpanel", "dialog", "application"].includes(a.attributes["role"] ?? ""))
+export const caps = (e: ElementSnapshot): boolean =>
+	styleOf(e, "text-transform") === "uppercase" || (/[A-Z]/.test(e.text) && !/[a-z]/.test(e.text))
+export function heroLabel(s: PageSnapshot, h: ElementSnapshot): ElementSnapshot | null {
+	if (h.tag !== "h1" || fontSizePx(h) < 48 || application(s, h) || !visible(s, h)) return null
+	const e = previous(s, h)
+	if (!e || isHeading(e) || e.text.trim().length < 2 || e.text.trim().length > 60 || !visible(s, e)) return null
+	const ty = labelType(s, e),
+		size = fontSizePx(ty),
+		spacing = length(styleOf(ty, "letter-spacing"))
+	if (size <= 0 || size > 14) return null
+	const dated =
+		(e.tag === "time" || [...descendants(s, e)].some((c) => c.tag === "time") || /\b(?:19|20)\d{2}\b/.test(e.text)) && spacing < 1.6
+	const tracked = caps(ty) && !dated && (spacing >= 1.6 || spacing >= size * 0.08)
+	const bold = Number(styleOf(ty, "font-weight")) >= 700 && chroma(styleOf(ty, "color"), 40)
+	const dash = [e.before, e.after].some(
+		(p) =>
+			p &&
+			length(p.style["width"] ?? "") >= 8 &&
+			length(p.style["width"] ?? "") <= 80 &&
+			length(p.style["height"] ?? "") >= 1 &&
+			length(p.style["height"] ?? "") <= 6 &&
+			chroma(p.style["background-color"] ?? ""),
+	)
+	return tracked || bold || dash ? e : null
+}
+export const headingLevel = (e: ElementSnapshot): number =>
+	isHeading(e) ? Number(e.tag.slice(1)) : e.attributes["role"] === "heading" ? Number(e.attributes["aria-level"] ?? 2) : 0
+export function cardContext(s: PageSnapshot, h: ElementSnapshot, label: ElementSnapshot): boolean {
+	for (const a of ancestors(s, h)) {
+		if (a.tag === "body") break
+		if (![...descendants(s, a)].some((n) => n.index === label.index)) continue
+		if (["article", "li", "a", "button"].includes(a.tag) && a.rect.height <= s.viewport.height * 2) return true
+		if (headingLevel(h) < 3 || a.rect.height >= s.viewport.height) continue
+		const bg = parseColor(styleOf(a, "background-color")),
+			framed = radii(a).some((r) => r > 0) && bg !== null && bg.a >= 0.9
+		if (!framed) continue
+		const own = parseColor(styleOf(label, "background-color"))
+		const badge =
+			styleOf(label, "position") === "absolute" &&
+			(label.rect.y <= a.rect.y + 2 ||
+				(own !== null && own.a >= 0.9 && Math.max(Math.abs(own.r - bg.r), Math.abs(own.g - bg.g), Math.abs(own.b - bg.b)) > 3))
+		return fontSizePx(h) < 24 || badge
+	}
+	return false
+}
+export const nearAbove = (label: ElementSnapshot, h: ElementSnapshot): boolean =>
+	label.rect.y + label.rect.height <= h.rect.y + 4 &&
+	h.rect.y - label.rect.y - label.rect.height <= Math.max(64, fontSizePx(h) * 2) &&
+	label.rect.x < h.rect.x + h.rect.width &&
+	label.rect.x + label.rect.width > h.rect.x

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/raster-state.ts

@@ -0,0 +1,51 @@
+import { ancestors, childrenOf, parentOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+const tokens = (e: ElementSnapshot): readonly string[] => [...new Set((e.attributes["class"] ?? "").toLowerCase().split(/\s+/).filter(Boolean))]
+const opacity = (s: PageSnapshot, e: ElementSnapshot): number =>
+	[e, ...ancestors(s, e)].reduce((value, n) => {
+		const own = Number.parseFloat(styleOf(n, "opacity"))
+		return value * (Number.isFinite(own) ? own : 1)
+	}, 1)
+const transitionsOpacity = (e: ElementSnapshot): boolean => {
+	const times = styleOf(e, "transition-duration").split(",")
+	return styleOf(e, "transition-property").split(",").some((p, i) =>
+		["opacity", "all"].includes(p.trim()) && Number.parseFloat(times[i % times.length] ?? "0") > 0)
+}
+
+export function pendingRaster(s: PageSnapshot, e: ElementSnapshot): boolean {
+	if (e.motion.includes("opacity")) return true
+	const chain = [e, ...ancestors(s, e)]
+	if (chain.slice(1).some(n => Number.parseFloat(styleOf(n, "opacity")) <= 0.02) ||
+		chain.some(n => styleOf(n, "display") === "none" || styleOf(n, "visibility") === "hidden")) return true
+	const attrs = e.attributes
+	if (attrs["data-loaded"]?.trim().toLowerCase() === "false" ||
+		(attrs["data-ll-status"] !== undefined && attrs["data-ll-status"].trim().toLowerCase() !== "loaded")) return true
+	if (["data-src", "data-srcset", "data-lazy", "data-lazy-src", "data-lazy-srcset", "data-original", "data-original-src"]
+		.some(name => attrs[name] !== undefined) && (attrs["src"] ?? "").trim() === "") return true
+	const parent = parentOf(s, e)
+	const classes = [e, ...(parent ? [parent] : [])].flatMap(tokens)
+	if (classes.some(t => t.includes("lazy")) && !classes.some(t => t.includes("loaded")) &&
+		(opacity(s, e) <= 0.02 || /(?:^|;)\s*opacity\s*:/i.test(attrs["style"] ?? ""))) return true
+	if (parent && opacity(s, e) <= 0.02) {
+		const videoOver = (n: ElementSnapshot, depth: number): boolean => {
+			const w = Math.min(e.rect.x + e.rect.width, n.rect.x + n.rect.width) - Math.max(e.rect.x, n.rect.x)
+			const h = Math.min(e.rect.y + e.rect.height, n.rect.y + n.rect.height) - Math.max(e.rect.y, n.rect.y)
+			if (n.tag === "video" && opacity(s, n) > 0.02 && [n, ...ancestors(s, n)].every(a =>
+				styleOf(a, "display") !== "none" && styleOf(a, "visibility") !== "hidden") &&
+				w > 0 && h > 0 && w * h >= e.rect.width * e.rect.height * 0.5) return true
+			return depth > 0 && childrenOf(s, n).some(child => videoOver(child, depth - 1))
+		}
+		if (parent.tag === "video" || childrenOf(s, parent).some(n => n.index !== e.index && videoOver(n, 3))) return true
+	}
+	if (e.tag !== "img" || opacity(s, e) > 0.02) return false
+	const own = tokens(e)
+	const peers = s.elements.filter(other => {
+		if (other.index === e.index || other.tag !== "img" || Number.parseFloat(styleOf(other, "opacity")) < 0.5 ||
+			opacity(s, other) <= 0.02 || !transitionsOpacity(other)) return false
+		const theirs = tokens(other)
+		const shared = own.filter(t => theirs.includes(t)).length
+		return shared > 0 && own.length - shared <= 1 && theirs.filter(t => !own.includes(t)).length === 1
+	})
+	return peers.length >= 2
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/index.ts

@@ -0,0 +1,16 @@
+import type { Rule } from "../rule"
+import { COLOR_RULES } from "./color"
+import { TYPOGRAPHY_RULES } from "./typography"
+import { LAYOUT_RULES } from "./layout"
+import { DECORATION_RULES } from "./decoration"
+import { COPY_RULES } from "./copy"
+import { SOURCE_RULES } from "./source"
+
+export const ALL_RULES: readonly Rule[] = [
+	...COLOR_RULES,
+	...TYPOGRAPHY_RULES,
+	...LAYOUT_RULES,
+	...DECORATION_RULES,
+	...COPY_RULES,
+	...SOURCE_RULES,
+]

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/body-text-viewport-edge.test.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { bodyTextViewportEdge } from "./body-text-viewport-edge"
+import { lines, marked } from "./support/layout-cases"
+
+const prose = "This paragraph contains substantial reading text that needs a gutter at either side of the page."
+
+test("#given full width prose with and without a gutter #then only edge touching text reports", () => {
+	expect(marked(bodyTextViewportEdge, [
+		{ id: "flush", tag: "p", text: prose, rect: { width: 1280, height: 80 }, lineRects: lines([1280, 100], 0, 0) },
+		{ id: "inset", tag: "p", text: prose, rect: { width: 1280, height: 80 }, lineRects: lines([1200], 40, 100) },
+	])).toEqual(["#flush"])
+})
+
+test("#given a phone gutter of twelve pixels #then phone and desktop floors differ", () => {
+	const node = { id: "copy", tag: "p", text: prose, rect: { x: 12, width: 296 }, lineRects: lines([296], 12, 0) }
+	expect(marked(bodyTextViewportEdge, [node], { viewport: { width: 320, height: 800 } })).toEqual([])
+	expect(marked(bodyTextViewportEdge, [{ ...node, rect: { x: 12, width: 1256 }, lineRects: lines([1256], 12, 0) }])).toEqual(["#copy"])
+})
+
+test("#given navigation and scrollable tracks beside body content #then only body content keeps the gutter requirement", () => {
+	const node = { id: "copy", tag: "p", text: prose, rect: { width: 1280 }, lineRects: lines([1280], 0, 0) }
+	expect(marked(bodyTextViewportEdge, [node])).toEqual(["#copy"])
+	expect(marked(bodyTextViewportEdge, [{ tag: "nav", children: [node] }])).toEqual([])
+	expect(marked(bodyTextViewportEdge, [{ style: { "overflow-x": "auto" }, children: [node] }])).toEqual([])
+})
+
+test("#given body text past the window #then overflow is reported once at page level", () => {
+	const node = { tag: "p", text: prose, rect: { x: 40, width: 1600 }, lineRects: lines([1600], 40, 0) }
+	expect(marked(bodyTextViewportEdge, [node, node])).toEqual(["page"])
+	expect(marked(bodyTextViewportEdge, [{ ...node, rect: { x: 1400, width: 1600 }, lineRects: lines([1600], 1400, 0) }])).toEqual([])
+})
+
+test("#given overflow on one side and a narrow gutter opposite #then both forms report", () => {
+	const node = { id: "copy", tag: "p", text: prose, rect: { x: 8, width: 1400 }, lineRects: lines([1400], 8, 0) }
+	expect(marked(bodyTextViewportEdge, [node])).toEqual(["#copy", "page"])
+})
+
+test("#given prose inside a whole card link #then its label is not body reading text", () => {
+	const node = { id: "copy", text: prose, rect: { width: 1280 }, lineRects: lines([1280], 0, 0) }
+	expect(marked(bodyTextViewportEdge, [{ tag: "a", children: [node] }])).toEqual([])
+})
+
+test("#given a genuinely running endless row #then its current text position is not a page gutter", () => {
+	const css = "@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }"
+	const track = (motion: readonly string[], state = "running", name = "slide", count = "infinite"): NodeSpec => ({
+		style: { transform: "matrix(1, 0, 0, 1, -1, 0)", "animation-name": name, "animation-iteration-count": count, "animation-play-state": state },
+		motion, rect: { x: -1, y: 0, width: 2560, height: 100 }, scroll: { scrollWidth: 2560, clientWidth: 2560 },
+		children: [
+			{ rect: { x: -1, y: 0, width: 1280, height: 100 }, children: [{ id: "copy", tag: "p", text: prose,
+				rect: { x: 8, y: 0, width: 1260, height: 48 }, lineRects: lines([1200, 800], 8, 0) }] },
+			{ rect: { x: 1279, y: 0, width: 1280, height: 100 } },
+		],
+	})
+	const host = (node: NodeSpec): NodeSpec => ({ style: { "overflow-x": "hidden" },
+		rect: { width: 1280, height: 100 }, scroll: { clientWidth: 1280 }, children: [node] })
+	expect(marked(bodyTextViewportEdge, [host(track(["transform"]))], { cssText: [css] })).toEqual([])
+	expect(marked(bodyTextViewportEdge, [host(track([], "paused"))], { cssText: [css] })).toEqual(["#copy"])
+	const scale = "@keyframes pulse { from { transform: scale(.9) } to { transform: scale(1) } }"
+	expect(marked(bodyTextViewportEdge, [host(track(["transform"], "running", "pulse"))], { cssText: [scale] })).toEqual(["#copy"])
+	const fade = "@keyframes fade { from { opacity: 0 } to { opacity: 1 } }"
+	expect(marked(bodyTextViewportEdge, [host(track(["opacity", "transform"], "running, running", "fade, slide", "infinite, 1"))],
+		{ cssText: [fade, css] })).toEqual(["#copy"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/body-text-viewport-edge.ts

@@ -0,0 +1,62 @@
+import { childrenOf, fontSizePx, isIgnored, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import { alpha, bounds, chain, clipsX, length, outOfFlow, painted, right, scrollsX, textLines } from "./support/geometry"
+import { trackCuts } from "./support/clipping"
+import { ridesRunningTrack } from "./support/motion"
+
+export const bodyTextViewportEdge: PageRule = {
+	meta: {
+		id: "body-text-viewport-edge", name: "Body text touching viewport edge", category: "quality", severity: "warning", engine: "page",
+		description: "Reading text touches the viewport edge without a usable gutter.",
+		fixHint: "Keep at least 12px of horizontal space on phones and 16px on wider screens; constrain overflowing columns.",
+	},
+	check: ({ snapshot }) => {
+		const width = snapshot.viewport.width
+		const floor = width <= 480 ? 12 : 16
+		const hits: PageHit[] = []
+		let overflow = false
+		for (const el of snapshot.elements) {
+			if (isIgnored(snapshot, el, "body-text-viewport-edge")) continue
+			const prose = ["p", "li"].includes(el.tag)
+			const generic = ["div", "section", "article", "aside", "main"].includes(el.tag) &&
+				el.ownText !== "" && fontSizePx(el) < 28 && ["block", "flow-root"].includes(styleOf(el, "display")) &&
+				childrenOf(snapshot, el).every((c) => styleOf(c, "display") === "inline")
+			if (!(prose || generic) || el.text.length <= 40 || !painted(snapshot, el) || outOfFlow(el) ||
+				el.rect.width <= width * 0.5 || alpha(el, "background-color") > 0) continue
+			if (ridesRunningTrack(snapshot, el)) continue
+			const path = chain(snapshot, el)
+			if (generic && path.some((n) => /^(a|button|label|summary|select|textarea)$/.test(n.tag) ||
+				/^(button|link|tab|menuitem|option)$/.test(n.attributes["role"] ?? "") || n.attributes["contenteditable"] !== undefined)) continue
+			if (path.some((n) => n.tag === "nav" || n.tag === "header" && n.rect.height <= snapshot.viewport.height ||
+				scrollsX(n) || /^(pre|pre-wrap)$/.test(styleOf(n, "white-space")))) continue
+			const lines = textLines(snapshot, el)
+			const text = bounds(lines)
+			if (!text && generic) continue
+			if (text && trackCuts(snapshot, el, text)) continue
+			let left = text?.x ?? el.rect.x
+			let end = text ? right(text) : right(el.rect)
+			if (clipsX(el) && !["", "clip"].includes(styleOf(el, "text-overflow"))) {
+				left = Math.max(left, el.rect.x)
+				end = Math.min(end, right(el.rect))
+			}
+			const contentLeft = el.rect.x + length(el, "padding-left") + length(el, "border-left-width")
+			const contentEnd = right(el.rect) - length(el, "padding-right") - length(el, "border-right-width")
+			if (text && lines.length >= 2 && text.width >= (contentEnd - contentLeft) * 0.9 &&
+				!(styleOf(el, "text-align") !== "justify" && left >= 16 && end <= width - 16)) {
+				left = contentLeft
+				end = contentEnd
+			} else if (styleOf(el, "display") === "list-item") {
+				left = Math.min(left, contentLeft)
+			}
+			if (end <= 0 || left >= width) continue
+			if (path.slice(1).some((n) => styleOf(n, "position") === "fixed" && n.rect.height < snapshot.viewport.height / 2) && Math.min(left, width - end) >= 4) continue
+			if (Math.round(-left) > 0 || Math.round(end - width) > 0) overflow = true
+			if (Math.round(left) >= 0 && left < floor || Math.round(width - end) >= 0 && width - end < floor) hits.push({ element: el, message: `Body copy keeps less than ${floor}px from the viewport edge.`, snippet: shortSnippet(el) })
+		}
+		if (overflow) {
+			const widest = snapshot.elements.filter((el) => painted(snapshot, el) && !chain(snapshot, el).some(scrollsX)).sort((a, b) => right(b.rect) - right(a.rect))[0]
+			hits.push({ element: null, message: `Body text runs outside the viewport${widest ? `; widest element ${widest.selector} ends at ${right(widest.rect)}px` : ""}.`, snippet: widest ? shortSnippet(widest) : "Page overflow" })
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/clipped-overflow-container.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { clippedOverflowContainer } from "./clipped-overflow-container"
+import { marked } from "./support/layout-cases"
+
+const popup: NodeSpec = { id: "popup", attributes: { role: "menu" }, style: { position: "absolute" }, rect: { x: 30, y: 160, width: 200, height: 80 }, text: "Menu contents" }
+const host = (child: NodeSpec, style = "hidden"): NodeSpec => ({
+	id: "host", style: { position: "relative", "overflow-x": style, "overflow-y": style }, rect: { x: 20, y: 20, width: 200, height: 120 }, children: [child],
+})
+
+test("#given escaped popup layers and decorative crops #then only popup clipping reports", () => {
+	expect(marked(clippedOverflowContainer, [host(popup)])).toEqual(["#host"])
+	expect(marked(clippedOverflowContainer, [host({ ...popup, attributes: { "aria-hidden": "true" }, text: "", id: "crop" })])).toEqual([])
+	expect(marked(clippedOverflowContainer, [host(popup, "auto")])).toEqual([])
+})
+
+test("#given nested clipping hosts #then the nearest clipping box owns the popup", () => {
+	const inner = { ...host(popup), id: "inner" }
+	expect(marked(clippedOverflowContainer, [host(inner)])).toEqual(["#inner"])
+	expect(marked(clippedOverflowContainer, [host({ ...popup, rect: { x: 30, y: 30, width: 100, height: 60 } })])).toEqual([])
+})
+
+test("#given fixed popups without and with transformed containment #then only the trapped fixed layer reports", () => {
+	const fixed = { ...popup, style: { position: "fixed" } }
+	expect(marked(clippedOverflowContainer, [host(fixed)])).toEqual([])
+	const transformed = { ...host(fixed), style: { position: "relative", transform: "matrix(1, 0, 0, 1, 0, 0)", "overflow-x": "hidden", "overflow-y": "hidden" } }
+	expect(marked(clippedOverflowContainer, [transformed])).toEqual(["#host"])
+})
+
+test("#given class named dropdowns and camel case slider tracks #then neither is an escaping popup", () => {
+	expect(marked(clippedOverflowContainer, [host({ ...popup, attributes: { class: "dropdown-panel" } })])).toEqual([])
+	expect(marked(clippedOverflowContainer, [{ ...host(popup), attributes: { class: "slickViewport" } }])).toEqual([])
+	expect(marked(clippedOverflowContainer, [host({ ...popup, attributes: { role: "menu", "aria-hidden": "true" } })])).toEqual([])
+})
+
+test("#given modal and nonmodal open dialogs #then only the nonmodal dialog can be trapped by a clip", () => {
+	const dialog = { ...popup, tag: "dialog", attributes: { open: "" }, modal: true }
+	expect(marked(clippedOverflowContainer, [host(dialog)])).toEqual([])
+	expect(marked(clippedOverflowContainer, [host({ ...dialog, modal: false })])).toEqual(["#host"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/clipped-overflow-container.ts

@@ -0,0 +1,15 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { clippedChild } from "./support/clipping"
+
+export const clippedOverflowContainer: PageRule = {
+	meta: {
+		id: "clipped-overflow-container", name: "Positioned child clipped by overflow container", category: "quality", severity: "advisory", engine: "page",
+		description: "A container cuts off a positioned menu, tooltip, or dialog that needs to escape it.",
+		fixHint: "Render the popup outside the clipping box or remove the clip from its containing block.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		const child = clippedChild(snapshot, el)
+		return child ? [{ element: el, message: `${el.selector} clips positioned popup ${child.selector}.`, snippet: shortSnippet(el) }] : []
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/content-hidden-at-rest.test.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "bun:test"
+import { contentHiddenAtRest } from "./content-hidden-at-rest"
+import { marked } from "./support/layout-cases"
+
+const hidden = { id: "reveal", style: { opacity: "0" }, text: "Invisible main content. ".repeat(10) }
+const visible = { tag: "p", text: "Visible copy. ".repeat(10) }
+
+test("#given a failed reveal and visible content #then the page fails the hidden share threshold", () => {
+	expect(marked(contentHiddenAtRest, [hidden, visible])).toEqual(["page"])
+	expect(marked(contentHiddenAtRest, [{ ...hidden, style: { opacity: "1" } }, visible])).toEqual([])
+})
+
+test("#given closed dialogs menus and panels #then their text is excluded from the hidden share", () => {
+	expect(marked(contentHiddenAtRest, [hidden, visible])).toEqual(["page"])
+	for (const role of ["dialog", "tabpanel", "menu"]) {
+		expect(marked(contentHiddenAtRest, [{ ...hidden, attributes: { role } }, visible])).toEqual([])
+	}
+	expect(marked(contentHiddenAtRest, [{ tag: "nav", children: [hidden] }, visible])).toEqual([])
+})
+
+test("#given a selected tab panel whose reveal failed #then it counts as expected content", () => {
+	const panel = { ...hidden, attributes: { role: "tabpanel" } }
+	expect(marked(contentHiddenAtRest, [{ tag: "button", attributes: { "aria-controls": "reveal", "aria-selected": "true" } }, panel, visible])).toEqual(["page"])
+	expect(marked(contentHiddenAtRest, [{ tag: "button", attributes: { "aria-controls": "reveal", "aria-selected": "false" } }, panel, visible])).toEqual([])
+})
+
+test("#given the character and share boundaries #then only substantial hidden content fails", () => {
+	expect(marked(contentHiddenAtRest, [{ ...hidden, text: "x".repeat(150) }, { text: "v".repeat(50) }])).toEqual(["page"])
+	expect(marked(contentHiddenAtRest, [{ ...hidden, text: "x".repeat(149) }, { text: "v".repeat(51) }])).toEqual([])
+	expect(marked(contentHiddenAtRest, [{ ...hidden, text: "x".repeat(150) }, { text: "v".repeat(350) }])).toEqual([])
+})
+
+test("#given a hidden viewport overlay and a fixed app shell #then only the app shell is page content", () => {
+	const layer = { ...hidden, style: { position: "fixed", visibility: "hidden" }, rect: { x: 0, y: 0, width: 1280, height: 800 } }
+	const page = { ...visible, text: "Visible copy. ".repeat(60) }
+	expect(marked(contentHiddenAtRest, [layer, page])).toEqual([])
+	expect(marked(contentHiddenAtRest, [{ ...layer, text: "Hidden application text. ".repeat(40), children: [{ tag: "main" }] }, page])).toEqual(["page"])
+})
+
+test("#given sliders with no visible slide and with a visible current slide #then only waiting slides of the started slider count", () => {
+	const slide = { ...hidden, tag: "p" }
+	const slider = { attributes: { class: "swiper" }, children: [slide] }
+	expect(marked(contentHiddenAtRest, [slider, visible])).toEqual([])
+	expect(marked(contentHiddenAtRest, [{ ...slider, children: [slide, { tag: "p", text: "Current offer" }] }, visible])).toEqual(["page"])
+})
+
+test("#given an aria labelled selected tab #then a failed reveal remains hidden content", () => {
+	const tab = { id: "tab", tag: "button", attributes: { "aria-selected": "true" } }
+	const panel = { ...hidden, attributes: { role: "tabpanel", "aria-labelledby": "tab" } }
+	expect(marked(contentHiddenAtRest, [tab, panel, visible])).toEqual(["page"])
+})
+
+test("#given a long overlay on a larger page #then capped snippets do not decide its share", () => {
+	const layer = { text: "Hidden menu text. ".repeat(70), style: { position: "fixed", visibility: "hidden" },
+		rect: { x: 0, y: 0, width: 1280, height: 800 } }
+	expect(marked(contentHiddenAtRest, [layer, { text: "Visible page text. ".repeat(170) }])).toEqual([])
+})
+
+test("#given unrelated tab and content class tokens #then they do not name a closed tab panel", () => {
+	expect(marked(contentHiddenAtRest, [{ ...hidden, attributes: { class: "tab content" } }, visible])).toEqual(["page"])
+	expect(marked(contentHiddenAtRest, [{ ...hidden, attributes: { class: "tab-content" } }, visible])).toEqual([])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/content-hidden-at-rest.ts

@@ -0,0 +1,63 @@
+import { childrenOf, descendants, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { bottom, chain, hasRole, right } from "./support/geometry"
+import { classWords, closedClass, unstartedSlider } from "./support/hidden-interface"
+
+function closed(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const controls = s.elements.filter((n) => (n.attributes["aria-controls"] ?? "").split(/\s+/).includes(el.attributes["id"] ?? "\u0000"))
+	const labels = (el.attributes["aria-labelledby"] ?? "").split(/\s+/)
+	const selected = (hasRole(el, ["tabpanel"]) || classWords(el).some((word) => ["tab", "tabs", "tabpanel", "tabpane"].includes(word))) &&
+		(controls.some((n) => n.attributes["aria-selected"] === "true" || n.attributes["aria-expanded"] === "true") ||
+		s.elements.some((n) => labels.includes(n.attributes["id"] ?? "\u0000") && n.attributes["aria-selected"] === "true"))
+	if (!selected && controls.some((n) => n.attributes["aria-selected"] === "false" || n.attributes["aria-expanded"] === "false")) return true
+	if (!selected && (hasRole(el, ["dialog", "alertdialog", "tabpanel"]) || closedClass(el))) return true
+	if (styleOf(el, "position") === "fixed" && (right(el.rect) <= 0 || el.rect.x >= s.viewport.width)) return true
+	const path = chain(s, el)
+	if (path.some((n) => n.attributes["inert"] !== undefined || n.tag === "nav" || hasRole(n, ["navigation", "menu", "menubar"]))) return true
+	if (styleOf(el, "position") === "fixed" && /^(hidden|collapse)$/.test(styleOf(el, "visibility")) &&
+		el.rect.x <= 1 && el.rect.y <= 1 && right(el.rect) >= s.viewport.width - 1 && bottom(el.rect) >= s.viewport.height - 1) {
+		const nodes = [el, ...descendants(s, el)]
+		const chars = nodes.reduce((sum, n) => sum + n.ownText.length, 0)
+		const pageChars = s.elements.reduce((sum, n) => sum + n.ownText.length, 0)
+		if (chars * 2 < pageChars && !nodes.some((n) => n.tag === "main" || n.tag === "h1" || hasRole(n, ["main"]))) return true
+	}
+	if (path.some((n) => /^(absolute|fixed)$/.test(styleOf(n, "position")) &&
+		!["", "none", "matrix(1, 0, 0, 1, 0, 0)"].includes(styleOf(n, "transform")) &&
+		/\b(?:transform|all)\b/.test(styleOf(n, "transition-property")) &&
+		(right(n.rect) <= 0 || n.rect.x >= s.viewport.width))) return true
+	const p = el.parent === null ? undefined : s.elements[el.parent]
+	const siblings = p ? childrenOf(s, p) : []
+	const previous = siblings[siblings.indexOf(el) - 1]
+	if (previous && (previous.attributes["aria-expanded"] === "false" ||
+		childrenOf(s, previous).length === 1 && childrenOf(s, previous)[0]?.attributes["aria-expanded"] === "false")) return true
+	return path.slice(1).some((n) => {
+		const triggers = s.elements.filter((t) => (t.attributes["aria-controls"] ?? "").split(/\s+/).includes(n.attributes["id"] ?? "\u0000"))
+		return triggers.some((t) => t.attributes["aria-expanded"] === "false" || t.attributes["aria-selected"] === "false") &&
+			!triggers.some((t) => t.attributes["aria-expanded"] === "true" || t.attributes["aria-selected"] === "true")
+	})
+}
+
+export const contentHiddenAtRest: PageRule = {
+	meta: {
+		id: "content-hidden-at-rest", name: "Content invisible at rest", category: "quality", severity: "error", engine: "page",
+		description: "A large share of page text remains transparent or hidden instead of appearing as content.",
+		fixHint: "Show content by default and enhance its entrance without making visibility depend on a reveal script.",
+	},
+	check: ({ snapshot }) => {
+		let total = 0
+		let hidden = 0
+		for (const el of snapshot.elements) {
+			if (el.ownText === "") continue
+			const path = chain(snapshot, el)
+			if (path.some((n) => /^(script|style|noscript|template|title|head|meta|link|option|optgroup|select|datalist|dialog)$/.test(n.tag) ||
+				n.attributes["hidden"] !== undefined || n.attributes["aria-hidden"] === "true" || styleOf(n, "display") === "none")) continue
+			const invisible = [...path].reverse().find((n) => Number.parseFloat(styleOf(n, "opacity")) <= 0.02 || /^(hidden|collapse)$/.test(styleOf(n, "visibility")))
+			if (invisible && (closed(snapshot, invisible) || unstartedSlider(snapshot, invisible))) continue
+			total += el.ownText.length
+			if (invisible) hidden += el.ownText.length
+		}
+		if (total < 200 || hidden < 150 || hidden / total <= 0.3) return []
+		return [{ element: null, message: `${hidden} of ${total} characters (${Math.round(hidden / total * 100)}%) remain hidden.`, snippet: `${hidden}/${total} hidden characters` }]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/cramped-padding.test.ts

@@ -0,0 +1,61 @@
+import { expect, test } from "bun:test"
+import { crampedPadding } from "./cramped-padding"
+import { border, lines, marked } from "./support/layout-cases"
+
+const card = {
+	id: "card", text: "Substantial text that needs space beside its container boundary.",
+	style: { ...border, "padding-top": "2px", "padding-left": "2px", "padding-bottom": "2px", "padding-right": "2px" },
+	rect: { x: 24, y: 24, width: 300, height: 80 }, lineRects: lines([294, 200], 27, 27),
+}
+
+test("#given tight measured text and generous padding #then only the tight boundary reports", () => {
+	expect(marked(crampedPadding, [card])).toEqual(["#card"])
+	expect(marked(crampedPadding, [{ ...card, style: { ...border, "padding-top": "16px", "padding-bottom": "16px", "padding-left": "16px", "padding-right": "16px" } }])).toEqual([])
+})
+
+test("#given centered labels despite zero padding #then measured breathing room clears the rule", () => {
+	expect(marked(crampedPadding, [card])).toEqual(["#card"])
+	expect(marked(crampedPadding, [{ ...card, lineRects: lines([200], 74, 50) }])).toEqual([])
+})
+
+test("#given transparent borders and inline highlights #then no container boundary is charged", () => {
+	expect(marked(crampedPadding, [card])).toEqual(["#card"])
+	expect(marked(crampedPadding, [{ ...card, style: { ...card.style, display: "inline" } }])).toEqual([])
+	const transparent = { ...card.style, "border-top-color": "transparent", "border-right-color": "transparent", "border-bottom-color": "transparent", "border-left-color": "transparent" }
+	expect(marked(crampedPadding, [{ ...card, style: transparent }])).toEqual([])
+})
+
+test("#given child text flush against a wrapper #then the wrapper owns the missing inset", () => {
+	const child = { tag: "p", text: "Child text that meets the outer frame.", rect: { x: 25, y: 25, width: 298, height: 50 }, lineRects: lines([298], 25, 25) }
+	expect(marked(crampedPadding, [{ id: "wrapper", style: border, rect: card.rect, children: [child] }])).toEqual(["#wrapper"])
+	expect(marked(crampedPadding, [{ id: "wrapper", style: border, rect: card.rect, children: [{ ...child, rect: { x: 40, y: 40, width: 260, height: 30 }, lineRects: lines([260], 40, 40) }] }])).toEqual([])
+})
+
+test("#given shifted transparent shells and pinned labels #then measured in-flow text decides", () => {
+	const paragraph = { tag: "p", text: "Text carried onto the left rule by its shell.", style: { "padding-left": "24px" }, rect: { x: 1, y: 40, width: 298, height: 40 }, lineRects: lines([250], 25, 40) }
+	const wrapper = { id: "wrapper", style: border, rect: { x: 24, y: 24, width: 300, height: 160 }, children: [
+		{ style: { position: "relative", left: "-24px" }, rect: { x: 1, y: 25, width: 298, height: 150 }, children: [paragraph] },
+	] }
+	expect(marked(crampedPadding, [wrapper])).toEqual(["#wrapper"])
+	expect(marked(crampedPadding, [{ ...wrapper, children: [{ children: [
+		{ ...paragraph, rect: { x: 25, y: 40, width: 298, height: 40 }, lineRects: lines([250], 49, 40) },
+		{ ...paragraph, style: { position: "absolute" }, lineRects: lines([250], 25, 80) },
+	] }] }])).toEqual([])
+})
+
+test("#given gradient ink without a filled background #then it does not bound the text", () => {
+	expect(marked(crampedPadding, [{ ...card, style: { "background-image": "linear-gradient(red, blue)", "background-clip": "text" } }])).toEqual([])
+})
+
+test("#given lines below a fixed height band #then only intersecting glyph bands set its insets", () => {
+	expect(marked(crampedPadding, [{ ...card, style: { "background-color": "#333", "padding-left": "16px", "padding-right": "16px" },
+		rect: { x: 24, y: 24, width: 300, height: 66 }, lineRects: [{ x: 40, y: 45, width: 240, height: 22 }, { x: 40, y: 111, width: 240, height: 22 }] }])).toEqual([])
+})
+
+test("#given abutting equal fills #then the shared edge does not need padding", () => {
+	const panel = { id: "panel", style: { "background-color": "#eee" }, rect: { x: 24, y: 24, width: 300, height: 60 },
+		children: [{ tag: "p", text: "The text closes at the bottom of this band.", rect: { x: 40, y: 45, width: 260, height: 39 }, lineRects: lines([240], 40, 64) }] }
+	const next = { style: { "background-color": "#eee" }, rect: { x: 24, y: 84, width: 300, height: 60 } }
+	expect(marked(crampedPadding, [panel, next])).toEqual([])
+	expect(marked(crampedPadding, [panel, { ...next, style: { "background-color": "#ccd" } }])).toEqual(["#panel"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/cramped-padding.ts

@@ -0,0 +1,97 @@
+import { childrenOf, descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { fillDiffers } from "./support/cards"
+import { alpha, borders, bottom, bounds, chain, clipsY, intersects, length, outOfFlow, painted, right } from "./support/geometry"
+import { continuedFill, glyphBand, paddingBackdrop, paddingFill, paddingScale, uncut } from "./support/padding"
+
+export const crampedPadding: PageRule = {
+	meta: {
+		id: "cramped-padding", name: "Cramped padding", category: "quality", severity: "warning", engine: "page",
+		description: "Rendered text sits too close to a visible container boundary.",
+		fixHint: "Inset text from the painted boundary; use at least 8px beside body text and scale the space with its font size.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!painted(snapshot, el) || styleOf(el, "display") === "inline" || el.rect.width <= 0 || el.rect.height <= 0) return []
+		const drawn = borders(el)
+		const fill = paddingFill(snapshot, el) && !paddingBackdrop(snapshot, el)
+		const outline = length(el, "outline-width") > 0 && !["", "none"].includes(styleOf(el, "outline-style")) && alpha(el, "outline-color") > 0
+		const fullBleed = el.rect.width >= snapshot.document.clientWidth * 0.94
+		if (!fill && !drawn.some(Boolean) && !outline) return []
+		const sides = ["top", "right", "bottom", "left"]
+		const inset = (r: typeof el.rect): readonly number[] => [
+			r.y - el.rect.y - length(el, "border-top-width"),
+			right(el.rect) - right(r) - length(el, "border-right-width"),
+			bottom(el.rect) - bottom(r) - length(el, "border-bottom-width"),
+			r.x - el.rect.x - length(el, "border-left-width"),
+		]
+		if (el.ownText.length > 20 && el.rect.width > 100 && el.rect.height > 30 &&
+			!(el.tag === "code" && !snapshot.elements.some((a) => a.tag === "pre" && [...descendants(snapshot, a)].includes(el)))) {
+			if (!fill && drawn.filter(Boolean).length < 2) return []
+			const text = bounds(el.lineRects.filter((r) => intersects(r, el.rect)))
+			if (!text) return []
+			const band = glyphBand(el, text)
+			const clipped = { x: Math.max(band.x, el.rect.x), y: Math.max(band.y, el.rect.y),
+				width: Math.min(right(band), right(el.rect)) - Math.max(band.x, el.rect.x),
+				height: Math.min(bottom(band), bottom(el.rect)) - Math.max(band.y, el.rect.y) }
+			const insets = inset(clipped)
+			const size = fontSizePx(el)
+			const bad = sides.some((side, i) => {
+				const vertical = i === 0 || i === 2
+				const threshold = vertical ? Math.max(4, size * 0.3) : Math.max(8, size * 0.5)
+				return (drawn[i] || fill && (vertical || !fullBleed)) &&
+					length(el, `padding-${side}`) < threshold && (insets[i] ?? Infinity) < threshold
+			})
+			return bad ? [{ element: el, message: "The measured inset is too small for the text size.", snippet: shortSnippet(el) }] : []
+		}
+		if (el.ownText !== "" || outOfFlow(el) || /^(html|body|main|header|footer|nav|article|aside|button|a|label|summary|code|pre|input|textarea|select|form|figure|table|tbody|thead|tr|td|th)$/.test(el.tag)) return []
+		let kids = childrenOf(snapshot, el)
+		let unwrapped = false
+		for (let depth = 0; depth < 3; depth++) {
+			const only = kids.length === 1 ? kids[0] : undefined
+			if (!only || only.ownText !== "" || borders(only).some(Boolean) || fillDiffers(snapshot, only) ||
+				["top", "right", "bottom", "left"].some((side) => length(only, `padding-${side}`) > 0) ||
+				childrenOf(snapshot, only).length === 0) break
+			kids = childrenOf(snapshot, only)
+			unwrapped = true
+		}
+		const texts = [...descendants(snapshot, el)].filter((n) =>
+			/^(a|button|code|dd|dt|figcaption|h[1-6]|li|p|pre|span|td|th)$/.test(n.tag) &&
+			n.ownText.length > 4 && painted(snapshot, n) && !chain(snapshot, n).slice(0, chain(snapshot, n).indexOf(el))
+				.some((c) => outOfFlow(c) || styleOf(c, "display") !== "inline" && paddingFill(snapshot, c)))
+		const flush = sides.some((side, i) => {
+			if (!(drawn[i] || outline || fill && (!(i === 1 || i === 3) || !fullBleed))) return false
+			if (!drawn[i] && !outline && continuedFill(snapshot, el, i)) return false
+			if (length(el, `padding-${side}`) > 2) return false
+			if (i === 2 && [...descendants(snapshot, el)].some((n) => clipsY(n) &&
+				n.scroll.scrollHeight > n.scroll.clientHeight + 1 && Math.abs(bottom(n.rect) - bottom(el.rect)) <= 2)) return false
+			const textFlush = texts.some((n) => {
+				let r = bounds(n.lineRects)
+				if (!r) return false
+				const scale = paddingScale(el)
+				const small = el.rect.height / scale < 27.5
+				if ((small || !fill && !outline && drawn.filter(Boolean).length === 1) && (i === 0 || i === 2)) r = glyphBand(n, r, scale)
+				const x = Math.max(r.x, n.rect.x)
+				const y = Math.max(r.y, n.rect.y)
+				r = { x, y, width: Math.min(right(r), right(n.rect)) - x, height: Math.min(bottom(r), bottom(n.rect)) - y }
+				if (r.width <= 0 || r.height <= 0) return false
+				if (!uncut(snapshot, n, el, r, i)) return false
+				const gap = inset(r)[i] ?? Infinity
+				const threshold = (small ? Math.min(4, fontSizePx(n) * 0.25) : 4) * scale
+				return gap >= -scale && gap < threshold
+			})
+			if (!textFlush) return false
+			const insulated = (c: typeof el): boolean => {
+				if (outOfFlow(c)) return true
+				const gap = inset(c.rect)[i] ?? Infinity
+				const offset = styleOf(c, "position") === "relative" &&
+					["top", "right", "bottom", "left"].some((p) => length(c, p) !== 0) ||
+					!["", "none"].includes(styleOf(c, "transform"))
+				if (offset) return gap >= 4
+				return gap < -1 || gap >= 4 || styleOf(c, "position") === "static" &&
+					(length(c, `padding-${side}`) >= 4 || length(c, `margin-${side}`) >= 4)
+			}
+			return unwrapped || !kids.some(insulated)
+		})
+		return flush ? [{ element: el, message: "Child text lands flush against a painted container edge.", snippet: shortSnippet(el) }] : []
+	}),
+}