oh-my-opencode 5.1.51 → 5.1.54

package/dist/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/dist/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) }] : []
+	}),
+}

package/dist/skills/frontend/scripts/detect/rules/layout/edge-flush-cards.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { edgeFlushCards } from "./edge-flush-cards"
+import { marked } from "./support/layout-cases"
+
+const row = (end = 604, extra: Partial<NodeSpec> = {}): NodeSpec => ({
+	id: "row", style: { "overflow-x": "auto", "background-color": "#ddd" }, rect: { x: 24, y: 24, width: 600, height: 160 },
+	scroll: { scrollWidth: 1200, clientWidth: 600 }, children: [
+		{ id: "card", style: { "background-color": "#fff" }, rect: { x: 40, y: 40, width: end - 16, height: 90 } },
+		{ style: { "background-color": "#fff" }, rect: { x: 660, y: 40, width: 560, height: 90 } },
+	], ...extra,
+})
+
+test("#given asymmetric card edges beside even gutters #then only the cut edge reports", () => {
+	expect(marked(edgeFlushCards, [row()])).toEqual(["#row"])
+	expect(marked(edgeFlushCards, [row(584)])).toEqual([])
+	expect(marked(edgeFlushCards, [row(700)])).toEqual([])
+})
+
+test("#given lone cards and vertical only scrollers #then no horizontal row is charged", () => {
+	expect(marked(edgeFlushCards, [row()])).toEqual(["#row"])
+	expect(marked(edgeFlushCards, [row(604, { children: [{ style: { "background-color": "#fff" }, rect: { x: 40, y: 40, width: 588, height: 90 } }] })])).toEqual([])
+	expect(marked(edgeFlushCards, [row(604, { style: { "overflow-x": "hidden", "overflow-y": "auto" } })])).toEqual([])
+})
+
+test("#given table cells in a scroll region #then table geometry is not treated as cards", () => {
+	expect(marked(edgeFlushCards, [row()])).toEqual(["#row"])
+	expect(marked(edgeFlushCards, [row(604, { children: [
+		{ tag: "td", style: { "background-color": "#fff" }, rect: { x: 40, y: 40, width: 588, height: 90 } },
+		{ tag: "td", style: { "background-color": "#fff" }, rect: { x: 660, y: 40, width: 560, height: 90 } },
+	] })])).toEqual([])
+})
+
+test("#given a transparent scroller in a centered column #then its inset is not a page gutter", () => {
+	const transparent = (x: number): NodeSpec => row(604, {
+		style: { "overflow-x": "auto" }, rect: { x, y: 24, width: 600, height: 160 }, children: [
+			{ style: { "background-color": "#fff" }, rect: { x: x + 4, y: 40, width: 560, height: 90 } },
+			{ style: { "background-color": "#fff" }, rect: { x: x + 620, y: 40, width: 560, height: 90 } },
+		],
+	})
+	expect(marked(edgeFlushCards, [transparent(24)])).toEqual([])
+	expect(marked(edgeFlushCards, [transparent(200)])).toEqual(["#row"])
+})

package/dist/skills/frontend/scripts/detect/rules/layout/edge-flush-cards.ts

