I think I kinda like this new view transition API 😍

src/routes/(editor).tsx

@@ -1,10 +1,9 @@
 import { Link, Title } from "@solidjs/meta";
-import { createEffect, createMemo, createSignal, ParentProps, Show } from "solid-js";
+import { Component, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { BsTranslate } from "solid-icons/bs";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
-import { isServer } from "solid-js/web";
+import { A, createAsync, useBeforeLeave } from "@solidjs/router";
-import { A, createAsync } from "@solidjs/router";
 import { createCommand, Modifier } from "~/features/command";
 import { ColorScheme, ColorSchemePicker, getColorScheme } from "~/components/colorschemepicker";
 import css from "./editor.module.css";
@@ -20,13 +19,24 @@ export default function Editor(props: ParentProps) {
         [ColorScheme.Dark]: '#333',
     }[ColorScheme[storedColorScheme()]]));
 
-    const supported = isServer || typeof window.showDirectoryPicker === 'function';
     const commands = [
         createCommand('open command palette', () => {
             commandPalette()?.show();
         }, { key: 'p', modifier: Modifier.Control | Modifier.Shift }),
     ];
 
+    const transition = (done: () => void) => {
+        if (!document.startViewTransition) { return done() }
+
+        const transition = document.startViewTransition(done)
+    }
+
+    useBeforeLeave((e) => {
+        e.preventDefault()
+
+        transition(() => { e.retry(true) })
+    });
+
     return <MenuProvider commands={commands}>
         <Title>Calque</Title>
 
@@ -53,13 +63,19 @@ export default function Editor(props: ParentProps) {
                 </section>
             </nav>
 
-            <Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
+            <section>
-                <FilesProvider>
+                <ErrorBoundary fallback={err => <ErrorComp error={err.message} />}>
-                    {props.children}
+                    <FilesProvider>
-                </FilesProvider>
+                        {props.children}
-            </Show>
+                    </FilesProvider>
+                </ErrorBoundary>
+            </section>
         </main>
 
         <CommandPalette api={setCommandPalette} />
     </MenuProvider>
 }
+
+const ErrorComp: Component<{ error: string }> = (props) => {
+    return <div class={css.error}>{props.error}</div>
+};

src/routes/editor.module.css

@@ -7,6 +7,7 @@
     background-color: var(--surface-1);
 
     .menu {
+        view-transition-name: menu;
         display: grid;
         grid-template-columns: auto minmax(0, 1fr) auto;
         grid-auto-flow: column;
@@ -48,4 +49,53 @@
             align-content: center;
         }
     }
+
+    & > section {
+        view-transition-name: content;
+    }
+}
+
+.error {
+    display: grid;
+    place-content: center;
+
+    background-color: color(from var(--fail) xyz x y z / .3);
+    color: var(--text-2);
+    border: 1px solid var(--fail);
+    border-radius: var(--radii-m);
+
+    margin: var(--padding-l);
+}
+
+@keyframes slide-left {
+    from {
+        translate: 0% 0;
+    }
+
+    to {
+        translate: -100% 0;
+    }
+}
+
+@keyframes slide-right {
+    from {
+        translate: 100% 0;
+    }
+
+    to {
+        translate: 0% 0;
+    }
+}
+
+/* ::view-transition-old(menu),
+::view-transition-new(menu) {
+    z-index: 1;
+} */
+
+::view-transition-old(content) {
+    animation-name: slide-left;
+}
+
+::view-transition-new(content) {
+    animation-name: slide-right;
 }