Fix code splitting from tanstack/router migration

src-web/components/ImportCurlButton.tsx

@@ -1,5 +1,5 @@
 import { clear, readText } from '@tauri-apps/plugin-clipboard-manager';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import React, { useEffect, useState } from 'react';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useWindowFocus } from '../hooks/useWindowFocus';
@@ -22,7 +22,7 @@ export function ImportCurlButton() {
   }
 
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0, scale: 0 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ delay: 0.5 }}
@@ -50,6 +50,6 @@ export function ImportCurlButton() {
       >
         Import Curl
       </Button>
-    </motion.div>
+    </m.div>
   );
 }

src-web/components/Overlay.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { Portal } from './Portal';
@@ -48,7 +48,7 @@ export function Overlay({
     <Portal name={portalName}>
       {open && (
         <FocusTrap>
-          <motion.div
+          <m.div
             className={classNames('fixed inset-0', zIndexes[zIndex])}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -68,7 +68,7 @@ export function Overlay({
               <div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
             )}
             {children}
-          </motion.div>
+          </m.div>
         </FocusTrap>
       )}
     </Portal>

src-web/components/Settings/SettingsGeneral.tsx

@@ -82,7 +82,7 @@ export function SettingsGeneral() {
         checked={false}
         title="Send Usage Statistics (all tracking was removed in 2025.1.2)"
         disabled
-        onChange={(telemetry) => updateSettings.mutate({ telemetry })}
+        onChange={() => {}}
       />
 
       <Separator className="my-4" />

src-web/components/Toasts.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { useAtomValue } from 'jotai';
 import React, { type ReactNode } from 'react';
 import { hideToast, toastsAtom } from '../lib/toast';

src-web/components/Workspace.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import {duplicateWebsocketRequest} from "../commands/duplicateWebsocketRequest";
@@ -137,7 +137,7 @@ export function Workspace() {
           portalName="sidebar"
           onClose={() => setFloatingSidebarHidden(true)}
         >
-          <motion.div
+          <m.div
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
             className={classNames(
@@ -150,7 +150,7 @@ export function Workspace() {
               <SidebarActions />
             </HeaderSize>
             <Sidebar />
-          </motion.div>
+          </m.div>
         </Overlay>
       ) : (
         <>

src-web/components/core/Dialog.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import { useKey } from 'react-use';
@@ -65,7 +65,7 @@ export function Dialog({
         aria-labelledby={titleId}
         aria-describedby={descriptionId}
       >
-        <motion.div
+        <m.div
           initial={{ top: 5, scale: 0.97 }}
           animate={{ top: 0, scale: 1 }}
           className={classNames(
@@ -122,7 +122,7 @@ export function Dialog({
               />
             </div>
           )}
-        </motion.div>
+        </m.div>
       </div>
     </Overlay>
   );

src-web/components/core/Dropdown.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { atom } from 'jotai';
 import type {
   CSSProperties,
@@ -497,7 +497,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
         )}
         {isOpen && (
           <Overlay noBackdrop open={isOpen} portalName="dropdown-menu">
-            <motion.div
+            <m.div
               ref={menuRef}
               tabIndex={0}
               onKeyDown={handleMenuKeyDown}
@@ -574,7 +574,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
                   );
                 })}
               </VStack>
-            </motion.div>
+            </m.div>
           </Overlay>
         )}
       </>

src-web/components/core/Toast.tsx

@@ -1,6 +1,6 @@
 import type { ShowToastRequest } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
+import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { useKey } from 'react-use';
@@ -45,7 +45,7 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
   const toastIcon = icon ?? (color && color in ICONS && ICONS[color]);
 
   return (
-    <motion.div
+    <m.div
       initial={{ opacity: 0, right: '-10%' }}
       animate={{ opacity: 100, right: 0 }}
       exit={{ opacity: 0, right: '-100%' }}
@@ -80,7 +80,7 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
 
         {timeout != null && (
           <div className="w-full absolute bottom-0 left-0 right-0">
-            <motion.div
+            <m.div
               className="bg-surface-highlight h-[3px]"
               initial={{ width: '100%' }}
               animate={{ width: '0%', opacity: 0.2 }}
@@ -89,6 +89,6 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
           </div>
         )}
       </div>
-    </motion.div>
+    </m.div>
   );
 }

src-web/package.json

@@ -23,10 +23,10 @@
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tanstack/react-query": "^5.62.16",
-    "@tanstack/react-router": "^1.95.1",
-    "@tanstack/react-virtual": "^3.11.2",
-    "@tauri-apps/api": "^2.0.1",
+    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-router": "^1.111.3",
+    "@tanstack/react-virtual": "^3.13.0",
+    "@tauri-apps/api": "^2.2.0",
     "@tauri-apps/plugin-clipboard-manager": "^2.0.0",
     "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-fs": "^2.0.0",
@@ -43,7 +43,7 @@
     "eventemitter3": "^5.0.1",
     "focus-trap-react": "^10.2.3",
     "format-graphql": "^1.5.0",
-    "framer-motion": "^11.5.4",
+    "motion": "^12.4.7",
     "fuzzbunny": "^1.0.1",
     "hexy": "^0.3.5",
     "history": "^5.3.0",

src-web/routes/__root.tsx

@@ -1,7 +1,7 @@
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createRootRoute, Outlet } from '@tanstack/react-router';
 import classNames from 'classnames';
-import { MotionConfig } from 'framer-motion';
+import { domAnimation, LazyMotion, MotionConfig } from 'motion/react';
 import { Provider as JotaiProvider } from 'jotai';
 import React, { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
@@ -61,25 +61,27 @@ function RouteComponent() {
   return (
     <JotaiProvider store={jotaiStore}>
       <QueryClientProvider client={queryClient}>
-        <MotionConfig transition={{ duration: 0.1 }}>
-          <HelmetProvider>
-            <DndProvider backend={HTML5Backend}>
-              <Suspense>
-                <GlobalHooks />
-                <Toasts />
-                <Dialogs />
-                <div
-                  className={classNames(
-                    'w-full h-full',
-                    osInfo?.osType === 'linux' && 'border border-border-subtle',
-                  )}
-                >
-                  <Outlet />
-                </div>
-              </Suspense>
-            </DndProvider>
-          </HelmetProvider>
-        </MotionConfig>
+        <LazyMotion features={domAnimation}>
+          <MotionConfig transition={{ duration: 0.1 }}>
+            <HelmetProvider>
+              <DndProvider backend={HTML5Backend}>
+                <Suspense>
+                  <GlobalHooks />
+                  <Toasts />
+                  <Dialogs />
+                  <div
+                    className={classNames(
+                      'w-full h-full',
+                      osInfo?.osType === 'linux' && 'border border-border-subtle',
+                    )}
+                  >
+                    <Outlet />
+                  </div>
+                </Suspense>
+              </DndProvider>
+            </HelmetProvider>
+          </MotionConfig>
+        </LazyMotion>
         {/*<ReactQueryDevtools initialIsOpen />*/}
         {/*<TanStackRouterDevtools initialIsOpen />*/}
       </QueryClientProvider>

src-web/vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(async () => ({
     TanStackRouterVite({
       routesDirectory: './routes',
       generatedRouteTree: './routeTree.gen.ts',
+      autoCodeSplitting: true,
     }),
     svgr(),
     react(),