website refactor

apps/website/ui/Layout.tsx

@@ -1,4 +1,16 @@
 import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Grid } from './primitives/Grid';
+import { Stack } from './primitives/Stack';
+
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS COMPONENT.
+ * 
+ * Layout is a high-level component for page or section layouts.
+ * It should use Grid or Stack primitives internally.
+ * 
+ * If you need a specific layout pattern, create a new component.
+ */
 
 interface LayoutProps {
   children: ReactNode;
@@ -25,39 +37,33 @@ export function Layout({
   items = 'start',
   justify = 'start'
 }: LayoutProps) {
-  const baseClasses = [padding, gap, className];
-  
   if (grid) {
-    const gridColsMap = {
-      1: 'grid-cols-1',
-      2: 'grid-cols-2',
-      3: 'grid-cols-3',
-      4: 'grid-cols-4'
-    };
-    baseClasses.push('grid', gridColsMap[gridCols]);
-  } else if (flex) {
-    baseClasses.push('flex');
-    if (flexCol) baseClasses.push('flex-col');
-    
-    const itemsMap = {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-      stretch: 'items-stretch'
-    };
-    baseClasses.push(itemsMap[items]);
-    
-    const justifyMap = {
-      start: 'justify-start',
-      center: 'justify-center',
-      end: 'justify-end',
-      between: 'justify-between',
-      around: 'justify-around'
-    };
-    baseClasses.push(justifyMap[justify]);
+    return (
+      <Grid 
+        cols={gridCols as any} 
+        className={`${padding} ${gap} ${className}`}
+      >
+        {children}
+      </Grid>
+    );
   }
   
-  const classes = baseClasses.filter(Boolean).join(' ');
+  if (flex) {
+    return (
+      <Stack 
+        direction={flexCol ? 'col' : 'row'} 
+        align={items} 
+        justify={justify} 
+        className={`${padding} ${gap} ${className}`}
+      >
+        {children}
+      </Stack>
+    );
+  }
   
-  return <div className={classes}>{children}</div>;
-}
+  return (
+    <Box className={`${padding} ${gap} ${className}`}>
+      {children}
+    </Box>
+  );
+}