feat(capture): extract gradient washes, glass panels, and nav CTAs

[xuanruli]

What

Extends the hyperframes capture design-style extractor to capture a site's signature color grounds and materials — the layers a flat background-color misses. These are what let a downstream frame.md reproduce a brand's gradients, frosted glass, and its real primary CTA.

Changes

• Gradient + glass on components. Buttons / cards / nav now record backgroundImage (gradient) and backdropFilter.
• backgrounds[] — dominant gradient / mesh washes ranked by on-screen area (includes ::before/::after glow orbs), chroma-weighted so a small vivid brand wash outranks a large neutral scrim.
• glass[] — frosted-glass panels (backdrop-filter blur) with their raw translucent fill, border, radius, shadow, ranked by area.
• nav CTA capture — keep filled buttons inside <nav> (a page's primary "Sign up" / "Start for free" CTA that the old nav-drop discarded), including gradient-filled CTAs whose background-color is transparent.
• Dedup keys for buttons/cards now include gradient + glass, so a gradient/frosted variant isn't collapsed into its flat sibling.
• Bug fix: a fully-transparent fill rgba(...,0) now reports "transparent" instead of #000000 — the old behavior turned every transparent wrapper into a phantom black button/card.

Types: ComponentStyle gains backgroundImage / backdropFilter; DesignStyles gains backgrounds[] and glass[] (both optional — backward compatible).

Testing

• bun run build — passes (full ordered build)
• bunx oxlint + bunx oxfmt --check on both files — clean
• bunx vitest run src/capture/ — 48/48 pass

🤖 Generated with Claude Code

[miga-heygen]

Review — Extract gradient washes, glass panels, and nav CTAs

Verdict: LGTM with nits ✅

Well-structured extension to the design-style extractor. Gradient background washes ranked by chroma-weighted area, frosted-glass panels via backdrop-filter + raw translucent fill, and nav CTAs that were previously discarded. Also fixes a real bug where rgba(...,0) transparent fills were reported as #000000. Type-safe (optional fields on existing interfaces), backward compatible.

Nits

1. isFilledEl transparent-detection regex — /rgba?\([^)]*,\s*0\s*\)/ matches the blue channel of rgb(r, g, 0) as a zero-alpha. Chromium returns rgb(0, 0, 0) (not rgba) for solid black, so a black nav CTA button would be falsely excluded. Fix: use rgba\( (require the a) since only rgba() carries an explicit alpha. Low-impact in practice (solid-black CTAs are rare, gradient fallback catches them), but a correctness gap worth tightening.

2. Button dedup key omits backdropFilter — Cards include backdropFilter in their dedup key, but buttons don't. A frosted-glass button variant would collapse with its non-frosted sibling. Likely intentional (frosted buttons are very rare), but the asymmetry is worth noting.

3. rgbToHex comment slightly overstates — Comment says "both comma and modern slash syntax" but the regex still requires commas between R, G, B. It supports rgba(r, g, b / a) but not fully space-separated rgb(r g b / a). Functionally correct since getComputedStyle returns comma-separated values — just the comment is slightly misleading.

Ponytail

Gradient section queries up to 400 elements with pseudo-element inspection and chroma weighting — justified complexity for the domain. Glass section is similarly proportionate. gradientChroma is a clean bespoke function with no stdlib alternative. Lean already. Ship.

2 files changed, +138 / −8

[miguel-heygen]

Verified at aafdc629. This is scoped to the design-style extractor output: gradients are captured as explicit background washes, glass panels preserve the raw translucent fill/backdrop blur, and filled nav CTAs are retained without re-admitting plain nav links. The new fields are optional in DesignStyles, and the current downstream path just serializes the JSON, so this stays backward-compatible.

Miga's nits are valid but non-blocking: the rgba? transparent check can be tightened, button dedupe omits backdropFilter, and the rgbToHex comment overstates slash-syntax support. None of those change the ship call for this additive extractor improvement.

Checks are green.

Verdict: APPROVE
Reasoning: Additive capture metadata with bounded sampling, optional types, and no failing checks or runtime consumer breakage.

— Magi