oh-my-opencode 5.1.51 → 5.1.55

package/packages/shared-skills/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/packages/shared-skills/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/packages/shared-skills/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/packages/shared-skills/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/packages/shared-skills/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/packages/shared-skills/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/packages/shared-skills/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) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/undersized-ui-text.test.ts

@@ -0,0 +1,98 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { undersizedUiText } from "./undersized-ui-text"
+test("#given captured opacity motion and held endpoints #then only permanent replacing fades leave size scoring", () => {
+	const animation = {
+		"font-size": "9px", "animation-name": "out", "animation-iteration-count": "1",
+		"animation-duration": "10s", "animation-delay": "40s", "animation-fill-mode": "forwards",
+		"animation-direction": "normal", "animation-play-state": "running", "animation-composition": "replace",
+	}
+	const cases = [
+		{ id: "out", style: {} },
+		{ id: "returns", style: { "animation-fill-mode": "none" } },
+		{ id: "paused", style: { "animation-play-state": "paused" } },
+		{ id: "endless", style: { "animation-iteration-count": "infinite" } },
+		{ id: "fraction", style: { "animation-iteration-count": "1.5" } },
+		{ id: "long", style: { "animation-delay": "51s" } },
+		{ id: "reverse", style: { "animation-direction": "reverse" } },
+		{ id: "alternate", style: { "animation-direction": "alternate", "animation-iteration-count": "2" } },
+		{ id: "reverse-alternate", style: { "animation-direction": "alternate-reverse", "animation-iteration-count": "2" } },
+		{ id: "add", style: { "animation-composition": "add" } },
+		{ id: "scroll", style: { "animation-timeline": "scroll()" } },
+		{ id: "unknown", style: { "animation-name": "out, unavailable" } },
+		{ id: "competing", style: { "animation-name": "out, in" } },
+		{ id: "no-endpoint", style: { "animation-name": "middle" } },
+		{ id: "near-end", style: { "animation-name": "near" } },
+	]
+	const nodes = cases.map(({ id, style }) => ({
+		id, tag: "a", text: "Calendar", attributes: { href: "#" }, style: { ...animation, ...style }, motion: ["opacity"],
+	}))
+	const snapshot = buildSnapshot([
+		...nodes,
+		{ id: "no-motion", tag: "a", text: "Calendar", attributes: { href: "#" }, style: animation },
+		{ id: "missing-composition", tag: "a", text: "Calendar", attributes: { href: "#" }, style: {
+			...animation, "animation-composition": "",
+		}, motion: ["opacity"] },
+		{ style: animation, motion: ["opacity"], children: [
+			{ id: "child", tag: "a", text: "Calendar", attributes: { href: "#" }, style: { "font-size": "9px" } },
+		] },
+	], { cssText: [
+		"@keyframes out { from {opacity:1} 35%, to {opacity:0} } @keyframes in {from {opacity:0}to {opacity:1}}" +
+		"@keyframes middle {50% {opacity:0}} @keyframes near {from {opacity:1}to {opacity:1%}}",
+	] })
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(hit => hit.element?.selector)).toEqual([
+		"#returns", "#paused", "#endless", "#fraction", "#long", "#reverse", "#alternate",
+		"#add", "#scroll", "#unknown", "#competing", "#no-endpoint", "#no-motion", "#missing-composition",
+	])
+})
+
+test("#given functional text, legal floors and tolerant fluid sizes #then only undersized labels report", () => {
+	const snapshot = buildSnapshot([
+		{ id: "button", tag: "button", text: "Learn more", style: { "font-size": "10px" } },
+		{ id: "floor", tag: "button", text: "Learn more", style: { "font-size": "10.9px" } },
+		{ tag: "button", text: "Learn more", style: { "font-size": "10.9688px" } },
+		{ tag: "button", text: "Learn more", style: { "font-size": "11px" } },
+		{ tag: "footer", children: [
+			{ text: "Copyright", style: { "font-size": "10px" } },
+			{ id: "legal", text: "Copyright", style: { "font-size": "9.9px" } },
+			{ id: "footer-link", tag: "a", text: "Privacy", attributes: { href: "#" }, style: { "font-size": "10px" } },
+		] },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#button", "#floor", "#legal", "#footer-link"])
+})
+
+test("#given footnote links, code and nonfunctional prose #then ordinary short labels alone report", () => {
+	const style = { "font-size": "8px" }
+	const snapshot = buildSnapshot([
+		{ id: "label", text: "Short label", style },
+		{ tag: "sup", children: [{ tag: "a", text: "[7]", style, attributes: { href: "#" } }] },
+		{ tag: "code", text: "const x = 1", style },
+		{ text: "A long paragraph of body copy belongs to the tiny-text check.", style },
+		{ text: "const result = { count: 3 };", style: { ...style, "font-family": "IBM Plex Mono", "white-space": "pre-wrap" } },
+		{ text: "Hidden label", style, attributes: { class: "sr-only" } },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#label"])
+})
+
+test("#given furniture class parts and button groups #then only real furniture and button labels report", () => {
+	const style = { "font-size": "9.5px" }
+	const text = "A content-bearing label longer than twenty characters"
+	const snapshot = buildSnapshot([
+		...["taglist", "hero-tagline", "footer-subnav"].map((name, i) => ({ attributes: { class: name }, children: [{ id: `furniture-${i}`, text, style }] })),
+		...["px-stage-compact", "instagram-feed", "pillars", "navy"].map(name => ({ attributes: { class: name }, children: [{ text, style }] })),
+		{ id: "button", text, style, attributes: { class: "demo__btn" } },
+		{ attributes: { class: "hero-btns btn-group" }, children: [
+			{ text, style }, { text: "*Offer valid for new customers only. Terms and conditions apply to every plan.", style, attributes: { class: "offer-terms" } },
+		] },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#furniture-0", "#furniture-1", "#furniture-2", "#button"])
+})
+
+test("#given JSON runs and monospace pricing #then punctuation identifies code rather than prices", () => {
+	const style = { "font-size": "8px", "font-family": "IBM Plex Mono", "white-space": "pre-wrap" }
+	const snapshot = buildSnapshot([
+		{ text: '"data": {', style }, { text: '"id": 7,', style }, { text: '"title": "Introducing Directus",', style }, { text: "},", style },
+		{ id: "price", text: "$50/seat", style }, { id: "count", text: "200+", style },
+	])
+	expect(undersizedUiText.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#price", "#count"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/undersized-ui-text.ts

@@ -0,0 +1,28 @@
+import { fontSizePx, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { buttonBox, className, codeContext, control, furnitureClass, lineage, mono, smallprint, visibleText } from "./support/text-context"
+import { textPainted } from "./support/painted-text"
+
+export const undersizedUiText: PageRule = {
+	meta: {
+		id: "undersized-ui-text", name: "Undersized functional text", category: "quality", severity: "warning", engine: "page",
+		description: "Functional labels below 11px are difficult to read and use.",
+		fixHint: "Use at least 11px for functional text and at least 10px for noninteractive small print.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		const interactive = control(snapshot, element)
+		const floor = interactive === false && smallprint(snapshot, element) ? 10 : 11
+		const chain = lineage(snapshot, element)
+		const furniture = chain.some(n => ["nav", "td", "th", "caption", "figcaption", "dt", "dd", "footer"].includes(n.tag) ||
+			["navigation", "gridcell", "cell"].includes(n.attributes["role"] ?? "") ||
+			(n.tag !== "html" && furnitureClass(className(n))))
+		const codeRun = mono(element) && styleOf(element, "white-space").startsWith("pre") && /[{}[\]<>=;"`\\_]/.test(element.ownText)
+		if (visibleText(snapshot, element) === false || !textPainted(snapshot, element) || size <= 0 || Math.round((floor - size) * 1000) < 100 ||
+			element.ownText.trim().length < 2 || ["sub", "sup", "option"].includes(element.tag) ||
+			chain.some(n => ["sub", "sup"].includes(n.tag)) || codeContext(snapshot, element) || codeRun ||
+			(interactive === false && furniture === false &&
+				(buttonBox(snapshot, element) === false || smallprint(snapshot, element)) && element.ownText.length > 20)) return []
+		return [{ element, message: `${size}px functional text below ${floor}px floor`, snippet: shortSnippet(element) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/wide-tracking.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { wideTracking } from "./wide-tracking"
+
+test("#given tracked prose, capitals, CJK and control labels #then reading text alone reports", () => {
+	const style = { "font-size": "16px", "letter-spacing": "2px" }
+	const snapshot = buildSnapshot([
+		{ id: "prose", text: "Letter spacing this wide breaks natural word shapes.", style },
+		{ id: "mixed", tag: "span", text: "Fall 2026 technology preview", style },
+		{ id: "caps-sentence", text: "SUPPORT HOURS RUN MONDAY TO FRIDAY, FROM NINE IN THE MORNING UNTIL SIX IN THE EVENING, EXCEPT ON PUBLIC HOLIDAYS.", style },
+		{ text: "NOW AVAILABLE ACROSS THE UNITED STATES, CANADA AND NEW ZEALAND", style },
+		{ text: "Short capitals label made from mixed source text", style: { ...style, "text-transform": "uppercase" } },
+		{ text: "台風が近づいているときに気をつけることは何ですか？", style },
+		{ tag: "button", text: "A compact action label", style },
+		{ text: "Reading copy at the exact tracking floor.", style: { ...style, "letter-spacing": "0.8px" } },
+	])
+	expect(wideTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#prose", "#mixed", "#caps-sentence"])
+})
+
+test("#given typed capitals forced lowercase beside normal capitals #then the lowercase run reports", () => {
+	const snapshot = buildSnapshot([
+		{ id: "lower", text: "LIMITED EDITION RELEASE 2026", style: { "letter-spacing": "2px", "text-transform": "lowercase" } },
+		{ text: "LIMITED EDITION RELEASE 2026", style: { "letter-spacing": "2px" } },
+	])
+	expect(wideTracking.check({ snapshot, config: {} }).map(h => h.element?.selector)).toEqual(["#lower"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/typography/wide-tracking.ts

@@ -0,0 +1,26 @@
+import { fontSizePx, px, shortSnippet, styleOf } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { caps, cjk, letters, lineage, visibleText } from "./support/text-context"
+import { shownLines } from "./support/text-lines"
+
+export const wideTracking: PageRule = {
+	meta: {
+		id: "wide-tracking", name: "Wide letter spacing on body text", category: "quality", severity: "warning", engine: "page",
+		description: "Widely tracked reading text splits words into individual characters.",
+		fixHint: "Keep body tracking at or below 0.05em; reserve wider spacing for capital labels.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap(element => {
+		const size = fontSizePx(element)
+		if (visibleText(snapshot, element) === false || element.ownText.length <= 10 || element.text.length <= 20 ||
+			size <= 0 || (px(styleOf(element, "letter-spacing")) ?? 0) / size <= 0.05) return []
+		const transform = styleOf(element, "text-transform")
+		const count = shownLines(snapshot, element, px(styleOf(element, "line-height")) ?? size * 1.2)
+		const capsLabel = transform === "uppercase" || (transform !== "lowercase" && caps(element.text) &&
+			(element.text.length < 80 || (letters(element.text).length <= 40 && count <= 1)))
+		const trackedControl = lineage(snapshot, element).some(n => n.tag === "button" ||
+			(n.tag === "a" && n.attributes["href"] !== undefined) ||
+			["button", "link", "tab"].includes(n.attributes["role"] ?? ""))
+		if (capsLabel || (trackedControl && letters(element.text).length <= 40 && count <= 1) || cjk(element.ownText)) return []
+		return [{ element, message: "Letter spacing exceeds 0.05em on reading text", snippet: shortSnippet(element) }]
+	}),
+}