oh-my-opencode 5.1.51 → 5.1.54

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

@@ -0,0 +1,83 @@
+import { luminance, parseColor, toHsl, type Rgba } from "../../core/color"
+import { ancestors, childrenOf, fontSizePx, isIgnored, shortSnippet, styleOf } from "../../core/page"
+import type { PageHit, PageRule } from "../../rule"
+import type { ElementSnapshot, PageSnapshot } from "../../types"
+import { backdrop, colorDistance, gradientStops, opacity, sameColor, spread } from "./support/gradients"
+import { brandColor, categoryColor, paletteVisible, tellHue } from "./support/palette-roles"
+import { clipsText } from "./support/text-colors"
+import { gradientSamples } from "./support/gradient-samples"
+import { stockAccent } from "./support/stock-accent"
+import { textPainted } from "./support/painted-text"
+import { bareText } from "./support/color-path"
+
+function highlighted(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!/mono|consolas|courier/i.test(styleOf(el, "font-family")) || !["pre", "pre-wrap", "break-spaces"].includes(styleOf(el, "white-space")) || !styleOf(el, "display").startsWith("inline")) return false
+	const parent = el.parent === null ? undefined : snapshot.elements[el.parent]
+	const ink = parseColor(styleOf(el, "color"))
+	if (!parent || !ink) return false
+	return [parent, ...childrenOf(snapshot, parent)].some((node) => {
+		if (node === el || node.ownText.trim() === "" || (node !== parent && !styleOf(node, "display").startsWith("inline")) || !paletteVisible(snapshot, node) || opacity(node) === 0) return false
+		const c = parseColor(styleOf(node, "color"))
+		return c !== null && c.a > 0 && (Math.abs(c.r - ink.r) + Math.abs(c.g - ink.g) + Math.abs(c.b - ink.b) > 24 || Math.abs(c.a - ink.a) > 0.1)
+	})
+}
+
+function covered(snapshot: PageSnapshot, el: ElementSnapshot): boolean {
+	return childrenOf(snapshot, el).some((child) => {
+		if (!["img", "video"].includes(child.tag) || !paletteVisible(snapshot, child) || styleOf(child, "object-fit") === "contain") return false
+		const a = el.rect
+		const b = child.rect
+		return opacity(child) >= 0.95 && b.x <= a.x + 1 && b.y <= a.y + 1 && b.x + b.width >= a.x + a.width - 1 && b.y + b.height >= a.y + a.height - 1
+	})
+}
+
+export const aiColorPalette: PageRule = {
+	meta: {
+		id: "ai-color-palette", name: "AI color palette", category: "slop", severity: "warning", engine: "page",
+		description: "Stock violet and cyan ramps or paired neon inks replace an intentional palette.",
+		fixHint: "Choose a distinctive palette and declare its colors as design tokens.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.colors?.map(parseColor).filter((c) => c !== null) ?? []
+		const declared = (c: Rgba): boolean => allowed.some((token) => colorDistance(c, token) <= 6)
+		const purpleDeclared = allowed.some((c) => tellHue(c) === "purple")
+		const hits: PageHit[] = []
+		const neon: { readonly el: ElementSnapshot; readonly hue: string }[] = []
+		const tells = new Set<string>()
+		for (const el of snapshot.elements) {
+			if (!paletteVisible(snapshot, el) || !textPainted(snapshot, el) || isIgnored(snapshot, el, "ai-color-palette")) continue
+			const image = styleOf(el, "background-image")
+			const stops = gradientStops(image).map((s) => s.color)
+			const first = stops[0]
+			const blurred = [el, ...ancestors(snapshot, el)].some((node) => [...styleOf(node, "filter").matchAll(/blur\(([\d.]+)px\)/g)].some((m) => Number(m[1]) >= 24))
+			const samples = gradientSamples(el, el.rect)
+			const flat = first !== undefined && (stops.every((c) => colorDistance(c, first) === 0 && c.a === first.a) || (stops.every((c) => colorDistance(c, first) === 0) && stops.every((c) => c.a >= 0.75)) || (samples !== null && samples.length > 0 && samples.every((c) => samples[0] !== undefined && sameColor(c, samples[0]))))
+			if (first && stops.length >= 2 && !flat && !blurred && !clipsText(el) && Math.min(el.rect.width, el.rect.height) >= 8 && el.rect.width * el.rect.height >= 256 && !covered(snapshot, el)) {
+				const painted = stops.filter((c) => !declared(c) && c.a * opacity(el) >= 0.15 && spread(c) > 50)
+				const bands = painted.map(tellHue).filter((h) => h !== null && !(h === "purple" && purpleDeclared))
+				const bridge = painted.filter((c) => toHsl(c).h > 197 && toHsl(c).h < 260).length
+				if (bands.length > 0 && bands.length * 2 >= painted.length && (bands.includes("purple") || bands.length * 2 > painted.length || bridge >= painted.length - bands.length)) {
+					if (!categoryColor(snapshot, el, true)) {
+						for (const band of bands) if (band) tells.add(band)
+						hits.push({ element: el, message: "Stock violet or cyan gradient background", snippet: shortSnippet(el) })
+					}
+				}
+			}
+			const ink = parseColor(styleOf(el, "color"))
+			if (!ink || declared(ink) || el.ownText.trim().length < 2 || highlighted(snapshot, el)) continue
+			const band = tellHue(ink)
+			if (!bareText(el) && band === "purple" && !purpleDeclared && spread(ink) > 50 && (["h1", "h2", "h3"].includes(el.tag) || (fontSizePx(el) >= 20 && toHsl(ink).s >= 0.3)) && !brandColor(snapshot, ink) && !categoryColor(snapshot, el, false)) {
+				hits.push({ element: el, message: "Violet text on a heading", snippet: shortSnippet(el) })
+			}
+			const parent = el.parent === null ? undefined : snapshot.elements[el.parent]
+			const ground = parent ? backdrop(snapshot, parent) : null
+			if (band && !(band === "purple" && purpleDeclared) && ink.a * opacity(el) >= 0.15 && spread(ink) > 80 && ground && luminance(ground) < 0.1 && !categoryColor(snapshot, el, false)) {
+				tells.add(band)
+				neon.push({ el, hue: band })
+			}
+		}
+		if (tells.size >= 2) for (const { el } of neon) if (!categoryColor(snapshot, el, false)) hits.push({ element: el, message: "Neon text paired with another stock palette hue on dark", snippet: shortSnippet(el) })
+		if (!purpleDeclared && stockAccent(snapshot)) hits.push({ element: null, message: "Stock violet accent colors appear on the page", snippet: "Stock violet accent" })
+		return hits
+	},
+}

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

