fix: resolve new ESLint rules from eslint-plugin-react-hooks update

- Use useId() instead of Math.random() for stable ID generation in Checkbox and Switch
- Use deterministic rotation/delay calculations instead of Math.random() in CategoryGrid and ProblemSection
- Add eslint-disable comments for intentional setState in useEffect patterns:
  - Hydration safety (setMounted)
  - Initial localStorage sync
  - Route-based UI sync
  - Controlled component sync
  - Browser API initial sync (scroll position, media queries)
- Add eslint-disable for ref merging pattern in AnimatedCounter and StatCard

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/PackageManagerSelector.tsx

@@ -26,19 +26,21 @@ export function PackageManagerSelector({
 }: PackageManagerSelectorProps): React.ReactElement {
   const [selected, setSelected] = useState<PackageManager>('npm');
 
-  // Load from localStorage on mount
+  // Load from localStorage on mount - intentional initial sync from browser storage
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem(STORAGE_KEY) as PackageManager | null;
       if (stored && packageManagers.some((pm) => pm.id === stored)) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setSelected(stored);
       }
     }
   }, []);
 
-  // Sync with controlled value
+  // Sync with controlled value - controlled component pattern
   useEffect(() => {
     if (value) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setSelected(value);
     }
   }, [value]);
@@ -94,10 +96,12 @@ export function getInstallCommand(packageName: string, manager: PackageManager):
 export function usePackageManager(): [PackageManager, (manager: PackageManager) => void] {
   const [manager, setManager] = useState<PackageManager>('npm');
 
+  // Load from localStorage on mount - intentional initial sync from browser storage
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem(STORAGE_KEY) as PackageManager | null;
       if (stored && packageManagers.some((pm) => pm.id === stored)) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setManager(stored);
       }
     }

apps/web/src/components/ThemeToggle.tsx

@@ -9,8 +9,9 @@ export function ThemeToggle(): React.ReactElement {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
-  // useEffect only runs on the client, so we can safely show the UI
+  // useEffect only runs on the client - intentional hydration safety pattern
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
 

apps/web/src/components/dashboard/DashboardLayout.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useSession } from '@/lib/auth-client';
 import { Button } from '@tpmjs/ui/Button/Button';
 import { Icon, type IconName } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { useSession } from '@/lib/auth-client';
 import { AppHeader } from '../AppHeader';
 
 interface NavItem {
@@ -70,9 +70,10 @@ export function DashboardLayout({
     localStorage.setItem('dashboard-likes-expanded', String(likesExpanded));
   }, [likesExpanded]);
 
-  // Auto-expand if on a likes page
+  // Auto-expand if on a likes page - intentional route-based UI sync
   useEffect(() => {
     if (pathname.startsWith('/dashboard/likes')) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLikesExpanded(true);
     }
   }, [pathname]);
@@ -84,9 +85,10 @@ export function DashboardLayout({
     }
   }, [isPending, session, router]);
 
-  // Close sidebar on route change - pathname dependency triggers this effect
+  // Close sidebar on route change - intentional route-based UI sync
   // biome-ignore lint/correctness/useExhaustiveDependencies: pathname triggers effect
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setSidebarOpen(false);
   }, [pathname]);
 

apps/web/src/components/home/CategoryGrid.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Card, CardContent } from '@tpmjs/ui/Card/Card';
-import { Icon } from '@tpmjs/ui/Icon/Icon';
 import type { IconName } from '@tpmjs/ui/Icon/Icon';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
 import { useScrollReveal } from '@tpmjs/ui/system/hooks/useScrollReveal';
 
 export interface Category {
@@ -32,7 +32,8 @@ export function CategoryGrid({ categories }: CategoryGridProps): React.ReactElem
     <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {categories.map((category, index) => {
         const randomHeight = heights[index % heights.length] || 'h-36';
-        const randomDelay = Math.random() * 400; // 0-400ms random delay
+        // Deterministic delay based on index for stable renders
+        const randomDelay = (index * 47) % 400;
 
         return (
           <CategoryTile
@@ -62,8 +63,9 @@ function CategoryTile({
     delay,
   });
 
-  // Random rotation for entrance animation
-  const randomRotation = (Math.random() - 0.5) * 20; // -10 to +10 degrees
+  // Deterministic rotation based on delay for stable entrance animation
+  // Creates -10 to +10 degrees based on delay value
+  const randomRotation = (delay % 20) - 10;
 
   return (
     <a

apps/web/src/components/home/ProblemSection.tsx

@@ -24,8 +24,8 @@ export function ProblemSection(): React.ReactElement {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {problemPoints.map((problem, index) => {
-            // Random rotation for chaos
-            const rotation = (index % 2 === 0 ? 1 : -1) * (Math.random() * 5 + 2);
+            // Deterministic rotation for chaos effect (stable across renders)
+            const rotation = (index % 2 === 0 ? 1 : -1) * (((index * 1.3) % 5) + 2);
 
             return (
               <div