oh-my-opencode 5.1.51 → 5.1.54

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/gpt-thin-border-wide-shadow.test.ts

@@ -0,0 +1,59 @@
+import { test } from "bun:test"
+import { gptThinBorderWideShadow } from "./gpt-thin-border-wide-shadow"
+import { assertCases, border } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const card = (id: string, shadow = "0 0 40px rgba(15,23,42,0.18)"): NodeSpec => ({
+	id,
+	style: { ...border("1px"), "box-shadow": shadow },
+	rect: { width: 180, height: 88 },
+})
+test("#given three repeated card treatments #then lone panels and pairs pass", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			{ tag: "section", children: [card("pair-a"), card("pair-b")] },
+			{ tag: "aside", children: [card("lone")] },
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given tight negative spread and inset shadows #then only broad external halos report", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			...["0 0 24px rgba(0,0,0,.2)", "0 18px 40px -26px rgba(0,0,0,.95)", "inset 0 0 40px rgba(0,0,0,.2)"].map((shadow, i) => ({
+				children: [card("p" + i + "a", shadow), card("p" + i + "b", shadow), card("p" + i + "c", shadow)],
+			})),
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given repeated cards behind two wrappers #then comparable sizes still form a row", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: ["a", "b", "c"].map((id) => ({ tag: "article", children: [{ children: [card(id)] }] })) },
+			{ children: [card("mismatch-a"), { ...card("mismatch-b"), rect: { width: 40, height: 200 } }, card("mismatch-c")] },
+		],
+		["#a", "#b", "#c"],
+	)
+})
+test("#given dark invisible halos and hidden flyouts #then only visible cards report", () => {
+	assertCases(
+		gptThinBorderWideShadow,
+		[
+			{ children: [card("a"), card("b"), card("c")] },
+			{
+				style: { "background-color": "rgb(10,10,11)" },
+				children: ["x", "y", "z"].map((id) => ({
+					...card(id, "0 0 40px rgba(0,0,0,.18)"),
+					style: { ...border("1px", "rgb(28,28,31)"), "background-color": "rgb(24,24,27)", "box-shadow": "0 0 40px rgba(0,0,0,.18)" },
+				})),
+			},
+			{ children: ["f1", "f2", "f3"].map((id) => ({ ...card(id), style: { ...card(id).style, position: "absolute", opacity: "0" } })) },
+		],
+		["#a", "#b", "#c"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/gpt-thin-border-wide-shadow.ts

@@ -0,0 +1,66 @@
+import type { PageRule } from "../../rule"
+import type { ElementSnapshot } from "../../types"
+import { childrenOf, effectiveBackground, parentOf, shortSnippet, styleOf } from "../../core/page"
+import { parseColor, WHITE } from "../../core/color"
+import { parseShadow } from "../../core/shadow"
+import { length, showsOver, sides, visible } from "./support/appearance"
+export const gptThinBorderWideShadow: PageRule = {
+	meta: {
+		id: "gpt-thin-border-wide-shadow",
+		name: "Hairline border with wide shadow",
+		category: "slop",
+		severity: "advisory",
+		engine: "page",
+		description: "Comparable cards repeat a hairline edge and broad halo.",
+		fixHint: "Choose one edge treatment across the row: border or elevation.",
+	},
+	check: ({ snapshot }) => {
+		const pair = (e: ElementSnapshot): boolean => {
+			if (!visible(snapshot, e)) return false
+			const p = parentOf(snapshot, e),
+				surface = p ? effectiveBackground(snapshot, p) : WHITE
+			const halo = parseShadow(styleOf(e, "box-shadow")).some(
+				(l) => !l.inset && l.color.a >= 0.12 && l.blur + Math.min(0, l.spread) >= 32 && showsOver(l.color, surface),
+			)
+			if (!halo) return false
+			const fill = effectiveBackground(snapshot, e)
+			return (
+				sides.filter((side) => {
+					const w = length(styleOf(e, "border-" + side + "-width")),
+						c = parseColor(styleOf(e, "border-" + side + "-color"))
+					return w > 0 && w <= 1.5 && c !== null && c.a >= 0.28 && showsOver(c, fill)
+				}).length >= 2
+			)
+		}
+		const matches = (a: ElementSnapshot, b: ElementSnapshot): boolean =>
+			["width", "height"].every((k) => {
+				const x = k === "width" ? a.rect.width : a.rect.height,
+					y = k === "width" ? b.rect.width : b.rect.height
+				return Math.max(x, y) > 0 && Math.abs(x - y) / Math.max(x, y) <= 0.25
+			})
+		return snapshot.elements.flatMap((e) => {
+			if (!pair(e)) return []
+			let cell = e
+			for (let depth = 0; depth <= 2; depth++) {
+				const p = parentOf(snapshot, cell)
+				if (!p) break
+				const siblings = childrenOf(snapshot, p),
+					at = siblings.findIndex((s) => s.index === cell.index)
+				let count = 1
+				for (const sibling of siblings.slice(Math.max(0, at - 24), at + 25)) {
+					if (sibling.index === cell.index || (depth > 0 && sibling.tag !== cell.tag)) continue
+					let level: readonly ElementSnapshot[] = [sibling],
+						budget = 32
+					for (let i = 0; i < depth; i++) {
+						level = level.flatMap((n) => childrenOf(snapshot, n)).slice(0, budget)
+						budget -= level.length
+					}
+					count += level.filter((n) => matches(e, n) && pair(n)).length
+				}
+				if (count >= 3) return [{ element: e, message: "Hairline border and broad shadow repeated across a row", snippet: shortSnippet(e) }]
+				cell = p
+			}
+			return []
+		})
+	},
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hard-offset-shadow.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test"
+import { lintSnapshot } from "../../lint"
+import { buildSnapshot } from "../../testing/build-snapshot"
+import { hardOffsetShadow } from "./hard-offset-shadow"
+
+const flagged = (shadows: Readonly<Record<string, string>>, extra: Readonly<Record<string, Readonly<Record<string, string>>>> = {}): readonly string[] => {
+	const snap = buildSnapshot(
+		Object.entries(shadows).map(([id, shadow]) => ({ id, style: { "box-shadow": shadow }, attributes: extra[id] ?? {} })),
+	)
+	return lintSnapshot(snap, { rules: [hardOffsetShadow] }).map((f) => (f.location.kind === "element" ? f.location.selector : ""))
+}
+
+describe("hard-offset-shadow", () => {
+	test("#given unblurred shadows offset by 4px or more #then each is flagged", () => {
+		expect(
+			flagged({
+				positive: "rgb(51, 51, 51) 4px 4px 0px 0px",
+				negative: "rgb(51, 51, 51) -6px 6px 0px 0px",
+				layered: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(51, 51, 51) 4px 4px 0px 0px, rgba(0, 0, 0, 0.12) 0px 8px 24px 0px",
+			}),
+		).toEqual(["#positive", "#negative", "#layered"])
+	})
+
+	test("#given soft, inset, ring, transparent, small or contracted shadows #then none is flagged", () => {
+		expect(
+			flagged({
+				soft: "rgb(51, 51, 51) 0px 4px 12px 0px",
+				inset: "rgb(51, 51, 51) 4px 4px 0px 0px inset",
+				ring: "rgb(51, 51, 51) 0px 0px 0px 4px",
+				transparent: "rgba(0, 0, 0, 0) 4px 4px 0px 0px",
+				small: "rgb(51, 51, 51) 2px 2px 0px 0px",
+				contracted: "rgb(51, 51, 51) 4px 4px 0px -8px",
+			}),
+		).toEqual([])
+	})
+
+	test("#given a hard shadow waived with data-detect-ignore #then it is not flagged", () => {
+		expect(flagged({ waived: "rgb(51, 51, 51) 4px 4px 0px 0px" }, { waived: { "data-detect-ignore": "hard-offset-shadow" } })).toEqual([])
+	})
+
+	test("#given the rule is switched off in config #then nothing is reported", () => {
+		const snap = buildSnapshot([{ id: "x", style: { "box-shadow": "rgb(51, 51, 51) 4px 4px 0px 0px" } }])
+		expect(lintSnapshot(snap, { rules: [hardOffsetShadow], config: { rules: { "hard-offset-shadow": "off" } } })).toEqual([])
+	})
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hard-offset-shadow.ts

@@ -0,0 +1,31 @@
+import { isRendered, shortSnippet, styleOf } from "../../core/page"
+import { parseShadow } from "../../core/shadow"
+import type { PageRule } from "../../rule"
+
+const MIN_OFFSET_PX = 4
+
+export const hardOffsetShadow: PageRule = {
+	meta: {
+		id: "hard-offset-shadow",
+		name: "Hard offset shadow",
+		category: "quality",
+		severity: "advisory",
+		engine: "page",
+		description: "A visible shadow displaced by 4px or more with no blur: a neobrutalist costume unless the brief chose that direction.",
+		fixHint: "Use an elevation shadow with a y-offset and a soft blur, or waive it with data-detect-ignore=\"hard-offset-shadow\" when neobrutalism is the brief.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((el) => {
+			if (!isRendered(snapshot, el)) return []
+			const hard = parseShadow(styleOf(el, "box-shadow")).find(
+				(l) =>
+					!l.inset &&
+					l.color.a > 0 &&
+					l.blur === 0 &&
+					Math.max(Math.abs(l.x), Math.abs(l.y)) >= MIN_OFFSET_PX &&
+					l.spread > -Math.max(Math.abs(l.x), Math.abs(l.y)),
+			)
+			if (!hard) return []
+			return [{ element: el, message: `box-shadow ${hard.x}px ${hard.y}px with no blur`, snippet: shortSnippet(el) }]
+		}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hero-eyebrow-chip.test.ts

@@ -0,0 +1,76 @@
+import { test } from "bun:test"
+import { heroEyebrowChip } from "./hero-eyebrow-chip"
+import { assertCases } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const label: NodeSpec = {
+	tag: "span",
+	text: "New platform",
+	style: { "font-size": "12px", "text-transform": "uppercase", "letter-spacing": "1.2px" },
+}
+const hero = (id: string, size = "64px"): NodeSpec => ({
+	id,
+	tag: "h1",
+	text: "Build a better workflow",
+	style: { "font-size": size },
+	rect: { y: 60 },
+})
+test("#given tracked caps above heroes #then ordinary and application titles pass", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [label, hero("flag")] },
+			{ children: [{ ...label, style: { ...label.style, "letter-spacing": "normal" } }, hero("plain")] },
+			{ children: [label, hero("small", "24px")] },
+			{ attributes: { role: "tabpanel" }, children: [label, hero("app")] },
+		],
+		["#flag"],
+	)
+})
+test("#given typed caps bold accents and dash prefixes #then neutral labels pass", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [{ ...label, text: "FEATURED", style: { "font-size": "11px", "letter-spacing": "2px" } }, hero("caps")] },
+			{ children: [{ ...label, style: { "font-size": "12px", "font-weight": "700", color: "rgb(200,60,0)" } }, hero("bold")] },
+			{
+				children: [
+					{ ...label, style: { "font-size": "12px" }, before: { width: "20px", height: "2px", "background-color": "rgb(200,60,0)" } },
+					hero("dash"),
+				],
+			},
+			{ children: [{ ...label, style: { "font-size": "12px" } }, hero("neutral")] },
+		],
+		["#caps", "#bold", "#dash"],
+	)
+})
+test("#given wrapped label typography and dated metadata #then only the actual eyebrow reports", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [{ children: [label] }, hero("flag")] },
+			{ children: [{ ...label, text: "News 2026" }, hero("date")] },
+			{ children: [{ tag: "h2", text: "FEATURED", style: label.style ?? {} }, hero("heading")] },
+		],
+		["#flag"],
+	)
+})
+test("#given two independent text children #then the wrapper typography is not borrowed", () => {
+	assertCases(
+		heroEyebrowChip,
+		[
+			{ children: [label, hero("flag")] },
+			{
+				children: [
+					{
+						children: [
+							{ ...label, text: "North" },
+							{ ...label, text: "South" },
+						],
+					},
+					hero("pair"),
+				],
+			},
+		],
+		["#flag"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/hero-eyebrow-chip.ts

@@ -0,0 +1,19 @@
+import type { PageRule } from "../../rule"
+import { shortSnippet } from "../../core/page"
+import { heroLabel } from "./support/labels"
+export const heroEyebrowChip: PageRule = {
+	meta: {
+		id: "hero-eyebrow-chip",
+		name: "Hero eyebrow / pill chip",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A tiny tracked or accented label decorates a display hero heading.",
+		fixHint: "Remove the eyebrow or integrate its words into the heading.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((h) => {
+			const label = heroLabel(snapshot, h)
+			return label ? [{ element: h, message: "Small decorative eyebrow above the hero heading", snippet: shortSnippet(h) }] : []
+		}),
+}

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/icon-tile-stack.test.ts

@@ -0,0 +1,67 @@
+import { test } from "bun:test"
+import { iconTileStack } from "./icon-tile-stack"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const tile = (id: string): NodeSpec => ({
+	id,
+	rect: { width: 64, height: 64, y: 0 },
+	style: { ...round("16px"), "background-color": "rgba(40,85,189,.1)" },
+	children: [{ tag: "svg", rect: { width: 24, height: 24 } }],
+})
+const heading = (id: string, y = 80): NodeSpec => ({ id, tag: "h3", text: "Fast useful feature", rect: { y } })
+test("#given framed icons stacked above headings #then avatars and inline tiles pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [tile("tile"), heading("flag")] },
+			{ children: [{ ...tile("avatar"), style: { ...tile("avatar").style, ...round("50%") } }, heading("avatar-heading")] },
+			{ children: [tile("inline"), heading("inline-heading", 20)] },
+			{ children: [{ ...tile("tiny"), rect: { width: 24, height: 24 } }, heading("tiny-heading")] },
+		],
+		["#flag"],
+	)
+})
+test("#given wrapped tiles masks and emoji #then words and hidden emoji pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [{ rect: { width: 64, height: 64 }, children: [tile("tile")] }, { children: [{ children: [heading("wrapped")] }] }] },
+			{
+				children: [
+					{ ...tile("emoji"), children: [{ tag: "span", text: "\u{1F4DD}", rect: { width: 24, height: 24 } }] },
+					heading("emoji-heading"),
+				],
+			},
+			{
+				children: [{ ...tile("word"), children: [{ tag: "span", text: "AI", rect: { width: 24, height: 24 } }] }, heading("word-heading")],
+			},
+			{
+				children: [
+					{
+						...tile("hidden"),
+						children: [{ tag: "span", text: "\u{1F4DD}", style: { display: "none" }, rect: { width: 24, height: 24 } }],
+					},
+					heading("hidden-heading"),
+				],
+			},
+			{ children: [tile("far"), { children: [heading("far-heading", 240)] }] },
+		],
+		["#wrapped", "#emoji-heading"],
+	)
+})
+test("#given shadow rings and masked glyphs #then empty tiles pass", () => {
+	assertCases(
+		iconTileStack,
+		[
+			{ children: [{ ...tile("ring"), style: { ...round("14px"), "box-shadow": "0 0 0 1px rgb(203,213,225)" } }, heading("flag")] },
+			{
+				children: [
+					{ ...tile("mask"), children: [{ rect: { width: 30, height: 30 }, style: { "mask-image": "url(icon.svg)" } }] },
+					heading("masked"),
+				],
+			},
+			{ children: [{ ...tile("empty"), children: [] }, heading("empty-heading")] },
+		],
+		["#flag", "#masked"],
+	)
+})

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/icon-tile-stack.ts

