website refactor

apps/website/ui/Accordion.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode, useState } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Surface } from './primitives/Surface';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface AccordionProps {
   title: string;

apps/website/ui/AccountItem.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface AccountItemProps {
   icon: LucideIcon;

apps/website/ui/ActiveDriverCard.tsx

@@ -1,8 +1,7 @@
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/primitives/Surface';
-import React from 'react';
 
 export interface ActiveDriverCardProps {
   name: string;

apps/website/ui/ActivityItem.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface ActivityItemProps {
   title: string;

apps/website/ui/AuthLayout.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Glow } from './Glow';
 
 export interface AuthLayoutProps {

apps/website/ui/AuthLoading.tsx

@@ -0,0 +1,27 @@
+import { Box } from './Box';
+import { LoadingSpinner } from './LoadingSpinner';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface AuthLoadingProps {
+  message?: string;
+}
+
+export function AuthLoading({ message = 'Authenticating...' }: AuthLoadingProps) {
+  return (
+    <Box 
+      fullWidth 
+      minHeight="100vh" 
+      display="flex" 
+      center 
+      bg="bg-[#0f1115]"
+    >
+      <Stack align="center" gap={4}>
+        <LoadingSpinner size={10} />
+        <Text color="text-gray-400" weight="medium">
+          {message}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}

apps/website/ui/Avatar.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Surface } from './primitives/Surface';
-import { Box } from './primitives/Box';
 import { User } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Surface } from './Surface';
 
 export interface AvatarProps {
   src?: string;

apps/website/ui/Badge.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Stack } from './primitives/Stack';
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
 
 export interface BadgeProps {
   children: ReactNode;

apps/website/ui/BadgeGroup.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface BadgeGroupProps {
   children: ReactNode;

apps/website/ui/BorderTabs.tsx

@@ -1,12 +1,5 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Box } from './Box';
 
-export interface TabOption {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-}
 
 export interface BorderTabsProps {
   tabs: TabOption[];

apps/website/ui/BrandMark.tsx

@@ -1,7 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
-import Image from 'next/image';
+import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
-import React from 'react';
+import Image from 'next/image';
 
 interface BrandMarkProps {
   href?: string;

apps/website/ui/BreadcrumbBar.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs';
 
 export interface BreadcrumbBarProps {
   items: BreadcrumbItem[];

apps/website/ui/Breadcrumbs.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { ChevronRight } from 'lucide-react';
+import React from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface BreadcrumbItem {
   label: string;

apps/website/ui/BulkActions.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
+import { ReactNode } from 'react';
 import { Badge } from './Badge';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface BulkActionsProps {
   children: ReactNode;

apps/website/ui/Button.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode, MouseEventHandler, forwardRef } from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { Loader2 } from 'lucide-react';
+import React, { MouseEventHandler, ReactNode, forwardRef } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface ButtonProps {
   children: ReactNode;

apps/website/ui/ButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { Box, Spacing } from './Box';
+
+export interface ButtonGroupProps {
+  children: ReactNode;
+  alignment?: 'start' | 'center' | 'end' | 'between';
+  gap?: Spacing;
+  marginTop?: Spacing;
+}
+
+export const ButtonGroup = ({ 
+  children, 
+  alignment = 'start',
+  gap = 4,
+  marginTop = 0
+}: ButtonGroupProps) => {
+  const justifyContentMap = {
+    start: 'start',
+    center: 'center',
+    end: 'end',
+    between: 'between'
+  };
+
+  return (
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent={justifyContentMap[alignment] as any} 
+      gap={gap as any}
+      marginTop={marginTop}
+    >
+      {children}
+    </Box>
+  );
+};

apps/website/ui/Card.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, forwardRef } from 'react';
-import { Surface, SurfaceProps } from './primitives/Surface';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
+import { Surface, SurfaceProps } from './Surface';
 
 export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
   children: ReactNode;

apps/website/ui/CategoryDistribution.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { CategoryDistributionCard } from './CategoryDistributionCard';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { CategoryDistributionCard } from './CategoryDistributionCard';
 
 export interface CategoryData {
   id: string;

apps/website/ui/CategoryDistributionCard.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface CategoryDistributionCardProps {
   label: string;

apps/website/ui/CategoryIcon.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { Tag } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface CategoryIconProps {
   category: string;
@@ -9,9 +8,7 @@ export interface CategoryIconProps {
 }
 
 export const CategoryIcon = ({ 
-  category, 
-  size = 24 
-}: CategoryIconProps) => {
+  category}: CategoryIconProps) => {
   // Map categories to icons if needed, for now just use Tag
   return (
     <Box 

apps/website/ui/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, ChangeEvent } from 'react';
-import { Box } from './primitives/Box';
+import { ChangeEvent, forwardRef } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface CheckboxProps {

apps/website/ui/CircularProgress.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface CircularProgressProps {

apps/website/ui/Container.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface ContainerProps {
   children: ReactNode;

apps/website/ui/ContentShell.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface ContentShellProps {
   children: ReactNode;

apps/website/ui/ContentViewport.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface ContentViewportProps {

apps/website/ui/ControlBar.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface ControlBarProps {
   children: ReactNode;

apps/website/ui/CountryFlag.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface CountryFlagProps {
   countryCode: string;

apps/website/ui/DangerZone.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface DangerZoneProps {
   title: string;

apps/website/ui/DashboardHero.tsx

@@ -0,0 +1,146 @@
+import { Flag, Star, Trophy, Users } from 'lucide-react';
+import { Avatar } from './Avatar';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface DashboardHeroProps {
+  driverName: string;
+  avatarUrl?: string | null;
+  rating: number;
+  rank: number;
+  totalRaces: number;
+  winRate: number;
+  className?: string;
+}
+
+export function DashboardHero({
+  driverName,
+  avatarUrl,
+  rating,
+  rank,
+  totalRaces,
+  winRate,
+  className = '',
+}: DashboardHeroProps) {
+  return (
+    <Box
+      position="relative"
+      bg="bg-[#0C0D0F]"
+      borderBottom
+      borderColor="border-[#23272B]"
+      overflow="hidden"
+      className={className}
+    >
+      {/* Background Glow */}
+      <Box
+        position="absolute"
+        top={-100}
+        right={-100}
+        w="500px"
+        h="500px"
+        bg="bg-primary-blue/10"
+        rounded="full"
+        blur="3xl"
+      />
+
+      <Box p={{ base: 6, md: 10 }} position="relative" zIndex={10}>
+        <Stack direction={{ base: 'col', md: 'row' }} align="center" gap={8}>
+          {/* Avatar Section */}
+          <Box position="relative">
+            <Box
+              p={1}
+              rounded="2xl"
+              bg="bg-[#141619]"
+              border
+              borderColor="border-[#23272B]"
+            >
+              <Avatar
+                src={avatarUrl}
+                alt={driverName}
+                size={120}
+                className="rounded-xl"
+              />
+            </Box>
+            <Box
+              position="absolute"
+              bottom={-2}
+              right={-2}
+              w="10"
+              h="10"
+              rounded="xl"
+              bg="bg-[#4ED4E0]"
+              borderWidth="2px"
+              borderStyle="solid"
+              borderColor="border-[#0C0D0F]"
+              display="flex"
+              center
+            >
+              <Icon icon={Star} size={5} color="#0C0D0F" />
+            </Box>
+          </Box>
+
+          {/* Info Section */}
+          <Stack flex={1} align={{ base: 'center', md: 'start' }} gap={4}>
+            <Box>
+              <Heading level={1} uppercase letterSpacing="tighter" mb={2}>
+                {driverName}
+              </Heading>
+              <Stack direction="row" gap={4}>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rating</Text>
+                  <Text size="sm" weight="bold" color="text-[#4ED4E0]" font="mono">{rating}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Rank</Text>
+                  <Text size="sm" weight="bold" color="text-[#FFBE4D]" font="mono">#{rank}</Text>
+                </Stack>
+                <Stack gap={0.5}>
+                  <Text size="xs" color="text-gray-500" uppercase>Starts</Text>
+                  <Text size="sm" weight="bold" color="text-gray-300" font="mono">{totalRaces}</Text>
+                </Stack>
+              </Stack>
+            </Box>
+
+            <Stack direction="row" gap={3} wrap>
+              <Badge variant="primary" rounded="lg" icon={Trophy}>
+                {winRate}% Win Rate
+              </Badge>
+              <Badge variant="info" rounded="lg" icon={Flag}>
+                Pro License
+              </Badge>
+              <Badge variant="default" rounded="lg" icon={Users}>
+                Team Redline
+              </Badge>
+            </Stack>
+          </Stack>
+
+          {/* Quick Stats */}
+          <Stack 
+            direction="row" 
+            gap={4} 
+            p={6} 
+            bg="bg-white/5" 
+            rounded="2xl" 
+            border 
+            borderColor="border-white/10"
+            className="backdrop-blur-md"
+          >
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">12</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Podiums</Text>
+            </Stack>
+            <Box w="1px" h="10" bg="bg-white/10" />
+            <Stack align="center" px={4}>
+              <Text size="2xl" weight="bold" color="text-white">4</Text>
+              <Text size="xs" color="text-gray-500" uppercase>Wins</Text>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}

apps/website/ui/DateHeader.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Stack } from './primitives/Stack';
 import { Calendar } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Text } from './Text';
+import { Stack } from './Stack';
 
 export interface DateHeaderProps {
   date: string;

apps/website/ui/DebugPanel.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
 import { Heading } from './Heading';
 import { IconButton } from './IconButton';
-import { X } from 'lucide-react';
 
 export interface DebugPanelProps {
   title: string;

apps/website/ui/DecorativeBlur.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 interface DecorativeBlurProps {
   color?: 'blue' | 'green' | 'purple' | 'yellow' | 'red';

apps/website/ui/DevErrorPanel.tsx

@@ -2,15 +2,13 @@ import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
 import { ApiError } from '@/lib/api/base/ApiError';
 import { CircuitBreakerRegistry } from '@/lib/api/base/RetryHandler';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
-import { StatGrid } from '@/ui/StatGrid';
-import { Activity, AlertTriangle, Copy, RefreshCw, Terminal, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 interface DevErrorPanelProps {
   error: ApiError;

apps/website/ui/DriverIdentity.tsx

@@ -1,10 +1,7 @@
-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';
 import { Avatar } from '@/ui/Avatar';
+import { Box } from '@/ui/Box';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
 import React from 'react';
 
 export interface DriverIdentityProps {

apps/website/ui/DurationField.tsx

@@ -1,7 +1,7 @@
-import React, { ChangeEvent } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChangeEvent } from 'react';
+import { Box } from './Box';
 import { Input } from './Input';
+import { Text } from './Text';
 
 export interface DurationFieldProps {
   label: string;

apps/website/ui/EmptyState.tsx

@@ -1,10 +1,9 @@
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
 import { EmptyStateProps } from '@/ui/state-types';
 import { Text } from '@/ui/Text';
-import { Activity, Lock, Search } from 'lucide-react';
 import React from 'react';
 
 // Illustration components (simple SVG representations)

apps/website/ui/ErrorActionButtons.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Home, RefreshCw } from 'lucide-react';
+import { Box } from './Box';
 import { Button } from './Button';
-import { RefreshCw, Home } from 'lucide-react';
 
 export interface ErrorActionButtonsProps {
   onRetry?: () => void;

apps/website/ui/ErrorBanner.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { AlertTriangle } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface ErrorBannerProps {
   title?: string;

apps/website/ui/ErrorDisplay.tsx

@@ -1,13 +1,12 @@
 import { ApiError } from '@/lib/api/base/ApiError';
+import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
 import { ErrorDisplayAction, ErrorDisplayProps } from '@/ui/state-types';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react';
-import React from 'react';
 
 export function ErrorDisplay({
   error,

apps/website/ui/ErrorPageContainer.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface ErrorPageContainerProps {
   children: ReactNode;

apps/website/ui/FeedEmptyState.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { MessageSquare } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface FeedEmptyStateProps {
   message?: string;

apps/website/ui/FeedItem.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
 import { Avatar } from './Avatar';
+import { Box } from './Box';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface FeedItemProps {
   user: {

apps/website/ui/FilePicker.tsx

@@ -1,8 +1,8 @@
 
 
 import React from 'react';
-import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
+import { Box } from './Box';
+import { Stack } from './Stack';
 import { Text } from './Text';
 
 interface FilePickerProps {

apps/website/ui/FilterGroup.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Button } from './Button';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface FilterOption {
   id: string;

apps/website/ui/FloatingAction.tsx

@@ -1,5 +1,3 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
 import { Button, ButtonProps } from './Button';
 
 export interface FloatingActionProps extends ButtonProps {

apps/website/ui/Footer.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Container } from './Container';
-import { Text } from './Text';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export const Footer = () => {
   return (

apps/website/ui/FooterSection.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface FooterSectionProps {
   children: ReactNode;

apps/website/ui/FormField.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface FormFieldProps {
   label?: string;

apps/website/ui/FormSection.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface FormSectionProps {

apps/website/ui/Glow.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 interface GlowProps {
   color?: 'primary' | 'aqua' | 'purple' | 'amber';

apps/website/ui/GoalCard.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
 import { Text } from './Text';
 
 export interface GoalCardProps {

apps/website/ui/Grid.tsx

@@ -1,38 +1,46 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-export interface GridProps {
-  children: ReactNode;
-  cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
-  gap?: number;
-  fullWidth?: boolean;
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Grid is for grid-based layouts.
+ * 
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * - DO NOT add background/border props unless it's a specific styled grid.
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface GridProps<T extends ElementType> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  cols?: number | ResponsiveValue<number>;
+  gap?: number | string | ResponsiveValue<number | string>;
 }
 
-export const Grid = ({ 
-  children, 
-  cols = 1, 
-  gap = 0,
-  fullWidth = false
-}: GridProps) => {
-  const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
-    if (typeof value === 'number') return `grid-cols-${value}`;
-    const classes = [];
-    if (value.base) classes.push(`grid-cols-${value.base}`);
-    if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
-    if (value.md) classes.push(`md:grid-cols-${value.md}`);
-    if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
-    if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
-    return classes.join(' ');
-  };
-
+export const Grid = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    children, 
+    cols = 1, 
+    gap = 4,
+    as,
+    ...props
+  }: GridProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
   return (
     <Box 
-      display="grid" 
-      className={getGridColsClass(cols)}
-      gap={gap} 
-      fullWidth={fullWidth}
+      as={as} 
+      ref={ref}
+      display="grid"
+      gridCols={cols}
+      gap={gap}
+      {...props}
     >
       {children}
     </Box>
   );
-};
+});
+
+Grid.displayName = 'Grid';

apps/website/ui/Header.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface HeaderProps {

apps/website/ui/Heading.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, forwardRef } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './primitives/Box';
+import { ReactNode, forwardRef } from 'react';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
 export interface HeadingProps extends BoxProps<any> {
   children: ReactNode;

apps/website/ui/Hero.tsx

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

apps/website/ui/HorizontalBarChart.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
-import { Stack } from './primitives/Stack';
+import { Stack } from './Stack';
 
 export interface HorizontalBarChartItem {
   label: string;

apps/website/ui/HorizontalStatCard.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface HorizontalStatCardProps {
   label: string;

apps/website/ui/HorizontalStatItem.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface HorizontalStatItemProps {

apps/website/ui/Icon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import { Box, BoxProps } from './primitives/Box';
+import React from 'react';
+import { Box, BoxProps } from './Box';
 
 export interface IconProps extends Omit<BoxProps<'div'>, 'children'> {
   icon: LucideIcon | React.ReactNode;

apps/website/ui/Image.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Box, BoxProps } from './primitives/Box';
+import { Box, BoxProps } from './Box';
 import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface ImageProps extends Omit<BoxProps<'img'>, 'children'> {

apps/website/ui/ImagePlaceholder.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { AlertCircle, Image as ImageIcon, Loader2 } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Image as ImageIcon, AlertCircle, Loader2 } from 'lucide-react';
 import { Text } from './Text';
 
 export interface ImagePlaceholderProps {

apps/website/ui/InfoBanner.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface InfoBannerProps {
   children?: ReactNode;

apps/website/ui/InfoBox.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
-import { Surface } from './primitives/Surface';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface InfoBoxProps {
   title: string;

apps/website/ui/InfoFlyout.tsx

@@ -1,12 +1,10 @@
+import { HelpCircle, X } from 'lucide-react';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
+import { Box } from './Box';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
-import { HelpCircle, X } from 'lucide-react';
-import { Heading } from './Heading';
+import { Surface } from './Surface';
 
 export interface InfoFlyoutProps {
   isOpen: boolean;

apps/website/ui/InfoItem.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface InfoItemProps {
   label: string;

apps/website/ui/InlineNotice.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
 import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
-import React from 'react';
 
 interface InlineNoticeProps {
   variant?: 'info' | 'success' | 'warning' | 'error';

apps/website/ui/Input.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, InputHTMLAttributes } from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {

apps/website/ui/LandingItems.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface LandingItemProps {
   title: string;

apps/website/ui/Layout.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface LayoutProps {
   children: ReactNode;

apps/website/ui/LeaderboardList.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface LeaderboardListProps {
   children: ReactNode;

apps/website/ui/LeaderboardPreviewShell.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface LeaderboardPreviewShellProps {
   title: string;

apps/website/ui/LeaderboardTableShell.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Surface } from './Surface';
 
 export interface LeaderboardTableShellProps {
   children: ReactNode;

apps/website/ui/LeagueCard.tsx

@@ -1,11 +1,9 @@
-import React, { ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Image } from './Image';
+import { Text } from './Text';
 
 export interface LeagueCardProps {
   children: ReactNode;

apps/website/ui/ListItem.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Card } from './Card';
 import { Text } from './Text';
 

apps/website/ui/LoadingSpinner.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface LoadingSpinnerProps {
   size?: 'sm' | 'md' | 'lg' | number;

apps/website/ui/LoadingWrapper.tsx

@@ -1,7 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { LoadingWrapperProps } from '@/ui/state-types';
 import { Text } from '@/ui/Text';
-import React from 'react';
 
 export function LoadingWrapper({
   variant = 'spinner',

apps/website/ui/MainContent.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Container } from './Container';
 
 export interface MainContentProps {

apps/website/ui/MediaCard.tsx

@@ -1,7 +1,7 @@
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Image } from '@/ui/Image';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { motion } from 'framer-motion';
 import React from 'react';

apps/website/ui/MediaMetaPanel.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Info, FileText, Maximize2, Type, Calendar, LucideIcon } from 'lucide-react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Calendar, FileText, Info, LucideIcon, Maximize2, Type } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface MediaMetaItem {
   label: string;

apps/website/ui/MediaPreviewCard.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Image } from './Image';
-import { Surface } from './primitives/Surface';
-import { Text } from './Text';
-import { Play, Image as ImageIcon } from 'lucide-react';
+import { Image as ImageIcon, Play } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
+import { Image } from './Image';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 interface MediaPreviewCardProps {
   type: 'image' | 'video';

apps/website/ui/MetricCard.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Card } from './Card';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface MetricCardProps {
   label: string;

apps/website/ui/MiniStat.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Text } from './Text';
 
 export interface MiniStatProps {

apps/website/ui/Modal.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
-import { IconButton } from './IconButton';
-import { Button } from './Button';
 import { X } from 'lucide-react';
+import { ReactNode, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Box } from './Box';
+import { Button } from './Button';
 import { Heading } from './Heading';
+import { IconButton } from './IconButton';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface ModalProps {

apps/website/ui/ModalIcon.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Icon } from './Icon';
 
 interface ModalIconProps {

apps/website/ui/NavGroup.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 
 export interface NavGroupProps {
   children: ReactNode;

apps/website/ui/NavLink.tsx

@@ -1,9 +1,8 @@
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/primitives/Box';
-import { LucideIcon } from 'lucide-react';
-import { Link } from '@/ui/Link';
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
-import React from 'react';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+import { LucideIcon } from 'lucide-react';
 
 interface NavLinkProps {
   href: string;

apps/website/ui/NotificationContent.tsx

@@ -1,8 +1,6 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
+import { Text } from './Text';
 
 export interface NotificationStatProps {
   label: string;

apps/website/ui/PageHeader.tsx

@@ -2,11 +2,11 @@
 
 import { LucideIcon } from 'lucide-react';
 import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
-import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 interface PageHeaderProps {

apps/website/ui/PageHero.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 
 export interface PageHeroProps {
   title: string;

apps/website/ui/Pagination.tsx

@@ -1,8 +1,8 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 import { Button } from './Button';
 import { Text } from './Text';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 export interface PaginationProps {
   currentPage: number;

apps/website/ui/Panel.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Surface } from './primitives/Surface';
-import { Box, Spacing } from './primitives/Box';
+import { ReactNode } from 'react';
+import { Box, Spacing } from './Box';
 import { Heading } from './Heading';
+import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface PanelProps {

apps/website/ui/PasswordField.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Input, InputProps } from './Input';
 import { Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import { Box } from './Box';
 import { IconButton } from './IconButton';
-import { Box } from './primitives/Box';
+import { Input, InputProps } from './Input';
 
 export interface PasswordFieldProps extends InputProps {}
 

apps/website/ui/PlaceholderImage.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { User } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
 
 export interface PlaceholderImageProps {
   width?: string | number;

apps/website/ui/Podium.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Avatar } from './Avatar';
 import { Trophy } from 'lucide-react';
-import { Icon } from './Icon';
+import { ReactNode } from 'react';
+import { Avatar } from './Avatar';
+import { Box } from './Box';
 import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Text } from './Text';
 
 export interface PodiumEntry {
   name: string;

apps/website/ui/PresetCard.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
-import { Surface } from './primitives/Surface';
-import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Surface } from './Surface';
+import { Text } from './Text';
 
 export interface PresetCardProps {
   title: string;

apps/website/ui/ProfileHero.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { ReactNode } from 'react';
+import { Box } from './Box';
 import { Glow } from './Glow';
+import { Surface } from './Surface';
 
 export interface ProfileHeroProps {
   children: ReactNode;

apps/website/ui/ProgressBar.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Box } from './primitives/Box';
+import { Box } from './Box';
 
 export interface ProgressBarProps {
   value: number;

apps/website/ui/ProgressLine.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { motion } from 'framer-motion';
-import React from 'react';
 
 interface ProgressLineProps {
   isLoading: boolean;

apps/website/ui/QuickActionItem.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { Box } from './primitives/Box';
-import { Text } from './Text';
+import { ChevronRight, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
-import { LucideIcon, ChevronRight } from 'lucide-react';
 import { Link } from './Link';
+import { Text } from './Text';
 
 export interface QuickActionItemProps {
   label: string;