@@ -0,0 +1,35 @@
+import { parseColor, type Rgba } from "../../core/color"
+import { isRendered, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+
+const cream = (c: Rgba | null): boolean => c !== null && Math.min(c.r, c.g, c.b) >= 209 && c.r >= c.g && c.g >= c.b && c.r - c.b >= 6 && c.r - c.b <= 48
+const CREAM_CLASSES = ["bg-amber-50", "bg-orange-50", "bg-yellow-50", "bg-orange-100"] as const
+
+export const creamPalette: PageRule = {
+	meta: {
+		id: "cream-palette", name: "Cream / beige palette", category: "slop", severity: "warning", engine: "page",
+		description: "The page defaults to a warm cream or beige ground.",
+		fixHint: "Choose a page surface that follows the project's palette.",
+	},
+	check: ({ snapshot }) => {
+		const body = snapshot.elements.find((el) => el.tag === "body")
+		const html = snapshot.elements.find((el) => el.tag === "html")
+		if (!body) return []
+		let fill = parseColor(styleOf(body, "background-color"))
+		if (!fill || fill.a === 0) fill = html ? parseColor(styleOf(html, "background-color")) : null
+		const classes = [body, html].flatMap((el) => (el?.attributes["class"] ?? "").split(/\s+/))
+		const classCream = classes.some((c) => CREAM_CLASSES.some((known) => known === c) || (c.startsWith("bg-[") && cream(parseColor(c.slice(4, -1).replaceAll("_", " ")))))
+		if (!cream(fill) && !classCream) return []
+		const bands = snapshot.elements.filter((el) => el !== body && el !== html && isRendered(snapshot, el) && el.rect.width >= snapshot.viewport.width * 0.9)
+		const covering = bands.filter((el) => {
+			const c = parseColor(styleOf(el, "background-color"))
+			return c !== null && c.a >= 0.95 && el.rect.height >= snapshot.viewport.height * 0.9
+		}).sort((a, b) => b.rect.width * b.rect.height - a.rect.width * a.rect.height)[0]
+		if (covering) {
+			const c = parseColor(styleOf(covering, "background-color"))
+			const near = c !== null && Math.min(c.r, c.g, c.b) >= 209 && c.r >= c.g && c.g >= c.b && c.r - c.b >= 2 && c.r - c.b <= 48
+			if (!cream(c) && !near && !bands.some((el) => cream(parseColor(styleOf(el, "background-color"))))) return []
+		}
+		return [{ element: body, message: "The page uses a cream or beige background", snippet: "<body>" }]
+	},
+}

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,
+		}]
+	})
+}