feat: view transitions [not done correctly, but i dont understand it]

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.60",
+	"version": "6.4.61",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.15.5",

src/app.css

@@ -26,6 +26,14 @@
     font-family: "Geist Mono", ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace !important;
   }
 
+  .exclude-transition {
+    view-transition-class: disabled;
+  }
+
+  ::view-transition-group(.disabled) {
+    animation-duration: 0s !important;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -269,6 +277,76 @@ body {
   transform: perspective(100vw) translate3d(0, 0, 0vw) rotateY(0deg) rotateX(0deg);
 }
 
+::view-transition-old(my-root),
+::view-transition-new(my-root) {
+  animation-duration: 200ms;
+  animation-timing-function: ease-in-out;
+}
+
+::view-transition-old(my-root) {
+  animation-name: fade-out;
+}
+
+::view-transition-new(my-root) {
+  animation-name: fade-in;
+}
+
+@media (prefers-reduced-motion) {
+
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+/* @media (max-width: 768px) {
+
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: 600ms !important;
+    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
+  }
+
+  ::view-transition-old(*) {
+    animation-name: slide-out-left !important;
+  }
+
+  ::view-transition-new(*) {
+    animation-name: slide-in-right !important;
+  }
+} */
+
+/* @keyframes slide-in-right {
+  from {
+    transform: translateX(40%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-10%);
+  }
+} */
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

src/lib/components/ui/player/player.svelte

@@ -551,7 +551,10 @@
       desc: 'Toggle Mute'
     },
     KeyP: {
-      fn: () => pip.pip(),
+      fn: () => {
+        goto('/app/player')
+        pip.pip()
+      },
       id: 'picture_in_picture',
       icon: PictureInPicture2,
       type: 'icon',

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
   import { setContext } from 'svelte'
   import { toast } from 'svelte-sonner'
 
+  import { onNavigate } from '$app/navigation'
   import Backplate from '$lib/components/Backplate.svelte'
   import Online from '$lib/components/Online.svelte'
   import { Menubar } from '$lib/components/ui/menubar'
@@ -34,6 +35,17 @@
       complete?.(0)
     }, displayThresholdMs)
   })
+
+  onNavigate((navigation) => {
+    if (!document.startViewTransition) return
+
+    return new Promise((resolve) => {
+      document.startViewTransition(async () => {
+        resolve()
+        await navigation.complete
+      })
+    })
+  })
 </script>
 
 <svelte:head>

tailwind.config.ts

@@ -31,6 +31,17 @@ const config: Config = {
         { values: { DEFAULT: undefined } }
       )
       api.addVariant('mobile', '@media (pointer: none), (pointer: coarse)')
+      api.matchUtilities(
+        {
+          'view-transition': (value) => ({
+            'view-transition-name': value
+          })
+        },
+        {
+          values: { DEFAULT: 'auto' },
+          type: 'any'
+        }
+      )
     })
   ],
   darkMode: ['class'],