oh-my-opencode 5.1.48 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/organic-clip-path.ts

@@ -0,0 +1,41 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet, styleOf } from "../../core/page"
+import { visible, splitTop } from "./support/appearance"
+import { geometricPolygon, roundedPath } from "./support/clip-geometry"
+import { cssCandidates, matchesSelector } from "./support/css-candidates"
+export const organicClipPath: PageRule = {
+	meta: {
+		id: "organic-clip-path",
+		name: "Organic contour drawn as clip-path",
+		category: "quality",
+		severity: "warning",
+		engine: "page",
+		description: "A complex CSS contour substitutes for produced organic material.",
+		fixHint: "Use an image-derived alpha matte; keep CSS clipping for simple geometry.",
+	},
+	check: ({ snapshot }) => {
+		const seen = new Set<string>()
+		const declarations = [...cssCandidates(snapshot)].filter(([, style]) => style["clip-path"] !== undefined)
+		return snapshot.elements.flatMap((e) => {
+			if (!visible(snapshot, e)) return []
+			const clip = styleOf(e, "clip-path"),
+				kind = /^(polygon|path)\(([\s\S]*)\)$/.exec(clip),
+				body = kind?.[2]
+			if (!kind || body === undefined) return []
+			const points = splitTop(body)
+			const offGrid = [...body.matchAll(/[-+]?(?:\d*\.)?\d+/g)].filter(
+				(m) => Math.abs(Number(m[0]) - Math.round(Number(m[0]) / 25) * 25) > 0.5,
+			).length
+			const organic =
+				kind[1] === "path"
+					? (body.match(/[CSQTA]/gi)?.length ?? 0) >= 3 && !roundedPath(body)
+					: points.length >= 10 && offGrid >= points.length && !geometricPolygon(body)
+			const inline = /(?:^|;)\s*clip-path\s*:/i.test(e.attributes["style"] ?? "")
+			const selector = declarations.find(([selector]) => matchesSelector(snapshot, e, selector))?.[0]
+			const key = inline ? clip : (selector ?? e.selector) + clip
+			if (!organic || seen.has(key)) return []
+			seen.add(key)
+			return [{ element: e, message: "Organic contour approximated with CSS " + kind[1], snippet: shortSnippet(e) }]
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/pulsing-dot.test.ts

@@ -0,0 +1,58 @@
+import { test } from "bun:test"
+import { pulsingDot } from "./pulsing-dot"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const dot = (id: string, name: string, size = 8): NodeSpec => ({
+	id,
+	rect: { width: size, height: size },
+	style: { ...round("50%"), "animation-name": name, "animation-iteration-count": "infinite" },
+})
+test("#given authored dots with inline empty boxes #then declarations report once per selector", () => {
+	assertCases(pulsingDot, [
+		{ id: "one", tag: "span", attributes: { class: "dot" }, rect: { width: 0, height: 0 } },
+		{ id: "two", tag: "span", attributes: { class: "dot" }, rect: { width: 0, height: 0 } },
+		{ id: "tw", tag: "span", attributes: { class: "animate-ping w-2 h-2 rounded-full" }, rect: { width: 0, height: 0 } },
+	], ["#one", "#tw"], { cssText: [
+		":root {--dot:8px} .dot {width:var(--dot);height:var(--dot);border-radius:50%} " +
+		"@media (prefers-reduced-motion:no-preference) {.dot {animation:pulse 2s infinite}} " +
+		"@media (prefers-reduced-motion:reduce) {.dot {animation:none}} @keyframes pulse {50%{opacity:.3}}",
+	] })
+})
+test("#given tiny circular pulses #then finite animations and bars pass", () => {
+	assertCases(
+		pulsingDot,
+		[
+			dot("flag", "pulse"),
+			{ ...dot("finite", "pulse"), style: { ...dot("finite", "pulse").style, "animation-iteration-count": "3" } },
+			{ ...dot("bar", "pulse"), rect: { width: 3, height: 8 } },
+			dot("large", "pulse", 24),
+			{ ...dot("square", "pulse"), style: { ...dot("square", "pulse").style, ...round("2px") } },
+		],
+		["#flag"],
+		{ cssText: ["@keyframes pulse {50%{opacity:.3}}"] },
+	)
+})
+test("#given rotating travelling and swelling keyframes #then only stationary dot pulses report", () => {
+	assertCases(
+		pulsingDot,
+		[dot("flag", "swell"), dot("spin", "spin"), dot("float", "float"), dot("eye", "eye"), dot("wave", "wave")],
+		["#flag"],
+		{
+			cssText: [
+				"@keyframes swell {from{transform:scale(.5);opacity:1} to{transform:scale(1);opacity:.5}} @keyframes spin {to{transform:rotate(360deg)}} @keyframes float {from{transform:none;opacity:.4}to{transform:translateY(-14px);opacity:.6}} @keyframes eye {from{transform:scaleY(1)}to{transform:scaleY(.1)}} @keyframes wave {from{height:4px;opacity:.3}to{height:16px;opacity:1}}",
+			],
+		},
+	)
+})
+test("#given tiny bobs centred ripples and connector travel #then travel alone is excluded", () => {
+	assertCases(
+		pulsingDot,
+		[dot("bob", "bob"), dot("ring", "ring"), dot("ripple", "ripple"), dot("connector", "travel")],
+		["#bob", "#ring", "#ripple"],
+		{
+			cssText: [
+				"@keyframes bob {from{transform:translateY(0);opacity:1}to{transform:translateY(-2px);opacity:.4}} @keyframes ring {from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%, -50%) scale(2);opacity:0}} @keyframes ripple {from{width:8px;height:8px;margin:0;opacity:1}to{width:16px;height:16px;margin:-4px;opacity:0}} @keyframes travel {from{left:0px;opacity:0}to{left:calc(100% - 4px);opacity:1}}",
+			],
+		},
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/pulsing-dot.ts

@@ -0,0 +1,72 @@
+import type { PageHit, PageRule } from "../../rule"
+import type { ComputedStyle, ElementSnapshot, PageSnapshot } from "../../types"
+import { ancestors, shortSnippet, styleOf } from "../../core/page"
+import { radii, splitTop } from "./support/appearance"
+import { cssCandidates, matchesSelector } from "./support/css-candidates"
+import { dotPulse, infiniteNames, keyframes } from "./support/keyframes"
+
+function pulses(s: PageSnapshot, style: ComputedStyle): boolean {
+	const shorthand = splitTop(style["animation"] ?? "").filter(v => /\binfinite\b/.test(v))
+	const names = [...infiniteNames(style), ...shorthand.flatMap(v => v.split(/\s+/).filter(n => keyframes(s, n) !== null || /pulse|ping|ripple|beacon/i.test(n)))]
+	return names.some(n => {
+		const frames = keyframes(s, n)
+		return frames === null ? /pulse|ping|ripple|beacon/i.test(n) : dotPulse(frames)
+	})
+}
+const shown = (s: PageSnapshot, e: ElementSnapshot): boolean =>
+	[e, ...ancestors(s, e)].every(n => styleOf(n, "display") !== "none" && styleOf(n, "visibility") !== "hidden" &&
+		Number.parseFloat(styleOf(n, "opacity")) !== 0 && n.attributes["hidden"] === undefined)
+const dotSize = (w: number, h: number): boolean =>
+	w >= 2 && h >= 2 && w <= 16 && h <= 16 && Math.max(w, h) <= 1.5 * Math.min(w, h)
+
+export const pulsingDot: PageRule = {
+	meta: {
+		id: "pulsing-dot", name: "Pulsing status dot", category: "slop", severity: "warning", engine: "page",
+		description: "A tiny circular indicator pulses continuously.",
+		fixHint: "Keep the indicator static unless it represents live changing data.",
+	},
+	check: ({ snapshot }) => {
+		const hits: PageHit[] = []
+		const covered = new Set<number>()
+		const candidates = cssCandidates(snapshot)
+		const vars = new Map([...candidates.values()].flatMap(d => Object.entries(d).filter(([p]) => p.startsWith("--"))))
+		const length = (value: string): number => {
+			const resolved = value.replace(/var\((--[\w-]+)\)/g, (_, name: string) => vars.get(name) ?? "")
+			const m = /^([\d.]+)(px|rem|em)?$/.exec(resolved)
+			return m ? Number(m[1]) * (m[2] === "rem" || m[2] === "em" ? 16 : 1) : Number.NaN
+		}
+		for (const [selector, style] of candidates) {
+			const w = length(style["width"] ?? style["inline-size"] ?? ""), h = length(style["height"] ?? style["block-size"] ?? "")
+			const radius = style["border-radius"] ?? ""
+			if (!dotSize(w, h) || !pulses(snapshot, style) ||
+				!radius.split(/[\s/]+/).every(r => r.endsWith("%") ? Number.parseFloat(r) >= 40 : length(r) >= Math.min(w, h) * 0.4)) continue
+			const matches = snapshot.elements.filter(e => matchesSelector(snapshot, e, selector) && shown(snapshot, e))
+			const first = matches[0]
+			if (!first) continue
+			matches.forEach(e => covered.add(e.index))
+			hits.push({ element: first, message: "Infinitely pulsing " + w + "x" + h + "px status dot", snippet: shortSnippet(first) })
+		}
+		const tailwind = new Set<string>()
+		for (const e of snapshot.elements) {
+			const classes = e.attributes["class"] ?? ""
+			if (/(?:^|\s)animate-(?:ping|pulse)(?:$|\s)/.test(classes) && /(?:^|\s)rounded-full(?:$|\s)/.test(classes) &&
+				/(?:^|\s)[wh]-(?:0\.5|1|1\.5|2|2\.5|3|3\.5|4)(?:$|\s)/.test(classes)) {
+				const side = (name: string): number | undefined => {
+					const value = new RegExp("(?:^|\\s)" + name + "-([\\d.]+)(?:$|\\s)").exec(classes)?.[1]
+					return value === undefined ? undefined : Number(value) * 4
+				}
+				const w = side("w"), h = side("h")
+				if ((w === undefined || h === undefined || dotSize(w, h)) && !tailwind.has(classes)) {
+					tailwind.add(classes)
+					covered.add(e.index)
+					hits.push({ element: e, message: "Infinitely pulsing utility status dot", snippet: shortSnippet(e) })
+				}
+			}
+			if (covered.has(e.index) || !shown(snapshot, e) || !pulses(snapshot, e.style)) continue
+			const w = e.rect.width, h = e.rect.height
+			if (dotSize(w, h) && radii(e).every(r => r >= Math.min(w, h) * 0.4))
+				hits.push({ element: e, message: "Infinitely pulsing " + w + "x" + h + "px status dot", snippet: shortSnippet(e) })
+		}
+		return hits
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/repeating-stripes-gradient.test.ts

@@ -0,0 +1,26 @@
+import { test } from "bun:test"
+import { repeatingStripesGradient } from "./repeating-stripes-gradient"
+import { assertCases } from "./support/assert-cases"
+
+test("#given repeating gradients on elements and pseudo elements #then single gradients pass", () => {
+	assertCases(
+		repeatingStripesGradient,
+		[
+			{ id: "flag", style: { "background-image": "repeating-linear-gradient(45deg,#000 0px,#fff 2px)" } },
+			{ id: "single", style: { "background-image": "linear-gradient(#000,#fff)" } },
+			{ id: "hidden", style: { display: "none", "background-image": "repeating-linear-gradient(#000,#fff)" } },
+		],
+		["#flag"],
+	)
+})
+test("#given radial rings and full span ramps #then only patterns that tile report", () => {
+	assertCases(
+		repeatingStripesGradient,
+		[
+			{ id: "full", style: { "background-image": "repeating-linear-gradient(147deg,#032e6d,#032e6d 40%,#021d45)" } },
+			{ id: "percent", style: { "background-image": "repeating-linear-gradient(147deg,#0394c9 0%,#0288ba 100%)" } },
+			{ id: "flag", after: { "background-image": "repeating-radial-gradient(#000 0px,#fff 2px)" } },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/repeating-stripes-gradient.ts

@@ -0,0 +1,25 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet } from "../../core/page"
+import { visible } from "./support/appearance"
+import { repeats } from "./support/gradient-pattern"
+export const repeatingStripesGradient: PageRule = {
+	meta: {
+		id: "repeating-stripes-gradient",
+		name: "Repeating-gradient stripes",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Repeating gradient bands decorate a surface without adding structure.",
+		fixHint: "Use a deliberate texture or keep the surface plain.",
+	},
+	check: ({ snapshot }) => {
+		const e = snapshot.elements.find(
+			(e) =>
+				visible(snapshot, e) &&
+				[e.style, e.before?.style, e.after?.style].some((s) =>
+					["background-image", "mask-image", "-webkit-mask-image"].some((p) => repeats(s?.[p] ?? "")),
+				),
+		)
+		return e ? [{ element: e, message: "Repeating gradient surface stripes", snippet: shortSnippet(e) }] : []
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/shape-assembled-illustration.test.ts

@@ -0,0 +1,59 @@
+import { test } from "bun:test"
+import { shapeAssembledIllustration } from "./shape-assembled-illustration"
+import { assertCases } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const primitives: readonly NodeSpec[] = Array.from({ length: 8 }, (_, i) => ({
+	tag: i % 2 === 0 ? "rect" : "circle",
+	attributes: { fill: ["#00bb55", "#dd3333", "#ffcc00"][i % 3] ?? "#00bb55", width: "40", height: "40" },
+}))
+const scene = (id: string): NodeSpec => ({ id, tag: "svg", rect: { width: 640, height: 480 }, children: primitives })
+test("#given large primitive scenes #then small logos and path dominated art pass", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{ ...scene("logo"), rect: { width: 32, height: 32 } },
+			{ ...scene("traced"), children: [...primitives, ...Array.from({ length: 36 }, () => ({ tag: "path" }))] },
+		],
+		["#flag"],
+	)
+})
+test("#given data graphics and texture patterns #then pictorial scenes alone report", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{ ...scene("chart"), children: [...primitives, ...Array.from({ length: 3 }, () => ({ tag: "text", text: "Data" }))] },
+			{ ...scene("pattern"), children: [...primitives, { tag: "defs", children: [{ tag: "pattern" }] }] },
+			{ ...scene("stroke"), children: primitives.map((p) => ({ ...p, attributes: { fill: "none" } })) },
+		],
+		["#flag"],
+	)
+})
+test("#given unlabeled equal width bars #then charts pass but block scenes report", () => {
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			scene("flag"),
+			{
+				...scene("chart"),
+				children: Array.from({ length: 10 }, (_, i) => ({
+					tag: "rect",
+					attributes: { width: "44", height: String(100 + i * 10), fill: ["#ffffff", "#6633ff", "#eeeeee"][i % 3] ?? "#ffffff" },
+				})),
+			},
+		],
+		["#flag"],
+	)
+})
+test("#given definitions repeated through use elements #then only drawn primitives count", () => {
+	const defs = { tag: "defs", children: primitives.map((p, i) => ({ ...p, attributes: { ...p.attributes, id: "shape" + i } })) }
+	assertCases(
+		shapeAssembledIllustration,
+		[
+			{ ...scene("flag"), children: [defs, ...primitives.map((_, i) => ({ tag: "use", attributes: { href: "#shape" + i } }))] },
+			{ ...scene("unused"), children: [defs] },
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/shape-assembled-illustration.ts

@@ -0,0 +1,58 @@
+import type { PageRule } from "../../rule"
+import { ancestors, descendants, shortSnippet } from "../../core/page"
+import { visible } from "./support/appearance"
+export const shapeAssembledIllustration: PageRule = {
+	meta: {
+		id: "shape-assembled-illustration",
+		name: "Shape-assembled illustration",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "A hero-sized SVG scene is assembled mainly from primitive shapes.",
+		fixHint: "Use produced artwork, a photograph, or a deliberately drawn illustration.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((e) => {
+			if (e.tag !== "svg" || !visible(snapshot, e) || e.rect.width < 200 || e.rect.height < 200) return []
+			const all = [...descendants(snapshot, e)]
+			if (all.filter((n) => n.tag === "text").length > 2 || all.some((n) => n.tag === "pattern")) return []
+			const primitive = (tag: string): boolean => ["rect", "circle", "ellipse", "polygon"].includes(tag)
+			const drawn = (tag: string): boolean => primitive(tag) || ["path", "line", "polyline"].includes(tag)
+			const painted = all.filter((n) => ![...ancestors(snapshot, n)].some((a) => a.tag === "defs"))
+			const used = painted
+				.filter((n) => n.tag === "use")
+				.flatMap((n) => {
+					const id = (n.attributes["href"] ?? n.attributes["xlink:href"] ?? "").replace(/^#/, "")
+					const target = all.find((a) => a.attributes["id"] === id && drawn(a.tag))
+					return target ? [target] : []
+				})
+			const shapes = [...painted, ...used],
+				primitives = shapes.filter((n) => primitive(n.tag))
+			if (primitives.length < 8 || primitives.length < shapes.filter((n) => drawn(n.tag)).length * 0.5) return []
+			const fills = new Set(
+				[e, ...all]
+					.map((n) => n.attributes["fill"]?.toLowerCase())
+					.filter((v) => v !== undefined && !["none", "transparent", "currentcolor", "inherit", ""].includes(v)),
+			)
+			if (fills.size < 3) return []
+			const rects = primitives
+				.filter((n) => n.tag === "rect")
+				.map((n) => ({ w: Number(n.attributes["width"]), h: Number(n.attributes["height"]) }))
+				.filter((r) => Number.isFinite(r.w) && Number.isFinite(r.h))
+			if (
+				primitives.length <= 400 &&
+				primitives.filter((n) => ["circle", "ellipse", "polygon"].includes(n.tag)).length < primitives.length * 0.25
+			) {
+				const series = rects.some((a) => {
+					const sameWidth = rects.filter((b) => Math.abs(a.w - b.w) <= 1),
+						sameHeight = rects.filter((b) => Math.abs(a.h - b.h) <= 1)
+					return (
+						(sameWidth.length >= primitives.length / 2 && sameWidth.some((b) => Math.abs(b.h - a.h) > 1)) ||
+						(sameHeight.length >= primitives.length / 2 && sameHeight.some((b) => Math.abs(b.w - a.w) > 1))
+					)
+				})
+				if (series) return []
+			}
+			return [{ element: e, message: "Large SVG scene assembled from " + primitives.length + " primitives", snippet: shortSnippet(e) }]
+		}),
+}

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],
+		]),
+	)