@@ -0,0 +1,47 @@
+import { ancestors, descendants, isRendered, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { alpha, borders, chain, length, painted, right, scrollsX } from "./support/geometry"
+
+export const edgeFlushCards: PageRule = {
+	meta: {
+		id: "edge-flush-cards", name: "Cards flush against the scroller edge", category: "quality", severity: "warning", engine: "page",
+		description: "A card row keeps a gutter on one side but touches or slightly crosses the opposite clipping edge.",
+		fixHint: "Size each panel to its scroll container and keep an equal inset at both edges.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((scroller) => {
+		if (scroller.tag === "body" || !scrollsX(scroller) || !painted(snapshot, scroller) ||
+			scroller.scroll.scrollWidth <= scroller.scroll.clientWidth + 8 ||
+			scroller.rect.width < 120 || scroller.rect.height < 60 || scroller.rect.y > snapshot.viewport.height * 2) return []
+		const cards = [...descendants(snapshot, scroller)].filter((el) => {
+			if (!isRendered(snapshot, el) || el.rect.width < 80 || el.rect.height < 40 ||
+				/^(table|thead|tbody|tfoot|tr|td|th|col|colgroup)$/.test(el.tag) ||
+				/^(row|cell|gridcell|rowgroup|columnheader|rowheader)$/.test(el.attributes["role"] ?? "")) return false
+			if (alpha(el, "background-color") <= 0.5 && borders(el).filter(Boolean).length < 2) return false
+			for (const a of ancestors(snapshot, el)) {
+				if (a === scroller) return true
+				if (scrollsX(a)) return false
+			}
+			return false
+		})
+		if (cards.length < 2 || Math.min(...cards.map((c) => right(c.rect))) > Math.max(...cards.map((c) => c.rect.x)) + 1) return []
+		const left = scroller.rect.x + length(scroller, "border-left-width")
+		const end = left + scroller.scroll.clientWidth
+		const gutter = (side: "left" | "right"): boolean => {
+			const inset = side === "left" ? scroller.rect.x : snapshot.viewport.width - right(scroller.rect)
+			if (inset < 12 || inset > 48) return false
+			return !chain(snapshot, scroller).slice(0, 7).some((n) => {
+				if (n.tag === "body") return false
+				const near = side === "left" ? Math.abs(n.rect.x - scroller.rect.x) <= 2 : Math.abs(right(n.rect) - right(scroller.rect)) <= 2
+				return near && (alpha(n, "background-color") > 0 || !["", "none"].includes(styleOf(n, "background-image")) ||
+					!["", "none"].includes(styleOf(n, "box-shadow")) || borders(n)[side === "left" ? 3 : 1])
+			})
+		}
+		const flush = cards.filter((c) => {
+			const start = c.rect.x - left
+			const gap = end - right(c.rect)
+			return (start >= 6 && gap < 8 && gap > -24 && !(gap >= 0 && gutter("right"))) ||
+				(gap >= 6 && start < 8 && start > -24 && !(start >= 0 && gutter("left")))
+		})
+		return flush.length === 0 ? [] : [{ element: scroller, message: `${flush.length} cards touch a scroll edge while keeping an opposite gutter.`, snippet: shortSnippet(scroller) }]
+	}),
+}

package/dist/skills/frontend/scripts/detect/rules/layout/first-viewport-column-overflow.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { firstViewportColumnOverflow } from "./first-viewport-column-overflow"
+import { marked } from "./support/layout-cases"
+
+const opening = (short: Partial<NodeSpec> = {}, tall: Partial<NodeSpec> = {}): NodeSpec => ({
+	id: "opening", style: { display: "grid" }, rect: { x: 20, y: 20, width: 1200, height: 1600 }, children: [
+		{ id: "short", rect: { x: 40, y: 40, width: 500, height: 1500 }, children: [{ tag: "p", text: "Short opening copy", rect: { x: 40, y: 40, width: 500, height: 200 } }], ...short },
+		{ rect: { x: 640, y: 40, width: 500, height: 1500 }, children: [{ text: "A tall block", rect: { x: 640, y: 40, width: 500, height: 1500 } }], ...tall },
+	],
+})
+
+test("#given stretched grid cells with unequal content #then measured content exposes the tall opening", () => {
+	expect(marked(firstViewportColumnOverflow, [opening()])).toEqual(["#opening"])
+	expect(marked(firstViewportColumnOverflow, [opening({}, { children: [{ text: "Fits", rect: { x: 640, y: 40, width: 500, height: 600 } }] })])).toEqual([])
+})
+
+test("#given stacked columns or navigation rails #then intentional short regions are excluded", () => {
+	expect(marked(firstViewportColumnOverflow, [opening()])).toEqual(["#opening"])
+	expect(marked(firstViewportColumnOverflow, [opening({ tag: "nav" })])).toEqual([])
+	expect(marked(firstViewportColumnOverflow, [opening({ style: { position: "sticky" } })])).toEqual([])
+	expect(marked(firstViewportColumnOverflow, [opening({}, { rect: { x: 40, y: 300, width: 500, height: 1500 } })])).toEqual([])
+})
+
+test("#given tall content cut inside its own scrolling column #then only visible content is measured", () => {
+	expect(marked(firstViewportColumnOverflow, [opening()])).toEqual(["#opening"])
+	expect(marked(firstViewportColumnOverflow, [opening({}, { style: { "overflow-y": "auto" }, rect: { x: 640, y: 40, width: 500, height: 500 } })])).toEqual([])
+})

package/dist/skills/frontend/scripts/detect/rules/layout/first-viewport-column-overflow.ts

