oh-my-opencode 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/text-occlusion.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { textOcclusion } from "./text-occlusion"
+import { lines, marked } from "./support/layout-cases"
+
+const text: NodeSpec = { id: "text", tag: "p", text: "Root cause identified in four minutes", style: { position: "absolute" }, rect: { x: 40, y: 40, width: 300, height: 24 }, lineRects: lines([300], 40, 40) }
+const cover: NodeSpec = { id: "cover", style: { position: "absolute", "z-index": "5", "background-color": "#222" }, rect: { x: 40, y: 40, width: 240, height: 60 } }
+
+test("#given an opaque overlap and a transparent control #then only painted coverage reports", () => {
+	expect(marked(textOcclusion, [text, cover])).toEqual(["#text"])
+	expect(marked(textOcclusion, [text, { ...cover, style: { ...cover.style, opacity: "0" } }])).toEqual([])
+	expect(marked(textOcclusion, [text, { ...cover, style: { position: "absolute", "z-index": "5" } }])).toEqual([])
+})
+
+test("#given pinned overlays and text above its background #then neither is occlusion", () => {
+	expect(marked(textOcclusion, [text, cover])).toEqual(["#text"])
+	expect(marked(textOcclusion, [text, { ...cover, style: { ...cover.style, position: "fixed" } }])).toEqual([])
+	expect(marked(textOcclusion, [{ ...text, style: { position: "absolute", "z-index": "10" } }, cover])).toEqual([])
+})
+
+test("#given a short overlap and a clipping scrollbox #then unseen or tiny coverage does not count", () => {
+	expect(marked(textOcclusion, [text, cover])).toEqual(["#text"])
+	expect(marked(textOcclusion, [text, { ...cover, rect: { x: 40, y: 40, width: 40, height: 60 } }])).toEqual([])
+	expect(marked(textOcclusion, [{ style: { "overflow-y": "auto" }, rect: { x: 20, y: 0, width: 400, height: 30 }, children: [text] }, cover])).toEqual([])
+})
+
+test("#given one pixel type scaled to readable geometry #then it collides while a one pixel dot does not", () => {
+	const caption = { ...text, id: "caption", style: {}, lineRects: lines([240], 40, 40) }
+	const label = { ...text, id: "label", text: "Limited offer today", style: { position: "absolute", "font-size": "1px" }, rect: { x: 40, y: 40, width: 165, height: 16 }, lineRects: lines([165], 40, 40, 16) }
+	expect(marked(textOcclusion, [caption, label])).toEqual(["#caption", "#label"])
+	expect(marked(textOcclusion, [caption, { ...label, rect: { x: 40, y: 40, width: 10, height: 1 }, lineRects: lines([10], 40, 40, 1) }])).toEqual([])
+})
+
+test("#given a single emoji or an edge sliver #then neither is a readable occlusion victim", () => {
+	expect(marked(textOcclusion, [{ ...text, text: "\u{1f600}" }, cover])).toEqual([])
+	expect(marked(textOcclusion, [{ ...text, rect: { x: -250, y: 40, width: 300, height: 24 }, lineRects: lines([300], -250, 40) }, cover])).toEqual([])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/text-occlusion.ts

@@ -0,0 +1,84 @@
+import { descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../types"
+import { alpha, borders, bottom, bounds, chain, clipsX, clipsY, intersects, length, painted, right } from "./support/geometry"
+
+const layered = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	chain(s, el).some((n) => /^(absolute|fixed|sticky)$/.test(styleOf(n, "position")))
+const pinned = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	chain(s, el).some((n) => /^(fixed|sticky)$/.test(styleOf(n, "position")))
+const opaque = (el: ElementSnapshot): boolean =>
+	alpha(el, "background-color") > 0.6 || borders(el).filter(Boolean).length >= 2
+const z = (s: PageSnapshot, el: ElementSnapshot): number =>
+	chain(s, el).reduce((sum, n) => sum + (Number.parseInt(styleOf(n, "z-index"), 10) || 0), 0)
+
+function visibleLines(s: PageSnapshot, el: ElementSnapshot): readonly Rect[] {
+	return el.lineRects.flatMap((line) => {
+		let x = Math.max(0, line.x)
+		let y = Math.max(0, line.y)
+		let end = Math.min(s.viewport.width, right(line))
+		let low = Math.min(s.viewport.height, bottom(line))
+		for (const c of chain(s, el)) {
+			if (clipsX(c)) { x = Math.max(x, c.rect.x); end = Math.min(end, right(c.rect)) }
+			if (clipsY(c)) { y = Math.max(y, c.rect.y); low = Math.min(low, bottom(c.rect)) }
+		}
+		return end - x >= 6 && low - y >= 6 ? [{ x, y, width: end - x, height: low - y }] : []
+	})
+}
+
+export const textOcclusion: PageRule = {
+	meta: {
+		id: "text-occlusion", name: "Text occluded by an overlapping element", category: "quality", severity: "warning", engine: "page",
+		description: "An overlapping surface or text run covers readable words.",
+		fixHint: "Separate the layers, remove leaking inline padding, or position the text outside the overlapping surface.",
+	},
+	check: ({ snapshot }) => {
+		const hits: PageHit[] = []
+		const nodes = snapshot.elements.filter((n) => painted(snapshot, n))
+		for (const el of nodes) {
+			if ([...el.ownText].length < 2 || el.rect.width < 6 || el.rect.height < 6 ||
+				el.lineRects.every((r) => r.height <= 1) || alpha(el, "color") <= 0.02 ||
+				chain(snapshot, el).reduce((opacity, n) => opacity * (Number.parseFloat(styleOf(n, "opacity")) || 0), 1) <= 0.02 ||
+				/blur\((?:[4-9]|\d{2,})px\)/.test(styleOf(el, "filter"))) continue
+			const lines = visibleLines(snapshot, el)
+			const total = lines.reduce((n, r) => n + r.width * r.height, 0)
+			if (total === 0) continue
+			const full = bounds(el.lineRects)
+			const visible = bounds(lines)
+			if (full && visible && (visible.width / full.width < 0.25 || el.lineRects.length === 1 && visible.height / full.height < 0.5)) continue
+			const related = new Set([...chain(snapshot, el), ...descendants(snapshot, el)])
+			const cover = nodes.find((other) => {
+				if (related.has(other) || pinned(snapshot, other) || /^(img|video|canvas|picture)$/.test(other.tag) ||
+					styleOf(other, "pointer-events") === "none") return false
+				const text = other.ownText.length >= 2 && other.lineRects.some((r) => r.height > 1)
+				if (!opaque(other) && !text) return false
+				if (text && !layered(snapshot, el) && !layered(snapshot, other)) return false
+				if (z(snapshot, other) < z(snapshot, el) || z(snapshot, other) === z(snapshot, el) && other.index < el.index && !text) return false
+				if (other.ownText === el.ownText && styleOf(other, "font-family") === styleOf(el, "font-family") &&
+					Math.abs(other.rect.x - el.rect.x) < 1 && Math.abs(other.rect.y - el.rect.y) < 1 && !opaque(other)) return false
+				const regions = opaque(other) ? [other.rect] : other.lineRects
+				let covered = 0
+				for (const line of lines) {
+					for (const r of regions) {
+						if (!intersects(line, r)) continue
+						covered += (Math.min(right(line), right(r)) - Math.max(line.x, r.x)) *
+							(Math.min(bottom(line), bottom(r)) - Math.max(line.y, r.y))
+					}
+				}
+				return covered / total >= (opaque(other) ? 0.3 : 0.45)
+			})
+			if (cover) hits.push({ element: el, message: `Text overlaps ${cover.selector}.`, snippet: shortSnippet(el) })
+		}
+		for (const el of nodes) {
+			if (styleOf(el, "display") !== "inline" || !opaque(el)) continue
+			const padding = Math.max(length(el, "padding-top"), length(el, "padding-bottom"))
+			if (padding < 12) continue
+			const expanded = { ...el.rect, y: el.rect.y - padding, height: el.rect.height + padding * 2 }
+			const siblings = nodes.filter((n) => n.parent === el.parent && n !== el)
+			if (siblings.some((n) => n.lineRects.some((r) => intersects(expanded, r)))) {
+				hits.push({ element: el, message: "Inline vertical padding paints over nearby content.", snippet: shortSnippet(el) })
+			}
+		}
+		return hits
+	},
+}

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

@@ -0,0 +1,83 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { textOverflow } from "./text-overflow"
+import { lines, marked } from "./support/layout-cases"
+
+const spill: NodeSpec = { id: "spill", tag: "p", text: "A long unbroken line of text spills outside this box.", rect: { x: 40, y: 40, width: 120, height: 40 }, scroll: { clientWidth: 120, scrollWidth: 300 }, lineRects: lines([300], 40, 40) }
+const clip = (node: NodeSpec): NodeSpec => ({ style: { "overflow-x": "hidden" }, rect: { x: 20, y: 20, width: 200, height: 200 }, children: [node] })
+
+test("#given spilled text under a clip and text in free space #then only harmful spill reports", () => {
+	expect(marked(textOverflow, [clip(spill)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [spill])).toEqual([])
+	expect(marked(textOverflow, [clip({ ...spill, lineRects: lines([100], 40, 40) })])).toEqual([])
+})
+
+test("#given explicit scroll and ellipsis affordances #then intentional containment is exempt", () => {
+	expect(marked(textOverflow, [clip(spill)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip({ ...spill, style: { "overflow-x": "auto" } })])).toEqual([])
+	expect(marked(textOverflow, [clip({ ...spill, style: { "overflow-x": "hidden", "text-overflow": "ellipsis" } })])).toEqual([])
+})
+
+test("#given inline text with ineffective ellipsis #then its block container determines the spill", () => {
+	const inline = { ...spill, tag: "span", style: { display: "inline", "overflow-x": "hidden", "text-overflow": "ellipsis" }, scroll: { clientWidth: 0, scrollWidth: 0 } }
+	expect(marked(textOverflow, [clip(inline)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [{ ...clip(inline), style: { "overflow-x": "hidden", "text-overflow": "ellipsis" } }])).toEqual([])
+})
+
+test("#given hidden or vertically clipped replacement text #then no invisible width spill reports", () => {
+	expect(marked(textOverflow, [clip(spill)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip({ ...spill, style: { opacity: "0" } })])).toEqual([])
+	expect(marked(textOverflow, [{ ...clip(spill), rect: { x: 20, y: 0, width: 200, height: 30 }, style: { "overflow-y": "hidden" } }])).toEqual([])
+})
+
+test("#given code in a scrolling page shell #then only a component scroller exempts it", () => {
+	const code = { ...spill, tag: "pre", rect: { x: 1100, y: 40, width: 120, height: 40 }, lineRects: lines([500], 1100, 40) }
+	expect(marked(textOverflow, [{ style: { "overflow-x": "auto" }, rect: { x: 0, y: 0, width: 1280, height: 800 }, children: [code] }])).toEqual(["#spill"])
+	expect(marked(textOverflow, [{ style: { "overflow-x": "auto" }, rect: { x: 1100, y: 40, width: 120, height: 80 }, children: [code] }])).toEqual([])
+})
+
+test("#given code clipped in a terminal window #then its intentional crop is not harmful overflow", () => {
+	expect(marked(textOverflow, [clip(spill)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip({ ...spill, tag: "pre" })])).toEqual([])
+})
+
+test("#given a generated suffix and an image replacement #then only painted overflow reports", () => {
+	const suffix = { ...spill, lineRects: lines([50], 40, 40), after: { content: '" and a very long generated suffix"' } }
+	expect(marked(textOverflow, [clip(suffix)])).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip({ ...spill, lineRects: lines([300], -9999, 40) })])).toEqual([])
+})
+
+test("#given an SVG text node #then HTML overflow rules do not judge its graphics coordinate space", () => {
+	expect(marked(textOverflow, [clip({ tag: "svg", children: [{ ...spill, tag: "text" }] })])).toEqual([])
+})
+
+test("#given a clamped overflow box #then the intentional truncation is not a spill", () => {
+	const clamped = { ...spill, style: { "overflow-x": "hidden", "-webkit-line-clamp": "2" } }
+	expect(marked(textOverflow, [clip(clamped)])).toEqual([])
+	expect(marked(textOverflow, [clip({ ...clamped, style: { ...clamped.style, "-webkit-line-clamp": "none" } })])).toEqual(["#spill"])
+})
+
+test("#given text in the overflow clip margin #then that visible spill is still reported", () => {
+	const label = { ...spill, rect: { x: 40, y: 62, width: 120, height: 20 }, lineRects: lines([300], 40, 62) }
+	const host = { style: { "overflow-x": "clip", "overflow-y": "clip", "overflow-clip-margin": "24px" },
+		rect: { x: 20, y: 20, width: 200, height: 40 }, children: [label] }
+	expect(marked(textOverflow, [host])).toEqual(["#spill"])
+	expect(marked(textOverflow, [{ ...host, style: { ...host.style, "overflow-clip-margin": "0px" } }])).toEqual([])
+	expect(marked(textOverflow, [{ ...host, style: { ...host.style, "overflow-x": "hidden", "overflow-y": "hidden" } }])).toEqual([])
+})
+
+test("#given a running finite width animation #then its temporary opening spill is not reported", () => {
+	const css = "@keyframes type { from { width: 0 } to { width: 100% } }"
+	const style = { "animation-name": "type", "animation-iteration-count": "1", "animation-play-state": "running" }
+	const moving = { ...spill, motion: ["width"], style }
+	expect(marked(textOverflow, [clip(moving)], { cssText: [css] })).toEqual([])
+	expect(marked(textOverflow, [clip({ ...moving, motion: [] })], { cssText: [css] })).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip({ ...moving, style: { ...style, "animation-iteration-count": "infinite" } })], { cssText: [css] })).toEqual(["#spill"])
+	expect(marked(textOverflow, [clip(moving)])).toEqual(["#spill"])
+})
+
+test("#given a running inline size transition #then a finite named transition can explain the opening box", () => {
+	const moving = { ...spill, motion: ["inline-size"], style: { "transition-property": "inline-size", "transition-duration": "200ms" } }
+	expect(marked(textOverflow, [clip(moving)])).toEqual([])
+	expect(marked(textOverflow, [clip({ ...moving, style: { ...moving.style, "transition-duration": "0s" } })])).toEqual(["#spill"])
+})

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

