feat: comprehensive Biome linting fixes and code quality improvements

Major code quality overhaul addressing 58% of all linting issues:

• Type Safety Improvements:
  - Replace all any types with proper TypeScript interfaces
  - Fix Map component shadowing (renamed to CountryMap)
  - Add comprehensive custom error classes system
  - Enhance API route type safety

• Accessibility Enhancements:
  - Add explicit button types to all interactive elements
  - Implement useId() hooks for form element accessibility
  - Add SVG title attributes for screen readers
  - Fix static element interactions with keyboard handlers

• React Best Practices:
  - Resolve exhaustive dependencies warnings with useCallback
  - Extract nested component definitions to top level
  - Fix array index keys with proper unique identifiers
  - Improve component organization and prop typing

• Code Organization:
  - Automatic import organization and type import optimization
  - Fix unused function parameters and variables
  - Enhanced error handling with structured error responses
  - Improve component reusability and maintainability

Results: 248 → 104 total issues (58% reduction)
- Fixed all critical type safety and security issues
- Enhanced accessibility compliance significantly
- Improved code maintainability and performance

components/magicui/animated-beam.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "motion/react";
-import { RefObject, useEffect, useId, useState } from "react";
+import { type RefObject, useEffect, useId, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -94,7 +94,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
     // Initialize ResizeObserver
     const resizeObserver = new ResizeObserver((entries) => {
       // For all entries, recalculate the path
-      for (const entry of entries) {
+      for (const _entry of entries) {
         updatePath();
       }
     });
@@ -134,6 +134,7 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
       )}
       viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
     >
+      <title>Animated connection beam</title>
       <path
         d={pathD}
         stroke={pathColor}

components/magicui/animated-circular-progress-bar.tsx

@@ -45,6 +45,7 @@ export function AnimatedCircularProgressBar({
         strokeWidth="2"
         viewBox="0 0 100 100"
       >
+        <title>Circular progress indicator</title>
         {currentPercent <= 90 && currentPercent >= 0 && (
           <circle
             cx="50"

components/magicui/animated-shiny-text.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, FC } from "react";
+import type { ComponentPropsWithoutRef, CSSProperties, FC } from "react";
 
 import { cn } from "@/lib/utils";
 

components/magicui/aurora-text.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { memo } from "react";
+import type React from "react";
+import { memo } from "react";
 
 interface AuroraTextProps {
   children: React.ReactNode;

components/magicui/blur-fade.tsx

@@ -2,11 +2,11 @@
 
 import {
   AnimatePresence,
+  type MotionProps,
   motion,
+  type UseInViewOptions,
   useInView,
-  UseInViewOptions,
-  Variants,
-  MotionProps,
+  type Variants,
 } from "motion/react";
 import { useRef } from "react";
 

components/magicui/border-beam.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { type MotionStyle, motion, type Transition } from "motion/react";
 import { cn } from "@/lib/utils";
-import { motion, MotionStyle, Transition } from "motion/react";
 
 interface BorderBeamProps {
   /**

components/magicui/confetti.tsx

@@ -6,8 +6,9 @@ import type {
   Options as ConfettiOptions,
 } from "canvas-confetti";
 import confetti from "canvas-confetti";
+import type React from "react";
 import type { ReactNode } from "react";
-import React, {
+import {
   createContext,
   forwardRef,
   useCallback,
@@ -17,7 +18,7 @@ import React, {
   useRef,
 } from "react";
 
-import { Button, ButtonProps } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 
 type Api = {
   fire: (options?: ConfettiOptions) => void;

components/magicui/magic-card.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { motion, useMotionTemplate, useMotionValue } from "motion/react";
-import React, { useCallback, useEffect, useRef } from "react";
+import type React from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 import { cn } from "@/lib/utils";
 

components/magicui/meteors.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import type React from "react";
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
-import React, { useEffect, useState } from "react";
 
 interface MeteorsProps {
   number?: number;
@@ -28,10 +29,10 @@ export const Meteors = ({
 
   useEffect(() => {
     const styles = [...new Array(number)].map(() => ({
-      "--angle": -angle + "deg",
+      "--angle": `${-angle}deg`,
       top: "-5%",
       left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,
-      animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",
+      animationDelay: `${Math.random() * (maxDelay - minDelay) + minDelay}s`,
       animationDuration:
         Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +
         "s",

components/magicui/neon-gradient-card.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import {
-  CSSProperties,
-  ReactElement,
-  ReactNode,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
   useEffect,
   useRef,
   useState,
@@ -102,7 +102,7 @@ export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
       const { offsetWidth, offsetHeight } = containerRef.current;
       setDimensions({ width: offsetWidth, height: offsetHeight });
     }
-  }, [children]);
+  }, []);
 
   return (
     <div

components/magicui/number-ticker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useInView, useMotionValue, useSpring } from "motion/react";
-import { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import { type ComponentPropsWithoutRef, useEffect, useRef } from "react";
 
 import { cn } from "@/lib/utils";
 

components/magicui/pointer.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import {
   AnimatePresence,
-  HTMLMotionProps,
+  type HTMLMotionProps,
   motion,
   useMotionValue,
 } from "motion/react";
 import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
 
 interface PointerProps extends Omit<HTMLMotionProps<"div">, "ref"> {
   children?: React.ReactNode;
@@ -109,6 +109,7 @@ export function Pointer({
                   className
                 )}
               >
+                <title>Mouse pointer</title>
                 <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z" />
               </svg>
             )}

components/magicui/scroll-progress.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { cn } from "@/lib/utils";
-import { motion, MotionProps, useScroll } from "motion/react";
+import { type MotionProps, motion, useScroll } from "motion/react";
 import React from "react";
+import { cn } from "@/lib/utils";
+
 interface ScrollProgressProps
   extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
   className?: string;

components/magicui/shine-border.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 

components/magicui/text-animate.tsx

@@ -1,8 +1,13 @@
 "use client";
 
+import {
+  AnimatePresence,
+  type MotionProps,
+  motion,
+  type Variants,
+} from "motion/react";
+import { type ElementType, memo } from "react";
 import { cn } from "@/lib/utils";
-import { AnimatePresence, motion, MotionProps, Variants } from "motion/react";
-import { ElementType, memo } from "react";
 
 type AnimationType = "text" | "word" | "character" | "line";
 type AnimationVariant =
@@ -324,7 +329,6 @@ const TextAnimateBase = ({
     case "line":
       segments = children.split("\n");
       break;
-    case "text":
     default:
       segments = [children];
       break;

components/magicui/text-reveal.tsx

@@ -1,7 +1,17 @@
 "use client";
 
-import { motion, MotionValue, useScroll, useTransform } from "motion/react";
-import { ComponentPropsWithoutRef, FC, ReactNode, useRef } from "react";
+import {
+  type MotionValue,
+  motion,
+  useScroll,
+  useTransform,
+} from "motion/react";
+import {
+  type ComponentPropsWithoutRef,
+  type FC,
+  type ReactNode,
+  useRef,
+} from "react";
 
 import { cn } from "@/lib/utils";