Add PlayBadges recreation examples with snapshot tests and flexGrow/flexShrink for containers

[Copilot]

Validates that htvg can recreate PlayBadges (originally satori-based) using JSON element trees. Adds snapshot tests and documents missing features.

flexGrow/flexShrink on Box and Flex containers

Previously only TextStyle and ImageStyle had flex child properties. The badge layout requires flexGrow: 1 on a Flex container (content area fills space beside the icon), so this was a blocking gap.

• element.rs: Added flex_grow/flex_shrink to BoxStyle and FlexStyle
• layout.rs: Wire values into Taffy style conversion
• types.ts: Mirror in TypeScript definitions

PlayBadges examples

Three badge variants in examples/:

• playbadge-dark.json — dark theme, 4.4★ rating
• playbadge-light.json — light theme
• playbadge-dark-norating.json — N/A rating variant

Snapshot tests

8 tests via insta in crates/htvg-core/tests/playbadges_snapshot.rs:

• Badge compilation + SVG snapshots (dark, light, no-rating)
• Structural checks (rounded corners, image clip-path, border stroke)
• flexGrow layout correctness
• OG image layout pattern (based on pavi2410/website og-image.tsx)

Missing features for full parity

1. boxShadow — PlayBadges uses shadow-lg on the app icon
2. Inline/rich text — mixed styles within a single line (e.g. "4.4" white + "★" yellow + "(1.2K)" gray)
3. Icon fonts — Material Symbols Outlined for the download icon glyph
4. Font loading from URLs at compile time — accurate text measurement requires fetching remote font data during layout
5. Text overflow/ellipsis — long app names can overflow badge bounds

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.