@@ -0,0 +1,72 @@
+import { descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../types"
+import { alpha, borders, bottom, bounds, chain, clipRect, clipsX, clipsY, intersects, length, painted, right, scrollsX, textLines } from "./support/geometry"
+import { shell } from "./support/clipping"
+import { openingWidth } from "./support/motion"
+
+const truncates = (el: ElementSnapshot): boolean =>
+	!["inline", "contents"].includes(styleOf(el, "display")) && clipsX(el) &&
+	(!["", "clip"].includes(styleOf(el, "text-overflow")) || Number.parseInt(styleOf(el, "-webkit-line-clamp"), 10) > 0)
+
+function harm(s: PageSnapshot, el: ElementSnapshot, box: Rect, text: Rect): boolean {
+	const code = chain(s, el).some((n) => ["pre", "code"].includes(n.tag))
+	const tolerance = fontSizePx(el) * 0.25
+	let cut = false
+	for (const c of chain(s, el)) {
+		if (styleOf(c, "display") === "inline" || !clipsX(c)) continue
+		const clip = clipRect(c)
+		if (text.x < clip.x - 1 || right(text) > right(clip) + 1) {
+			if (!code) return true
+			if (text.x < clip.x - 1 && clip.x > tolerance ||
+				right(text) > right(clip) + 1 && right(clip) < s.viewport.width - tolerance) cut = true
+		}
+	}
+	if (cut) return false
+	if (text.x <= tolerance || right(text) >= s.viewport.width - tolerance) return true
+	const related = new Set([...chain(s, el), ...descendants(s, el)])
+	return s.elements.some((other) => {
+		if (related.has(other) || !painted(s, other) || other.rect.width <= 2 || other.rect.height <= 2) return false
+		if (other.ownText === "" && !/^(img|video|canvas|svg|picture)$/.test(other.tag) && alpha(other, "background-color") < 0.25 && !borders(other).some(Boolean) &&
+			["", "none"].includes(styleOf(other, "background-image"))) return false
+		const r = other.rect
+		if (r.x <= box.x && right(r) >= right(box) && r.y <= box.y && bottom(r) >= bottom(box)) return false
+		return intersects(text, r) && (right(r) > right(box) && r.x < right(text) || r.x < box.x && right(r) > text.x)
+	})
+}
+
+export const textOverflow: PageRule = {
+	meta: {
+		id: "text-overflow", name: "Content overflowing its container", category: "quality", severity: "warning", engine: "page",
+		description: "Text spills out of its box into a clip, another element, or the viewport edge.",
+		fixHint: "Allow wrapping, constrain the content width, or provide a deliberate horizontal scroll region.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (el.ownText === "" || /^(input|textarea|select|option|svg|path|script|style)$/.test(el.tag) || !painted(snapshot, el)) return []
+		const path = chain(snapshot, el)
+		if (path.some((n) => n.tag === "svg")) return []
+		if (openingWidth(snapshot, el)) return []
+		const code = path.some((n) => ["pre", "code", "samp", "kbd"].includes(n.tag))
+		if (path.some((n) => scrollsX(n) && !(code && n !== el && shell(snapshot, n))) || path.some(truncates)) return []
+		const text = bounds(textLines(snapshot, el))
+		if (!text) return []
+		if (path.some((c) => clipsY(c) && (text.y >= bottom(clipRect(c)) || bottom(text) <= clipRect(c).y))) return []
+		if (path.some((c) => styleOf(c, "display") !== "inline" && clipsX(c) && (right(text) <= clipRect(c).x || text.x >= right(clipRect(c))))) return []
+		const box = styleOf(el, "display") === "inline"
+			? path.slice(1).find((c) => c.scroll.clientWidth > 0 && styleOf(c, "display") !== "inline") ?? el
+			: el
+		const start = box.rect.x + length(box, "border-left-width")
+		const end = start + (box.scroll.clientWidth > 0 ? box.scroll.clientWidth : box.rect.width)
+		const generated = [el.before, el.after].some((p) => p !== null && /["'][^"']+["']/.test(p.style["content"] ?? "") &&
+			p.style["display"] !== "none")
+		const reach = generated && el.scroll.scrollWidth > el.scroll.clientWidth
+			? { ...text, width: Math.max(text.width, el.scroll.scrollWidth) } : text
+		const delta = Math.max(right(reach) - end, start - reach.x)
+		const drawn = alpha(box, "background-color") > 0 || borders(box).some(Boolean)
+		const pastContent = Math.max(right(text) - end + length(box, "padding-right"), start + length(box, "padding-left") - text.x)
+		const paintedSpill = !code && drawn && !clipsX(box) && delta < 16 &&
+			delta >= Math.max(fontSizePx(el) * 0.25, 2) && pastContent >= 15
+		if (!(delta >= 16 && harm(snapshot, el, box.rect, reach) || paintedSpill)) return []
+		return [{ element: el, message: `Text extends ${Math.round(delta)}px past its container.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/unbalanced-heading.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from "bun:test"
+import { unbalancedHeading } from "./unbalanced-heading"
+import { lines, marked } from "./support/layout-cases"
+
+const heading = { id: "heading", tag: "h2", text: "Design that holds up under real content and real people", rect: { x: 24, y: 24, width: 500, height: 60 }, lineRects: lines([500, 80]) }
+
+test("#given two heading lines with a tiny tail #then only the unbalanced heading reports", () => {
+	expect(marked(unbalancedHeading, [heading])).toEqual(["#heading"])
+	expect(marked(unbalancedHeading, [{ ...heading, lineRects: lines([500, 400]) }])).toEqual([])
+})
+
+test("#given authored balance and deliberate breaks #then heading line intent is respected", () => {
+	expect(marked(unbalancedHeading, [heading])).toEqual(["#heading"])
+	expect(marked(unbalancedHeading, [{ ...heading, style: { "text-wrap": "balance" } }])).toEqual([])
+	expect(marked(unbalancedHeading, [{ ...heading, children: [{ tag: "br" }] }])).toEqual([])
+})
+
+test("#given long statements and two word headings #then the balance rule stands down", () => {
+	expect(marked(unbalancedHeading, [heading])).toEqual(["#heading"])
+	expect(marked(unbalancedHeading, [{ ...heading, lineRects: lines([500, 500, 500, 80]) }])).toEqual([])
+	expect(marked(unbalancedHeading, [{ ...heading, text: "Documentation hub" }])).toEqual([])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/unbalanced-heading.ts

@@ -0,0 +1,22 @@
+import { isHeading, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { measuredLines, oneFace, wordsOf, wrapIs } from "./support/line-breaks"
+
+export const unbalancedHeading: PageRule = {
+	meta: {
+		id: "unbalanced-heading", name: "Unbalanced heading", category: "quality", severity: "advisory", engine: "page",
+		description: "The last line of a heading is much shorter than the line above.",
+		fixHint: "Use text-wrap: balance or rewrite the heading to keep its lines near even.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isHeading(el) || wrapIs(el, "balance") || wordsOf(el).length < 3) return []
+		const lines = measuredLines(snapshot, el)
+		const tail = lines.at(-1)
+		const above = lines.at(-2)
+		if (lines.length < 2 || lines.length > 3 || !tail || !above || tail.width >= above.width * 0.35) return []
+		const widest = Math.max(...lines.map((l) => l.width))
+		const total = lines.reduce((n, l) => n + l.width, 0)
+		if (oneFace(snapshot, el) && widest * el.text.length / total < 20) return []
+		return [{ element: el, message: `The last line is ${Math.round(tail.width / above.width * 100)}% as wide as the line above.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/viewport-reflow.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { viewportReflow } from "./viewport-reflow"
+import { selectors } from "./support/layout-cases"
+
+for (const width of [320, 375, 768, 1024, 1440]) {
+	test(`#given an overflowing document at ${width}px #then a page finding names the furthest element`, () => {
+		const base = buildSnapshot([
+			{ id: "offender", rect: { x: 20, width: width + 40 } },
+			{ id: "scroll", style: { "overflow-x": "auto" }, children: [{ id: "track", rect: { width: width * 3 } }] },
+			{ id: "hidden", style: { opacity: "0" }, rect: { width: width * 4 } },
+		], { viewport: { width, height: 800 } })
+		const snapshot = { ...base, document: { ...base.document, scrollWidth: width + 60 } }
+		expect(selectors(viewportReflow, snapshot)).toEqual(["page"])
+		expect(viewportReflow.check({ snapshot, config: {} })[0]?.message).toContain("#offender")
+		expect(selectors(viewportReflow, base)).toEqual([])
+	})
+}
+
+test("#given overflow without a measured offender #then the document still fails reflow", () => {
+	const base = buildSnapshot([])
+	const snapshot = { ...base, document: { ...base.document, scrollWidth: 1300 } }
+	expect(selectors(viewportReflow, snapshot)).toEqual(["page"])
+	expect(selectors(viewportReflow, base)).toEqual([])
+})
+
+test("#given overflowing words and a wider clipped track #then the real uncontained text owns the overflow", () => {
+	const base = buildSnapshot([
+		{ id: "words", text: "Unbroken text", rect: { x: 20, width: 200 }, lineRects: [{ x: 20, y: 0, width: 1400, height: 20 }] },
+		{ id: "window", style: { "overflow-x": "hidden" }, rect: { width: 1280 }, children: [{ id: "track", rect: { width: 6000 } }] },
+	])
+	const snapshot = { ...base, document: { ...base.document, scrollWidth: 1420 } }
+	expect(viewportReflow.check({ snapshot, config: {} })[0]?.message).toContain("#words")
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/viewport-reflow.ts

@@ -0,0 +1,33 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { chain, clipsX, painted, right, scrollsX } from "./support/geometry"
+
+function reaches(s: PageSnapshot, el: ElementSnapshot): number {
+	let end = Math.max(right(el.rect), ...el.lineRects.map(right))
+	if (clipsX(el)) end = right(el.rect)
+	for (const ancestor of chain(s, el).slice(1)) {
+		if (clipsX(ancestor) && ancestor.tag !== "body") end = Math.min(end, right(ancestor.rect))
+	}
+	return end
+}
+
+export const viewportReflow: PageRule = {
+	meta: {
+		id: "viewport-reflow", name: "Viewport reflow", category: "quality", severity: "error", engine: "page",
+		description: "The document is wider than the viewport and requires sideways scrolling.",
+		fixHint: "Constrain the widest content, allow long tokens to wrap, and keep intentional horizontal scrolling inside its own region.",
+	},
+	check: ({ snapshot }) => {
+		if (snapshot.document.scrollWidth <= snapshot.document.clientWidth) return []
+		const widest = snapshot.elements
+			.filter((el) => painted(snapshot, el) && reaches(snapshot, el) > snapshot.document.clientWidth &&
+				!chain(snapshot, el).slice(1).some((n) => n.tag !== "body" && scrollsX(n)))
+			.sort((a, b) => reaches(snapshot, b) - reaches(snapshot, a))[0]
+		return [{
+			element: null,
+			message: `Document width ${snapshot.document.scrollWidth}px exceeds ${snapshot.document.clientWidth}px${widest ? `; furthest element ${widest.selector} ends at ${reaches(snapshot, widest)}px` : ""}.`,
+			snippet: widest ? shortSnippet(widest) : `${snapshot.document.scrollWidth}px / ${snapshot.document.clientWidth}px`,
+		}]
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/ai-color-palette.test.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "bun:test"
+import { aiColorPalette } from "./ai-color-palette"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<h1 className="text-purple-500" />', 1],
+	['<div className="text-purple-500 text-3xl" />', 1],
+	['<div className="from-purple-500 to-cyan-400" />', 1],
+	['<p className="text-purple-500" />', 0],
+	['<div className="from-red-500 to-orange-400" />', 0],
+])("#given palette source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(aiColorPalette, source)).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/ai-color-palette.ts

@@ -0,0 +1,11 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const aiColorPalette: SourceRule = {
+	meta: { id: "ai-color-palette", name: "AI color palette", category: "slop", severity: "warning", engine: "source", description: "Purple heading ink or a purple-to-cool gradient repeats a generic palette.", fixHint: "Choose colors from the product's visual identity." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\btext-(?:purple|violet|indigo)-(\d+)\b/g, /\bfrom-(?:purple|violet|indigo)-(\d+)\b/g], ({ match, scope }) => {
+		if (match[0].startsWith("text-")) return /\btext-[2-9]xl\b|<h[1-3]/i.test(scope) ? `${match[0]} on heading` : null
+		return /\bto-(?:purple|violet|indigo|blue|cyan|pink|fuchsia)-\d+\b/.test(scope) ? `${match[0]} gradient` : null
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/aphoristic-cadence.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { aphoristicCadence } from "./aphoristic-cadence"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[`<html><p>${"Not a tool. A whole new world. ".repeat(3)}</p></html>`, 1],
+	[`<html><p>${"Not a tool. A whole new world. ".repeat(2)}</p></html>`, 0],
+	["<html><p>Export invoices, send reports, and compare totals.</p></html>", 0],
+	["Not a tool. A whole new world. ".repeat(3), 0],
+])("#given clipped page copy #then returns %i findings", (source, count) => {
+	expect(checkSource(aphoristicCadence, source, { path: "a.svelte" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/aphoristic-cadence.ts

@@ -0,0 +1,14 @@
+import type { SourceRule } from "../../rule"
+import { bodyText, componentExtensions, pageSource, sourceHit } from "./support/source-text"
+
+export const aphoristicCadence: SourceRule = {
+	meta: { id: "aphoristic-cadence", name: "Aphoristic-cadence copy", category: "slop", severity: "warning", engine: "source", description: "Several clipped rebuttals give page copy a repetitive slogan rhythm.", fixHint: "Replace repeated slogans with specific, naturally paced sentences." },
+	extensions: componentExtensions,
+	check: (context) => {
+		const source = pageSource(context)
+		if (source === null) return []
+		const text = bodyText(source)
+		const count = [...text.matchAll(/\bNot an? [a-z][^.!?]{1,40}[.!]\s+[A-Z][^.!?]{1,60}[.!]/g)].length + [...text.matchAll(/\b[A-Z][^.!?]{4,80}[.!]\s+(No|Just)\s+[a-z][^.!?]{2,60}[.!]/g)].length
+		return count >= 3 ? [sourceHit(source, 0, `${count} clipped slogan constructions`)] : []
+	},
+}

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

@@ -0,0 +1,14 @@
+import { expect, test } from "bun:test"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<div className="rounded-lg border-t-2" />', "a.tsx", 1],
+	['<div className="rounded-none border-t-2" />', "a.tsx", 0],
+	['<div className="rounded-full border-t-2 animate-spin" />', "a.tsx", 0],
+	[".a{border-bottom:3px solid red}\n\n\n\n\n.a{border-radius:12px}", "a.css", 1],
+	[".a{border-bottom:3px solid red}\n.b{border-radius:12px}", "a.css", 0],
+	[".a{border-bottom:2px solid red;border-radius:12px}", "a.css", 0],
+])("#given border source %s #then returns expected findings", (source, path, count) => {
+	expect(checkSource(borderAccentOnRounded, source, { path })).toHaveLength(count)
+})

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

@@ -0,0 +1,20 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes, selectorHost, selectorMatches } from "./support/css-scopes"
+import { tagAt } from "./support/markup-scope"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const borderAccentOnRounded: SourceRule = {
+	meta: { id: "border-accent-on-rounded", name: "Border accent on rounded element", category: "slop", severity: "warning", engine: "source", description: "A thick top or bottom border meets a rounded element.", fixHint: "Remove the accent border or use square corners." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\bborder-[tb]-(\d+)\b/g, /border-(?:top|bottom)\s*:\s*(\d+)px\s+solid/gi], ({ match, line, scope, offset, pass }) => {
+		if (match[0].startsWith("border-t-") || match[0].startsWith("border-b-")) {
+			const tag = tagAt(line, match.index ?? 0)
+			return Number(match[1]) >= 1 && /\brounded(?!-none\b)(?:-\w+)?\b/.test(tag) && !/\banimate-spin\b/.test(tag) ? match[0] : null
+		}
+		if (Number(match[1]) < 3) return null
+		const scopes = cssScopes(pass.text, pass.sass)
+		const own = scopes.filter((s) => s.start <= offset && offset <= s.end).sort((a, b) => b.start - a.start)[0]
+		const radius = own ? scopes.some((s) => selectorMatches(selectorHost(s), selectorHost(own)) && /(?:^|[;{\s])border[-\w]*radius\s*:/.test(s.body)) : /border-radius/i.test(scope)
+		return radius ? match[0] : null
+	}),
+}

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

@@ -0,0 +1,19 @@
+import { expect, test } from "bun:test"
+import { bounceEasing } from "./bounce-easing"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	["animate-bounce", 1],
+	["animation: spring-in 1s", 1],
+	["transition: all cubic-bezier(.2, -0.2, .3, 1)", 1],
+	["transition: all cubic-bezier(.2, -.1, .3, 1.1)", 0],
+	["animation: fade-in 1s", 0],
+])("#given motion source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(bounceEasing, source)).toHaveLength(count)
+})
+
+test("#given an intentional easing #then removes that curve only", () => {
+	expect(checkSource(bounceEasing, "cubic-bezier(.2, -.2, .3, 1)\nanimate-bounce", { config: { allowEasings: ["cubic-bezier(.2,-.2,.3,1)"] } })).toHaveLength(1)
+	expect(checkSource(bounceEasing, "animation: spring-in 1s\nanimation: bounce-out 1s", { config: { allowEasings: ["SPRING-IN"] } })).toHaveLength(1)
+	expect(checkSource(bounceEasing, "animation: spring-in 1s, bounce-out 1s", { config: { allowEasings: ["spring-in"] } })[0]?.message).toBe("animation: bounce-out")
+})

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

@@ -0,0 +1,21 @@
+import type { SourceRule } from "../../rule"
+import { lineCheck, sourceExtensions } from "./support/source-text"
+
+export const bounceEasing: SourceRule = {
+	meta: { id: "bounce-easing", name: "Bounce or elastic easing", category: "slop", severity: "advisory", engine: "source", description: "A named bounce animation or overshooting timing curve adds elastic motion.", fixHint: "Use a smooth deceleration, or allow an intentional timing function." },
+	extensions: sourceExtensions,
+	check: lineCheck([/\banimate-bounce\b/g, /animation(?:-name)?\s*:\s*([^;{}]*(?:bounce|elastic|wobble|jiggle|spring)[^;{}]*)/gi, /cubic-bezier\(\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*,\s*([0-9.-]+)\s*\)/g], ({ match, context }) => {
+		const canonical = (s: string): string => s.replace(/\s/g, "").toLowerCase()
+		const names = match[4] === undefined ? match[1]?.split(/[,\s]+/).filter((s) => /bounce|elastic|wobble|jiggle|spring/i.test(s)) ?? [] : []
+		const name = names.find((candidate) => !context.config.allowEasings?.some((easing) => canonical(easing) === canonical(candidate)))
+		if (context.config.allowEasings?.some((easing) => [match[0], match[1] ?? ""].some((value) => canonical(easing) === canonical(value)))
+			|| (names.length > 0 && name === undefined)) return null
+		if (match[4] !== undefined) {
+			const y1 = Number(match[2])
+			const y2 = Number(match[4])
+			return y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1 ? `cubic-bezier(${match.slice(1).join(", ")})` : null
+		}
+		if (match[1]) return `animation: ${name ?? match[1].trim()}`
+		return "animate-bounce (Tailwind)"
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/broken-image.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test"
+import { brokenImage } from "./broken-image"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	['<img alt="photo" />', "a.tsx", 1],
+	['<img\nsrc="#"\n/>', "a.tsx", 1],
+	['<img src={url} />', "a.tsx", 0],
+	['<img srcset="a.webp 1x" />', "a.tsx", 0],
+	['<img {...props} />', "a.tsx", 0],
+	['<img data-caption="src=example" />', "a.tsx", 1],
+	['const example = "<img>";', "a.tsx", 0],
+	['<script>const example = "<img>";</script><img src="a.png">', "a.vue", 0],
+	['<img :src="url" />', "a.vue", 0],
+	["<img {src} />", "a.svelte", 0],
+	['<img src="" />', "a.astro", 1],
+	["// Plain <img> comment\nexport const A=()=> <img src='a.png'/>;", "a.tsx", 0],
+	['<div>{"<img>"}</div>', "a.tsx", 0],
+	['const pattern=/<img>/;', "a.tsx", 0],
+	['<div>{url ? <img src={url}/> : <img/>}</div>', "a.tsx", 1],
+])("#given image source %s #then returns expected findings", (source, path, count) => {
+	expect(checkSource(brokenImage, source, { path })).toHaveLength(count)
+})
+
+test("#given a multiline missing image #then identifies its opening position", () => {
+	expect(checkSource(brokenImage, "\n  <img\n    alt='photo'\n  />")[0]).toMatchObject({ line: 2, column: 3 })
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/broken-image.ts

@@ -0,0 +1,16 @@
+import { extensionOf } from "../../core/source"
+import type { SourceRule } from "../../rule"
+import { imageTags, missingImageSource } from "./support/image-tags"
+import { sheetExtensions, sourceExtensions, sourceHit, stripComments } from "./support/source-text"
+
+export const brokenImage: SourceRule = {
+	meta: { id: "broken-image", name: "Broken or placeholder image", category: "quality", severity: "warning", engine: "source", description: "An image tag has no statically usable source or source set.", fixHint: "Supply a real image source or remove the unused image element." },
+	extensions: sourceExtensions,
+	check: ({ file }) => {
+		const ext = extensionOf(file.path)
+		if (sheetExtensions.includes(ext)) return []
+		const script = ["js", "jsx", "ts", "tsx", "mjs", "cjs"].includes(ext)
+		const text = stripComments(file.text, script)
+		return imageTags(text, script).filter((hit) => missingImageSource(hit.tag, ext)).map((hit) => sourceHit(file.text, hit.offset, "Image has no source", hit.tag.slice(0, 100)))
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/codex-grid-background.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "bun:test"
+import { codexGridBackground } from "./codex-grid-background"
+import { checkSource } from "./support/check-source"
+
+test.each([
+	[".grid{background:linear-gradient(red 1px, transparent 1px),linear-gradient(90deg, red 1px, transparent 1px);background-size:24px 24px}", 1],
+	[".line{background:linear-gradient(red 1px, transparent 1px);background-size:24px 24px}", 0],
+	[".grid{background:linear-gradient(red 1px, transparent 1px),linear-gradient(90deg, red 1px, transparent 1px)}", 0],
+])("#given background source %s #then returns %i findings", (source, count) => {
+	expect(checkSource(codexGridBackground, source, { path: "a.css" })).toHaveLength(count)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/codex-grid-background.ts

@@ -0,0 +1,18 @@
+import type { SourceRule } from "../../rule"
+import { cssScopes } from "./support/css-scopes"
+import { sourceExtensions, sourceHit, sourcePasses } from "./support/source-text"
+
+export const codexGridBackground: SourceRule = {
+	meta: { id: "codex-grid-background", name: "Decorative grid-line background", category: "slop", severity: "advisory", engine: "source", description: "Two tiled hairline gradients draw a decorative background grid.", fixHint: "Remove the grid unless it communicates structure or data." },
+	extensions: sourceExtensions,
+	check: (context) => {
+		const text = sourcePasses(context)[0]?.text ?? ""
+		const blocks = [...cssScopes(text).map((s) => ({ body: s.body, offset: text.indexOf("{", s.start) })), ...[...text.matchAll(/\bstyle\s*=\s*["']([^"']*)["']/gi)].map((m) => ({ body: m[1] ?? "", offset: m.index ?? 0 }))]
+		for (const block of blocks) {
+			const backgrounds = [...block.body.matchAll(/\bbackground(?:-image)?\s*:\s*([^;{}"']*)/gi)].map((m) => m[1] ?? "").join(";")
+			const lines = [...backgrounds.matchAll(/\b\d{1,3}px\s*,\s*transparent\s+\d{1,3}px|transparent\s+calc\(100%\s*-\s*\d{1,3}px\)/gi)].length
+			if (lines >= 2 && (/background-size\s*:[^;{}"']*\b\d{1,3}px\b/i.test(block.body) || /\/\s*\d{1,3}px\b/.test(backgrounds))) return [sourceHit(context.file.text, block.offset, "Two-axis gradient background grid")]
+		}
+		return []
+	},
+}