chore:little fixes and formating and linting and patches

apps/start/src/components/facehash/facehash.tsx

@@ -184,15 +184,19 @@ const DEFAULT_GRADIENT_STYLE: React.CSSProperties = {
 function useColorScheme(colorScheme: ColorScheme): 'light' | 'dark' {
   const [systemScheme, setSystemScheme] = React.useState<'light' | 'dark'>(
     () => {
-      if (typeof window === 'undefined') return 'light';
+      if (typeof window === 'undefined') {
+        return 'light';
+      }
       return window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light';
-    },
+    }
   );
 
   React.useEffect(() => {
-    if (colorScheme !== 'auto') return;
+    if (colorScheme !== 'auto') {
+      return;
+    }
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handler = (e: MediaQueryListEvent) => {
@@ -231,7 +235,7 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
       onMouseLeave,
       ...props
     },
-    ref,
+    ref
   ) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const resolvedScheme = useColorScheme(colorScheme);
@@ -242,9 +246,13 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
     // Determine which colors to use based on scheme
     const effectiveColors = React.useMemo(() => {
       // If explicit colors prop is provided, use it
-      if (colors) return colors;
+      if (colors) {
+        return colors;
+      }
       // If colorClasses is provided, don't use inline colors
-      if (colorClasses) return undefined;
+      if (colorClasses) {
+        return undefined;
+      }
 
       // Use scheme-specific colors or defaults
       const lightColors = colorsLight ?? DEFAULT_COLORS_LIGHT;
@@ -313,7 +321,7 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
         }
         onMouseEnter?.(e);
       },
-      [interactive, usesCssHover, onMouseEnter],
+      [interactive, usesCssHover, onMouseEnter]
     );
 
     const handleMouseLeave = React.useCallback(
@@ -323,16 +331,18 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
         }
         onMouseLeave?.(e);
       },
-      [interactive, usesCssHover, onMouseLeave],
+      [interactive, usesCssHover, onMouseLeave]
     );
 
     return (
       <div
+        aria-label={`Avatar for ${name}`}
+        className={`${bgColorClass ?? ''} ${className ?? ''}`}
+        data-facehash-avatar=""
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
         ref={ref}
         role="img"
-        aria-label={`Avatar for ${name}`}
-        data-facehash-avatar=""
-        className={`${bgColorClass ?? ''} ${className ?? ''}`}
         style={{
           position: 'relative',
           display: 'flex',
@@ -345,13 +355,12 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
           ...(bgColorHex && { backgroundColor: bgColorHex }),
           ...style,
         }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         {...props}
       >
         {/* Gradient overlay */}
         {variant === 'gradient' && (
           <div
+            aria-hidden="true"
             className={gradientOverlayClass}
             style={{
               position: 'absolute',
@@ -359,29 +368,30 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
               pointerEvents: 'none',
               ...(gradientOverlayClass ? {} : DEFAULT_GRADIENT_STYLE),
             }}
-            aria-hidden="true"
           />
         )}
 
         {/* Face container with 3D transform */}
         <div
-          data-facehash-avatar-face=""
           className={
             usesCssHover && interactive
               ? 'group-hover:[transform:var(--facehash-hover-transform)]'
               : undefined
           }
-          style={{
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transform,
-            transition: interactive ? 'transform 0.2s ease-out' : undefined,
-            transformStyle: 'preserve-3d',
-            '--facehash-hover-transform': hoverTransform,
-          } as React.CSSProperties}
+          data-facehash-avatar-face=""
+          style={
+            {
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transform,
+              transition: interactive ? 'transform 0.2s ease-out' : undefined,
+              transformStyle: 'preserve-3d',
+              '--facehash-hover-transform': hoverTransform,
+            } as React.CSSProperties
+          }
         >
           {/* Face SVG */}
           <FaceComponent
@@ -411,7 +421,7 @@ export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
         </div>
       </div>
     );
-  },
+  }
 );
 
 Facehash.displayName = 'Facehash';