@oddsmith/ui 0.0.0 → 1.0.1

package/src/components/sf-leaderboard/shared/components/table/table.ts

@@ -1,111 +0,0 @@
-import { LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { Component } from '../../../../../../lib/lit/component.js';
-import { scss } from '../../../../../../lib/lit/scss.js';
-import {
-  SF_LEADERBOARD_PLAYER_AVATAR,
-  SF_LEADERBOARD_RANK_BADGE,
-  SF_LEADERBOARD_TABLE,
-} from '../../constants/tags.js';
-import { SF_LEADERBOARD_PLAYER_SELECT } from '../../types/events.js';
-import { sfLeaderboardTheme } from '../../../theme/styles.js';
-import type { Player } from '../../types/data.js';
-import { formatCurrency } from '../../utils/utils.js';
-import '../rank-badge/rank-badge.js';
-import '../player-avatar/player-avatar.js';
-import type { TableHost } from './table.host.js';
-import renderTemplate from './table.html?lit-html';
-import styles from './table.scss?inline';
-
-@Component({ selector: SF_LEADERBOARD_TABLE })
-export class SfLeaderboardTable extends LitElement implements TableHost {
-  static styles = [sfLeaderboardTheme, scss(styles)];
-
-  @property({ type: Array }) players: Player[] = [];
-
-  private handlePlayerClick(player: Player) {
-    this.dispatchEvent(
-      new CustomEvent(SF_LEADERBOARD_PLAYER_SELECT, {
-        detail: player,
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  private createStreakCell(player: Player): HTMLElement {
-    const cell = document.createElement('div');
-    cell.className = 'col-streak stat-cell streak hide-mobile';
-    if (player.streak > 0) {
-      const icon = document.createElement('span');
-      icon.className = 'icon';
-      icon.textContent = '🔥';
-      cell.append(icon, document.createTextNode(String(player.streak)));
-    } else {
-      const dash = document.createElement('span');
-      dash.textContent = '-';
-      cell.append(dash);
-    }
-    return cell;
-  }
-
-  private createRow(player: Player, index: number): HTMLElement {
-    const isTop3 = player.rank <= 3;
-    const highWinRate = player.winRate >= 60;
-
-    const row = document.createElement('div');
-    row.className = `table-row ${isTop3 ? 'top-3' : ''}`;
-    row.style.animationDelay = `${index * 50}ms`;
-    row.addEventListener('click', () => this.handlePlayerClick(player));
-
-    const rankCol = document.createElement('div');
-    rankCol.className = 'col-rank';
-    const badge = document.createElement(SF_LEADERBOARD_RANK_BADGE);
-    badge.rank = player.rank;
-    badge.previousRank = player.previousRank || player.rank;
-    badge.size = 'sm';
-    rankCol.append(badge);
-
-    const playerCol = document.createElement('div');
-    playerCol.className = 'col-player player-cell';
-    const avatar = document.createElement(SF_LEADERBOARD_PLAYER_AVATAR);
-    avatar.username = player.username;
-    avatar.avatar = player.avatar || '';
-    avatar.size = 'sm';
-    avatar.isOnline = player.isOnline;
-    avatar.highlight = isTop3;
-    const details = document.createElement('div');
-    details.className = 'player-details';
-    const name = document.createElement('div');
-    name.className = `player-name ${isTop3 ? 'highlight' : ''}`;
-    name.textContent = player.username;
-    const level = document.createElement('span');
-    level.className = 'player-level';
-    level.textContent = `LVL ${player.level}`;
-    details.append(name, level);
-    playerCol.append(avatar, details);
-
-    const gamesCol = document.createElement('div');
-    gamesCol.className = 'col-games stat-cell hide-mobile';
-    gamesCol.innerHTML = `<span class="icon">🏆</span>${player.gamesPlayed.toLocaleString()}`;
-
-    const winRateCol = document.createElement('div');
-    winRateCol.className = `col-win-rate stat-cell win-rate ${highWinRate ? 'high' : ''} hide-mobile`;
-    winRateCol.innerHTML = `<span class="icon">🎯</span>${player.winRate}%`;
-
-    const winningsCol = document.createElement('div');
-    winningsCol.className = 'col-winnings winnings-cell';
-    winningsCol.innerHTML = `<span class="winnings ${isTop3 ? 'highlight' : ''}">${formatCurrency(player.totalWinnings)}</span><span class="chevron">→</span>`;
-
-    row.append(rankCol, playerCol, gamesCol, winRateCol, this.createStreakCell(player), winningsCol);
-    return row;
-  }
-
-  renderRows() {
-    return this.players.map((player, index) => this.createRow(player, index));
-  }
-
-  render() {
-    return renderTemplate(this);
-  }
-}

package/src/components/sf-leaderboard/shared/constants/defaults.ts

@@ -1,7 +0,0 @@
-import type { Category, TimeFrame } from '../types/data.js';
-
-export const DEFAULT_LB_TITLE = 'Leaderboard';
-export const DEFAULT_LB_SUBTITLE = 'Real-time rankings';
-
-export const DEFAULT_TIMEFRAME: TimeFrame = 'week';
-export const DEFAULT_CATEGORY: Category = 'all';

package/src/components/sf-leaderboard/shared/constants/filters.ts

@@ -1,16 +0,0 @@
-import type { Category, TimeFrame } from '../types/data.js';
-
-export const TIMEFRAME_OPTIONS: { label: string; value: TimeFrame }[] = [
-  { label: 'Today', value: 'today' },
-  { label: 'This Week', value: 'week' },
-  { label: 'This Month', value: 'month' },
-  { label: 'All Time', value: 'all' },
-];
-
-export const CATEGORY_OPTIONS: { label: string; value: Category }[] = [
-  { label: 'All Games', value: 'all' },
-  { label: 'Poker', value: 'poker' },
-  { label: 'Blackjack', value: 'blackjack' },
-  { label: 'Roulette', value: 'roulette' },
-  { label: 'Slots', value: 'slots' },
-];

package/src/components/sf-leaderboard/shared/constants/index.ts

@@ -1,5 +0,0 @@
-export * from './tags.js';
-export * from './defaults.js';
-export * from './player-stats.js';
-export * from './filters.js';
-export * from './stats-overview.js';

package/src/components/sf-leaderboard/shared/constants/player-stats.ts

@@ -1,3 +0,0 @@
-export const DEFAULT_PLAYER_STATS_TITLE = 'Your Position';
-export const DEFAULT_PLAYER_STATS_MESSAGE = "You're in the top 5% of players!";
-export const DEFAULT_PLAYER_STATS_RANK = 42;

package/src/components/sf-leaderboard/shared/constants/stats-overview.ts

@@ -1,38 +0,0 @@
-export interface SfLeaderboardOverviewStat {
-  label: string;
-  value: string;
-  icon: string;
-  trendValue: number;
-  trendPositive: boolean;
-}
-
-export const DEFAULT_OVERVIEW_STATS: SfLeaderboardOverviewStat[] = [
-  {
-    label: 'Total Players',
-    value: '12,847',
-    icon: '👥',
-    trendValue: 12.5,
-    trendPositive: true,
-  },
-  {
-    label: 'Total Wagered',
-    value: '$84.2M',
-    icon: '💰',
-    trendValue: 8.3,
-    trendPositive: true,
-  },
-  {
-    label: 'Active Games',
-    value: '1,247',
-    icon: '🎮',
-    trendValue: 3.2,
-    trendPositive: true,
-  },
-  {
-    label: 'Biggest Win',
-    value: '$125K',
-    icon: '⚡',
-    trendValue: 45.8,
-    trendPositive: true,
-  },
-];

package/src/components/sf-leaderboard/shared/constants/tags.ts

@@ -1,16 +0,0 @@
-/** Custom element tag names for the sf-leaderboard package. */
-export const SF_LEADERBOARD_TAG = 'sf-leaderboard';
-export const SF_LEADERBOARD_STAT_CARD = 'sf-leaderboard-stat-card';
-export const SF_LEADERBOARD_FILTERS = 'sf-leaderboard-filters';
-export const SF_LEADERBOARD_TABLE = 'sf-leaderboard-table';
-export const SF_LEADERBOARD_PODIUM = 'sf-leaderboard-podium';
-export const SF_LEADERBOARD_ACTIVITY_FEED = 'sf-leaderboard-activity-feed';
-export const SF_LEADERBOARD_RANK_BADGE = 'sf-leaderboard-rank-badge';
-export const SF_LEADERBOARD_PLAYER_AVATAR = 'sf-leaderboard-player-avatar';
-export const SF_LEADERBOARD_PLAYER_STATS_CARD =
-  'sf-leaderboard-player-stats-card';
-export const SF_LEADERBOARD_HEADER_SECTION = 'sf-leaderboard-header-section';
-export const SF_LEADERBOARD_STATS_SECTION = 'sf-leaderboard-stats-section';
-export const SF_LEADERBOARD_RANKING_SECTION = 'sf-leaderboard-ranking-section';
-export const SF_LEADERBOARD_TABLE_SECTION = 'sf-leaderboard-table-section';
-export const SF_LEADERBOARD_FOOTER_SECTION = 'sf-leaderboard-footer-section';

package/src/components/sf-leaderboard/shared/styles/_section.scss

@@ -1,35 +0,0 @@
-.section {
-  margin-bottom: clamp(1.5rem, 5vw, 3rem);
-  min-width: 0;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.section-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin: 0;
-}
-
-.elite-badge {
-  font-size: 0.65rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: var(--radius-sm);
-  background: var(--medal-gold-bg);
-  border: 1px solid var(--medal-gold-border);
-  color: var(--gold);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 639px) {
-  .section-title {
-    font-size: 1rem;
-  }
-}

package/src/components/sf-leaderboard/shared/types/data.ts

@@ -1,29 +0,0 @@
-export interface Player {
-  id: string;
-  username: string;
-  avatar?: string;
-  rank: number;
-  previousRank?: number;
-  totalWinnings: number;
-  winRate: number;
-  gamesPlayed: number;
-  streak: number;
-  level: number;
-  badges: string[];
-  isOnline?: boolean;
-}
-
-export interface Activity {
-  id: string;
-  type: 'win' | 'jackpot' | 'streak' | 'achievement';
-  player: {
-    username: string;
-    avatar?: string;
-  };
-  message: string;
-  amount?: number;
-  timestamp: Date;
-}
-
-export type TimeFrame = 'today' | 'week' | 'month' | 'all';
-export type Category = 'all' | 'poker' | 'blackjack' | 'roulette' | 'slots';

package/src/components/sf-leaderboard/shared/types/events.ts

@@ -1,30 +0,0 @@
-import type { Category, Player, TimeFrame } from './data.js';
-
-export const SF_LEADERBOARD_TIMEFRAME_CHANGE = 'timeframe-change';
-export const SF_LEADERBOARD_CATEGORY_CHANGE = 'category-change';
-export const SF_LEADERBOARD_SEARCH_CHANGE = 'search-change';
-export const SF_LEADERBOARD_PLAYER_SELECT = 'player-select';
-export const SF_LEADERBOARD_REFRESH = 'refresh';
-export const SF_LEADERBOARD_VIEW_STATS = 'view-stats';
-
-export interface SfLeaderboardRefreshDetail {
-  /** Optional hook for clients that batch refresh with timeframe/category. */
-  timeframe: TimeFrame;
-  category: Category;
-}
-
-export interface SfLeaderboardTimeframeChangeDetail {
-  timeframe: TimeFrame;
-}
-
-export interface SfLeaderboardCategoryChangeDetail {
-  category: Category;
-}
-
-export interface SfLeaderboardSearchChangeDetail {
-  query: string;
-}
-
-export interface SfLeaderboardPlayerSelectDetail {
-  player: Player;
-}

package/src/components/sf-leaderboard/shared/types/player-stats.ts

@@ -1,3 +0,0 @@
-export type PlayerStatsPlacement = 'left' | 'right';
-
-export type PlayerStatsRegion = 'top-champions' | 'rankings';

package/src/components/sf-leaderboard/shared/types/sections.ts

@@ -1,100 +0,0 @@
-import type { Category, Player, TimeFrame } from './data.js';
-
-/** Top bar: title, optional subtitle, live badge, back control. Omit `header` to hide. */
-export interface SfLeaderboardHeaderSection {
-  title: string;
-  subtitle?: string;
-  icon?: string;
-  showLive?: boolean;
-  /** When set, renders the back button (`label` defaults to "Back"). */
-  backButton?: {
-    label?: string;
-  };
-  isRefreshing?: boolean;
-}
-
-/** One overview tile (`sf-leaderboard-stat-card`). */
-export interface SfLeaderboardStatItem {
-  label: string;
-  value: string;
-  icon: string;
-  trendValue?: number;
-  trendPositive?: boolean;
-}
-
-/**
- * Overview stat cards (2×2 grid, 4-across on wide screens).
- * Omit `stats` to hide the whole section.
- */
-export interface SfLeaderboardStatsSection {
-  title?: string;
-  items: SfLeaderboardStatItem[];
-}
-
-/** Podium block inside `ranking` (left column). Omit to hide podium. */
-export interface SfLeaderboardPodiumSection {
-  title?: string;
-  badge?: string;
-  players: Player[];
-}
-
-/** Player stats block inside `ranking` (right column). Omit to hide. */
-export interface SfLeaderboardPlayerStatsSection {
-  title?: string;
-  rank: number;
-  percentile?: number;
-  message?: string;
-  username?: string;
-  earnings?: string;
-  winRate?: number;
-  gamesPlayed?: number;
-  winStreak?: number;
-  level?: number;
-}
-
-/**
- * Ranking row: podium (left) + player stats (right).
- * Omit `ranking` entirely to hide the whole section.
- */
-export interface SfLeaderboardRankingSection {
-  podium?: SfLeaderboardPodiumSection;
-  playerStats?: SfLeaderboardPlayerStatsSection;
-}
-
-/** Filters bar for the table. Omit on `table` to hide filters UI. */
-export interface SfLeaderboardTableFiltersSection {
-  searchQuery?: string;
-  timeframe?: TimeFrame;
-  category?: Category;
-}
-
-/**
- * Rankings table (bottom). Omit `table` to hide.
- */
-export interface SfLeaderboardTableSection {
-  title?: string;
-  subtitle?: string;
-  players: Player[];
-  filters?: SfLeaderboardTableFiltersSection;
-  footer?: {
-    text?: string;
-  };
-}
-
-/** Page footer (below table). Omit `footer` to hide. */
-export interface SfLeaderboardFooterSection {
-  text: string;
-}
-
-/**
- * Layout config for `<sf-leaderboard>`.
- * Only keys you pass are rendered, in order:
- * header → stats → ranking → table → footer.
- */
-export interface SfLeaderboardLayout {
-  header?: SfLeaderboardHeaderSection;
-  stats?: SfLeaderboardStatsSection;
-  ranking?: SfLeaderboardRankingSection;
-  table?: SfLeaderboardTableSection;
-  footer?: SfLeaderboardFooterSection;
-}

package/src/components/sf-leaderboard/shared/utils/utils.ts

@@ -1,17 +0,0 @@
-export function formatCurrency(amount: number): string {
-  if (amount >= 1000000) return `$${(amount / 1000000).toFixed(2)}M`;
-  if (amount >= 1000) return `$${(amount / 1000).toFixed(1)}K`;
-  return `$${amount.toFixed(2)}`;
-}
-
-export function formatTime(date: Date): string {
-  const now = new Date();
-  const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
-  if (diff < 60) return `${diff}s ago`;
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-  return `${Math.floor(diff / 3600)}h ago`;
-}
-
-export function getInitials(name: string): string {
-  return name.slice(0, 2).toUpperCase();
-}

package/src/components/sf-leaderboard/theme/THEMING.md

@@ -1,54 +0,0 @@
-# Theming
-
-## Folder layout
-
-```
-src/
-  components/sf-leaderboard/   # Lit UI (podium, table, demo, package index)
-  old-components/              # Legacy packages (streaks, v1/v2 leaderboard, …)
-  theme/
-    themes/*.theme.json        # Brand JSON files
-    load-theme.ts              # fetch + parse JSON
-    inject-theme.ts            # write CSS vars to DOM (:root)
-    theme-to-css-vars.ts       # theme object → --color-* map
-    scss/_colors.scss          # map-get / color.base(1) helpers
-    scss/shared.scss           # semantic aliases + .card rules
-  sf-leaderboard/              # package API: data, constants, demo, types
-```
-
-## Flow (required order)
-
-1. **Load** — `const theme = await loadThemeFromJson('/src/theme/themes/fallback.json')`
-2. **Inject** — `injectTheme(theme)` → sets variables on `document.documentElement`
-3. **Style** — SCSS uses `@use 'colors' as c` and `color.base(1)` → `var(--color-base-1, fallback)`
-
-Variables inherit into every component shadow root automatically.
-
-## SCSS
-
-```scss
-@use 'colors' as color;
-
-.panel {
-  background: color.base(2);
-  color: color.primary(1);
-  border-color: color.place-first-icon();
-}
-```
-
-Vite `loadPaths` includes `src/theme/scss` so `@use 'colors'` resolves to `_colors.scss`.
-
-## Client
-
-```ts
-import {
-  loadThemeFromJson,
-  injectTheme,
-  parseThemeJson,
-} from '@skinforge/sf-leaderboard';
-
-const theme = await loadThemeFromJson('/assets/themes/brand.theme.json');
-injectTheme(theme);
-```
-
-Demo loads `themes/fallback.json` on mount (see `components/sf-leaderboard/demo/main.ts`).

package/src/components/sf-leaderboard/theme/context.ts

@@ -1,16 +0,0 @@
-import { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';
-import type { SfLeaderboardTheme } from './types.js';
-
-let activeTheme: SfLeaderboardTheme = DEFAULT_SF_LEADERBOARD_THEME;
-
-export function setActiveTheme(theme: SfLeaderboardTheme): void {
-  activeTheme = theme;
-}
-
-export function getActiveTheme(): SfLeaderboardTheme {
-  return activeTheme;
-}
-
-export function getThemeLabel(key: string, fallback: string): string {
-  return activeTheme.labels?.[key] ?? fallback;
-}

package/src/components/sf-leaderboard/theme/default-theme.ts

@@ -1,4 +0,0 @@
-import defaultThemeJson from '../../../../../../shared/sf-leaderboard/themes/fallback.json';
-import type { SfLeaderboardTheme } from './types.js';
-
-export const DEFAULT_SF_LEADERBOARD_THEME = defaultThemeJson as SfLeaderboardTheme;

package/src/components/sf-leaderboard/theme/hex-to-rgb.ts

@@ -1,25 +0,0 @@
-/** `#RRGGBB` or `#RGB` → `r, g, b` for use in `rgba(var(--x-rgb), α)`. */
-export function hexToRgbChannels(hex: string): string | null {
-  const normalized = hex.trim().replace(/^#/, '');
-  if (!/^[0-9a-fA-F]{3,8}$/.test(normalized)) {
-    return null;
-  }
-
-  let r: number;
-  let g: number;
-  let b: number;
-
-  if (normalized.length === 3) {
-    r = parseInt(normalized[0] + normalized[0], 16);
-    g = parseInt(normalized[1] + normalized[1], 16);
-    b = parseInt(normalized[2] + normalized[2], 16);
-  } else if (normalized.length === 6) {
-    r = parseInt(normalized.slice(0, 2), 16);
-    g = parseInt(normalized.slice(2, 4), 16);
-    b = parseInt(normalized.slice(4, 6), 16);
-  } else {
-    return null;
-  }
-
-  return `${r}, ${g}, ${b}`;
-}

package/src/components/sf-leaderboard/theme/index.ts

@@ -1,18 +0,0 @@
-export type {
-  SfLeaderboardTheme,
-  SfLeaderboardPaletteTheme,
-  SfLeaderboardPlacementTheme,
-  SfLeaderboardTableColumnTheme,
-  SfLeaderboardTypographyTheme,
-  TableColumnId,
-  ColorBaseStep,
-  ColorPrimaryStep,
-} from './types.js';
-
-export { sfLeaderboardTheme } from './styles.js';
-export { loadThemeFromJson, parseThemeJson } from './load-theme.js';
-export { injectTheme, clearTheme } from './inject-theme.js';
-export { getActiveTheme, getThemeLabel, setActiveTheme } from './context.js';
-export { mergeSfLeaderboardTheme } from './merge-theme.js';
-export { themeToCssVars } from './theme-to-css-vars.js';
-export { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';

package/src/components/sf-leaderboard/theme/inject-theme.ts

@@ -1,39 +0,0 @@
-import { setActiveTheme } from './context.js';
-import { themeToCssVars } from './theme-to-css-vars.js';
-import type { SfLeaderboardTheme } from './types.js';
-
-const THEME_ATTR = 'data-sf-theme';
-
-/**
- * Injects theme CSS variables into the DOM so every component shadow root inherits them.
- * Default target is `document.documentElement` (:root).
- */
-export function injectTheme(
-  theme: SfLeaderboardTheme,
-  root: HTMLElement = document.documentElement,
-): void {
-  const vars = themeToCssVars(theme);
-  root.setAttribute(THEME_ATTR, theme.id);
-  setActiveTheme(theme);
-
-  for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value);
-  }
-}
-
-/** Removes theme variables injected on a DOM node. */
-export function clearTheme(
-  root: HTMLElement = document.documentElement,
-): void {
-  root.removeAttribute(THEME_ATTR);
-  const toRemove: string[] = [];
-  for (let i = 0; i < root.style.length; i++) {
-    const name = root.style.item(i);
-    if (name.startsWith('--color-') || name.startsWith('--place-') || name.startsWith('--table-col-') || name.startsWith('--font-')) {
-      toRemove.push(name);
-    }
-  }
-  for (const name of toRemove) {
-    root.style.removeProperty(name);
-  }
-}

package/src/components/sf-leaderboard/theme/load-theme.ts

@@ -1,26 +0,0 @@
-import { mergeSfLeaderboardTheme } from './merge-theme.js';
-import { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';
-import type { SfLeaderboardTheme } from './types.js';
-
-/** Load theme JSON from a URL (dev server, CDN, CMS). */
-export async function loadThemeFromJson(url: string): Promise<SfLeaderboardTheme> {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to load theme: ${response.status} ${url}`);
-  }
-  const json: unknown = await response.json();
-  return parseThemeJson(json);
-}
-
-/** Parse theme JSON already fetched or bundled. Supports `{ theme: {…} }` or flat root. */
-export function parseThemeJson(json: unknown): SfLeaderboardTheme {
-  if (!json || typeof json !== 'object') {
-    throw new Error('Invalid theme JSON: expected an object');
-  }
-  const root = json as Record<string, unknown>;
-  const payload = (root.theme ?? root) as Partial<SfLeaderboardTheme>;
-  if (!payload.palette || !payload.placement || !payload.typography) {
-    throw new Error('Invalid theme JSON: missing palette, placement, or typography');
-  }
-  return mergeSfLeaderboardTheme(DEFAULT_SF_LEADERBOARD_THEME, payload);
-}

package/src/components/sf-leaderboard/theme/merge-theme.ts

@@ -1,59 +0,0 @@
-import type { SfLeaderboardTheme } from './types.js';
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-/** Deep-merge client theme onto defaults (client wins). */
-export function mergeSfLeaderboardTheme(
-  base: SfLeaderboardTheme,
-  overrides?: Partial<SfLeaderboardTheme> | null,
-): SfLeaderboardTheme {
-  if (!overrides) {
-    return base;
-  }
-
-  const result = structuredClone(base);
-
-  if (overrides.id) result.id = overrides.id;
-  if (overrides.name) result.name = overrides.name;
-  if (overrides.labels) {
-    result.labels = { ...result.labels, ...overrides.labels };
-  }
-
-  if (overrides.palette) {
-    result.palette = {
-      ...result.palette,
-      ...overrides.palette,
-      base: { ...result.palette.base, ...overrides.palette.base },
-      primary: { ...result.palette.primary, ...overrides.palette.primary },
-      semantic: { ...result.palette.semantic, ...overrides.palette.semantic },
-      surface: { ...result.palette.surface, ...overrides.palette.surface },
-    };
-  }
-
-  if (overrides.typography) {
-    result.typography = { ...result.typography, ...overrides.typography };
-  }
-
-  if (overrides.placement) {
-    result.placement = {
-      first: { ...result.placement.first, ...overrides.placement.first },
-      second: { ...result.placement.second, ...overrides.placement.second },
-      third: { ...result.placement.third, ...overrides.placement.third },
-    };
-  }
-
-  if (overrides.table?.columns) {
-    for (const [key, value] of Object.entries(overrides.table.columns)) {
-      if (!isPlainObject(value)) continue;
-      const existing = result.table.columns[key as keyof typeof result.table.columns];
-      result.table.columns[key as keyof typeof result.table.columns] = {
-        ...existing,
-        ...value,
-      } as (typeof result.table.columns)[keyof typeof result.table.columns];
-    }
-  }
-
-  return result;
-}