oh-my-opencode 5.1.51 → 5.1.55

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/side-tab.test.ts

@@ -0,0 +1,91 @@
+import { test } from "bun:test"
+import { sideTab } from "./side-tab"
+import { assertCases, round } from "./support/assert-cases"
+
+test("#given rounded card accents and safe borders #then only the card stripes report", () => {
+	const style = { ...round("12px"), "border-left-width": "2px", "border-left-style": "solid", "border-left-color": "rgb(0,150,130)" }
+	assertCases(
+		sideTab,
+		[
+			{ id: "flag", style },
+			{ id: "square", style: { ...style, ...round("0px") } },
+			{ id: "neutral", style: { ...style, "border-left-color": "rgb(30,30,30)" } },
+			{ id: "ring", rect: { width: 64, height: 64 }, style: { ...style, ...round("50%") } },
+			{ tag: "button", id: "button", style },
+			{ id: "hidden", style: { ...style, opacity: "0" } },
+		],
+		["#flag"],
+	)
+})
+test("#given far rounded corners #then the opposite pair controls a thin stripe", () => {
+	const stripe = { "border-left-width": "2px", "border-left-style": "solid", "border-left-color": "rgb(0,150,130)" }
+	assertCases(
+		sideTab,
+		[
+			{ id: "flag", style: { ...stripe, "border-top-right-radius": "12px", "border-bottom-right-radius": "6px" } },
+			{ id: "near", style: { ...stripe, "border-top-left-radius": "12px", "border-bottom-left-radius": "12px" } },
+			{ id: "one-square", style: { ...stripe, "border-top-right-radius": "12px", "border-bottom-right-radius": "2px" } },
+		],
+		["#flag"],
+	)
+})
+test("#given row status and selected states #then only nonselection stripes report", () => {
+	const stripe = { "box-shadow": "inset 3px 0 0 rgb(220,30,40)" }
+	assertCases(
+		sideTab,
+		[
+			{ tag: "td", id: "flag", style: stripe },
+			{ tag: "tr", attributes: { "aria-selected": "true" }, children: [{ tag: "td", id: "selected", style: stripe }] },
+			{ tag: "td", id: "shaded", style: { ...stripe, "background-color": "rgb(240,240,240)" } },
+			{ tag: "td", id: "divider", style: { "box-shadow": "inset 1px 0 0 rgb(220,30,40)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given pseudo and inset stripes #then square and colorless bands pass", () => {
+	const band = { position: "absolute", left: "0px", bottom: "0px", width: "200px", height: "3px", "background-color": "rgb(220,30,40)" }
+	assertCases(
+		sideTab,
+		[
+			{ id: "flag", style: round("12px"), after: band },
+			{ id: "square", after: band },
+			{ id: "picture", style: round("12px"), after: { ...band, "background-color": "transparent", "background-image": "url(photo.jpg)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given flex stripe children #then only rounded nonselected hosts report", () => {
+	const stripe = (id: string) => ({ id, rect: { width: 4, height: 100 }, style: { "background-color": "rgb(245,158,11)" } })
+	assertCases(
+		sideTab,
+		[
+			{ rect: { width: 320, height: 100 }, style: round("12px"), children: [stripe("flag")] },
+			{ rect: { width: 320, height: 100 }, children: [stripe("square")] },
+			{ rect: { width: 320, height: 100 }, attributes: { class: "is-active" }, style: round("12px"), children: [stripe("selected")] },
+			{ tag: "h2", rect: { width: 320, height: 100 }, style: round("12px"), children: [stripe("heading")] },
+		],
+		["#flag"],
+	)
+})
+test("#given modern accent colors #then chromatic Lab and LCH report but neutral variants pass", () => {
+	const card = (id: string, color: string) => ({ id, style: { ...round("6px"), "border-left-width": "4px", "border-left-color": color } })
+	assertCases(
+		sideTab,
+		[
+			card("lab", "lab(50% 40 -30)"),
+			card("lch", "lch(55% 60 250)"),
+			card("neutral-lab", "lab(50% 0 0)"),
+			card("neutral-oklch", "oklch(60% .01 250)"),
+		],
+		["#lab", "#lch"],
+	)
+})
+
+test("#given wildcard waivers on stripe ancestors #then only unrelated waivers leave the stripe reportable", () => {
+	const style = { ...round("12px"), "border-left-width": "4px", "border-left-style": "solid", "border-left-color": "rgb(0,150,130)" }
+	assertCases(sideTab, [
+		{ attributes: { "data-impeccable-ignore": "*" }, children: [{ id: "star", style }] },
+		{ attributes: { "data-detect-ignore": "pulsing-dot,*" }, children: [{ id: "alias-star", style }] },
+		{ attributes: { "data-impeccable-ignore": "pulsing-dot" }, children: [{ id: "unrelated", style }] },
+	], ["#unrelated"])
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/side-tab.ts

@@ -0,0 +1,17 @@
+import type { PageRule } from "../../rule"
+import { borderHits, childStripeHit, stripeHit } from "./support/borders"
+import { pageIgnored } from "../color/support/page-ignore"
+export const sideTab: PageRule = {
+	meta: {
+		id: "side-tab",
+		name: "Side-tab accent border",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A colored edge turns a card into a decorative side tab.",
+		fixHint: "Remove the stripe and use spacing or a restrained surface change.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((e) => pageIgnored(snapshot, e, "side-tab") ? []
+			: [...borderHits(snapshot, e, "side-tab"), ...stripeHit(snapshot, e), ...childStripeHit(snapshot, e)]),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/appearance.ts

@@ -0,0 +1,110 @@
+import { ancestors, isRendered, px, styleOf } from "../../../core/page"
+import { blend, parseColor, type Rgba } from "../../../core/color"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+export const sides = ["top", "right", "bottom", "left"] as const
+export const corners = ["top-left", "top-right", "bottom-right", "bottom-left"] as const
+export const borderSafe = new Set([
+	"blockquote",
+	"nav",
+	"a",
+	"input",
+	"textarea",
+	"select",
+	"pre",
+	"code",
+	"span",
+	"th",
+	"td",
+	"tr",
+	"li",
+	"button",
+	"hr",
+	"html",
+	"head",
+	"body",
+	"script",
+	"style",
+	"link",
+	"meta",
+	"title",
+	"br",
+	"img",
+	"svg",
+	"path",
+	"circle",
+	"rect",
+	"line",
+	"polyline",
+	"polygon",
+	"g",
+	"defs",
+	"use",
+])
+export const length = (value: string): number => px(value) ?? (value.trim() === "0" ? 0 : Number.NaN)
+export const chroma = (value: string, floor = 30): boolean => {
+	const c = parseColor(value)
+	return c !== null && c.a >= 0.1 && Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b) >= floor
+}
+export function borderAccent(value: string): boolean {
+	const fn = /^(oklch|oklab|lch|lab|hsl|hsla|hwb)\(([^)]*)\)$/i.exec(value)
+	if (!fn) return chroma(value)
+	const parts = (fn[2] ?? "").split("/")[0]?.replace(/,/g, " ").trim().split(/\s+/) ?? []
+	const n = (i: number, full: number): number => Number.parseFloat(parts[i] ?? "0") * ((parts[i] ?? "").endsWith("%") ? full / 100 : 1)
+	const name = fn[1]?.toLowerCase()
+	if (name === "oklch") return n(1, 0.4) >= 0.02
+	if (name === "lch") return n(1, 150) >= 3
+	if (name === "oklab") return Math.hypot(n(1, 0.4), n(2, 0.4)) >= 0.02
+	if (name === "lab") return Math.hypot(n(1, 125), n(2, 125)) >= 3
+	if (name === "hwb") return 1 - Math.min(100, n(1, 100) + n(2, 100)) / 100 >= 0.1
+	return n(1, 100) >= 10
+}
+const radius = (el: ElementSnapshot, corner: string): number => {
+	const parts = styleOf(el, "border-" + corner + "-radius").split(/\s+/)
+	const values = parts.map((v) => (v.endsWith("%") ? (Number.parseFloat(v) * Math.min(el.rect.width, el.rect.height)) / 100 : length(v)))
+	return Math.min(...values)
+}
+export const radii = (el: ElementSnapshot): readonly number[] => corners.map((c) => radius(el, c))
+export const roundedAway = (el: ElementSnapshot, side: number): boolean => {
+	const far =
+		[
+			[2, 3],
+			[0, 3],
+			[0, 1],
+			[1, 2],
+		][side] ?? []
+	const values = radii(el)
+	return far.every((i) => (values[i] ?? 0) >= 4)
+}
+export const visible = (s: PageSnapshot, e: ElementSnapshot): boolean =>
+	isRendered(s, e) &&
+	[e, ...ancestors(s, e)].every(
+		(a) => styleOf(a, "display") !== "none" && styleOf(a, "visibility") !== "hidden" && a.attributes["hidden"] === undefined,
+	)
+export const context = (s: PageSnapshot, e: ElementSnapshot, predicate: (e: ElementSnapshot) => boolean): boolean =>
+	[e, ...ancestors(s, e)].some(predicate)
+export const selected = (e: ElementSnapshot): boolean =>
+	e.attributes["aria-selected"] === "true" ||
+	(e.attributes["aria-current"] !== undefined && e.attributes["aria-current"] !== "false") ||
+	/^(selected|active|checked|current)$/i.test(e.attributes["data-state"] ?? e.attributes["data-status"] ?? "") ||
+	/(?:^|[\s_-])(?:selected|current|checked|active)(?:$|[\s_-])/.test(e.attributes["class"] ?? "")
+export const showsOver = (paint: Rgba, surface: Rgba): boolean => {
+	const over = blend(paint, surface)
+	return Math.max(Math.abs(over.r - surface.r), Math.abs(over.g - surface.g), Math.abs(over.b - surface.b)) >= 8
+}
+export function splitTop(value: string, separator: RegExp = /,/): string[] {
+	let depth = 0,
+		start = 0
+	const parts: string[] = []
+	for (let i = 0; i < value.length; i++) {
+		const c = value[i] ?? ""
+		if (c === "(") depth++
+		else if (c === ")") depth--
+		else if (depth === 0 && separator.test(c)) {
+			parts.push(value.slice(start, i).trim())
+			start = i + 1
+		}
+	}
+	parts.push(value.slice(start).trim())
+	return parts.filter(Boolean)
+}

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

@@ -0,0 +1,25 @@
+import { expect } from "bun:test"
+import type { PageRule } from "../../../rule"
+import type { DetectConfig } from "../../../types"
+import { buildSnapshot, type NodeSpec } from "../../../testing/build-snapshot"
+import { lintSnapshot } from "../../../lint"
+export function assertCases(
+	rule: PageRule,
+	nodes: readonly NodeSpec[],
+	expected: readonly string[],
+	options: { readonly cssText?: readonly string[]; readonly config?: DetectConfig } = {},
+): void {
+	const snapshot = buildSnapshot(nodes, { cssText: options.cssText ?? [] })
+	const findings = lintSnapshot(snapshot, { rules: [rule], config: options.config ?? {} })
+	expect(findings.map((f) => (f.location.kind === "element" ? f.location.selector : "page"))).toEqual([...expected])
+}
+export const round = (radius: string): Readonly<Record<string, string>> =>
+	Object.fromEntries(["top-left", "top-right", "bottom-right", "bottom-left"].map((c) => ["border-" + c + "-radius", radius]))
+export const border = (width: string, color = "rgb(230, 231, 233)"): Readonly<Record<string, string>> =>
+	Object.fromEntries(
+		["top", "right", "bottom", "left"].flatMap((s) => [
+			["border-" + s + "-width", width],
+			["border-" + s + "-style", "solid"],
+			["border-" + s + "-color", color],
+		]),
+	)

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/borders.ts

@@ -0,0 +1,150 @@
+import { ancestors, parentOf, shortSnippet, styleOf } from "../../../core/page"
+import { parseColor } from "../../../core/color"
+import { parseShadow } from "../../../core/shadow"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+import type { PageHit } from "../../../rule"
+import { borderAccent, borderSafe, chroma, context, length, radii, roundedAway, selected, sides, visible } from "./appearance"
+
+export function borderHits(s: PageSnapshot, e: ElementSnapshot, rule: string): PageHit[] {
+	if (
+		!visible(s, e) ||
+		borderSafe.has(e.tag) ||
+		e.rect.width < 20 ||
+		e.rect.height < 20 ||
+		context(
+			s,
+			e,
+			(a) =>
+				["status", "alert", "alertdialog", "log"].includes(a.attributes["role"] ?? "") ||
+				["polite", "assertive"].includes(a.attributes["aria-live"] ?? ""),
+		)
+	)
+		return []
+	const rs = radii(e),
+		min = Math.min(e.rect.width, e.rect.height)
+	if (Math.max(e.rect.width, e.rect.height) <= min * 1.1 && rs.every((r) => r >= min / 2 - 0.5)) return []
+	const widths = sides.map((side) => length(styleOf(e, "border-" + side + "-width")))
+	return sides.flatMap((side, i) => {
+		const w = widths[i] ?? 0,
+			other = Math.max(...widths.filter((_, j) => i !== j))
+		if (w < 2 || !(other <= 1 || w >= other * 2) || !borderAccent(styleOf(e, "border-" + side + "-color"))) return []
+		const lateral = i === 1 || i === 3
+		const id = lateral ? "side-tab" : (rs[0] ?? 0) > 0 ? "border-accent-on-rounded" : "side-tab"
+		if (
+			id !== rule ||
+			(lateral && !roundedAway(e, i)) ||
+			(!lateral && (rs[0] ?? 0) === 0 && (w < 3 || w > 12 || !roundedAway(e, i) || context(s, e, selected)))
+		)
+			return []
+		return [{ element: e, message: "Accent border on the " + side + " edge (" + w + "px)", snippet: shortSnippet(e) }]
+	})
+}
+
+export function stripeHit(s: PageSnapshot, e: ElementSnapshot): PageHit[] {
+	if (!visible(s, e) || e.rect.width <= 40 || e.rect.height < 16) return []
+	const hosts = [e, ...ancestors(s, e)]
+	if (hosts.some((a) => ["nav", "blockquote", "pre"].includes(a.tag))) return []
+	const rowNode = (a: ElementSnapshot): boolean =>
+		["tr", "td", "th"].includes(a.tag) ||
+		["row", "cell", "gridcell", "rowheader"].includes(a.attributes["role"] ?? "") ||
+		/(?:^|[\s_-])(?:row|cell)(?:$|[\s_-])/.test(a.attributes["class"] ?? "")
+	const row = rowNode(e) && !(!["tr", "td", "th"].includes(e.tag) && !e.attributes["role"] && radii(e).some((r) => r > 0))
+	const rowHosts = row ? hosts.filter(rowNode) : [e]
+	if (rowHosts.some(selected) || (!row && (borderSafe.has(e.tag) || context(s, e, selected)))) return []
+	const status = rowHosts.some(
+		(a) =>
+			a.attributes["data-state"] !== undefined ||
+			a.attributes["data-status"] !== undefined ||
+			a.attributes["aria-invalid"] === "true" ||
+			/(?:is-|has-|--)[a-z]/.test(a.attributes["class"] ?? ""),
+	)
+	const bg = parseColor(styleOf(e, "background-color"))
+	const bare = (bg === null || bg.a < 0.1) && ["none", ""].includes(styleOf(e, "background-image"))
+	const shadows = parseShadow(styleOf(e, "box-shadow"))
+	const inset = shadows.length === 1 ? shadows[0] : undefined
+	if (
+		inset?.inset &&
+		inset.blur === 0 &&
+		inset.spread === 0 &&
+		chroma("rgb(" + inset.color.r + " " + inset.color.g + " " + inset.color.b + " / " + inset.color.a + ")")
+	) {
+		const axis = inset.x !== 0 && inset.y === 0 ? (inset.x > 0 ? 3 : 1) : inset.y !== 0 && inset.x === 0 ? (inset.y > 0 ? 0 : 2) : -1
+		const w = Math.max(Math.abs(inset.x), Math.abs(inset.y))
+		if (axis >= 0 && (row ? (axis === 1 || axis === 3) && w >= 2 && w <= 6 && (status || bare) : w >= 3 && w <= 12 && roundedAway(e, axis)))
+			return [{ element: e, message: "Inset accent stripe (" + w + "px)", snippet: shortSnippet(e) }]
+	}
+	if (row && (status || bare)) {
+		const drawn = sides.map(
+			(side) =>
+				length(styleOf(e, "border-" + side + "-width")) > 0 && !["none", "hidden", ""].includes(styleOf(e, "border-" + side + "-style")),
+		)
+		for (const i of [3, 1]) {
+			const side = sides[i] ?? "left",
+				w = length(styleOf(e, "border-" + side + "-width"))
+			if (drawn[0] && drawn[2]) continue
+			if (drawn[i] && w >= 2 && w <= 6 && chroma(styleOf(e, "border-" + side + "-color")) && (status || drawn.filter(Boolean).length === 1))
+				return [{ element: e, message: "Row accent border (" + w + "px)", snippet: shortSnippet(e) }]
+		}
+	}
+	if (!row && !borderSafe.has(e.tag)) {
+		const stripes = [e.before, e.after].flatMap((p) =>
+			p ? [{ style: p.style, width: length(p.style["width"] ?? ""), height: length(p.style["height"] ?? "") }] : [],
+		)
+		for (const p of stripes) {
+			if (
+				!["absolute", "fixed"].includes(p.style["position"] ?? "") ||
+				!chroma(p.style["background-color"] ?? "") ||
+				p.style["display"] === "none" ||
+				Number(p.style["opacity"] ?? 1) <= 0.01
+			)
+				continue
+			const hugs = (side: string): boolean => Math.abs(length(p.style[side] ?? "")) <= 2
+			const axis =
+				p.width >= 2 && p.width <= 12 && p.height >= Math.max(e.rect.height - 44, e.rect.height / 2)
+					? hugs("left")
+						? 3
+						: hugs("right")
+							? 1
+							: -1
+					: p.height >= 3 && p.height <= 12 && p.width >= Math.max(e.rect.width - 44, e.rect.width / 2)
+						? hugs("top")
+							? 0
+							: hugs("bottom")
+								? 2
+								: -1
+						: -1
+			if (axis >= 0 && roundedAway(e, axis)) return [{ element: e, message: "Positioned accent stripe", snippet: shortSnippet(e) }]
+		}
+	}
+	return []
+}
+
+export function childStripeHit(s: PageSnapshot, e: ElementSnapshot): PageHit[] {
+	if (!["div", "span"].includes(e.tag) || e.children.length > 0 || e.text.trim() !== "" || !visible(s, e)) return []
+	const p = parentOf(s, e)
+	if (!p || ["body", "html", "h1", "h2", "h3", "h4", "h5", "h6"].includes(p.tag) || p.rect.width < 40 || p.rect.height < 20) return []
+	if (
+		context(
+			s,
+			e,
+			(a) =>
+				["nav", "blockquote", "pre", "table", "button", "a", "select", "progress", "meter"].includes(a.tag) ||
+				["progressbar", "slider", "scrollbar", "separator", "tablist", "status", "alert"].includes(a.attributes["role"] ?? "") ||
+				selected(a),
+		)
+	)
+		return []
+	const { width: w, height: h, x } = e.rect,
+		host = p.rect
+	const side = Math.abs(x - host.x) <= 3 ? 3 : Math.abs(host.x + host.width - x - w) <= 3 ? 1 : -1
+	if (
+		side < 0 ||
+		w < 2 ||
+		w > 12 ||
+		h < Math.max(host.height - 44, host.height * 0.5) ||
+		!roundedAway(p, side) ||
+		!chroma(styleOf(e, "background-color"))
+	)
+		return []
+	return [{ element: e, message: w + "px accent stripe child", snippet: shortSnippet(e) }]
+}

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

@@ -0,0 +1,151 @@
+import { splitTop } from "./appearance"
+import { arc, cubic, lerp, type Point } from "./curve-samples"
+export function geometricPolygon(body: string): boolean {
+	const points = splitTop(body)
+		.filter((p) => !/^nonzero$|^evenodd$/.test(p))
+		.map((p) => splitTop(p, /\s/))
+	const key = (v: string): string => (/^[-+]?0(?:\.0+)?(?:%|px)?$/.test(v) ? "0" : v.replace(/\s/g, ""))
+	if (
+		points.every((p, i) => {
+			const next = points[(i + 1) % points.length]
+			return p.length === 2 && next !== undefined && (key(p[0] ?? "") === key(next[0] ?? "") || key(p[1] ?? "") === key(next[1] ?? ""))
+		})
+	)
+		return true
+	const numeric = points.map((p) => p.map((v) => (/^[-+]?[\d.]+(?:px|%)?$/.test(v) ? Number.parseFloat(v) : Number.NaN)))
+	if (numeric.some((p) => p.length !== 2 || p.some((n) => !Number.isFinite(n)))) return false
+	const xs = numeric.map((p) => p[0] ?? 0),
+		ys = numeric.map((p) => p[1] ?? 0)
+	const distinct = (vs: readonly number[]): number[] => [...new Set(vs)].sort((a, b) => a - b)
+	const teeth = (along: readonly number[], across: readonly number[]): boolean => {
+		const d = distinct(along),
+			step = (d[1] ?? 0) - (d[0] ?? 0)
+		if (d.length < 3 || step <= 0 || d.slice(1).some((v, i) => Math.abs(v - (d[i] ?? 0) - step) > 0.5)) return false
+		let last: number | null = null,
+			swings = 0
+		for (let i = 0; i < along.length; i++) {
+			const j = (i + 1) % along.length
+			if (Math.abs(Math.abs((along[j] ?? 0) - (along[i] ?? 0)) - step) > 0.5) {
+				last = null
+				continue
+			}
+			const swing = (across[j] ?? 0) - (across[i] ?? 0)
+			if (Math.abs(swing) < 0.01) continue
+			if (last !== null && (Math.sign(last) === Math.sign(swing) || Math.abs(Math.abs(last) - Math.abs(swing)) > 0.5)) return false
+			last = swing
+			swings++
+		}
+		return swings >= 3
+	}
+	return (
+		(distinct(xs).length >= 2 && distinct(xs).length <= 4 && teeth(ys, xs)) ||
+		(distinct(ys).length >= 2 && distinct(ys).length <= 4 && teeth(xs, ys))
+	)
+}
+export function roundedPath(body: string): boolean {
+	const tokens = body.replace(/^["']|["']$/g, "").match(/[A-Za-z]|[-+]?(?:[0-9]+\.?[0-9]*|\.[0-9]+)(?:[eE][-+]?[0-9]+)?/g) ?? []
+	const segments: { a: Point; b: Point; line: boolean }[] = [],
+		points: Point[] = []
+	let at: Point = [0, 0],
+		start: Point = [0, 0],
+		cmd = "",
+		i = 0
+	let lastCubic: Point | null = null,
+		lastQuad: Point | null = null
+	while (i < tokens.length) {
+		const token = tokens[i] ?? ""
+		if (/^[a-z]$/i.test(token)) {
+			cmd = token
+			i++
+			if (cmd.toLowerCase() === "z") {
+				if (at[0] !== start[0] || at[1] !== start[1]) segments.push({ a: at, b: start, line: true })
+				at = start
+				cmd = ""
+			}
+			continue
+		}
+		const upper = cmd.toUpperCase(),
+			arity =
+				upper === "H" || upper === "V"
+					? 1
+					: upper === "C"
+						? 6
+						: upper === "A"
+							? 7
+							: upper === "S" || upper === "Q"
+								? 4
+								: ["M", "L", "T"].includes(upper)
+									? 2
+									: 0
+		if (arity === 0 || i + arity > tokens.length) return false
+		const args = tokens.slice(i, i + arity).map(Number)
+		if (args.some((n) => !Number.isFinite(n))) return false
+		i += arity
+		const rel = cmd !== upper,
+			base: Point = rel ? at : [0, 0]
+		const end: Point =
+			upper === "H"
+				? [base[0] + (args[0] ?? 0), at[1]]
+				: upper === "V"
+					? [at[0], base[1] + (args[0] ?? 0)]
+					: [base[0] + (args[arity - 2] ?? 0), base[1] + (args[arity - 1] ?? 0)]
+		const point = (k: number): Point => [base[0] + (args[k] ?? 0), base[1] + (args[k + 1] ?? 0)]
+		const reflect = (p: Point | null): Point => (p ? [2 * at[0] - p[0], 2 * at[1] - p[1]] : at)
+		let nextCubic: Point | null = null,
+			nextQuad: Point | null = null
+		if (upper === "C" || upper === "S") {
+			const c1 = upper === "C" ? point(0) : reflect(lastCubic),
+				c2 = point(upper === "C" ? 2 : 0)
+			points.push(...cubic(at, c1, c2, end))
+			nextCubic = c2
+		} else if (upper === "Q" || upper === "T") {
+			const c: Point = upper === "Q" ? point(0) : reflect(lastQuad)
+			points.push(...cubic(at, lerp(at, c, 2 / 3), lerp(end, c, 2 / 3), end))
+			nextQuad = c
+		} else if (upper === "A")
+			points.push(...arc(at, args[0] ?? 0, args[1] ?? 0, args[2] ?? 0, (args[3] ?? 0) !== 0, (args[4] ?? 0) !== 0, end))
+		lastCubic = nextCubic
+		lastQuad = nextQuad
+		if (upper === "M") {
+			start = end
+			cmd = rel ? "l" : "L"
+		} else segments.push({ a: at, b: end, line: ["L", "H", "V"].includes(upper) })
+		points.push(end)
+		at = end
+	}
+	const lines = segments.filter((s) => s.line)
+	if (lines.length < 4) return false
+	const xs = points.map((p) => p[0]),
+		ys = points.map((p) => p[1]),
+		minX = Math.min(...xs),
+		maxX = Math.max(...xs),
+		minY = Math.min(...ys),
+		maxY = Math.max(...ys)
+	const tol = Math.max(1, maxX - minX, maxY - minY) * 0.01,
+		near = (a: number, b: number): boolean => Math.abs(a - b) <= tol
+	const edges = (p: Point): number[] =>
+		[near(p[1], minY) ? 0 : -1, near(p[0], maxX) ? 1 : -1, near(p[1], maxY) ? 2 : -1, near(p[0], minX) ? 3 : -1].filter((i) => i >= 0)
+	const reached = new Set<number>()
+	for (const l of lines) {
+		const edge = edges(l.a).find((i) => edges(l.b).includes(i))
+		if (edge === undefined) return false
+		reached.add(edge)
+	}
+	if (reached.size !== 4) return false
+	const first = segments.findIndex((s) => s.line)
+	const run: Point[] = []
+	for (let k = 1; k <= segments.length; k++) {
+		const segment = segments[(first + k) % segments.length]
+		if (!segment) continue
+		const a = run[0],
+			b = run[1]
+		if (segment.line) {
+			if (a && b && !edges(a).some((x) => edges(b).some((y) => x % 2 !== y % 2))) return false
+			run.length = 0
+		} else {
+			run[0] = a ?? segment.a
+			run[1] = segment.b
+		}
+	}
+	return true
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/css-candidates.ts

@@ -0,0 +1,66 @@
+import { ancestors, parentOf } from "../../../core/page"
+import { cssBlocks } from "../../../core/source"
+import type { ElementSnapshot, PageSnapshot } from "../../../types"
+
+function compound(e: ElementSnapshot, selector: string): boolean {
+	const tag = /^[a-z][\w-]*|^\*/i.exec(selector)?.[0]
+	if (tag && tag !== "*" && e.tag !== tag.toLowerCase()) return false
+	let rest = selector.slice(tag?.length ?? 0)
+	for (const m of rest.matchAll(/([.#])([\w-]+)|\[([\w-]+)(?:=["']?([^"'\]]*)["']?)?\]/g)) {
+		if (m[1] === "#" && e.attributes["id"] !== m[2]) return false
+		if (m[1] === "." && !(e.attributes["class"] ?? "").split(/\s+/).includes(m[2] ?? "")) return false
+		if (m[3] && (e.attributes[m[3]] === undefined || (m[4] !== undefined && e.attributes[m[3]] !== m[4]))) return false
+	}
+	rest = rest.replace(/([.#])[\w-]+|\[[^\]]+\]/g, "")
+	return rest === ""
+}
+
+export function matchesSelector(s: PageSnapshot, e: ElementSnapshot, selector: string): boolean {
+	const pieces = selector.trim().replace(/\s*>\s*/g, " > ").split(/\s+/)
+	const last = pieces.pop()
+	if (!last || !compound(e, last)) return false
+	let current = e
+	while (pieces.length > 0) {
+		const part = pieces.pop()
+		if (part === ">") {
+			const parent = parentOf(s, current)
+			const wanted = pieces.pop()
+			if (!parent || !wanted || !compound(parent, wanted)) return false
+			current = parent
+		} else {
+			const match = [...ancestors(s, current)].find(a => compound(a, part ?? ""))
+			if (!match) return false
+			current = match
+		}
+	}
+	return true
+}
+
+export function cssCandidates(s: PageSnapshot): ReadonlyMap<string, Readonly<Record<string, string>>> {
+	const merged = new Map<string, Record<string, string>>()
+	for (const css of s.cssText) {
+		let text = css
+		for (const match of css.matchAll(/@media[^{]*prefers-reduced-motion\s*:\s*reduce\s*\)[^{]*\{/g)) {
+			let end = (match.index ?? 0) + match[0].length
+			let depth = 1
+			const start = match.index ?? 0
+			while (end < css.length && depth > 0) {
+				if (css[end] === "{") depth++
+				if (css[end] === "}") depth--
+				end++
+			}
+			text = text.replace(css.slice(start, end), "")
+		}
+		for (const block of cssBlocks(text)) {
+			for (const selector of block.selector.split(",").map(v => v.trim()).filter(v => v !== "" && !v.startsWith("@"))) {
+				const declarations = merged.get(selector) ?? {}
+				for (const entry of block.body.split(";")) {
+					const colon = entry.indexOf(":")
+					if (colon >= 0) declarations[entry.slice(0, colon).trim().toLowerCase()] = entry.slice(colon + 1).trim()
+				}
+				merged.set(selector, declarations)
+			}
+		}
+	}
+	return merged
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/support/curve-samples.ts

@@ -0,0 +1,55 @@
+export type Point = readonly [number, number]
+export const lerp = (a: Point, b: Point, t: number): Point => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]
+export function cubic(p0: Point, p1: Point, p2: Point, p3: Point): readonly Point[] {
+	return Array.from({ length: 15 }, (_, i) => {
+		const t = (i + 1) / 16,
+			u = 1 - t,
+			a = u * u * u,
+			b = 3 * u * u * t,
+			c = 3 * u * t * t,
+			d = t * t * t
+		return [a * p0[0] + b * p1[0] + c * p2[0] + d * p3[0], a * p0[1] + b * p1[1] + c * p2[1] + d * p3[1]] satisfies Point
+	})
+}
+export function arc(
+	from: Point,
+	rxInput: number,
+	ryInput: number,
+	rotation: number,
+	large: boolean,
+	sweep: boolean,
+	to: Point,
+): readonly Point[] {
+	let rx = Math.abs(rxInput),
+		ry = Math.abs(ryInput)
+	if ((from[0] === to[0] && from[1] === to[1]) || rx === 0 || ry === 0) return []
+	const phi = (rotation * Math.PI) / 180,
+		sin = Math.sin(phi),
+		cos = Math.cos(phi),
+		dx = (from[0] - to[0]) / 2,
+		dy = (from[1] - to[1]) / 2
+	const x1 = cos * dx + sin * dy,
+		y1 = -sin * dx + cos * dy,
+		lambda = (x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry)
+	if (lambda > 1) {
+		rx *= Math.sqrt(lambda)
+		ry *= Math.sqrt(lambda)
+	}
+	const num = rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1,
+		den = rx * rx * y1 * y1 + ry * ry * x1 * x1
+	const coef = (den === 0 ? 0 : Math.sqrt(Math.max(0, num / den))) * (large === sweep ? -1 : 1)
+	const cx1 = (coef * rx * y1) / ry,
+		cy1 = (-coef * ry * x1) / rx,
+		cx = cos * cx1 - sin * cy1 + (from[0] + to[0]) / 2,
+		cy = sin * cx1 + cos * cy1 + (from[1] + to[1]) / 2
+	const theta = Math.atan2((y1 - cy1) / ry, (x1 - cx1) / rx)
+	let delta = Math.atan2((-y1 - cy1) / ry, (-x1 - cx1) / rx) - theta
+	if (sweep && delta < 0) delta += Math.PI * 2
+	else if (!sweep && delta > 0) delta -= Math.PI * 2
+	return Array.from({ length: 15 }, (_, i) => {
+		const t = theta + (delta * (i + 1)) / 16,
+			ex = rx * Math.cos(t),
+			ey = ry * Math.sin(t)
+		return [cos * ex - sin * ey + cx, sin * ex + cos * ey + cy] satisfies Point
+	})
+}