@@ -0,0 +1,92 @@
+import type { PageRule } from "../../rule"
+import { childrenOf, descendants, fontSizePx, isHeading, shortSnippet, styleOf } from "../../core/page"
+import { parseColor } from "../../core/color"
+import { parseShadow } from "../../core/shadow"
+import { length, radii, visible } from "./support/appearance"
+import { labelBefore, nearAbove } from "./support/labels"
+export const iconTileStack: PageRule = {
+	meta: {
+		id: "icon-tile-stack",
+		name: "Icon tile stacked above heading",
+		category: "slop",
+		severity: "warning",
+		engine: "page",
+		description: "A small framed icon tile sits above a heading.",
+		fixHint: "Put the icon beside the title or remove its separate tile.",
+	},
+	check: ({ snapshot }) =>
+		snapshot.elements.flatMap((h) => {
+			const title =
+				["div", "span"].includes(h.tag) &&
+				["block", "flow-root"].includes(styleOf(h, "display")) &&
+				h.children.length === 0 &&
+				h.ownText.length >= 2 &&
+				h.ownText.length <= 80 &&
+				Number(styleOf(h, "font-weight")) >= 600 &&
+				fontSizePx(h) >= 16
+			if ((!isHeading(h) && !title) || !visible(snapshot, h)) return []
+			const found = labelBefore(snapshot, h)
+			if (!found) return []
+			let box = found.label
+			for (let i = 0; i < 3; i++) {
+				const children = childrenOf(snapshot, box),
+					only = children[0]
+				if (styleOf(box, "display") === "contents") {
+					box = children.at(-1) ?? box
+					continue
+				}
+				const bg = parseColor(styleOf(box, "background-color"))
+				const bare =
+					(bg === null || bg.a === 0) &&
+					["none", ""].includes(styleOf(box, "background-image")) &&
+					parseShadow(styleOf(box, "box-shadow")).length === 0 &&
+					length(styleOf(box, "border-top-width")) === 0
+				if (
+					children.length !== 1 ||
+					!only ||
+					!bare ||
+					Math.abs(box.rect.width - only.rect.width) > 2 ||
+					Math.abs(box.rect.height - only.rect.height) > 2
+				)
+					break
+				box = only
+			}
+			const candidates = [box]
+			const tile = candidates.find((t) => {
+				const { width: w, height: hgt } = t.rect,
+					bg = parseColor(styleOf(t, "background-color"))
+				if (
+					w < 32 ||
+					w > 128 ||
+					hgt < 32 ||
+					hgt > 128 ||
+					w / hgt < 0.7 ||
+					w / hgt > 1.4 ||
+					Math.max(...radii(t)) >= w / 2 ||
+					!visible(snapshot, t) ||
+					!nearAbove(t, h)
+				)
+					return false
+				const framed =
+					(bg !== null && bg.a >= 0.05) ||
+					!["none", ""].includes(styleOf(t, "background-image")) ||
+					length(styleOf(t, "border-top-width")) > 0 ||
+					parseShadow(styleOf(t, "box-shadow")).some((l) => l.color.a > 0 && !l.inset)
+				if (!framed) return false
+				const emoji = (text: string): boolean => /^[\p{Extended_Pictographic}\uFE0F\u200D\s]+$/u.test(text) && text.trim() !== ""
+				return (
+					emoji(t.ownText) ||
+					[...descendants(snapshot, t)].some(
+						(c) =>
+							visible(snapshot, c) &&
+							(["svg", "i", "img"].includes(c.tag) ||
+								!["none", ""].includes(styleOf(c, "mask-image")) ||
+								!["none", ""].includes(styleOf(c, "-webkit-mask-image")) ||
+								emoji(c.text)) &&
+							c.rect.width < w * 0.95,
+					)
+				)
+			})
+			return tile ? [{ element: h, message: "Framed icon tile stacked above heading", snippet: shortSnippet(h) }] : []
+		}),
+}

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

