website refactor

apps/website/ui/Panel.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
-import { Box, Spacing } from './Box';
 import { Heading } from './Heading';
-import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface PanelProps {
@@ -9,63 +7,88 @@ export interface PanelProps {
   description?: string;
   children: ReactNode;
   footer?: ReactNode;
-  variant?: 'default' | 'dark' | 'muted';
-  padding?: Spacing;
+  variant?: 'default' | 'muted' | 'ghost' | 'dark' | any;
+  padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
   actions?: ReactNode;
   className?: string;
+  style?: React.CSSProperties;
   border?: boolean;
   rounded?: string;
   borderColor?: string;
   bg?: string;
 }
 
+/**
+ * Panel - Redesigned for "Modern Precision" theme.
+ * Includes compatibility props to prevent app-wide breakage.
+ */
 export const Panel = ({ 
   title, 
   description, 
   children, 
   footer,
   variant = 'default',
-  padding = 6,
+  padding = 'md',
   actions,
   className,
+  style,
   border,
   rounded,
   borderColor,
-  bg
+  bg,
 }: PanelProps) => {
+  const variantClasses = {
+    default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
+    muted: 'bg-[var(--ui-color-bg-surface-muted)] border-[var(--ui-color-border-muted)]',
+    ghost: 'bg-transparent border-transparent',
+    dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
+  };
+
+  const paddingClasses = {
+    none: 'p-0',
+    sm: 'p-2',
+    md: 'p-4',
+    lg: 'p-8',
+  };
+
+  const getPaddingClass = (pad: any) => {
+    if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
+    return ''; // Handled in style
+  };
+
+  const combinedStyle: React.CSSProperties = {
+    ...style,
+    ...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
+    ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
+    ...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
+    ...(border === false ? { border: 'none' } : {}),
+  };
+
   return (
-    <Surface 
-      variant={variant} 
-      rounded={(rounded as any) || "lg"} 
-      style={{ 
-        border: border === false ? 'none' : `1px solid ${borderColor || 'var(--ui-color-border-default)'}`,
-        backgroundColor: bg ? (bg.startsWith('bg-') ? undefined : bg) : undefined
-      }}
-      className={className}
-    >
+    <div className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} transition-all duration-200 ${className || ''}`} style={combinedStyle}>
       {(title || description || actions) && (
-        <Box padding={padding as any} borderBottom display="flex" alignItems="center" justifyContent="between">
-          <Box>
-            {title && <Heading level={3} marginBottom={1}>{title}</Heading>}
-            {description && <Text size="sm" variant="low">{description}</Text>}
-          </Box>
+        <div className={`border-b border-[var(--ui-color-border-muted)] flex items-center justify-between ${getPaddingClass(padding)}`}>
+          <div>
+            {title && <Heading level={4} weight="semibold" uppercase>{title}</Heading>}
+            {description && <Text size="xs" variant="low">{description}</Text>}
+          </div>
           {actions && (
-            <Box display="flex" alignItems="center" gap={3}>
+            <div className="flex items-center gap-2">
               {actions}
-            </Box>
+            </div>
           )}
-        </Box>
+        </div>
       )}
       
-      <Box padding={padding as any}>
+      <div className={typeof padding === 'number' ? '' : getPaddingClass(padding)}>
         {children}
-      </Box>
+      </div>
       
       {footer && (
-        <Box padding={padding as any} borderTop bg="rgba(255,255,255,0.02)">
+        <div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
           {footer}
-        </Box>
+        </div>
       )}
-    </Surface>
+    </div>
   );
 };