@@ -0,0 +1,43 @@
+import { ancestors, childrenOf, descendants, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { bottom, chain, clipsY, hasRole, outOfFlow, painted, right } from "./support/geometry"
+
+export const firstViewportColumnOverflow: PageRule = {
+	meta: {
+		id: "first-viewport-column-overflow", name: "One column stretches the first viewport", category: "quality", severity: "warning", engine: "page",
+		description: "An opening row has one column extending far below the fold while its sibling fits on one screen.",
+		fixHint: "Balance the opening columns, cap the longer one, or let its remaining content flow below the row.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		const { width, height } = snapshot.viewport
+		if (!/^(inline-)?(flex|grid)$/.test(styleOf(el, "display")) || !painted(snapshot, el) ||
+			el.rect.width < width * 0.5 || el.rect.y >= height * 0.9 || bottom(el.rect) <= height) return []
+		const rail = (n: typeof el): boolean => {
+			if (n.tag === "nav" || hasRole(n, ["navigation", "tablist"]) || styleOf(n, "position") === "sticky") return true
+			const nodes = [n, ...descendants(snapshot, n)].filter((c) => c.ownText !== "" && painted(snapshot, c))
+			return nodes.length >= 3 && nodes.filter((c) => chain(snapshot, c).some((a) => a.tag === "a" || hasRole(a, ["tab", "menuitem"]))).length / nodes.length >= 0.8
+		}
+		const cols = childrenOf(snapshot, el).flatMap((child) => {
+			const share = child.rect.width / el.rect.width
+			if (!painted(snapshot, child) || outOfFlow(child) || rail(child) || share < 0.25 || share > 0.9 || child.rect.height < 40) return []
+			let end = child.rect.y
+			for (const d of descendants(snapshot, child)) {
+				if (!painted(snapshot, d) || [d, ...ancestors(snapshot, d)].some((n) => n !== el && outOfFlow(n))) continue
+				let visible = bottom(d.rect)
+				for (const a of ancestors(snapshot, d)) {
+					if (a === el) break
+					if (clipsY(a)) visible = Math.min(visible, bottom(a.rect))
+				}
+				end = Math.max(end, visible)
+			}
+			return end - child.rect.y < 1 ? [] : [{ rect: child.rect, height: end - child.rect.y }]
+		}).sort((a, b) => b.height - a.height)
+		const tall = cols[0]
+		if (!tall || tall.height <= height * 1.4) return []
+		const short = cols.slice(1).filter((c) =>
+			!(tall.rect.x < right(c.rect) - 1 && c.rect.x < right(tall.rect) - 1) &&
+			Math.abs(tall.rect.y - c.rect.y) <= height * 0.25).sort((a, b) => a.height - b.height)[0]
+		if (!short || short.height > height) return []
+		return [{ element: el, message: `Opening columns use ${Math.round(tall.height / height * 100)}% and ${Math.round(short.height / height * 100)}% of the viewport height.`, snippet: shortSnippet(el) }]
+	}),
+}

package/dist/skills/frontend/scripts/detect/rules/layout/heading-rhythm.test.ts

