lazycodex-ai 5.1.48 → 5.1.54

package/packages/omo-codex/plugin/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/omo-codex/plugin/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/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/design-system-font-size.ts

@@ -0,0 +1,23 @@
+import { fontSizePx, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+
+export const designSystemFontSize: PageRule = {
+	meta: {
+		id: "design-system-font-size", name: "Font size outside DESIGN.md", category: "quality", severity: "advisory", engine: "page",
+		description: "A rendered font size is outside the configured type ramp.",
+		fixHint: "Use a configured size token or add the intentional step to designTokens.fontSizes.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.fontSizes
+		if (allowed === undefined || allowed.length === 0) return []
+		const seen = new Set<number>()
+		return snapshot.elements.flatMap(element => {
+			const size = fontSizePx(element)
+			if (visibleText(snapshot, element) === false || element.ownText.trim() === "" ||
+				size <= 0 || allowed.some(n => Math.abs(n - size) <= 0.5) || seen.has(size)) return []
+			seen.add(size)
+			return [{ element, message: `${size}px is outside configured type ramp`, snippet: shortSnippet(element) }]
+		})
+	},
+}

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

@@ -0,0 +1,24 @@
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { normalizeFont, primaryFont } from "./support/font-family"
+import { visibleText } from "./support/text-context"
+
+export const designSystemFont: PageRule = {
+	meta: {
+		id: "design-system-font", name: "Font outside DESIGN.md", category: "quality", severity: "warning", engine: "page",
+		description: "A text face is absent from the configured typography tokens.",
+		fixHint: "Use a configured font token or add the intentional face to designTokens.fonts.",
+	},
+	check: ({ snapshot, config }) => {
+		const allowed = config.designTokens?.fonts?.map(normalizeFont)
+		if (allowed === undefined || allowed.length === 0) return []
+		const seen = new Set<string>()
+		return snapshot.elements.flatMap(element => {
+			const family = primaryFont(styleOf(element, "font-family"), true)
+			if (visibleText(snapshot, element) === false || element.ownText.trim() === "" ||
+				family === "" || allowed.includes(family) || seen.has(family)) return []
+			seen.add(family)
+			return [{ element, message: `Font ${family} is outside configured tokens`, snippet: shortSnippet(element) }]
+		})
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/extreme-negative-tracking.ts

@@ -0,0 +1,18 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { cjk, visibleText } from "./support/text-context"
+
+export const extremeNegativeTracking: PageRule = {
+	meta: {
+		id: "extreme-negative-tracking", name: "Crushed letter spacing", category: "slop", severity: "warning", engine: "page",
+		description: "Negative tracking beyond the reading or display threshold damages letter shapes.",
+		fixHint: "Keep tracking at or above -0.07em for reading text and -0.09em for display type.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const tracking = (px(styleOf(element, "letter-spacing")) ?? 0) / size
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 20 ||
+			size <= 0 || tracking >= (size >= 40 ? -0.09 : -0.07) || cjk(element.text)) return []
+		return [{ element, message: `Letter spacing ${tracking.toFixed(2)}em at ${size}px`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/flat-type-hierarchy.ts

@@ -0,0 +1,26 @@
+import { childrenOf, fontSizePx, isHeading } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { readingTags, visibleText } from "./support/text-context"
+import { flatHierarchy } from "./support/type-hierarchy"
+
+export const flatTypeHierarchy: PageRule = {
+	meta: {
+		id: "flat-type-hierarchy", name: "Flat type hierarchy", category: "slop", severity: "warning", engine: "page",
+		description: "Heading and body roles have no adjacent size step of at least 1.25.",
+		fixHint: "Add a stronger size step between at least two heading or body roles.",
+	},
+	check: ({ snapshot }) => {
+		const sampled = (tag: string): boolean => /^h[1-6]$/.test(tag) || readingTags.includes(tag)
+		const ownChars = (e: (typeof snapshot.elements)[number]): number =>
+			e.ownText.replace(/\s/g, "").length + childrenOf(snapshot, e)
+				.filter(n => sampled(n.tag) === false && visibleText(snapshot, n))
+				.reduce((count, n) => count + ownChars(n), 0)
+		const samples = snapshot.elements.filter(e => sampled(e.tag) && e.text.trim() !== "" && visibleText(snapshot, e) &&
+			fontSizePx(e) >= 8 && fontSizePx(e) < 200 &&
+			(isHeading(e) || [1, 2].includes(ownChars(e)) === false))
+			.map(e => ({ role: isHeading(e) ? e.tag : "body", size: fontSizePx(e), weight: Number.parseFloat(e.style["font-weight"] ?? "400") }))
+		const roles = flatHierarchy(samples)
+		if (roles.length === 0) return []
+		return [{ element: null, message: `Flat role sizes: ${roles.map(([r, size]) => `${r} ${size}px`).join(", ")}`, snippet: "All adjacent type steps are below 1.25" }]
+	},
+}

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

@@ -0,0 +1,21 @@
+import type { Rule } from "../../rule"
+import { allCapsBody } from "./all-caps-body"
+import { designSystemFont } from "./design-system-font"
+import { designSystemFontSize } from "./design-system-font-size"
+import { extremeNegativeTracking } from "./extreme-negative-tracking"
+import { flatTypeHierarchy } from "./flat-type-hierarchy"
+import { italicSerifDisplay } from "./italic-serif-display"
+import { justifiedText } from "./justified-text"
+import { lineLength } from "./line-length"
+import { oversizedH1 } from "./oversized-h1"
+import { overusedFont } from "./overused-font"
+import { tightLeading } from "./tight-leading"
+import { tinyText } from "./tiny-text"
+import { undersizedUiText } from "./undersized-ui-text"
+import { wideTracking } from "./wide-tracking"
+
+export const TYPOGRAPHY_RULES: readonly Rule[] = [
+	overusedFont, flatTypeHierarchy, italicSerifDisplay, oversizedH1, extremeNegativeTracking,
+	tinyText, undersizedUiText, allCapsBody, wideTracking, tightLeading, justifiedText,
+	lineLength, designSystemFont, designSystemFontSize,
+]

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/italic-serif-display.ts

@@ -0,0 +1,24 @@
+import { descendants, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+import { primaryFont } from "./support/font-family"
+
+const serifNames = ["fraunces", "recoleta", "newsreader", "playfair display", "playfair", "cormorant", "cormorant garamond", "garamond", "eb garamond", "tiempos", "tiempos headline", "tiempos text", "lora", "vollkorn", "spectral", "source serif pro", "source serif 4", "source serif", "ibm plex serif", "merriweather", "libre caslon", "libre baskerville", "baskerville", "georgia", "times new roman", "times", "dm serif display", "dm serif text", "instrument serif", "gt sectra", "ogg", "canela", "freight display", "freight text"]
+
+export const italicSerifDisplay: PageRule = {
+	meta: {
+		id: "italic-serif-display", name: "Italic serif display headline", category: "slop", severity: "warning", engine: "page",
+		description: "An italic serif at hero scale repeats a common landing-page treatment.",
+		fixHint: "Use roman type or a non-serif display face unless the brief calls for editorial typography.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (["h1", "h2"].includes(element.tag) === false || visibleText(snapshot, element) === false) return []
+		const italic = [element, ...descendants(snapshot, element)].some(n => {
+			const families = styleOf(n, "font-family").toLowerCase().split(",").map(f => f.trim().replace(/^['"]|['"]$/g, ""))
+			const primary = primaryFont(styleOf(n, "font-family"), true)
+			return visibleText(snapshot, n) && n.ownText.trim() !== "" && styleOf(n, "font-style") === "italic" &&
+				fontSizePx(n) >= 48 && primary !== "" && (serifNames.includes(primary) || families.includes("serif"))
+		})
+		return italic ? [{ element, message: "Italic serif heading at 48px or larger", snippet: shortSnippet(element) }] : []
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/justified-text.ts

@@ -0,0 +1,32 @@
+import { ancestors, fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { letters, visibleText } from "./support/text-context"
+import { mergedLines, phrasingNodes } from "./support/text-lines"
+
+export const justifiedText: PageRule = {
+	meta: {
+		id: "justified-text", name: "Justified text", category: "quality", severity: "warning", engine: "page",
+		description: "Narrow justified columns without automatic hyphenation stretch word spaces into gaps.",
+		fixHint: "Align text left, widen the column, or enable hyphens: auto.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 ||
+			styleOf(element, "text-align") !== "justify" || styleOf(element, "hyphens") === "auto") return []
+		let block = element
+		if (styleOf(element, "display") === "inline") {
+			const ancestor = [...ancestors(snapshot, element)].find(n => ["inline", "contents"].includes(styleOf(n, "display")) === false)
+			if (ancestor === undefined || ancestor.ownText.length > 10) return []
+			block = ancestor
+		}
+		const size = fontSizePx(element)
+		if (size <= 0 || block.rect.width <= 0 || block.rect.width / (size * 0.5) > 45) return []
+		const lines = mergedLines(phrasingNodes(snapshot, block))
+		const first = lines[0]
+		if (first && Math.max(...lines.map(l => l.y + l.height)) - first.y <
+			(px(styleOf(block, "line-height")) ?? size * 1.2) + size * 0.75) return []
+		const chars = letters([...element.ownText].slice(0, 400).join(""))
+		const exempt = chars.filter(c => /[\u0600-\u06ff\u0750-\u077f\u08a0-\u08ff\u0e00-\u0e7f\u1100-\u11ff\u2e80-\u9fff\ua960-\ud7ff\uf900-\ufaff\ufb50-\ufdff\ufe70-\ufeff\uff66-\uff9f\u{20000}-\u{3134f}]/u.test(c)).length
+		if (exempt * 2 > chars.length) return []
+		return [{ element, message: "Narrow justified text without automatic hyphenation", snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/line-length.ts

@@ -0,0 +1,28 @@
+import { childrenOf, fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { control, finePrintExempt, readingTags, visibleText } from "./support/text-context"
+import { mergedLines, phrasingNodes, renderedCharacters } from "./support/text-lines"
+
+export const lineLength: PageRule = {
+	meta: {
+		id: "line-length", name: "Line length too long", category: "quality", severity: "warning", engine: "page",
+		description: "Multiple rendered lines longer than 80 characters make return sweeps difficult.",
+		fixHint: "Constrain reading copy to a max-width around 65ch to 75ch.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || finePrintExempt(snapshot, element)) return []
+		const generic = ["div", "section", "article", "aside", "main"].includes(element.tag) &&
+			element.ownText.length > 10 && fontSizePx(element) < 24 &&
+			["block", "flow-root"].includes(styleOf(element, "display")) &&
+			styleOf(element, "white-space").startsWith("pre") === false && control(snapshot, element) === false &&
+			childrenOf(snapshot, element).every(n => ["inline", "contents"].includes(styleOf(n, "display")) || ["br", "wbr"].includes(n.tag))
+		if (readingTags.includes(element.tag) === false && generic === false) return []
+		const nodes = phrasingNodes(snapshot, element)
+		const count = renderedCharacters(nodes)
+		if (count <= 80) return []
+		const lines = mergedLines(nodes)
+		const total = lines.reduce((n, l) => n + l.width, 0)
+		if (total <= 0 || lines.filter(l => count * l.width / total > 85).length < 2) return []
+		return [{ element, message: `Rendered lines exceed 80 characters (${Math.round(count * Math.max(...lines.map(l => l.width)) / total)} at widest)`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/oversized-h1.ts

@@ -0,0 +1,20 @@
+import { descendants, fontSizePx, shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { visibleText } from "./support/text-context"
+
+export const oversizedH1: PageRule = {
+	meta: {
+		id: "oversized-h1", name: "Oversized hero headline", category: "slop", severity: "warning", engine: "page",
+		description: "A sentence-length display headline consumes too much of the first screen.",
+		fixHint: "Shorten the headline or reduce its font size so supporting content fits above the fold.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (element.tag !== "h1" || visibleText(snapshot, element) === false ||
+			fontSizePx(element) < 72 || element.rect.y >= snapshot.viewport.height) return []
+		const text = [element, ...descendants(snapshot, element)].filter(e => visibleText(snapshot, e)).map(e => e.ownText).join(" ").trim().replace(/\s+/g, " ")
+		const height = element.rect.height / snapshot.viewport.height
+		const area = element.rect.width * element.rect.height / (snapshot.viewport.width * snapshot.viewport.height)
+		if (text.length < 40 || (height < 0.28 && area < 0.25)) return []
+		return [{ element, message: `Long display headline occupies ${Math.round(height * 100)}% of viewport height`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/overused-font.ts

@@ -0,0 +1,45 @@
+import { styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { brandDomain, canonicalFont, overusedFonts, primaryFont } from "./support/font-family"
+import { cjkChar, letters, lineage } from "./support/text-context"
+
+export const overusedFont: PageRule = {
+	meta: {
+		id: "overused-font", name: "Overused font", category: "slop", severity: "warning", engine: "page",
+		description: "The page's dominant face comes from a frequently repeated set of interface fonts.",
+		fixHint: "Choose a face suited to the project, or list the intentional choice in allowFonts.",
+	},
+	check: ({ snapshot, config }) => {
+		const usage = new Map<string, { count: number; chars: number; latin: number }>()
+		let total = 0
+		let chars = 0
+		let letterCount = 0
+		let cjkCount = 0
+		for (const e of snapshot.elements) {
+			if (["p", "h1", "h2", "h3", "h4", "h5", "h6", "li", "td", "th", "dd", "blockquote", "figcaption", "a", "button", "label", "span"].includes(e.tag) === false ||
+				e.ownText.trim() === "" || lineage(snapshot, e).some(n => /impeccable-(overlay|label|banner|tooltip)/.test(n.attributes["class"] ?? ""))) continue
+			const font = canonicalFont(primaryFont(styleOf(e, "font-family")))
+			if (font === "") continue
+			const hasBox = lineage(snapshot, e).every(n => n.attributes["hidden"] === undefined &&
+				styleOf(n, "display") !== "none" && ["hidden", "collapse"].includes(styleOf(n, "visibility")) === false &&
+				styleOf(n, "content-visibility") !== "hidden")
+			const weight = hasBox ? [...e.ownText].length : 0
+			const alphabet = hasBox ? letters(e.ownText) : []
+			const cjkLetters = alphabet.filter(cjkChar).length
+			const value = usage.get(font) ?? { count: 0, chars: 0, latin: 0 }
+			usage.set(font, { count: value.count + 1, chars: value.chars + weight, latin: value.latin + alphabet.length - cjkLetters })
+			total++
+			chars += weight
+			letterCount += alphabet.length
+			cjkCount += cjkLetters
+		}
+		const ranked = [...usage].sort((a, b) => b[1].count - a[1].count)
+		const top = ranked[0]
+		if (total < 20 || top === undefined || ranked[1]?.[1].count === top[1].count) return []
+		const [font, value] = top
+		if (overusedFonts.includes(font) === false || config.allowFonts?.some(f => canonicalFont(f) === font) ||
+			brandDomain(font, snapshot.url) || (chars > 0 && value.chars / chars < 0.05) ||
+			(cjkCount * 2 > letterCount && value.latin / letterCount < 0.05)) return []
+		return [{ element: null, message: `Primary font: ${font} (${Math.round(value.count / total * 100)}% of text)`, snippet: font }]
+	},
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/drawn-enlargement.ts

@@ -0,0 +1,48 @@
+import { ancestors, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+function rotation(value: string): number | null {
+	if (value === "" || value === "none") return 0
+	const parts = value.toLowerCase().trim().split(/\s+/)
+	const angle = parts.length === 1 ? parts[0] : parts.length === 2 && parts[0] === "z" ? parts[1] :
+		parts.length === 4 && Number(parts[0]) === 0 && Number(parts[1]) === 0 && Number(parts[2]) > 0 ? parts[3] : undefined
+	const match = /^([-+]?[\d.]+)(deg|grad|rad|turn)$/.exec(angle ?? "")
+	if (!match) return null
+	const factor = match[2] === "deg" ? Math.PI / 180 : match[2] === "grad" ? Math.PI / 200 : match[2] === "turn" ? Math.PI * 2 : 1
+	const turn = Number(match[1]) * factor
+	return Number.isFinite(turn) ? turn : null
+}
+
+export function drawnEnlargement(s: PageSnapshot, e: ElementSnapshot): number | null {
+	const chain = [e, ...ancestors(s, e)]
+	if (chain.length > 64 || chain.some(n => n.style["scale"] === undefined || n.style["rotate"] === undefined)) return null
+	let a = 1, b = 0, c = 0, d = 1
+	const multiply = (x: number, y: number, z: number, w: number): void => {
+		const nextA = x * a + z * b, nextB = y * a + w * b
+		const nextC = x * c + z * d, nextD = y * c + w * d
+		a = nextA; b = nextB; c = nextC; d = nextD
+	}
+	for (const n of chain) {
+		const transform = styleOf(n, "transform")
+		if (transform !== "" && transform !== "none") {
+			const matrix = /^matrix\(([^)]+)\)$/.exec(transform)
+			if (!matrix) return null
+			const values = (matrix[1] ?? "").split(",").map(Number)
+			const [x, y, z, w] = values
+			if (values.length !== 6 || x === undefined || y === undefined || z === undefined || w === undefined || !values.every(Number.isFinite)) return null
+			multiply(x, y, z, w)
+		}
+		const scale = styleOf(n, "scale")
+		if (scale !== "" && scale !== "none") {
+			const values = scale.trim().split(/\s+/).map(v => v.endsWith("%") ? Number(v.slice(0, -1)) / 100 : Number(v))
+			const x = values[0], y = values[1] ?? x
+			if (values.length > 3 || x === undefined || y === undefined || !values.every(Number.isFinite)) return null
+			multiply(x, 0, 0, y)
+		}
+		const angle = rotation(styleOf(n, "rotate"))
+		if (angle === null) return null
+		multiply(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle))
+	}
+	const scale = Math.min(Math.hypot(a, b), Math.hypot(c, d))
+	return Number.isFinite(scale) && scale > 1.05 ? scale : 1
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/fading-text.ts

@@ -0,0 +1,48 @@
+import { styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { keyframeSteps } from "../../decoration/support/keyframes"
+
+const seconds = (value: string): number => {
+	const match = /^([-+]?(?:\d*\.)?\d+)(ms|s)$/.exec(value)
+	return match ? Number(match[1]) / (match[2] === "ms" ? 1000 : 1) : Number.NaN
+}
+
+export function fadesOutForGood(s: PageSnapshot, e: ElementSnapshot): boolean {
+	if (!e.motion.includes("opacity")) return false
+	const names = styleOf(e, "animation-name").split(",").map(n => n.trim())
+	const entries = []
+	for (const [index, name] of names.entries()) {
+		if (name === "" || name === "none") continue
+		const steps = keyframeSteps(s, name)
+		if (steps === null) return false
+		if (steps.some(step => step.declarations["opacity"] !== undefined)) entries.push({ index, steps })
+	}
+	const entry = entries[0]
+	if (entries.length !== 1 || !entry) return false
+	const value = (property: string): string => {
+		const list = styleOf(e, "animation-" + property).split(",").map(v => v.trim().toLowerCase())
+		return list[entry.index % list.length] ?? ""
+	}
+	if (value("play-state") !== "running" || !["forwards", "both"].includes(value("fill-mode")) ||
+		!["", "auto"].includes(value("timeline")) || value("composition") !== "replace") return false
+	const count = Number(value("iteration-count")), duration = seconds(value("duration")), delay = seconds(value("delay"))
+	if (!Number.isInteger(count) || count < 1 || !(duration > 0) || !(Math.max(0, delay) + duration * count <= 60)) return false
+	const direction = value("direction")
+	if (!["normal", "reverse", "alternate", "alternate-reverse"].includes(direction)) return false
+	const last = direction === "normal" || (direction === "alternate" && count % 2 === 1) ||
+		(direction === "alternate-reverse" && count % 2 === 0)
+	let opacity: number | undefined
+	for (const step of entry.steps) {
+		const endpoint = step.key.split(",").some(key => {
+			const trimmed = key.trim().toLowerCase()
+			const offset = trimmed === "from" ? 0 : trimmed === "to" ? 1 :
+				trimmed.endsWith("%") ? Number(trimmed.slice(0, -1)) / 100 : Number.NaN
+			return Math.abs(offset - (last ? 1 : 0)) < 1e-9
+		})
+		const raw = step.declarations["opacity"]
+		if (!endpoint || raw === undefined) continue
+		const number = raw.endsWith("%") ? Number(raw.slice(0, -1)) / 100 : Number(raw)
+		if (Number.isFinite(number)) opacity = number
+	}
+	return opacity !== undefined && opacity <= 0.02
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/flex-runs.ts

@@ -0,0 +1,16 @@
+import { px, styleOf } from "../../../core/page"
+import type { ElementSnapshot } from "../../../types"
+
+const WIDE = /[\u1100-\u115f\u2e80-\u303f\u3040-\u33ff\u3400-\u4dbf\u4e00-\u9fff\ua960-\ua97f\uac00-\ud7ff\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]|[\u{20000}-\u{3ffff}]/u
+
+const advanceBoundEm = (c: string): number => (WIDE.test(c) ? 1.05 : c !== c.toLowerCase() && c === c.toUpperCase() ? 0.8 : 0.7)
+
+/** A wrapping flex row whose own text is two or more runs, each short enough to sit on one line of the row: the runs move whole, so no line of one run crowds another. */
+export function itemsEachFitOneLine(element: ElementSnapshot, fontSize: number): boolean {
+	if (!["flex", "inline-flex"].includes(styleOf(element, "display"))) return false
+	if (!styleOf(element, "flex-wrap").startsWith("wrap")) return false
+	if (element.textRuns.length < 2) return false
+	const content = element.scroll.clientWidth - Math.max(0, px(styleOf(element, "padding-left")) ?? 0) - Math.max(0, px(styleOf(element, "padding-right")) ?? 0)
+	if (!(Number.isFinite(content) && content > 0 && fontSize > 0)) return false
+	return element.textRuns.every((run) => [...run].reduce((w, c) => w + advanceBoundEm(c), 0) * fontSize < content)
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/font-family.ts

@@ -0,0 +1,28 @@
+export const overusedFonts = [
+	"inter", "roboto", "open sans", "lato", "montserrat", "arial", "helvetica", "fraunces",
+	"instrument sans", "instrument serif", "geist", "geist sans", "geist mono", "mona sans",
+	"plus jakarta sans", "space grotesk", "recoleta",
+]
+const genericFonts = ["serif", "sans-serif", "monospace", "cursive", "fantasy", "inherit", "initial", "unset", "revert"]
+const platformFonts = ["system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded", "-apple-system", "blinkmacsystemfont", "segoe ui"]
+
+export const normalizeFont = (value: string): string => value.trim().replace(/^['"]|['"]$/g, "").replace(/\+/g, " ").replace(/\s+/g, " ").toLowerCase()
+export const canonicalFont = (value: string): string => {
+	const normalized = normalizeFont(value)
+	const key = normalized.replace(/[-_ ]/g, "")
+	return overusedFonts.find(f => f.replace(/[-_ ]/g, "") === key) ?? normalized
+}
+export function primaryFont(stack: string, skipPlatform = false): string {
+	if (stack.includes("var(")) return ""
+	const families = stack.match(/"[^"]*"|'[^']*'|[^,]+/g) ?? []
+	return families.map(normalizeFont).find(f =>
+		f !== "" && genericFonts.includes(f) === false && (skipPlatform === false || platformFonts.includes(f) === false)) ?? ""
+}
+
+export function brandDomain(font: string, url: string): boolean {
+	const host = URL.canParse(url) ? new URL(url).hostname.toLowerCase() : ""
+	const domains = font === "roboto" ? ["google.com", "youtube.com", "android.com", "chromium.org", "chrome.com", "web.dev", "gstatic.com", "firebase.google.com"] :
+		["geist", "geist sans", "geist mono"].includes(font) ? ["vercel.com", "nextjs.org", "v0.app"] :
+			font === "mona sans" ? ["github.com", "githubnext.com"] : []
+	return domains.some(d => host === d || host.endsWith(`.${d}`))
+}

package/packages/omo-codex/plugin/skills/frontend/scripts/detect/rules/typography/support/painted-text.ts

@@ -0,0 +1,81 @@
+import { ancestors, childrenOf, descendants, fontSizePx, parentOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { drawnEnlargement } from "./drawn-enlargement"
+import { fadesOutForGood } from "./fading-text"
+
+const squash = (text: string): string => text.replace(/\s/g, "")
+const hidden = (e: ElementSnapshot): boolean => e.attributes["inert"] !== undefined || e.attributes["aria-hidden"] === "true"
+const classes = (e: ElementSnapshot): readonly string[] => (e.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+const shown = (s: PageSnapshot, e: ElementSnapshot): boolean => [e, ...ancestors(s, e)].every(n => styleOf(n, "display") !== "none") &&
+	styleOf(e, "visibility") !== "hidden" && e.rect.width > 0 && e.rect.height > 0
+const dialog = (e: ElementSnapshot): boolean => e.attributes["aria-modal"] === "true" ||
+	["dialog", "alertdialog"].includes(e.attributes["role"] ?? "") || (e.tag === "dialog" && e.attributes["open"] !== undefined)
+const source = (e: ElementSnapshot): boolean => ["script", "style", "noscript", "template"].includes(e.tag)
+const structuralTags = ["html", "body", "main", "header", "footer", "nav", "aside", "section", "article", "form",
+	"dialog", "li", "tr", "td", "th", "tbody", "thead", "table", "details", "summary"]
+const textHosts = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "button", "label", "summary", "legend", "caption", "figcaption", "blockquote", "q"]
+const parkedParts = new Set(("clone clones cloned copy duplicate dup carousel embla flicking glide keen slick slide slider slides splide swiper " +
+	"marquee ticker menu submenu dropdown popup popover modal drawer dialog tooltip toast offcanvas overlay nav navbar navigation panel tab " +
+	"tabpanel accordion collapse collapsible intro splash loader preloader loading banner cookie cookies consent sidebar sidenav toc").split(" "))
+
+function declaredMockup(s: PageSnapshot, e: ElementSnapshot): boolean {
+	return [e, ...ancestors(s, e)].some(root => {
+		if (!hidden(root) || root.rect.width < 120 || root.rect.height < 80 || structuralTags.includes(root.tag) ||
+			["fixed", "sticky"].includes(styleOf(root, "position")) || root.attributes["aria-modal"] !== undefined ||
+			root.attributes["data-aria-hidden"] !== undefined ||
+			(root.attributes["role"] ?? "").split(/\s+/).some(r => r !== "" && !["presentation", "none", "img", "figure", "group"].includes(r)) ||
+			[...ancestors(s, root)].some(n => textHosts.includes(n.tag))) return false
+		const parts = `${classes(root).join(" ")} ${root.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().split(/[\s_-]+/)
+		if (parts.some(p => parkedParts.has(p))) return false
+		const nodes = [root, ...descendants(s, root)]
+		if (nodes.length > 3000 || nodes.some(n => n.tag === "h1")) return false
+		const runs = nodes.filter(n => !source(n) && n.ownText.trim() !== "" &&
+			styleOf(n, "visibility") !== "hidden" && [n, ...ancestors(s, n)].every(a => styleOf(a, "display") !== "none"))
+		if (runs.length < 3) return false
+		const fields = nodes.filter(n => ["input", "select", "textarea"].includes(n.tag) && (n.tag !== "input" || n.attributes["type"] !== "hidden"))
+		const links = runs.filter(n => [n, ...ancestors(s, n)].some(a => a.tag === "a" && (a.attributes["href"] ?? "").trim() !== ""))
+		if (fields.length >= 2 || (fields.length >= 1 && nodes.some(n => n.tag === "label")) || links.length * 2 >= runs.length) return false
+		const text = squash(root.text)
+		if ([...ancestors(s, root)].some(n => text !== "" && squash(n.attributes["aria-label"] ?? "").includes(text))) return false
+		const parent = parentOf(s, root)
+		if (parent && childrenOf(s, parent).some(n => {
+			if (n.index === root.index) return false
+			const theirs = classes(n), own = classes(root)
+			const peer = n.tag === root.tag && own.every(c => theirs.includes(c)) && (own.length === 0) === (theirs.length === 0)
+			const alternative = !source(n) && !hidden(n) && shown(s, n) &&
+				(n.rect.width <= 1 || n.rect.height <= 1 || /sr-only|visually-?hidden/.test(classes(n).join(" "))) &&
+				n.text.trim() !== "" && !/\b(?:demo|demonstration|illustrat\w*|interface|screen ?shots?|mock-?ups?|graphic|animation|animated|preview|image|video|visual|diagram|depict\w*|shows|showing|displayed)\b/i.test(n.text)
+			return (peer && shown(s, n) && !hidden(n)) || (text !== "" && squash(n.text) === text) || alternative
+		})) return false
+		if (s.elements.some(n => dialog(n) && !hidden(n) && shown(s, n) &&
+			![n, ...ancestors(s, n)].some(a => a.index === root.index) &&
+			![root, ...ancestors(s, root)].some(a => a.index === n.index))) return false
+		const pageChars = s.elements.filter(n => !source(n) && styleOf(n, "visibility") !== "hidden" &&
+			[n, ...ancestors(s, n)].every(a => styleOf(a, "display") !== "none")).reduce((count, n) => count + squash(n.ownText).length, 0)
+		const ownChars = runs.reduce((count, n) => count + squash(n.ownText).length, 0)
+		return pageChars > 0 && ownChars * 2 < pageChars
+	})
+}
+
+export function textPainted(s: PageSnapshot, e: ElementSnapshot): boolean {
+	if ([e, ...ancestors(s, e)].some(n => fadesOutForGood(s, n))) return false
+	if (declaredMockup(s, e)) return false
+	for (const a of ancestors(s, e)) {
+		if (a.tag === "details" && a.attributes["open"] === undefined) {
+			const summary = childrenOf(s, a).find(n => n.tag === "summary")
+			if (!summary || ![e, ...ancestors(s, e)].some(n => n.index === summary.index)) return false
+		}
+	}
+	if (fontSizePx(e) <= 1) {
+		const size = (n: ElementSnapshot): number | null => {
+			const scale = drawnEnlargement(s, n)
+			return scale === null ? null : fontSizePx(n) * scale
+		}
+		const own = size(e)
+		if (own !== null && own <= 1 && ![...descendants(s, e)].some(n => {
+			const drawn = size(n)
+			return n.ownText !== "" && (drawn === null || drawn > 1)
+		})) return false
+	}
+	return true
+}