ci: apply automated fixes

Author: autofix-ci[bot]

docs/router/framework/react/how-to/integrate-chakra-ui.md

@@ -166,7 +166,11 @@ interface ChakraNavProps {
   brandTo?: string
 }
 
-export function ChakraNav({ items, brand = 'Logo', brandTo = '/' }: ChakraNavProps) {
+export function ChakraNav({
+  items,
+  brand = 'Logo',
+  brandTo = '/',
+}: ChakraNavProps) {
   const { isOpen, onToggle } = useDisclosure()
   const matchRoute = useMatchRoute()
 
@@ -190,7 +194,9 @@ export function ChakraNav({ items, brand = 'Logo', brandTo = '/' }: ChakraNavPro
         >
           <IconButton
             onClick={onToggle}
-            icon={isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />}
+            icon={
+              isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
+            }
             variant="ghost"
             aria-label="Toggle Navigation"
           />
@@ -255,7 +261,11 @@ function MobileNav({ items }: { items: NavItem[] }) {
   const matchRoute = useMatchRoute()
 
   return (
-    <Stack bg={useColorModeValue('white', 'gray.800')} p={4} display={{ md: 'none' }}>
+    <Stack
+      bg={useColorModeValue('white', 'gray.800')}
+      p={4}
+      display={{ md: 'none' }}
+    >
       {items.map((item) => {
         const isActive = matchRoute({ to: item.to, fuzzy: !item.exact })
 
@@ -265,7 +275,9 @@ function MobileNav({ items }: { items: NavItem[] }) {
             to={item.to}
             py={2}
             fontWeight={isActive ? 'bold' : 'medium'}
-            color={isActive ? 'brand.500' : useColorModeValue('gray.600', 'gray.200')}
+            color={
+              isActive ? 'brand.500' : useColorModeValue('gray.600', 'gray.200')
+            }
             _hover={{
               textDecoration: 'none',
             }}
@@ -313,7 +325,8 @@ export function ChakraBreadcrumb({
 
   const breadcrumbItems = pathSegments.map((segment, index) => {
     const path = '/' + pathSegments.slice(0, index + 1).join('/')
-    const label = config[segment] || segment.charAt(0).toUpperCase() + segment.slice(1)
+    const label =
+      config[segment] || segment.charAt(0).toUpperCase() + segment.slice(1)
     const isLast = index === pathSegments.length - 1
 
     return {
@@ -431,7 +444,11 @@ export function ChakraCardGrid({
   })
 
   return (
-    <SimpleGrid columns={columns} spacing={spacing} minChildWidth={minChildWidth}>
+    <SimpleGrid
+      columns={columns}
+      spacing={spacing}
+      minChildWidth={minChildWidth}
+    >
       {children}
     </SimpleGrid>
   )
@@ -602,7 +619,11 @@ function PostPage() {
       <VStack spacing={8} align="stretch">
         {/* Back Navigation */}
         <Box>
-          <RouterLink to="/posts" color="brand.500" _hover={{ textDecoration: 'none' }}>
+          <RouterLink
+            to="/posts"
+            color="brand.500"
+            _hover={{ textDecoration: 'none' }}
+          >
             <HStack spacing={2}>
               <ArrowBackIcon />
               <Text>Back to Posts</Text>
@@ -613,7 +634,7 @@ function PostPage() {
         {/* Post Header */}
         <VStack spacing={4} align="start">
           <Heading size="2xl">Understanding TanStack Router</Heading>
-          
+
           <HStack spacing={3}>
             <Tag colorScheme="brand">
               <TagLabel>Tutorial</TagLabel>
@@ -630,15 +651,16 @@ function PostPage() {
         <Box>
           <VStack spacing={4} align="start">
             <Text color={textColor} lineHeight="tall">
-              This is the detailed content of post {postId}. In this comprehensive guide,
-              we'll explore how to integrate TanStack Router with Chakra UI to create
-              beautiful, accessible, and responsive web applications.
+              This is the detailed content of post {postId}. In this
+              comprehensive guide, we'll explore how to integrate TanStack
+              Router with Chakra UI to create beautiful, accessible, and
+              responsive web applications.
             </Text>
 
             <Text color={textColor} lineHeight="tall">
-              Chakra UI provides a simple, modular, and accessible component library
-              that gives you the building blocks you need to build React applications
-              with speed.
+              Chakra UI provides a simple, modular, and accessible component
+              library that gives you the building blocks you need to build React
+              applications with speed.
             </Text>
           </VStack>
         </Box>
@@ -724,12 +746,12 @@ export const RouterButton = createLink(
 import { ColorModeScript } from '@chakra-ui/react'
 
 // Add to your index.html head
-<ColorModeScript initialColorMode={theme.config.initialColorMode} />
+;<ColorModeScript initialColorMode={theme.config.initialColorMode} />
 
 // Or use localStorage manager
 import { localStorageManager } from '@chakra-ui/react'
 
-<ChakraProvider theme={theme} colorModeManager={localStorageManager}>
+;<ChakraProvider theme={theme} colorModeManager={localStorageManager}>
   {children}
 </ChakraProvider>
 ```
@@ -763,24 +785,28 @@ const columns = useBreakpointValue({
 Before deploying your Chakra UI + TanStack Router app:
 
 ### Functionality
+
 - [ ] All router-compatible components work correctly
 - [ ] Navigation states properly reflected
 - [ ] Theme persists across route changes
 - [ ] TypeScript compilation successful
 
 ### Accessibility
+
 - [ ] Keyboard navigation working
 - [ ] Screen reader compatibility tested
 - [ ] Color contrast meets WCAG standards
 - [ ] Focus management working properly
 
 ### Performance
+
 - [ ] Bundle size optimized
 - [ ] Color mode switching performant
 - [ ] No unnecessary re-renders
 - [ ] Images and icons optimized
 
 ### Responsiveness
+
 - [ ] Works on mobile devices
 - [ ] Tablet layouts functional
 - [ ] Desktop experience optimal
@@ -793,4 +819,4 @@ Before deploying your Chakra UI + TanStack Router app:
 - [Chakra UI Documentation](https://chakra-ui.com/getting-started) - Complete component library guide
 - [Chakra UI Recipes](https://chakra-ui.com/community/recipes) - Common patterns and recipes
 - [TanStack Router createLink API](../api/router#createlink) - API documentation for component integration
-- [Emotion CSS-in-JS](https://emotion.sh/docs/introduction) - Styling library used by Chakra UI
+- [Emotion CSS-in-JS](https://emotion.sh/docs/introduction) - Styling library used by Chakra UI

docs/router/framework/react/how-to/integrate-framer-motion.md

@@ -117,14 +117,14 @@ interface RouteAnimationContainerProps {
   children: ReactNode
 }
 
-export function RouteAnimationContainer({ children }: RouteAnimationContainerProps) {
+export function RouteAnimationContainer({
+  children,
+}: RouteAnimationContainerProps) {
   const router = useRouter()
-  
+
   return (
     <AnimatePresence mode="wait" initial={false}>
-      <div key={router.state.location.pathname}>
-        {children}
-      </div>
+      <div key={router.state.location.pathname}>{children}</div>
     </AnimatePresence>
   )
 }
@@ -236,9 +236,7 @@ export function AnimatedTabs({ items, className }: AnimatedTabsProps) {
             key={item.to}
             to={item.to}
             className={`relative px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-              isActive
-                ? 'text-blue-600'
-                : 'text-gray-600 hover:text-gray-900'
+              isActive ? 'text-blue-600' : 'text-gray-600 hover:text-gray-900'
             }`}
           >
             {isActive && (
@@ -281,7 +279,10 @@ interface AnimatedMobileMenuProps {
   trigger: React.ReactNode
 }
 
-export function AnimatedMobileMenu({ items, trigger }: AnimatedMobileMenuProps) {
+export function AnimatedMobileMenu({
+  items,
+  trigger,
+}: AnimatedMobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   const menuVariants = {
@@ -313,9 +314,7 @@ export function AnimatedMobileMenu({ items, trigger }: AnimatedMobileMenuProps)
   return (
     <>
       {/* Trigger */}
-      <button onClick={() => setIsOpen(!isOpen)}>
-        {trigger}
-      </button>
+      <button onClick={() => setIsOpen(!isOpen)}>{trigger}</button>
 
       {/* Overlay */}
       <AnimatePresence>
@@ -379,11 +378,11 @@ interface AnimatedFabProps {
   className?: string
 }
 
-export function AnimatedFab({ 
-  to, 
-  label = 'Add', 
+export function AnimatedFab({
+  to,
+  label = 'Add',
   icon = <Plus className="w-6 h-6" />,
-  className = ''
+  className = '',
 }: AnimatedFabProps) {
   return (
     <motion.div
@@ -426,7 +425,11 @@ interface SharedElementProps {
   className?: string
 }
 
-export function SharedElement({ layoutId, children, className }: SharedElementProps) {
+export function SharedElement({
+  layoutId,
+  children,
+  className,
+}: SharedElementProps) {
   return (
     <motion.div
       layoutId={layoutId}
@@ -488,7 +491,7 @@ export function RouteVariants({ children }: RouteVariantsProps) {
   // Different animations based on route depth
   const getVariants = (path: string) => {
     const depth = path.split('/').length - 1
-    
+
     if (depth === 1) {
       // Top-level routes slide from right
       return {
@@ -664,6 +667,7 @@ function PostsPage() {
 **Solutions:**
 
 1. **Ensure proper key for AnimatePresence:**
+
    ```tsx
    <AnimatePresence mode="wait">
      <motion.div key={router.state.location.pathname}>
@@ -673,10 +677,11 @@ function PostsPage() {
    ```
 
 2. **Use layout animations correctly:**
+
    ```tsx
    // ❌ This might cause layout shifts
    <motion.div animate={{ x: 100 }}>
-   
+
    // ✅ Use layout for changing layouts
    <motion.div layout>
    ```
@@ -688,13 +693,14 @@ function PostsPage() {
 **Solutions:**
 
 1. **Prefer transform and opacity animations:**
+
    ```tsx
    // ✅ GPU-accelerated properties
    const variants = {
      initial: { opacity: 0, scale: 0.95 },
      in: { opacity: 1, scale: 1 },
    }
-   
+
    // ❌ Avoid animating layout properties
    const badVariants = {
      initial: { width: 0, height: 0 },
@@ -704,10 +710,7 @@ function PostsPage() {
 
 2. **Use will-change CSS property sparingly:**
    ```tsx
-   <motion.div
-     style={{ willChange: 'transform' }}
-     animate={{ x: 100 }}
-   />
+   <motion.div style={{ willChange: 'transform' }} animate={{ x: 100 }} />
    ```
 
 ### Layout Shift Issues
@@ -722,7 +725,7 @@ function PostsPage() {
   layoutId="shared-element"
   style={{ position: 'relative' }}
   transition={{
-    layout: { duration: 0.3 }
+    layout: { duration: 0.3 },
   }}
 >
   {children}
@@ -736,24 +739,28 @@ function PostsPage() {
 Before deploying your animated TanStack Router app:
 
 ### Performance
+
 - [ ] Animations use GPU-accelerated properties (transform, opacity)
 - [ ] No unnecessary will-change CSS properties
 - [ ] Complex animations are conditional on user preferences
 - [ ] Frame rate stays above 60fps on target devices
 
 ### User Experience
+
 - [ ] Animations respect user's motion preferences
 - [ ] Loading states have appropriate animations
 - [ ] Navigation feels responsive and smooth
 - [ ] Animations enhance rather than distract from content
 
 ### Accessibility
+
 - [ ] Respect prefers-reduced-motion media query
 - [ ] Animations don't interfere with screen readers
 - [ ] Focus management works during transitions
 - [ ] Essential content isn't hidden behind animations
 
 ### Technical
+
 - [ ] Bundle size impact acceptable
 - [ ] No animation-related console errors
 - [ ] Smooth transitions on slower devices
@@ -766,4 +773,4 @@ Before deploying your animated TanStack Router app:
 - [Framer Motion Documentation](https://www.framer.com/motion/) - Complete animation library guide
 - [React Transition Group Migration](https://www.framer.com/motion/migrate-from-react-transition-group/) - Migration guide from other animation libraries
 - [Animation Performance](https://web.dev/animations-guide/) - Web performance guide for animations
-- [TanStack Router Route Transitions](../guide/route-transitions) - Official guide for route animations
+- [TanStack Router Route Transitions](../guide/route-transitions) - Official guide for route animations