oh-my-opencode 5.1.51 → 5.1.54

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

@@ -0,0 +1,151 @@
+import { splitTop } from "./appearance"
+import { arc, cubic, lerp, type Point } from "./curve-samples"
+export function geometricPolygon(body: string): boolean {
+	const points = splitTop(body)
+		.filter((p) => !/^nonzero$|^evenodd$/.test(p))
+		.map((p) => splitTop(p, /\s/))
+	const key = (v: string): string => (/^[-+]?0(?:\.0+)?(?:%|px)?$/.test(v) ? "0" : v.replace(/\s/g, ""))
+	if (
+		points.every((p, i) => {
+			const next = points[(i + 1) % points.length]
+			return p.length === 2 && next !== undefined && (key(p[0] ?? "") === key(next[0] ?? "") || key(p[1] ?? "") === key(next[1] ?? ""))
+		})
+	)
+		return true
+	const numeric = points.map((p) => p.map((v) => (/^[-+]?[\d.]+(?:px|%)?$/.test(v) ? Number.parseFloat(v) : Number.NaN)))
+	if (numeric.some((p) => p.length !== 2 || p.some((n) => !Number.isFinite(n)))) return false
+	const xs = numeric.map((p) => p[0] ?? 0),
+		ys = numeric.map((p) => p[1] ?? 0)
+	const distinct = (vs: readonly number[]): number[] => [...new Set(vs)].sort((a, b) => a - b)
+	const teeth = (along: readonly number[], across: readonly number[]): boolean => {
+		const d = distinct(along),
+			step = (d[1] ?? 0) - (d[0] ?? 0)
+		if (d.length < 3 || step <= 0 || d.slice(1).some((v, i) => Math.abs(v - (d[i] ?? 0) - step) > 0.5)) return false
+		let last: number | null = null,
+			swings = 0
+		for (let i = 0; i < along.length; i++) {
+			const j = (i + 1) % along.length
+			if (Math.abs(Math.abs((along[j] ?? 0) - (along[i] ?? 0)) - step) > 0.5) {
+				last = null
+				continue
+			}
+			const swing = (across[j] ?? 0) - (across[i] ?? 0)
+			if (Math.abs(swing) < 0.01) continue
+			if (last !== null && (Math.sign(last) === Math.sign(swing) || Math.abs(Math.abs(last) - Math.abs(swing)) > 0.5)) return false
+			last = swing
+			swings++
+		}
+		return swings >= 3
+	}
+	return (
+		(distinct(xs).length >= 2 && distinct(xs).length <= 4 && teeth(ys, xs)) ||
+		(distinct(ys).length >= 2 && distinct(ys).length <= 4 && teeth(xs, ys))
+	)
+}
+export function roundedPath(body: string): boolean {
+	const tokens = body.replace(/^["']|["']$/g, "").match(/[A-Za-z]|[-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:[eE][-+]?[0-9]+)?/g) ?? []
+	const segments: { a: Point; b: Point; line: boolean }[] = [],
+		points: Point[] = []
+	let at: Point = [0, 0],
+		start: Point = [0, 0],
+		cmd = "",
+		i = 0
+	let lastCubic: Point | null = null,
+		lastQuad: Point | null = null
+	while (i < tokens.length) {
+		const token = tokens[i] ?? ""
+		if (/^[a-z]$/i.test(token)) {
+			cmd = token
+			i++
+			if (cmd.toLowerCase() === "z") {
+				if (at[0] !== start[0] || at[1] !== start[1]) segments.push({ a: at, b: start, line: true })
+				at = start
+				cmd = ""
+			}
+			continue
+		}
+		const upper = cmd.toUpperCase(),
+			arity =
+				upper === "H" || upper === "V"
+					? 1
+					: upper === "C"
+						? 6
+						: upper === "A"
+							? 7
+							: upper === "S" || upper === "Q"
+								? 4
+								: ["M", "L", "T"].includes(upper)
+									? 2
+									: 0
+		if (arity === 0 || i + arity > tokens.length) return false
+		const args = tokens.slice(i, i + arity).map(Number)
+		if (args.some((n) => !Number.isFinite(n))) return false
+		i += arity
+		const rel = cmd !== upper,
+			base: Point = rel ? at : [0, 0]
+		const end: Point =
+			upper === "H"
+				? [base[0] + (args[0] ?? 0), at[1]]
+				: upper === "V"
+					? [at[0], base[1] + (args[0] ?? 0)]
+					: [base[0] + (args[arity - 2] ?? 0), base[1] + (args[arity - 1] ?? 0)]
+		const point = (k: number): Point => [base[0] + (args[k] ?? 0), base[1] + (args[k + 1] ?? 0)]
+		const reflect = (p: Point | null): Point => (p ? [2 * at[0] - p[0], 2 * at[1] - p[1]] : at)
+		let nextCubic: Point | null = null,
+			nextQuad: Point | null = null
+		if (upper === "C" || upper === "S") {
+			const c1 = upper === "C" ? point(0) : reflect(lastCubic),
+				c2 = point(upper === "C" ? 2 : 0)
+			points.push(...cubic(at, c1, c2, end))
+			nextCubic = c2
+		} else if (upper === "Q" || upper === "T") {
+			const c: Point = upper === "Q" ? point(0) : reflect(lastQuad)
+			points.push(...cubic(at, lerp(at, c, 2 / 3), lerp(end, c, 2 / 3), end))
+			nextQuad = c
+		} else if (upper === "A")
+			points.push(...arc(at, args[0] ?? 0, args[1] ?? 0, args[2] ?? 0, (args[3] ?? 0) !== 0, (args[4] ?? 0) !== 0, end))
+		lastCubic = nextCubic
+		lastQuad = nextQuad
+		if (upper === "M") {
+			start = end
+			cmd = rel ? "l" : "L"
+		} else segments.push({ a: at, b: end, line: ["L", "H", "V"].includes(upper) })
+		points.push(end)
+		at = end
+	}
+	const lines = segments.filter((s) => s.line)
+	if (lines.length < 4) return false
+	const xs = points.map((p) => p[0]),
+		ys = points.map((p) => p[1]),
+		minX = Math.min(...xs),
+		maxX = Math.max(...xs),
+		minY = Math.min(...ys),
+		maxY = Math.max(...ys)
+	const tol = Math.max(1, maxX - minX, maxY - minY) * 0.01,
+		near = (a: number, b: number): boolean => Math.abs(a - b) <= tol
+	const edges = (p: Point): number[] =>
+		[near(p[1], minY) ? 0 : -1, near(p[0], maxX) ? 1 : -1, near(p[1], maxY) ? 2 : -1, near(p[0], minX) ? 3 : -1].filter((i) => i >= 0)
+	const reached = new Set<number>()
+	for (const l of lines) {
+		const edge = edges(l.a).find((i) => edges(l.b).includes(i))
+		if (edge === undefined) return false
+		reached.add(edge)
+	}
+	if (reached.size !== 4) return false
+	const first = segments.findIndex((s) => s.line)
+	const run: Point[] = []
+	for (let k = 1; k <= segments.length; k++) {
+		const segment = segments[(first + k) % segments.length]
+		if (!segment) continue
+		const a = run[0],
+			b = run[1]
+		if (segment.line) {
+			if (a && b && !edges(a).some((x) => edges(b).some((y) => x % 2 !== y % 2))) return false
+			run.length = 0
+		} else {
+			run[0] = a ?? segment.a
+			run[1] = segment.b
+		}
+	}
+	return true
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/css-candidates.ts

@@ -0,0 +1,66 @@
+import { ancestors, parentOf } from "../../../core/page"
+import { cssBlocks } from "../../../core/source"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+function compound(e: ElementSnapshot, selector: string): boolean {
+	const tag = /^[a-z][\w-]*|^\*/i.exec(selector)?.[0]
+	if (tag && tag !== "*" && e.tag !== tag.toLowerCase()) return false
+	let rest = selector.slice(tag?.length ?? 0)
+	for (const m of rest.matchAll(/([.#])([\w-]+)|\[([\w-]+)(?:=["']?([^"'\]]*)["']?)?\]/g)) {
+		if (m[1] === "#" && e.attributes["id"] !== m[2]) return false
+		if (m[1] === "." && !(e.attributes["class"] ?? "").split(/\s+/).includes(m[2] ?? "")) return false
+		if (m[3] && (e.attributes[m[3]] === undefined || (m[4] !== undefined && e.attributes[m[3]] !== m[4]))) return false
+	}
+	rest = rest.replace(/([.#])[\w-]+|\[[^\]]+\]/g, "")
+	return rest === ""
+}
+
+export function matchesSelector(s: PageSnapshot, e: ElementSnapshot, selector: string): boolean {
+	const pieces = selector.trim().replace(/\s*>\s*/g, " > ").split(/\s+/)
+	const last = pieces.pop()
+	if (!last || !compound(e, last)) return false
+	let current = e
+	while (pieces.length > 0) {
+		const part = pieces.pop()
+		if (part === ">") {
+			const parent = parentOf(s, current)
+			const wanted = pieces.pop()
+			if (!parent || !wanted || !compound(parent, wanted)) return false
+			current = parent
+		} else {
+			const match = [...ancestors(s, current)].find(a => compound(a, part ?? ""))
+			if (!match) return false
+			current = match
+		}
+	}
+	return true
+}
+
+export function cssCandidates(s: PageSnapshot): ReadonlyMap<string, Readonly<Record<string, string>>> {
+	const merged = new Map<string, Record<string, string>>()
+	for (const css of s.cssText) {
+		let text = css
+		for (const match of css.matchAll(/@media[^{]*prefers-reduced-motion\s*:\s*reduce\s*\)[^{]*\{/g)) {
+			let end = (match.index ?? 0) + match[0].length
+			let depth = 1
+			const start = match.index ?? 0
+			while (end < css.length && depth > 0) {
+				if (css[end] === "{") depth++
+				if (css[end] === "}") depth--
+				end++
+			}
+			text = text.replace(css.slice(start, end), "")
+		}
+		for (const block of cssBlocks(text)) {
+			for (const selector of block.selector.split(",").map(v => v.trim()).filter(v => v !== "" && !v.startsWith("@"))) {
+				const declarations = merged.get(selector) ?? {}
+				for (const entry of block.body.split(";")) {
+					const colon = entry.indexOf(":")
+					if (colon >= 0) declarations[entry.slice(0, colon).trim().toLowerCase()] = entry.slice(colon + 1).trim()
+				}
+				merged.set(selector, declarations)
+			}
+		}
+	}
+	return merged
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/curve-samples.ts

@@ -0,0 +1,55 @@
+export type Point = readonly [number, number]
+export const lerp = (a: Point, b: Point, t: number): Point => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]
+export function cubic(p0: Point, p1: Point, p2: Point, p3: Point): readonly Point[] {
+	return Array.from({ length: 15 }, (_, i) => {
+		const t = (i + 1) / 16,
+			u = 1 - t,
+			a = u * u * u,
+			b = 3 * u * u * t,
+			c = 3 * u * t * t,
+			d = t * t * t
+		return [a * p0[0] + b * p1[0] + c * p2[0] + d * p3[0], a * p0[1] + b * p1[1] + c * p2[1] + d * p3[1]] satisfies Point
+	})
+}
+export function arc(
+	from: Point,
+	rxInput: number,
+	ryInput: number,
+	rotation: number,
+	large: boolean,
+	sweep: boolean,
+	to: Point,
+): readonly Point[] {
+	let rx = Math.abs(rxInput),
+		ry = Math.abs(ryInput)
+	if ((from[0] === to[0] && from[1] === to[1]) || rx === 0 || ry === 0) return []
+	const phi = (rotation * Math.PI) / 180,
+		sin = Math.sin(phi),
+		cos = Math.cos(phi),
+		dx = (from[0] - to[0]) / 2,
+		dy = (from[1] - to[1]) / 2
+	const x1 = cos * dx + sin * dy,
+		y1 = -sin * dx + cos * dy,
+		lambda = (x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry)
+	if (lambda > 1) {
+		rx *= Math.sqrt(lambda)
+		ry *= Math.sqrt(lambda)
+	}
+	const num = rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1,
+		den = rx * rx * y1 * y1 + ry * ry * x1 * x1
+	const coef = (den === 0 ? 0 : Math.sqrt(Math.max(0, num / den))) * (large === sweep ? -1 : 1)
+	const cx1 = (coef * rx * y1) / ry,
+		cy1 = (-coef * ry * x1) / rx,
+		cx = cos * cx1 - sin * cy1 + (from[0] + to[0]) / 2,
+		cy = sin * cx1 + cos * cy1 + (from[1] + to[1]) / 2
+	const theta = Math.atan2((y1 - cy1) / ry, (x1 - cx1) / rx)
+	let delta = Math.atan2((-y1 - cy1) / ry, (-x1 - cx1) / rx) - theta
+	if (sweep && delta < 0) delta += Math.PI * 2
+	else if (!sweep && delta > 0) delta -= Math.PI * 2
+	return Array.from({ length: 15 }, (_, i) => {
+		const t = theta + (delta * (i + 1)) / 16,
+			ex = rx * Math.cos(t),
+			ey = ry * Math.sin(t)
+		return [cos * ex - sin * ey + cx, sin * ex + cos * ey + cy] satisfies Point
+	})
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/gradient-pattern.ts

@@ -0,0 +1,40 @@
+import { parseColor } from "../../../core/color"
+import { splitTop } from "./appearance"
+const position = (value: string): number | null => {
+	const token = value
+		.replace(/\s/g, "")
+		.replace(/^(?:calc\()+/, "")
+		.replace(/\)+$/, "")
+	const match = /^([-+]?[\d.]+)(%|deg|grad|turn|px)?$/.exec(token)
+	if (!match) return null
+	const n = Number(match[1])
+	if (n === 0) return 0
+	return match[2] === "%" ? n / 100 : match[2] === "deg" ? n / 360 : match[2] === "grad" ? n / 400 : match[2] === "turn" ? n : null
+}
+export function repeats(value: string): boolean {
+	for (const layer of splitTop(value)) {
+		const m = /^repeating-(linear|radial)-gradient\(([\s\S]*)\)$/i.exec(layer)
+		if (!m) continue
+		const stops = splitTop(m[2] ?? ""),
+			first = splitTop(stops[0] ?? "", /\s/),
+			token = first[0] ?? ""
+		if (token.includes("var(")) return true
+		const start =
+			parseColor(token) !== null ||
+			(/^(?:transparent|currentcolor|[a-z]+)$/i.test(token) && !/^(?:circle|ellipse|to|at|in|closest|farthest)/i.test(token))
+				? 0
+				: 1
+		if (stops.length < start + 2) return true
+		if (m[1]?.toLowerCase() === "radial" && start === 1) {
+			const prelude = (stops[0] ?? "").split(/\bat\b|\bin\b/)[0] ?? ""
+			if (/closest-|farthest-side|[0-9]/.test(prelude)) return true
+		}
+		const a = splitTop(stops[start] ?? "", /\s/),
+			b = splitTop(stops.at(-1) ?? "", /\s/)
+		if (b.length === 1 && b[0]?.includes("var(")) return true
+		const zero = a[1] === undefined || position(a[1]) === 0,
+			full = b.length === 1 || position(b.at(-1) ?? "") === 1
+		if (!(zero && full)) return true
+	}
+	return false
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/keyframes.ts

@@ -0,0 +1,134 @@
+import type { ComputedStyle, PageSnapshot } from "../../../types"
+import { splitTop } from "./appearance"
+export type Frame = Readonly<Record<string, string>>
+export type KeyframeStep = { readonly key: string; readonly declarations: Frame }
+export function keyframeSteps(s: PageSnapshot, name: string): readonly KeyframeStep[] | null {
+	const frames: KeyframeStep[] = []
+	let found = false
+	for (const css of s.cssText) {
+		const text = css.replace(/\/\*[\s\S]*?\*\//g, "")
+		for (const m of text.matchAll(/@(?:-webkit-)?keyframes\s+([\w-]+)\s*\{/g)) {
+			if (m[1] !== name) continue
+			found = true
+			let end = (m.index ?? 0) + m[0].length,
+				depth = 1
+			const start = end
+			while (end < text.length && depth > 0) {
+				if (text[end] === "{") depth++
+				if (text[end] === "}") depth--
+				end++
+			}
+			for (const step of text.slice(start, end - 1).matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+				const entries = (step[2] ?? "").split(";").flatMap((d) => {
+					const i = d.indexOf(":")
+					return i < 0 ? [] : [[d.slice(0, i).trim().toLowerCase(), d.slice(i + 1).trim()]]
+				})
+				frames.push({ key: (step[1] ?? "").trim(), declarations: Object.fromEntries(entries) })
+			}
+		}
+	}
+	return found ? frames : null
+}
+export function keyframes(s: PageSnapshot, name: string): readonly Frame[] | null {
+	return keyframeSteps(s, name)?.map(step => step.declarations) ?? null
+}
+export function infiniteNames(style: ComputedStyle): readonly string[] {
+	const iterations = splitTop(style["animation-iteration-count"] ?? "")
+	return splitTop(style["animation-name"] ?? "").filter((n, i) => n !== "none" && iterations[i % iterations.length] === "infinite")
+}
+export function onlyUnitPulse(frames: readonly Frame[]): boolean {
+	return (
+		frames.length > 0 &&
+		frames.every((f) =>
+			Object.entries(f).every(([p, v]) => {
+				if (p === "opacity") return true
+				if (p === "animation-timing-function") return !/linear\(|var\(/.test(v) && !overshoot(v)
+				if (p !== "scale" && p !== "transform") return false
+				if (v === "none") return true
+				const rest = p === "scale" ? v : v.replace(/scale(?:[XYZ]|3d)?\(([^)]*)\)/gi, "$1")
+				return (
+					/^[\s,0-9.+-]+$/.test(rest) &&
+					rest
+						.split(/[\s,]+/)
+						.filter(Boolean)
+						.every((n) => Number(n) >= 0 && Number(n) <= 1)
+				)
+			}),
+		)
+	)
+}
+export const overshoot = (v: string): boolean =>
+	[...v.matchAll(/cubic-bezier\(\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*\)/g)].some((m) =>
+		[Number(m[2]), Number(m[4])].some((y) => y < -0.1 || y > 1.1),
+	)
+const scalar = (v: string): number | null => (/^[-+]?(?:\d*\.)?\d+(?:px)?$/.test(v) ? Number.parseFloat(v) : null)
+const differs = (a: string | undefined, b: string | undefined): boolean => {
+	if (a === undefined || b === undefined) return false
+	const x = scalar(a),
+		y = scalar(b)
+	return x !== null && y !== null ? Math.abs(x - y) >= 4 : a.replace(/\s/g, "") !== b.replace(/\s/g, "")
+}
+function translation(f: Frame): readonly string[] | null {
+	const t = f["transform"]
+	if (t === undefined && f["translate"] === undefined) return null
+	if (t?.includes("matrix")) return []
+	const axes = ["0", "0", "0"]
+	for (const m of (t ?? "").matchAll(/translate([XYZ]|3d)?\(([^)]*)\)/gi)) {
+		const suffix = m[1]?.toLowerCase(),
+			args = (m[2] ?? "").split(/,\s*/).map((x) => x.trim())
+		if (suffix === "x" || suffix === "y" || suffix === "z") axes[suffix === "x" ? 0 : suffix === "y" ? 1 : 2] = args[0] ?? "0"
+		else
+			args.forEach((v, i) => {
+				axes[i] = v
+			})
+	}
+	if (f["translate"])
+		f["translate"].split(/\s+/).forEach((v, i) => {
+			axes[i] = v
+		})
+	return axes
+}
+export function dotPulse(frames: readonly Frame[]): boolean {
+	const declarations = frames.flatMap((f) => Object.entries(f))
+	const scales = declarations
+		.filter(([p]) => p === "transform")
+		.flatMap(([, v]) => [...v.matchAll(/scale([XY]|3d)?\(/gi)].map((m) => m[1] ?? "both"))
+	const oneAxis =
+		scales.length > 0 &&
+		new Set(scales).size === 1 &&
+		["X", "Y", "x", "y"].includes(scales[0] ?? "") &&
+		!declarations.some(([p]) => p === "scale")
+	const signal = declarations.some(
+		([p, v]) => p === "opacity" || p === "box-shadow" || p === "scale" || (p === "transform" && /scale/i.test(v) && !oneAxis),
+	)
+	if (!signal) return false
+	const translations = frames.map(translation).filter((t): t is readonly string[] => t !== null)
+	for (const a of translations)
+		for (const b of translations)
+			for (let i = 0; i < 3; i++) {
+				const x = a[i] ?? "0",
+					y = b[i] ?? "0"
+				if (!x.includes("%") && !y.includes("%") && differs(x, y)) return false
+			}
+	const sizes = frames.filter((f) => f["height"] !== undefined)
+	if (sizes.some((f) => f["height"] !== sizes[0]?.["height"]) && sizes.every((f) => f["width"] === sizes[0]?.["width"])) return false
+	const pairs = [
+		["left", "right"],
+		["top", "bottom"],
+		["inset-inline-start", "inset-inline-end"],
+		["inset-block-start", "inset-block-end"],
+		["margin-left", "margin-right"],
+		["margin-top", "margin-bottom"],
+		["margin-inline-start", "margin-inline-end"],
+		["margin-block-start", "margin-block-end"],
+	]
+	for (const a of frames)
+		for (const b of frames) {
+			if (differs(a["width"], b["width"]) || differs(a["height"], b["height"])) continue
+			for (const [x = "", y = ""] of pairs) if (differs(a[x], b[x]) !== differs(a[y], b[y])) return false
+		}
+	return true
+}
+export const toggles = (frames: readonly Frame[]): boolean =>
+	frames.some((f) => Number(f["opacity"] ?? 1) <= 0.15 || f["visibility"] === "hidden") &&
+	frames.every((f) => Object.keys(f).every((p) => ["opacity", "visibility", "animation-timing-function"].includes(p)))

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/labels.ts

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

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/decoration/support/raster-state.ts

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

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

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

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

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