@@ -0,0 +1,38 @@
+import type { Rule } from "../../rule"
+import { hardOffsetShadow } from "./hard-offset-shadow"
+import { sideTab } from "./side-tab"
+import { borderAccentOnRounded } from "./border-accent-on-rounded"
+import { gptThinBorderWideShadow } from "./gpt-thin-border-wide-shadow"
+import { repeatingStripesGradient } from "./repeating-stripes-gradient"
+import { codexGridBackground } from "./codex-grid-background"
+import { organicClipPath } from "./organic-clip-path"
+import { buriedRaster } from "./buried-raster"
+import { shapeAssembledIllustration } from "./shape-assembled-illustration"
+import { iconTileStack } from "./icon-tile-stack"
+import { heroEyebrowChip } from "./hero-eyebrow-chip"
+import { kickerAboveHeading } from "./kicker-above-heading"
+import { designSystemRadius } from "./design-system-radius"
+import { marquee } from "./marquee"
+import { pulsingDot } from "./pulsing-dot"
+import { blinkingCursor } from "./blinking-cursor"
+import { bounceEasing } from "./bounce-easing"
+
+export const DECORATION_RULES: readonly Rule[] = [
+	hardOffsetShadow,
+	sideTab,
+	borderAccentOnRounded,
+	gptThinBorderWideShadow,
+	repeatingStripesGradient,
+	codexGridBackground,
+	organicClipPath,
+	buriedRaster,
+	shapeAssembledIllustration,
+	iconTileStack,
+	heroEyebrowChip,
+	kickerAboveHeading,
+	designSystemRadius,
+	marquee,
+	pulsingDot,
+	blinkingCursor,
+	bounceEasing,
+]

