@oddsmith/ui 0.0.0 → 1.0.0

package/main.css

@@ -1,210 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: system-ui, sans-serif;
-  background: #0f1117;
-  color: #e8eaed;
-  min-height: 100vh;
-}
-
-.core-dev {
-  display: flex;
-  min-height: 100vh;
-}
-
-.core-dev__sidebar {
-  width: 14rem;
-  flex-shrink: 0;
-  padding: 1rem;
-  background: #1a1d26;
-  border-right: 1px solid #2a2f3a;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.core-dev__brand strong {
-  display: block;
-  font-size: 0.95rem;
-}
-
-.core-dev__brand span {
-  font-size: 0.75rem;
-  color: #9aa0a6;
-}
-
-.core-dev__nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.core-dev__nav-link {
-  display: block;
-  padding: 0.5rem 0.65rem;
-  border-radius: 6px;
-  color: #c4c7cc;
-  text-decoration: none;
-  font-size: 0.875rem;
-}
-
-.core-dev__nav-link:hover {
-  background: #252830;
-  color: #fff;
-}
-
-.core-dev__nav-link.is-active {
-  background: #2d3340;
-  color: #fff;
-}
-
-.core-dev__main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.core-dev__header {
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid #2a2f3a;
-}
-
-.core-dev__header h1 {
-  margin: 0 0 0.35rem;
-  font-size: 1.25rem;
-}
-
-.core-dev__header p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #9aa0a6;
-}
-
-.core-dev__stage {
-  flex: 1;
-  padding: 1.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.core-dev__stage:has(> sf-leaderboard:only-child),
-.core-dev__stage:has(.sf-leaderboard-dev > sf-leaderboard) {
-  padding: 0;
-  display: block;
-}
-
-.core-dev__stage > sf-leaderboard,
-.core-dev__stage .sf-leaderboard-dev > sf-leaderboard {
-  width: 100%;
-  display: block;
-}
-
-.core-dev__stage:empty::after {
-  content: 'Select a component';
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-.core-dev__error {
-  color: #f87171;
-  font-size: 0.875rem;
-}
-
-/* SF Leaderboard preset bar (dev preview) */
-.sf-leaderboard-dev {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.playground-preset-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem 1.5rem;
-  padding: 0.75rem 1rem;
-  background: #1a1d26;
-  border-bottom: 1px solid #2a2f3a;
-  align-items: flex-start;
-}
-
-.playground-preset-bar__group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.playground-preset-bar__label {
-  font-size: 0.75rem;
-  color: #9aa0a6;
-}
-
-.playground-preset-bar__select {
-  font: inherit;
-  padding: 0.4rem 0.6rem;
-  border-radius: 6px;
-  border: 1px solid #3c4048;
-  background: #0f1117;
-  color: inherit;
-  min-width: 12rem;
-}
-
-.playground-preset-bar__hint {
-  margin: 0;
-  font-size: 0.75rem;
-  color: #6b7280;
-  max-width: 20rem;
-}
-
-.playground-preset-bar__meta {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.playground-preset-bar__badge {
-  font-size: 0.75rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  background: #2d3340;
-}
-
-.playground-preset-bar__badge--muted {
-  background: #252830;
-  color: #9aa0a6;
-}
-
-.playground-preset-bar__labels {
-  border: 1px solid #2a2f3a;
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
-  margin: 0;
-}
-
-.playground-preset-bar__labels legend {
-  font-size: 0.75rem;
-  color: #9aa0a6;
-  padding: 0 0.25rem;
-}
-
-.playground-preset-bar__labels label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  font-size: 0.75rem;
-  margin-top: 0.35rem;
-}
-
-.playground-preset-bar__labels input {
-  font: inherit;
-  padding: 0.3rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid #3c4048;
-  background: #0f1117;
-  color: inherit;
-}

package/main.ts

@@ -1,124 +0,0 @@
-/**
- * Core dev shell — runs before any component module loads.
- * Start: npm run dev  →  http://localhost:5173/?component=sf-leaderboard
- */
-import {
-  COMPONENT_CATALOG,
-  getCatalogEntry,
-  navigateToComponent,
-  persistComponentId,
-  readInitialComponentId,
-  switchingRequiresReload,
-} from './previews/catalog.js';
-
-const app = document.getElementById('app');
-if (!app) {
-  throw new Error('#app not found — index.html must define the mount point before main.ts');
-}
-
-let activeId = readInitialComponentId();
-let teardown: (() => void) | undefined;
-
-const shell = document.createElement('div');
-shell.className = 'core-dev';
-
-const sidebar = document.createElement('aside');
-sidebar.className = 'core-dev__sidebar';
-
-const brand = document.createElement('div');
-brand.className = 'core-dev__brand';
-brand.innerHTML = '<strong>Oddsmith</strong><span>Core dev</span>';
-
-const nav = document.createElement('nav');
-nav.className = 'core-dev__nav';
-nav.setAttribute('aria-label', 'Components');
-
-const main = document.createElement('main');
-main.className = 'core-dev__main';
-
-const header = document.createElement('header');
-header.className = 'core-dev__header';
-
-const titleEl = document.createElement('h1');
-const descEl = document.createElement('p');
-header.append(titleEl, descEl);
-
-const stage = document.createElement('div');
-stage.className = 'core-dev__stage';
-main.append(header, stage);
-
-shell.append(sidebar, main);
-sidebar.append(brand, nav);
-app.appendChild(shell);
-
-function renderNav(): void {
-  nav.replaceChildren();
-  for (const entry of COMPONENT_CATALOG) {
-    if (entry.id === 'none') continue;
-    const link = document.createElement('a');
-    link.className = 'core-dev__nav-link';
-    link.href = `?component=${entry.id}`;
-    link.textContent = entry.title;
-    link.dataset.component = entry.id;
-    if (entry.id === activeId) link.classList.add('is-active');
-    nav.appendChild(link);
-  }
-}
-
-function updateHeader(): void {
-  const entry = getCatalogEntry(activeId);
-  titleEl.textContent = entry?.title ?? 'Preview';
-  descEl.textContent = entry?.description ?? '';
-}
-
-async function showComponent(id: string): Promise<void> {
-  teardown?.();
-  teardown = undefined;
-  stage.replaceChildren();
-
-  const entry = getCatalogEntry(id);
-  if (!entry || entry.id === 'none' || !entry.tag) {
-    updateHeader();
-    return;
-  }
-
-  try {
-    const mod = await entry.load();
-    teardown = await mod.mount(stage);
-  } catch (err) {
-    console.error(err);
-    const msg = document.createElement('p');
-    msg.className = 'core-dev__error';
-    msg.textContent = `Failed to load "${id}": ${err instanceof Error ? err.message : String(err)}`;
-    stage.appendChild(msg);
-  }
-
-  updateHeader();
-}
-
-nav.addEventListener('click', (e) => {
-  const link = (e.target as HTMLElement).closest<HTMLAnchorElement>(
-    'a[data-component]',
-  );
-  if (!link) return;
-  e.preventDefault();
-  const nextId = link.dataset.component;
-  if (!nextId || nextId === activeId) return;
-
-  if (switchingRequiresReload(activeId, nextId)) {
-    navigateToComponent(nextId);
-    return;
-  }
-
-  activeId = nextId;
-  persistComponentId(nextId);
-  const url = new URL(location.href);
-  url.searchParams.set('component', nextId);
-  history.replaceState(null, '', url);
-  renderNav();
-  void showComponent(activeId);
-});
-
-renderNav();
-updateHeader();
-void showComponent(activeId);

package/previews/casino.ts

@@ -1,12 +0,0 @@
-import type { ComponentPreviewModule } from './types.js';
-
-export const mount: ComponentPreviewModule['mount'] = async (root) => {
-  await import('../src/components/casino-leaderboard/index.ts');
-
-  const el = document.createElement('casino-leaderboard');
-  root.appendChild(el);
-
-  return () => {
-    root.replaceChildren();
-  };
-};

package/previews/catalog.ts

@@ -1,94 +0,0 @@
-import type { ComponentCatalogEntry } from './types.js';
-
-export const COMPONENT_CATALOG: readonly ComponentCatalogEntry[] = [
-  {
-    id: 'none',
-    title: '— None —',
-    description: 'Empty preview stage.',
-    tag: null,
-    load: async () => ({
-      mount: async () => () => {},
-    }),
-  },
-  {
-    id: 'sf-leaderboard',
-    title: 'SF Leaderboard',
-    description:
-      'Config-driven leaderboard with presets, theme, and interactive demo data.',
-    tag: 'sf-leaderboard',
-    sharedTag: 'sf-leaderboard',
-    load: () => import('./sf-leaderboard.js'),
-  },
-  {
-    id: 'sf-live-feed',
-    title: 'Live Feed',
-    description: 'Activity stream with avatars and event types.',
-    tag: 'sf-live-feed',
-    load: () => import('./sf-live-feed.js'),
-  },
-  {
-    id: 'streaks',
-    title: 'Streaks',
-    description: 'Step tracker with click-to-complete interaction.',
-    tag: 'sf-streaks',
-    load: () => import('./streaks.js'),
-  },
-  {
-    id: 'leaderboard-v2',
-    title: 'Leaderboard v2 (legacy)',
-    description: 'Earlier leaderboard — same tag as SF Leaderboard; switch via reload.',
-    tag: 'sf-leaderboard',
-    sharedTag: 'sf-leaderboard',
-    load: () => import('./leaderboard-v2.js'),
-  },
-  {
-    id: 'leaderboard',
-    title: 'Leaderboard (v1)',
-    description: 'Original game leaderboard shell.',
-    tag: 'leaderboard-app',
-    load: () => import('./leaderboard-v1.js'),
-  },
-  {
-    id: 'casino',
-    title: 'Casino Leaderboard',
-    description: 'Casino-style leaderboard with tabs and prize pool.',
-    tag: 'casino-leaderboard',
-    load: () => import('./casino.js'),
-  },
-];
-
-const STORAGE_KEY = 'oddsmith-core-dev-component';
-
-export function getCatalogEntry(id: string): ComponentCatalogEntry | undefined {
-  return COMPONENT_CATALOG.find((e) => e.id === id);
-}
-
-export function readInitialComponentId(): string {
-  const fromQuery = new URLSearchParams(location.search).get('component');
-  if (fromQuery && getCatalogEntry(fromQuery)) return fromQuery;
-  const fromStorage = localStorage.getItem(STORAGE_KEY);
-  if (fromStorage && getCatalogEntry(fromStorage)) return fromStorage;
-  return 'sf-leaderboard';
-}
-
-export function persistComponentId(id: string): void {
-  localStorage.setItem(STORAGE_KEY, id);
-}
-
-export function navigateToComponent(id: string): void {
-  persistComponentId(id);
-  const url = new URL(location.href);
-  if (id === 'none') url.searchParams.delete('component');
-  else url.searchParams.set('component', id);
-  location.assign(url);
-}
-
-/** Tags that cannot coexist without reload (duplicate custom element names). */
-export function switchingRequiresReload(fromId: string, toId: string): boolean {
-  if (fromId === toId) return false;
-  const from = getCatalogEntry(fromId);
-  const to = getCatalogEntry(toId);
-  const fromTag = from?.sharedTag ?? from?.tag;
-  const toTag = to?.sharedTag ?? to?.tag;
-  return Boolean(fromTag && toTag && fromTag === toTag);
-}

package/previews/leaderboard-v1.ts

@@ -1,12 +0,0 @@
-import type { ComponentPreviewModule } from './types.js';
-
-export const mount: ComponentPreviewModule['mount'] = async (root) => {
-  await import('../src/components/leaderboard/index.ts');
-
-  const el = document.createElement('leaderboard-app');
-  root.appendChild(el);
-
-  return () => {
-    root.replaceChildren();
-  };
-};

package/previews/leaderboard-v2.ts

@@ -1,17 +0,0 @@
-import type { SfLeaderboard } from '../src/components/leaderboard-v2/components/sf-leaderboard.js';
-import { lbV2CurrentUser, lbV2Players, lbV2Stats } from './sample-data.js';
-import type { ComponentPreviewModule } from './types.js';
-
-export const mount: ComponentPreviewModule['mount'] = async (root) => {
-  await import('../src/components/leaderboard-v2/index.ts');
-
-  const el = document.createElement('sf-leaderboard') as SfLeaderboard;
-  el.players = lbV2Players;
-  el.stats = lbV2Stats;
-  el.currentUser = lbV2CurrentUser;
-  root.appendChild(el);
-
-  return () => {
-    root.replaceChildren();
-  };
-};

package/previews/sample-data.ts

@@ -1,101 +0,0 @@
-import type { LiveFeedActivity } from '../src/components/sf-live-feed/types.js';
-import type { StreaksStep } from '../src/components/streaks/types.js';
-import type {
-  LbBadge,
-  LbPlayer,
-  LbStats,
-} from '../src/components/leaderboard-v2/types.js';
-
-export const mockLiveFeedActivities: LiveFeedActivity[] = [
-  {
-    id: '1',
-    type: 'jackpot',
-    player: { username: 'CryptoKing', avatar: '' },
-    message: 'Hit the MEGA JACKPOT on Lightning Slots!',
-    amount: 125000,
-    timestamp: new Date(Date.now() - 30000),
-  },
-  {
-    id: '2',
-    type: 'win',
-    player: { username: 'AceHunter', avatar: '' },
-    message: "Won a massive pot in Texas Hold'em",
-    amount: 45000,
-    timestamp: new Date(Date.now() - 120000),
-  },
-  {
-    id: '3',
-    type: 'streak',
-    player: { username: 'LuckyDragon', avatar: '' },
-    message: 'Reached a 8-game winning streak!',
-    timestamp: new Date(Date.now() - 300000),
-  },
-];
-
-export const demoStreaksSteps: StreaksStep[] = [
-  { id: '1', label: 'G1', completed: true },
-  { id: '2', label: 'G2', completed: true },
-  { id: '3', label: 'G3', completed: true },
-  { id: '4', label: 'G4', completed: false },
-  { id: '5', label: 'G5', completed: false, isReward: true },
-];
-
-export const lbV2Badges: 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' },
-];
-
-export const lbV2Players: 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: [lbV2Badges[2], lbV2Badges[1]],
-    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: [lbV2Badges[1], lbV2Badges[0]],
-    trend: 'up',
-    rankChange: 2,
-  },
-];
-
-export const lbV2Stats: LbStats = {
-  totalPlayers: 12847,
-  yourRank: 156,
-  topScore: 2847500,
-};
-
-export const lbV2CurrentUser: 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: [lbV2Badges[0], lbV2Badges[1]],
-  trend: 'up',
-  rankChange: 12,
-};

