oh-my-opencode 5.1.51 → 5.1.54

package/packages/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/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/packages/omo-codex/plugin/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/packages/omo-codex/plugin/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/packages/omo-codex/plugin/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/packages/omo-codex/plugin/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/packages/omo-codex/plugin/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/packages/omo-codex/plugin/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) }))
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/straggler.ts

@@ -0,0 +1,28 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { measuredLines, oneFace, wordsOf, wrapIs } from "./support/line-breaks"
+
+export const straggler: PageRule = {
+	meta: {
+		id: "straggler", name: "Straggler", category: "quality", severity: "advisory", engine: "page",
+		description: "A paragraph leaves one short word on its last line.",
+		fixHint: "Use text-wrap: pretty or edit the ending so the last line has company.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!["p", "li", "dd", "blockquote", "figcaption"].includes(el.tag) || wrapIs(el, "pretty") || !oneFace(snapshot, el)) return []
+		const lines = measuredLines(snapshot, el)
+		const tail = lines.at(-1)
+		const words = wordsOf(el)
+		const last = words.at(-1)
+		const before = words.at(-2)
+		if (lines.length < 2 || !tail || !last || !before || words.length < 3 ||
+			/[\u3000-\u9fff\uac00-\ud7af]/.test(el.text) || lines.length <= 6 && wrapIs(el, "balance")) return []
+		const widest = Math.max(...lines.map((l) => l.width))
+		const sum = lines.reduce((n, l) => n + l.width, 0)
+		const perPx = el.text.replace(/[\u00ad\u200b]/g, "").length / sum
+		if (tail.width > widest * 0.3 || widest * perPx < 30 || el.text.endsWith(`${before}\u00a0${last}`)) return []
+		const tailChars = tail.width * perPx
+		if (tailChars > last.length + 1.5 || tailChars >= last.length + before.length + 1) return []
+		return [{ element: el, message: `"${last}" appears alone on the last of ${lines.length} lines.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/support/cards.ts

@@ -0,0 +1,114 @@
+import { ancestors, childrenOf, descendants, effectiveBackground, fontSizePx, parentOf, styleOf } from "../../../core/page"
+import { blend, contrastRatio, parseColor, WHITE } from "../../../core/color"
+import { parseShadow } from "../../../core/shadow"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { borders, bottom, chain, clipsX, clipsY, hasRole, length, lineHeight, painted, right, scrollsX } from "./geometry"
+
+const shadowLayers = (el: ElementSnapshot) => parseShadow(styleOf(el, "box-shadow")).filter((s) => s.color.a >= 0.05)
+export const hasBorderOrShadow = (el: ElementSnapshot): boolean =>
+	borders(el).some(Boolean) || shadowLayers(el).some((s) => s.x !== 0 || s.y !== 0 || s.blur > 0 || s.spread !== 0)
+
+export function fillDiffers(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!["none", ""].includes(styleOf(el, "background-image"))) return true
+	const fill = parseColor(styleOf(el, "background-color"))
+	if (!fill || fill.a === 0) return false
+	const p = parentOf(s, el)
+	const under = p ? effectiveBackground(s, p) : WHITE
+	const shown = blend(fill, under)
+	return Math.max(Math.abs(shown.r - under.r), Math.abs(shown.g - under.g), Math.abs(shown.b - under.b)) > 3
+}
+
+export function cardLike(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (/^(a|button|label|input|select|textarea|img|video|canvas|picture|svg|path|span|code|pre)$/.test(el.tag)) return false
+	const layers = shadowLayers(el)
+	const shadow = layers.some((l) => l.x !== 0 || l.y !== 0 || l.blur > 0 || l.spread !== 0)
+	const rounded = ["top-left", "top-right", "bottom-right", "bottom-left"].some((c) => Number.parseFloat(styleOf(el, `border-${c}-radius`)) > 0)
+	if (!shadow && !rounded) return false
+	const p = parentOf(s, el)
+	const under = p ? effectiveBackground(s, p) : WHITE
+	const ink = parseColor(styleOf(el, "color"))
+	const canJudge = ink !== null && contrastRatio(blend(ink, under), under) >= 3
+	const sides = borders(el).map((visible, i) => {
+		const side = ["top", "right", "bottom", "left"][i] ?? "top"
+		const color = parseColor(styleOf(el, `border-${side}-color`))
+		if (!visible || !canJudge || !color) return visible
+		const edge = blend(color, effectiveBackground(s, el))
+		return Math.max(Math.abs(edge.r - under.r), Math.abs(edge.g - under.g), Math.abs(edge.b - under.b)) >= 8
+	})
+	for (const l of layers.filter((l) => !l.inset)) {
+		const spread = l.spread + l.blur / 2
+		for (const [i, reach] of [spread - l.y, spread + l.x, spread + l.y, spread - l.x].entries()) if (reach >= 1) sides[i] = true
+	}
+	return sides.filter(Boolean).length >= 3 || fillDiffers(s, el)
+}
+
+export function labelBox(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const radius = Number.parseFloat(styleOf(el, "border-top-left-radius"))
+	if (radius >= el.rect.height / 2 - 0.5) return true
+	const kids = childrenOf(s, el)
+	const chrome = ["padding-top", "padding-bottom", "border-top-width", "border-bottom-width"].reduce((n, p) => n + length(el, p), 0)
+	return (kids.length === 0 && el.lineRects.length === 1 && el.rect.height <= lineHeight(el) * 3) ||
+		el.rect.height - chrome <= lineHeight(el) * 1.5
+}
+
+export function embeddedFrame(s: PageSnapshot, el: ElementSnapshot, outer: ElementSnapshot): boolean {
+	const nodes = [...descendants(s, el)].filter((n) => painted(s, n))
+	const controls = nodes.filter((n) => n.tag === "button" || hasRole(n, ["button"]) || n.tag === "input" || n.tag === "select")
+	const realControls = controls.filter((n) => !/copy|more|play|pause|mute|volume|seek|fullscreen|speed/i.test(n.attributes["aria-label"] ?? n.text))
+	if (realControls.length > 0) return false
+	if ([...descendants(s, el)].some((n) => n.tag === "audio") && controls.length > 0 && nodes.some((n) => hasRole(n, ["slider"]))) return true
+	const area = el.rect.width * el.rect.height
+	if (nodes.some((n) => /^(svg|canvas|img|video|iframe|picture)$/.test(n.tag) && n.rect.width * n.rect.height >= area * 0.4) && el.text.length <= 300) return true
+	if (nodes.some((n) => /^(video|audio)$/.test(n.tag) && n.rect.width >= 80) && controls.length > 0) return true
+	if (!/monospace/i.test(styleOf(outer, "font-family"))) {
+		const all = [el, ...nodes]
+		const total = all.reduce((n, c) => n + c.ownText.replace(/\s/g, "").length, 0)
+		const mono = all.filter((n) => /monospace/i.test(styleOf(n, "font-family"))).reduce((n, c) => n + c.ownText.replace(/\s/g, "").length, 0)
+		if (total > 0 && mono / total >= 0.9 && all.some((n) => /^(pre|code|samp|kbd|output)$/.test(n.tag) || n.ownText.length >= el.text.length * 0.6 || /const |await |=>|[{};]/.test(n.text))) return true
+	}
+	return false
+}
+
+export function fieldBox(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const kids = childrenOf(s, el).filter((c) => painted(s, c))
+	const field = (c: ElementSnapshot): boolean => /^(input|textarea|select)$/.test(c.tag) || c.attributes["contenteditable"] === "true"
+	return kids.some(field) && kids.every((c) => field(c) || c.text.length <= 20 && [c, ...descendants(s, c)].some((n) => n.tag === "button"))
+}
+
+export function sharesEdges(s: PageSnapshot, el: ElementSnapshot, outer: ElementSnapshot): boolean {
+	const a = el.rect
+	const b = outer.rect
+	const edges = [
+		Math.abs(a.y - b.y - length(outer, "border-top-width")) <= 1.5,
+		Math.abs(right(a) - right(b) + length(outer, "border-right-width")) <= 1.5,
+		Math.abs(bottom(a) - bottom(b) + length(outer, "border-bottom-width")) <= 1.5,
+		Math.abs(a.x - b.x - length(outer, "border-left-width")) <= 1.5,
+	]
+	if (edges.filter(Boolean).length >= 3) return true
+	if (!((edges[0] || edges[2]) && (edges[1] || edges[3]))) return false
+	return [...ancestors(s, el)].some((c) => (clipsX(c) || clipsY(c)) &&
+		((Math.abs(a.width - c.rect.width) <= 1.5 && c.rect.height > a.height + 1.5) ||
+			(Math.abs(a.height - c.rect.height) <= 1.5 && c.rect.width > a.width + 1.5)))
+}
+
+export function controlStrip(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const p = parentOf(s, el)
+	if (p && scrollsX(p)) return true
+	const kids = childrenOf(s, el)
+	const first = kids[0]
+	return first !== undefined && kids.length >= 3 && kids.every((c) =>
+		(c.tag === "a" || c.tag === "button" || hasRole(c, ["link", "button", "tab"])) && c.rect.height <= 64 &&
+		Math.min(bottom(c.rect), bottom(first.rect)) - Math.max(c.rect.y, first.rect.y) > Math.min(c.rect.height, first.rect.height) * 0.5)
+}
+
+export function dialogCard(s: PageSnapshot, el: ElementSnapshot): boolean {
+	for (const a of chain(s, el)) {
+		if (a.tag === "dialog" || hasRole(a, ["dialog", "alertdialog"])) return true
+		if (a !== el && cardLike(s, a)) return false
+	}
+	return false
+}
+
+export const pageFrame = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.rect.x <= 1 && el.rect.width >= s.document.clientWidth - 1 && el.rect.height >= s.document.scrollHeight * 0.75 &&
+	!borders(el).some(Boolean) && !fillDiffers(s, el) && shadowLayers(el).every((l) => l.color.a <= 0.05)

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/layout/support/clipping.ts

@@ -0,0 +1,71 @@
+import { ancestors, childrenOf, descendants, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { bottom, chain, clipsX, hasRole, ident, outOfFlow, painted, right, scrollsX } from "./geometry"
+
+export function trackCuts(s: PageSnapshot, el: ElementSnapshot, text: Rect): boolean {
+	const path = [...ancestors(s, el)]
+	return path.some((clip, index) => {
+		if (clip.tag === "body" || !clipsX(clip) || text.x >= clip.rect.x - 1 && right(text) <= right(clip.rect) + 1) return false
+		if (scrollsX(clip) && clip.scroll.scrollWidth > clip.scroll.clientWidth) return true
+		return path.slice(0, index).some((track) => {
+			if (["", "none"].includes(styleOf(track, "transform")) || track.scroll.scrollWidth <= clip.scroll.clientWidth + 1) return false
+			const kids = childrenOf(s, track).filter((n) => n.rect.width > 0 && n.rect.height > 0)
+			return kids.some((a, i) => kids.slice(i + 1).some((b) =>
+				Math.min(bottom(a.rect), bottom(b.rect)) - Math.max(a.rect.y, b.rect.y) >= Math.min(a.rect.height, b.rect.height) * 0.5 &&
+				(a.rect.x >= right(b.rect) - 1 || b.rect.x >= right(a.rect) - 1)))
+		})
+	})
+}
+
+const viewportTrack = (el: ElementSnapshot): boolean =>
+	/(?:^|[\s_-])(?:carousel|comparison|compare|fisheye|flickity|marquee|owl|preview|reel|rolling|scroller|slick|slider|slideshow|splide|split|swiper|tempwrap|ticker|viewport)(?:$|[\s_-])/.test(
+		`${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase()) ||
+	/\b(?:carousel|slider)\b/i.test(el.attributes["aria-roledescription"] ?? "") ||
+	/(?:^|[\s_-])demo[\s_-]+(?:area|stage|viewport)(?:$|[\s_-])/.test(ident(el))
+
+export const shell = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.tag === "body" || el.rect.x <= 1 && el.rect.y <= 1 && el.rect.width >= s.viewport.width * 0.98 && el.rect.height >= s.document.scrollHeight * 0.98
+
+function clippedAxes(el: ElementSnapshot): readonly [boolean, boolean] | null {
+	if (["contents", "none"].includes(styleOf(el, "display")) || el.rect.width <= 0 || el.rect.height <= 0 ||
+		scrollsX(el) || /^(auto|scroll)$/.test(styleOf(el, "overflow-y"))) return null
+	const x = /^(hidden|clip)$/.test(styleOf(el, "overflow-x"))
+	const y = /^(hidden|clip)$/.test(styleOf(el, "overflow-y"))
+	return x || y ? [x, y] : null
+}
+
+function traps(s: PageSnapshot, clip: ElementSnapshot, el: ElementSnapshot): boolean {
+	if (el.modal) return false
+	const axes = clippedAxes(clip)
+	if (!axes) return false
+	const parents = [...ancestors(s, el)]
+	const between = parents.slice(0, parents.indexOf(clip) + 1)
+	if (styleOf(el, "position") === "fixed" && !between.some((n) =>
+		!["", "none"].includes(styleOf(n, "transform")) || /paint|layout|strict|content/.test(styleOf(n, "contain")) ||
+		!["", "none"].includes(styleOf(n, "filter")))) return false
+	if (styleOf(el, "position") === "absolute") {
+		const cb = parents.find((n) => styleOf(n, "position") !== "static" || !["", "none"].includes(styleOf(n, "transform")))
+		if (cb && !between.includes(cb)) return false
+	}
+	return axes[0] && (el.rect.x < clip.rect.x - 2 || right(el.rect) > right(clip.rect) + 2) ||
+		axes[1] && (el.rect.y < clip.rect.y - 2 || bottom(el.rect) > bottom(clip.rect) + 2)
+}
+
+const popover = (el: ElementSnapshot): boolean =>
+	hasRole(el, ["menu", "menubar", "listbox", "tooltip", "dialog"]) ||
+	el.tag === "dialog" && el.attributes["open"] !== undefined || el.attributes["popover"] !== undefined
+
+export function clippedChild(s: PageSnapshot, clip: ElementSnapshot): ElementSnapshot | undefined {
+	if (!clippedAxes(clip) || shell(s, clip) || viewportTrack(clip) || childrenOf(s, clip).some(viewportTrack) || !painted(s, clip)) return undefined
+	return [...descendants(s, clip)].find((el) => {
+		if (chain(s, el).some((n) => n.attributes["aria-hidden"] === "true") || hasRole(el, ["none", "presentation"]) ||
+			/^(img|svg|canvas|video)$/.test(el.tag)) return false
+		if (!outOfFlow(el) || viewportTrack(el) || !(popover(el) || [...descendants(s, el)].some(popover))) return false
+		if (!traps(s, clip, el)) return false
+		const parents = [...ancestors(s, el)]
+		const between = parents.slice(0, parents.indexOf(clip))
+		if (between.some((n) => traps(s, n, el) || scrollsX(n) || /^(auto|scroll)$/.test(styleOf(n, "overflow-y")))) return false
+		return chain(s, el).every((n) => styleOf(n, "display") !== "none" && styleOf(n, "visibility") !== "hidden" &&
+			!(Number.parseFloat(styleOf(n, "opacity")) <= 0.01))
+	})
+}