oh-my-opencode 5.1.51 → 5.1.54

package/dist/skills/frontend/scripts/detect/rules/color/gray-on-color.test.ts

@@ -0,0 +1,39 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { grayOnColor } from "./gray-on-color"
+
+test("#given gray inks on navy, teal and amber #then only chromatic non-pale surfaces report", () => {
+	const snapshot = buildSnapshot([
+		...Object.entries({ navy: "#1e3a8a", teal: "#115e59", darkNavy: "#001c47", nearBlack: "#04002d", cream: "#feeed4", tint: "#fef3c7", neutral: "#f3f4f6" }).map(([id, bg]) => ({ id, text: "Some gray copy", style: { color: "#d1d5db", "background-color": bg } })),
+		{ id: "amber", text: "Gray six hundred", style: { color: "#4b5563", "background-color": "#fcd34d" } },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#navy", "#teal", "#darkNavy", "#amber"])
+})
+
+test("#given neutral extremes and utility variants #then gray classes only report resting chromatic fills", () => {
+	const snapshot = buildSnapshot([
+		{ id: "gray", text: "Gray utility", attributes: { class: "text-gray-400 bg-blue-600" } },
+		{ id: "hover", text: "Hover not resting", attributes: { class: "text-gray-500 bg-white hover:bg-emerald-400" } },
+		{ id: "black", text: "Near black", style: { color: "#393939", "background-color": "#ffc224" } },
+		{ id: "white", text: "Near white", style: { color: "#e5e7eb", "background-color": "#115e59" } },
+		{ id: "near-black-class", text: "Dark utility", attributes: { class: "text-gray-800 bg-yellow-400" } },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#gray"])
+})
+
+test("#given utility wrappers without direct text and bare inherited spans #then only the full color path reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "wrapper", attributes: { class: "text-gray-400 bg-blue-600" }, children: [{ text: "Wrapper copy" }] },
+		{ style: { "background-color": "#1e3a8a" }, children: [
+			{ id: "bare", tag: "span", text: "Bare gray text", style: { color: "#999999" } },
+			{ id: "paragraph", tag: "p", text: "Gray paragraph", style: { color: "#999999" } },
+		] },
+	])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#wrapper", "#paragraph"])
+})
+
+test("#given both a gray utility and measured gray ink #then preserves both upstream forms on the same element", () => {
+	const snapshot = buildSnapshot([{ id: "dual", attributes: { class: "text-gray-400 bg-blue-600" }, text: "Measured utility",
+		style: { color: "#999999", "background-color": "#1e40af" } }])
+	expect(grayOnColor.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#dual", "#dual"])
+})

package/dist/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/dist/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/dist/skills/frontend/scripts/detect/rules/color/low-contrast.test.ts

@@ -0,0 +1,209 @@
+import { expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lowContrast } from "./low-contrast"
+
+const ink = (color: string): Readonly<Record<string, string>> => ({ color, "-webkit-text-fill-color": color })
+
+test("#given small, large and bold text around AA thresholds #then only failures report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "small-fail", text: "Faint body", style: ink("#777777") },
+		{ id: "small-pass", text: "Readable body", style: ink("#767676") },
+		{ id: "large-fail", text: "Faint heading", style: { ...ink("#9b9b9b"), "font-size": "24px" } },
+		{ id: "large-pass", text: "Readable heading", style: { ...ink("#949494"), "font-size": "24px" } },
+		{ id: "bold-fail", text: "Faint bold", style: { ...ink("#9c9c9c"), "font-size": "19px", "font-weight": "700" } },
+		{ id: "bold-pass", text: "Readable bold", style: { ...ink("#949494"), "font-size": "19px", "font-weight": "700" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#small-fail", "#large-fail", "#bold-fail"])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] }).every((h) => h.severity === "error")).toBe(true)
+})
+
+test("#given repeated pairs and an ignored first copy #then one readable claimant counts unwaived copies", () => {
+	const snapshot = buildSnapshot([
+		{ id: "waived", text: "Waived copy", style: ink("#bbbbbb"), attributes: { "data-detect-ignore": "low-contrast" } },
+		{ id: "glyph", text: "𝕏", style: ink("#bbbbbb") },
+		{ id: "word", text: "Share this idea", style: ink("#bbbbbb") },
+		{ id: "repeat", text: "Share another idea", style: ink("#bbbbbb") },
+		{ id: "pass", text: "Readable ink", style: ink("#333333") },
+	])
+	const hits = lowContrast.check({ snapshot, config: {} })
+	expect(hits.map((h) => h.element?.selector)).toEqual(["#word"])
+	expect(hits[0]?.message.endsWith("(and 2 more)")).toBe(true)
+})
+
+test("#given named heavy cuts and ordinary family names #then only bold cuts get the large text bar", () => {
+	const snapshot = buildSnapshot(["ProximaNovaBold", "EMprint Semibold", "Gotham-Black", "Blackletter Text", 'Georgia, "Arial Black"'].map((family, i) => ({
+		id: `face-${i}`, text: "Family weight", style: { ...ink("#ffffff"), "background-color": "#ff5757", "font-size": "19px", "font-family": family },
+	})))
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#face-3"])
+})
+
+test("#given scrims, pseudo faces and parked underlines #then contrast uses the painted surface", () => {
+	const snapshot = buildSnapshot([
+		{ style: { position: "relative" }, rect: { width: 500, height: 200 }, children: [
+			{ style: { position: "absolute", "background-color": "rgba(0,0,0,0.8)" }, rect: { width: 500, height: 200 } },
+			{ style: { position: "absolute", "background-color": "rgba(235,230,224,0.3)" }, rect: { width: 500, height: 200 }, children: [
+				{ id: "scrim-pass", text: "White title on scrim", style: ink("#f7f5f3") },
+			] },
+		] },
+		{ id: "pseudo-fail", text: "Dark label", rect: { y: 300 }, style: ink("#333333"), before: { "background-color": "#1a1a1a" } },
+		{ id: "parked-pass", text: "Readable dark label", rect: { y: 400 }, style: ink("#333333"), before: { "background-color": "#1a1a1a", transform: "matrix(1, 0, 0, 1, -300, 0)" } },
+		{ id: "drawn-fail", text: "Ink on itself", rect: { y: 500 }, style: { ...ink("#5d666d"), "background-image": "linear-gradient(#5d666c, #5d666c)", "background-size": "100% 100%" } },
+		{ id: "underline-pass", text: "Ink with parked underline", rect: { y: 600 }, style: { ...ink("#5d666c"), "background-image": "linear-gradient(#5d666c, #5d666c)", "background-size": "0px 1px" } },
+		{ style: { position: "relative", "background-color": "#ffffff" }, rect: { y: 700, width: 420, height: 100 },
+			before: { "background-color": "#312e81", "z-index": "-1" }, children: [
+				{ id: "ring-fail", text: "Faint copy inside a border ring", rect: { y: 724 }, style: ink("#b8bcc4") },
+			] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#pseudo-fail", "#drawn-fail", "#ring-fail"])
+})
+
+test("#given stacked opaque panels and a mask fade #then hidden text cannot claim a pair", () => {
+	const snapshot = buildSnapshot([
+		{ rect: { width: 600, height: 200 }, children: [
+			{ style: { "z-index": "2", "background-color": "#ffffff" }, rect: { width: 600, height: 200 }, children: [{ id: "active", text: "Faint active copy", style: ink("#a0a0a0") }] },
+			{ style: { "z-index": "0", "background-color": "#ffffff" }, rect: { width: 600, height: 200 }, children: [{ id: "covered", text: "Faint covered copy", style: ink("#a1a1a1") }] },
+		] },
+		{ rect: { y: 300, width: 400, height: 160 }, style: { "mask-image": "linear-gradient(#000000 100px, transparent 140px)" }, children: [
+			{ id: "clear", rect: { y: 320 }, text: "Clear zone", style: ink("#a2a2a2") },
+			{ id: "masked", rect: { y: 440 }, text: "Masked zone", style: ink("#a3a3a3") },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#active", "#clear"])
+})
+
+test("#given a delayed entrance and a fading loop #then final entrance text reports but loop frames do not", () => {
+	const snapshot = buildSnapshot([
+		{ style: { opacity: "0", "animation-name": "enter", "animation-iteration-count": "1" }, children: [
+			{ id: "enter", tag: "a", text: "Get started", style: ink("#bbbbbb") },
+		] },
+		{ style: { opacity: "0.2", "animation-name": "cycle", "animation-iteration-count": "infinite" }, children: [
+			{ id: "cycle", text: "A loop frame", style: ink("#bbbbbb") },
+		] },
+		{ id: "readable", text: "Readable copy", style: ink("#111111") },
+		{ style: { position: "fixed" }, rect: { x: 1400 }, children: [{ id: "drawer", text: "Parked drawer copy", rect: { x: 1400 }, style: ink("#cccccc") }] },
+		{ id: "font-zero", text: "Invisible text", style: { ...ink("#cccccc"), "font-size": "0px" } },
+		{ tag: "video", children: [{ id: "fallback", text: "Unpainted fallback", style: ink("#cccccc") }] },
+	], { cssText: ["@keyframes enter { from { opacity: 0; } to { opacity: 1; } } @keyframes cycle { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }"] })
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#enter"])
+})
+
+test("#given alpha ink, inherited surfaces, gradients and disabled controls #then painted failures report", () => {
+	const snapshot = buildSnapshot([
+		{ style: { "background-color": "#000000" }, children: [
+			{ id: "alpha-fail", text: "Faint alpha", style: ink("rgba(255,255,255,0.1)") },
+			{ id: "alpha-pass", text: "Readable alpha", style: ink("rgba(255,255,255,0.9)") },
+		] },
+		{ tag: "button", attributes: { disabled: "" }, children: [{ id: "disabled", text: "Disabled", style: ink("#cccccc") }] },
+		{ id: "gradient-fail", text: "Faint gradient", style: { "background-image": "linear-gradient(#dddddd, #eeeeee)", ...ink("#bbbbbb") } },
+		{ id: "transparent", text: "Hidden fill", style: ink("transparent") },
+		{ id: "photo", text: "Unknown background", style: { ...ink("#cccccc"), "background-image": "url(photo.jpg)" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#alpha-fail", "#gradient-fail"])
+})
+
+test("#given pale clipped text and waived plain text #then only unwaived failures report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "clip-fail", text: "Pale glyphs", style: { "background-clip": "text", "background-image": "linear-gradient(#dddddd, #eeeeee)", ...ink("transparent") } },
+		{ id: "clip-pass", text: "Dark glyphs", style: { "background-clip": "text", "background-image": "linear-gradient(#111111, #333333)", ...ink("transparent") } },
+		{ id: "waived", text: "Waived faint text", style: ink("#cccccc"), attributes: { "data-detect-ignore": "low-contrast" } },
+	])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] }).map((h) => h.location.kind === "element" ? h.location.selector : "")).toEqual(["#clip-fail"])
+})
+
+test("#given gradient bands and an underline tile #then contrast reads only the paint beneath the text", () => {
+	const band = "linear-gradient(#fde68a 0%, #fde68a 30%, #1e3a8a 50%, #1e3a8a 100%)"
+	const snapshot = buildSnapshot([
+		{ id: "light-band", text: "Label", rect: { width: 240, height: 64 }, lineRects: [{ x: 16, y: 2, width: 120, height: 20 }],
+			style: { ...ink("#fffdf7"), "background-image": band } },
+		{ id: "dark-band", text: "Label", rect: { y: 100, width: 240, height: 64 }, lineRects: [{ x: 16, y: 140, width: 120, height: 20 }],
+			style: { ...ink("#fffdf8"), "background-image": band } },
+		{ id: "underline", text: "A readable link", rect: { y: 200, width: 160, height: 31 }, lineRects: [{ x: 0, y: 200, width: 120, height: 20 }],
+			style: { ...ink("#1e293b"), "background-image": "linear-gradient(#1e293b, #1e293b)", "background-repeat": "no-repeat", "background-size": "100% 2px", "background-position": "0% 100%" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#light-band"])
+})
+
+test("#given safe text repeated across vendors and wordless prices #then only eligible word claimants replace glyphs", () => {
+	const snapshot = buildSnapshot([
+		{ id: "glyph", tag: "a", text: "𝕏", style: ink("#bbbbbb") },
+		{ attributes: { id: "taboola-feed" }, children: [{ id: "vendor-word", tag: "a", text: "Sponsored words", style: ink("#bbbbbb") }] },
+		{ id: "price", tag: "span", text: "R$ 89,90", style: ink("#aaaaaa") },
+		{ id: "name", text: "Linen shirt", style: ink("#aaaaaa") },
+		{ id: "tiny", tag: "span", text: "A tiny mark", style: { ...ink("#cccccc"), "font-size": "8px" } },
+		{ attributes: { class: "slick-dots" }, children: [
+			{ id: "dot", tag: "button", text: "1", style: { ...ink("#333333"), "background-color": "#888888" } },
+		] },
+		{ id: "site-button", tag: "button", text: "Get started", style: { ...ink("#333333"), "background-color": "#888888" } },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#glyph", "#name", "#dot", "#site-button"])
+})
+
+test("#given decorative and reading text on identical pairs #then both roles report with project error severity", () => {
+	const snapshot = buildSnapshot([
+		{ id: "stamp", tag: "p", text: "v2.4.1 · 2024-03-01", style: ink("#bbbbbb") },
+		{ id: "heading", tag: "h3", text: "v2.4.1", style: ink("#bbbbbb") },
+		{ id: "initial", tag: "span", text: "A", rect: { y: 100, width: 32, height: 32 }, style: { ...ink("#ffffff"), "background-color": "#93c5fd" } },
+		{ id: "letter-link", tag: "a", text: "A", rect: { y: 150, width: 32, height: 32 }, style: { ...ink("#ffffff"), "background-color": "#93c5fd" } },
+	])
+	const findings = lintSnapshot(snapshot, { rules: [lowContrast] })
+	expect(findings.map((h) => h.location.kind === "element" ? h.location.selector : "")).toEqual(["#stamp", "#heading", "#initial", "#letter-link"])
+	expect(findings.every((h) => h.severity === "error")).toBe(true)
+})
+
+test("#given clipped copies and scroll-sized frames #then whole claimants and reachable lower copy report", () => {
+	const snapshot = buildSnapshot([
+		{ rect: { width: 200, height: 50 }, style: { "overflow-x": "hidden" }, children: [
+			{ id: "cut", rect: { x: -80, width: 160, height: 24 }, text: "Repeated label", style: ink("#aaaaaa") },
+			{ id: "whole", rect: { width: 160, height: 24 }, text: "Repeated label", style: ink("#aaaaaa") },
+			{ id: "sliver", rect: { x: -150, width: 160, height: 24 }, text: "A sliver of another label", style: ink("#bbbbbb") },
+		] },
+		{ rect: { y: 100, width: 500, height: 800 }, style: { "overflow-y": "hidden" }, scroll: { scrollHeight: 1500, clientHeight: 800 }, children: [
+			{ rect: { y: 100, height: 1500 }, children: [
+				{ id: "below-fold", rect: { y: 1400 }, text: "Reachable faint copy", style: ink("#cccccc") },
+			] },
+		] },
+		{ tag: "details", rect: { y: 1700 }, children: [{ id: "closed", rect: { y: 1700 }, text: "Closed panel", style: ink("#dddddd") }] },
+		{ attributes: { hidden: "until-found" }, rect: { y: 1800 }, children: [{ id: "findable", rect: { y: 1800 }, text: "Findable panel", style: ink("#eeeeee") }] },
+		{ rect: { y: 1900, width: 1280, height: 60 }, style: { "overflow-x": "hidden" }, children: [
+			{ id: "shell-layout", rect: { x: 1220, y: 1900, width: 280 }, text: "A clipped desktop column", style: ink("#ababab") },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#whole", "#below-fold", "#shell-layout"])
+	const base = buildSnapshot([
+		{ rect: { width: 1280, height: 800 }, style: { position: "fixed", "overflow-y": "hidden" }, scroll: { clientHeight: 800, scrollHeight: 1800 }, children: [
+			{ id: "frame-foot", rect: { y: 1500 }, text: "Faint frame footer", style: ink("#cccccc") },
+		] },
+	])
+	const framed = { ...base, document: { ...base.document, scrollHeight: 800 },
+		elements: base.elements.map((el) => el.tag === "body" ? { ...el, style: { ...el.style, "overflow-y": "hidden" } } : el) }
+	expect(lowContrast.check({ snapshot: framed, config: {} }).map((h) => h.element?.selector)).toEqual(["#frame-foot"])
+})
+
+test("#given a declared mockup and labelled screenshot #then hidden drawings claim no pair and screenshot pairs stay separate", () => {
+	const snapshot = buildSnapshot([
+		{ attributes: { inert: "", class: "demo-frame" }, rect: { width: 420, height: 190 }, children: [
+			{ id: "hidden-one", text: "Draft", style: ink("#cccccc") },
+			{ text: "Saved", style: ink("#cccccc") },
+			{ text: "Ready", style: ink("#cccccc") },
+		] },
+		{ id: "outside", text: "Your subscription renews on the first day of every month", style: ink("#cccccc") },
+		{ attributes: { "aria-label": "A screenshot of the billing screen", class: "shot-frame" }, rect: { y: 300, width: 420, height: 190 }, children: [
+			{ id: "shot", rect: { y: 320 }, text: "Billing", style: ink("#bbbbbb") },
+		] },
+		{ id: "after-shot", rect: { y: 600 }, text: "Your plan renews next month", style: ink("#bbbbbb") },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#outside", "#shot", "#after-shot"])
+})
+
+test("#given captured opacity motion and a paused vanishing loop #then only steady or held-end ink is scored", () => {
+	const snapshot = buildSnapshot([
+		{ id: "transition", text: "A reveal in progress", motion: ["opacity"], style: { ...ink("#bbbbbb"), opacity: "0.3" } },
+		{ id: "finite", text: "The held entrance label", motion: ["opacity"], style: { ...ink("#bbbbbb"), opacity: "0.3",
+			"animation-name": "enter", "animation-duration": "1s", "animation-iteration-count": "1", "animation-fill-mode": "forwards", "animation-play-state": "running" } },
+		{ id: "paused", text: "A parked loop label", style: { ...ink("#bbbbbb"), opacity: "0.4",
+			"animation-name": "cycle", "animation-iteration-count": "infinite", "animation-play-state": "paused" } },
+		{ id: "steady", text: "Deliberately faded copy", style: { ...ink("#cccccc"), opacity: "0.4" } },
+	], { cssText: ["@keyframes enter { from { opacity: 0; } to { opacity: 1; } } @keyframes cycle { 0% { opacity: 0; } 100% { opacity: 1; } }"] })
+	expect(lowContrast.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#finite", "#steady"])
+})

package/dist/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/dist/skills/frontend/scripts/detect/rules/color/placeholder-contrast.test.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lowContrast } from "./low-contrast"
+import { textBackgrounds } from "./support/text-colors"
+
+test("#given shown placeholders beside readable host ink #then each field reports its own placeholder without pair dedupe", () => {
+	const snapshot = buildSnapshot([
+		{ id: "first", tag: "input", attributes: { placeholder: "Name" }, style: { color: "#111111", "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		{ id: "second", tag: "textarea", attributes: { placeholder: "Notes" }, style: { color: "#111111", "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		{ id: "alpha", tag: "input", attributes: { placeholder: "Email" }, style: { color: "#111111", "background-color": "#f5f5f5" }, placeholder: { color: "rgba(255,255,255,0.4)" } },
+		{ tag: "label", text: "Team", children: [
+			{ id: "labelled", tag: "input", attributes: { placeholder: "Team name" }, style: { "background-color": "#ffffff" }, placeholder: { color: "#bbbbbb" } },
+		] },
+	])
+	const hits = lintSnapshot(snapshot, { rules: [lowContrast] })
+	expect(hits.map((hit) => hit.location.kind === "element" ? hit.location.selector : "")).toEqual(["#first", "#second", "#alpha", "#labelled"])
+	expect(hits.every((hit) => hit.severity === "error")).toBe(true)
+})
+
+test("#given absent hidden transparent disabled and readable placeholders #then none reports", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "input", attributes: { placeholder: "Filled", value: "Existing value" } },
+		{ tag: "input", attributes: { placeholder: "Transparent" }, placeholder: { color: "rgba(255,255,255,0.02)" } },
+		{ tag: "input", attributes: { placeholder: "" }, placeholder: { color: "#bbbbbb" } },
+		{ tag: "input", attributes: { placeholder: "Disabled", disabled: "" }, placeholder: { color: "#bbbbbb" } },
+		{ tag: "input", attributes: { placeholder: "Readable" }, placeholder: { color: "#111111" } },
+		{ tag: "input", attributes: { type: "range", placeholder: "Not text" }, placeholder: { color: "#bbbbbb" } },
+		{ style: { display: "none" }, children: [{ tag: "textarea", attributes: { placeholder: "Hidden" }, placeholder: { color: "#bbbbbb" } }] },
+		{ tag: "input", attributes: { placeholder: "Waived", "data-detect-ignore": "low-contrast" }, placeholder: { color: "#bbbbbb" } },
+	])
+	expect(lintSnapshot(snapshot, { rules: [lowContrast] })).toEqual([])
+})
+
+test("#given large bold placeholders and translucent field layers #then thresholds use the host size and composited surface", () => {
+	const snapshot = buildSnapshot([
+		{ id: "small", tag: "input", attributes: { placeholder: "Small" }, style: { "font-size": "16px" }, placeholder: { color: "#888888" } },
+		{ id: "large", tag: "input", attributes: { placeholder: "Large" }, style: { "font-size": "24px" }, placeholder: { color: "#888888" } },
+		{ id: "bold", tag: "input", attributes: { placeholder: "Bold" }, style: { "font-size": "18.66px", "font-family": "Brand-SemiBold" }, placeholder: { color: "#888888" } },
+		{ style: { "background-color": "#0f0f11" }, children: [
+			{ style: { "background-color": "rgba(255,255,255,0.15)" }, children: [
+				{ id: "frosted", tag: "input", attributes: { placeholder: "Frosted" }, style: { "background-color": "rgba(255,255,255,0.2)" }, placeholder: { color: "#bbbbbb" } },
+			] },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#small", "#frosted"])
+})
+
+test("#given supported modern colors and an unreadable nearer surface #then valid surfaces score and unknown paint stops the walk", () => {
+	const snapshot = buildSnapshot([
+		{ id: "p3", text: "Dim copy", rect: { y: 0 }, style: { color: "color(display-p3 0.35 0.35 0.36)", "background-color": "color(display-p3 0.07 0.07 0.08)" } },
+		{ id: "lch", text: "Warm dim copy", rect: { y: 200 }, style: { color: "lch(35 3 80)", "background-color": "lch(8 3 80)" } },
+		{ rect: { y: 400, width: 600, height: 200 }, style: { "background-color": "#ffffff" }, children: [
+			{ rect: { y: 420, width: 500, height: 100 }, style: { "background-color": "color(rec2020 0.05 0.05 0.05)" }, children: [
+				{ id: "unknown", rect: { y: 440 }, text: "Do not borrow the farther white", style: { color: "#eeeeee" } },
+			] },
+		] },
+	])
+	expect(lowContrast.check({ snapshot, config: {} }).map((hit) => hit.element?.selector)).toEqual(["#p3", "#lch"])
+	const unknown = snapshot.elements.find((el) => el.attributes["id"] === "unknown")
+	expect(unknown === undefined ? null : textBackgrounds(snapshot, unknown)).toEqual([])
+})

package/dist/skills/frontend/scripts/detect/rules/color/radial-halo.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { radialHalo } from "./radial-halo"
+
+test("#given dark radial washes and alternate gradients #then only saturated wide halos report", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#080808" }, children: [
+		...Object.entries({
+			halo: "radial-gradient(circle, rgba(80,111,255,0.85), transparent 70%)",
+			second: "radial-gradient(circle, rgba(255,90,120,0.85), transparent 70%)",
+			soft: "radial-gradient(circle, rgba(80,111,255,0.3), transparent)",
+			neutral: "radial-gradient(circle, rgba(255,255,255,0.85), transparent)",
+			opaque: "radial-gradient(circle, #1e3a8a, #0f172a)",
+			linear: "linear-gradient(#506fff, transparent)",
+			small: "radial-gradient(circle, #506fff 0px, transparent 20px)",
+			repeat: "repeating-radial-gradient(circle, #506fff, transparent)",
+			vignette: "radial-gradient(circle, #020408, transparent)",
+		}).map(([id, image]) => ({ id, style: { "background-image": image } })),
+	] }])
+	expect(radialHalo.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#halo"])
+})
+
+test("#given pseudo halos on dark and light grounds #then only dark visible hosts report", () => {
+	const before = { "background-image": "radial-gradient(circle, #506fff, transparent)" }
+	const snapshot = buildSnapshot([
+		{ id: "dark", style: { "background-color": "#080808" }, before },
+		{ id: "light", style: { "background-color": "#ffffff" }, before },
+		{ id: "hidden", style: { "display": "none", "background-color": "#080808" }, before },
+	])
+	expect(radialHalo.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#dark"])
+})
+
+test("#given a light page with a local translucent panel #then the panel does not turn on the dark-page source form", () => {
+	const base = buildSnapshot([
+		{ style: { "background-color": "rgba(18,20,26,0.86)" }, children: [
+			{ style: { "background-image": "radial-gradient(circle, #a855f7, transparent 70%)" } },
+		] },
+	], { cssText: ["body { background: #fff; } .glass { background: rgba(18,20,26,0.86); }"] })
+	const snapshot = { ...base, elements: base.elements.map((el) => el.tag === "body" ? { ...el, style: { ...el.style, "background-color": "#ffffff" } } : el) }
+	expect(radialHalo.check({ snapshot, config: {} })).toEqual([])
+})

package/dist/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/dist/skills/frontend/scripts/detect/rules/color/radial-spotlight-glow.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { radialSpotlightGlow } from "./radial-spotlight-glow"
+
+test("#given colored translucent spotlights and faint or opaque cousins #then only prominent low alpha glows report", () => {
+	const snapshot = buildSnapshot([{ style: { "background-color": "#0b0d13" }, children: Object.entries({
+		blue: "radial-gradient(circle, rgba(80,111,255,0.26), transparent 44%)",
+		rose: "radial-gradient(circle, rgba(255,90,120,0.12), rgba(255,90,120,0.28), transparent)",
+		hex: "radial-gradient(circle, #506fff66, transparent)",
+		faint: "radial-gradient(circle, rgba(26,189,226,0.1), transparent)",
+		opaque: "radial-gradient(circle, rgba(80,111,255,0.85), transparent)",
+		neutral: "radial-gradient(circle, rgba(255,255,255,0.35), transparent)",
+		linear: "linear-gradient(rgba(80,111,255,0.28), transparent)",
+	}).map(([id, image], i) => ({ id, text: "Section headline", rect: { width: 900, height: 600, y: i * 700 }, style: { "background-image": image } })) }])
+	expect(radialSpotlightGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#blue", "#rose", "#hex"])
+})
+
+test("#given pale layers, small badges, bare panels and photo heroes #then only a bright photo overlay reports", () => {
+	const image = "radial-gradient(circle, rgba(139,92,246,0.42), transparent)"
+	const snapshot = buildSnapshot([
+		{ id: "photo", text: "Hero headline", rect: { width: 900, height: 600 }, style: { "background-image": `${image}, url(photo.jpg)` } },
+		{ id: "small", text: "Badge", rect: { width: 40, height: 40, y: 700 }, style: { "background-image": image } },
+		{ id: "bare", rect: { width: 900, height: 600, y: 800 }, style: { "background-image": image } },
+		{ id: "pale", text: "Pale headline", rect: { width: 900, height: 600, y: 1500 }, style: { "background-image": "radial-gradient(circle, rgba(63,227,223,0.2), transparent), linear-gradient(#ecf4f8, #ffffff)" } },
+	])
+	expect(radialSpotlightGlow.check({ snapshot, config: {} }).map((h) => h.element?.selector)).toEqual(["#photo"])
+})

package/dist/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) }] : []
+	}),
+}