code quality

apps/website/ui/Button.tsx

@@ -91,8 +91,9 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
   borderWidth,
   aspectRatio,
   border,
+  ...props
 }, ref) => {
-  const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold transition-all duration-150 ease-in-out';
+const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold transition-all duration-150 ease-in-out';
   
   const variantClasses = {
     primary: 'bg-[var(--ui-color-intent-primary)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-primary)] shadow-[0_0_15px_rgba(25,140,255,0.2)]',
@@ -154,6 +155,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
   const Tag = as === 'a' ? 'a' : 'button';
 
+  const { 'data-testid': testId } = (props as any) || {};
+
   return (
     <Tag
       ref={ref as any}
@@ -166,6 +169,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
       disabled={as === 'a' ? undefined : (disabled || isLoading)}
       style={combinedStyle}
       title={title}
+      data-testid={testId}
     >
       {content}
     </Tag>

apps/website/ui/Card.tsx

@@ -93,6 +93,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
   gap,
   borderLeft,
   justifyContent,
+  ...props
 }, ref) => {
   const variantClasses = {
     default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-sm',
@@ -152,11 +153,12 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
   };
 
   return (
-    <div 
+    <div
       ref={ref}
       className={classes}
       onClick={onClick}
       style={Object.keys(style).length > 0 ? style : undefined}
+      {...props}
     >
       {title && (
         <div className={`border-b border-[var(--ui-color-border-muted)] ${typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : ''}`}>

apps/website/ui/Form.tsx

@@ -5,21 +5,24 @@ export interface FormProps {
   onSubmit?: FormEventHandler<HTMLFormElement>;
   noValidate?: boolean;
   className?: string;
+  'data-testid'?: string;
 }
 
-export const Form = forwardRef<HTMLFormElement, FormProps>(({ 
-  children, 
-  onSubmit, 
+export const Form = forwardRef<HTMLFormElement, FormProps>(({
+  children,
+  onSubmit,
   noValidate = true,
-  className
+  className,
+  'data-testid': testId
 }, ref) => {
   return (
-    <form 
+    <form
       ref={ref}
-      onSubmit={onSubmit} 
+      onSubmit={onSubmit}
       noValidate={noValidate}
       className={className}
       style={{ width: '100%' }}
+      data-testid={testId}
     >
       {children}
     </form>

apps/website/ui/Input.tsx

@@ -28,8 +28,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
   hint,
   id,
   size,
-  ...props 
+  ...props
 }, ref) => {
+  const { 'data-testid': testId, ...restProps } = props as any;
   const variantClasses = {
     default: 'bg-surface-charcoal border border-outline-steel focus:border-primary-accent',
     ghost: 'bg-transparent border-none',
@@ -80,7 +81,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
           ref={ref}
           id={inputId}
           className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
-          {...props}
+          data-testid={testId}
+          {...restProps}
         />
 
         {rightElement}

apps/website/ui/Panel.tsx

@@ -18,9 +18,9 @@ export interface PanelProps {
   bg?: string;
 }
 
-export function Panel({ 
-  children, 
-  variant = 'default', 
+export function Panel({
+  children,
+  variant = 'default',
   padding = 'md',
   onClick,
   style,
@@ -30,8 +30,9 @@ export function Panel({
   footer,
   border,
   rounded,
-  className
-}: PanelProps) {
+  className,
+  ...props
+}: PanelProps & { [key: string]: any }) {
   const variantClasses = {
     default: 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] shadow-sm',
     muted: 'bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-muted)]',
@@ -61,13 +62,14 @@ export function Panel({
     : '';
 
   return (
-    <div 
+    <div
       className={`${variantClasses[variant]} ${getPaddingClass(padding)} ${interactiveClasses} ${rounded ? `rounded-${rounded}` : 'rounded-md'} ${border ? 'border' : ''} ${className || ''}`}
       onClick={onClick}
       style={{
         ...style,
         ...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {})
       }}
+      {...props}
     >
       {(title || actions) && (
         <div className="flex items-center justify-between mb-6 border-b border-[var(--ui-color-border-muted)] pb-4">

apps/website/ui/StatCard.tsx

@@ -22,10 +22,10 @@ export interface StatCardProps {
   delay?: number;
 }
 
-export const StatCard = ({ 
-  label, 
-  value, 
-  icon, 
+export const StatCard = ({
+  label,
+  value,
+  icon,
   intent: intentProp,
   variant = 'default',
   font = 'sans',
@@ -33,8 +33,9 @@ export const StatCard = ({
   footer,
   suffix,
   prefix,
-  delay
-}: StatCardProps) => {
+  delay,
+  ...props
+}: StatCardProps & { [key: string]: any }) => {
   const variantMap: Record<string, { variant: any, intent: any }> = {
     blue: { variant: 'default', intent: 'primary' },
     green: { variant: 'default', intent: 'success' },
@@ -46,7 +47,7 @@ export const StatCard = ({
   const finalIntent = mapped.intent;
 
   return (
-    <Card variant={finalVariant}>
+    <Card variant={finalVariant} {...props}>
       <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
         <Box>
           <Text size="xs" weight="bold" variant="low" uppercase>

apps/website/ui/StatGrid.tsx

@@ -11,24 +11,25 @@ export interface StatGridProps {
   font?: 'sans' | 'mono';
 }
 
-export const StatGrid = ({ 
-  stats, 
+export const StatGrid = ({
+  stats,
   columns = 3,
   variant = 'box',
   cardVariant,
-  font
-}: StatGridProps) => {
+  font,
+  ...props
+}: StatGridProps & { [key: string]: any }) => {
   return (
-    <Grid cols={columns} gap={4}>
+    <Grid cols={columns} gap={4} {...props}>
       {stats.map((stat, index) => (
         variant === 'box' ? (
           <StatBox key={index} {...(stat as StatBoxProps)} />
         ) : (
-          <StatCard 
-            key={index} 
-            variant={cardVariant} 
-            font={font} 
-            {...(stat as StatCardProps)} 
+          <StatCard
+            key={index}
+            variant={cardVariant}
+            font={font}
+            {...(stat as StatCardProps)}
           />
         )
       ))}