oh-my-opencode 5.1.51 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/straggler.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { straggler } from "./straggler"
+import { lines, marked } from "./support/layout-cases"
+
+const text = "Line breaks decide how a block of text sits on the page, and one word alone on the last line leaves a hole under the text."
+const paragraph = { id: "copy", tag: "p", text, rect: { x: 24, y: 24, width: 390, height: 96 }, lineRects: lines([390, 390, 350, 50]) }
+
+test("#given a short one word tail and a filled final line #then only the straggler reports", () => {
+	expect(marked(straggler, [paragraph])).toEqual(["#copy"])
+	expect(marked(straggler, [{ ...paragraph, lineRects: lines([390, 390, 350, 250]) }])).toEqual([])
+})
+
+test("#given authored breaks and chosen wrapping #then paragraph wrap is not second guessed", () => {
+	expect(marked(straggler, [paragraph])).toEqual(["#copy"])
+	expect(marked(straggler, [{ ...paragraph, style: { "text-wrap": "pretty" } }])).toEqual([])
+	expect(marked(straggler, [{ ...paragraph, style: { "text-wrap": "balance" } }])).toEqual([])
+	expect(marked(straggler, [{ ...paragraph, children: [{ tag: "br" }] }])).toEqual([])
+})
+
+test("#given narrow columns and inline pictures #then the one face estimate is not applied", () => {
+	expect(marked(straggler, [paragraph])).toEqual(["#copy"])
+	expect(marked(straggler, [{ ...paragraph, text: "Billing settings and invoice history", lineRects: lines([150, 150, 40]) }])).toEqual([])
+	expect(marked(straggler, [{ ...paragraph, children: [{ tag: "img" }] }])).toEqual([])
+})
+
+test("#given lines hidden by a clamp #then the hidden tail is not called a straggler", () => {
+	expect(marked(straggler, [paragraph])).toEqual(["#copy"])
+	expect(marked(straggler, [{ ...paragraph, style: { "overflow-y": "hidden" }, rect: { x: 24, y: 24, width: 390, height: 40 } }])).toEqual([])
+})
+
+test("#given an auto scrolling ancestor #then a reachable last line is still measured", () => {
+	expect(marked(straggler, [{ style: { "overflow-y": "auto" }, rect: { x: 24, y: 24, width: 400, height: 40 }, children: [paragraph] }])).toEqual(["#copy"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/straggler.ts

@@ -0,0 +1,28 @@
+import { shortSnippet } from "../../core/page"
+import type { PageRule } from "../../rule"
+import { measuredLines, oneFace, wordsOf, wrapIs } from "./support/line-breaks"
+
+export const straggler: PageRule = {
+	meta: {
+		id: "straggler", name: "Straggler", category: "quality", severity: "advisory", engine: "page",
+		description: "A paragraph leaves one short word on its last line.",
+		fixHint: "Use text-wrap: pretty or edit the ending so the last line has company.",
+	},
+	check: ({ snapshot }) => snapshot.elements.flatMap((el) => {
+		if (!["p", "li", "dd", "blockquote", "figcaption"].includes(el.tag) || wrapIs(el, "pretty") || !oneFace(snapshot, el)) return []
+		const lines = measuredLines(snapshot, el)
+		const tail = lines.at(-1)
+		const words = wordsOf(el)
+		const last = words.at(-1)
+		const before = words.at(-2)
+		if (lines.length < 2 || !tail || !last || !before || words.length < 3 ||
+			/[\u3000-\u9fff\uac00-\ud7af]/.test(el.text) || lines.length <= 6 && wrapIs(el, "balance")) return []
+		const widest = Math.max(...lines.map((l) => l.width))
+		const sum = lines.reduce((n, l) => n + l.width, 0)
+		const perPx = el.text.replace(/[\u00ad\u200b]/g, "").length / sum
+		if (tail.width > widest * 0.3 || widest * perPx < 30 || el.text.endsWith(`${before}\u00a0${last}`)) return []
+		const tailChars = tail.width * perPx
+		if (tailChars > last.length + 1.5 || tailChars >= last.length + before.length + 1) return []
+		return [{ element: el, message: `"${last}" appears alone on the last of ${lines.length} lines.`, snippet: shortSnippet(el) }]
+	}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/cards.ts

@@ -0,0 +1,114 @@
+import { ancestors, childrenOf, descendants, effectiveBackground, fontSizePx, parentOf, styleOf } from "../../../core/page"
+import { blend, contrastRatio, parseColor, WHITE } from "../../../core/color"
+import { parseShadow } from "../../../core/shadow"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { borders, bottom, chain, clipsX, clipsY, hasRole, length, lineHeight, painted, right, scrollsX } from "./geometry"
+
+const shadowLayers = (el: ElementSnapshot) => parseShadow(styleOf(el, "box-shadow")).filter((s) => s.color.a >= 0.05)
+export const hasBorderOrShadow = (el: ElementSnapshot): boolean =>
+	borders(el).some(Boolean) || shadowLayers(el).some((s) => s.x !== 0 || s.y !== 0 || s.blur > 0 || s.spread !== 0)
+
+export function fillDiffers(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!["none", ""].includes(styleOf(el, "background-image"))) return true
+	const fill = parseColor(styleOf(el, "background-color"))
+	if (!fill || fill.a === 0) return false
+	const p = parentOf(s, el)
+	const under = p ? effectiveBackground(s, p) : WHITE
+	const shown = blend(fill, under)
+	return Math.max(Math.abs(shown.r - under.r), Math.abs(shown.g - under.g), Math.abs(shown.b - under.b)) > 3
+}
+
+export function cardLike(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (/^(a|button|label|input|select|textarea|img|video|canvas|picture|svg|path|span|code|pre)$/.test(el.tag)) return false
+	const layers = shadowLayers(el)
+	const shadow = layers.some((l) => l.x !== 0 || l.y !== 0 || l.blur > 0 || l.spread !== 0)
+	const rounded = ["top-left", "top-right", "bottom-right", "bottom-left"].some((c) => Number.parseFloat(styleOf(el, `border-${c}-radius`)) > 0)
+	if (!shadow && !rounded) return false
+	const p = parentOf(s, el)
+	const under = p ? effectiveBackground(s, p) : WHITE
+	const ink = parseColor(styleOf(el, "color"))
+	const canJudge = ink !== null && contrastRatio(blend(ink, under), under) >= 3
+	const sides = borders(el).map((visible, i) => {
+		const side = ["top", "right", "bottom", "left"][i] ?? "top"
+		const color = parseColor(styleOf(el, `border-${side}-color`))
+		if (!visible || !canJudge || !color) return visible
+		const edge = blend(color, effectiveBackground(s, el))
+		return Math.max(Math.abs(edge.r - under.r), Math.abs(edge.g - under.g), Math.abs(edge.b - under.b)) >= 8
+	})
+	for (const l of layers.filter((l) => !l.inset)) {
+		const spread = l.spread + l.blur / 2
+		for (const [i, reach] of [spread - l.y, spread + l.x, spread + l.y, spread - l.x].entries()) if (reach >= 1) sides[i] = true
+	}
+	return sides.filter(Boolean).length >= 3 || fillDiffers(s, el)
+}
+
+export function labelBox(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const radius = Number.parseFloat(styleOf(el, "border-top-left-radius"))
+	if (radius >= el.rect.height / 2 - 0.5) return true
+	const kids = childrenOf(s, el)
+	const chrome = ["padding-top", "padding-bottom", "border-top-width", "border-bottom-width"].reduce((n, p) => n + length(el, p), 0)
+	return (kids.length === 0 && el.lineRects.length === 1 && el.rect.height <= lineHeight(el) * 3) ||
+		el.rect.height - chrome <= lineHeight(el) * 1.5
+}
+
+export function embeddedFrame(s: PageSnapshot, el: ElementSnapshot, outer: ElementSnapshot): boolean {
+	const nodes = [...descendants(s, el)].filter((n) => painted(s, n))
+	const controls = nodes.filter((n) => n.tag === "button" || hasRole(n, ["button"]) || n.tag === "input" || n.tag === "select")
+	const realControls = controls.filter((n) => !/copy|more|play|pause|mute|volume|seek|fullscreen|speed/i.test(n.attributes["aria-label"] ?? n.text))
+	if (realControls.length > 0) return false
+	if ([...descendants(s, el)].some((n) => n.tag === "audio") && controls.length > 0 && nodes.some((n) => hasRole(n, ["slider"]))) return true
+	const area = el.rect.width * el.rect.height
+	if (nodes.some((n) => /^(svg|canvas|img|video|iframe|picture)$/.test(n.tag) && n.rect.width * n.rect.height >= area * 0.4) && el.text.length <= 300) return true
+	if (nodes.some((n) => /^(video|audio)$/.test(n.tag) && n.rect.width >= 80) && controls.length > 0) return true
+	if (!/monospace/i.test(styleOf(outer, "font-family"))) {
+		const all = [el, ...nodes]
+		const total = all.reduce((n, c) => n + c.ownText.replace(/\s/g, "").length, 0)
+		const mono = all.filter((n) => /monospace/i.test(styleOf(n, "font-family"))).reduce((n, c) => n + c.ownText.replace(/\s/g, "").length, 0)
+		if (total > 0 && mono / total >= 0.9 && all.some((n) => /^(pre|code|samp|kbd|output)$/.test(n.tag) || n.ownText.length >= el.text.length * 0.6 || /const |await |=>|[{};]/.test(n.text))) return true
+	}
+	return false
+}
+
+export function fieldBox(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const kids = childrenOf(s, el).filter((c) => painted(s, c))
+	const field = (c: ElementSnapshot): boolean => /^(input|textarea|select)$/.test(c.tag) || c.attributes["contenteditable"] === "true"
+	return kids.some(field) && kids.every((c) => field(c) || c.text.length <= 20 && [c, ...descendants(s, c)].some((n) => n.tag === "button"))
+}
+
+export function sharesEdges(s: PageSnapshot, el: ElementSnapshot, outer: ElementSnapshot): boolean {
+	const a = el.rect
+	const b = outer.rect
+	const edges = [
+		Math.abs(a.y - b.y - length(outer, "border-top-width")) <= 1.5,
+		Math.abs(right(a) - right(b) + length(outer, "border-right-width")) <= 1.5,
+		Math.abs(bottom(a) - bottom(b) + length(outer, "border-bottom-width")) <= 1.5,
+		Math.abs(a.x - b.x - length(outer, "border-left-width")) <= 1.5,
+	]
+	if (edges.filter(Boolean).length >= 3) return true
+	if (!((edges[0] || edges[2]) && (edges[1] || edges[3]))) return false
+	return [...ancestors(s, el)].some((c) => (clipsX(c) || clipsY(c)) &&
+		((Math.abs(a.width - c.rect.width) <= 1.5 && c.rect.height > a.height + 1.5) ||
+			(Math.abs(a.height - c.rect.height) <= 1.5 && c.rect.width > a.width + 1.5)))
+}
+
+export function controlStrip(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const p = parentOf(s, el)
+	if (p && scrollsX(p)) return true
+	const kids = childrenOf(s, el)
+	const first = kids[0]
+	return first !== undefined && kids.length >= 3 && kids.every((c) =>
+		(c.tag === "a" || c.tag === "button" || hasRole(c, ["link", "button", "tab"])) && c.rect.height <= 64 &&
+		Math.min(bottom(c.rect), bottom(first.rect)) - Math.max(c.rect.y, first.rect.y) > Math.min(c.rect.height, first.rect.height) * 0.5)
+}
+
+export function dialogCard(s: PageSnapshot, el: ElementSnapshot): boolean {
+	for (const a of chain(s, el)) {
+		if (a.tag === "dialog" || hasRole(a, ["dialog", "alertdialog"])) return true
+		if (a !== el && cardLike(s, a)) return false
+	}
+	return false
+}
+
+export const pageFrame = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.rect.x <= 1 && el.rect.width >= s.document.clientWidth - 1 && el.rect.height >= s.document.scrollHeight * 0.75 &&
+	!borders(el).some(Boolean) && !fillDiffers(s, el) && shadowLayers(el).every((l) => l.color.a <= 0.05)

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/clipping.ts

@@ -0,0 +1,71 @@
+import { ancestors, childrenOf, descendants, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { bottom, chain, clipsX, hasRole, ident, outOfFlow, painted, right, scrollsX } from "./geometry"
+
+export function trackCuts(s: PageSnapshot, el: ElementSnapshot, text: Rect): boolean {
+	const path = [...ancestors(s, el)]
+	return path.some((clip, index) => {
+		if (clip.tag === "body" || !clipsX(clip) || text.x >= clip.rect.x - 1 && right(text) <= right(clip.rect) + 1) return false
+		if (scrollsX(clip) && clip.scroll.scrollWidth > clip.scroll.clientWidth) return true
+		return path.slice(0, index).some((track) => {
+			if (["", "none"].includes(styleOf(track, "transform")) || track.scroll.scrollWidth <= clip.scroll.clientWidth + 1) return false
+			const kids = childrenOf(s, track).filter((n) => n.rect.width > 0 && n.rect.height > 0)
+			return kids.some((a, i) => kids.slice(i + 1).some((b) =>
+				Math.min(bottom(a.rect), bottom(b.rect)) - Math.max(a.rect.y, b.rect.y) >= Math.min(a.rect.height, b.rect.height) * 0.5 &&
+				(a.rect.x >= right(b.rect) - 1 || b.rect.x >= right(a.rect) - 1)))
+		})
+	})
+}
+
+const viewportTrack = (el: ElementSnapshot): boolean =>
+	/(?:^|[\s_-])(?:carousel|comparison|compare|fisheye|flickity|marquee|owl|preview|reel|rolling|scroller|slick|slider|slideshow|splide|split|swiper|tempwrap|ticker|viewport)(?:$|[\s_-])/.test(
+		`${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase()) ||
+	/\b(?:carousel|slider)\b/i.test(el.attributes["aria-roledescription"] ?? "") ||
+	/(?:^|[\s_-])demo[\s_-]+(?:area|stage|viewport)(?:$|[\s_-])/.test(ident(el))
+
+export const shell = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.tag === "body" || el.rect.x <= 1 && el.rect.y <= 1 && el.rect.width >= s.viewport.width * 0.98 && el.rect.height >= s.document.scrollHeight * 0.98
+
+function clippedAxes(el: ElementSnapshot): readonly [boolean, boolean] | null {
+	if (["contents", "none"].includes(styleOf(el, "display")) || el.rect.width <= 0 || el.rect.height <= 0 ||
+		scrollsX(el) || /^(auto|scroll)$/.test(styleOf(el, "overflow-y"))) return null
+	const x = /^(hidden|clip)$/.test(styleOf(el, "overflow-x"))
+	const y = /^(hidden|clip)$/.test(styleOf(el, "overflow-y"))
+	return x || y ? [x, y] : null
+}
+
+function traps(s: PageSnapshot, clip: ElementSnapshot, el: ElementSnapshot): boolean {
+	if (el.modal) return false
+	const axes = clippedAxes(clip)
+	if (!axes) return false
+	const parents = [...ancestors(s, el)]
+	const between = parents.slice(0, parents.indexOf(clip) + 1)
+	if (styleOf(el, "position") === "fixed" && !between.some((n) =>
+		!["", "none"].includes(styleOf(n, "transform")) || /paint|layout|strict|content/.test(styleOf(n, "contain")) ||
+		!["", "none"].includes(styleOf(n, "filter")))) return false
+	if (styleOf(el, "position") === "absolute") {
+		const cb = parents.find((n) => styleOf(n, "position") !== "static" || !["", "none"].includes(styleOf(n, "transform")))
+		if (cb && !between.includes(cb)) return false
+	}
+	return axes[0] && (el.rect.x < clip.rect.x - 2 || right(el.rect) > right(clip.rect) + 2) ||
+		axes[1] && (el.rect.y < clip.rect.y - 2 || bottom(el.rect) > bottom(clip.rect) + 2)
+}
+
+const popover = (el: ElementSnapshot): boolean =>
+	hasRole(el, ["menu", "menubar", "listbox", "tooltip", "dialog"]) ||
+	el.tag === "dialog" && el.attributes["open"] !== undefined || el.attributes["popover"] !== undefined
+
+export function clippedChild(s: PageSnapshot, clip: ElementSnapshot): ElementSnapshot | undefined {
+	if (!clippedAxes(clip) || shell(s, clip) || viewportTrack(clip) || childrenOf(s, clip).some(viewportTrack) || !painted(s, clip)) return undefined
+	return [...descendants(s, clip)].find((el) => {
+		if (chain(s, el).some((n) => n.attributes["aria-hidden"] === "true") || hasRole(el, ["none", "presentation"]) ||
+			/^(img|svg|canvas|video)$/.test(el.tag)) return false
+		if (!outOfFlow(el) || viewportTrack(el) || !(popover(el) || [...descendants(s, el)].some(popover))) return false
+		if (!traps(s, clip, el)) return false
+		const parents = [...ancestors(s, el)]
+		const between = parents.slice(0, parents.indexOf(clip))
+		if (between.some((n) => traps(s, n, el) || scrollsX(n) || /^(auto|scroll)$/.test(styleOf(n, "overflow-y")))) return false
+		return chain(s, el).every((n) => styleOf(n, "display") !== "none" && styleOf(n, "visibility") !== "hidden" &&
+			!(Number.parseFloat(styleOf(n, "opacity")) <= 0.01))
+	})
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/declared-mockups.ts

@@ -0,0 +1,46 @@
+import { childrenOf, descendants, parentOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { chain, hasRole, ident } from "./geometry"
+
+const hidden = (el: ElementSnapshot): boolean => el.attributes["inert"] !== undefined || el.attributes["aria-hidden"] === "true"
+const shown = (s: PageSnapshot, el: ElementSnapshot): boolean =>
+	el.rect.width > 0 && el.rect.height > 0 && styleOf(el, "visibility") !== "hidden" && chain(s, el).every((n) => styleOf(n, "display") !== "none")
+const squash = (text: string): string => text.replace(/\s/g, "")
+const parts = (el: ElementSnapshot): string[] =>
+	`${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[\s_-]+/)
+
+export function declaredMockups(s: PageSnapshot): ReadonlySet<ElementSnapshot> {
+	const pageChars = s.elements.filter((n) => shown(s, n)).reduce((sum, n) => sum + squash(n.ownText).length, 0)
+	const modals = s.elements.filter((n) => !hidden(n) && shown(s, n) &&
+		(n.attributes["aria-modal"] === "true" || hasRole(n, ["dialog", "alertdialog"]) || n.tag === "dialog" && n.attributes["open"] !== undefined))
+	return new Set(s.elements.filter((root) => {
+		if (!hidden(root) || root.rect.width < 120 || root.rect.height < 80 ||
+			/^(html|body|main|header|footer|nav|aside|section|article|form|dialog|li|tr|td|th|tbody|thead|table|details|summary)$/.test(root.tag)) return false
+		if ((root.attributes["role"] ?? "").split(/\s+/).some((r) => r !== "" && !["presentation", "none", "img", "figure", "group"].includes(r))) return false
+		if (root.attributes["aria-modal"] !== undefined || root.attributes["data-aria-hidden"] !== undefined || /^(fixed|sticky)$/.test(styleOf(root, "position"))) return false
+		if (parts(root).some((p) => /^(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)$/.test(p))) return false
+		const path = chain(s, root).slice(1)
+		if (path.some((n) => /^(h[1-6]|p|a|button|label|summary|legend|caption|figcaption|blockquote|q)$/.test(n.tag))) 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) => shown(s, n) && squash(n.ownText) !== "")
+		if (runs.length < 3 || runs.reduce((sum, n) => sum + squash(n.ownText).length, 0) * 2 >= pageChars) return false
+		const fields = nodes.filter((n) => /^(input|select|textarea)$/.test(n.tag) && !(n.tag === "input" && n.attributes["type"] === "hidden"))
+		const links = runs.filter((n) => chain(s, n).some((a) => a.tag === "a" && (a.attributes["href"] ?? "").trim() !== ""))
+		if (fields.length >= 2 || fields.length > 0 && nodes.some((n) => n.tag === "label") || links.length * 2 >= runs.length) return false
+		if (modals.some((n) => !nodes.includes(n) && !path.includes(n))) return false
+		const text = squash(root.text)
+		if (text !== "" && path.some((n) => squash(n.attributes["aria-label"] ?? "").includes(text))) return false
+		const p = parentOf(s, root)
+		return !p || !childrenOf(s, p).some((peer) => {
+			if (peer === root) return false
+			const classes = (root.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+			const peerClasses = (peer.attributes["class"] ?? "").split(/\s+/).filter(Boolean)
+			const sameShape = peer.tag === root.tag && (classes.length === 0) === (peerClasses.length === 0) && classes.every((c) => peerClasses.includes(c))
+			if (shown(s, peer) && !hidden(peer) && sameShape || text !== "" && squash(peer.text) === text) return true
+			const alternative = peer.rect.width <= 1 || peer.rect.height <= 1 || /sr-only|visually-?hidden|screen-?reader|a11y-hidden|hidden-visually/.test(ident(peer))
+			return shown(s, peer) && alternative && peer.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(peer.text)
+		})
+	}))
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/geometry.ts

@@ -0,0 +1,73 @@
+import { ancestors, childrenOf, descendants, fontSizePx, isRendered, px, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+
+export const right = (r: Rect): number => r.x + r.width
+export const bottom = (r: Rect): number => r.y + r.height
+export const length = (el: ElementSnapshot, prop: string): number => px(styleOf(el, prop)) ?? 0
+export const chain = (s: PageSnapshot, el: ElementSnapshot): readonly ElementSnapshot[] => [el, ...ancestors(s, el)]
+export const scrollsX = (el: ElementSnapshot): boolean => /^(auto|scroll)$/.test(styleOf(el, "overflow-x"))
+export const clipsX = (el: ElementSnapshot): boolean => /^(hidden|clip|auto|scroll)$/.test(styleOf(el, "overflow-x"))
+export const clipsY = (el: ElementSnapshot): boolean => /^(hidden|clip|auto|scroll)$/.test(styleOf(el, "overflow-y"))
+export function clipRect(el: ElementSnapshot): Rect {
+	const margin = Math.max(0, styleOf(el, "overflow-clip-margin").split(/\s+/).map(Number.parseFloat).find(Number.isFinite) ?? 0)
+	const layoutWidth = el.scroll.clientWidth + length(el, "border-left-width") + length(el, "border-right-width")
+	const layoutHeight = el.scroll.clientHeight + length(el, "border-top-width") + length(el, "border-bottom-width")
+	const scaleX = layoutWidth > 0 && Math.abs(el.rect.width - layoutWidth) > 1 ? el.rect.width / layoutWidth : 1
+	const scaleY = layoutHeight > 0 && Math.abs(el.rect.height - layoutHeight) > 1 ? el.rect.height / layoutHeight : 1
+	const x = styleOf(el, "overflow-x") === "clip" ? margin * scaleX : 0
+	const y = styleOf(el, "overflow-y") === "clip" ? margin * scaleY : 0
+	return { x: el.rect.x - x, y: el.rect.y - y, width: el.rect.width + 2 * x, height: el.rect.height + 2 * y }
+}
+export const outOfFlow = (el: ElementSnapshot): boolean => /^(absolute|fixed)$/.test(styleOf(el, "position"))
+export const hasRole = (el: ElementSnapshot, roles: readonly string[]): boolean =>
+	(el.attributes["role"] ?? "").toLowerCase().split(/\s+/).some((r) => roles.includes(r))
+export const ident = (el: ElementSnapshot): string => `${el.attributes["class"] ?? ""} ${el.attributes["id"] ?? ""}`.toLowerCase()
+export const alpha = (el: ElementSnapshot, prop: string): number => parseColor(styleOf(el, prop))?.a ?? 0
+export const borders = (el: ElementSnapshot): readonly boolean[] =>
+	["top", "right", "bottom", "left"].map((side) =>
+		length(el, `border-${side}-width`) >= 0.5 &&
+		!/^(none|hidden)$/.test(styleOf(el, `border-${side}-style`)) &&
+		alpha(el, `border-${side}-color`) >= 0.05)
+const screenReaderOnly = (el: ElementSnapshot): boolean =>
+	styleOf(el, "clip-path") === "inset(50%)" ||
+	(el.rect.width <= 1 && el.rect.height <= 1 && (clipsX(el) || clipsY(el)))
+
+export function painted(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!isRendered(s, el) || screenReaderOnly(el)) return false
+	for (const a of chain(s, el)) {
+		if (styleOf(a, "display") === "none" || Number.parseFloat(styleOf(a, "opacity")) <= 0.01) return false
+		if (a.tag === "details" && a.attributes["open"] === undefined) {
+			const summary = childrenOf(s, a).find((c) => c.tag === "summary")
+			if (!summary || !chain(s, el).includes(summary)) return false
+		}
+		const clip = clipRect(a)
+		if (a !== el && ((clipsX(a) && (right(el.rect) <= clip.x || el.rect.x >= right(clip))) ||
+			(clipsY(a) && (bottom(el.rect) <= clip.y || el.rect.y >= bottom(clip))))) return false
+	}
+	return true
+}
+
+export function textLines(s: PageSnapshot, el: ElementSnapshot): readonly Rect[] {
+	const nodes = [el, ...descendants(s, el)].filter((n) => n === el || styleOf(n, "display") === "inline")
+	const rects = nodes.flatMap((n) => n.lineRects).filter((r) => r.width > 0 && r.height > 0).sort((a, b) => a.y - b.y || a.x - b.x)
+	const lines: Rect[] = []
+	for (const r of rects) {
+		const i = lines.findIndex((l) => Math.min(bottom(l), bottom(r)) - Math.max(l.y, r.y) > Math.min(l.height, r.height) / 2)
+		const l = lines[i]
+		if (l) lines[i] = { x: Math.min(l.x, r.x), y: Math.min(l.y, r.y), width: Math.max(right(l), right(r)) - Math.min(l.x, r.x), height: Math.max(bottom(l), bottom(r)) - Math.min(l.y, r.y) }
+		else lines.push(r)
+	}
+	return lines
+}
+
+export function bounds(rects: readonly Rect[]): Rect | null {
+	if (rects.length === 0) return null
+	const x = Math.min(...rects.map((r) => r.x))
+	const y = Math.min(...rects.map((r) => r.y))
+	return { x, y, width: Math.max(...rects.map(right)) - x, height: Math.max(...rects.map(bottom)) - y }
+}
+
+export const lineHeight = (el: ElementSnapshot): number => px(styleOf(el, "line-height")) ?? fontSizePx(el) * 1.2
+export const intersects = (a: Rect, b: Rect): boolean =>
+	Math.min(right(a), right(b)) > Math.max(a.x, b.x) && Math.min(bottom(a), bottom(b)) > Math.max(a.y, b.y)

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/hidden-interface.ts

@@ -0,0 +1,35 @@
+import { descendants, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { chain } from "./geometry"
+
+export const classWords = (el: ElementSnapshot): readonly string[] =>
+	(el.attributes["class"] ?? "").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/).filter(Boolean)
+
+export function closedClass(el: ElementSnapshot): boolean {
+	return (el.attributes["class"] ?? "").split(/\s+/).some((token) => {
+		const words = classWords({ ...el, attributes: { class: token } })
+		const pair = (a: string, b: string): boolean => words.some((word, i) => word === a && words[i + 1] === b)
+		return words.some((word) => ["offcanvas", "drawer", "megamenu", "submenu", "dropdown", "flyout", "modal", "tabpanel", "tabpane"].includes(word)) ||
+			pair("off", "canvas") || pair("mega", "menu") || pair("sub", "menu") ||
+			words.some((word) => ["content", "panel", "pane", "body"].includes(word)) && words.some((word) => ["tab", "tabs", "accordion"].includes(word))
+	})
+}
+
+export function unstartedSlider(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const slider = chain(s, el).slice(0, 7).find((n) => (n.attributes["class"] ?? "").split(/\s+/).some((token) => {
+		const words = classWords({ ...n, attributes: { class: token } })
+		return words.some((word) => ["slider", "carousel", "swiper", "slick", "splide", "glide", "flickity", "slideshow", "revslider"].includes(word)) &&
+			!words.some((word) => ["slide", "item", "cell", "card", "pane", "caption"].includes(word))
+	}))
+	if (!slider) return false
+	return ![slider, ...descendants(s, slider)].some((n) => {
+		if (/^(hidden|collapse)$/.test(styleOf(n, "visibility"))) return false
+		const path = chain(s, n)
+		const upto = path.slice(0, path.indexOf(slider) + 1)
+		const shows = (aria: boolean): boolean => upto.every((a) => styleOf(a, "display") !== "none" &&
+			Number.parseFloat(styleOf(a, "opacity")) > 0.02 && !(aria && a.attributes["aria-hidden"] === "true"))
+		if (n.ownText.trim() !== "" && shows(true)) return true
+		return n !== slider && n.rect.width >= Math.max(1, slider.rect.width * 0.5) && n.rect.height >= 1 &&
+			(/^(img|picture|video|canvas|svg)$/.test(n.tag) || styleOf(n, "background-image").includes("url(")) && shows(false)
+	})
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/layout-cases.ts

@@ -0,0 +1,23 @@
+import { lintSnapshot } from "../../../lint"
+import type { PageRule } from "../../../rule"
+import type { PageSnapshot } from "../../../types"
+import { buildSnapshot, type NodeSpec } from "../../../testing/build-snapshot"
+
+export const marked = (rule: PageRule, nodes: readonly NodeSpec[], options: Parameters<typeof buildSnapshot>[1] = {}): readonly string[] =>
+	selectors(rule, buildSnapshot(nodes, options))
+
+export const selectors = (rule: PageRule, snapshot: PageSnapshot): readonly string[] =>
+	lintSnapshot(snapshot, { rules: [rule] }).map((f) => f.location.kind === "element" ? f.location.selector : "page")
+
+export const border = {
+	"border-top-width": "1px", "border-right-width": "1px", "border-bottom-width": "1px", "border-left-width": "1px",
+	"border-top-style": "solid", "border-right-style": "solid", "border-bottom-style": "solid", "border-left-style": "solid",
+	"border-top-color": "#333", "border-right-color": "#333", "border-bottom-color": "#333", "border-left-color": "#333",
+}
+
+export const rounded = {
+	"border-top-left-radius": "12px", "border-top-right-radius": "12px", "border-bottom-right-radius": "12px", "border-bottom-left-radius": "12px",
+}
+
+export const lines = (widths: readonly number[], x = 24, y = 24, height = 20) =>
+	widths.map((width, i) => ({ x, y: y + i * 24, width, height }))

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/line-breaks.ts

@@ -0,0 +1,32 @@
+import { descendants, fontSizePx, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot, Rect } from "../../../types"
+import { bottom, chain, length, painted, right, textLines } from "./geometry"
+
+function authoredBreak(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (/^(pre|pre-wrap|pre-line|break-spaces)$/.test(styleOf(el, "white-space"))) return true
+	return [...descendants(s, el)].some((n) => n.tag === "br" || !["inline", "contents", "none"].includes(styleOf(n, "display")))
+}
+
+export function measuredLines(s: PageSnapshot, el: ElementSnapshot): readonly Rect[] {
+	if (!painted(s, el) || authoredBreak(s, el)) return []
+	const lines = textLines(s, el)
+	const widest = [...lines].sort((a, b) => b.width - a.width)[0]
+	if (!widest || lines.some((r) => right(r) <= widest.x || r.x >= right(widest))) return []
+	for (const c of chain(s, el).slice(0, 5)) {
+		if (/^(hidden|clip)$/.test(styleOf(c, "overflow-y")) &&
+			lines.some((r) => r.y + r.height / 2 > bottom(c.rect) - length(c, "border-bottom-width"))) return []
+	}
+	return lines
+}
+
+export const wrapIs = (el: ElementSnapshot, value: string): boolean =>
+	(styleOf(el, "text-wrap-style") || styleOf(el, "text-wrap")).split(/\s+/).includes(value)
+
+export const wordsOf = (el: ElementSnapshot): readonly string[] =>
+	el.text.replace(/[\u00ad\u200b]/g, "").trim().split(/\s+/).filter(Boolean)
+
+export function oneFace(s: PageSnapshot, el: ElementSnapshot): boolean {
+	return [...descendants(s, el)].every((n) =>
+		!["img", "svg", "canvas", "video", "input"].includes(n.tag) &&
+		(styleOf(n, "font-family") === styleOf(el, "font-family") && fontSizePx(n) === fontSizePx(el) || n.ownText === ""))
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/layout/support/motion.ts

@@ -0,0 +1,77 @@
+import { childrenOf, styleOf } from "../../../core/page"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import { keyframes } from "../../decoration/support/keyframes"
+import { bottom, chain, right } from "./geometry"
+
+const list = (el: ElementSnapshot, prop: string): readonly string[] => styleOf(el, prop).split(",").map((v) => v.trim())
+const at = (values: readonly string[], index: number): string => values[index % values.length] ?? ""
+
+function tracedToEnd(s: PageSnapshot, el: ElementSnapshot, prop: string): boolean {
+	const counts = list(el, "animation-iteration-count")
+	const states = list(el, "animation-play-state")
+	const timelines = list(el, "animation-timeline")
+	let setting = false
+	for (const [i, name] of list(el, "animation-name").entries()) {
+		if (name === "" || name === "none") continue
+		const frames = keyframes(s, name)
+		if (!frames) return false
+		if (!frames.some((f) => f[prop] !== undefined)) continue
+		setting = true
+		const count = Number.parseFloat(at(counts, i))
+		if (!Number.isFinite(count) || count <= 0 || at(states, i) === "paused" || !["", "auto"].includes(at(timelines, i))) return false
+	}
+	const durations = list(el, "transition-duration")
+	return setting || list(el, "transition-property").some((p, i) => p === prop && Number.parseFloat(at(durations, i)) > 0)
+}
+
+export function openingWidth(s: PageSnapshot, el: ElementSnapshot): boolean {
+	for (const node of chain(s, el).slice(0, 64)) {
+		if (node.tag === "body" || node.tag === "html") return false
+		if (node.motion.some((p) => /^(?:(?:min|max)-)?(?:width|inline-size)$/.test(p) && tracedToEnd(s, node, p))) return true
+	}
+	return false
+}
+
+function onlyScales(value: string): boolean {
+	let rest = value.trim().replace(/\s*!important\s*$/, "")
+	if (rest.toLowerCase() === "none") return true
+	let found = false
+	while (rest !== "") {
+		const match = /^scale(?:[XYZ]|3d)?\(([^)]*)\)\s*/i.exec(rest)
+		if (!match || (match[1] ?? "").split(/[\s,]+/).filter(Boolean).some((n) => !Number.isFinite(Number(n)))) return false
+		found = true
+		rest = rest.slice(match[0].length)
+	}
+	return found
+}
+
+function endlessTranslation(s: PageSnapshot, el: ElementSnapshot): boolean {
+	if (!el.motion.some((p) => p === "transform" || p === "translate" || p === "-webkit-transform")) return false
+	const counts = list(el, "animation-iteration-count")
+	const states = list(el, "animation-play-state")
+	return list(el, "animation-name").some((name, i) => {
+		if (name === "" || name === "none" || at(counts, i) !== "infinite" || at(states, i) === "paused") return false
+		const frames = keyframes(s, name)
+		return frames === null || frames.some((f) => Object.entries(f).some(([prop, value]) =>
+			prop.replace(/^-webkit-/, "") === "translate" || prop.replace(/^-webkit-/, "") === "transform" && !onlyScales(value)))
+	})
+}
+
+export function ridesRunningTrack(s: PageSnapshot, el: ElementSnapshot): boolean {
+	const parents = chain(s, el).slice(1)
+	for (const [index, clip] of parents.entries()) {
+		if (clip.tag === "body" || clip.tag === "html") break
+		if (!/^(hidden|clip)$/.test(styleOf(clip, "overflow-x")) || clip.scroll.clientWidth <= 0) continue
+		if (parents.slice(0, index).some((track) => {
+			if (track.scroll.scrollWidth <= clip.scroll.clientWidth + 1 || !["transform", "translate"].some((p) =>
+				!["", "none"].includes(styleOf(track, p))) || !endlessTranslation(s, track)) return false
+			const kids = childrenOf(s, track).filter((n) => n.rect.width >= 1 && n.rect.height >= 1)
+			return kids.some((a, i) => {
+				const b = kids[i + 1]
+				return b !== undefined && (b.rect.x >= right(a.rect) - 1 || right(b.rect) <= a.rect.x + 1) &&
+					Math.min(bottom(a.rect), bottom(b.rect)) - Math.max(a.rect.y, b.rect.y) > 0
+			})
+		})) return true
+	}
+	return false
+}