website refactor

apps/website/components/TeamRankingsFilter.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Search, Star, Trophy, Percent, Hash, LucideIcon } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';

apps/website/components/achievements/AchievementCard.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface AchievementCardProps {
   title: string;

apps/website/components/achievements/MilestoneItem.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface MilestoneItemProps {
   label: string;

apps/website/components/actions/ActionFiltersBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Select } from '@/ui/Select';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Select } from '@/ui/Select';
+import { Text } from '@/ui/Text';
+import { useState } from 'react';
 
 export function ActionFiltersBar() {
   const [filter, setFilter] = useState('all');

apps/website/components/actions/ActionsHeader.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatusIndicator } from '@/ui/StatusIndicator';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
-import { StatusIndicator } from '@/ui/StatusIndicator';
 
 interface ActionsHeaderProps {
   title: string;

apps/website/components/admin/AdminDangerZonePanel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminDangerZonePanelProps {
   title: string;

apps/website/components/admin/AdminDataTable.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface AdminDataTableProps {
   children: React.ReactNode;

apps/website/components/admin/AdminEmptyState.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
+import React from 'react';
 
 interface AdminEmptyStateProps {
   icon: LucideIcon;

apps/website/components/admin/AdminHeaderPanel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
 import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminHeaderPanelProps {
   title: string;

apps/website/components/admin/AdminSectionHeader.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AdminSectionHeaderProps {
   title: string;

apps/website/components/admin/AdminStatsPanel.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import React from 'react';
-import { Grid } from '@/ui/Grid';
+import { Grid } from '@/ui/primitives/Grid';
 import { StatCard } from '@/ui/StatCard';
 import { LucideIcon } from 'lucide-react';
 

apps/website/components/admin/AdminToolbar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface AdminToolbarProps {
   children: React.ReactNode;

apps/website/components/admin/AdminUsersTable.tsx

@@ -1,23 +1,22 @@
 'use client';
 
-import React from 'react';
-import { 
-  Table, 
-  TableHead, 
-  TableBody, 
-  TableRow, 
-  TableHeader, 
-  TableCell 
-} from '@/ui/Table';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { MoreVertical, Shield, Trash2 } from 'lucide-react';
 import { UserStatusTag } from './UserStatusTag';
-import { DateDisplay } from '@/lib/display-objects/DateDisplay';
-import { Shield, Trash2, MoreVertical } from 'lucide-react';
-import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 
 interface AdminUsersTableProps {
   users: AdminUsersViewData['users'];

apps/website/components/admin/BulkActionBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { motion, AnimatePresence } from 'framer-motion';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
 
 interface BulkActionBarProps {
   selectedCount: number;

apps/website/components/admin/UserFilters.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Filter, Search } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
 import { Select } from '@/ui/Select';
+import { Text } from '@/ui/Text';
+import { Filter, Search } from 'lucide-react';
 import { AdminToolbar } from './AdminToolbar';
 
 interface UserFiltersProps {

apps/website/components/admin/UserStatsSummary.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Users, Shield } from 'lucide-react';
-import { Grid } from '@/ui/Grid';
 import { MetricCard } from '@/ui/MetricCard';
+import { Grid } from '@/ui/primitives/Grid';
+import { Shield, Users } from 'lucide-react';
 
 interface UserStatsSummaryProps {
   total: number;

apps/website/components/auth/AuthCard.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface AuthCardProps {
   children: React.ReactNode;

apps/website/components/auth/AuthFooterLinks.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthFooterLinksProps {
   children: React.ReactNode;

apps/website/components/auth/AuthForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthFormProps {
   children: React.ReactNode;

apps/website/components/auth/AuthProviderButtons.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Grid } from '@/ui/primitives/Grid';
 import React from 'react';
-import { Grid } from '@/ui/Grid';
 
 interface AuthProviderButtonsProps {
   children: React.ReactNode;

apps/website/components/auth/AuthShell.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface AuthShellProps {
   children: React.ReactNode;

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { Car, Trophy, Users } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { motion } from 'framer-motion';
+import { Car, Trophy, Users } from 'lucide-react';
 
 const USER_ROLES = [
   {

apps/website/components/dashboard/ActivityFeedPanel.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { ActivityFeed } from '../feed/ActivityFeed';
 
 interface FeedItem {

apps/website/components/dashboard/DashboardControlBar.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface DashboardControlBarProps {
   title: string;

apps/website/components/dashboard/DashboardKpiRow.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Text } from '@/ui/Text';
 import { Grid } from '@/ui/Grid';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 
 interface KpiItem {
   label: string;

apps/website/components/dashboard/DashboardRail.tsx

@@ -1,5 +1,5 @@
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface DashboardRailProps {
   children: React.ReactNode;

apps/website/components/dashboard/DashboardShell.tsx

@@ -1,5 +1,5 @@
+import { Stack } from '@/ui/primitives/Stack';
 import React from 'react';
-import { Stack } from '@/ui/Stack';
 
 interface DashboardShellProps {
   children: React.ReactNode;

apps/website/components/dashboard/TelemetryPanel.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import React from 'react';
 
 interface TelemetryPanelProps {
   title: string;

apps/website/components/dev/DebugModeToggle.tsx

@@ -2,13 +2,13 @@ import type { ApiRequestLogger } from '@/lib/infrastructure/ApiRequestLogger';
 import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
 import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
-import { Bug, Shield, X } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { Grid } from '@/ui/Grid';
+import { Bug, Shield, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
 
 // Extend Window interface for debug globals
 declare global {

apps/website/components/dev/DevToolbar.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
-import { Wrench, ChevronDown, ChevronUp, X, MessageSquare, Activity, AlertTriangle } from 'lucide-react';
+import { useNotifications } from '@/components/notifications/NotificationProvider';
+import type { NotificationVariant } from '@/components/notifications/notificationTypes';
+import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
 import { ApiConnectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
-import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
-import { useNotifications } from '@/components/notifications/NotificationProvider';
-import type { NotificationVariant } from '@/components/notifications/notificationTypes';
+import { Activity, AlertTriangle, ChevronDown, ChevronUp, MessageSquare, Wrench, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 // Import our new components
 import { Accordion } from '@/ui/Accordion';
-import { NotificationTypeSection } from './sections/NotificationTypeSection';
-import { UrgencySection } from './sections/UrgencySection';
-import { NotificationSendSection } from './sections/NotificationSendSection';
-import { APIStatusSection } from './sections/APIStatusSection';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
-import { IconButton } from '@/ui/IconButton';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
+import { APIStatusSection } from './sections/APIStatusSection';
+import { NotificationSendSection } from './sections/NotificationSendSection';
+import { NotificationTypeSection } from './sections/NotificationTypeSection';
+import { UrgencySection } from './sections/UrgencySection';
 
 // Import types
 import type { DemoNotificationType, DemoUrgency } from './types';

apps/website/components/dev/sections/APIStatusSection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
 import { Button } from '@/ui/Button';
-import { Grid } from '@/ui/Grid';
-import { StatusIndicator, StatRow, Badge } from '@/ui/StatusIndicator';
+import { Icon } from '@/ui/Icon';
+import { Badge, StatRow, StatusIndicator } from '@/ui/StatusIndicator';
+import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Activity, RefreshCw, Terminal, Wifi } from 'lucide-react';
 
 interface APIStatusSectionProps {
   apiStatus: string;

apps/website/components/dev/sections/NotificationSendSection.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { Bell, Loader2 } from 'lucide-react';
 import type { DemoNotificationType, DemoUrgency } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
 
 interface NotificationSendSectionProps {
   selectedType: DemoNotificationType;

apps/website/components/dev/sections/NotificationTypeSection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { MessageSquare, AlertTriangle, Shield, Vote, TrendingUp, Award, LucideIcon } from 'lucide-react';
-import type { DemoNotificationType } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Grid } from '@/ui/Grid';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertTriangle, Award, LucideIcon, MessageSquare, Shield, TrendingUp, Vote } from 'lucide-react';
+import type { DemoNotificationType } from '../types';
 
 interface NotificationOption {
   type: DemoNotificationType;

apps/website/components/dev/sections/ReplaySection.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Play, Copy, Trash2, Download, Clock } from 'lucide-react';
 import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Box, Clock, Copy, Download, Play, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface ReplayEntry {
   id: string;

apps/website/components/dev/sections/UrgencySection.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
-import type { DemoUrgency } from '../types';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Grid } from '@/ui/Grid';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertCircle, Bell, BellRing, LucideIcon } from 'lucide-react';
+import type { DemoUrgency } from '../types';
 
 interface UrgencyOption {
   urgency: DemoUrgency;

apps/website/components/drivers/ActiveDriverCard.tsx

@@ -1,18 +1,7 @@
-import React from 'react';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
 
-interface ActiveDriverCardProps {
-  name: string;
-  avatarUrl?: string;
-  categoryLabel?: string;
-  categoryColor?: string;
-  skillLevelLabel?: string;
-  skillLevelColor?: string;
-  onClick: () => void;
-}
 
 export function ActiveDriverCard({
   name,

apps/website/components/drivers/CareerStats.tsx

@@ -1,10 +1,10 @@
 
 
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/primitives/Grid';
 import { StatGridItem } from '@/ui/StatGridItem';
 import { TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/CreateDriverForm.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState, FormEvent } from 'react';
-import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
+import { InfoBox } from '@/ui/InfoBox';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
-import { InfoBox } from '@/ui/InfoBox';
 import { AlertCircle } from 'lucide-react';
+import React, { FormEvent, useState } from 'react';
 
 interface FormErrors {
   name?: string;

apps/website/components/drivers/DriverCard.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { Card } from '@/ui/Card';
-import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { DriverIdentity } from '@/components/drivers/DriverIdentity';
-import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Stack } from '@/ui/Stack';
 import { DriverStats } from '@/components/drivers/DriverStats';
+import { RankBadge } from '@/components/leaderboards/RankBadge';
 import { routes } from '@/lib/routing/RouteConfig';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/primitives/Stack';
 
 export interface DriverCardProps {
   id: string;

apps/website/components/drivers/DriverEntryRow.tsx

@@ -1,12 +1,12 @@
 
 
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Zap } from 'lucide-react';
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { Zap } from 'lucide-react';
 
 interface DriverEntryRowProps {
   index: number;

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Image } from '@/ui/Image';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface DriverHeaderPanelProps {
   name: string;

apps/website/components/drivers/DriverIdentity.tsx

@@ -1,9 +1,9 @@
-import { Link } from '@/ui/Link';
-import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
 import { Image } from '@/ui/Image';
+import { Link } from '@/ui/Link';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
 
 export interface DriverIdentityProps {
   driver: {

apps/website/components/drivers/DriverPerformanceOverview.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 
 interface DriverPerformanceOverviewProps {
   stats: {

apps/website/components/drivers/DriverProfile.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { StatCard } from '@/ui/StatCard';
-import { ProfileHeader } from '@/components/drivers/ProfileHeader';
-import { ProfileStats } from './ProfileStats';
 import { CareerHighlights } from '@/components/drivers/CareerHighlights';
 import { DriverRankings } from '@/components/drivers/DriverRankings';
 import { PerformanceMetrics } from '@/components/drivers/PerformanceMetrics';
+import { ProfileHeader } from '@/components/drivers/ProfileHeader';
 import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
+import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatCard } from '@/ui/StatCard';
+import { Text } from '@/ui/Text';
+import { ProfileStats } from './ProfileStats';
 
 interface DriverProfileProps {
   driver: DriverViewModel;

apps/website/components/drivers/DriverProfileHeader.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Button } from '@/ui/Button';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
-import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Check, Globe, Trophy, UserPlus } from 'lucide-react';
 import { SafetyRatingBadge } from './SafetyRatingBadge';
 
 interface DriverProfileHeaderProps {

apps/website/components/drivers/DriverProfileTabs.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { LayoutDashboard, BarChart3, ShieldCheck } from 'lucide-react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
+import { BarChart3, LayoutDashboard, ShieldCheck } from 'lucide-react';
 
 export type ProfileTab = 'overview' | 'stats' | 'ratings';
 

apps/website/components/drivers/DriverRacingProfile.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
-import { MapPin, Car, Clock, Users2, MailCheck } from 'lucide-react';
+import { Stack } from '@/ui/primitives/Stack';
+import { Car, Clock, MailCheck, MapPin, Users2 } from 'lucide-react';
 
 interface DriverRacingProfileProps {
   racingStyle?: string | null;

apps/website/components/drivers/DriverRatingPill.tsx

@@ -1,7 +1,7 @@
 
 
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Star, Trophy } from 'lucide-react';
 

apps/website/components/drivers/DriverSearchBar.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Search } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
+import { Search } from 'lucide-react';
 
 interface DriverSearchBarProps {
   query: string;

apps/website/components/drivers/DriverStats.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface DriverStatsProps {

apps/website/components/drivers/DriverStatsPanel.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React from 'react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 
 interface StatItem {
   label: string;

apps/website/components/drivers/DriverSummaryPill.tsx

@@ -1,11 +1,11 @@
 
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface DriverSummaryPillProps {
   name: string;

apps/website/components/drivers/DriverTable.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React from 'react';
-import { TrendingUp } from 'lucide-react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { TrendingUp } from 'lucide-react';
+import React from 'react';
 
 interface DriverTableProps {
   children: React.ReactNode;

apps/website/components/drivers/DriverTableRow.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface DriverTableRowProps {
   rank: number;

apps/website/components/drivers/DriversDirectoryHeader.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import React from 'react';
-import { Users, Trophy } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Trophy, Users } from 'lucide-react';
 
 interface DriverStat {
   label: string;

apps/website/components/drivers/DriversSearch.tsx

@@ -1,8 +1,8 @@
 
 
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
+import { Box } from '@/ui/primitives/Box';
 import { Search } from 'lucide-react';
 
 interface DriversSearchProps {

apps/website/components/drivers/FeaturedDriverCard.tsx

@@ -1,13 +1,13 @@
 
 
+import { MedalBadge } from '@/components/leaderboards/MedalBadge';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { MedalBadge } from '@/components/leaderboards/MedalBadge';
 import { MiniStat } from '@/ui/MiniStat';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Flag, Shield, Star, TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/LiveryCard.tsx

@@ -1,11 +1,11 @@
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Car, Download, Trash2, Edit } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Car, Download, Edit, Trash2 } from 'lucide-react';
 
 interface DriverLiveryItem {
   id: string;

apps/website/components/drivers/PerformanceMetrics.tsx

@@ -1,7 +1,7 @@
 
 
-import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 
 interface PerformanceMetricsProps {

apps/website/components/drivers/PerformanceOverview.tsx

@@ -1,13 +1,13 @@
 
 
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { CircularProgress } from '@/ui/CircularProgress';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
 import { Heading } from '@/ui/Heading';
 import { HorizontalBarChart } from '@/ui/HorizontalBarChart';
 import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { GridItem } from '@/ui/primitives/GridItem';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { Activity, BarChart3, Target, TrendingUp } from 'lucide-react';
 

apps/website/components/drivers/ProfileHeader.tsx

@@ -1,14 +1,14 @@
 
 
+import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { CountryFlag } from '@/ui/CountryFlag';
-import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface ProfileHeaderProps {

apps/website/components/drivers/ProfileHero.tsx

@@ -2,12 +2,12 @@
 
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/primitives/Stack';
+import { Surface } from '@/ui/primitives/Surface';
 import { Text } from '@/ui/Text';
 import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';
 

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Card } from '@/ui/Card';
-import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
 import { EmptyState } from '@/components/shared/state/EmptyState';
+import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import { Pagination } from '@/ui/Pagination';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 import { Trophy } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface RaceHistoryProps {
   driverId: string;

apps/website/components/drivers/ProfileSettings.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useState } from 'react';
 import type { DriverProfileDriverSummaryViewModel } from '@/lib/view-models/DriverProfileViewModel';
-import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
-import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/Stack';
-import { Heading } from '@/ui/Heading';
-import { Select } from '@/ui/Select';
-import { Toggle } from '@/ui/Toggle';
-import { TextArea } from '@/ui/TextArea';
+import { Card } from '@/ui/Card';
 import { Checkbox } from '@/ui/Checkbox';
+import { Heading } from '@/ui/Heading';
+import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Select } from '@/ui/Select';
+import { TextArea } from '@/ui/TextArea';
+import { Toggle } from '@/ui/Toggle';
+import { useState } from 'react';
 
 interface ProfileSettingsProps {
   driver: DriverProfileDriverSummaryViewModel;

apps/website/components/drivers/ProfileStats.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
-import { useMemo } from 'react';
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { StatCard } from '@/ui/StatCard';
 import { RankBadge } from '@/components/leaderboards/RankBadge';
+import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
+import { StatCard } from '@/ui/StatCard';
+import { Text } from '@/ui/Text';
+import { useMemo } from 'react';
 
 interface ProfileStatsProps {
   driverId?: string;

apps/website/components/drivers/RacingProfile.tsx

@@ -1,9 +1,9 @@
 
 
-import { Stack } from '@/ui/Stack';
-import { Card , Card as Surface } from '@/ui/Card';
+import { Card, Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { Flag, UserPlus, Users } from 'lucide-react';
 

apps/website/components/drivers/RatingBreakdown.tsx

@@ -1,10 +1,10 @@
 
 
-import { Stack } from '@/ui/Stack';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
 import { RatingComponent } from '@/components/drivers/RatingComponent';
 import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface RatingBreakdownProps {

apps/website/components/drivers/RatingComponent.tsx

@@ -1,6 +1,6 @@
 
 
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { ProgressBar } from '@/ui/ProgressBar';
 import { Text } from '@/ui/Text';
 

apps/website/components/drivers/RatingHistoryItem.tsx

@@ -1,6 +1,6 @@
 
 
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 
 interface RatingHistoryItemProps {

apps/website/components/drivers/SafetyRatingBadge.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Shield } from 'lucide-react';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Box } from '@/ui/primitives/Box';
+import { Shield } from 'lucide-react';
 
 interface SafetyRatingBadgeProps {
   rating: number;

apps/website/components/drivers/SkillDistribution.tsx

@@ -1,8 +1,8 @@
 
 
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { BarChart3 } from 'lucide-react';
 

apps/website/components/drivers/SkillLevelButton.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { LucideIcon } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { LucideIcon } from 'lucide-react';
 
 interface SkillLevelButtonProps {
   label: string;

apps/website/components/drivers/SkillLevelHeader.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Badge } from '@/ui/Badge';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronRight, LucideIcon, UserPlus } from 'lucide-react';
 
 interface SkillLevelHeaderProps {
   label: string;

apps/website/components/errors/AppErrorBoundaryView.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
-import { AlertTriangle } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Icon } from '@/ui/Icon';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { AlertTriangle } from 'lucide-react';
+import React from 'react';
 
 interface AppErrorBoundaryViewProps {
   title: string;

apps/website/components/errors/DevErrorPanel.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { X, RefreshCw, Copy, Terminal, Activity, AlertTriangle } from 'lucide-react';
-import { ApiError } from '@/lib/api/base/ApiError';
 import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
+import { ApiError } from '@/lib/api/base/ApiError';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { Activity, AlertTriangle, Copy, RefreshCw, Terminal, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface DevErrorPanelProps {
   error: ApiError;

apps/website/components/errors/EnhancedFormError.tsx

@@ -1,25 +1,25 @@
 'use client';
 
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  AlertCircle, 
-  AlertTriangle, 
-  Wifi, 
-  RefreshCw, 
-  ChevronDown, 
-  ChevronUp,
-  Bug,
-  Info,
-  X
-} from 'lucide-react';
-import { parseApiError, getErrorSeverity, isRetryable, isConnectivityError } from '@/lib/utils/errorUtils';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { getErrorSeverity, isConnectivityError, isRetryable, parseApiError } from '@/lib/utils/errorUtils';
+import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
-import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+    AlertCircle,
+    AlertTriangle,
+    Bug,
+    ChevronDown,
+    ChevronUp,
+    Info,
+    RefreshCw,
+    Wifi,
+    X
+} from 'lucide-react';
+import { useState } from 'react';
 
 interface EnhancedFormErrorProps {
   error: unknown;

apps/website/components/errors/ErrorAnalyticsDashboard.tsx

@@ -1,33 +1,33 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
+import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
 import { getErrorAnalyticsStats, type ErrorStats } from '@/lib/services/error/ErrorAnalyticsService';
-import { 
-  Activity, 
-  AlertTriangle, 
-  Clock, 
-  Copy, 
-  RefreshCw, 
-  Bug,
-  Globe,
-  Cpu,
-  FileText,
-  Trash2,
-  Download,
-  Search,
-  ChevronDown,
-  Zap,
-  Terminal
-} from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { IconButton } from '@/ui/IconButton';
 import { Badge } from '@/ui/Badge';
 import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
 import { Input } from '@/ui/Input';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import {
+    Activity,
+    AlertTriangle,
+    Bug,
+    ChevronDown,
+    Clock,
+    Copy,
+    Cpu,
+    Download,
+    FileText,
+    Globe,
+    RefreshCw,
+    Search,
+    Terminal,
+    Trash2,
+    Zap
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 interface ErrorAnalyticsDashboardProps {
   /**

apps/website/components/errors/ErrorDetails.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
-import { ChevronDown, ChevronUp, Copy, Terminal } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronDown, ChevronUp, Copy, Terminal } from 'lucide-react';
+import { useState } from 'react';
 
 interface ErrorDetailsProps {
   error: Error & { digest?: string };

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { useState } from 'react';
-import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
 import { Card } from '@/ui/Card';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { ChevronDown, ChevronUp, Copy } from 'lucide-react';
+import { useState } from 'react';
 
 interface ErrorDetailsBlockProps {
   error: Error & { digest?: string };

apps/website/components/errors/ErrorRecoveryActions.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
-import { RefreshCw, Home } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Home, RefreshCw } from 'lucide-react';
 
 interface ErrorRecoveryActionsProps {
   onRetry: () => void;

apps/website/components/errors/ErrorScreen.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
+import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { AppErrorBoundaryView } from './AppErrorBoundaryView';
-import { ErrorRecoveryActions } from './ErrorRecoveryActions';
 import { ErrorDetailsBlock } from './ErrorDetailsBlock';
-import { Stack } from '@/ui/Stack';
-import { Card } from '@/ui/Card';
+import { ErrorRecoveryActions } from './ErrorRecoveryActions';
 
 interface ErrorScreenProps {
   error: Error & { digest?: string };

apps/website/components/errors/GlobalErrorScreen.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import React from 'react';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/Stack';
-import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
 
 interface GlobalErrorScreenProps {
   error: Error & { digest?: string };

apps/website/components/errors/NotFoundActions.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface NotFoundActionsProps {

apps/website/components/errors/NotFoundCallToAction.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
 
 interface NotFoundCallToActionProps {
   label: string;

apps/website/components/errors/NotFoundDiagnostics.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface NotFoundDiagnosticsProps {

apps/website/components/errors/NotFoundHelpLinks.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React from 'react';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import React from 'react';
 
 interface NotFoundHelpLinksProps {
   links: Array<{ label: string; href: string }>;

apps/website/components/errors/NotFoundScreen.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Text } from '@/ui/Text';
-import { Glow } from '@/ui/Glow';
-import { NotFoundActions } from './NotFoundActions';
-import { NotFoundHelpLinks } from './NotFoundHelpLinks';
-import { NotFoundDiagnostics } from './NotFoundDiagnostics';
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
+import { Glow } from '@/ui/Glow';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { NotFoundActions } from './NotFoundActions';
+import { NotFoundDiagnostics } from './NotFoundDiagnostics';
+import { NotFoundHelpLinks } from './NotFoundHelpLinks';
 
 interface NotFoundScreenProps {
   errorCode: string;

apps/website/components/errors/RecoveryActions.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import React from 'react';
-import { RefreshCw, Home, LifeBuoy } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Home, LifeBuoy, RefreshCw } from 'lucide-react';
 
 interface RecoveryActionsProps {
   onRetry: () => void;

apps/website/components/errors/ServerErrorPanel.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
-import { AlertTriangle } from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/primitives/Stack';
+import { Text } from '@/ui/Text';
+import { AlertTriangle } from 'lucide-react';
 
 interface ServerErrorPanelProps {
   message?: string;

apps/website/components/feed/ActivityFeedItem.tsx

@@ -1,9 +1,9 @@
 
 
-import { ReactNode } from 'react';
-import { Box } from '@/ui/Box';
-import { Surface } from '@/ui/Surface';
+import { Box } from '@/ui/primitives/Box';
+import { Surface } from '@/ui/primitives/Surface';
 import { Text } from '@/ui/Text';
+import { ReactNode } from 'react';
 
 interface ActivityFeedItemProps {
   icon: ReactNode;

apps/website/components/feed/ActivityFeedList.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { ReactNode } from 'react';
 
 interface ActivityFeedListProps {
   children: ReactNode;

apps/website/components/feed/FeedLayout.tsx

@@ -1,12 +1,12 @@
-import { Card } from '@/ui/Card';
 import { FeedList } from '@/components/feed/FeedList';
-import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
 import { LatestResultsSidebar } from '@/components/races/LatestResultsSidebar';
-import { Section } from '@/ui/Section';
+import { UpcomingRacesSidebar } from '@/components/races/UpcomingRacesSidebar';
+import { Card } from '@/ui/Card';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/primitives/Grid';
+import { Stack } from '@/ui/primitives/Stack';
+import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
 
 interface FeedItemData {

apps/website/components/feed/FeedList.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { FeedEmptyState } from '@/ui/FeedEmptyState';
 import { FeedItemCard } from '@/components/feed/FeedItemCard';
-import { Stack } from '@/ui/Stack';
+import { FeedEmptyState } from '@/ui/FeedEmptyState';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface FeedItemData {
   id: string;

apps/website/components/feed/RecentActivity.tsx

@@ -1,10 +1,10 @@
 
 
-import { mediaConfig } from '@/lib/config/mediaConfig';
 import { ActiveDriverCard } from '@/components/drivers/ActiveDriverCard';
-import { Box } from '@/ui/Box';
+import { mediaConfig } from '@/lib/config/mediaConfig';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
 

apps/website/components/home/HomeFeatureDescription.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React from 'react';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface HomeFeatureDescriptionProps {
   lead: string;

apps/website/components/home/HomeHeader.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
 import { Button } from '@/ui/Button';
-import { Glow } from '@/ui/Glow';
 import { Container } from '@/ui/Container';
+import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
 
 interface HomeHeaderProps {
   title: string;

apps/website/components/home/LeagueSummaryPanel.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import React from 'react';
 import { LeagueCard } from '@/components/leagues/LeagueCard';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
+import { Box } from '@/ui/primitives/Box';
 
 interface League {
   id: string;

apps/website/components/home/QuickLinksPanel.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import React from 'react';
-import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Plus, Search, Shield, Users } from 'lucide-react';
+import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
+import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
+import { Stack } from '@/ui/primitives/Stack';
+import { Plus, Search, Shield, Users } from 'lucide-react';
 
 /**
  * QuickLinksPanel - Semantic quick actions bar.

apps/website/components/home/RecentRacesPanel.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import React from 'react';
 import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Panel } from '@/ui/Panel';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
+import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 
 interface Race {

apps/website/components/home/TeamSummaryPanel.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import React from 'react';
 import { TeamCard } from '@/components/teams/TeamCard';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
+import { Box } from '@/ui/primitives/Box';
 
 interface Team {
   id: string;