oh-my-opencode 5.1.51 → 5.1.54

package/dist/skills/frontend/scripts/detect/rules/color/support/animation-opacity.ts

@@ -0,0 +1,78 @@
+import { ancestors, styleOf } from "../../../core/page"
+import { cssBlocks } from "../../../core/source"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { opacity } from "./gradients"
+
+function opacityFrames(snapshot: PageSnapshot, name: string): readonly { readonly at: number; readonly opacity: number }[] {
+	const frames: { at: number; opacity: number }[] = []
+	for (const css of snapshot.cssText) {
+		const marker = new RegExp(`@(?:-webkit-)?keyframes\\s+${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*\\{`).exec(css)
+		if (!marker || marker.index === undefined) continue
+		const open = marker.index + marker[0].length - 1
+		let depth = 1
+		let end = open + 1
+		for (; end < css.length && depth > 0; end++) {
+			if (css[end] === "{") depth++
+			if (css[end] === "}") depth--
+		}
+		for (const block of cssBlocks(css.slice(open + 1, end - 1))) {
+			const value = /(?:^|;)\s*opacity\s*:\s*([\d.]+)/.exec(block.body)
+			if (!value) continue
+			for (const selector of block.selector.split(",")) {
+				const at = selector.trim() === "to" ? 100 : selector.trim() === "from" ? 0 : Number.parseFloat(selector)
+				if (Number.isFinite(at)) frames.push({ at, opacity: Number(value[1]) })
+			}
+		}
+	}
+	return frames.sort((a, b) => a.at - b.at)
+}
+
+function settled(snapshot: PageSnapshot, node: ElementSnapshot): number {
+	let value = opacity(node)
+	const names = styleOf(node, "animation-name").split(",").map((n) => n.trim())
+	const entries = names.flatMap((name, index) => {
+		const frames = !name || name === "none" ? [] : opacityFrames(snapshot, name)
+		return frames.length ? [{ name, index, frames }] : []
+	})
+	const at = (property: string, index: number, missing: string): string => {
+		const list = styleOf(node, property).split(",").map((n) => n.trim())
+		return list[index % list.length] || missing
+	}
+	for (const entry of entries) {
+		const count = at("animation-iteration-count", entry.index, "1")
+		const paused = at("animation-play-state", entry.index, "running") === "paused"
+		const composition = at("animation-composition", entry.index, "replace")
+		const vanishes = entry.frames.some((frame) => frame.opacity <= 0.1)
+		if (count === "infinite" && paused && value < 0.999 && composition === "replace" && vanishes) return 0
+	}
+	if (node.motion.includes("opacity")) {
+		const entry = entries.length === 1 ? entries[0] : undefined
+		if (!entry) return 0
+		const count = Number(at("animation-iteration-count", entry.index, "1"))
+		const fill = at("animation-fill-mode", entry.index, "none")
+		const composition = at("animation-composition", entry.index, "replace")
+		const duration = at("animation-duration", entry.index, "0s")
+		const delay = at("animation-delay", entry.index, "0s")
+		const seconds = (time: string): number => /^-?[\d.]+m?s$/.test(time) ? Number.parseFloat(time) / (time.endsWith("ms") ? 1000 : 1) : Number.NaN
+		if (!["forwards", "both"].includes(fill) || composition !== "replace" || !Number.isInteger(count) || count < 1
+			|| at("animation-play-state", entry.index, "running") !== "running"
+			|| !(seconds(duration) > 0 && Math.max(0, seconds(delay)) + seconds(duration) * count <= 60)) return 0
+		const direction = at("animation-direction", entry.index, "normal")
+		if (!["normal", "reverse", "alternate", "alternate-reverse"].includes(direction)) return 0
+		const last = direction === "normal" || (direction === "alternate" && count % 2 === 1) || (direction === "alternate-reverse" && count % 2 === 0)
+		const frame = entry.frames.find((candidate) => candidate.at === (last ? 100 : 0))
+		return frame?.opacity ?? 0
+	}
+	for (const entry of entries) {
+		const final = entry.frames.at(-1)
+		const count = at("animation-iteration-count", entry.index, "1")
+		if (count === "infinite" && final?.at === 100 && final.opacity <= 0.02) return 0
+		if (styleOf(node, "animation-fill-mode") === "" && count !== "infinite" && final?.at === 100
+			&& at("animation-play-state", entry.index, "running") !== "paused") value = final.opacity
+	}
+	return value
+}
+
+export function textOpacity(snapshot: PageSnapshot, el: ElementSnapshot): number {
+	return [el, ...ancestors(snapshot, el)].reduce((value, node) => value * settled(snapshot, node), 1)
+}

