DS0 (Design v2): the Entity Layer — teams/players/books render as themselves

Founder's #1 priority. A single cached asset+rendering system, swapped into
every surface, so entities stop being flat gray strings (DESIGN-SPEC Part 2).

- web/src/lib/teamMeta.js: static registry for ALL 4 sports — 30 MLB, 30 NBA,
  13 WNBA teams + 48 World Cup national teams, each with real colors + the
  ESPN logo/flag CDN abbr. resolveTeam (abbr/full-name/nickname/alias),
  teamLogoUrl (statsapi->ESPN mapping: AZ->ari, CWS->chw; soccer via the
  countries/ flag CDN), accentColor (picks the VISIBLE color of the pair so a
  #000000 primary never renders an invisible accent on #06060B). Colors +
  abbrs sourced once from ESPN's team API — stable public facts, zero-latency
  static data, no paid dependency.
- TeamLogo: real ESPN-CDN logo with a team-colored MONOGRAM fallback (never a
  gray box / bare abbr). PlayerAvatar: real headshot with a team-colored
  monogram fallback (kills the gray silhouette). BookWordmark: brand-color
  wordmark, proper casing (DraftKings, not 'draftkings').
- Swapped into the class-level shared components so it propagates to ALL
  surfaces: GameCard (team logos + team-colored accent edge), StatStrip
  (player identity avatar), StreaksPanel (P0 billboard avatars), TeamHub
  header (the team's real crest leads its hub). Barrel-exported.

ZERO OUT-OF-POCKET: ESPN logo/flag CDN + league headshot CDNs, all verified
200 image/png across MLB/NBA/WNBA/soccer.

ACCEPTANCE (SSR render proof): /entity-demo harness server-rendered the exact
real asset URLs across all 4 sports — mlb/500/nyy.png, mlb/500/chw.png (White
Sox, correct ESPN abbr), nba/500/lal.png, wnba/500/ny.png, countries/500/
usa.png + bra/eng/arg/jpn flags, real mlbstatic/nba headshots (Judge 592450,
LeBron 2544), DraftKings/FanDuel wordmarks. Each URL curl-verified 200
image/png. Harness removed post-proof (not a product surface). Pixel
screenshot blocked by WSL2<->Windows-Chrome localhost networking, not code.

2757 -> 2776 tests (+13 entityLayer, +6 boot resilience), web build exit 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/components/StreaksPanel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { getHeadshotUrl, PLAYER_SILHOUETTE } from '@/lib/playerHeadshot';
+import PlayerAvatar from '@/components/vyndr/PlayerAvatar';
 import { type Tier } from '@/lib/tierGate';
 
 /**
@@ -73,14 +73,9 @@ export default function StreaksPanel({ sport, tier = 'free', stat = 'all', limit
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         {visible.map((s) => (
           <div key={`${s.player}-${s.type}`} style={rowStyle}>
-            <img
-              src={getHeadshotUrl({ sport, playerId: s.playerId })}
-              alt={s.player}
-              width={36}
-              height={36}
-              style={avatarStyle}
-              onError={(e) => { (e.target as HTMLImageElement).src = PLAYER_SILHOUETTE; }}
-            />
+            {/* DS0 — real headshot / team-colored monogram (kills the gray
+                silhouette). The STREAKS row is a P0 billboard. */}
+            <PlayerAvatar name={s.player} sport={sport} playerId={s.playerId} team={s.team} size={38} />
             <div style={{ flex: 1, minWidth: 0 }}>
               <div style={playerName}>
                 {s.player}{s.team ? ` · ${s.team}` : ''}
@@ -118,9 +113,6 @@ const rowStyle: React.CSSProperties = {
   padding: '8px 10px', borderRadius: 10,
   background: 'var(--surface, #12121A)', border: '1px solid var(--border, #2A2A36)',
 };
-const avatarStyle: React.CSSProperties = {
-  borderRadius: '50%', objectFit: 'cover', background: '#1A1A24', flex: '0 0 auto',
-};
 const playerName: React.CSSProperties = {
   fontSize: 14, fontWeight: 700, color: 'var(--text-primary, #F0F0F4)',
   whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',