package/packages/shared-skills/skills/frontend/scripts/detect/rules/decoration/kicker-above-heading.test.ts

@@ -0,0 +1,126 @@
+import { test } from "bun:test"
+import { kickerAboveHeading } from "./kicker-above-heading"
+import { assertCases, round } from "./support/assert-cases"
+import type { NodeSpec } from "../../testing/build-snapshot"
+const label = (id: string, text = "Platform notes"): NodeSpec => ({
+	id,
+	tag: "span",
+	text,
+	rect: { width: 200, height: 16, y: 0 },
+	style: { "font-size": "12px", "letter-spacing": "0.96px", "text-transform": "uppercase" },
+})
+test("#given tracked labels outside the hero size ceiling #then fixed hero tracking still hands them off", () => {
+	const wide = { ...label("wide"), style: { "font-size": "15px", "letter-spacing": "1.8px", "text-transform": "uppercase" } }
+	assertCases(kickerAboveHeading, [
+		{ children: [wide, heading("h1", "64px")] },
+		{ children: [{ ...wide, id: "section" }, heading("h2", "44px")] },
+	], ["#section"])
+})
+const heading = (tag = "h2", size = "32px"): NodeSpec => ({
+	tag,
+	text: "A useful section heading",
+	style: { "font-size": size },
+	rect: { y: 24 },
+})
+test("#given captured small caps above display titles #then shorthand and longhand remain kickers", () => {
+	assertCases(kickerAboveHeading, ["font-variant", "font-variant-caps"].map((property, i) => ({
+		children: [
+			{ ...label(`caps-${i}`), text: "new in version four", style: {
+				"font-size": "13px", "letter-spacing": "1.3px", "text-transform": "none", [property]: "small-caps",
+			} },
+			heading("h1", "56px"),
+		],
+	})), ["#caps-0", "#caps-1"])
+})
+test("#given one tracked kicker above a heading #then sentence case and metadata pass", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ children: [label("date", "News Jan 12 2026"), heading()] },
+			{ children: [label("path", "Home / Journal"), heading()] },
+			{ children: [label("chapter", "Chapter Four"), heading()] },
+			{ children: [label("section", "Section kicker"), heading()] },
+			{ children: [{ ...label("sentence"), style: { "font-size": "12px", "letter-spacing": "1px" } }, heading()] },
+		],
+		["#flag", "#section"],
+	)
+})
+test("#given larger headings and wrapped kickers #then relative ceilings and geometry apply", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [{ id: "flag", children: [label("inner")] }, { children: [heading()] }] },
+			{
+				children: [
+					{ ...label("large"), style: { "font-size": "15px", "letter-spacing": "3px", "text-transform": "uppercase" } },
+					heading("h2", "44px"),
+				],
+			},
+			{
+				children: [
+					{ ...label("too-large"), style: { "font-size": "15px", "letter-spacing": "3px", "text-transform": "uppercase" } },
+					heading("h3", "24px"),
+				],
+			},
+			{
+				children: [
+					{ ...label("beside"), rect: { x: 0, y: 24, width: 100, height: 16 } },
+					{ ...heading(), rect: { x: 150, y: 24 } },
+				],
+			},
+		],
+		["#flag", "#large"],
+	)
+})
+test("#given semantic card and application labels #then section kickers alone report", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ tag: "article", children: [label("article"), heading("h3")] },
+			{ attributes: { role: "tabpanel" }, children: [label("app"), heading()] },
+			{ tag: "nav", children: [label("nav"), heading()] },
+			{ attributes: { "data-impeccable-allow-kickers": "" }, children: [label("waived"), heading()] },
+			{
+				children: [
+					{ ...label("hero"), style: { "font-size": "12px", "letter-spacing": "2px", "text-transform": "uppercase" } },
+					heading("h1", "64px"),
+				],
+			},
+		],
+		["#flag"],
+	)
+})
+test("#given painted card labels and display titles #then only section scale titles retain kickers", () => {
+	const card = { ...round("16px"), "background-color": "rgb(255,255,255)" }
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ style: card, children: [label("flag"), heading("h3", "40px")] },
+			{ style: card, children: [label("small-card"), heading("h3", "20px")] },
+			{ style: card, children: [{ ...label("badge"), style: { ...label("badge").style, position: "absolute" } }, heading("h3", "24px")] },
+		],
+		["#flag"],
+	)
+})
+test("#given normal tracking and small caps #then only tracked uppercase forms report", () => {
+	assertCases(
+		kickerAboveHeading,
+		[
+			{ children: [label("flag"), heading()] },
+			{ children: [{ ...label("plain"), style: { ...label("plain").style, "letter-spacing": "normal" } }, heading()] },
+			{
+				children: [
+					{
+						...label("smallcaps"),
+						text: "materials briefing",
+						style: { "font-size": "12px", "letter-spacing": "1.44px", "font-variant-caps": "small-caps" },
+					},
+					heading(),
+				],
+			},
+		],
+		["#flag", "#smallcaps"],
+	)
+})