package/dist/skills/frontend/scripts/detect/rules/color/support/color-path.ts

@@ -0,0 +1,15 @@
+import { parseColor } from "../../../core/color"
+import { fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot } from "../../../types"
+
+const safeTags = new Set([
+	"blockquote", "nav", "a", "input", "textarea", "select", "pre", "code", "span", "th", "td", "tr", "li", "label", "button",
+	"hr", "html", "head", "body", "script", "style", "link", "meta", "title", "br", "img", "svg", "path", "circle", "rect",
+	"line", "polyline", "polygon", "g", "defs", "use",
+])
+
+export function bareText(el: ElementSnapshot): boolean {
+	if (!safeTags.has(el.tag)) return false
+	const fill = parseColor(styleOf(el, "background-color"))
+	return !(el.ownText.trim() && fontSizePx(el) >= 9 && ((fill?.a ?? 0) > 0.5 || styleOf(el, "background-image").includes("gradient")))
+}

package/dist/skills/frontend/scripts/detect/rules/color/support/contrast-pairs.ts

@@ -0,0 +1,54 @@
+import { ancestors, isIgnored } from "../../../core/page"
+import type { PageHit } from "../../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { bareText } from "./color-path"
+import { textWhole } from "./painted-text"
+
+export type ContrastHit = PageHit & { readonly element: ElementSnapshot; readonly pair: string }
+
+const vendors = [
+	{ name: "Taboola", subtree: true, ids: ["taboola-", "internal_trc_"], prefixes: ["trc_rbox"], classes: ["trc_related_container"] },
+	{ name: "Swiper", subtree: false, ids: ["swiper-wrapper-"], prefixes: [], classes: ["swiper", "swiper-container", "swiper-wrapper", "swiper-slide"] },
+	{ name: "Slick", subtree: false, ids: [], prefixes: [], classes: ["slick-slider", "slick-list", "slick-track", "slick-slide", "slick-arrow"] },
+	{ name: "Slick", subtree: true, ids: [], prefixes: [], classes: ["slick-dots"] },
+	{ name: "SuperSlide", subtree: false, ids: [], prefixes: [], classes: ["tempWrap"] },
+	{ name: "react-fast-marquee", subtree: true, ids: [], prefixes: ["rfm-"], classes: [] },
+	{ name: "Kaltura", subtree: true, ids: [], prefixes: ["playkit-"], classes: ["kaltura-player", "kaltura-player-container"] },
+] as const
+
+function vendorOf(snapshot: PageSnapshot, el: ElementSnapshot): string | null {
+	for (const vendor of vendors) for (const node of vendor.subtree ? [el, ...ancestors(snapshot, el)] : [el]) {
+		const classes = (node.attributes["class"] ?? "").split(/\s+/)
+		if (vendor.ids.some((prefix) => (node.attributes["id"] ?? "").startsWith(prefix))
+			|| classes.some((token) => vendor.classes.some((name) => name === token) || vendor.prefixes.some((prefix) => token.startsWith(prefix)))) return vendor.name
+	}
+	return null
+}
+
+export function distinctPairs(snapshot: PageSnapshot, hits: readonly ContrastHit[]): readonly PageHit[] {
+	const groups = new Map<string, ContrastHit[]>()
+	const safeOwners = new Map<string, string | null>()
+	for (const hit of hits) {
+		if (isIgnored(snapshot, hit.element, "low-contrast")) continue
+		const vendor = vendorOf(snapshot, hit.element)
+		if (bareText(hit.element)) {
+			if (safeOwners.has(hit.pair) && safeOwners.get(hit.pair) !== vendor) continue
+			safeOwners.set(hit.pair, vendor)
+		}
+		const key = `${hit.pair}|${vendor ?? "page"}`
+		const group = groups.get(key) ?? []
+		group.push(hit)
+		groups.set(key, group)
+	}
+	return [...groups.values()].flatMap((group) => {
+		const whole = group.find((hit) => textWhole(snapshot, hit.element)) ?? group[0]
+		const owner = (whole?.element.ownText.match(/\p{L}/gu)?.length ?? 0) >= 2 ? whole
+			: group.find((hit) => textWhole(snapshot, hit.element) && (hit.element.ownText.match(/\p{L}/gu)?.length ?? 0) >= 2) ?? whole
+		if (!owner) return []
+		return [{
+			element: owner.element,
+			message: `${owner.message}${group.length > 1 ? ` (and ${group.length - 1} more)` : ""}`,
+			snippet: owner.snippet,
+		}]
+	})
+}

