website refactor

apps/website/ui/primitives/Surface.tsx

@@ -1,7 +1,18 @@
 import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Box, BoxProps } from './Box';
+import { Box, BoxProps, ResponsiveValue } from './Box';
 
-export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Surface is a styled container with background, border, and shadow.
+ * 
+ * - DO NOT add layout props (flex, grid, gap) - use Stack or Grid instead.
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface SurfaceProps<T extends ElementType = 'div'> {
   as?: T;
   children: ReactNode;
   variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
@@ -9,8 +20,11 @@ export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxPro
   border?: boolean;
   padding?: number;
   className?: string;
-  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
   shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
+  // Sizing
+  w?: string | ResponsiveValue<string>;
+  h?: string | ResponsiveValue<string>;
+  maxWidth?: string | ResponsiveValue<string>;
 }
 
 export function Surface<T extends ElementType = 'div'>({ 
@@ -21,8 +35,8 @@ export function Surface<T extends ElementType = 'div'>({
   border = false,
   padding = 0,
   className = '',
-  display,
   shadow = 'none',
+  w, h, maxWidth,
   ...props 
 }: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
   const variantClasses: Record<string, string> = {
@@ -75,12 +89,11 @@ export function Surface<T extends ElementType = 'div'>({
     border ? 'border border-border-gray' : '',
     paddingClasses[padding] || 'p-0',
     shadowClasses[shadow],
-    display ? display : '',
     className
   ].filter(Boolean).join(' ');
 
   return (
-    <Box as={as} className={classes} {...props}>
+    <Box as={as} className={classes} w={w} h={h} maxWidth={maxWidth} {...props}>
       {children}
     </Box>
   );