@@ -0,0 +1,67 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { headingRhythm } from "./heading-rhythm"
+import { lines, marked } from "./support/layout-cases"
+
+const group = (id: string, y: number, above = 0, below = 40): NodeSpec => ({
+	style: { "border-top-width": "1px", "border-top-style": "solid", "border-top-color": "#333" },
+	rect: { x: 24, y, width: 560, height: 220 }, children: [
+		{ tag: "p", text: "A previous paragraph with enough prose to be read as the closing block of the previous section.", rect: { x: 24, y: y + 10, width: 560, height: 48 }, lineRects: lines([550, 400], 24, y + 10) },
+		{ id, tag: "h2", text: "Section heading", style: { "font-size": "28px" }, rect: { x: 24, y: y + 58 + above, width: 560, height: 36 } },
+		{ tag: "p", text: "The introduced content belongs to this heading.", rect: { x: 24, y: y + 94 + above + below, width: 560, height: 48 } },
+	],
+})
+
+test("#given multiple crowded headings beside healthy gaps #then only crowded headings report", () => {
+	expect(marked(headingRhythm, [group("one", 0), group("two", 240), group("healthy", 480, 64, 16)])).toEqual(["#one", "#two"])
+	expect(marked(headingRhythm, [group("one", 0, 64, 16), group("two", 240, 64, 16)])).toEqual([])
+})
+
+test("#given one crowded heading #then the page minimum prevents a single local judgement", () => {
+	expect(marked(headingRhythm, [group("one", 0), group("two", 240)])).toEqual(["#one", "#two"])
+	expect(marked(headingRhythm, [group("one", 0)])).toEqual([])
+})
+
+test("#given equal gaps under running prose #then headings still attach to the previous block", () => {
+	expect(marked(headingRhythm, [group("one", 0, 24, 24), group("two", 240, 20, 24)])).toEqual(["#one", "#two"])
+	expect(marked(headingRhythm, [group("one", 0, 24, 20), group("two", 240, 24, 20)])).toEqual([])
+})
+
+test("#given headings following headings rather than prose #then titling groups do not count", () => {
+	const titles = (id: string, y: number) => {
+		const g = group(id, y)
+		return { ...g, children: (g.children ?? []).map((n, i) => i === 0 ? { ...n, tag: "h2" } : n) }
+	}
+	expect(marked(headingRhythm, [titles("one", 0), titles("two", 240)])).toEqual([])
+})
+
+test("#given short two line labels with even gaps #then they are not running prose", () => {
+	const labels = (id: string, y: number) => {
+		const g = group(id, y, 24, 24)
+		return { ...g, children: (g.children ?? []).map((n, i) => i === 0 ? { ...n, text: "A short label" } : n) }
+	}
+	expect(marked(headingRhythm, [labels("one", 0), labels("two", 240)])).toEqual([])
+})
+
+test("#given a preceding label larger than its heading #then it is not folded into the heading", () => {
+	const small = (id: string, y: number): NodeSpec => {
+		const g = group(id, y)
+		return { ...g, children: (g.children ?? []).map((n, i) => i === 0
+			? { ...n, text: "Closing copy", style: { "font-size": "14px" }, rect: { x: 24, y: y + 10, width: 560, height: 24 } }
+			: i === 1 ? { ...n, style: { "font-size": "13px" } } : n) }
+	}
+	expect(marked(headingRhythm, [small("one", 0), small("two", 240)])).toEqual(["#one", "#two"])
+})
+
+test("#given alike title rows separated by other content #then distant rows do not stop the neighbour walk", () => {
+	const rows = (id: string, y: number): NodeSpec => {
+		const g = group(id, y)
+		const nodes = g.children ?? []
+		const wrapped: NodeSpec[] = nodes.map((n, i) => i === 0 ? n : {
+			attributes: { class: "row" }, rect: n.rect ?? {}, children: [n],
+		})
+		return { ...g, children: [...wrapped, { attributes: { class: "row" }, rect: { x: 24, y: y + 210, width: 560, height: 36 },
+			children: [{ tag: "h2", text: "A later title", rect: { x: 24, y: y + 210, width: 560, height: 36 } }] }] }
+	}
+	expect(marked(headingRhythm, [rows("one", 0), rows("two", 300)])).toEqual(["#one", "#two"])
+})

package/dist/skills/frontend/scripts/detect/rules/layout/heading-rhythm.ts

