@oddsmith/ui 0.0.0

package/src/components/leaderboard-v2/constants.ts

@@ -0,0 +1,16 @@
+import type { LbPlayer, LbStats } from './types.js';
+
+export const SF_LEADERBOARD_TAG = 'sf-leaderboard';
+
+export const DEFAULT_LB_TITLE = 'ARENA RANKINGS';
+export const DEFAULT_LB_SUBTITLE = 'Climb the grid. Claim the crown.';
+
+export const DEFAULT_LB_STATS: LbStats = {
+  totalPlayers: 12847,
+  yourRank: 156,
+  topScore: 2847500,
+};
+
+/** Empty defaults — use demo data or set via properties. */
+export const DEFAULT_LB_PLAYERS: LbPlayer[] = [];
+export const DEFAULT_LB_CURRENT_USER: LbPlayer | undefined = undefined;

package/src/components/leaderboard-v2/demo/sample-data.ts

@@ -0,0 +1,152 @@
+import { LbPlayer, LbBadge, LbStats } from '../types.js';
+
+export const badges: LbBadge[] = [
+  { id: '1', name: 'First Win', icon: 'trophy', rarity: 'common' },
+  { id: '2', name: 'Streak Master', icon: 'flame', rarity: 'rare' },
+  { id: '3', name: 'Top 10', icon: 'star', rarity: 'epic' },
+  { id: '4', name: 'Legend', icon: 'crown', rarity: 'legendary' },
+  { id: '5', name: 'Speed Demon', icon: 'zap', rarity: 'rare' },
+  { id: '6', name: 'Perfectionist', icon: 'gem', rarity: 'epic' },
+];
+
+export const players: LbPlayer[] = [
+  {
+    id: '1',
+    rank: 1,
+    username: 'ShadowNinja',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=shadow',
+    level: 99,
+    xp: 45000,
+    xpToNextLevel: 50000,
+    score: 2847500,
+    wins: 342,
+    streak: 15,
+    badges: [badges[3], badges[2], badges[5]],
+    trend: 'same',
+  },
+  {
+    id: '2',
+    rank: 2,
+    username: 'CyberPhoenix',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=phoenix',
+    level: 95,
+    xp: 38000,
+    xpToNextLevel: 45000,
+    score: 2654200,
+    wins: 298,
+    streak: 8,
+    badges: [badges[2], badges[1], badges[4]],
+    trend: 'up',
+    rankChange: 2,
+  },
+  {
+    id: '3',
+    rank: 3,
+    username: 'NeonBlade',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=blade',
+    level: 92,
+    xp: 41000,
+    xpToNextLevel: 44000,
+    score: 2501800,
+    wins: 276,
+    streak: 5,
+    badges: [badges[2], badges[0], badges[1]],
+    trend: 'down',
+    rankChange: 1,
+  },
+  {
+    id: '4',
+    rank: 4,
+    username: 'StormWatcher',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=storm',
+    level: 88,
+    xp: 22000,
+    xpToNextLevel: 42000,
+    score: 2234500,
+    wins: 245,
+    streak: 12,
+    badges: [badges[1], badges[4]],
+    trend: 'up',
+    rankChange: 3,
+  },
+  {
+    id: '5',
+    rank: 5,
+    username: 'VoidRunner',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=void',
+    level: 85,
+    xp: 35000,
+    xpToNextLevel: 40000,
+    score: 2087300,
+    wins: 218,
+    streak: 3,
+    badges: [badges[0], badges[5]],
+    trend: 'same',
+  },
+  {
+    id: '6',
+    rank: 6,
+    username: 'PixelHunter',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pixel',
+    level: 82,
+    xp: 18000,
+    xpToNextLevel: 38000,
+    score: 1956700,
+    wins: 195,
+    streak: 7,
+    badges: [badges[1], badges[0]],
+    trend: 'up',
+    rankChange: 1,
+  },
+  {
+    id: '7',
+    rank: 7,
+    username: 'GhostCoder',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ghost',
+    level: 79,
+    xp: 28000,
+    xpToNextLevel: 36000,
+    score: 1823400,
+    wins: 178,
+    streak: 2,
+    badges: [badges[4], badges[0]],
+    trend: 'down',
+    rankChange: 2,
+  },
+  {
+    id: '8',
+    rank: 8,
+    username: 'ThunderFist',
+    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=thunder',
+    level: 76,
+    xp: 12000,
+    xpToNextLevel: 34000,
+    score: 1678900,
+    wins: 156,
+    streak: 4,
+    badges: [badges[0]],
+    trend: 'same',
+  },
+];
+
+export const stats: LbStats = {
+  totalPlayers: 12847,
+  yourRank: 156,
+  topScore: 2847500,
+};
+
+export const currentUser: LbPlayer = {
+  id: 'current',
+  rank: 156,
+  username: 'YourLbPlayer',
+  avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=current',
+  level: 45,
+  xp: 12500,
+  xpToNextLevel: 20000,
+  score: 456780,
+  wins: 42,
+  streak: 3,
+  badges: [badges[0], badges[1]],
+  trend: 'up',
+  rankChange: 12,
+};

