lazycodex-ai 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/css-effects.ts

@@ -0,0 +1,81 @@
+import { luminance } from "../../../core/color"
+import { cssScopes, declarations } from "./css-scopes"
+import { authoredColor, authoredColors } from "./source-color"
+
+export function resolveValues(text: string): string {
+	const tokens = new Map([...text.matchAll(/(--[\w-]+)\s*:\s*([^;{}]+)/g)].map((m) => [m[1] ?? "", m[2] ?? ""]))
+	let out = text
+	for (let i = 0; i < 8; i++) {
+		const next = out.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*))?\)/g, (whole: string, name: string, fallback: string | undefined) => tokens.get(name) ?? fallback ?? whole)
+		if (out === next) break
+		out = next
+	}
+	return out
+}
+
+export function darkBackground(text: string): boolean {
+	const resolved = resolveValues(text)
+	if (/\bbg-(?:gray|slate|zinc|neutral|stone)-(?:9\d{2}|800)\b/.test(resolved)) return true
+	const dark = (value: string): boolean => {
+		const color = authoredColor(value.trim())
+		return color !== null && color.a > 0.5 && luminance(color) < 0.1
+	}
+	for (const m of resolved.matchAll(/(?<![-\w])background(?:-color)?\s*:\s*([^;{}]+)/gi)) {
+		const value = (m[1] ?? "").trim()
+		if (/^(?:#(?:[01][0-9a-f]{5}|2[0-3][0-9a-f]{4}|[01][0-9a-f]{2})\b|rgb\(\s*\d{1,2}\s*,\s*\d{1,2}\s*,\s*\d{1,2}\s*\))/i.test(value) && dark(value)) return true
+	}
+	const roots = [
+		...[...resolved.matchAll(/(?:^|[}\s,;>])(?:body|html|:root)\s*(?:,[^{]*)?\{([^}]*)\}/gi)].map((m) => m[1] ?? ""),
+		...[...resolved.matchAll(/<body[^>]*\bstyle\s*=\s*"([^"]*)"/gi)].map((m) => m[1] ?? ""),
+	]
+	return roots.some((scope) => [...scope.matchAll(/(?<![-\w])background(?:-color)?\s*:\s*([^;{}]+)/gi)].some((m) => dark(m[1] ?? "")))
+}
+
+export function haloOffsets(text: string): readonly number[] {
+	if (!darkBackground(text)) return []
+	const resolved = resolveValues(text)
+	const offsets: number[] = []
+	for (const m of resolved.matchAll(/(?<![-\w])background(?:-image)?\s*:\s*([^;{}]+)/gi)) {
+		const value = m[1] ?? ""
+		if (/url\s*\(/i.test(value)) continue
+		for (const g of value.matchAll(/(?<!repeating-)radial-gradient\(/gi)) {
+			let end = (g.index ?? 0) + g[0].length
+			let depth = 1
+			for (; end < value.length && depth > 0; end++) {
+				if (value[end] === "(") depth++
+				else if (value[end] === ")") depth--
+			}
+			const gradient = value.slice(g.index, end)
+			if ([...gradient.matchAll(/(-?[\d.]+)px\b/g)].some((p) => Math.abs(Number(p[1])) <= 24)) continue
+			const colors = authoredColors(gradient)
+			const first = colors[0]
+			const last = /\btransparent\s*(?:[\d.%\s]*)\)$/.test(gradient) ? { a: 0 } : colors.at(-1)
+			if (!first || !last || first.a < 0.7 || last.a > 0.05 || Math.max(first.r, first.g, first.b) - Math.min(first.r, first.g, first.b) < 24) continue
+			offsets.push(m.index ?? 0)
+		}
+	}
+	return offsets
+}
+
+export function marqueeSelectors(text: string): readonly string[] {
+	const names: string[] = []
+	for (const m of text.matchAll(/@(?:-webkit-)?keyframes\s+([\w-]+)\s*\{/g)) {
+		let depth = 1
+		let end = (m.index ?? 0) + m[0].length
+		for (; end < text.length && depth > 0; end++) {
+			if (text[end] === "{") depth++
+			else if (text[end] === "}") depth--
+		}
+		const body = text.slice((m.index ?? 0) + m[0].length, end)
+		if (/\btranslate(?:X)?\([^)]*(?:-?100|-?50)%/i.test(body)) names.push(m[1] ?? "")
+	}
+	const found = new Set<string>()
+	if (/<marquee\b/i.test(text)) found.add("marquee")
+	for (const scope of cssScopes(text)) {
+		const d = declarations(scope.body)
+		const animation = d.get("animation") ?? ""
+		if (!/\binfinite\b/.test(animation + " " + (d.get("animation-iteration-count") ?? ""))) continue
+		for (const name of names) if ((animation + " " + (d.get("animation-name") ?? "")).split(/[,\s]+/).includes(name)) found.add(`${scope.selector} ${name}`)
+	}
+	return [...found]
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/css-scopes.ts

@@ -0,0 +1,131 @@
+export type CssScope = {
+	readonly selector: string
+	readonly start: number
+	readonly end: number
+	readonly body: string
+	readonly parent: CssScope | null
+}
+
+export function cssScopes(text: string, sass = false): readonly CssScope[] {
+	if (sass) return sassScopes(text)
+	const scopes: CssScope[] = []
+	const stack: { selector: string; start: number; content: number; boundary: number; parent: number | null }[] = []
+	let quote = ""
+	let boundary = 0
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (quote) {
+			if (ch === "\\") i++
+			else if (ch === quote) quote = ""
+			continue
+		}
+		if (ch === '"' || ch === "'") { quote = ch; continue }
+		if (ch === "{") {
+			if (/[$#@]/.test(text[i - 1] ?? "")) {
+				let depth = 1
+				while (++i < text.length && depth > 0) {
+					if (text[i] === "{") depth++
+					if (text[i] === "}") depth--
+				}
+				if (/^\s*(?:&|@|[.#])/.test(text.slice(i))) {
+					const parent = stack.at(-1)
+					if (parent) parent.boundary = i
+					else boundary = i
+				}
+				i--
+				continue
+			}
+			const from = stack.at(-1)?.boundary ?? boundary
+			const raw = text.slice(from, i)
+			const selector = raw.trim()
+			const at = from + raw.length - raw.trimStart().length
+			stack.push({ selector, start: at, content: i + 1, boundary: i + 1, parent: stack.at(-1)?.content ?? null })
+		} else if (ch === "}") {
+			const open = stack.pop()
+			if (open) scopes.push({ selector: open.selector, start: open.start, end: i, body: text.slice(open.content, i), parent: null })
+			const parent = stack.at(-1)
+			if (parent) parent.boundary = i + 1
+			else boundary = i + 1
+		} else if (ch === ";" || ch === "`") {
+			const parent = stack.at(-1)
+			if (parent) parent.boundary = i + 1
+			else boundary = i + 1
+		}
+	}
+	const rootBody = text.replace(/\{[\s\S]*\}/g, "")
+	if (/^\s*(?:[-\w]+\s*:|\$\{)/.test(text) || /^\s*(?:position|border|padding|color|background)[-\w]*\s*:/.test(rootBody)) scopes.push({ selector: "&", start: 0, end: text.length, body: text, parent: null })
+	const ordered: CssScope[] = []
+	for (const scope of scopes.sort((a, b) => a.start - b.start || b.end - a.end)) {
+		ordered.push({ ...scope, parent: ordered.filter((p) => p.start <= scope.start && p.end > scope.end).sort((a, b) => b.start - a.start)[0] ?? null })
+	}
+	return ordered
+}
+
+function sassScopes(text: string): readonly CssScope[] {
+	const rows = [...text.matchAll(/^.*$/gm)].map((m) => ({ line: m[0], offset: m.index ?? 0 }))
+	const scopes: CssScope[] = []
+	for (const [i, row] of rows.entries()) {
+		const selector = row.line.trim()
+		if (!selector || /^(?:[-\w]+\s*:|\$|\/\/)/.test(selector)) continue
+		const indent = row.line.length - row.line.trimStart().length
+		let end = text.length
+		for (const next of rows.slice(i + 1)) {
+			if (next.line.trim() && next.line.length - next.line.trimStart().length <= indent) { end = next.offset; break }
+		}
+		const bodyRows = rows.slice(i + 1).filter((r) => r.offset < end && r.line.trim())
+		const level = Math.min(...bodyRows.map((r) => r.line.length - r.line.trimStart().length))
+		const body = bodyRows.filter((r) => r.line.length - r.line.trimStart().length === level).map((r) => r.line).join("\n")
+		scopes.push({ selector, start: row.offset + indent, end, body, parent: null })
+	}
+	const ordered: CssScope[] = []
+	for (const s of scopes) ordered.push({ ...s, parent: ordered.filter((p) => p.start < s.start && p.end >= s.end).sort((a, b) => b.start - a.start)[0] ?? null })
+	return ordered
+}
+
+export function declarations(body: string): ReadonlyMap<string, string> {
+	const out = new Map<string, string>()
+	let quote = ""
+	let parens = 0
+	let braces = 0
+	let start = 0
+	const push = (end: number): void => {
+		const m = /^\s*["']?([-\w]+)["']?\s*:\s*([\s\S]*)$/.exec(body.slice(start, end))
+		if (m?.[1] && m[2] !== undefined) out.set(m[1], m[2].trim().replace(/\s*!important\s*$/i, ""))
+	}
+	for (let i = 0; i < body.length; i++) {
+		const ch = body[i]
+		if (quote) {
+			if (ch === "\\") i++
+			else if (ch === quote) quote = ""
+		} else if (ch === "'" || ch === '"' || ch === "`") quote = ch
+		else if (ch === "(" || ch === "[") parens++
+		else if (ch === ")" || ch === "]") parens--
+		else if (ch === "{") braces++
+		else if (ch === "}") {
+			braces--
+			if (braces === 0) start = i + 1
+		} else if ((ch === ";" || ch === "\n" || ch === ",") && parens === 0 && braces === 0) { push(i); start = i + 1 }
+	}
+	if (start < body.length) push(body.length)
+	return out
+}
+
+export function selectorHost(scope: CssScope): string {
+	if (!scope.parent) return scope.selector
+	const parent = selectorHost(scope.parent)
+	if (scope.selector.startsWith("@") || scope.selector.startsWith("+")) return parent
+	return scope.selector.includes("&") ? scope.selector.replace(/&/g, parent) : scope.selector
+}
+
+export const cleanSelector = (selector: string): string => selector.replace(/::?(?:before|after)\b/g, "").replace(/:(?:hover|focus|active|visited)(?:-[\w-]+)?/g, "").trim()
+
+export function selectorMatches(base: string, target: string): boolean {
+	return base.split(",").some((part) => {
+		const a = cleanSelector(part.trim())
+		const b = cleanSelector(target.trim())
+		if (/::?(?:before|after)/.test(part) !== /::?(?:before|after)/.test(target)) return false
+		if (a === b) return true
+		const tokens = a.match(/\[[^\]]+\]|[.#][\w-]+|^[a-z][\w-]*/g)
+		return tokens !== null && tokens.every((token) => b.includes(token)) && !/[ >+~]/.test(a)
+	})
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/image-tags.ts

@@ -0,0 +1,113 @@
+function closingBrace(text: string, start: number): number {
+	let depth = 0
+	let quote = ""
+	for (let i = start; i < text.length; i++) {
+		const ch = text[i]
+		if (quote) {
+			if (ch === "\\") i++
+			else if (ch === quote) quote = ""
+		} else if (ch === "'" || ch === '"' || ch === "`") quote = ch
+		else if (ch === "{") depth++
+		else if (ch === "}" && --depth === 0) return i
+	}
+	return text.length
+}
+
+export function imageTags(text: string, script: boolean): readonly { readonly tag: string; readonly offset: number }[] {
+	const images: { tag: string; offset: number }[] = []
+	let depth = 0
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (ch === "{" && depth > 0) {
+			const end = closingBrace(text, i)
+			images.push(...imageTags(text.slice(i + 1, end), true).map((hit) => ({ tag: hit.tag, offset: i + 1 + hit.offset })))
+			i = end
+			continue
+		}
+		if ((script && depth === 0) && (ch === '"' || ch === "'" || ch === "`")) {
+			const quote = ch
+			while (++i < text.length) {
+				if (text[i] === "\\") i++
+				else if (text[i] === quote) break
+			}
+			continue
+		}
+		if (script && depth === 0 && ch === "/" && /(?:^|[=(:,!&|?;{}]|\breturn)\s*$/.test(text.slice(0, i))) {
+			let bracket = false
+			while (++i < text.length) {
+				if (text[i] === "\\") i++
+				else if (text[i] === "[") bracket = true
+				else if (text[i] === "]") bracket = false
+				else if (text[i] === "/" && !bracket) break
+			}
+			continue
+		}
+		if (ch !== "<" || !/^<\/?[A-Za-z_$\u0080-\uffff>]/.test(text.slice(i, i + 3))) continue
+		const start = i
+		let quote = ""
+		for (; i < text.length && i - start < 8192; i++) {
+			const c = text[i]
+			if (quote) {
+				if (c === "\\") i++
+				else if (c === quote) quote = ""
+			} else if (c === '"' || c === "'") quote = c
+			else if (c === "{") {
+				const end = closingBrace(text, i)
+				images.push(...imageTags(text.slice(i + 1, end), script).map((hit) => ({ tag: hit.tag, offset: i + 1 + hit.offset })))
+				i = end
+			} else if (c === ">") break
+		}
+		const tag = text.slice(start, i + 1)
+		if (/^<img\b/i.test(tag) && tag.endsWith(">")) images.push({ tag, offset: start })
+		if (/^<\/(?:[A-Za-z_$]|>)/.test(tag)) depth = Math.max(0, depth - 1)
+		else if (!/\/>$/.test(tag) && !/^<(?:img|input|br|hr|meta|link)\b/i.test(tag)) depth++
+		if (/^<(?:script|style)\b/i.test(tag)) {
+			const end = new RegExp(`</${/^<(\w+)/.exec(tag)?.[1] ?? ""}\\s*>`, "gi")
+			end.lastIndex = i + 1
+			const close = end.exec(text)
+			if (close) { i = close.index + close[0].length - 1; depth = Math.max(0, depth - 1) }
+		}
+	}
+	return images
+}
+
+export function missingImageSource(tag: string, ext: string): boolean {
+	let i = 4
+	while (i < tag.length) {
+		while (/[\s/]/.test(tag[i] ?? "")) i++
+		if (i >= tag.length || tag[i] === ">") break
+		if (tag[i] === "{") {
+			const end = closingBrace(tag, i)
+			const expression = tag.slice(i + 1, end).trim()
+			if (/^\.\.\./.test(expression) || (["svelte", "astro"].includes(ext) && /^(?:src|srcset)$/.test(expression))) return false
+			i = end + 1
+			continue
+		}
+		const start = i
+		while (i < tag.length && !/[\s=/>]/.test(tag[i] ?? "")) i++
+		const name = tag.slice(start, i)
+		const base = name.split(".")[0] ?? ""
+		const source = /(?:^|[:-])(?:src|srcset)$/i.test(base)
+		if (ext === "vue" && ((source && name.includes(":")) || name === "v-bind")) return false
+		while (/\s/.test(tag[i] ?? "")) i++
+		if (tag[i] !== "=") {
+			if (source && name.includes(":")) return false
+			if (i === start) i++
+			continue
+		}
+		i++
+		while (/\s/.test(tag[i] ?? "")) i++
+		if (tag[i] === "{") {
+			i = closingBrace(tag, i) + 1
+			if (source) return false
+			continue
+		}
+		const quote = tag[i] === "'" || tag[i] === '"' ? tag[i++] : null
+		const valueStart = i
+		while (i < tag.length && (quote ? tag[i] !== quote : !/[\s>]/.test(tag[i] ?? ""))) i++
+		const value = tag.slice(valueStart, i).trim()
+		if (quote) i++
+		if (source && value && value !== "#") return false
+	}
+	return true
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/js-punctuation.ts

@@ -0,0 +1,34 @@
+type Punctuation = { readonly ch: string; readonly at: number; readonly paren: number; readonly brace: number }
+
+export function* jsPunctuation(text: string): Generator<Punctuation> {
+	let quote = ""
+	let template = false
+	let paren = 0
+	let brace = 0
+	const interpolations: number[] = []
+	for (let at = 0; at < text.length; at++) {
+		const ch = text[at] ?? ""
+		if (quote) {
+			if (ch === "\\") at++
+			else if (ch === quote) quote = ""
+			continue
+		}
+		if (template && interpolations.length === 0) {
+			if (ch === "\\") at++
+			else if (ch === "$" && text[at + 1] === "{") { interpolations.push(++brace); at++ }
+			else if (ch === "`") template = false
+			continue
+		}
+		if (ch === '"' || ch === "'") { quote = ch; continue }
+		if (ch === "`") { template = true; continue }
+		if (ch === "(") { paren++; continue }
+		if (ch === ")") { paren--; continue }
+		if (ch === "{") { brace++; continue }
+		if (ch === "}") {
+			brace--
+			if (interpolations.length > 0 && brace < (interpolations.at(-1) ?? 0)) interpolations.pop()
+			continue
+		}
+		yield { ch, at, paren, brace }
+	}
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/markup-scope.ts

@@ -0,0 +1,44 @@
+import { jsPunctuation } from "./js-punctuation"
+
+export function tagAt(text: string, index: number): string {
+	for (const m of text.matchAll(/<[a-z][\w:.-]*(?:[^"'`{}>]|"[^"]*"|'[^']*'|`[^`]*`|\{(?:[^{}]|\{[^{}]*\})*\})*>/gi)) {
+		if ((m.index ?? 0) <= index && index <= (m.index ?? 0) + m[0].length) return m[0]
+	}
+	return text
+}
+
+export function exclusiveScopes(text: string): readonly string[] {
+	let question = -1
+	let paren = 0
+	let brace = 0
+	let colon = -1
+	let nested = 0
+	let end = text.length
+	for (const token of jsPunctuation(text)) {
+		const sameDepth = token.paren === paren && token.brace === brace
+		const isQuestion = token.ch === "?" && !/[?.]/.test(text[token.at - 1] ?? "") && !/[?.]/.test(text[token.at + 1] ?? "")
+		if (colon >= 0) {
+			if (token.ch === "," && sameDepth) { end = token.at; break }
+		} else if (question < 0 && isQuestion) {
+			question = token.at
+			paren = token.paren
+			brace = token.brace
+		} else if (question >= 0 && isQuestion && sameDepth) nested++
+		else if (question >= 0 && token.ch === ":" && sameDepth) {
+			if (nested > 0) nested--
+			else colon = token.at
+		}
+	}
+	if (question < 0 || colon < 0) return [text]
+	return [text.slice(question + 1, colon), text.slice(colon + 1, end)].flatMap((part) => exclusiveScopes(part).map((arm) => text.slice(0, question) + arm + text.slice(end)))
+}
+
+export function solidBackground(scope: string, gray = false): string | null {
+	for (const m of scope.matchAll(/\bbg-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(\d+)\b/g)) {
+		const at = m.index ?? 0
+		const prefix = scope.slice(0, at).split(/\s/).at(-1) ?? ""
+		const state = /(?:^|:)(?:!?hover|focus(?:-visible|-within)?|active|visited|disabled|checked|open|enabled|invalid|placeholder|group-[^:]*|peer-[^:]*|aria-[^:]*|data-[^:]*):$/.test(prefix)
+		if (scope[at + m[0].length] !== "/" && !state && (!gray || Number(m[1]) >= 200)) return m[0]
+	}
+	return null
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/source-color.ts

@@ -0,0 +1,42 @@
+import { parseColor, type Rgba } from "../../../core/color"
+
+const named: Readonly<Record<string, string>> = {
+	black: "#000", white: "#fff", gray: "#808080", grey: "#808080", silver: "#c0c0c0", dimgray: "#696969", dimgrey: "#696969", darkgray: "#a9a9a9", darkgrey: "#a9a9a9",
+	lightgray: "#d3d3d3", lightgrey: "#d3d3d3", gainsboro: "#dcdcdc", whitesmoke: "#f5f5f5", red: "#f00", blue: "#00f", green: "#008000", lime: "#0f0", yellow: "#ff0",
+	orange: "#ffa500", purple: "#800080", rebeccapurple: "#663399", pink: "#ffc0cb", teal: "#008080", cyan: "#0ff", aqua: "#0ff", magenta: "#f0f", fuchsia: "#f0f", coral: "#ff7f50", crimson: "#dc143c", navy: "#000080", maroon: "#800000", olive: "#808000",
+}
+
+export function authoredColor(value: string): Rgba | null {
+	const text = value.trim().toLowerCase()
+	const parsed = parseColor(named[text] ?? text)
+	if (parsed) return parsed
+	const match = /^(hsla?|hwb)\((.*)\)$/.exec(text)
+	if (!match) return null
+	const parts = (match[2] ?? "").replace(/[,/]/g, " ").split(/\s+/).filter(Boolean)
+	const hue = Number.parseFloat(parts[0] ?? "0") / (parts[0]?.endsWith("turn") ? 1 : parts[0]?.endsWith("rad") ? 2 * Math.PI : 360)
+	const s = Number.parseFloat(parts[1] ?? "0") / 100
+	const l = Number.parseFloat(parts[2] ?? "0") / 100
+	const alpha = parts[3]
+	const a = alpha === undefined ? 1 : Number.parseFloat(alpha) / (alpha.endsWith("%") ? 100 : 1)
+	const channel = (n: number): number => {
+		const k = ((n + hue * 12) % 12 + 12) % 12
+		return l - s * Math.min(l, 1 - l) * Math.max(-1, Math.min(k - 3, 9 - k, 1))
+	}
+	if (match[1] !== "hwb") return { r: channel(0) * 255, g: channel(8) * 255, b: channel(4) * 255, a }
+	if (s + l >= 1) return { r: 255 * s / (s + l), g: 255 * s / (s + l), b: 255 * s / (s + l), a }
+	const pure = authoredColor(`hsl(${hue * 360} 100% 50%)`)
+	return pure ? { r: pure.r * (1 - s - l) + 255 * s, g: pure.g * (1 - s - l) + 255 * s, b: pure.b * (1 - s - l) + 255 * s, a } : null
+}
+
+export function authoredColors(value: string): readonly Rgba[] {
+	return [...value.matchAll(/(?:rgba?|hsla?|hwb|color|oklab|oklch)\([^()]*\)|#[0-9a-f]{3,8}\b|\b[a-z]+\b/gi)].flatMap((m) => {
+		const color = authoredColor(m[0])
+		return color ? [color] : []
+	})
+}
+
+export function chromatic(value: string): boolean {
+	const color = authoredColor(value) ?? authoredColors(value)[0]
+	if (color) return color.a >= 0.1 && Math.max(color.r, color.g, color.b) - Math.min(color.r, color.g, color.b) >= 30
+	return !/\b(?:transparent|currentcolor|black|white|gr[ae]y|silver|gainsboro|whitesmoke)\b|url\(/i.test(value)
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/source-shadow.ts

@@ -0,0 +1,15 @@
+import { parseShadow, type ShadowLayer } from "../../../core/shadow"
+import { authoredColor } from "./source-color"
+
+export function sourceShadows(value: string, status = false): readonly ShadowLayer[] {
+	const filled = value.replace(/var\([^)]*\)|(?:rgba?|hsla?|hwb|color|oklab|oklch)\([^()]*\)|#[0-9a-f]{3,8}\b|\b[a-z]+\b(?!\s*\()/gi, (token) => {
+		if (token.toLowerCase() === "inset" || token.toLowerCase() === "px") return token
+		if (token.startsWith("var(")) {
+			const colored = /(?:^|-)(?:accent|kinpaku|patina|gold|red|orange|amber|yellow|lime|green|emerald|teal|cyan|blue|indigo|violet|purple|magenta|pink|rose|coral|aqua|mint|burgundy|crimson|scarlet)(?:-|[);])/i.test(token) || (status && /danger|error|warning|success|broken/.test(token))
+			return colored ? "#d0342c" : "#000"
+		}
+		const c = authoredColor(token)
+		return c ? `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})` : token
+	})
+	return parseShadow(filled)
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/source/support/source-text.ts

@@ -0,0 +1,110 @@
+import { extensionOf, lineAt, positionAt } from "../../../core/source"
+import type { SourceContext, SourceHit } from "../../../rule"
+
+export const sourceExtensions = ["css", "scss", "sass", "less", "js", "jsx", "ts", "tsx", "mjs", "cjs", "vue", "svelte", "astro"]
+export const componentExtensions = ["vue", "svelte", "astro"]
+export const sheetExtensions = ["css", "scss", "sass", "less"]
+export type SourcePass = { readonly text: string; readonly offset: number; readonly css: boolean; readonly sass: boolean }
+export type LineMatch = {
+	readonly match: RegExpMatchArray
+	readonly line: string
+	readonly scope: string
+	readonly offset: number
+	readonly pass: SourcePass
+	readonly source: string
+	readonly context: SourceContext
+}
+
+const blank = (text: string): string => text.replace(/[^\n\r]/g, " ")
+
+export function stripComments(text: string, script: boolean): string {
+	let out = ""
+	let quote = ""
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i] ?? ""
+		const next = text[i + 1]
+		if (quote) {
+			out += ch
+			if (ch === "\\") out += text[++i] ?? ""
+			else if (ch === quote) quote = ""
+			continue
+		}
+		if (ch === '"' || ch === "'" || (script && ch === "`")) {
+			quote = ch
+			out += ch
+		} else if (ch === "/" && next === "*") {
+			const end = text.indexOf("*/", i + 2)
+			const stop = end < 0 ? text.length : end + 2
+			out += blank(text.slice(i, stop))
+			i = stop - 1
+		} else if (ch === "/" && next === "/" && text[i - 1] !== ":") {
+			const end = text.indexOf("\n", i)
+			const stop = end < 0 ? text.length : end
+			out += blank(text.slice(i, stop))
+			i = stop - 1
+		} else if (text.startsWith("<!--", i)) {
+			const end = text.indexOf("-->", i + 4)
+			const stop = end < 0 ? text.length : end + 3
+			out += blank(text.slice(i, stop))
+			i = stop - 1
+		} else out += ch
+	}
+	return out
+}
+
+export function sourcePasses(context: SourceContext): readonly SourcePass[] {
+	const ext = extensionOf(context.file.path)
+	const css = sheetExtensions.includes(ext)
+	const text = stripComments(context.file.text, !css)
+	const passes: SourcePass[] = [{ text, offset: 0, css, sass: ext === "sass" }]
+	if (componentExtensions.includes(ext)) {
+		for (const m of text.matchAll(/<style\b([^>]*)>([\s\S]*?)<\/style\s*>/gi)) {
+			const body = m[2] ?? ""
+			passes.push({ text: stripComments(body, false), offset: (m.index ?? 0) + m[0].indexOf(">") + 1, css: true, sass: /\blang\s*=\s*["']sass["']/.test(m[1] ?? "") })
+		}
+	}
+	if (["js", "jsx", "ts", "tsx"].includes(ext)) {
+		for (const m of text.matchAll(/(?:\bstyled(?:\s*\([^`]*?\)|\.[\w.]+)(?:\([^`]*?\))?|\bcss|\bcreateGlobalStyle|<style\s+jsx[^>]*>\s*\{)\s*`([\s\S]*?)`/g)) {
+			const body = m[1] ?? ""
+			passes.push({ text: stripComments(body, false), offset: (m.index ?? 0) + m[0].indexOf("`") + 1, css: true, sass: false })
+		}
+	}
+	let source = text
+	for (const pass of passes.slice(1)) source = source.slice(0, pass.offset) + pass.text + source.slice(pass.offset + pass.text.length)
+	return [{ text: source, offset: 0, css, sass: ext === "sass" }, ...passes.slice(1)]
+}
+
+export function sourceHit(text: string, offset: number, message: string, snippet = lineAt(text, offset)): SourceHit {
+	return { ...positionAt(text, offset), message, snippet }
+}
+
+export function lineCheck(patterns: readonly RegExp[], test: (match: LineMatch) => string | null): (context: SourceContext) => readonly SourceHit[] {
+	return (context) => {
+		const hits: SourceHit[] = []
+		for (const pass of sourcePasses(context)) {
+			const lines = pass.text.split("\n")
+			let start = 0
+			for (const [i, line] of lines.entries()) {
+				const scope = pass.css ? lines.slice(Math.max(0, i - 3), i + 4).join(" ") : line
+				for (const pattern of patterns) {
+					for (const match of line.matchAll(pattern)) {
+						const offset = start + (match.index ?? 0)
+						const message = test({ match, line, scope, offset, pass, source: pass.text, context })
+						if (message === null) continue
+						const hit = sourceHit(context.file.text, pass.offset + offset, message, message)
+						if (!hits.some((h) => h.snippet === hit.snippet && Math.abs(h.line - hit.line) <= 2)) hits.push(hit)
+					}
+				}
+				start += line.length + 1
+			}
+		}
+		return hits
+	}
+}
+
+export function pageSource(context: SourceContext): string | null {
+	if (!componentExtensions.includes(extensionOf(context.file.path))) return null
+	return /<!doctype\s|<html[\s>]|<head[\s>]/i.test(context.file.text.replace(/<!--[\s\S]*?-->/g, "")) ? context.file.text : null
+}
+
+export const bodyText = (text: string): string => text.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, " ").replace(/<!--[\s\S]*?-->/g, " ").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ")

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/all-caps-body.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { allCapsBody } from "./all-caps-body"
+
+test("#given sentence-length uppercase prose and short labels #then only prose is flagged", () => {
+	const snapshot = buildSnapshot([
+		{ id: "paragraph", tag: "p", text: "Reading copy ".repeat(8), style: { "text-transform": "uppercase" } },
+		{ id: "blurb", text: "A product blurb with more than eighty characters. ".repeat(3), style: { "text-transform": "uppercase" } },
+		{ id: "short", text: "A short kicker", style: { "text-transform": "uppercase" } },
+		{ id: "heading", tag: "h2", text: "Reading copy ".repeat(8), style: { "text-transform": "uppercase" } },
+		{ id: "normal", text: "Reading copy ".repeat(8) },
+		{ id: "parent", text: "Short bar label", style: { "text-transform": "uppercase" }, children: [{ text: "Child copy ".repeat(8) }] },
+	])
+	expect(allCapsBody.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#paragraph", "#blurb"])
+})
+
+test("#given eighty-character boundary and hidden text #then only the visible boundary reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "floor", text: "a".repeat(80), style: { "text-transform": "uppercase" } },
+		{ id: "below", text: "a".repeat(79), style: { "text-transform": "uppercase" } },
+		{ id: "hidden", text: "a".repeat(80), style: { "text-transform": "uppercase", display: "none" } },
+	])
+	expect(allCapsBody.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#floor"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/all-caps-body.ts

@@ -0,0 +1,15 @@
+import { isHeading, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+
+export const allCapsBody: PageRule = {
+	meta: {
+		id: "all-caps-body", name: "All-caps body text", category: "quality", severity: "warning", engine: "page",
+		description: "Uppercase sentences lose the word shapes readers use to scan prose.",
+		fixHint: "Set running copy in sentence case; keep uppercase for headings and short labels.",
+	},
+	check: ({ snapshot }) => snapshot.elements.filter(e =>
+		visibleText(snapshot, e) && isHeading(e) === false && styleOf(e, "text-transform") === "uppercase" &&
+		e.ownText.trim().replace(/\s+/g, " ").length >= 80)
+		.map(element => ({ element, message: "Uppercase on 80 or more characters of body copy", snippet: shortSnippet(element) })),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/design-system-font-size.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { designSystemFontSize } from "./design-system-font-size"
+
+test("#given a size ramp with near-token and duplicate sizes #then unique off-ramp sizes report", () => {
+	const snapshot = buildSnapshot([
+		{ text: "Token", style: { "font-size": "16px" } },
+		{ text: "Tolerated", style: { "font-size": "16.5px" } },
+		{ id: "off", text: "Off ramp", style: { "font-size": "17px" } },
+		{ text: "Duplicate", style: { "font-size": "17px" } },
+		{ text: "Hidden", style: { "font-size": "19px", visibility: "hidden" } },
+	])
+	expect(designSystemFontSize.check({ snapshot, config: { designTokens: { fontSizes: [16, 24] } } }).map(h => h.element?.selector)).toEqual(["#off"])
+})
+
+test("#given no size ramp #then sizes are not judged", () => {
+	const snapshot = buildSnapshot([{ text: "Off ramp", style: { "font-size": "17px" } }])
+	expect(designSystemFontSize.check({ snapshot, config: {} })).toEqual([])
+	expect(designSystemFontSize.check({ snapshot, config: { designTokens: { fontSizes: [] } } })).toEqual([])
+	expect(designSystemFontSize.check({ snapshot, config: { designTokens: { fontSizes: [16] } } })).toHaveLength(1)
+})