oh-my-opencode 5.1.51 → 5.1.55

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

@@ -0,0 +1,46 @@
+import { childrenOf, descendants, parentOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { chain, hasRole, ident } from "./geometry"
+
+const hidden = (el: ElementSnapshot): boolean => el.attributes["inert"] !== undefined || el.attributes["aria-hidden"] === "true"
+const shown = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.rect.width > 0 && el.rect.height > 0 && styleOf(el, "visibility") !== "hidden" && chain(s, el).every((n) => styleOf(n, "display") !== "none")
+const squash = (text: string): string => text.replace(/\s/g, "")
+const parts = (el: ElementSnapshot): string[] =>
+	`${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[\s_-]+/)
+
+export function declaredMockups(s: PageSnapshot): ReadonlySet<ElementSnapshot> {
+	const pageChars = s.elements.filter((n) => shown(s, n)).reduce((sum, n) => sum + squash(n.ownText).length, 0)
+	const modals = s.elements.filter((n) => !hidden(n) && shown(s, n) &&
+		(n.attributes["aria-modal"] === "true" || hasRole(n, ["dialog", "alertdialog"]) || n.tag === "dialog" && n.attributes["open"] !== undefined))
+	return new Set(s.elements.filter((root) => {
+		if (!hidden(root) || root.rect.width < 120 || root.rect.height < 80 ||
+			/^(html|body|main|header|footer|nav|aside|section|article|form|dialog|li|tr|td|th|tbody|thead|table|details|summary)$/.test(root.tag)) return false
+		if ((root.attributes["role"] ?? "").split(/\s+/).some((r) => r !== "" && !["presentation", "none", "img", "figure", "group"].includes(r))) return false
+		if (root.attributes["aria-modal"] !== undefined || root.attributes["data-aria-hidden"] !== undefined || /^(fixed|sticky)$/.test(styleOf(root, "position"))) return false
+		if (parts(root).some((p) => /^(clone|clones|cloned|copy|duplicate|dup|carousel|embla|flicking|glide|keen|slick|slide|slider|slides|splide|swiper|marquee|ticker|menu|submenu|dropdown|popup|popover|modal|drawer|dialog|tooltip|toast|offcanvas|overlay|nav|navbar|navigation|panel|tab|tabpanel|accordion|collapse|collapsible|intro|splash|loader|preloader|loading|banner|cookie|cookies|consent|sidebar|sidenav|toc)$/.test(p))) return false
+		const path = chain(s, root).slice(1)
+		if (path.some((n) => /^(h[1-6]|p|a|button|label|summary|legend|caption|figcaption|blockquote|q)$/.test(n.tag))) return false
+		const nodes = [root, ...descendants(s, root)]
+		if (nodes.length > 3000 || nodes.some((n) => n.tag === "h1")) return false
+		const runs = nodes.filter((n) => shown(s, n) && squash(n.ownText) !== "")
+		if (runs.length < 3 || runs.reduce((sum, n) => sum + squash(n.ownText).length, 0) * 2 >= pageChars) return false
+		const fields = nodes.filter((n) => /^(input|select|textarea)$/.test(n.tag) && !(n.tag === "input" && n.attributes["type"] === "hidden"))
+		const links = runs.filter((n) => chain(s, n).some((a) => a.tag === "a" && (a.attributes["href"] ?? "").trim() !== ""))
+		if (fields.length >= 2 || fields.length > 0 && nodes.some((n) => n.tag === "label") || links.length * 2 >= runs.length) return false
+		if (modals.some((n) => !nodes.includes(n) && !path.includes(n))) return false
+		const text = squash(root.text)
+		if (text !== "" && path.some((n) => squash(n.attributes["aria-label"] ?? "").includes(text))) return false
+		const p = parentOf(s, root)
+		return !p || !childrenOf(s, p).some((peer) => {
+			if (peer === root) return false
+			const classes = (root.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+			const peerClasses = (peer.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+			const sameShape = peer.tag === root.tag && (classes.length === 0) === (peerClasses.length === 0) && classes.every((c) => peerClasses.includes(c))
+			if (shown(s, peer) && !hidden(peer) && sameShape || text !== "" && squash(peer.text) === text) return true
+			const alternative = peer.rect.width <= 1 || peer.rect.height <= 1 || /sr-only|visually-?hidden|screen-?reader|a11y-hidden|hidden-visually/.test(ident(peer))
+			return shown(s, peer) && alternative && peer.text.trim() !== "" &&
+				!/\b(demo|demonstration|illustrat\w*|interface|screen ?shots?|mock-?ups?|graphic|animation|animated|preview|image|video|visual|diagram|depict\w*|shows|showing|displayed)\b/i.test(peer.text)
+		})
+	}))
+}

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

@@ -0,0 +1,73 @@
+import { ancestors, childrenOf, descendants, fontSizePx, isRendered, px, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+
+export const right = (r: Rect): number => r.x + r.width
+export const bottom = (r: Rect): number => r.y + r.height
+export const length = (el: ElementSnapshot, prop: string): number => px(styleOf(el, prop)) ?? 0
+export const chain = (s: PageSnapshot, el: ElementSnapshot): readonly ElementSnapshot[] => [el, ...ancestors(s, el)]
+export const scrollsX = (el: ElementSnapshot): boolean => /^(auto|scroll)$/.test(styleOf(el, "overflow-x"))
+export const clipsX = (el: ElementSnapshot): boolean => /^(hidden|clip|auto|scroll)$/.test(styleOf(el, "overflow-x"))
+export const clipsY = (el: ElementSnapshot): boolean => /^(hidden|clip|auto|scroll)$/.test(styleOf(el, "overflow-y"))
+export function clipRect(el: ElementSnapshot): Rect {
+	const margin = Math.max(0, styleOf(el, "overflow-clip-margin").split(/\s+/).map(Number.parseFloat).find(Number.isFinite) ?? 0)
+	const layoutWidth = el.scroll.clientWidth + length(el, "border-left-width") + length(el, "border-right-width")
+	const layoutHeight = el.scroll.clientHeight + length(el, "border-top-width") + length(el, "border-bottom-width")
+	const scaleX = layoutWidth > 0 && Math.abs(el.rect.width - layoutWidth) > 1 ? el.rect.width / layoutWidth : 1
+	const scaleY = layoutHeight > 0 && Math.abs(el.rect.height - layoutHeight) > 1 ? el.rect.height / layoutHeight : 1
+	const x = styleOf(el, "overflow-x") === "clip" ? margin * scaleX : 0
+	const y = styleOf(el, "overflow-y") === "clip" ? margin * scaleY : 0
+	return { x: el.rect.x - x, y: el.rect.y - y, width: el.rect.width + 2 * x, height: el.rect.height + 2 * y }
+}
+export const outOfFlow = (el: ElementSnapshot): boolean => /^(absolute|fixed)$/.test(styleOf(el, "position"))
+export const hasRole = (el: ElementSnapshot, roles: readonly string[]): boolean =>
+	(el.attributes["role"] ?? "").toLowerCase().split(/\s+/).some((r) => roles.includes(r))
+export const ident = (el: ElementSnapshot): string => `${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.toLowerCase()
+export const alpha = (el: ElementSnapshot, prop: string): number => parseColor(styleOf(el, prop))?.a ?? 0
+export const borders = (el: ElementSnapshot): readonly boolean[] =>
+	["top", "right", "bottom", "left"].map((side) =>
+		length(el, `border-${side}-width`) >= 0.5 &&
+		!/^(none|hidden)$/.test(styleOf(el, `border-${side}-style`)) &&
+		alpha(el, `border-${side}-color`) >= 0.05)
+const screenReaderOnly = (el: ElementSnapshot): boolean =>
+	styleOf(el, "clip-path") === "inset(50%)" ||
+	(el.rect.width <= 1 && el.rect.height <= 1 && (clipsX(el) || clipsY(el)))
+
+export function painted(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!isRendered(s, el) || screenReaderOnly(el)) return false
+	for (const a of chain(s, el)) {
+		if (styleOf(a, "display") === "none" || Number.parseFloat(styleOf(a, "opacity")) <= 0.01) return false
+		if (a.tag === "details" && a.attributes["open"] === undefined) {
+			const summary = childrenOf(s, a).find((c) => c.tag === "summary")
+			if (!summary || !chain(s, el).includes(summary)) return false
+		}
+		const clip = clipRect(a)
+		if (a !== el && ((clipsX(a) && (right(el.rect) <= clip.x || el.rect.x >= right(clip))) ||
+			(clipsY(a) && (bottom(el.rect) <= clip.y || el.rect.y >= bottom(clip))))) return false
+	}
+	return true
+}
+
+export function textLines(s: PageSnapshot, el: ElementSnapshot): readonly Rect[] {
+	const nodes = [el, ...descendants(s, el)].filter((n) => n === el || styleOf(n, "display") === "inline")
+	const rects = nodes.flatMap((n) => n.lineRects).filter((r) => r.width > 0 && r.height > 0).sort((a, b) => a.y - b.y || a.x - b.x)
+	const lines: Rect[] = []
+	for (const r of rects) {
+		const i = lines.findIndex((l) => Math.min(bottom(l), bottom(r)) - Math.max(l.y, r.y) > Math.min(l.height, r.height) / 2)
+		const l = lines[i]
+		if (l) lines[i] = { x: Math.min(l.x, r.x), y: Math.min(l.y, r.y), width: Math.max(right(l), right(r)) - Math.min(l.x, r.x), height: Math.max(bottom(l), bottom(r)) - Math.min(l.y, r.y) }
+		else lines.push(r)
+	}
+	return lines
+}
+
+export function bounds(rects: readonly Rect[]): Rect | null {
+	if (rects.length === 0) return null
+	const x = Math.min(...rects.map((r) => r.x))
+	const y = Math.min(...rects.map((r) => r.y))
+	return { x, y, width: Math.max(...rects.map(right)) - x, height: Math.max(...rects.map(bottom)) - y }
+}
+
+export const lineHeight = (el: ElementSnapshot): number => px(styleOf(el, "line-height")) ?? fontSizePx(el) * 1.2
+export const intersects = (a: Rect, b: Rect): boolean =>
+	Math.min(right(a), right(b)) > Math.max(a.x, b.x) && Math.min(bottom(a), bottom(b)) > Math.max(a.y, b.y)

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

@@ -0,0 +1,35 @@
+import { descendants, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { chain } from "./geometry"
+
+export const classWords = (el: ElementSnapshot): readonly string[] =>
+	(el.attributes["class"] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/).filter(Boolean)
+
+export function closedClass(el: ElementSnapshot): boolean {
+	return (el.attributes["class"] ?? "").split(/\s+/).some((token) => {
+		const words = classWords({ ...el, attributes: { class: token } })
+		const pair = (a: string, b: string): boolean => words.some((word, i) => word === a && words[i + 1] === b)
+		return words.some((word) => ["offcanvas", "drawer", "megamenu", "submenu", "dropdown", "flyout", "modal", "tabpanel", "tabpane"].includes(word)) ||
+			pair("off", "canvas") || pair("mega", "menu") || pair("sub", "menu") ||
+			words.some((word) => ["content", "panel", "pane", "body"].includes(word)) && words.some((word) => ["tab", "tabs", "accordion"].includes(word))
+	})
+}
+
+export function unstartedSlider(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const slider = chain(s, el).slice(0, 7).find((n) => (n.attributes["class"] ?? "").split(/\s+/).some((token) => {
+		const words = classWords({ ...n, attributes: { class: token } })
+		return words.some((word) => ["slider", "carousel", "swiper", "slick", "splide", "glide", "flickity", "slideshow", "revslider"].includes(word)) &&
+			!words.some((word) => ["slide", "item", "cell", "card", "pane", "caption"].includes(word))
+	}))
+	if (!slider) return false
+	return ![slider, ...descendants(s, slider)].some((n) => {
+		if (/^(hidden|collapse)$/.test(styleOf(n, "visibility"))) return false
+		const path = chain(s, n)
+		const upto = path.slice(0, path.indexOf(slider) + 1)
+		const shows = (aria: boolean): boolean => upto.every((a) => styleOf(a, "display") !== "none" &&
+			Number.parseFloat(styleOf(a, "opacity")) > 0.02 && !(aria && a.attributes["aria-hidden"] === "true"))
+		if (n.ownText.trim() !== "" && shows(true)) return true
+		return n !== slider && n.rect.width >= Math.max(1, slider.rect.width * 0.5) && n.rect.height >= 1 &&
+			(/^(img|picture|video|canvas|svg)$/.test(n.tag) || styleOf(n, "background-image").includes("url(")) && shows(false)
+	})
+}

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

@@ -0,0 +1,23 @@
+import { lintSnapshot } from "../../../lint"
+import type { PageRule } from "../../../rule"
+import type { PageSnapshot } from "../../../types"
+import { buildSnapshot, type NodeSpec } from "../../../testing/build-snapshot"
+
+export const marked = (rule: PageRule, nodes: readonly NodeSpec[], options: Parameters<typeof buildSnapshot>[1] = {}): readonly string[] =>
+	selectors(rule, buildSnapshot(nodes, options))
+
+export const selectors = (rule: PageRule, snapshot: PageSnapshot): readonly string[] =>
+	lintSnapshot(snapshot, { rules: [rule] }).map((f) => f.location.kind === "element" ? f.location.selector : "page")
+
+export const border = {
+	"border-top-width": "1px", "border-right-width": "1px", "border-bottom-width": "1px", "border-left-width": "1px",
+	"border-top-style": "solid", "border-right-style": "solid", "border-bottom-style": "solid", "border-left-style": "solid",
+	"border-top-color": "#333", "border-right-color": "#333", "border-bottom-color": "#333", "border-left-color": "#333",
+}
+
+export const rounded = {
+	"border-top-left-radius": "12px", "border-top-right-radius": "12px", "border-bottom-right-radius": "12px", "border-bottom-left-radius": "12px",
+}
+
+export const lines = (widths: readonly number[], x = 24, y = 24, height = 20) =>
+	widths.map((width, i) => ({ x, y: y + i * 24, width, height }))

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

@@ -0,0 +1,32 @@
+import { descendants, fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { bottom, chain, length, painted, right, textLines } from "./geometry"
+
+function authoredBreak(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (/^(pre|pre-wrap|pre-line|break-spaces)$/.test(styleOf(el, "white-space"))) return true
+	return [...descendants(s, el)].some((n) => n.tag === "br" || !["inline", "contents", "none"].includes(styleOf(n, "display")))
+}
+
+export function measuredLines(s: PageSnapshot, el: ElementSnapshot): readonly Rect[] {
+	if (!painted(s, el) || authoredBreak(s, el)) return []
+	const lines = textLines(s, el)
+	const widest = [...lines].sort((a, b) => b.width - a.width)[0]
+	if (!widest || lines.some((r) => right(r) <= widest.x || r.x >= right(widest))) return []
+	for (const c of chain(s, el).slice(0, 5)) {
+		if (/^(hidden|clip)$/.test(styleOf(c, "overflow-y")) &&
+			lines.some((r) => r.y + r.height / 2 > bottom(c.rect) - length(c, "border-bottom-width"))) return []
+	}
+	return lines
+}
+
+export const wrapIs = (el: ElementSnapshot, value: string): boolean =>
+	(styleOf(el, "text-wrap-style") || styleOf(el, "text-wrap")).split(/\s+/).includes(value)
+
+export const wordsOf = (el: ElementSnapshot): readonly string[] =>
+	el.text.replace(/[\u00ad\u200b]/g, "").trim().split(/\s+/).filter(Boolean)
+
+export function oneFace(s: PageSnapshot, el: ElementSnapshot): boolean {
+	return [...descendants(s, el)].every((n) =>
+		!["img", "svg", "canvas", "video", "input"].includes(n.tag) &&
+		(styleOf(n, "font-family") === styleOf(el, "font-family") && fontSizePx(n) === fontSizePx(el) || n.ownText === ""))
+}

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

@@ -0,0 +1,77 @@
+import { childrenOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { keyframes } from "../../decoration/support/keyframes"
+import { bottom, chain, right } from "./geometry"
+
+const list = (el: ElementSnapshot, prop: string): readonly string[] => styleOf(el, prop).split(",").map((v) => v.trim())
+const at = (values: readonly string[], index: number): string => values[index % values.length] ?? ""
+
+function tracedToEnd(s: PageSnapshot, el: ElementSnapshot, prop: string): boolean {
+	const counts = list(el, "animation-iteration-count")
+	const states = list(el, "animation-play-state")
+	const timelines = list(el, "animation-timeline")
+	let setting = false
+	for (const [i, name] of list(el, "animation-name").entries()) {
+		if (name === "" || name === "none") continue
+		const frames = keyframes(s, name)
+		if (!frames) return false
+		if (!frames.some((f) => f[prop] !== undefined)) continue
+		setting = true
+		const count = Number.parseFloat(at(counts, i))
+		if (!Number.isFinite(count) || count <= 0 || at(states, i) === "paused" || !["", "auto"].includes(at(timelines, i))) return false
+	}
+	const durations = list(el, "transition-duration")
+	return setting || list(el, "transition-property").some((p, i) => p === prop && Number.parseFloat(at(durations, i)) > 0)
+}
+
+export function openingWidth(s: PageSnapshot, el: ElementSnapshot): boolean {
+	for (const node of chain(s, el).slice(0, 64)) {
+		if (node.tag === "body" || node.tag === "html") return false
+		if (node.motion.some((p) => /^(?:(?:min|max)-)?(?:width|inline-size)$/.test(p) && tracedToEnd(s, node, p))) return true
+	}
+	return false
+}
+
+function onlyScales(value: string): boolean {
+	let rest = value.trim().replace(/\s*!important\s*$/, "")
+	if (rest.toLowerCase() === "none") return true
+	let found = false
+	while (rest !== "") {
+		const match = /^scale(?:[XYZ]|3d)?\(([^)]*)\)\s*/i.exec(rest)
+		if (!match || (match[1] ?? "").split(/[\s,]+/).filter(Boolean).some((n) => !Number.isFinite(Number(n)))) return false
+		found = true
+		rest = rest.slice(match[0].length)
+	}
+	return found
+}
+
+function endlessTranslation(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!el.motion.some((p) => p === "transform" || p === "translate" || p === "-webkit-transform")) return false
+	const counts = list(el, "animation-iteration-count")
+	const states = list(el, "animation-play-state")
+	return list(el, "animation-name").some((name, i) => {
+		if (name === "" || name === "none" || at(counts, i) !== "infinite" || at(states, i) === "paused") return false
+		const frames = keyframes(s, name)
+		return frames === null || frames.some((f) => Object.entries(f).some(([prop, value]) =>
+			prop.replace(/^-webkit-/, "") === "translate" || prop.replace(/^-webkit-/, "") === "transform" && !onlyScales(value)))
+	})
+}
+
+export function ridesRunningTrack(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const parents = chain(s, el).slice(1)
+	for (const [index, clip] of parents.entries()) {
+		if (clip.tag === "body" || clip.tag === "html") break
+		if (!/^(hidden|clip)$/.test(styleOf(clip, "overflow-x")) || clip.scroll.clientWidth <= 0) continue
+		if (parents.slice(0, index).some((track) => {
+			if (track.scroll.scrollWidth <= clip.scroll.clientWidth + 1 || !["transform", "translate"].some((p) =>
+				!["", "none"].includes(styleOf(track, p))) || !endlessTranslation(s, track)) return false
+			const kids = childrenOf(s, track).filter((n) => n.rect.width >= 1 && n.rect.height >= 1)
+			return kids.some((a, i) => {
+				const b = kids[i + 1]
+				return b !== undefined && (b.rect.x >= right(a.rect) - 1 || right(b.rect) <= a.rect.x + 1) &&
+					Math.min(bottom(a.rect), bottom(b.rect)) - Math.max(a.rect.y, b.rect.y) > 0
+			})
+		})) return true
+	}
+	return false
+}

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

@@ -0,0 +1,93 @@
+import { ancestors, childrenOf, descendants, fontSizePx, parentOf, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { fillDiffers } from "./cards"
+import { alpha, bottom, chain, clipsX, clipsY, length, lineHeight, painted, right } from "./geometry"
+
+const same = (a: string, b: string): boolean => {
+	const x = parseColor(a)
+	const y = parseColor(b)
+	return x !== null && y !== null && Math.max(Math.abs(x.r - y.r), Math.abs(x.g - y.g), Math.abs(x.b - y.b), Math.abs(x.a - y.a) * 255) < 8
+}
+
+export function paddingFill(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (alpha(el, "background-color") === 0 || !fillDiffers(s, el)) return false
+	const fill = styleOf(el, "background-color")
+	for (const p of ancestors(s, el)) {
+		const image = styleOf(p, "background-image")
+		const lead = /^linear-gradient\(to (right|left|bottom|top), rgba\(0, 0, 0, 0\) ([\d.]+)(px|%), (rgba?\([^)]*\)) ([\d.]+)(px|%)\)$/.exec(image)
+		if (lead && same(fill, lead[4] ?? "") && lead[2] === lead[5] && lead[3] === lead[6]) {
+			const vertical = lead[1] === "top" || lead[1] === "bottom"
+			const span = vertical ? p.rect.height : p.rect.width
+			const stop = Number(lead[2]) * (lead[3] === "%" ? span / 100 : 1)
+			if (lead[1] === "right" && el.rect.x >= p.rect.x + stop - 0.5 ||
+				lead[1] === "left" && right(el.rect) <= right(p.rect) - stop + 0.5 ||
+				lead[1] === "bottom" && el.rect.y >= p.rect.y + stop - 0.5 ||
+				lead[1] === "top" && bottom(el.rect) <= bottom(p.rect) - stop + 0.5) return false
+		}
+		if (alpha(p, "background-color") > 0) break
+	}
+	return true
+}
+
+export function paddingBackdrop(s: PageSnapshot, el: ElementSnapshot): boolean {
+	for (const node of chain(s, el).slice(0, 12)) {
+		const p = parentOf(s, node)
+		if (!p) break
+		for (const sibling of childrenOf(s, p).slice(0, childrenOf(s, p).indexOf(node)).reverse()) {
+			const r = sibling.rect
+			if (styleOf(sibling, "display") === "none" || r.x > el.rect.x + 1 || r.y > el.rect.y + 1 ||
+				right(r) < right(el.rect) - 1 || bottom(r) < bottom(el.rect) - 1) continue
+			if (alpha(sibling, "background-color") > 0) return same(styleOf(el, "background-color"), styleOf(sibling, "background-color"))
+			if ([sibling, ...descendants(s, sibling)].some((n) => /^(img|video)$/.test(n.tag) && painted(s, n) &&
+				n.rect.x <= el.rect.x + 1 && n.rect.y <= el.rect.y + 1 && right(n.rect) >= right(el.rect) - 1 && bottom(n.rect) >= bottom(el.rect) - 1)) return true
+		}
+		if (alpha(p, "background-color") > 0) break
+	}
+	return false
+}
+
+export function continuedFill(s: PageSnapshot, el: ElementSnapshot, side: number): boolean {
+	const r = el.rect
+	const reaches = (b: Rect): boolean => Math.abs([bottom(b) - r.y, b.x - right(r), b.y - bottom(r), right(b) - r.x][side] ?? Infinity) <= 1.5
+	const along = (b: Rect): boolean => side % 2 === 0
+		? Math.min(right(r), right(b)) - Math.max(r.x, b.x) >= r.width * 0.9
+		: Math.min(bottom(r), bottom(b)) - Math.max(r.y, b.y) >= r.height * 0.9
+	const search = (node: ElementSnapshot, depth: number): boolean => {
+		if (!reaches(node.rect) || !painted(s, node)) return false
+		if (along(node.rect) && same(styleOf(el, "background-color"), styleOf(node, "background-color"))) return true
+		return depth < 6 && childrenOf(s, node).some((n) => search(n, depth + 1))
+	}
+	for (const node of chain(s, el).slice(0, 5)) {
+		const p = parentOf(s, node)
+		if (p && childrenOf(s, p).some((n) => n !== node && search(n, 0))) return true
+	}
+	return false
+}
+
+export function glyphBand(el: ElementSnapshot, r: Rect, scale = 1): Rect {
+	const size = fontSizePx(el) * scale
+	const pitch = lineHeight(el) * scale
+	const count = Math.max(1, Math.round((r.height - size) / pitch) + 1)
+	const inset = Math.max(0, (r.height - (count - 1) * pitch - size) / 2)
+	return { ...r, y: r.y + inset, height: r.height - inset * 2 }
+}
+
+export const paddingScale = (el: ElementSnapshot): number => {
+	const layout = el.scroll.clientWidth + length(el, "border-left-width") + length(el, "border-right-width")
+	const scale = el.rect.width / layout
+	return scale > 0.05 && scale < 0.95 ? scale : 1
+}
+
+export function uncut(s: PageSnapshot, node: ElementSnapshot, wrapper: ElementSnapshot, r: Rect, side: number): boolean {
+	for (const p of chain(s, node)) {
+		if (styleOf(p, "display") !== "inline") {
+			if (side === 1 && clipsX(p) && right(r) > right(p.rect) - length(p, "border-right-width") + 0.5 ||
+				side === 3 && clipsX(p) && r.x < p.rect.x + length(p, "border-left-width") - 0.5 ||
+				side === 0 && clipsY(p) && r.y < p.rect.y + length(p, "border-top-width") - 0.5 ||
+				side === 2 && clipsY(p) && bottom(r) > bottom(p.rect) - length(p, "border-bottom-width") + 0.5) return false
+		}
+		if (p === wrapper) break
+	}
+	return true
+}

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

@@ -0,0 +1,161 @@
+import { childrenOf, descendants, fontSizePx, isHeading, parentOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { cardLike, fillDiffers } from "./cards"
+import { alpha, borders, bottom, chain, length, outOfFlow, painted, right, textLines } from "./geometry"
+
+export const paintsEdge = (el: ElementSnapshot, side: string): boolean =>
+	alpha(el, "background-color") > 0.05 || length(el, `border-${side}-width`) > 0 ||
+	!["", "none"].includes(styleOf(el, "box-shadow")) ||
+	!styleOf(el, "background-clip").includes("text") && !styleOf(el, "-webkit-background-clip").includes("text") &&
+	!["", "none"].includes(styleOf(el, "background-image")) &&
+	(styleOf(el, "background-size") === "cover" || styleOf(el, "background-image").includes("gradient(") &&
+		["auto", "auto auto", "100% 100%"].includes(styleOf(el, "background-size")))
+
+const separates = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	borders(el).some(Boolean) || fillDiffers(s, el) || !["", "none"].includes(styleOf(el, "box-shadow"))
+const spacer = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.text === "" && !separates(s, el) &&
+	!(alpha(el, "background-color") > 0.05 && chain(s, el).slice(1).some((n) =>
+		!["", "none"].includes(styleOf(n, "background-image")) && paintsEdge(n, "top"))) &&
+	![el, ...descendants(s, el)].some((n) =>
+		/^(img|video|canvas|iframe|svg|input|button)$/.test(n.tag) || n !== el && separates(s, n))
+
+const flow = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	painted(s, el) && !outOfFlow(el) && styleOf(el, "position") !== "sticky" &&
+	Number.parseFloat(styleOf(el, "opacity")) > 0.05 && !["inline", "none"].includes(styleOf(el, "display"))
+
+function flowBoxes(s: PageSnapshot, el: ElementSnapshot, heading: ElementSnapshot): readonly ElementSnapshot[] {
+	if (styleOf(el, "display") === "contents") return childrenOf(s, el).flatMap((c) => flowBoxes(s, c, heading))
+	if (!flow(s, el) || spacer(s, el)) return []
+	if (Math.min(right(el.rect), right(heading.rect)) - Math.max(el.rect.x, heading.rect.x) < 8) return []
+	return [el]
+}
+
+function repeats(s: PageSnapshot, row: ElementSnapshot, heading: ElementSnapshot): boolean {
+	const p = parentOf(s, row)
+	if (!p) return false
+	const kids = childrenOf(s, p)
+	const i = kids.indexOf(row)
+	const laysOut = (n: ElementSnapshot): boolean =>
+		styleOf(n, "display") !== "none" && !outOfFlow(n) && n.rect.width >= 1 && n.rect.height >= 1 && !spacer(s, n)
+	const neighbours = [kids.slice(0, i).reverse().find(laysOut), kids.slice(i + 1).find(laysOut)]
+	const path = (n: ElementSnapshot, stop: ElementSnapshot): readonly string[] => {
+		const steps: string[] = []
+		let current = n
+		while (current !== stop) {
+			const parent = parentOf(s, current)
+			if (!parent) return []
+			steps.unshift(`${current.tag}:${childrenOf(s, parent).indexOf(current)}`)
+			current = parent
+		}
+		return steps
+	}
+	const shape = (root: ElementSnapshot): string[] => {
+		const tags: string[] = []
+		let budget = 24
+		const walk = (node: ElementSnapshot, depth: number): void => {
+			tags.push(node.tag)
+			if (depth === 0) return
+			for (const child of childrenOf(s, node).filter((n) => styleOf(n, "display") !== "none" && !outOfFlow(n) && n.rect.width >= 1 && n.rect.height >= 1)) {
+				if (budget-- <= 0) return
+				walk(child, depth - 1)
+			}
+		}
+		walk(root, 3)
+		return tags
+	}
+	const ownPath = path(heading, row).join("/")
+	const ownShape = shape(row)
+	return neighbours.some((n) => {
+		if (!n || n.tag !== row.tag || ![...descendants(s, n)].some((h) => h.tag === heading.tag && path(h, n).join("/") === ownPath)) return false
+		const other = shape(n)
+		const total = ownShape.length + other.length
+		let shared = 0
+		for (const tag of ownShape) {
+			const at = other.indexOf(tag)
+			if (at >= 0) { shared++; other.splice(at, 1) }
+		}
+		return shared * 2 / total >= 0.7
+	})
+}
+
+export function neighbour(s: PageSnapshot, heading: ElementSnapshot, before: boolean, start = heading): ElementSnapshot | null {
+	let cursor = start
+	for (let depth = 0; depth < 20; depth++) {
+		const parent = parentOf(s, cursor)
+		if (!parent) return null
+		const siblings = childrenOf(s, parent)
+		if (!before && cursor !== heading && repeats(s, cursor, heading)) return null
+		const i = siblings.indexOf(cursor)
+		const choices = (before ? siblings.slice(0, i) : siblings.slice(i + 1))
+			.flatMap((n) => flowBoxes(s, n, heading))
+			.filter((n) => before ? bottom(n.rect) <= start.rect.y + 2 : n.rect.y >= bottom(heading.rect) - 2)
+			.sort((a, b) => before ? bottom(b.rect) - bottom(a.rect) : a.rect.y - b.rect.y)
+		const found = choices[0]
+		if (found) return found
+		if (parent.tag === "body" || separates(s, parent) || !before && (parent.tag === "main" || parent.attributes["role"] === "main")) return null
+		cursor = parent
+	}
+	return null
+}
+
+export function headingCluster(s: PageSnapshot, heading: ElementSnapshot, below: number): ElementSnapshot {
+	let top = heading
+	for (let count = 0; count < 3; count++) {
+		const previous = neighbour(s, heading, true, top)
+		if (!previous || isHeading(previous) || previous.text.length === 0 || previous.text.length > 80 || previous.rect.height > 60) break
+		const gap = top.rect.y - bottom(previous.rect)
+		const words = [previous, ...descendants(s, previous)].filter((n) => n.ownText !== "")
+		const word = words[0] ?? previous
+		const p = parentOf(s, previous)
+		const opens = p !== null && childrenOf(s, p).filter((n) => styleOf(n, "display") !== "none" && n.rect.width >= 1 && n.rect.height >= 1)[0] === previous
+		const lines = words.flatMap((n) => textLines(s, n))
+		const label = fontSizePx(word) <= fontSizePx(heading) && (fontSizePx(word) <= 14 || styleOf(word, "text-transform") === "uppercase" ||
+			length(word, "letter-spacing") >= fontSizePx(word) * 0.05 || opens &&
+			(styleOf(word, "font-style") === "italic" || Number.parseFloat(styleOf(word, "font-weight")) < 400 ||
+				styleOf(word, "color") !== styleOf(heading, "color")))
+		const subtitle = opens && gap <= 2 && fontSizePx(word) <= fontSizePx(heading) && lines.length <= 1
+		if (gap < 0 || gap >= 28 && !(opens && gap < below && gap <= 64) || !(label || subtitle) || lines.length > 1) break
+		top = previous
+	}
+	return top
+}
+
+export function rhythmExempt(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!flow(s, el) || el.text.length < 3 || !["h2", "h3", "h4"].includes(el.tag) || paintsEdge(el, "top")) return true
+	return chain(s, el).some((a) => ["blockquote", "q", "nav", "footer"].includes(a.tag) ||
+		a !== el && cardLike(s, a) && a.rect.height < 200)
+}
+
+export function closesInProse(s: PageSnapshot, el: ElementSnapshot, heading: ElementSnapshot, textSize: number): boolean {
+	const blocks = [el, ...descendants(s, el)].filter((n) => ["p", "li", "dd", "div"].includes(n.tag) && n.ownText !== "" && flow(s, n))
+	const last = blocks.sort((a, b) => bottom(b.rect) - bottom(a.rect))[0]
+	return last !== undefined && last.text.length >= 80 && textLines(s, last).length >= 2 &&
+		last.rect.width >= heading.rect.width * 0.5 && fontSizePx(last) < fontSizePx(heading) && fontSizePx(last) <= textSize * 1.25
+}
+
+export function separatesBelow(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (el.tag === "hr" || el.rect.height <= 4) return true
+	let node: ElementSnapshot | undefined = el
+	let framed = false
+	for (let depth = 0; depth < 8 && node; depth++) {
+		const current = node
+		framed ||= ["top", "left", "right"].some((side) => length(current, `border-${side}-width`) > 0)
+		if (!framed && length(node, "border-bottom-width") > 0 && node.rect.width >= el.rect.width * 0.9 ||
+			/^(img|picture|video|canvas|svg|iframe)$/.test(node.tag) && node.rect.width >= el.rect.width * 0.5 || isHeading(node)) return true
+		node = [...childrenOf(s, node)].reverse().find((n) => styleOf(n, "display") !== "none" &&
+			n.rect.width >= 1 && n.rect.height >= 1 && bottom(n.rect) >= bottom(el.rect) - 2)
+	}
+	return false
+}
+
+export function contentBottom(s: PageSnapshot, el: ElementSnapshot): number {
+	let node = el
+	for (let depth = 0; depth < 8; depth++) {
+		if (paintsEdge(node, "bottom") || /^(img|picture|video|canvas|svg|iframe)$/.test(node.tag)) return Math.min(bottom(node.rect), bottom(el.rect))
+		const lowest = childrenOf(s, node).filter((n) => flow(s, n) && !spacer(s, n)).sort((a, b) => bottom(b.rect) - bottom(a.rect))[0]
+		if (!lowest) return Math.min(bottom(el.rect), bottom(node.rect) - Math.max(0, length(node, "padding-bottom")))
+		node = lowest
+	}
+	return Math.min(bottom(el.rect), bottom(node.rect))
+}

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