Hover capture via forced pseudo-state, text-wrap support, per-viewport video source re-selection, svg paint recovery, semantic tokens & section naming

Capture:
- Hover/focus states are driven with CDP CSS.forcePseudoState instead of
  moving the real cursor - transparent full-viewport overlay layers were
  swallowing every pointer hover, silently capturing zero hover states on
  hover-rich sites
- text-wrap (balance/pretty) captured and emitted (Tailwind text-balance/
  text-pretty, arbitrary fallback)
- Videos re-run <source> selection per viewport before frame-0
  normalization: resize-without-reload kept aspect-gated variants stuck on
  the load-time choice, poisoning mobile ground-truth screenshots
- svg roots capture their computed paint; fill="none" with a computed
  paint (the fill-current pattern) recovers the real color instead of
  rendering blank

Tokens & naming:
- Full CSS-Color-4 parsing (oklab/oklch/lab/lch/hsl) so modern colors
  cluster and earn semantic roles; visually-equal literals share one token;
  decoration/gradient/shadow colors consult the palette before minting
  opaque tokens (ridge: 45 opaque tokens -> 15, anthropic: 12 -> 7)
- Expanded role vocabulary (background/foreground/primary/accent/border/
  surface/muted) with deterministic tiebreaks and a chroma guard
- Section names mine CMS section ids and js-* hooks with hashy-suffix
  stripping (split_callout_JtTWTt -> split-callout-section)

364 tests pass (42 new), typecheck clean; determinism verified by
double-regen byte-comparison on two reference runs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Samraaj Bath
2026-07-04 02:22:15 -07:00
co-authored by Claude Fable 5
parent db0054e43b
commit 6e4921884c
16 changed files with 968 additions and 54 deletions
+3 -1
View File
@@ -74,7 +74,7 @@ function isViewportHeight(value: string, width: number): boolean {
const INHERITED = new Set([
"color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight",
"letterSpacing", "wordSpacing", "textAlign", "textTransform", "whiteSpace",
"wordBreak", "overflowWrap", "textIndent", "fontVariantCaps", "fontFeatureSettings",
"wordBreak", "overflowWrap", "textWrap", "textIndent", "fontVariantCaps", "fontFeatureSettings",
"listStyleType", "listStylePosition", "writingMode", "direction", "cursor",
"textShadow", "visibility", "textDecorationColor", "webkitTextStroke",
"webkitTextFillColor",
@@ -139,6 +139,8 @@ const GENERIC: Array<{ prop: string; def: string | string[] }> = [
{ prop: "textDecorationStyle", def: "solid" },
{ prop: "whiteSpace", def: "__never__" }, { prop: "wordBreak", def: "__never__" },
{ prop: "overflowWrap", def: "__never__" }, { prop: "textIndent", def: "__never__" },
// text-wrap: elide the initial `wrap`; emit `balance`/`pretty`/`nowrap`/`stable`.
{ prop: "textWrap", def: "wrap" },
{ prop: "textShadow", def: "__never__" }, { prop: "fontVariantCaps", def: "__never__" },
{ prop: "fontFeatureSettings", def: "__never__" }, { prop: "listStyleType", def: "__never_list__" },
{ prop: "listStylePosition", def: "__never__" }, { prop: "writingMode", def: "__never__" },