oh-my-opencode 5.1.48 → 5.1.54

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/dark-glow.ts

@@ -0,0 +1,44 @@
+import { luminance, toHsl } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import { parseShadow } from "../../core/shadow"
+import type { PageRule } from "../../rule"
+import { backdrop, colorDistance, opacity, spread } from "./support/gradients"
+import { glowForm } from "./support/glow-forms"
+import { textBackgrounds } from "./support/text-colors"
+
+export const darkGlow: PageRule = {
+	meta: {
+		id: "dark-glow", name: "Glowing shadow accents", category: "slop", severity: "warning", engine: "page",
+		description: "A colored blurred shadow reads as a decorative glow.",
+		fixHint: "Use a neutral elevation shadow or remove the halo.",
+	},
+	check: ({ snapshot }) => {
+		const hits = snapshot.elements.flatMap((el) => {
+			if (!isRendered(snapshot, el)) return []
+			const parent = el.parent === null ? el : snapshot.elements[el.parent] ?? el
+			const grounds = textBackgrounds(snapshot, { ...el, lineRects: [el.rect], style: { ...el.style, "background-color": "transparent", "background-image": "none" } })
+			const surface = grounds[0] ?? backdrop(snapshot, parent)
+			const dark = surface !== null && luminance(surface) < 0.1
+			return ["box-shadow", "text-shadow"].flatMap((property) => {
+				const value = styleOf(el, property)
+				if (property === "text-shadow" && parent !== el && value === styleOf(parent, property)) return []
+				const layers = parseShadow(value)
+				const lift = surface === null ? null : layers.reduce((sum, layer) => {
+					if (spread(layer.color) <= 30 || layer.blur * layer.color.a * opacity(el) < 1.5) return sum
+					const hueDelta = Math.abs(toHsl(layer.color).h - toHsl(surface).h)
+					const shade = (layer.x !== 0 || layer.y !== 0) && toHsl(layer.color).l < 0.25 && luminance(layer.color) < luminance(surface) && spread(surface) > 30 && Math.min(hueDelta, 360 - hueDelta) <= 50
+					return sum + (shade ? 0 : 0.5 * layer.color.a * opacity(el) * colorDistance(layer.color, surface))
+				}, 0)
+				const hit = layers.find((layer) => {
+					const extent = layer.blur / 2 + layer.spread
+					const area = el.rect.width * el.rect.height
+					const lit = (el.rect.width + 2 * extent) * (el.rect.height + 2 * extent) - area
+					return !layer.inset && spread(layer.color) > 30 && layer.blur > 4 && extent > 0 && layer.blur * layer.color.a * opacity(el) >= 3 && lit <= area * 2 && (lift === null || lift >= 20) && ((layer.x === 0 && layer.y === 0) || dark)
+				})
+				return hit ? [{ element: el, message: `${property} creates a colored glow`, snippet: shortSnippet(el) }] : []
+			})
+		})
+		const page = glowForm(snapshot, hits)
+		return page ? [...hits, page] : hits
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/design-system-color.ts

@@ -0,0 +1,35 @@
+import { parseColor } from "../../core/color"
+import { isRendered, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import { colorDistance } from "./support/gradients"
+
+export const designSystemColor: PageRule = {
+	meta: {
+		id: "design-system-color", name: "Color outside DESIGN.md", category: "quality", severity: "advisory", engine: "page",
+		description: "A painted color is outside the project's declared palette.",
+		fixHint: "Use a declared color token or add the intentional color to the palette.",
+	},
+	check: ({ snapshot, config }) => {
+		const tokens = config.designTokens?.colors?.map(parseColor).filter((c) => c !== null) ?? []
+		if (tokens.length === 0) return []
+		const seen = new Set<string>()
+		const hits: PageHit[] = []
+		for (const el of snapshot.elements) {
+			if (!isRendered(snapshot, el) || ["head", "title", "meta", "link", "style", "script", "noscript", "template", "source"].includes(el.tag)) continue
+			const props = ["background-color"]
+			if (el.ownText.trim() !== "") props.push("color")
+			for (const side of ["top", "right", "bottom", "left"]) if ((px(styleOf(el, `border-${side}-width`)) ?? 0) > 0) props.push(`border-${side}-color`)
+			if ((px(styleOf(el, "outline-width")) ?? 0) > 0) props.push("outline-color")
+			for (const prop of props) {
+				const raw = styleOf(el, prop)
+				const c = parseColor(raw)
+				if (!c || c.a <= 0.05 || tokens.some((token) => colorDistance(c, token) <= 6)) continue
+				const key = `${prop}:${raw}`
+				if (seen.has(key)) continue
+				seen.add(key)
+				hits.push({ element: el, message: `${prop} ${raw} is outside the declared palette`, snippet: shortSnippet(el) })
+			}
+		}
+		return hits
+	},
+}

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

@@ -0,0 +1,59 @@
+import { parseColor } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { effectiveOpacity, gradientStops, sameColor } from "./support/gradients"
+import { clipsText } from "./support/text-colors"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+
+function shimmer(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	const stops = gradientStops(styleOf(el, "background-image"))
+	const first = stops[0]
+	const last = stops.at(-1)
+	const ink = parseColor(styleOf(el, "color"))
+	if (!first || !last || !ink || stops.length < 3 || !sameColor(first.color, ink) || !sameColor(last.color, ink)) return false
+	let plateau = 0
+	for (let i = 1; i < stops.length; i++) {
+		const a = stops[i - 1]
+		const b = stops[i]
+		if (a && b && a.position !== null && b.position !== null && sameColor(a.color, ink) && sameColor(b.color, ink)) plateau += b.position - a.position
+	}
+	if (plateau < 0.5 || Number.parseFloat(styleOf(el, "background-size")) <= 100 || !styleOf(el, "background-size").split(/\s+/)[0]?.endsWith("%")) return false
+	if (styleOf(el, "animation-play-state") === "paused") return false
+	return styleOf(el, "animation-iteration-count").includes("infinite") && styleOf(el, "animation-name").split(",").some((name) =>
+		name.trim() !== "none" && snapshot.cssText.some((css) => {
+			const start = css.indexOf(`@keyframes ${name.trim()}`)
+			if (start < 0) return false
+			const open = css.indexOf("{", start)
+			let depth = 0
+			for (let i = open; i < css.length; i++) {
+				if (css[i] === "{") depth++
+				if (css[i] === "}") depth--
+				if (depth === 0) return /background-position/.test(css.slice(open, i))
+			}
+			return false
+		}))
+}
+
+export const gradientText: PageRule = {
+	meta: {
+		id: "gradient-text", name: "Gradient text", category: "slop", severity: "warning", engine: "page",
+		description: "A color ramp clipped to text adds decoration to the glyphs.",
+		fixHint: "Use a solid text color to keep the emphasis readable.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el) || !textPainted(snapshot, el) || el.text.trim() === "") return []
+		if (bareText(el)) return []
+		const tokens = (el.attributes["class"] ?? "").split(/\s+/)
+		if (!clipsText(el)) return tokens.includes("bg-clip-text") && tokens.some((token) => /^bg-gradient-to-/.test(token))
+			? [{ element: el, message: "Utility classes declare a gradient text treatment", snippet: shortSnippet(el) }] : []
+		if ([styleOf(el, "background-clip"), styleOf(el, "-webkit-background-clip")].every((v) => v !== "text")) return []
+		const image = styleOf(el, "background-image")
+		const stops = gradientStops(image)
+		const first = stops[0]
+		if (!first || !image.includes("gradient") || stops.every((s) => sameColor(s.color, first.color))) return []
+		if (Math.max(...stops.map((s) => s.color.a)) * effectiveOpacity(snapshot, el) < 0.15 || shimmer(snapshot, el)) return []
+		return [{ element: el, message: "A gradient paints the text", snippet: shortSnippet(el) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/gray-on-color.ts

@@ -0,0 +1,38 @@
+import { luminance, parseColor, toHsl, type Rgba } from "../../core/color"
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { oklch, spread } from "./support/gradients"
+import { clipsText, textBackgrounds, textInk } from "./support/text-colors"
+import { bareText } from "./support/color-path"
+import { textPainted } from "./support/painted-text"
+
+function colored(bg: Rgba): boolean {
+	const lum = luminance(bg)
+	const scale = lum >= 0.01 ? 1 : Math.sqrt(0.01 / Math.max(lum, 0.0001))
+	const perceptual = oklch(bg)
+	return spread(bg) > 40 * scale && (perceptual.l < 0.9 || perceptual.c >= 0.09)
+}
+
+export const grayOnColor: PageRule = {
+	meta: {
+		id: "gray-on-color", name: "Gray text on colored background", category: "quality", severity: "warning", engine: "page",
+		description: "Mid-gray ink loses clarity on a chromatic surface.",
+		fixHint: "Use a dark shade of the surface hue or a contrasting near-white ink.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!textPainted(snapshot, el) || bareText(el) || clipsText(el)) return []
+		const color = parseColor(styleOf(el, "color"))
+		if (!color) return []
+		const hsl = toHsl(color)
+		const gray = hsl.s < 0.2 && hsl.l > 0.3 && hsl.l < 0.85
+		const tokens = (el.attributes["class"] ?? "").split(/\s+/)
+		const grayClass = tokens.some((t) => /^text-(gray|slate|zinc|neutral|stone)-[1-6]00(?:\/\d+)?$/.test(t))
+		const bgClass = tokens.some((t) => /^bg-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-([2-9]00|950)(?:\/\d+)?$/.test(t))
+		const classHit = grayClass && bgClass && hsl.l < 0.85 && spread(color) <= 50
+		const backgrounds = textBackgrounds(snapshot, el)
+		const computedHit = textInk(snapshot, el) !== null && gray && backgrounds.length > 0 && backgrounds.every(colored)
+		if (!classHit && !computedHit) return []
+		const hit = { element: el, message: "Gray ink on a colored surface", snippet: shortSnippet(el) }
+		return classHit && computedHit ? [hit, hit] : [hit]
+	}),
+}

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

@@ -0,0 +1,15 @@
+import type { PageRule } from "../../rule"
+import { aiColorPalette } from "./ai-color-palette"
+import { creamPalette } from "./cream-palette"
+import { darkGlow } from "./dark-glow"
+import { designSystemColor } from "./design-system-color"
+import { gradientText } from "./gradient-text"
+import { grayOnColor } from "./gray-on-color"
+import { lowContrast } from "./low-contrast"
+import { radialHalo } from "./radial-halo"
+import { radialSpotlightGlow } from "./radial-spotlight-glow"
+
+export const COLOR_RULES: readonly PageRule[] = [
+	lowContrast, grayOnColor, aiColorPalette, creamPalette, gradientText,
+	darkGlow, radialHalo, radialSpotlightGlow, designSystemColor,
+]

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

@@ -0,0 +1,57 @@
+import { blend, contrastRatio } from "../../core/color"
+import { ancestors, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { distinctPairs, type ContrastHit } from "./support/contrast-pairs"
+import { gradientStops } from "./support/gradients"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+import { contrastRole } from "./support/contrast-role"
+import { mockupRoots } from "./support/mockup-roots"
+import { placeholderContrast } from "./support/placeholder-contrast"
+import { clipsText, solidGround, textBackgrounds, textInk } from "./support/text-colors"
+
+export const lowContrast: PageRule = {
+	meta: {
+		id: "low-contrast", name: "Low contrast text", category: "quality", severity: "error", engine: "page",
+		description: "Text falls below the WCAG AA contrast ratio for its size.",
+		fixHint: "Increase text and surface contrast to 4.5:1, or 3:1 for large text.",
+	},
+	check: ({ snapshot }) => {
+		const mockups = mockupRoots(snapshot)
+		const text = distinctPairs(snapshot, snapshot.elements.flatMap((el): readonly ContrastHit[] => {
+			if ([el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "declared")) return []
+			if (!textPainted(snapshot, el)) return []
+			if ([el, ...ancestors(snapshot, el)].some((node) => node.attributes["disabled"] !== undefined || node.attributes["aria-disabled"] === "true")) return []
+			const size = fontSizePx(el)
+			if (bareText(el) && size < 9) return []
+			const familyWords = (styleOf(el, "font-family").split(",")[0] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/)
+			const namedBold = familyWords.some((w) => ["bold", "semibold", "demibold", "extrabold", "ultrabold", "heavy", "black"].includes(w))
+			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
+			if (clipsText(el) && el.ownText.trim() !== "") {
+				const stops = gradientStops(styleOf(el, "background-image"))
+				if (stops.length === 0 || stops.some((s) => s.color.a < 0.999)) return []
+				const ground = solidGround(snapshot, el)
+				const best = Math.max(...stops.map((s) => contrastRatio(s.color, ground)))
+				return best < threshold ? [{ element: el, pair: JSON.stringify([stops, ground, threshold]), message: `Gradient text contrast ${best.toFixed(2)}:1; needs ${threshold}:1`, snippet: shortSnippet(el) }] : []
+			}
+			const ink = textInk(snapshot, el)
+			if (!ink) return []
+			const backgrounds = textBackgrounds(snapshot, el)
+			if (backgrounds.length === 0) return []
+			const ratios = backgrounds.map((bg) => contrastRatio(blend(ink, bg), bg))
+			const ratio = Math.min(...ratios)
+			if (ratio === 1 && ![el, ...ancestors(snapshot, el)].some((node) =>
+				["a", "button", "input", "select", "textarea"].includes(node.tag) || ["button", "link"].includes(node.attributes["role"] ?? ""))) return []
+			const control = [el, ...ancestors(snapshot, el)].find((node) => node.tag === "button" || node.attributes["role"] === "button")
+			if (ratio === 1 && control && control.children.length > 1 && control.text.trim() === el.text.trim()) return []
+			const shape = size >= 96 && ink.a < 0.25 ? el.text : [el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "labelled") ? "decorative" : contrastRole(snapshot, el)
+			const gradient = bareText(el) ? ancestors(snapshot, el).find((node) => !clipsText(node) && styleOf(node, "background-image").includes("gradient")) : undefined
+			const ground = backgrounds[ratios.indexOf(ratio)]
+			const pair = gradient ? JSON.stringify([ink, gradient.index, shape]) : JSON.stringify([ink, ground, threshold, shape])
+			return ratio < threshold ? [{ element: el, pair, message: `Text contrast ${ratio.toFixed(2)}:1; needs ${threshold}:1`, snippet: shortSnippet(el) }] : []
+		}))
+		return [...text, ...snapshot.elements.flatMap((el) =>
+			[el, ...ancestors(snapshot, el)].some((node) => mockups.get(node.index) === "declared") ? [] : placeholderContrast(snapshot, el))]
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/radial-halo.ts

@@ -0,0 +1,31 @@
+import { luminance, parseColor } from "../../core/color"
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { backdrop, gradientStops, splitLayers, spread } from "./support/gradients"
+import { darkBackground } from "../source/support/css-effects"
+
+export const radialHalo: PageRule = {
+	meta: {
+		id: "radial-halo", name: "Radial-gradient background halo", category: "slop", severity: "warning", engine: "page",
+		description: "A saturated radial fade decorates a dark surface with a halo.",
+		fixHint: "Ground the section with a solid or subtly shifted background.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el)) return []
+		const body = snapshot.elements.find((node) => node.tag === "body")
+		const root = body ? parseColor(styleOf(body, "background-color")) : null
+		if (root && root.a > 0.5 && luminance(root) >= 0.1 && !snapshot.cssText.some(darkBackground)) return []
+		const surface = backdrop(snapshot, el, "none")
+		if (!surface || luminance(surface) >= 0.1) return []
+		const styles = [el.style, el.before?.style, el.after?.style].filter((s) => s !== undefined)
+		const halo = styles.some((style) => splitLayers(style["background-image"] ?? "").some((layer) => {
+			if (!layer.startsWith("radial-gradient(")) return false
+			const stops = gradientStops(layer)
+			const first = stops[0]
+			const last = stops.at(-1)
+			if (!first || !last || stops.some((s) => /(?:^|\s)(-?\d*\.?\d+)px/.test(s.raw) && Math.abs(Number.parseFloat(s.raw.slice(s.raw.lastIndexOf(" ") + 1))) <= 24)) return false
+			return first.color.a >= 0.7 && spread(first.color) >= 24 && last.color.a <= 0.05 && luminance(first.color) > luminance(surface)
+		}))
+		return halo ? [{ element: el, message: "Chromatic radial halo on a dark surface", snippet: shortSnippet(el) }] : []
+	}).slice(0, 1),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/color/radial-spotlight-glow.ts

@@ -0,0 +1,33 @@
+import { blend, contrastRatio } from "../../core/color"
+import { isRendered, shortSnippet, styleOf, textElements } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { backdrop, effectiveOpacity, gradientStops, splitLayers, spread } from "./support/gradients"
+
+export const radialSpotlightGlow: PageRule = {
+	meta: {
+		id: "radial-spotlight-glow", name: "Decorative radial spotlight glow", category: "slop", severity: "warning", engine: "page",
+		description: "A translucent radial accent floats behind a section's copy.",
+		fixHint: "Remove the floating wash or use a deliberate material surface.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!isRendered(snapshot, el) || el.rect.width < 240 || el.rect.height < 160) return []
+		const layers = splitLayers(styleOf(el, "background-image"))
+		const index = layers.findIndex((layer) => layer.startsWith("radial-gradient("))
+		if (index < 0) return []
+		const stops = gradientStops(layers[index] ?? "")
+		const last = stops.at(-1)
+		const colors = stops.filter((s) => s.color.a > 0.05)
+		if (!last || last.color.a > 0.05 || colors.length === 0 || colors.length > 2 || colors.some((s) => s.color.a >= 0.45)) return []
+		const surface = backdrop(snapshot, el, layers.slice(index + 1).join(", "))
+		const prominent = colors.some((s) => {
+			const a = s.color.a * effectiveOpacity(snapshot, el)
+			return spread(s.color) > 24 && a >= 0.14 && (surface === null || contrastRatio(blend({ ...s.color, a }, surface), surface) >= 1.3)
+		})
+		if (!prominent) return []
+		const behindText = textElements(snapshot).some((text) => {
+			const r = text.rect
+			return r.x < el.rect.x + el.rect.width && r.x + r.width > el.rect.x && r.y < el.rect.y + el.rect.height && r.y + r.height > el.rect.y
+		})
+		return behindText ? [{ element: el, message: "A radial spotlight glows behind text", snippet: shortSnippet(el) }] : []
+	}),
+}

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