React component that renders product release cards in two density variants (`lg` and `sm`) for displaying software release information across OpenFrame and Flamingo MSP platform surfaces. ## Key Components ### Types & Interfaces - **`ProductReleaseCardSize`** — Union type `'lg' | 'sm'` controlling card density - **`ProductReleaseCardAnchorProps`** — Structural `` prop bundle (`href`, `target`, `rel`, `onClick`) for consumer-composed navigation; shape-compatible with the hub's `useNavLink` hook - **`ProductReleaseCardProps`** — Full prop surface including title, summary, version, changelog counts, author, cover image, and release metadata ### `ProductReleaseCard` Main export. Renders one of two layouts based on the `size` prop (defaults to `'lg'`): - **`lg`** — Three-zone layout: hero (16:9 cover image + version pill + title + summary), changelog stats strip (feature/fix/improvement/breaking counts), and a fixed 4-cell metadata grid (Type · Status · Released · Author). Renders as an `` with hover/focus states. - **`sm`** — Compact horizontal layout (~80px tall) for inline chat and tight surfaces. Uses `` elements instead of block-level tags (safe inside markdown `

`), 56px icon, 1-line title, and condensed meta (version · date). Navigation is handled via `anchorProps` (preferred) or legacy `onClick` for back-compat. ## Usage Example ```typescript import { ProductReleaseCard } from '@openframe/ui' // Large catalog card with full metadata router.push("/releases/2.4.0"), }} /> // Compact inline card for chat surfaces ``` **Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/product-release-card.tsx)