package/previews/sf-leaderboard.ts

@@ -1,100 +0,0 @@
-import type { SfLeaderboard } from '../src/components/sf-leaderboard/sf-leaderboard.js';
-import {
-  createLeaderboardDemo,
-  DEFAULT_SF_LEADERBOARD_PRESET_ID,
-  getSfLeaderboardPreset,
-  SF_LEADERBOARD_PRESETS,
-  type LeaderboardDemoHandle,
-} from '../../shared/sf-leaderboard/index.js';
-import type { ComponentPreviewModule } from './types.js';
-
-function readInitialPresetId(): string {
-  const fromQuery = new URLSearchParams(location.search).get('preset');
-  if (fromQuery && getSfLeaderboardPreset(fromQuery)) return fromQuery;
-  return DEFAULT_SF_LEADERBOARD_PRESET_ID;
-}
-
-function buildPresetBar(
-  presetId: string,
-  onPresetChange: (id: string) => void,
-): HTMLElement {
-  const active = getSfLeaderboardPreset(presetId);
-  const bar = document.createElement('div');
-  bar.className = 'playground-preset-bar';
-
-  const group = document.createElement('div');
-  group.className = 'playground-preset-bar__group';
-
-  const label = document.createElement('label');
-  label.className = 'playground-preset-bar__label';
-  label.htmlFor = 'sf-leaderboard-preset';
-  label.textContent = 'Preset';
-
-  const select = document.createElement('select');
-  select.id = 'sf-leaderboard-preset';
-  select.className = 'playground-preset-bar__select';
-  for (const preset of SF_LEADERBOARD_PRESETS) {
-    const opt = document.createElement('option');
-    opt.value = preset.id;
-    opt.textContent = preset.label;
-    if (preset.id === presetId) opt.selected = true;
-    select.appendChild(opt);
-  }
-  select.addEventListener('change', () => onPresetChange(select.value));
-
-  const hint = document.createElement('p');
-  hint.className = 'playground-preset-bar__hint';
-  hint.textContent = active?.description ?? '';
-
-  group.append(label, select, hint);
-
-  const meta = document.createElement('div');
-  meta.className = 'playground-preset-bar__group playground-preset-bar__meta';
-  if (active) {
-    const themeBadge = document.createElement('span');
-    themeBadge.className = 'playground-preset-bar__badge';
-    themeBadge.textContent = `Theme: ${active.themeId}`;
-    const sectionsBadge = document.createElement('span');
-    sectionsBadge.className =
-      'playground-preset-bar__badge playground-preset-bar__badge--muted';
-    sectionsBadge.textContent = `${active.config.sections.length} sections`;
-    meta.append(themeBadge, sectionsBadge);
-  }
-
-  bar.append(group, meta);
-  return bar;
-}
-
-export const mount: ComponentPreviewModule['mount'] = async (root) => {
-  await import('../src/components/sf-leaderboard/index.ts');
-
-  let presetId = readInitialPresetId();
-  let demo: LeaderboardDemoHandle | undefined;
-
-  const wrap = document.createElement('div');
-  wrap.className = 'sf-leaderboard-dev';
-
-  const setPreset = (id: string) => {
-    presetId = id;
-    demo?.setPreset(id);
-    const url = new URL(location.href);
-    url.searchParams.set('preset', id);
-    history.replaceState(null, '', url);
-    const bar = wrap.querySelector('.playground-preset-bar');
-    if (bar) bar.replaceWith(buildPresetBar(presetId, setPreset));
-  };
-
-  wrap.appendChild(buildPresetBar(presetId, setPreset));
-  const el = document.createElement('sf-leaderboard') as SfLeaderboard;
-  wrap.appendChild(el);
-  root.appendChild(wrap);
-
-  demo = createLeaderboardDemo(el);
-  demo.setPreset(presetId);
-
-  return () => {
-    demo?.unbind();
-    demo = undefined;
-    root.replaceChildren();
-  };
-};

package/previews/sf-live-feed.ts

@@ -1,15 +0,0 @@
-import type { SfLiveFeed } from '../src/components/sf-live-feed/components/sf-live-feed/sf-live-feed.js';
-import { mockLiveFeedActivities } from './sample-data.js';
-import type { ComponentPreviewModule } from './types.js';
-
-export const mount: ComponentPreviewModule['mount'] = async (root) => {
-  await import('../src/components/sf-live-feed/index.ts');
-
-  const el = document.createElement('sf-live-feed') as SfLiveFeed;
-  el.activities = mockLiveFeedActivities;
-  root.appendChild(el);
-
-  return () => {
-    root.replaceChildren();
-  };
-};