fix: peer dependency conflicts

surfsense_web/components/ModernHeroWithGradients.tsx

@@ -3,6 +3,7 @@ import { IconBrandDiscord, IconBrandGithub, IconFileTypeDoc, IconMail } from "@t
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { Logo } from "./Logo";
+import { motion, type Variants } from "framer-motion";
 
 export function ModernHeroWithGradients() {
 	return (

surfsense_web/components/Navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { IconMail, IconMenu2, IconUser, IconX } from "@tabler/icons-react";
-import { AnimatePresence, motion, useMotionValueEvent, useScroll } from "motion/react";
+import { AnimatePresence, motion, useMotionValueEvent, useScroll } from "framer-motion";
 import Link from "next/link";
 import { useRef, useState } from "react";
 import { cn } from "@/lib/utils";
@@ -39,7 +39,7 @@ export const Navbar = () => {
 	});
 	const [visible, setVisible] = useState<boolean>(false);
 
-	useMotionValueEvent(scrollY, "change", (latest) => {
+	useMotionValueEvent(scrollY, "change", (latest: any) => {
 		if (latest > 100) {
 			setVisible(true);
 		} else {

surfsense_web/components/chat/AnimatedEmptyState.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useInView } from "motion/react";
+import { useInView } from "framer-motion";
 import { Manrope } from "next/font/google";
 import { useEffect, useMemo, useReducer, useRef } from "react";
 import { RoughNotation, RoughNotationGroup } from "react-rough-notation";

surfsense_web/components/contact/contact-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { IconMailFilled } from "@tabler/icons-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import type React from "react";

surfsense_web/components/onboard/add-provider-step.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AlertCircle, Bot, Plus, Trash2 } from "lucide-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";

surfsense_web/components/onboard/assign-roles-step.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AlertCircle, Bot, Brain, CheckCircle, Zap } from "lucide-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";

surfsense_web/components/onboard/completion-step.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowRight, Bot, Brain, CheckCircle, Sparkles, Zap } from "lucide-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";

surfsense_web/components/pricing.tsx

@@ -2,7 +2,7 @@
 
 import NumberFlow from "@number-flow/react";
 import confetti from "canvas-confetti";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { Check, Star } from "lucide-react";
 import Link from "next/link";
 import { useRef, useState } from "react";

surfsense_web/components/search-space-form.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { MoveLeftIcon, Plus, Search, Trash2 } from "lucide-react";
-import { motion, type Variants } from "motion/react";
+import { motion, type Variants } from "framer-motion";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

surfsense_web/components/settings/llm-role-manager.tsx

@@ -12,7 +12,7 @@ import {
 	Settings2,
 	Zap,
 } from "lucide-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";

surfsense_web/components/settings/model-config-manager.tsx

@@ -14,7 +14,7 @@ import {
 	Settings2,
 	Trash2,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Alert, AlertDescription } from "@/components/ui/alert";

surfsense_web/components/theme/theme-toggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { MoonIcon, SunIcon } from "lucide-react";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";

surfsense_web/components/ui/sonner.tsx

@@ -1,28 +1,25 @@
-"use client";
+"use client"
 
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = "system" } = useTheme();
+  const { theme = "system" } = useTheme()
 
-	return (
-		<Sonner
-			theme={theme as ToasterProps["theme"]}
-			className="toaster group"
-			toastOptions={{
-				classNames: {
-					toast:
-						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-					description: "group-[.toast]:text-muted-foreground",
-					actionButton:
-						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
-					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
-				},
-			}}
-			{...props}
-		/>
-	);
-};
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
 
-export { Toaster };
+export { Toaster }

surfsense_web/components/ui/spotlight.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { motion, type SpringOptions, useSpring, useTransform } from "motion/react";
+import { motion, type SpringOptions, useSpring, useTransform } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 

surfsense_web/components/ui/tilt.tsx

@@ -8,7 +8,7 @@ import {
 	useMotionValue,
 	useSpring,
 	useTransform,
-} from "motion/react";
+} from "framer-motion";
 import type React from "react";
 import { useRef } from "react";