@@ -0,0 +1,30 @@
+import { fontSizePx, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { bottom, length } from "./support/geometry"
+import { closesInProse, contentBottom, headingCluster, neighbour, paintsEdge, rhythmExempt, separatesBelow } from "./support/rhythm"
+
+export const headingRhythm: PageRule = {
+	meta: {
+		id: "heading-rhythm", name: "Heading crowded against the previous block", category: "quality", severity: "warning", engine: "page",
+		description: "Several headings sit closer to preceding content than to the content they introduce.",
+		fixHint: "Give section headings more space above than below so each title binds to its own content.",
+	},
+	check: ({ snapshot }) => {
+		const hits = snapshot.elements.flatMap((el) => {
+			if (rhythmExempt(snapshot, el)) return []
+			const next = neighbour(snapshot, el, false)
+			if (!next) return []
+			const below = Math.max(0, next.rect.y - bottom(el.rect))
+			if (below < 6 || below > 160) return []
+			const top = headingCluster(snapshot, el, below)
+			const previous = neighbour(snapshot, el, true, top)
+			if (!previous || separatesBelow(snapshot, previous)) return []
+			const above = Math.max(0, top.rect.y - contentBottom(snapshot, previous) + (paintsEdge(top, "top") ? 0 : length(top, "padding-top")))
+			const crowded = above < below * 0.75 && below - above >= 12
+			const body = snapshot.elements.find((n) => n.tag === "body")
+			const even = above <= below + 2 && closesInProse(snapshot, previous, el, Math.max(body ? fontSizePx(body) : 16, fontSizePx(next)))
+			return crowded || even ? [{ element: el, message: `Heading has ${Math.round(above)}px above and ${Math.round(below)}px below.`, snippet: shortSnippet(el) }] : []
+		})
+		return hits.length >= 2 ? hits : []
+	},
+}

package/dist/skills/frontend/scripts/detect/rules/layout/index.ts

@@ -0,0 +1,21 @@
+import type { Rule } from "../../rule"
+import { bodyTextViewportEdge } from "./body-text-viewport-edge"
+import { clippedOverflowContainer } from "./clipped-overflow-container"
+import { contentHiddenAtRest } from "./content-hidden-at-rest"
+import { crampedPadding } from "./cramped-padding"
+import { edgeFlushCards } from "./edge-flush-cards"
+import { firstViewportColumnOverflow } from "./first-viewport-column-overflow"
+import { headingRhythm } from "./heading-rhythm"
+import { monotonousSpacing } from "./monotonous-spacing"
+import { nestedCards } from "./nested-cards"
+import { straggler } from "./straggler"
+import { textOcclusion } from "./text-occlusion"
+import { textOverflow } from "./text-overflow"
+import { unbalancedHeading } from "./unbalanced-heading"
+import { viewportReflow } from "./viewport-reflow"
+
+export const LAYOUT_RULES: readonly Rule[] = [
+	nestedCards, monotonousSpacing, edgeFlushCards, textOcclusion, firstViewportColumnOverflow,
+	crampedPadding, bodyTextViewportEdge, textOverflow, clippedOverflowContainer, headingRhythm,
+	straggler, unbalancedHeading, contentHiddenAtRest, viewportReflow,
+]

package/dist/skills/frontend/scripts/detect/rules/layout/monotonous-spacing.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from "bun:test"
+import { monotonousSpacing } from "./monotonous-spacing"
+import { marked } from "./support/layout-cases"
+
+test("#given ten repeated utility gaps and varied controls #then only the repeated scale reports", () => {
+	expect(marked(monotonousSpacing, Array.from({ length: 10 }, () => ({ attributes: { class: "p-4" } })))).toEqual(["page"])
+	expect(marked(monotonousSpacing, Array.from({ length: 10 }, (_, i) => ({ attributes: { class: `p-${i + 1}` } })))).toEqual([])
+})
+
+test("#given repeated CSS lengths and zero resets #then only nonzero dominant spacing reports", () => {
+	expect(marked(monotonousSpacing, [], { cssText: Array.from({ length: 10 }, (_, i) => `.x${i} { padding: 16px; }`) })).toEqual(["page"])
+	expect(marked(monotonousSpacing, Array.from({ length: 20 }, () => ({ attributes: { class: "p-0" } })))).toEqual([])
+})
+
+test("#given rem declarations with a small sample #then the ten sample floor is enforced", () => {
+	const css = Array.from({ length: 10 }, (_, i) => `.x${i} { margin: 1rem; }`)
+	expect(marked(monotonousSpacing, [], { cssText: css })).toEqual(["page"])
+	expect(marked(monotonousSpacing, [], { cssText: css.slice(0, 9) })).toEqual([])
+})

package/dist/skills/frontend/scripts/detect/rules/layout/monotonous-spacing.ts

@@ -0,0 +1,32 @@
+import type { PageRule } from "../../rule"
+
+export const monotonousSpacing: PageRule = {
+	meta: {
+		id: "monotonous-spacing", name: "Monotonous spacing", category: "slop", severity: "warning", engine: "page",
+		description: "One spacing value dominates the page instead of separating related groups from sections.",
+		fixHint: "Keep related items close and give separate sections a larger gap.",
+	},
+	check: ({ snapshot }) => {
+		const values: number[] = []
+		const css = [...snapshot.cssText, ...snapshot.elements.map((el) => el.attributes["style"] ?? "")].join("\n")
+		for (const m of css.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d+)px/gi)) {
+			const v = Number(m[1])
+			if (v > 0 && v < 200) values.push(v)
+		}
+		for (const m of css.matchAll(/(?:gap|row-gap|column-gap)\s*:\s*(\d+)px/gi)) values.push(Number(m[1]))
+		for (const el of snapshot.elements) {
+			for (const m of (el.attributes["class"] ?? "").matchAll(/\b(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-(\d+)\b/g)) values.push(Number(m[1]) * 4)
+		}
+		for (const m of css.matchAll(/(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d*\.?\d+)rem/gi)) {
+			const v = Math.round(Number(m[1]) * 16)
+			if (v > 0 && v < 200) values.push(v)
+		}
+		const rounded = values.map((v) => Math.round(v / 4) * 4)
+		if (rounded.length < 10) return []
+		const counts = new Map<number, number>()
+		for (const v of rounded) counts.set(v, (counts.get(v) ?? 0) + 1)
+		const dominant = [...counts].sort((a, b) => b[1] - a[1])[0]
+		if (!dominant || dominant[0] === 0 || dominant[1] / rounded.length <= 0.6 || [...counts.keys()].filter((v) => v > 0).length > 3) return []
+		return [{ element: null, message: `${dominant[0]}px accounts for ${dominant[1]} of ${rounded.length} spacing declarations.`, snippet: `${Math.round(dominant[1] / rounded.length * 100)}% repeated spacing` }]
+	},
+}

