feat: Implement Spatial Theme Transition (The Wave) (#8856)

Author: tobiu

apps/portal/view/ViewportController.mjs

@@ -273,11 +273,34 @@ class ViewportController extends Controller {
     /**
      * @param {Object} data
      */
-    onSwitchTheme(data) {
+    async onSwitchTheme(data) {
         let me       = this,
             viewport = me.component,
             oldTheme = viewport.theme || 'neo-theme-neo-light',
-            newTheme = oldTheme === 'neo-theme-neo-light' ? 'neo-theme-neo-dark' : 'neo-theme-neo-light';
+            newTheme = oldTheme === 'neo-theme-neo-light' ? 'neo-theme-neo-dark' : 'neo-theme-neo-light',
+            radius, x, y;
+
+        if (data.clientX) {
+            x      = data.clientX;
+            y      = data.clientY;
+            radius = Math.hypot(Math.max(x, 3000 - x), Math.max(y, 3000 - y)) // simplified max calculation
+        }
+
+        await Neo.main.DomAccess.startViewTransition({
+            animate: {
+                keyframes: [
+                    {clipPath: `circle(0px at ${x}px ${y}px)`},
+                    {clipPath: `circle(${radius}px at ${x}px ${y}px)`}
+                ],
+                options: {
+                    duration     : 500,
+                    easing       : 'ease-in',
+                    pseudoElement: '::view-transition-new(root)'
+                }
+            },
+            delay   : 100,
+            windowId: me.windowId
+        });
 
         me.setTheme(newTheme)
     }

resources/scss/src/apps/portal/Viewport.scss

@@ -7,6 +7,11 @@ body {
     }
 }
 
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation     : none;
+    mix-blend-mode: normal;
+}
 
 .neo-viewport {
     // sometimes when transitioning between card & cube layouts, the flex value does get lost

src/main/DomAccess.mjs

@@ -82,6 +82,7 @@ class DomAccess extends Base {
                 'selectNode',
                 'setBodyCls',
                 'setStyle',
+                'startViewTransition',
                 'syncModalMask',
                 'trapFocus',
                 'windowScrollTo'
@@ -862,6 +863,33 @@ class DomAccess extends Base {
         })
     }
 
+    /**
+     * @param {Object} data
+     * @param {Object} [data.animate]
+     * @param {Number} [data.delay=50]
+     * @returns {Promise<Boolean>}
+     */
+    async startViewTransition(data) {
+        if (!document.startViewTransition) {
+            return false
+        }
+
+        const transition = document.startViewTransition(async () => {
+            await this.timeout(data.delay || 50)
+        });
+
+        if (data.animate) {
+            transition.ready.then(() => {
+                document.documentElement.animate(
+                    data.animate.keyframes,
+                    data.animate.options
+                )
+            })
+        }
+
+        return true
+    }
+
     /**
      * See: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy
      * @param {Object} data