package/dist/skills/frontend/scripts/detect/rules/color/support/contrast-role.ts

@@ -0,0 +1,76 @@
+import { parseColor } from "../../../core/color"
+import { ancestors, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { textRect } from "./painted-text"
+
+const handwriting = new Set([
+	"allura", "alex brush", "arizonia", "birthstone", "caveat", "cedarville cursive", "cookie", "dawning of a new day",
+	"great vibes", "herr von muellerhoff", "homemade apple", "italianno", "la belle aurore", "meddon", "monsieur la doulaise",
+	"mr dafoe", "mrs saint delafield", "ms madi", "nothing you could do", "pacifico", "parisienne", "qwigley", "reenie beanie",
+	"sacramento", "satisfy", "tangerine", "whisper", "yellowtail", "zeyada",
+])
+
+function version(text: string): boolean {
+	if (text.length > 64) return false
+	let found = false
+	const tokens = /\b(?:version|ver\.?|build|release|rev(?:ision)?|commit)\s*[:#]?\s*([0-9a-z][0-9a-z.+_-]*\d[0-9a-z.+_-]*)|(?:^|[\s([])v\d+(?:\.\d+)+(?:[-+][0-9a-z.]+)?|(?:^|[\s([])[a-z]{1,3}\d+\.\d+\.\d+(?:\.\d+)?(?:[-+][0-9a-z.]+)?/gi
+	let rest = text.replace(tokens, (whole: string, id: string | undefined) => {
+		if (id && (!/^(?:[a-z]?\d+(?:\.\d+)+(?:[-+_][0-9a-z.]+)?|\d+(?:[-+_][0-9a-z.]+)?|[0-9a-f]{7,40})$/i.test(id) || /^(?:19|20)\d\d(?:[-+_]|$)/.test(id))) return whole
+		found = true
+		return " "
+	})
+	rest = rest.replace(/(?:^|[\s([])(\d{1,3})\.(\d{1,3})\.(\d{1,3})(?:[-+][0-9a-z.]+)?\b/gi, (whole: string, _major: string, minor: string, patch: string) => {
+		if ([minor, patch].some((part) => part.length > 1 && part.startsWith("0"))) return whole
+		found = true
+		return " "
+	})
+	return found && rest.replace(/\b\d{4}[-./]\d{1,2}[-./]\d{1,2}(?:[\sT]+\d{1,2}(?::\d{2}){0,2})?\b|\b\d{1,2}[-./]\d{1,2}[-./]\d{2,4}\b|\b\d{1,2}:\d{2}(?::\d{2})?\b|\b[0-9a-f]{7,12}\b|[\s\u00b7\u2022|/,()[\]\u2013\u2014-]+/gi, "") === ""
+}
+
+function mockup(el: ElementSnapshot): boolean {
+	if (["html", "body", "main", "section", "article", "header", "footer", "nav", "aside", "figcaption"].includes(el.tag)) return false
+	return [el.attributes["class"], el.attributes["id"]].join(" ").split(/\s+/).some((token) => {
+		const parts = token.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+		if (parts.some((part) => ["credit", "credits", "caption", "captions", "title", "heading", "description", "copy"].includes(part))) return false
+		return parts.some((part) => ["mockup", "mockups", "illustration", "illustrations"].includes(part))
+			|| (parts.includes("mock") && parts.some((part) => ["ui", "window", "browser", "screen", "device", "phone", "app"].includes(part)))
+	})
+}
+
+/** Keeps upstream advisory pairs apart from reading text without changing the project's error severity. */
+export function contrastRole(snapshot: PageSnapshot, el: ElementSnapshot): string {
+	const chain = [el, ...ancestors(snapshot, el)]
+	const text = el.ownText.trim()
+	const words = text.split(/\s+/)
+	const sentence = words.length >= 8 || (words.length >= 5 && /[.!?\u3002\uff01\uff1f]$/.test(text))
+	for (const node of chain) {
+		if (node.tag === "figcaption") break
+		if (node.attributes["role"] === "img" && !chain.some((n) => n.tag === "svg")) return "decorative"
+		if (!sentence && mockup(node)) return "decorative"
+	}
+	const control = chain.find((node) => ["a", "button", "label", "summary", "select", "option"].includes(node.tag)
+		|| ["button", "link", "tab", "menuitem", "option", "checkbox", "radio", "switch"].includes(node.attributes["role"] ?? ""))
+	if (control?.text.trim() === text) return "copy"
+	if (/^\p{L}{1,2}$/u.test(text) && !["i", "x", "v"].includes(text) && !chain.some((node) => node.tag === "kbd")) {
+		const glyph = textRect(el)
+		for (const node of chain.slice(0, 3)) {
+			if (node.text.trim() !== text) break
+			const box = node.rect
+			const fill = parseColor(styleOf(node, "background-color"))
+			const paints = (fill?.a ?? 0) > 0.1 || styleOf(node, "background-image") !== "none" || node.tag === "svg"
+			const centered = Math.abs(glyph.x + glyph.width / 2 - box.x - box.width / 2) <= box.width * 0.15
+				&& Math.abs(glyph.y + glyph.height / 2 - box.y - box.height / 2) <= box.height * 0.15
+			if (paints && centered && box.width >= 12 && box.width <= 72 && box.height >= 12 && box.height <= 72
+				&& box.width / box.height >= 0.8 && box.width / box.height <= 1.25) return "decorative"
+		}
+	}
+	if (chain.some((node) => /^h[1-6]$/.test(node.tag) || node.attributes["role"] === "heading")) return "copy"
+	if (version(text)) return "decorative"
+	const marked = chain.slice(0, 2).some((node) => [node.attributes["class"], node.attributes["id"]].join(" ").split(/\s+/)
+		.some((token) => /^(?:[a-z0-9]+(?:-{1,2}|_{1,2}))?(?:signature|autograph|sign-?off)(?:(?:-{1,2}|_{1,2})(?:name|text|line|block|wrap|wrapper|img|image))?$/i.test(token)))
+	const family = (styleOf(el, "font-family").split(",")[0] ?? "").replace(/["']/g, "").trim().toLowerCase()
+	const script = family === "cursive" || /script|handwriting/.test(family) || handwriting.has(family)
+	if (text.length <= 40 && words.length <= (marked ? 4 : 3) && words.every((word) => /^[\p{L}.'-]+$/u.test(word))
+		&& (marked || (script && words.every((word) => /^\p{Lu}/u.test(word))))) return "decorative"
+	return "copy"
+}

package/dist/skills/frontend/scripts/detect/rules/color/support/glow-forms.ts

@@ -0,0 +1,56 @@
+import { luminance } from "../../../core/color"
+import { isIgnored, isRendered, styleOf } from "../../../core/page"
+import { parseShadow, type ShadowLayer } from "../../../core/shadow"
+import type { PageHit } from "../../../rule"
+import type { PageSnapshot } from "../../../types"
+import { backdrop, colorDistance, effectiveOpacity, spread } from "./gradients"
+
+function glow(layer: ShadowLayer, dark: boolean): boolean {
+	return spread(layer.color) >= 30 && layer.blur > 4 && layer.blur * layer.color.a >= 3
+		&& layer.blur / 2 + layer.spread > 0 && (dark || (layer.x === 0 && layer.y === 0))
+}
+
+export function glowForm(snapshot: PageSnapshot, hits: readonly PageHit[]): PageHit | null {
+	const reported = hits.flatMap((hit) => {
+		const element = hit.element
+		return element ? ["box-shadow", "text-shadow"].flatMap((p) => parseShadow(styleOf(element, p)).map((layer) => ({ property: p, layer }))) : []
+	})
+	const unreported = (property: string, layer: ShadowLayer): boolean =>
+		!reported.some((r) => r.property === property && colorDistance(r.layer.color, layer.color) < 1)
+	for (const host of snapshot.elements) {
+		if (!isRendered(snapshot, host) || effectiveOpacity(snapshot, host) <= 0.02 || isIgnored(snapshot, host, "dark-glow")) continue
+		const surface = backdrop(snapshot, host)
+		const dark = surface !== null && luminance(surface) < 0.1
+		for (const pseudo of [host.before, host.after]) {
+			if (!pseudo || ["none", "normal"].includes(pseudo.style["content"] ?? "none") || pseudo.style["display"] === "none" || Number(pseudo.style["opacity"] ?? 1) <= 0.02) continue
+			for (const property of ["box-shadow", "text-shadow"]) {
+				if (parseShadow(pseudo.style[property] ?? "").some((layer) => glow(layer, dark) && unreported(property, layer))) {
+					return { element: null, message: "A pseudo-element paints a colored shadow glow", snippet: "Pseudo-element glow" }
+				}
+			}
+		}
+	}
+	for (const css of snapshot.cssText) for (const match of css.matchAll(/@(?:-webkit-)?keyframes\s+([\w-]+)\s*\{/g)) {
+		let depth = 1
+		const start = (match.index ?? 0) + match[0].length
+		let end = start
+		for (; end < css.length && depth > 0; end++) {
+			if (css[end] === "{") depth++
+			if (css[end] === "}") depth--
+		}
+		const carriers = snapshot.elements.filter((el) => styleOf(el, "animation-name").split(",").map((n) => n.trim()).includes(match[1] ?? "")
+			&& isRendered(snapshot, el) && effectiveOpacity(snapshot, el) > 0.02 && !isIgnored(snapshot, el, "dark-glow"))
+		if (carriers.length === 0) continue
+		for (const declaration of css.slice(start, end).matchAll(/(?<![-\w])(box-shadow|text-shadow)\s*:\s*([^;{}]+)/g)) {
+			const property = declaration[1] ?? ""
+			const body = snapshot.elements.find((el) => el.tag === "body")
+			const root = body ? backdrop(snapshot, body) : null
+			const dark = root !== null && luminance(root) < 0.1
+			if (parseShadow(declaration[2] ?? "").some((layer) => glow(layer, dark) && unreported(property, layer)
+				&& !snapshot.elements.some((el) => parseShadow(styleOf(el, property)).some((own) => own.blur > 4 && colorDistance(own.color, layer.color) < 1)))) {
+				return { element: null, message: "A running animation declares a colored shadow glow", snippet: "Keyframe glow" }
+			}
+		}
+	}
+	return null
+}

package/dist/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/dist/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/dist/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/dist/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("*")))
+}