package/src/components/leaderboard-v2/events.ts

@@ -0,0 +1,13 @@
+import type { LbPlayer, LbTabId } from './types.js';
+
+export const LB_TAB_CHANGE = 'tab-change';
+export const LB_PLAYER_SELECT = 'player-select';
+export const LB_LOAD_MORE = 'load-more';
+
+export interface LbTabChangeDetail {
+  tab: LbTabId;
+}
+
+export interface LbPlayerSelectDetail {
+  player: LbPlayer;
+}

package/src/components/leaderboard-v2/icons.ts

@@ -0,0 +1,22 @@
+export const icons = {
+  trophy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>`,
+  crown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"/><path d="M5 21h14"/></svg>`,
+  flame: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>`,
+  star: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>`,
+  zap: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
+  gem: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>`,
+  users: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
+  target: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>`,
+  trendingUp: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`,
+  trendingDown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/></svg>`,
+  minus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>`,
+} as const;
+
+export type LbIconName = keyof typeof icons;
+
+export function getIcon(name: LbIconName, size = 16): string {
+  const icon = icons[name] || '';
+  return icon
+    .replace(/width="\d+"/, `width="${size}"`)
+    .replace(/height="\d+"/, `height="${size}"`);
+}

package/src/components/leaderboard-v2/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Leaderboard v2 — public API.
+ * Import: `import '@skinforge/leaderboard-v2'`
+ */
+export type { LbPlayer, LbBadge, LbStats, LbTabId } from './types.js';
+export {
+  SF_LEADERBOARD_TAG,
+  DEFAULT_LB_TITLE,
+  DEFAULT_LB_SUBTITLE,
+  DEFAULT_LB_STATS,
+} from './constants.js';
+export {
+  LB_TAB_CHANGE,
+  LB_PLAYER_SELECT,
+  LB_LOAD_MORE,
+} from './events.js';
+export type {
+  LbTabChangeDetail,
+  LbPlayerSelectDetail,
+} from './events.js';
+export { SfLeaderboard } from './components/sf-leaderboard.js';
+
+import './components/sf-leaderboard.js';

package/src/components/leaderboard-v2/sf-leaderboard.html

@@ -0,0 +1 @@
+${this.renderContent()}

package/src/components/leaderboard-v2/sf-leaderboard.scss

@@ -0,0 +1,382 @@
+:host {
+      display: block;
+      width: 100%;
+      max-width: 920px;
+      margin: 0 auto;
+      position: relative;
+    }
+
+    .shell {
+      position: relative;
+      padding: 2rem 1.5rem 2.5rem;
+      border-radius: 24px;
+      background: linear-gradient(
+        160deg,
+        rgba(8, 10, 24, 0.98) 0%,
+        rgba(5, 5, 16, 0.99) 50%,
+        rgba(12, 8, 32, 0.98) 100%
+      );
+      border: 1px solid var(--lb-border);
+      box-shadow:
+        var(--lb-glow-cyan),
+        inset 0 1px 0 rgba(255, 255, 255, 0.06);
+      overflow: hidden;
+    }
+
+    .shell::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
+      background-size: 32px 32px;
+      pointer-events: none;
+      mask-image: linear-gradient(180deg, black 0%, transparent 85%);
+    }
+
+    .shell::after {
+      content: '';
+      position: absolute;
+      top: -40%;
+      left: -20%;
+      width: 60%;
+      height: 60%;
+      background: radial-gradient(
+        circle,
+        rgba(139, 92, 246, 0.2) 0%,
+        transparent 70%
+      );
+      animation: aurora 12s ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    @keyframes aurora {
+      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
+      50% { transform: translate(20%, 10%) scale(1.1); opacity: 1; }
+    }
+
+    .live-badge {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.35rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.65rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--lb-success);
+      background: rgba(34, 255, 154, 0.1);
+      border: 1px solid rgba(34, 255, 154, 0.35);
+      z-index: 2;
+    }
+
+    .live-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--lb-success);
+      box-shadow: 0 0 10px var(--lb-success);
+      animation: pulse-live 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse-live {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.85); }
+    }
+
+    .header {
+      text-align: center;
+      margin-bottom: 2rem;
+      position: relative;
+      z-index: 1;
+    }
+
+    .title-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .crown-icon {
+      color: var(--lb-gold);
+      display: flex;
+      filter: drop-shadow(0 0 12px rgba(255, 213, 74, 0.6));
+      animation: float-crown 3s ease-in-out infinite;
+    }
+
+    .crown-icon:last-child {
+      animation-delay: -1.5s;
+    }
+
+    @keyframes float-crown {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-4px); }
+    }
+
+    .title {
+      font-family: var(--lb-font);
+      font-size: clamp(1.5rem, 4vw, 2.25rem);
+      font-weight: 900;
+      letter-spacing: 0.08em;
+      background: linear-gradient(
+        90deg,
+        var(--lb-cyan) 0%,
+        #fff 40%,
+        var(--lb-magenta) 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-shadow: 0 0 40px rgba(0, 245, 255, 0.3);
+    }
+
+    .subtitle {
+      font-size: 0.875rem;
+      color: var(--lb-muted);
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 0.75rem;
+      margin-bottom: 1.75rem;
+      position: relative;
+      z-index: 1;
+    }
+
+    .hero-card {
+      margin-bottom: 1.75rem;
+      padding: 1.5rem;
+      border-radius: var(--lb-radius);
+      background: linear-gradient(
+        135deg,
+        rgba(0, 245, 255, 0.08) 0%,
+        rgba(255, 43, 214, 0.06) 100%
+      );
+      border: 1px solid rgba(0, 245, 255, 0.25);
+      box-shadow: var(--lb-glow-cyan);
+      position: relative;
+      z-index: 1;
+      overflow: hidden;
+    }
+
+    .hero-card::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.04),
+        transparent
+      );
+      animation: scan 4s linear infinite;
+    }
+
+    @keyframes scan {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+
+    .hero-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+      position: relative;
+      z-index: 1;
+    }
+
+    .hero-info {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .hero-avatar-wrap {
+      position: relative;
+    }
+
+    .hero-avatar {
+      width: 68px;
+      height: 68px;
+      border-radius: 50%;
+      border: 2px solid var(--lb-cyan);
+      box-shadow: 0 0 20px rgba(0, 245, 255, 0.4);
+    }
+
+    .hero-level {
+      position: absolute;
+      bottom: -4px;
+      right: -4px;
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.7rem;
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--lb-violet), var(--lb-magenta));
+      border: 2px solid var(--lb-bg);
+    }
+
+    .hero-name {
+      font-family: var(--lb-font);
+      font-size: 1.2rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .you-chip {
+      font-size: 0.65rem;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background: var(--lb-cyan);
+      color: var(--lb-bg);
+      font-weight: 800;
+      letter-spacing: 0.05em;
+    }
+
+    .hero-meta {
+      font-size: 0.8rem;
+      color: var(--lb-muted);
+      margin-top: 0.25rem;
+    }
+
+    .hero-score-block {
+      text-align: right;
+    }
+
+    .hero-score {
+      font-family: var(--lb-font);
+      font-size: 1.75rem;
+      font-weight: 900;
+      color: var(--lb-cyan);
+      text-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
+    }
+
+    .hero-streak {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.25rem;
+      font-size: 0.8rem;
+      color: var(--lb-magenta);
+      margin-top: 0.25rem;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 0.35rem;
+      margin-bottom: 1.5rem;
+      padding: 0.35rem;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 12px;
+      border: 1px solid var(--lb-border);
+      position: relative;
+      z-index: 1;
+    }
+
+    .tab {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.4rem;
+      padding: 0.65rem;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--lb-muted);
+      font-family: inherit;
+      font-size: 0.8rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.25s ease;
+    }
+
+    .tab:hover {
+      color: var(--lb-foreground);
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .tab.active {
+      color: var(--lb-bg);
+      background: linear-gradient(135deg, var(--lb-cyan), var(--lb-violet));
+      box-shadow: 0 4px 20px rgba(0, 245, 255, 0.35);
+    }
+
+    .tab-label {
+      display: none;
+    }
+
+    @media (min-width: 640px) {
+      .tab-label {
+        display: inline;
+      }
+    }
+
+    .toggle-btn {
+      width: 100%;
+      margin-bottom: 1rem;
+      padding: 0.5rem;
+      border: none;
+      background: transparent;
+      color: var(--lb-muted);
+      font-size: 0.7rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      cursor: pointer;
+      font-family: inherit;
+      transition: color 0.2s;
+      position: relative;
+      z-index: 1;
+    }
+
+    .toggle-btn:hover {
+      color: var(--lb-cyan);
+    }
+
+    .players-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.65rem;
+      position: relative;
+      z-index: 1;
+    }
+
+    .load-more {
+      width: 100%;
+      margin-top: 1.25rem;
+      padding: 0.85rem;
+      border-radius: var(--lb-radius);
+      border: 1px solid var(--lb-border);
+      background: rgba(0, 245, 255, 0.06);
+      color: var(--lb-cyan);
+      font-family: var(--lb-font);
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      cursor: pointer;
+      transition: all 0.25s;
+      position: relative;
+      z-index: 1;
+    }
+
+    .load-more:hover {
+      background: rgba(0, 245, 255, 0.12);
+      box-shadow: var(--lb-glow-cyan);
+    }

package/src/components/leaderboard-v2/tokens.ts

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+
+/** Design tokens + base reset for all v2 leaderboard child components. */
+export const lbTokens = css`
+  :host {
+    --lb-bg: #050510;
+    --lb-surface: rgba(12, 14, 28, 0.85);
+    --lb-surface-hover: rgba(20, 24, 48, 0.95);
+    --lb-foreground: #f0f4ff;
+    --lb-muted: #7b8499;
+    --lb-cyan: #00f5ff;
+    --lb-magenta: #ff2bd6;
+    --lb-violet: #8b5cf6;
+    --lb-gold: #ffd54a;
+    --lb-silver: #c0d4e8;
+    --lb-bronze: #cd7f32;
+    --lb-success: #22ff9a;
+    --lb-danger: #ff4466;
+    --lb-border: rgba(0, 245, 255, 0.15);
+    --lb-glow-cyan: 0 0 24px rgba(0, 245, 255, 0.35);
+    --lb-glow-gold: 0 0 32px rgba(255, 213, 74, 0.45);
+    --lb-radius: 14px;
+    --lb-font: 'Orbitron', 'Inter', system-ui, sans-serif;
+    --lb-font-body: 'Inter', system-ui, sans-serif;
+
+    font-family: var(--lb-font-body);
+    color: var(--lb-foreground);
+  }
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+`;

package/src/components/leaderboard-v2/types.ts

@@ -0,0 +1,30 @@
+export interface LbPlayer {
+  id: string;
+  rank: number;
+  username: string;
+  avatar: string;
+  level: number;
+  xp: number;
+  xpToNextLevel: number;
+  score: number;
+  wins: number;
+  streak: number;
+  badges: LbBadge[];
+  trend: 'up' | 'down' | 'same';
+  rankChange?: number;
+}
+
+export interface LbBadge {
+  id: string;
+  name: string;
+  icon: string;
+  rarity: 'common' | 'rare' | 'epic' | 'legendary';
+}
+
+export interface LbStats {
+  totalPlayers: number;
+  yourRank: number;
+  topScore: number;
+}
+
+export type LbTabId = 'global' | 'weekly' | 'friends';