package/dist/skills/frontend/scripts/detect/rules/layout/nested-cards.test.ts

@@ -0,0 +1,60 @@
+import { expect, test } from "bun:test"
+import type { NodeSpec } from "../../testing/build-snapshot"
+import { nestedCards } from "./nested-cards"
+import { border, marked, rounded } from "./support/layout-cases"
+
+const inner: NodeSpec = { id: "inner", style: { ...border, ...rounded }, rect: { x: 40, y: 40, width: 240, height: 140 }, children: [
+	{ tag: "p", text: "An inner group with a paragraph of copy." }, { tag: "p", text: "A second paragraph makes this a content surface." },
+] }
+const outer = (child: NodeSpec): NodeSpec => ({ id: "outer", style: { ...border, ...rounded }, rect: { x: 20, y: 20, width: 400, height: 300 }, children: [child] })
+
+test("#given bordered inner cards beside fill-only and hidden groups #then only a visible framed card reports", () => {
+	expect(marked(nestedCards, [outer(inner)])).toEqual(["#inner"])
+	expect(marked(nestedCards, [outer({ ...inner, style: { ...rounded, "background-color": "#eee" } })])).toEqual([])
+	expect(marked(nestedCards, [outer({ ...inner, style: { ...border, ...rounded, opacity: "0" } })])).toEqual([])
+})
+
+test("#given labels and popups inside cards #then they are not nested surfaces", () => {
+	expect(marked(nestedCards, [outer(inner)])).toEqual(["#inner"])
+	for (const change of [{ attributes: { role: "menu" } }, { style: { ...border, ...rounded, position: "absolute" } }, { text: "Small label", children: [], rect: { x: 40, y: 40, width: 180, height: 32 } }]) {
+		expect(marked(nestedCards, [outer({ ...inner, ...change })])).toEqual([])
+	}
+})
+
+test("#given a card header sharing three edges #then it is part of its outer card", () => {
+	expect(marked(nestedCards, [outer(inner)])).toEqual(["#inner"])
+	expect(marked(nestedCards, [outer({ ...inner, rect: { x: 21, y: 21, width: 398, height: 140 } })])).toEqual([])
+})
+
+test("#given an embedded figure or a dialog panel #then its framing is not a nested card", () => {
+	expect(marked(nestedCards, [outer(inner)])).toEqual(["#inner"])
+	expect(marked(nestedCards, [outer({ ...inner, children: [{ tag: "canvas", rect: { width: 220, height: 120 } }, { tag: "p", text: "Chart caption." }] })])).toEqual([])
+	expect(marked(nestedCards, [{ attributes: { role: "dialog" }, children: [outer(inner)] }])).toEqual([])
+})
+
+test("#given a hidden audio source with visible player controls #then player chrome is not a nested surface", () => {
+	expect(marked(nestedCards, [outer(inner)])).toEqual(["#inner"])
+	expect(marked(nestedCards, [outer({ ...inner, children: [
+		{ tag: "audio", rect: { width: 0, height: 0 } },
+		{ tag: "p", text: "Sample audio speaker A" },
+		{ tag: "button", attributes: { "aria-label": "Play" } },
+		{ attributes: { role: "slider", "aria-label": "Audio progress" } },
+	] })])).toEqual([])
+})
+
+test("#given repeated inner cards in one panel #then only the first visible card reports", () => {
+	const second = { ...inner, id: "second", rect: { x: 40, y: 200, width: 240, height: 140 } }
+	expect(marked(nestedCards, [{ ...outer(inner), children: [inner, second] }])).toEqual(["#inner"])
+	expect(marked(nestedCards, [{ ...outer(inner), children: [{ ...inner, attributes: { "data-detect-ignore": "nested-cards" } }, second] }])).toEqual(["#second"])
+})
+
+test("#given a one line content box with block children #then it is a label rather than a card", () => {
+	expect(marked(nestedCards, [outer({ ...inner, rect: { x: 40, y: 40, width: 240, height: 32 }, children: [{ tag: "p", text: "One line of label text" }] })])).toEqual([])
+})
+
+test("#given a declared mockup with three runs #then its nested cards leave the page content", () => {
+	const drawing = { ...outer(inner), attributes: { inert: "" }, children: [{ tag: "p", text: "Preview interface" }, inner] }
+	const page = { tag: "p", text: "Readable page content. ".repeat(40) }
+	expect(marked(nestedCards, [page, drawing])).toEqual([])
+	expect(marked(nestedCards, [page, { ...drawing, attributes: {} }])).toEqual(["#inner"])
+})

