Wrap document.startViewTransition with supports check

src/components/movable/MoveControls.jsx

@@ -8,6 +8,7 @@ import {AreasContext} from './MovablePanels';
 import { Tutorial } from '../../_unstable/Tutorial';
 import { MovableElementContext } from './MovableElement';
 import { DragHandle } from './DragHandle';
+import { doTransition } from '../../functions/viewTransition';
 
 export function MoveControls() {
   const {
@@ -41,7 +42,7 @@ export function MoveControls() {
       </Checkbox>}
       <Checkbox controls={[showMovers, setShowMovers]}>Move elements</Checkbox>
       {Object.keys(uiState.map).length > 0 && (
-        <button onClick={() => document.startViewTransition(() => resetPanels())}>
+        <button onClick={() => doTransition(() => resetPanels())}>
           reset
         </button>
       )}
@@ -86,7 +87,7 @@ export function MoveControls() {
             if (name === '') {
               return;
             }
-            document.startViewTransition(() => {
+            doTransition(() => {
               setUiState(JSON.parse(windowArrangments[name]));
             });
           }}

src/components/ui/HistoryControls.tsx

@@ -17,6 +17,7 @@ import { Checkbox } from '../controls/Checkbox';
 import { use } from '../../state';
 import { Tutorial } from '../../_unstable/Tutorial';
 import { icons } from '../../previewComponents';
+import { doTransition } from '../../functions/viewTransition';
 
 function HistoryBack() {
   const { past, historyOffset } = useContext(HistoryNavigateContext);
@@ -285,7 +286,7 @@ export function scrollHistory(event) {
     delta > 0 ? historyBack(delta, true) : historyForward(-delta, true);
   // };
   // if (now - lastScroll > 300 && Math.abs(delta) === 1) {
-    // document.startViewTransition(navigate);
+    // doTransition(navigate);
   // } else {
   //   navigate();
   // }

src/functions/viewTransition.ts

@@ -0,0 +1,3 @@
+const supports = !!document.startViewTransition;
+
+export const doTransition = supports ? (f => document.startViewTransition(f)) : (f: () => void) => f();

src/hooks/useResumableReducer.tsx

@@ -10,6 +10,7 @@ import { deleteStoredHistory, storeActions } from '../_unstable/historyStore';
 import { saveAsJsonFile } from '../functions/export';
 import { Action } from '../functions/reducerOf';
 import { use } from '../state';
+import { doTransition } from '../functions/viewTransition';
 
 type Reducer<T> = (previous: T, action) => T
 
@@ -537,13 +538,13 @@ export function historyBackOne(): void {
   // All of this happens even if the button does not move during the transition.
   // So this uses a view transition mostly because it's a very clear demonstration of these drawbacks,
   // and the other history UI makes it so you don't realy need these buttons anyway.
-  document.startViewTransition(() => {
+  doTransition(() => {
     historyBack(1);
   });
 }
 
 export function historyForwardOne(): void {
-  document.startViewTransition(() => {
+  doTransition(() => {
     historyForward(1);
   });
 }