oh-my-opencode 5.1.48 → 5.1.54

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
+}

package/dist/skills/frontend/scripts/detect/rules/typography/support/text-context.ts

@@ -0,0 +1,112 @@
+import { ancestors, childrenOf, fontSizePx, isHeading, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export const readingTags = ["p", "li", "td", "th", "dd", "blockquote", "figcaption"]
+export const lineage = (s: PageSnapshot, e: ElementSnapshot): readonly ElementSnapshot[] => [e, ...ancestors(s, e)]
+export const className = (e: ElementSnapshot): string => e.attributes["class"] ?? ""
+export const mono = (e: ElementSnapshot): boolean => {
+	const first = (styleOf(e, "font-family").split(",")[0] ?? "").trim().replace(/^['"]|['"]$/g, "").toLowerCase()
+	return ["courier", "courier new", "consolas", "menlo", "monaco", "andale mono", "lucida console"].includes(first) ||
+		first.split(/[^a-z0-9]+/).some(w => ["mono", "monospace", "monospaced", "sfmono"].includes(w))
+}
+export const letters = (text: string): readonly string[] => [...text].filter(c => /\p{L}/u.test(c))
+export const cjkChar = (c: string): boolean => /[\u1100-\u11ff\u3040-\u30ff\u3130-\u318f\u31f0-\u31ff\u3400-\u9fff\ua960-\ud7ff\uf900-\ufaff\uff66-\uff9f\u{20000}-\u{3ffff}]/u.test(c)
+export const cjk = (text: string): boolean => {
+	const sample = [...text].slice(0, 256)
+	const count = sample.filter(cjkChar).length
+	return count > 0 && count * 2 >= sample.filter(c => /\p{L}/u.test(c)).length
+}
+export const caps = (text: string): boolean => {
+	const chars = letters(text)
+	return chars.some(c => c.toUpperCase() !== c.toLowerCase()) && chars.every(c => /\p{Lu}/u.test(c))
+}
+
+export function visibleText(s: PageSnapshot, e: ElementSnapshot): boolean {
+	const box = (e.rect.width > 0 && e.rect.height > 0) || e.lineRects.some(r => r.width > 0 && r.height > 0)
+	return box && lineage(s, e).every(n =>
+		n.attributes["hidden"] === undefined && styleOf(n, "display") !== "none" &&
+		styleOf(n, "visibility") !== "collapse" && styleOf(n, "visibility") !== "hidden" &&
+		styleOf(n, "content-visibility") !== "hidden" &&
+		(Number.parseFloat(styleOf(n, "opacity")) <= 0.01) === false &&
+		((n.rect.width <= 0 || n.rect.height <= 0) &&
+			["overflow-x", "overflow-y"].some(p => ["hidden", "clip"].includes(styleOf(n, p)))) === false &&
+		/sr-only|visually-?hidden|screen-?reader|a11y-hidden|hidden-visually/i.test(className(n)) === false &&
+		/^(script|style|title|noscript|template|head|meta|link|base|param|source|track|datalist|col|colgroup|area)$/.test(n.tag) === false &&
+		/inset\(\s*(50%|99|100%)/.test(styleOf(n, "clip-path")) === false)
+}
+
+export function control(s: PageSnapshot, e: ElementSnapshot): boolean {
+	return lineage(s, e).some(n =>
+		["button", "summary", "label", "select", "textarea"].includes(n.tag) ||
+		(n.tag === "a" && n.attributes["href"] !== undefined) ||
+		/^(button|link|tab|menuitem|menuitemcheckbox|menuitemradio|option|checkbox|radio|switch|treeitem)$/.test(n.attributes["role"] ?? "") ||
+		(n.attributes["tabindex"] !== undefined && Number(n.attributes["tabindex"]) >= 0 && n.text.length <= 80))
+}
+
+export function headingText(s: PageSnapshot, e: ElementSnapshot): boolean {
+	for (const n of lineage(s, e)) {
+		if (isHeading(n) || n.attributes["role"] === "heading") return true
+		if (readingTags.includes(n.tag)) return false
+	}
+	return false
+}
+
+export function pitch(s: PageSnapshot, e: ElementSnapshot): number {
+	let height = px(styleOf(e, "line-height")) ?? 0
+	if (styleOf(e, "display") === "inline") {
+		for (const n of ancestors(s, e)) {
+			height = Math.max(height, px(styleOf(n, "line-height")) ?? 0)
+			if (["inline", "contents"].includes(styleOf(n, "display")) === false) break
+		}
+	}
+	return height
+}
+
+export const smallprint = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["small", "footer"].includes(n.tag) || /legal|copyright|disclaimer|small-?print|fine-?print|disclosure|footnote/i.test(className(n)))
+
+export function finePrintExempt(s: PageSnapshot, e: ElementSnapshot): boolean {
+	if (fontSizePx(e) <= 0 || fontSizePx(e) >= 15 ||
+		lineage(s, e).some(n => n.tag === "label" || isHeading(n)) ||
+		childrenOf(s, e).some(n => ["input", "select", "textarea", "button"].includes(n.tag))) return false
+	const marked: ElementSnapshot[] = []
+	for (const n of lineage(s, e).slice(0, 4)) {
+		if (["html", "body", "main", "article", "form"].includes(n.tag)) break
+		const words = `${className(n)} ${n.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+		if (/(?:^|[-_\s])(legal|fine-?print|small-?print|disclaimers?|footnotes?|disclosures)(?:$|[-_\s])/.test(words) &&
+			/(?:type|text|typography|font|fs)[-_]footnote/.test(words) === false) marked.push(n)
+	}
+	if (marked.length === 0 || marked.some(n => n.tag === "details" || n.tag === "summary" ||
+		n.attributes["aria-expanded"] !== undefined || childrenOf(s, n).some(c => c.tag === "summary" || c.attributes["aria-expanded"] !== undefined))) return false
+	const outer = marked[marked.length - 1]
+	if (outer && outer.text.length >= 2000 &&
+		outer.text.length >= (s.elements.find(n => n.tag === "body")?.text.length ?? 0) * 0.5 &&
+		lineage(s, outer).some(n => n.tag === "footer" || n.attributes["role"] === "contentinfo") === false) return false
+	return true
+}
+
+export const codeContext = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["pre", "code", "kbd", "samp", "var", "svg"].includes(n.tag) ||
+	n.attributes["aria-hidden"] === "true" || /terminal|console|code|mock|editor|syntax|diff/i.test(className(n)))
+
+export const uiContext = (s: PageSnapshot, e: ElementSnapshot): boolean => lineage(s, e).some(n =>
+	["button", "a", "label", "summary", "pre", "nav", "footer"].includes(n.tag) ||
+	n.attributes["aria-hidden"] === "true" ||
+	/^(button|link|tab|menuitem|option)$/.test(n.attributes["role"] ?? "") ||
+	/badge|caption|chip|code|console|diff|label|meta|mock|pill|preview|tag|terminal|writes/i.test(className(n)))
+
+export function buttonBox(s: PageSnapshot, e: ElementSnapshot): boolean {
+	for (const n of lineage(s, e).slice(0, 3)) {
+		if (n !== e && n.text.length > 80) return false
+		if (className(n).toLowerCase().split(/\s+/).some(t => t === "btn" || t.endsWith("-btn") || t.endsWith("_btn"))) return true
+	}
+	return false
+}
+
+export const furnitureClass = (value: string): boolean => value.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
+	.split(/[-_\s]+/).some(raw => {
+		const part = raw.replace(/[^\p{L}\p{N}]/gu, "")
+		return ["pillar", "pillars", "navy"].includes(part) === false &&
+			["meta", "label", "badge", "chip", "pill", "tag", "kicker", "eyebrow", "breadcrumb", "timestamp", "category", "caption", "nav"]
+				.some(w => part.startsWith(w) || part.endsWith(w))
+	})

package/dist/skills/frontend/scripts/detect/rules/typography/support/text-lines.ts

@@ -0,0 +1,43 @@
+import { childrenOf, px, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { visibleText } from "./text-context"
+
+export function phrasingNodes(s: PageSnapshot, e: ElementSnapshot): readonly ElementSnapshot[] {
+	const nodes: ElementSnapshot[] = []
+	const walk = (n: ElementSnapshot): void => {
+		if (visibleText(s, n) === false) return
+		nodes.push(n)
+		for (const c of childrenOf(s, n)) {
+			if (["inline", "contents"].includes(styleOf(c, "display")) || ["br", "wbr"].includes(c.tag)) walk(c)
+		}
+	}
+	walk(e)
+	return nodes
+}
+
+export function mergedLines(nodes: readonly ElementSnapshot[]): readonly Rect[] {
+	const lines: Rect[] = []
+	for (const r of nodes.flatMap(n => n.lineRects).sort((a, b) => a.y - b.y || a.x - b.x)) {
+		const match = lines.find(l => Math.abs(l.y - r.y) <= Math.max(2, Math.min(l.height, r.height) * 0.5))
+		if (match) {
+			const i = lines.indexOf(match)
+			const x = Math.min(match.x, r.x)
+			const y = Math.min(match.y, r.y)
+			lines[i] = { x, y, width: Math.max(match.x + match.width, r.x + r.width) - x, height: Math.max(match.y + match.height, r.y + r.height) - y }
+		} else lines.push(r)
+	}
+	return lines
+}
+
+export function renderedCharacters(nodes: readonly ElementSnapshot[]): number {
+	return nodes.reduce((n, e) => n + [...e.ownText.normalize("NFC")].filter(c =>
+		/[\p{M}\u200b-\u200f\u202a-\u202e\u2060-\u206f]/u.test(c) === false).length, 0)
+}
+
+export function shownLines(s: PageSnapshot, e: ElementSnapshot, lineHeight: number): number {
+	const lines = mergedLines(phrasingNodes(s, e))
+	const top = lines[0]?.y
+	if (top === undefined || lineHeight <= 0) return 0
+	const bottom = Math.max(...lines.map(r => r.y + r.height))
+	return Math.max(1, Math.round((bottom - top - (px(styleOf(e, "font-size")) ?? 16)) / lineHeight) + 1)
+}

package/dist/skills/frontend/scripts/detect/rules/typography/support/type-hierarchy.ts

@@ -0,0 +1,48 @@
+export type TypeSample = { readonly role: string; readonly size: number; readonly weight: number }
+
+function dominant(role: string, values: readonly number[]): number | null {
+	const counts = new Map<number, number>()
+	for (const n of values) counts.set(n, (counts.get(n) ?? 0) + 1)
+	const ranked = [...counts].sort((a, b) => b[1] - a[1] || a[0] - b[0])
+	const first = ranked[0]
+	const second = ranked[1]
+	if (first === undefined) return null
+	if (second && first[1] === second[1]) {
+		return role === "h1" ? Math.max(...ranked.filter(n => n[1] === first[1]).map(n => n[0])) : null
+	}
+	if (second && role !== "h1" && role !== "body" && second[1] >= first[1] * 0.75 && second[0] >= first[0] * 1.25) return null
+	return first[0]
+}
+
+const largestStep = (values: readonly number[]): number => {
+	const sorted = [...values].sort((a, b) => a - b)
+	return sorted.reduce((n, v, i) => Math.max(n, v / (sorted[i - 1] ?? v)), 1)
+}
+
+export function flatHierarchy(samples: readonly TypeSample[]): readonly [string, number][] {
+	const groups = new Map<string, number[]>()
+	for (const s of samples) {
+		const values = groups.get(s.role) ?? []
+		values.push(Math.round(s.size * 10) / 10)
+		groups.set(s.role, values)
+	}
+	const roles: [string, number][] = []
+	const dropped: number[] = []
+	let settled = 0
+	for (const [role, values] of groups) {
+		const size = dominant(role, values)
+		if (size === null) {
+			if (role !== "body") dropped.push(...values)
+		} else {
+			roles.push([role, size])
+			if (role !== "body") settled += values.length
+		}
+	}
+	if (roles.length < 3) return []
+	const h1 = roles.find(r => r[0] === "h1")?.[1]
+	const body = roles.find(r => r[0] === "body")?.[1]
+	if (h1 !== undefined && body !== undefined && h1 < body) return []
+	const sizes = roles.map(r => r[1])
+	if (largestStep(sizes) >= 1.25 || (dropped.length > settled && dropped.some(n => largestStep([...sizes, n]) >= 1.25))) return []
+	return roles
+}

package/dist/skills/frontend/scripts/detect/rules/typography/tight-leading.test.ts

@@ -0,0 +1,54 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { tightLeading } from "./tight-leading"
+
+const text = "This card description is reading copy long enough to wrap over several lines in a narrow column."
+const lines = (count: number, height = 20) => Array.from({ length: count }, (_, i) => ({ x: 0, y: i * height, width: 240, height: 18 }))
+
+test("#given multiline body copy, bold titles and heading wrappers #then only crowded body runs report", () => {
+	const style = { "font-size": "16px", "line-height": "20px" }
+	const snapshot = buildSnapshot([
+		{ id: "body", tag: "p", text, style, lineRects: lines(4) },
+		{ id: "bold-body", tag: "p", text, style: { ...style, "font-weight": "700" }, lineRects: lines(4) },
+		{ id: "medium-title", text, style: { ...style, "font-weight": "500" }, lineRects: lines(2) },
+		{ text, style: { ...style, "font-weight": "600" }, lineRects: lines(2) },
+		{ text, style: { "font-size": "32px", "line-height": "36px" }, lineRects: lines(3, 36) },
+		{ tag: "h2", children: [{ text, style, lineRects: lines(4) }] },
+		{ tag: "h3", children: [{ id: "nested-prose", tag: "p", text, style, lineRects: lines(4) }] },
+		{ text, style, lineRects: lines(1) },
+	])
+	expect(tightLeading.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#body", "#bold-body", "#medium-title", "#nested-prose"])
+})
+
+test("#given lead text and capital labels with long-run controls #then exemption limits are enforced", () => {
+	const snapshot = buildSnapshot([
+		{ text, style: { "font-size": "22px", "line-height": "26.4px" }, lineRects: lines(3, 26.4) },
+		{ id: "long-lead", text, style: { "font-size": "22px", "line-height": "26.4px" }, lineRects: lines(4, 26.4) },
+		{ id: "solid-lead", text, style: { "font-size": "22px", "line-height": "22px" }, lineRects: lines(2, 22) },
+		{ text, style: { "font-size": "12px", "line-height": "13.2px", "text-transform": "uppercase" }, lineRects: lines(3, 13.2) },
+		{ id: "caps-paragraph", text, style: { "font-size": "12px", "line-height": "13.2px", "text-transform": "uppercase" }, lineRects: lines(4, 13.2) },
+		{ id: "caps-overlap", text, style: { "font-size": "12px", "line-height": "10.8px", "text-transform": "uppercase" }, lineRects: lines(3, 10.8) },
+		{ text, style: { "font-size": "18px", "line-height": "23.4px" }, lineRects: lines(3, 23.4) },
+	])
+	expect(tightLeading.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#long-lead", "#solid-lead", "#caps-paragraph", "#caps-overlap"])
+})
+
+test("#given inline struts and preformatted text #then actual block pitch and code exemptions apply", () => {
+	const snapshot = buildSnapshot([
+		{ style: { "line-height": "22px" }, children: [{ tag: "span", text, style: { "font-size": "12px", "line-height": "11.4px" }, lineRects: lines(3, 22) }] },
+		{ id: "proportional-pre", tag: "pre", text, style: { "font-family": "Inter", "font-size": "12px", "line-height": "15px", "white-space": "pre-wrap" }, lineRects: lines(4, 15) },
+		{ tag: "pre", text, style: { "font-family": "monospace", "font-size": "12px", "line-height": "15px", "white-space": "pre-wrap" }, lineRects: lines(4, 15) },
+	])
+	expect(tightLeading.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#proportional-pre"])
+})
+
+test("#given wrapping flex rows of text runs #then only a row whose run wraps inside its own item reports", () => {
+	const row = { display: "flex", "flex-wrap": "wrap", "font-size": "12px", "line-height": "14px" }
+	const long = "The first item of this flex row is a whole sentence of reading copy, long enough to wrap inside its own box"
+	const snapshot = buildSnapshot([
+		{ id: "long-run", tag: "p", text: `${long} Short note`, textRuns: [long, "Short note"], style: row, rect: { width: 260 }, scroll: { clientWidth: 260 }, lineRects: lines(4, 14) },
+		{ id: "short-runs", tag: "p", text: "100 free lead searches 14-day trial No card needed Cancel anytime", textRuns: ["100 free lead searches", "14-day trial", "No card needed", "Cancel anytime"], style: row, rect: { width: 260 }, scroll: { clientWidth: 260 }, lineRects: lines(3, 14) },
+		{ id: "nowrap-runs", tag: "p", text: "100 free lead searches 14-day trial No card needed Cancel anytime", textRuns: ["100 free lead searches", "14-day trial", "No card needed", "Cancel anytime"], style: { ...row, "flex-wrap": "nowrap" }, rect: { width: 260 }, scroll: { clientWidth: 260 }, lineRects: lines(3, 14) },
+	])
+	expect(tightLeading.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#long-run", "#nowrap-runs"])
+})

package/dist/skills/frontend/scripts/detect/rules/typography/tight-leading.ts

@@ -0,0 +1,47 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { caps, headingText, lineage, mono, pitch, visibleText } from "./support/text-context"
+import { itemsEachFitOneLine } from "./support/flex-runs"
+import { mergedLines, phrasingNodes, shownLines } from "./support/text-lines"
+
+export const tightLeading: PageRule = {
+	meta: {
+		id: "tight-leading", name: "Tight line height", category: "quality", severity: "warning", engine: "page",
+		description: "Multiline reading copy with line height below 1.3 crowds adjacent lines.",
+		fixHint: "Use line height around 1.5 to 1.7 for body copy.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const height = pitch(snapshot, element)
+		const ratio = Math.round(height / size * 100) / 100
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 50 ||
+			size <= 0 || size >= 24 || height <= 0 || ratio >= 1.3 || headingText(snapshot, element)) return []
+		const lines = mergedLines(phrasingNodes(snapshot, element))
+		const top = lines[0]?.y
+		if (top === undefined) return []
+		const bottom = Math.max(...lines.map(l => l.y + l.height))
+		if (bottom - top < height * 1.5) return []
+		let count = shownLines(snapshot, element, height)
+		let clamped = false
+		for (const n of lineage(snapshot, element).slice(0, 4)) {
+			const display = styleOf(n, "display")
+			const clamp = Number.parseFloat(styleOf(n, "-webkit-line-clamp"))
+			if (["-webkit-box", "-webkit-inline-box"].includes(display) ||
+				(["flow-root", "inline-block"].includes(display) && clamp > 0)) clamped = true
+			if (["hidden", "clip"].includes(styleOf(n, "overflow-y"))) {
+				count = Math.min(count, Math.max(1, Math.round((n.rect.y + n.rect.height - top) / height)))
+				break
+			}
+		}
+		const weight = Number.parseFloat(styleOf(element, "font-weight"))
+		if (weight >= 600 && (clamped || count <= 2)) return []
+		if (size >= 20 && ratio >= 1.15 && count <= 3) return []
+		if (ratio >= 1 && ((styleOf(element, "text-transform") === "uppercase" && count <= 3) ||
+			(element.text.length < 80 && caps(element.text)))) return []
+		const ws = styleOf(element, "white-space")
+		if (mono(element) && ((ws.startsWith("pre") && ws !== "pre-line") || ws === "break-spaces") &&
+			(lineage(snapshot, element).some(n => ["pre", "code", "samp"].includes(n.tag)) || /[\u2500-\u257f]/.test(element.ownText))) return []
+		if (itemsEachFitOneLine(element, size)) return []
+		return [{ element, message: `Line height ${(height / size).toFixed(2)}x below 1.3`, snippet: shortSnippet(element) }]
+	}),
+}

package/dist/skills/frontend/scripts/detect/rules/typography/tiny-text.test.ts

@@ -0,0 +1,60 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { tinyText } from "./tiny-text"
+
+test("#given tiny prose beside labels, code and fine print #then only running prose reports", () => {
+	const text = "This is a longer sentence of ordinary reading copy."
+	const style = { "font-size": "11px" }
+	const snapshot = buildSnapshot([
+		{ id: "body", tag: "p", text, style },
+		{ tag: "p", text, style: { "font-size": "12px" } },
+		{ tag: "button", text, style },
+		{ tag: "sup", text, style },
+		{ tag: "p", text, style: { ...style, "text-transform": "uppercase" } },
+		{ text: "ANIMATION AND CINEMATIC THREE DIMENSIONS", style },
+		{ tag: "p", text, style: { ...style, "font-family": "IBM Plex Mono", "white-space": "pre-wrap" } },
+		{ text, style, attributes: { class: "legal" } },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#body"])
+})
+
+test("#given SVG text scaled by viewBox and uniform transforms #then drawn sizes control findings", () => {
+	const text = "Cited report with sources for every claim"
+	const snapshot = buildSnapshot([
+		{ tag: "svg", attributes: { viewBox: "0 0 400 200" }, rect: { width: 200, height: 100 }, children: [
+			{ id: "shrunk", tag: "text", text, style: { "font-size": "14px" } },
+		] },
+		{ tag: "svg", attributes: { viewBox: "0 0 200 100" }, rect: { width: 400, height: 200 }, children: [
+			{ tag: "text", text, style: { "font-size": "10px" } },
+		] },
+		{ tag: "svg", attributes: { viewBox: "0 0 400 100" }, rect: { width: 400, height: 100 }, children: [
+			{ id: "group", tag: "text", text, style: { "font-size": "14px", transform: "matrix(0.5, 0, 0, 0.5, 0, 0)" } },
+			{ tag: "text", text, style: { "font-size": "10px", transform: "matrix(1.5, 0, 0, 1.5, 0, 0)" } },
+		] },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#shrunk", "#group"])
+})
+
+test("#given fine-print markers at different depths #then only actual small legal blocks are exempt", () => {
+	const text = "Requires a qualifying plan and a new account. Restrictions apply to every purchase."
+	const style = { "font-size": "11px" }
+	const snapshot = buildSnapshot([
+		{ text, style, attributes: { id: "disclaimer-2" } },
+		{ attributes: { class: "disclaimers" }, children: [{ tag: "li", children: [{ text, style }] }] },
+		{ attributes: { class: "legal-page" }, children: [{ children: [{ children: [{ children: [{ id: "deep", text, style }] }] }] }] },
+		{ id: "type", text, style, attributes: { class: "text-footnote" } },
+		{ tag: "details", attributes: { open: "", class: "footnote-accordion" }, children: [{ id: "accordion", text, style }] },
+		{ id: "terms", text, style, attributes: { class: "offer-terms" } },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#deep", "#type", "#accordion", "#terms"])
+})
+
+test("#given overflowing text on zero-size anchors #then visible glyphs report while clipped glyphs do not", () => {
+	const text = "Harbour office, open nine to five"
+	const style = { "font-size": "10px" }
+	const snapshot = buildSnapshot([
+		{ id: "pin", tag: "span", text, style, rect: { width: 0, height: 0 }, lineRects: [{ x: 0, y: 0, width: 150, height: 12 }] },
+		{ text, style: { ...style, "overflow-x": "hidden", "overflow-y": "hidden" }, rect: { width: 0, height: 0 }, lineRects: [{ x: 0, y: 0, width: 150, height: 12 }] },
+	])
+	expect(tinyText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#pin"])
+})

package/dist/skills/frontend/scripts/detect/rules/typography/tiny-text.ts

@@ -0,0 +1,23 @@
+import { shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { buttonBox, caps, finePrintExempt, mono, smallprint, uiContext, visibleText } from "./support/text-context"
+import { drawnFontSize } from "./support/svg-size"
+import { textPainted } from "./support/painted-text"
+
+export const tinyText: PageRule = {
+	meta: {
+		id: "tiny-text", name: "Tiny body text", category: "quality", severity: "warning", engine: "page",
+		description: "Running copy smaller than 12px is difficult to read.",
+		fixHint: "Increase body copy to at least 14px, preferably 16px.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		if (visibleText(snapshot, element) === false || !textPainted(snapshot, element) || element.ownText.length <= 10 || element.text.length <= 20 ||
+			drawnFontSize(snapshot, element) >= 12 ||
+			["sub", "sup", "code", "kbd", "samp", "var", "caption", "figcaption"].includes(element.tag) ||
+			uiContext(snapshot, element) || (buttonBox(snapshot, element) && smallprint(snapshot, element) === false) || finePrintExempt(snapshot, element) ||
+			styleOf(element, "text-transform") === "uppercase" ||
+			(element.text.length < 80 && caps(element.text)) ||
+			(mono(element) && styleOf(element, "white-space").startsWith("pre"))) return []
+		return [{ element, message: `${drawnFontSize(snapshot, element).toFixed(2)}px body text`, snippet: shortSnippet(element) }]
+	}),
+}