package/dist/skills/frontend/scripts/detect/rules/layout/nested-cards.ts

@@ -0,0 +1,38 @@
+import { ancestors, descendants, isIgnored, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { cardLike, controlStrip, dialogCard, embeddedFrame, fieldBox, hasBorderOrShadow, labelBox, pageFrame, sharesEdges } from "./support/cards"
+import { hasRole, ident, outOfFlow, painted } from "./support/geometry"
+import { declaredMockups } from "./support/declared-mockups"
+
+export const nestedCards: PageRule = {
+	meta: {
+		id: "nested-cards", name: "Nested cards", category: "slop", severity: "warning", engine: "page",
+		description: "A bordered or raised card sits inside another card and adds an unnecessary surface.",
+		fixHint: "Flatten the inner group with spacing, typography, or a divider instead of another card frame.",
+	},
+	check: ({ snapshot }) => {
+		const mockups = declaredMockups(snapshot)
+		const candidates = snapshot.elements.filter((el) => {
+			if ([el, ...ancestors(snapshot, el)].some((a) => mockups.has(a)) ||
+				!painted(snapshot, el) || !cardLike(snapshot, el) || !hasBorderOrShadow(el) || outOfFlow(el) ||
+				hasRole(el, ["menu", "listbox", "tablist", "radiogroup", "toolbar"]) ||
+				/(?:^|[\s_-])(?:popover|dropdown|tooltip)(?:$|[\s_-])/.test(ident(el)) ||
+				el.text.length < 10 || el.rect.width < 50 || el.rect.height < 30 ||
+				/^(inline|contents)$/.test(styleOf(el, "display")) || labelBox(snapshot, el) || fieldBox(snapshot, el) || controlStrip(snapshot, el)) return false
+			const outer = [...ancestors(snapshot, el)].find((a) => cardLike(snapshot, a) && !pageFrame(snapshot, a))
+			return outer !== undefined && !sharesEdges(snapshot, el, outer) && !dialogCard(snapshot, outer) && !embeddedFrame(snapshot, el, outer)
+		})
+		const panels = new Set<string>()
+		return candidates.filter((el) => ![...descendants(snapshot, el)].some((d) => candidates.includes(d)))
+			.filter((el) => {
+				if (isIgnored(snapshot, el, "nested-cards")) return false
+				const outer = [...ancestors(snapshot, el)].find((a) => cardLike(snapshot, a) && !pageFrame(snapshot, a))
+				const picture = [...ancestors(snapshot, el)].some((a) => a.tag !== "svg" && hasRole(a, ["img"]))
+				const key = `${outer?.index}:${picture}`
+				if (panels.has(key)) return false
+				panels.add(key)
+				return true
+			})
+			.map((el) => ({ element: el, message: "A separately framed card is nested inside another card.", snippet: shortSnippet(el) }))
+	},
+}