Add font metadata extraction to brand asset pipeline

[ethanjyx]

Summary

• Adds FontAsset type with family, role, weights, source, fallbacks, and optional googleFontsUrl fields, and extends BrandExtractionResult to include a fonts array
• Implements extractFonts() in scraper.ts using a multi-phase detection pipeline: Google Fonts <link> tags, @import rules, @font-face declarations, CSS font-family rules in inline and external stylesheets, and inline element styles
• Adds FontDisplay UI component to the dashboard that renders each detected font as a clickable card (copies family name to clipboard) with role, source, and weight metadata
• Includes fonts in the /api/extract response with logging of fontCount
• Exports FontAsset from the public package index
• Adds shape validation tests for FontAsset covering family, role, source, weights, fallbacks, and googleFontsUrl consistency

Changes

• src/types.ts — new FontAsset interface; fonts: FontAsset[] added to BrandExtractionResult
• src/scraper.ts — extractFonts() implementation with Google Fonts URL parser, font-stack parser, CSS rule scanner, and heading/body role classifier; also adds AbortSignal.timeout(15_000) to existing fetch calls
• src/index.ts — exports FontAsset
• components/font-display.tsx — new FontDisplay React component
• components/brand-results.tsx — renders FontDisplay between colors and backdrops
• app/api/extract/route.ts — passes fonts through to API response and logs fontCount
• integration_test/asset-shapes.test.ts — FontAsset shape validation test

Test plan

• Run integration tests: bun test integration_test/asset-shapes.test.ts
• Verify font extraction on representative sites:
  • tight.studio (should detect InterDisplay as custom/body)
  • stripe.com (should detect sohne-var, SourceCodePro)
  • vercel.com (should detect Geist)
  • hubspot.com (should detect HubSpot Sans as body, HubSpot Serif as heading)
• Confirm fonts array appears in raw JSON view on dashboard
• Confirm FontDisplay cards render correctly and copy-to-clipboard works
• Verify sites with no detectable custom fonts return an empty fonts array without errors

Impact

No breaking changes. fonts is a new additive field on BrandExtractionResult. Existing consumers that do not destructure fonts are unaffected. The FontAsset type is exported from the package for consumers who want to type the new field.

🤖 Generated with Claude Code

[ethanjyx]

TODO:

1. render fonts in better way, for each font as well
2. production results are cached, need to invalidate cache