oh-my-opencode 5.1.51 → 5.1.54

package/dist/skills/frontend/scripts/detect/rules/typography/line-length.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { lineLength } from "./line-length"
+
+const text = "Reading copy across a column this wide makes the eye travel far back to the start of every line. ".repeat(3)
+const lines = (widths: readonly number[]) => widths.map((width, i) => ({ x: 0, y: i * 24, width, height: 18 }))
+
+test("#given actual rendered line widths and short tails #then two long lines are required", () => {
+	const snapshot = buildSnapshot([
+		{ id: "wide", tag: "p", text, lineRects: lines([1000, 1000, 900]) },
+		{ tag: "p", text: "An ordinary note that only renders on one line.", lineRects: lines([1100]) },
+		{ tag: "p", text, lineRects: lines([1000, 100]) },
+		{ tag: "p", text, lineRects: lines([500, 500, 500, 500, 500]) },
+		{ tag: "p", text, lineRects: [] },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#wide"])
+})
+
+test("#given inline children, nested lists and hidden source #then only each block's rendered text is counted", () => {
+	const snapshot = buildSnapshot([
+		{ id: "inline", tag: "p", children: [
+			{ tag: "b", text: text.slice(0, 140), style: { display: "inline" }, lineRects: lines([1000, 300]) },
+			{ tag: "i", text: text.slice(140), style: { display: "inline" }, lineRects: [{ x: 300, y: 24, width: 700, height: 18 }, { x: 0, y: 48, width: 900, height: 18 }] },
+		] },
+		{ id: "heading-item", tag: "li", text: "Fast Refresh Fixes", children: [{ tag: "ul", children: [
+			{ tag: "li", text: "One nested item with a single line", lineRects: lines([600]) },
+		] }] },
+		{ tag: "p", text: "A comfortable measure with fewer than eighty characters per line. ".repeat(2), lineRects: lines([500, 500]), children: [
+			{ tag: "span", text: text.repeat(3), style: { display: "none" }, lineRects: lines([1000, 1000]) },
+			{ tag: "style", text: text.repeat(3) },
+		] },
+		{ id: "generic", text, lineRects: lines([1000, 1000, 900]) },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#inline", "#generic"])
+})
+
+test("#given legal blocks and long own list prose #then only the list's own long lines report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "list", tag: "li", text, lineRects: lines([1000, 1000, 900]), children: [{ tag: "ul", children: [{ tag: "li", text: "Nested short item" }] }] },
+		{ tag: "p", text, style: { "font-size": "14px" }, lineRects: lines([1000, 1000, 900]), attributes: { class: "legal" } },
+	])
+	expect(lineLength.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#list"])
+})

package/dist/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/dist/skills/frontend/scripts/detect/rules/typography/oversized-h1.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { oversizedH1 } from "./oversized-h1"
+
+test("#given long dominant headlines and contained short controls #then only dominant long headings report", () => {
+	const text = "A sweeping product headline that sprawls across the whole viewport and keeps going"
+	const snapshot = buildSnapshot([
+		{ id: "hero", tag: "h1", text, style: { "font-size": "104px" }, rect: { width: 1040, height: 240 } },
+		{ id: "area", tag: "h1", text, style: { "font-size": "72px" }, rect: { width: 1280, height: 210 } },
+		{ tag: "h1", text, style: { "font-size": "83px" }, rect: { width: 1120, height: 90 } },
+		{ tag: "h1", text: "Bold.", style: { "font-size": "168px" }, rect: { height: 300 } },
+		{ tag: "h1", text, style: { "font-size": "40px" }, rect: { height: 300 } },
+		{ tag: "h1", text, style: { "font-size": "104px" }, rect: { y: 800, height: 300 } },
+	])
+	expect(oversizedH1.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#hero", "#area"])
+})
+
+test("#given a rotator with hidden alternatives beside a long hero #then only painted words count", () => {
+	const snapshot = buildSnapshot([
+		{ tag: "h1", text: "Picked you.", style: { "font-size": "120px" }, rect: { height: 300 }, children: [
+			{ text: "Claude AI" }, { text: "Every alternative word in the rotator", style: { opacity: "0" } },
+		] },
+		{ id: "long", tag: "h1", text: "A genuinely long heading that remains on screen.", style: { "font-size": "120px" }, rect: { height: 300 } },
+	])
+	expect(oversizedH1.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#long"])
+})

package/dist/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/dist/skills/frontend/scripts/detect/rules/typography/overused-font.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { overusedFont } from "./overused-font"
+
+const nodes = (font: string, count: number, text = "Feature line set in the primary face") =>
+	Array.from({ length: count }, () => ({ tag: "p", text, style: { "font-family": font } }))
+
+test("#given a dominant overused font and normalized spellings #then one page finding reports", () => {
+	const snapshot = buildSnapshot([...nodes("GeistSans", 12), ...nodes('"Geist Sans"', 11), ...nodes("Georgia", 1)])
+	expect(overusedFont.check({ snapshot, config: {} })).toHaveLength(1)
+	expect(overusedFont.check({ snapshot, config: { allowFonts: ["gEiSt SaNs"] } })).toEqual([])
+})
+
+test("#given ties, small pages, secondary faces and platform stacks #then only the dominant face qualifies", () => {
+	for (const snapshot of [
+		buildSnapshot(nodes("Inter", 19)),
+		buildSnapshot([...nodes("Inter", 10), ...nodes("Georgia", 10)]),
+		buildSnapshot([...nodes("Georgia", 18), ...nodes("Inter", 2)]),
+		buildSnapshot(nodes("-apple-system, BlinkMacSystemFont, Roboto, sans-serif", 22)),
+	]) expect(overusedFont.check({ snapshot, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: buildSnapshot(nodes("Inter", 20)), config: {} })).toHaveLength(1)
+})
+
+test("#given label fonts with negligible character share #then only substantial visible usage reports", () => {
+	const tiny = buildSnapshot([...nodes("Inter", 30, "1"), ...nodes("Georgia", 8, "Long ordinary body copy ".repeat(10))])
+	const substantial = buildSnapshot([...nodes("Inter", 30, "Platform"), ...nodes("Georgia", 8, "Long ordinary body copy ".repeat(10))])
+	expect(overusedFont.check({ snapshot: tiny, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: substantial, config: {} })).toHaveLength(1)
+})
+
+test("#given a brand face on its owner's domain #then only the owning domain is exempt", () => {
+	const snapshot = buildSnapshot(nodes("Geist", 20))
+	expect(overusedFont.check({ snapshot: { ...snapshot, url: "https://vercel.com" }, config: {} })).toEqual([])
+	expect(overusedFont.check({ snapshot: { ...snapshot, url: "https://notvercel.com" }, config: {} })).toHaveLength(1)
+})

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/skills/frontend/scripts/detect/rules/typography/support/painted-text.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot, type NodeSpec } from "../../../testing/build-snapshot"
+import { tinyText } from "../tiny-text"
+import { undersizedUiText } from "../undersized-ui-text"
+
+test("#given closed disclosure content #then tiny text only reports in open disclosures", () => {
+	const text = "A sentence long enough to be considered running copy."
+	const small: NodeSpec = { tag: "span", text, style: { "font-size": "10px" } }
+	const snapshot = buildSnapshot([
+		{ tag: "details", children: [{ tag: "summary", text: "More" }, { ...small, id: "closed" }] },
+		{ tag: "details", attributes: { open: "" }, children: [{ tag: "summary", text: "More" }, { ...small, id: "open" }] },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#open"])
+})
+
+test("#given one pixel labels and enlarged glyphs #then only readable undersized labels report", () => {
+	const built = buildSnapshot([
+		{ id: "dot", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px" } },
+		{ id: "scaled", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px", transform: "matrix(8,0,0,8,0,0)" } },
+		{ id: "stretched", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px", transform: "matrix(8,0,0,1,0,0)" } },
+		{ id: "two", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "2px" } },
+	])
+	const snapshot = { ...built, elements: built.elements.map(e => ({ ...e, style: { ...e.style, scale: "none", rotate: "none" } })) }
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#scaled", "#two"])
+})
+test("#given one pixel text without individual transform capture #then uncertain paint remains measurable", () => {
+	const snapshot = buildSnapshot([{ id: "uncertain", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px" } }])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#uncertain"])
+})
+test("#given individual transforms on one pixel labels #then both axes and ancestor rotation determine enlargement", () => {
+	const label = (id: string, style: Readonly<Record<string, string>>): NodeSpec => ({
+		id, tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px", ...style },
+	})
+	const built = buildSnapshot([
+		label("dot", { rotate: "90deg" }),
+		label("uniform", { scale: "1600%", rotate: "z 100grad" }),
+		label("one-axis", { scale: "16 1", rotate: ".25turn" }),
+		{ style: { scale: "16 1" }, children: [label("composed", { scale: "16 1", rotate: "0 0 1 90deg" })] },
+		label("unknown-axis", { rotate: "x 90deg" }),
+	])
+	const snapshot = { ...built, elements: built.elements.map(e => ({
+		...e, style: { scale: "none", rotate: "none", ...e.style },
+	})) }
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#uniform", "#composed", "#unknown-axis"])
+})
+
+test("#given declared inert mockups and live content #then the mockup alone leaves typography scoring", () => {
+	const frame = (prefix: string, inert: boolean): NodeSpec => ({
+		id: prefix, rect: { width: 420, height: 190 }, attributes: inert ? { inert: "" } : {},
+		children: [
+			{ text: "Drafts" }, { text: "Weekly users" }, { text: "Compared with last week" },
+			{ id: prefix + "-link", tag: "a", text: "Open report", attributes: { href: "#" }, style: { "font-size": "10px" } },
+			{ id: prefix + "-dot", tag: "a", text: "Profile", attributes: { href: "#" }, style: { "font-size": "1px" } },
+			{ id: prefix + "-copy", tag: "p", text: "A ten pixel sentence a visitor would have to read here.", style: { "font-size": "10px" } },
+		],
+	})
+	const snapshot = buildSnapshot([
+		{ children: [frame("drawing", true)] }, { children: [frame("live", false)] },
+		{ tag: "p", text: "Ordinary reading copy remains most of this page. ".repeat(20) },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#live-copy"])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual(["#live-link", "#live-dot"])
+})

package/dist/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
+}

package/dist/skills/frontend/scripts/detect/rules/typography/support/svg-size.ts

@@ -0,0 +1,57 @@
+import { ancestors, fontSizePx, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+const uniformScale = (value: string): number | null => {
+	if (value === "" || value === "none") return 1
+	if (/skew|matrix3d|rotate[XY]|perspective/i.test(value)) return null
+	const matrix = /^matrix\(([^)]+)\)$/.exec(value)
+	if (matrix?.[1]) {
+		const [a, b, c, d] = matrix[1].split(/[\s,]+/).map(Number)
+		if (a === undefined || b === undefined || c === undefined || d === undefined) return null
+		const x = Math.hypot(a, b)
+		const y = Math.hypot(c, d)
+		return Math.abs(x - y) < 0.001 && Math.abs(a * c + b * d) < 0.001 ? x : null
+	}
+	let scale = 1
+	for (const match of value.matchAll(/scale\(([^)]+)\)/g)) {
+		const [x, y] = (match[1] ?? "").split(/[\s,]+/).map(Number)
+		if (x === undefined || (y !== undefined && Math.abs(x - y) > 0.001)) return null
+		scale *= Math.abs(x)
+	}
+	return scale
+}
+
+export function drawnFontSize(s: PageSnapshot, e: ElementSnapshot): number {
+	const size = fontSizePx(e)
+	if (["text", "tspan", "textpath"].includes(e.tag) === false) return size
+	const chain = [e, ...ancestors(s, e)]
+	const svg = chain.find(n => n.tag === "svg")
+	if (svg === undefined) return size
+	const box = (svg.attributes["viewBox"] ?? svg.attributes["viewbox"] ?? "").trim().split(/[\s,]+/).map(Number)
+	const vw = box[2]
+	const vh = box[3]
+	if (box.length !== 4 || vw === undefined || vh === undefined || vw <= 0 || vh <= 0) return size
+	let inner = 1
+	for (const n of chain) {
+		if (n === svg) break
+		const computed = styleOf(n, "transform")
+		const scale = uniformScale(computed === "" || computed === "none" ? n.attributes["transform"] ?? "" : computed)
+		if (scale === null) return size
+		inner *= scale
+	}
+	const content = (axis: "width" | "height", sides: readonly string[]): number | null => {
+		const drawn = svg.rect[axis]
+		const inset = sides.reduce((n, p) => n + (px(styleOf(svg, p)) ?? 0), 0)
+		if (inset <= 0) return drawn
+		const css = px(styleOf(svg, axis)) ?? 0
+		if (Math.abs(css + inset - drawn) <= 1) return css
+		if (Math.abs(css - drawn) <= 1) return css - inset
+		return null
+	}
+	const w = content("width", ["padding-left", "padding-right", "border-left-width", "border-right-width"])
+	const h = content("height", ["padding-top", "padding-bottom", "border-top-width", "border-bottom-width"])
+	if (w === null || h === null || w <= 0 || h <= 0) return size
+	const aspect = svg.attributes["preserveAspectRatio"] ?? svg.attributes["preserveaspectratio"] ?? ""
+	const scale = aspect.includes("none") ? h / vh : aspect.includes("slice") ? Math.max(w / vw, h / vh) : Math.min(w / vw, h / vh)
+	return size * scale * inner
+}