oh-my-opencode 5.1.48 → 5.1.54

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

@@ -0,0 +1,134 @@
+import { blend, TRANSPARENT, type Rgba } from "../../../core/color"
+import { px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, Rect } from "../../../types"
+import { gradientStops, splitLayers } from "./gradients"
+
+function length(value: string, size: number): number | null {
+	if (value.endsWith("%")) return Number.parseFloat(value) * size / 100
+	return px(value)
+}
+
+function position(value: string, space: number): number | null {
+	if (value === "left" || value === "top") return 0
+	if (value === "center") return space / 2
+	if (value === "right" || value === "bottom") return space
+	return length(value, space)
+}
+
+function fraction(image: string, x: number, y: number, w: number, h: number): readonly [number, number] | null {
+	const head = splitLayers(image.slice(image.indexOf("(") + 1, -1))[0] ?? ""
+	if (image.startsWith("linear-gradient(")) {
+		let angle = Math.PI
+		const degrees = /^(-?[\d.]+)deg$/.exec(head)
+		if (degrees) angle = Number(degrees[1]) * Math.PI / 180
+		else if (head.startsWith("to ")) {
+			const dx = head.includes("right") ? 1 : head.includes("left") ? -1 : 0
+			const dy = head.includes("bottom") ? 1 : head.includes("top") ? -1 : 0
+			if (dx === 0 && dy === 0) return null
+			angle = Math.atan2(dx * (dy === 0 ? 1 : h), -dy * (dx === 0 ? 1 : w))
+		} else if (!gradientStops(`linear-gradient(${head})`).length) return null
+		const span = Math.abs(w * Math.sin(angle)) + Math.abs(h * Math.cos(angle))
+		return [((x - w / 2) * Math.sin(angle) - (y - h / 2) * Math.cos(angle)) / span + 0.5, span]
+	}
+	if (!image.startsWith("radial-gradient(")) return null
+	const hasHead = gradientStops(`linear-gradient(${head})`).length === 0
+	const [size = "", at = "50% 50%"] = hasHead ? head.split(/\s+at\s+/) : []
+	const center = at.split(/\s+/)
+	const cx = position(center[0] ?? "50%", w)
+	const cy = position(center[1] ?? "50%", h)
+	if (cx === null || cy === null) return null
+	const explicit = size.split(/\s+/).filter((s) => /^[-\d.]+(?:px|%)$/.test(s))
+	let rx = length(explicit[0] ?? "", w)
+	let ry = length(explicit[1] ?? explicit[0] ?? "", h)
+	if (rx === null || ry === null) {
+		const close = size.includes("closest")
+		const dx = close ? Math.min(Math.abs(cx), Math.abs(w - cx)) : Math.max(Math.abs(cx), Math.abs(w - cx))
+		const dy = close ? Math.min(Math.abs(cy), Math.abs(h - cy)) : Math.max(Math.abs(cy), Math.abs(h - cy))
+		const side = size.includes("side")
+		if (size.includes("circle")) rx = ry = side ? close ? Math.min(dx, dy) : Math.max(dx, dy) : Math.hypot(dx, dy)
+		else {
+			rx = dx * (side ? 1 : Math.SQRT2)
+			ry = dy * (side ? 1 : Math.SQRT2)
+		}
+	}
+	return rx > 0 && ry > 0 ? [Math.hypot((x - cx) / rx, (y - cy) / ry), rx] : null
+}
+
+function colorAt(image: string, x: number, y: number, w: number, h: number): Rgba | null {
+	const sample = fraction(image, x, y, w, h)
+	const stops = gradientStops(image)
+	if (!sample || stops.length < 2) return null
+	const [t, span] = sample
+	const positions = stops.map((stop) => {
+		const token = /(-?[\d.]+)(%|px)\s*$/.exec(stop.raw)
+		return token ? Number(token[1]) / (token[2] === "%" ? 100 : span) : null
+	})
+	positions[0] ??= 0
+	positions[positions.length - 1] ??= 1
+	let last = 0
+	for (let i = 1; i < positions.length; i++) {
+		const end = positions[i]
+		if (end === null || end === undefined) continue
+		const start = positions[last] ?? 0
+		const edge = Math.max(start, end)
+		for (let j = last + 1; j <= i; j++) positions[j] = start + (edge - start) * (j - last) / (i - last)
+		last = i
+	}
+	let upper = positions.findIndex((p) => p !== null && t <= p)
+	if (upper < 0) upper = stops.length - 1
+	if (upper === 0) return stops[0]?.color ?? null
+	const a = stops[upper - 1]?.color
+	const b = stops[upper]?.color
+	if (!a || !b) return null
+	const start = positions[upper - 1] ?? 0
+	const end = positions[upper] ?? 1
+	const f = end === start ? 1 : Math.max(0, Math.min(1, (t - start) / (end - start)))
+	const alpha = a.a * (1 - f) + b.a * f
+	if (alpha === 0) return TRANSPARENT
+	const mix = (v: number, u: number): number => (v * a.a * (1 - f) + u * b.a * f) / alpha
+	return { r: mix(a.r, b.r), g: mix(a.g, b.g), b: mix(a.b, b.b), a: alpha }
+}
+
+/** Samples supported gradient tiles at the upstream text-box grid; null leaves the stop fallback in charge. */
+export function gradientSamples(el: ElementSnapshot, text: Rect): readonly Rgba[] | null {
+	const images = splitLayers(styleOf(el, "background-image"))
+	if (images.some((image) => !/^(?:linear|radial)-gradient\(/.test(image))) return null
+	const border = ["top", "right", "bottom", "left"].map((side) => px(styleOf(el, `border-${side}-width`)) ?? 0)
+	const w = el.rect.width - (border[1] ?? 0) - (border[3] ?? 0)
+	const h = el.rect.height - (border[0] ?? 0) - (border[2] ?? 0)
+	if (w <= 0 || h <= 0) return null
+	const sizes = splitLayers(styleOf(el, "background-size"))
+	const positions = splitLayers(styleOf(el, "background-position"))
+	const repeats = splitLayers(styleOf(el, "background-repeat"))
+	const inset = Math.min(1, text.width / 4)
+	const xs = [inset, text.width / 6, text.width / 2, text.width * 5 / 6, text.width - inset]
+	const colors: Rgba[] = []
+	for (const fy of [1 / 6, 0.5, 5 / 6]) for (const fx of xs) {
+		let paint = TRANSPARENT
+		for (let i = images.length - 1; i >= 0; i--) {
+			const image = images[i]
+			if (!image) continue
+			const size = (sizes[i % sizes.length] ?? "auto").split(/\s+/)
+			const tw = size[0] === "auto" ? w : length(size[0] ?? "100%", w)
+			const th = !size[1] || size[1] === "auto" ? h : length(size[1], h)
+			if (tw === null || th === null) return null
+			if (tw <= 0 || th <= 0) continue
+			const pos = (positions[i % positions.length] ?? "0% 0%").split(/\s+/)
+			const tx = position(pos[0] ?? "0%", w - tw)
+			const ty = position(pos[1] ?? "50%", h - th)
+			if (tx === null || ty === null) return null
+			let x = text.x + fx - el.rect.x - (border[3] ?? 0) - tx
+			let y = text.y + text.height * fy - el.rect.y - (border[0] ?? 0) - ty
+			const repeat = repeats[i % repeats.length] ?? "repeat"
+			if (repeat === "repeat" || repeat === "repeat-x") x = ((x % tw) + tw) % tw
+			else if (x < 0 || x > tw) continue
+			if (repeat === "repeat" || repeat === "repeat-y") y = ((y % th) + th) % th
+			else if (y < 0 || y > th) continue
+			const color = colorAt(image, x, y, tw, th)
+			if (!color) return null
+			paint = blend(color, paint)
+		}
+		colors.push(paint)
+	}
+	return colors
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/gradients.ts

@@ -0,0 +1,91 @@
+import { blend, parseColor, TRANSPARENT, WHITE, type Rgba } from "../../../core/color"
+import { ancestors, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export function splitLayers(value: string): readonly string[] {
+	const parts: string[] = []
+	let depth = 0
+	let start = 0
+	for (let i = 0; i < value.length; i++) {
+		if (value[i] === "(") depth++
+		if (value[i] === ")") depth--
+		if (value[i] === "," && depth === 0) {
+			parts.push(value.slice(start, i).trim())
+			start = i + 1
+		}
+	}
+	parts.push(value.slice(start).trim())
+	return parts.filter(Boolean)
+}
+
+export type Stop = { readonly color: Rgba; readonly position: number | null; readonly raw: string }
+
+export function gradientStops(value: string): readonly Stop[] {
+	const out: Stop[] = []
+	for (const layer of splitLayers(value)) {
+		if (!/gradient\(/i.test(layer)) continue
+		for (const raw of splitLayers(layer.slice(layer.indexOf("(") + 1, -1))) {
+			const match = /^(rgba?|color|oklab|oklch)\([^()]*\)|^#[0-9a-f]{3,8}\b|^transparent\b|^(white|black)\b/i.exec(raw)
+			if (!match) continue
+			const literal = match[0].toLowerCase()
+			const color = literal === "white" ? WHITE : literal === "black" ? { r: 0, g: 0, b: 0, a: 1 } : parseColor(literal)
+			if (!color) continue
+			const position = /(-?\d*\.?\d+)%/.exec(raw.slice(match[0].length))
+			out.push({ color, raw, position: position ? Number(position[1]) / 100 : null })
+		}
+	}
+	return out
+}
+
+export const spread = (c: Rgba): number => Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b)
+export const colorDistance = (a: Rgba, b: Rgba): number => Math.max(Math.abs(a.r - b.r), Math.abs(a.g - b.g), Math.abs(a.b - b.b))
+export const sameColor = (a: Rgba, b: Rgba): boolean => colorDistance(a, b) < 12 && Math.abs(a.a - b.a) * 255 < 12
+export const opacity = (el: ElementSnapshot): number => {
+	const n = Number.parseFloat(styleOf(el, "opacity"))
+	return Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : 1
+}
+export const effectiveOpacity = (snapshot: PageSnapshot, el: ElementSnapshot): number =>
+	[el, ...ancestors(snapshot, el)].reduce((v, node) => v * opacity(node), 1)
+
+function meanGradient(value: string): Rgba | null {
+	const stops = gradientStops(value)
+	const total = stops.reduce((n, s) => n + s.color.a, 0)
+	if (stops.length === 0) return null
+	if (total === 0) return TRANSPARENT
+	return {
+		r: stops.reduce((n, s) => n + s.color.r * s.color.a, 0) / total,
+		g: stops.reduce((n, s) => n + s.color.g * s.color.a, 0) / total,
+		b: stops.reduce((n, s) => n + s.color.b * s.color.a, 0) / total,
+		a: total / stops.length,
+	}
+}
+
+export function backdrop(snapshot: PageSnapshot, el: ElementSnapshot, ownImage = styleOf(el, "background-image")): Rgba | null {
+	const paints: Rgba[] = []
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		const image = node === el ? ownImage : styleOf(node, "background-image")
+		for (const layer of splitLayers(image)) {
+			if (layer.includes("url(")) return null
+			const mean = meanGradient(layer)
+			if (mean) {
+				paints.push(mean)
+				if (mean.a >= 0.99) return paints.reduceRight((under, top) => blend(top, under), WHITE)
+			}
+		}
+		const fill = parseColor(styleOf(node, "background-color"))
+		if (fill) {
+			paints.push(fill)
+			if (fill.a >= 0.99) break
+		}
+	}
+	return paints.reduceRight((under, top) => blend(top, under), WHITE)
+}
+
+export function oklch(c: Rgba): { readonly l: number; readonly c: number } {
+	const linear = (v: number): number => v / 255 <= 0.04045 ? v / 255 / 12.92 : ((v / 255 + 0.055) / 1.055) ** 2.4
+	const [r, g, b] = [linear(c.r), linear(c.g), linear(c.b)]
+	const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+	const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+	const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+	return { l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, c: Math.hypot(1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s) }
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/mockup-roots.ts

@@ -0,0 +1,63 @@
+import { ancestors, childrenOf, descendants, isRendered, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+const skippedTags = new Set(["html", "body", "main", "header", "footer", "nav", "aside", "section", "article", "form", "dialog", "li", "tr", "td", "th", "tbody", "thead", "table", "details", "summary"])
+const textTags = new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "button", "label", "summary", "legend", "caption", "figcaption", "blockquote", "q"])
+const skippedParts = new Set([
+	"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",
+])
+const hidden = (el: ElementSnapshot): boolean => el.attributes["inert"] !== undefined || el.attributes["aria-hidden"]?.trim().toLowerCase() === "true"
+const squash = (text: string): string => text.replace(/\s/g, "")
+const dialog = (el: ElementSnapshot): boolean => el.attributes["aria-modal"] === "true" || /^(?:alert)?dialog$/.test(el.attributes["role"] ?? "")
+	|| (el.tag === "dialog" && el.attributes["open"] !== undefined)
+
+function structural(el: ElementSnapshot): boolean {
+	if (skippedTags.has(el.tag) || el.attributes["aria-modal"] !== undefined || el.attributes["data-aria-hidden"] !== undefined
+		|| ["fixed", "sticky"].includes(styleOf(el, "position"))) return false
+	const roles = (el.attributes["role"] ?? "").trim().toLowerCase().split(/\s+/).filter(Boolean)
+	if (!roles.every((role) => ["presentation", "none", "img", "figure", "group"].includes(role))) return false
+	const parts = [el.attributes["class"], el.attributes["id"]].join(" ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+	return !parts.some((part) => skippedParts.has(part))
+}
+
+function hasPeer(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const text = squash(el.text)
+	if (text && ancestors(snapshot, el).some((node) => squash(node.attributes["aria-label"] ?? "").includes(text))) return true
+	const parent = el.parent === null ? undefined : snapshot.elements[el.parent]
+	if (!parent) return false
+	const classes = (el.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+	return childrenOf(snapshot, parent).some((peer) => {
+		if (peer === el) return false
+		const same = peer.tag === el.tag && classes.every((c) => (peer.attributes["class"] ?? "").split(/\s+/).includes(c))
+			&& (classes.length === 0) === ((peer.attributes["class"] ?? "").trim() === "")
+		if (same && isRendered(snapshot, peer) && !hidden(peer)) return true
+		if (text && squash(peer.text) === text) return true
+		const picture = /\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)
+		return !hidden(peer) && isRendered(snapshot, peer) && peer.text.trim() !== "" && !picture && (peer.rect.width <= 1 || peer.rect.height <= 1)
+	})
+}
+
+export function mockupRoots(snapshot: PageSnapshot): ReadonlyMap<number, "declared" | "labelled"> {
+	const roots = new Map<number, "declared" | "labelled">()
+	const pageChars = snapshot.elements.filter((el) => isRendered(snapshot, el)).reduce((sum, el) => sum + squash(el.ownText).length, 0)
+	const modals = snapshot.elements.filter((el) => dialog(el) && !hidden(el) && isRendered(snapshot, el))
+	for (const el of snapshot.elements) {
+		if (el.rect.width < 120 || el.rect.height < 80 || !structural(el)) continue
+		if (/\b(?:screen ?shots?|screen ?captures?|screencaps?|illustrations?|mock-?ups?)\b|\bpreview of\b/i.test(el.attributes["aria-label"] ?? "")) {
+			roots.set(el.index, "labelled")
+		}
+		if (!hidden(el) || ancestors(snapshot, el).some((node) => textTags.has(node.tag))) continue
+		const nodes = [el, ...descendants(snapshot, el)]
+		if (nodes.length > 3000 || nodes.some((node) => node.tag === "h1")) continue
+		const fields = nodes.filter((node) => ["input", "select", "textarea"].includes(node.tag) && node.attributes["type"] !== "hidden").length
+		const runs = nodes.filter((node) => isRendered(snapshot, node) && node.ownText.trim() !== "")
+		const links = runs.filter((node) => [node, ...ancestors(snapshot, node)].some((host) => nodes.includes(host) && host.tag === "a" && (host.attributes["href"] ?? "").trim() !== "")).length
+		if (runs.length < 3 || fields >= 2 || (fields >= 1 && nodes.some((node) => node.tag === "label")) || links * 2 >= runs.length || hasPeer(snapshot, el)) continue
+		if (modals.some((modal) => !nodes.includes(modal) && ![...ancestors(snapshot, el)].includes(modal))) continue
+		const chars = runs.reduce((sum, node) => sum + squash(node.ownText).length, 0)
+		if (pageChars > 0 && chars * 2 < pageChars) roots.set(el.index, "declared")
+	}
+	return roots
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/page-ignore.ts

@@ -0,0 +1,7 @@
+import { ancestors, IGNORE_ATTRIBUTES, isIgnored } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export function pageIgnored(snapshot: PageSnapshot, el: ElementSnapshot, rule: string): boolean {
+	return isIgnored(snapshot, el, rule) || [el, ...ancestors(snapshot, el)].some((node) =>
+		IGNORE_ATTRIBUTES.some((name) => (node.attributes[name] ?? "").split(/[\s,]+/).includes("*")))
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/painted-text.ts

@@ -0,0 +1,141 @@
+import { ancestors, childrenOf, isRendered, px, styleOf } from "../../../core/page"
+import type { ComputedStyle, ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { effectiveOpacity, gradientStops, opacity } from "./gradients"
+import { textOpacity } from "./animation-opacity"
+
+export function contains(outer: Rect, inner: Rect): boolean {
+	return inner.x >= outer.x - 1 && inner.y >= outer.y - 1 && inner.x + inner.width <= outer.x + outer.width + 1 && inner.y + inner.height <= outer.y + outer.height + 1
+}
+
+export function textRect(el: ElementSnapshot): Rect {
+	if (el.lineRects.length === 0) return el.rect
+	const x = Math.min(...el.lineRects.map((r) => r.x))
+	const y = Math.min(...el.lineRects.map((r) => r.y))
+	return {
+		x, y,
+		width: Math.max(...el.lineRects.map((r) => r.x + r.width)) - x,
+		height: Math.max(...el.lineRects.map((r) => r.y + r.height)) - y,
+	}
+}
+
+const zIndex = (el: ElementSnapshot): number => Number.parseFloat(styleOf(el, "z-index")) || 0
+
+function coveredBySibling(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const rect = textRect(el)
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		const parent = node.parent === null ? undefined : snapshot.elements[node.parent]
+		if (!parent) continue
+		for (const sibling of childrenOf(snapshot, parent)) {
+			if (sibling === node || !isRendered(snapshot, sibling) || effectiveOpacity(snapshot, sibling) < 0.99 || !contains(sibling.rect, rect)) continue
+			if (!["absolute", "fixed"].includes(styleOf(sibling, "position")) && styleOf(sibling, "z-index") === "auto") continue
+			if (zIndex(sibling) < zIndex(node) || (zIndex(sibling) === zIndex(node) && sibling.index < node.index)) continue
+			const bg = sibling.style["background-color"] ?? ""
+			const alpha = /rgba\([^)]*,\s*([\d.]+)\s*\)/.exec(bg)
+			const solid = bg.startsWith("rgb(") || bg.startsWith("#") || (alpha !== null && Number(alpha[1]) >= 0.99)
+			if (solid || ["img", "video", "canvas"].includes(sibling.tag)) return true
+		}
+	}
+	return false
+}
+
+function maskHides(node: ElementSnapshot, rect: Rect): boolean {
+	const mask = styleOf(node, "mask-image") || styleOf(node, "-webkit-mask-image")
+	if (!mask.includes("linear-gradient")) return false
+	const stops = gradientStops(mask)
+	const last = stops.at(-1)
+	if (!last || last.color.a > 0.02) return false
+	const terminal = /([\d.]+)(px|%)(?:\s*\))?$/.exec(last.raw)
+	if (!terminal) return false
+	const edge = Number(terminal[1]) * (terminal[2] === "%" ? node.rect.height / 100 : 1)
+	return rect.y >= node.rect.y + edge
+}
+
+function scrollFrame(snapshot: PageSnapshot, node: ElementSnapshot): boolean {
+	const r = node.rect
+	if (styleOf(node, "position") === "fixed" && r.x <= 1 && r.y <= 1
+		&& r.x + r.width >= snapshot.viewport.width - 1 && r.y + r.height >= snapshot.viewport.height - 1) return true
+	if (r.height < snapshot.viewport.height - 1 || node.scroll.scrollHeight <= node.scroll.clientHeight + 1) return false
+	const max = px(styleOf(node, "max-height"))
+	if (max !== null && max > snapshot.viewport.height + 1 && Math.abs(r.height - max) <= 1) return false
+	const stack = [...childrenOf(snapshot, node)]
+	let read = 0
+	while (stack.length > 0) {
+		const child = stack.pop()
+		if (!child) break
+		if (++read > 2000) return true
+		const position = styleOf(child, "position")
+		if (position === "fixed") continue
+		if (position === "absolute" && child.rect.height < r.height / 2) continue
+		if (child.rect.y + child.rect.height > r.y + r.height + 1) return true
+		stack.push(...childrenOf(snapshot, child))
+	}
+	return node.ownText.trim() !== ""
+}
+
+export function textWhole(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const rect = textRect(el)
+	if (el.rect.x < -1 || el.rect.x + el.rect.width > snapshot.viewport.width + 1) return false
+	return ancestors(snapshot, el).every((node) => !["hidden", "clip", "auto", "scroll"].includes(styleOf(node, "overflow-x"))
+		|| (rect.x >= node.rect.x - 1 && rect.x + rect.width <= node.rect.x + node.rect.width + 1))
+}
+
+export function textPainted(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	if (el.rect.width <= 0 || el.rect.height <= 0 || textOpacity(snapshot, el) <= 0.02) return false
+	const rect = textRect(el)
+	if ([el, ...ancestors(snapshot, el)].some((node) => styleOf(node, "position") === "fixed")
+		&& (rect.x >= snapshot.viewport.width || rect.x + rect.width <= 0)) return false
+	let left = rect.x
+	let right = rect.x + rect.width
+	const viewportFrame = [el, ...ancestors(snapshot, el)].some((node) => styleOf(node, "position") === "fixed"
+		&& node.rect.x <= 1 && node.rect.y <= 1 && node.rect.width >= snapshot.viewport.width - 1 && node.rect.height >= snapshot.viewport.height - 1)
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		if (["hidden", "collapse"].includes(styleOf(node, "visibility")) || styleOf(node, "display") === "none") return false
+		if (node.attributes["hidden"] === "until-found" || (node.tag === "details" && node.attributes["open"] === undefined
+			&& node !== el && ![el, ...ancestors(snapshot, el)].some((child) => child.tag === "summary" && child.parent === node.index))) return false
+		if (node.rect.width <= 1 && node.rect.height <= 1 && styleOf(node, "overflow-x") === "hidden") return false
+		const r = node.rect
+		if (["hidden", "clip", "auto", "scroll"].includes(styleOf(node, "overflow-x"))) {
+			left = Math.max(left, r.x)
+			right = Math.min(right, r.x + r.width)
+			const inside = [el, ...ancestors(snapshot, el)].slice(0, [el, ...ancestors(snapshot, el)].indexOf(node))
+			const parks = r.width < snapshot.viewport.width - 1 || ["auto", "scroll"].includes(styleOf(node, "overflow-x"))
+				|| inside.some((child) => !["", "none"].includes(styleOf(child, "transform")))
+			if (right <= left || (parks && styleOf(node, "text-overflow") !== "ellipsis" && (right - left) / rect.width < 0.25)) return false
+		}
+		if (["hidden", "clip"].includes(styleOf(node, "overflow-y")) && !(node.tag === "body" && viewportFrame) && !scrollFrame(snapshot, node)
+			&& (rect.y >= r.y + r.height || rect.y + rect.height <= r.y)) return false
+		if (maskHides(node, rect)) return false
+	}
+	return !coveredBySibling(snapshot, el)
+}
+
+export function pseudoCovers(style: ComputedStyle, host: ElementSnapshot, rect: Rect): boolean {
+	if (style["display"] === "none" || ["hidden", "collapse"].includes(style["visibility"] ?? "") || Number.parseFloat(style["opacity"] ?? "1") < 0.9) return false
+	if (style["content"] === "none" || style["content"] === "normal") return false
+	const length = (value: string | undefined, size: number, fallback: number): number => value?.endsWith("%") ? Number.parseFloat(value) * size / 100 : px(value) ?? fallback
+	const width = length(style["width"], host.rect.width, host.rect.width)
+	const height = length(style["height"], host.rect.height, host.rect.height)
+	let x = host.rect.x + length(style["left"], host.rect.width, 0)
+	let y = host.rect.y + length(style["top"], host.rect.height, 0)
+	const matrix = /^matrix\(([^)]+)\)/.exec(style["transform"] ?? "")
+	if (matrix) {
+		const [a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0] = (matrix[1] ?? "").split(",").map(Number)
+		if (Math.abs(a) < 0.01 || Math.abs(d) < 0.01) return false
+		x += tx
+		y += ty
+		if (b !== 0 && c === 0) {
+			const conservativeEdge = y + height + Math.min(0, b * width)
+			if (rect.y + rect.height > conservativeEdge) return false
+		}
+	}
+	if (style["scale"]?.startsWith("0")) return false
+	return contains({ x, y, width, height }, rect)
+}
+
+export function siblingGrounds(snapshot: PageSnapshot, node: ElementSnapshot, rect: Rect): readonly ElementSnapshot[] {
+	const parent = node.parent === null ? undefined : snapshot.elements[node.parent]
+	if (!parent) return []
+	return childrenOf(snapshot, parent).filter((sib) =>
+		sib !== node && sib.index < node.index && zIndex(sib) <= zIndex(node) && isRendered(snapshot, sib) && opacity(sib) > 0 && contains(sib.rect, rect),
+	).sort((a, b) => zIndex(b) - zIndex(a) || b.index - a.index)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/palette-roles.ts

@@ -0,0 +1,58 @@
+import { parseColor, toHsl, type Rgba } from "../../../core/color"
+import { ancestors, fontSizePx, isHeading, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { gradientStops, spread } from "./gradients"
+
+export const tellHue = (c: Rgba): "cyan" | "purple" | null => {
+	const { h, s } = toHsl(c)
+	return h >= 260 && h <= 310 ? "purple" : h >= 170 && h <= 197 && s >= 0.4 ? "cyan" : null
+}
+
+export function paletteVisible(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	return el.rect.width > 0 && el.rect.height > 0 && [el, ...ancestors(snapshot, el)].every((node) =>
+		styleOf(node, "display") !== "none" && !["hidden", "collapse"].includes(styleOf(node, "visibility")))
+}
+
+function roleKey(el: ElementSnapshot, fill: boolean): string {
+	return fill ? `${el.tag}|${Math.round(el.rect.width)}x${Math.round(el.rect.height)}` : `${el.tag}|${fontSizePx(el)}|${styleOf(el, "font-weight")}`
+}
+
+export function categoryColor(snapshot: PageSnapshot, el: ElementSnapshot, fill: boolean): boolean {
+	const hues: number[] = []
+	for (const other of snapshot.elements) {
+		if (!paletteVisible(snapshot, other) || roleKey(other, fill) !== roleKey(el, fill)) continue
+		const color = fill
+			? gradientStops(styleOf(other, "background-image")).find((s) => s.color.a > 0.1 && spread(s.color) > 50)?.color
+			: parseColor(styleOf(other, "color"))
+		if (color && spread(color) > 50 && (fill || color.a >= 0.5)) hues.push(toHsl(color).h)
+	}
+	const distinct: number[] = []
+	for (const h of hues.sort((a, b) => a - b)) if (h - (distinct.at(-1) ?? -360) >= 5) distinct.push(h)
+	if (distinct.length > 1 && (distinct[0] ?? 0) + 360 - (distinct.at(-1) ?? 0) < 5) distinct.pop()
+	const outside = distinct.filter((h) => !(h >= 260 && h <= 310) && !(h >= 170 && h <= 197)).length
+	return distinct.length >= 6 && outside * 2 >= distinct.length
+}
+
+export function brandColor(snapshot: PageSnapshot, ink: Rgba): boolean {
+	return snapshot.elements.some((el) => {
+		if (!paletteVisible(snapshot, el)) return false
+		const local = [...ancestors(snapshot, el)].some((a) => a.tag === "main" || a.tag === "article")
+		const name = [el.attributes["id"], el.attributes["class"], el.attributes["aria-label"], el.attributes["alt"]].join(" ").toLowerCase()
+		const namedLogo = /(?:^|[\s_-])(logo|wordmark|logotype)(?:$|[\s_-])/.test(name) && !/(logos|gallery|grid|wall|list|strip|row|carousel|cloud|title|heading|section)/.test(name)
+		if (isHeading(el) && !namedLogo) return false
+		const logo = !local && namedLogo
+		const bar = !local && (["nav", "header"].includes(el.tag) || ["navigation", "banner"].includes(el.attributes["role"] ?? "")) && el.rect.width >= snapshot.viewport.width * 0.5
+		const band = el.rect.width >= snapshot.viewport.width * 0.9 && el.rect.width * el.rect.height >= snapshot.viewport.width * snapshot.viewport.height * 0.2
+		if (!logo && !bar && !band) return false
+		const colors = gradientStops(styleOf(el, "background-image")).length === 0 ? [parseColor(styleOf(el, "background-color"))] : []
+		if (logo) {
+			const text = el.ownText ? el : snapshot.elements.find((node) => node.ownText && [...ancestors(snapshot, node)].some((a) => a.index === el.index))
+			if (text) colors.push(parseColor(styleOf(text, "color")))
+		}
+		return colors.some((c) => {
+			if (!c || c.a < 0.9 || spread(c) <= 50) return false
+			const delta = Math.abs(toHsl(c).h - toHsl(ink).h)
+			return Math.min(delta, 360 - delta) <= 12
+		})
+	})
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/placeholder-contrast.ts

@@ -0,0 +1,25 @@
+import { blend, contrastRatio, parseColor } from "../../../core/color"
+import { ancestors, fontSizePx, styleOf } from "../../../core/page"
+import type { PageHit } from "../../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { textPainted } from "./painted-text"
+import { textBackgrounds } from "./text-colors"
+
+export function placeholderContrast(snapshot: PageSnapshot, el: ElementSnapshot): readonly PageHit[] {
+	const text = (el.attributes["placeholder"] ?? "").trim()
+	if (!["input", "textarea"].includes(el.tag) || !el.placeholder || !text || !textPainted(snapshot, el)) return []
+	if ([el, ...ancestors(snapshot, el)].some((node) => node.attributes["disabled"] !== undefined || node.attributes["aria-disabled"] === "true")) return []
+	if (el.tag === "input" && ["hidden", "checkbox", "radio", "file", "submit", "button", "image", "reset", "range", "color"].includes((el.attributes["type"] ?? "text").toLowerCase())) return []
+	const ink = parseColor(el.placeholder.style["color"] ?? "")
+	if (!ink || ink.a <= 0.02) return []
+	const backgrounds = textBackgrounds(snapshot, el)
+	if (backgrounds.length === 0) return []
+	const size = fontSizePx(el)
+	if (size <= 0) return []
+	const words = (styleOf(el, "font-family").split(",")[0] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+	const namedBold = words.some((word) => ["bold", "semibold", "demibold", "extrabold", "ultrabold", "heavy", "black"].includes(word))
+	const weight = namedBold ? Math.max(700, Number.parseFloat(styleOf(el, "font-weight")) || 400) : Number.parseFloat(styleOf(el, "font-weight"))
+	const threshold = size >= 24 || (size >= 18.66 && weight >= 700) ? 3 : 4.5
+	const ratio = Math.min(...backgrounds.map((background) => contrastRatio(blend(ink, background), background)))
+	return ratio < threshold ? [{ element: el, message: `Placeholder contrast ${ratio.toFixed(2)}:1; needs ${threshold}:1`, snippet: text }] : []
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/stock-accent.ts

@@ -0,0 +1,31 @@
+import { parseColor, type Rgba } from "../../../core/color"
+import { px, styleOf } from "../../../core/page"
+import { parseShadow } from "../../../core/shadow"
+import { cssBlocks } from "../../../core/source"
+import type { PageSnapshot } from "../../../types"
+import { matchesSelector } from "../../decoration/support/css-candidates"
+import { colorDistance, gradientStops } from "./gradients"
+import { paletteVisible } from "./palette-roles"
+
+const colors = ["#7c3aed", "#8b5cf6", "#a855f7", "#9333ea", "#7e22ce", "#6d28d9", "#6366f1", "#764ba2", "#667eea"]
+	.map(parseColor).filter((color) => color !== null)
+const stock = (color: Rgba | null): boolean => color !== null && color.a > 0.1 && colors.some((c) => colorDistance(c, color) <= 8)
+
+export function stockAccent(snapshot: PageSnapshot): boolean {
+	const trigger = /(?:^|;)\s*color\s*:[^;]*#(?:7c3aed|8b5cf6|a855f7|9333ea|7e22ce|6d28d9)\b|gradient[^;]*#(?:7c3aed|8b5cf6|a855f7|764ba2|667eea)\b/i
+	const declared = snapshot.elements.some((el) => trigger.test(el.attributes["style"] ?? "") && paletteVisible(snapshot, el))
+		|| snapshot.cssText.some((css) => cssBlocks(css).some((block) =>
+		trigger.test(block.body) && block.selector.split(",").some((selector) =>
+			snapshot.elements.some((el) => matchesSelector(snapshot, el, selector.trim()) && paletteVisible(snapshot, el)))))
+	if (!declared) return false
+	return snapshot.elements.some((el) => {
+		if (!paletteVisible(snapshot, el)) return false
+		if (el.ownText.trim() && stock(parseColor(styleOf(el, "color")))) return true
+		if (stock(parseColor(styleOf(el, "background-color"))) || gradientStops(styleOf(el, "background-image")).some((s) => stock(s.color))) return true
+		for (const side of ["top", "right", "bottom", "left"]) {
+			if ((px(styleOf(el, `border-${side}-width`)) ?? 0) > 0 && !["none", "hidden"].includes(styleOf(el, `border-${side}-style`)) && stock(parseColor(styleOf(el, `border-${side}-color`)))) return true
+		}
+		if ((px(styleOf(el, "outline-width")) ?? 0) > 0 && !["", "none"].includes(styleOf(el, "outline-style")) && stock(parseColor(styleOf(el, "outline-color")))) return true
+		return parseShadow(styleOf(el, "box-shadow")).some((s) => stock(s.color) && [s.x, s.y, s.blur, s.spread].some((n) => n !== 0))
+	})
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/support/text-colors.ts

@@ -0,0 +1,80 @@
+import { blend, parseColor, WHITE, type Rgba } from "../../../core/color"
+import { ancestors, fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { effectiveOpacity, gradientStops } from "./gradients"
+import { gradientSamples } from "./gradient-samples"
+import { contains, pseudoCovers, siblingGrounds, textPainted, textRect } from "./painted-text"
+import { textOpacity } from "./animation-opacity"
+
+export const clipsText = (el: ElementSnapshot): boolean =>
+	[styleOf(el, "background-clip"), styleOf(el, "-webkit-background-clip")].some((v) => v.split(",").some((s) => s.trim() === "text"))
+
+export function textInk(snapshot: PageSnapshot, el: ElementSnapshot): Rgba | null {
+	if (!textPainted(snapshot, el) || !/[\p{L}\p{N}]/u.test(el.ownText)) return null
+	if (fontSizePx(el) <= 0 || [el, ...ancestors(snapshot, el)].some((node) => ["video", "audio", "canvas", "iframe"].includes(node.tag))) return null
+	if (["script", "style", "title", "option", "noscript", "template"].includes(el.tag)) return null
+	const fill = styleOf(el, "-webkit-text-fill-color")
+	const color = parseColor(fill || styleOf(el, "color"))
+	if (!color || color.a <= 0.02) return null
+	return { ...color, a: color.a * textOpacity(snapshot, el) }
+}
+
+export function textBackgrounds(snapshot: PageSnapshot, el: ElementSnapshot): readonly Rgba[] {
+	const layers: Rgba[] = []
+	const rect = textRect(el)
+	const nodes = [el, ...ancestors(snapshot, el)].flatMap((node) => [node, ...siblingGrounds(snapshot, node, rect)])
+	for (const node of nodes) {
+		if (["img", "video", "canvas"].includes(node.tag)) return []
+		const paired = node.before && node.after && contains(node.rect, rect)
+			&& node.before.style["background-color"] === node.after.style["background-color"]
+			&& node.before.style["background-image"] === node.after.style["background-image"]
+			&& [node.before, node.after].every((p) => Number.parseFloat(p.style["opacity"] ?? "1") >= 0.9)
+		for (const pseudo of [node.after, node.before]) {
+			if (!pseudo || (!paired && !pseudoCovers(pseudo.style, node, rect))) continue
+			const hostFill = parseColor(styleOf(node, "background-color"))
+			if (Number.parseFloat(pseudo.style["z-index"] ?? "") < 0 && styleOf(node, "z-index") === "auto" && (hostFill?.a ?? 0) >= 1) continue
+			const fill = parseColor(pseudo.style["background-color"] ?? "")
+			const stops = gradientStops(pseudo.style["background-image"] ?? "")
+			if (stops.length > 0 && fill && fill.a >= 0.9) {
+				return stops.map((s) => layers.reduceRight((under, top) => blend(top, under), blend(s.color, fill)))
+			}
+			if (fill && fill.a >= 0.9) return [layers.reduceRight((under, top) => blend(top, under), fill)]
+		}
+		const image = styleOf(node, "background-image")
+		if (image.includes("url(")) return []
+		const tile = styleOf(node, "background-size").split(/\s+/)
+		const tileWidth = Number.parseFloat(tile[0] ?? "")
+		const tileHeight = Number.parseFloat(tile[1] ?? tile[0] ?? "")
+		const stops = gradientStops(image)
+		const radius = /([\d.]+)px/.exec(stops[0]?.raw ?? "")
+		const sparseDots = image.startsWith("radial-gradient(") && radius !== null && tileWidth > 0 && tileHeight > 0 && Math.PI * Number(radius[1]) ** 2 / (tileWidth * tileHeight) < 0.5 && (stops[0]?.color.a ?? 0) > 0
+		const parkedImage = tile.some((v) => /^0(?:px|%)?$/.test(v))
+		if (image.includes("gradient") && !clipsText(node) && !sparseDots && !parkedImage) {
+			const ground = solidGround(snapshot, node)
+			const samples = gradientSamples(node, rect)
+			if (samples?.every((color) => color.a < 0.005)) continue
+			return (samples ?? stops.map((s) => s.color)).map((color) => layers.reduceRight((under, top) => blend(top, under), blend(color, ground)))
+		}
+		const rawFill = styleOf(node, "background-color")
+		const fill = parseColor(rawFill)
+		if (rawFill !== "" && !fill) return []
+		if (fill && fill.a > 0) {
+			const a = fill.a * (nodes.includes(node) && ![el, ...ancestors(snapshot, el)].includes(node) ? effectiveOpacity(snapshot, node) : 1)
+			layers.push({ ...fill, a })
+			if (a >= 1) break
+		}
+	}
+	return [layers.reduceRight((under, top) => blend(top, under), WHITE)]
+}
+
+export function solidGround(snapshot: PageSnapshot, el: ElementSnapshot): Rgba {
+	const layers: Rgba[] = []
+	for (const node of [el, ...ancestors(snapshot, el)]) {
+		const c = parseColor(styleOf(node, "background-color"))
+		if (c) {
+			layers.push(c)
+			if (c.a >= 1) break
+		}
+	}
+	return layers.reduceRight((under, top) => blend(top, under), WHITE)
+}