ACM-VIT · cursor · Aug 24, 2026
diff --git a/app/(app)/home/course-search.tsx b/app/(app)/home/course-search.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import React, { Activity, addTransitionType, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Activity, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import Image from "@/app/components/common/app-image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import SearchIcon from "@/app/components/assets/seacrh.svg";
 import VoiceAgentButton from "@/app/components/voice/voice-agent-button";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { getAliasCourseCodes } from "@/lib/course-aliases";
 import { createCourseFuse } from "@/lib/course-search-fuse";
 import { normalizeCourseCode } from "@/lib/course-tags";
@@ -74,14 +75,14 @@ export default function CourseSearch({ courses }: CourseSearchProps) {
     const navigateForward = (href: string, beforeNavigate?: () => void) => {
         startTransition(() => {
             beforeNavigate?.();
-            addTransitionType("nav-forward");
+            addReactTransitionType("nav-forward");
             push(href);
         });
     };
 
     const navigateToSearch = (href: string) => {
         startTransition(() => {
-            addTransitionType("filter-results");
+            addReactTransitionType("filter-results");
             push(href);
         });
     };

diff --git a/app/components/command-palette.tsx b/app/components/command-palette.tsx
@@ -2,7 +2,6 @@
 
 import React, {
   Activity,
-  addTransitionType,
   startTransition,
   useEffect,
   useEffectEvent,
@@ -14,6 +13,7 @@ import { Command } from "cmdk";
 import * as Dialog from "@radix-ui/react-dialog";
 import { useAgent } from "agents/react";
 import { usePathname, useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import {
   invalidateAuthSessionCache,
   useGuestPrompt,
@@ -1460,7 +1460,7 @@ function CommandPaletteSession({
     if (href === pathname) return;
 
     startTransition(() => {
-      addTransitionType(href.startsWith("/past_papers/") ? "nav-forward" : "nav-lateral");
+      addReactTransitionType(href.startsWith("/past_papers/") ? "nav-forward" : "nav-lateral");
       push(href);
     });
   };

diff --git a/app/components/common/directional-transition.tsx b/app/components/common/directional-transition.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { ViewTransition, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import type { ViewTransitionClass } from "react";
+import { OptionalViewTransition } from "@/app/components/common/react-transition";
 
 // `<ViewTransition>` is an experimental React API. It used to be keyed on
 // `pathname`, which forced the whole page subtree to remount on every
@@ -70,12 +71,12 @@ export default function DirectionalTransition({
     }
 
     return (
-        <ViewTransition
+        <OptionalViewTransition
             enter={NAV_TRANSITION_CLASSES}
             update={NAV_TRANSITION_CLASSES}
             default="none"
         >
             {children}
-        </ViewTransition>
+        </OptionalViewTransition>
     );
 }
diff --git a/app/components/common/react-transition.tsx b/app/components/common/react-transition.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import type { ViewTransitionProps } from "react";
+
+type ReactTransitionRuntime = typeof React & {
+    addTransitionType?: (type: string) => void;
+    ViewTransition?: React.ComponentType<ViewTransitionProps>;
+};
+
+const reactTransitionRuntime = React as ReactTransitionRuntime;
+
+export function addReactTransitionType(type: string) {
+    reactTransitionRuntime.addTransitionType?.(type);
+}
+
+export function OptionalViewTransition({
+    children,
+    ...props
+}: ViewTransitionProps) {
+    const ViewTransition = reactTransitionRuntime.ViewTransition;
+
+    if (typeof ViewTransition !== "function") {
+        return <>{children}</>;
+    }
+
+    return <ViewTransition {...props}>{children}</ViewTransition>;
+}
diff --git a/app/components/mobile-tab-bar.tsx b/app/components/mobile-tab-bar.tsx
@@ -3,7 +3,8 @@
 import Link from "next/link";
 import Image from "@/app/components/common/app-image";
 import { usePathname, useRouter } from "next/navigation";
-import { addTransitionType, startTransition, useEffect, useReducer, type MouseEvent } from "react";
+import { startTransition, useEffect, useReducer, type MouseEvent } from "react";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { APP_NAV_LINKS } from "@/lib/app-nav-links";
 import c2cStyles from "./mobile-tab-bar.module.css";
 
@@ -96,7 +97,7 @@ export default function MobileTabBar({ toolsSheetOpen = false }: Props) {
     event.preventDefault();
     setNavTransitionOrigin(event.currentTarget);
     startTransition(() => {
-      addTransitionType("nav-lateral");
+      addReactTransitionType("nav-lateral");
       push(href);
     });
   };

diff --git a/app/components/nav-bar.tsx b/app/components/nav-bar.tsx
@@ -1,9 +1,10 @@
 "use client";
-import React, { addTransitionType, startTransition, useCallback, useEffect, useEffectEvent, useReducer, useRef, useSyncExternalStore } from "react";
+import React, { startTransition, useCallback, useEffect, useEffectEvent, useReducer, useRef, useSyncExternalStore } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { createPortal } from "react-dom";
 import Image from "@/app/components/common/app-image";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { usePathname, useRouter } from "next/navigation";
 import ThemeToggleSwitch from "@/app/components/common/theme-toggle";
 import { SignOut } from "@/app/components/sign-out";
@@ -296,7 +297,7 @@ const NavBar: React.FC<Props> = ({
     event.preventDefault();
     setNavTransitionOrigin(event.currentTarget);
     startTransition(() => {
-      addTransitionType("nav-lateral");
+      addReactTransitionType("nav-lateral");
       push(href);
     });
   };

diff --git a/app/components/notes/notes-course-search.tsx b/app/components/notes/notes-course-search.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import React, { Activity, addTransitionType, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import React, { Activity, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import Image from "@/app/components/common/app-image";
 import SearchIcon from "@/app/components/assets/seacrh.svg";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { getAliasCourseCodes } from "@/lib/course-aliases";
 import { createCourseFuse } from "@/lib/course-search-fuse";
 import { normalizeCourseCode } from "@/lib/course-tags";
@@ -156,7 +157,7 @@ export default function NotesCourseSearch({
         });
 
         startTransition(() => {
-            addTransitionType("nav-forward");
+            addReactTransitionType("nav-forward");
             push(`/notes/course/${encodeURIComponent(course.code)}`);
         });
         setIsOpen(false);
@@ -180,7 +181,7 @@ export default function NotesCourseSearch({
             return;
         }
         startTransition(() => {
-            addTransitionType("filter-results");
+            addReactTransitionType("filter-results");
             push(`/notes?search=${encodeURIComponent(trimmed)}`);
         });
         setIsOpen(false);
@@ -246,7 +247,7 @@ export default function NotesCourseSearch({
                     hasSyllabus: false,
                 });
                 startTransition(() => {
-                    addTransitionType("nav-forward");
+                    addReactTransitionType("nav-forward");
                     push(`/notes/course/${encodeURIComponent(course.code)}`);
                 });
                 return;
@@ -277,13 +278,13 @@ export default function NotesCourseSearch({
                     hasSyllabus: false,
                 });
                 startTransition(() => {
-                    addTransitionType("nav-forward");
+                    addReactTransitionType("nav-forward");
                     push(`/notes/course/${encodeURIComponent(exact.code)}`);
                 });
                 return;
             }
             startTransition(() => {
-                addTransitionType("filter-results");
+                addReactTransitionType("filter-results");
                 push(`/notes?search=${encodeURIComponent(trimmed)}`);
             });
         } catch {

diff --git a/app/components/past_papers/answer-key-toggle.tsx b/app/components/past_papers/answer-key-toggle.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { addTransitionType, useTransition } from "react";
+import React, { useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 
 type Props = {
     basePath: string;
@@ -23,7 +24,7 @@ export default function AnswerKeyToggle({ basePath, count, searchString }: Props
 
         const qs = params.toString();
         startTransition(() => {
-            addTransitionType("filter-results");
+            addReactTransitionType("filter-results");
             replace(qs ? `${basePath}?${qs}` : basePath);
         });
     };

diff --git a/app/components/past_papers/course-paper-grid.tsx b/app/components/past_papers/course-paper-grid.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { ViewTransition, useCallback, useEffect, useEffectEvent, useMemo, useReducer, useRef } from "react";
+import React, { useCallback, useEffect, useEffectEvent, useMemo, useReducer, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useRouter } from "next/navigation";
 import {
@@ -12,6 +12,7 @@ import {
     PanelRight,
     X,
 } from "lucide-react";
+import { OptionalViewTransition } from "@/app/components/common/react-transition";
 import { useToast } from "@/app/components/ui/use-toast";
 import CoursePaperCard from "./course-paper-card";
 import type { CoursePaperListItem } from "@/lib/data/course-papers";
@@ -669,7 +670,7 @@ export default function CoursePaperGrid({
 
             <div className="course-paper-grid flex flex-wrap gap-3">
                 {papers.map((paper, index) => (
-                    <ViewTransition
+                    <OptionalViewTransition
                         key={paper.id}
                         enter={{
                             "filter-results": "paper-card-enter",
@@ -704,7 +705,7 @@ export default function CoursePaperGrid({
                                 onContextMenuOpen={openContextMenu}
                             />
                         </div>
-                    </ViewTransition>
+                    </OptionalViewTransition>
                 ))}
             </div>
 

diff --git a/app/components/past_papers/filter-bar.tsx b/app/components/past_papers/filter-bar.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { addTransitionType, memo, useCallback, useMemo, useTransition } from "react";
+import React, { memo, useCallback, useMemo, useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { examTypeLabel, examTypeToSlug, examSlugToType } from "@/lib/exam-slug";
 import type { Campus, ExamType, Semester } from "@/db";
 
@@ -102,7 +103,7 @@ export default function FilterBar({
         next.delete("page");
         const qs = next.toString();
         startTransition(() => {
-            addTransitionType("filter-results");
+            addReactTransitionType("filter-results");
             replace(qs ? `${basePath}?${qs}` : basePath);
         });
     }, [basePath, replace, startTransition]);

diff --git a/app/components/past_papers/past-papers-course-search.tsx b/app/components/past_papers/past-papers-course-search.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import React, { Activity, addTransitionType, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import React, { Activity, startTransition, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import Image from "@/app/components/common/app-image";
 import Link from "next/link";
 import SearchIcon from "@/app/components/assets/seacrh.svg";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import { getAliasCourseCodes } from "@/lib/course-aliases";
 import { createCourseFuse } from "@/lib/course-search-fuse";
 import { normalizeCourseCode } from "@/lib/course-tags";
@@ -204,7 +205,7 @@ export default function PastPapersCourseSearch({
     ) => {
         recordSelection(course, options);
         startTransition(() => {
-            addTransitionType("nav-forward");
+            addReactTransitionType("nav-forward");
             push(getCoursePastPapersPath(course.code));
         });
     };
@@ -288,7 +289,7 @@ export default function PastPapersCourseSearch({
                     hasSyllabus: false,
                 });
                 startTransition(() => {
-                    addTransitionType("nav-forward");
+                    addReactTransitionType("nav-forward");
                     push(`/past_papers/${encodeURIComponent(course.code)}`);
                 });
                 return;
@@ -322,7 +323,7 @@ export default function PastPapersCourseSearch({
                     hasSyllabus: false,
                 });
                 startTransition(() => {
-                    addTransitionType("nav-forward");
+                    addReactTransitionType("nav-forward");
                     push(`/past_papers/${encodeURIComponent(exact.code)}`);
                 });
                 return;

diff --git a/app/components/past_papers/sort-dropdown.tsx b/app/components/past_papers/sort-dropdown.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { addTransitionType, useTransition } from "react";
+import React, { useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 
 const OPTIONS = [
     { value: "seasonal", label: "Current exam first" },
@@ -34,7 +35,7 @@ export default function SortDropdown({
         params.delete("page");
         const qs = params.toString();
         startTransition(() => {
-            addTransitionType("filter-results");
+            addReactTransitionType("filter-results");
             replace(qs ? `${basePath}?${qs}` : basePath);
         });
     };

diff --git a/app/components/voice/voice-agent-provider.tsx b/app/components/voice/voice-agent-provider.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, {
-  addTransitionType,
   createContext,
   startTransition,
   useCallback,
@@ -12,6 +11,7 @@ import React, {
   useState,
 } from "react";
 import { useRouter } from "next/navigation";
+import { addReactTransitionType } from "@/app/components/common/react-transition";
 import {
   createVoiceControlController,
   defineVoiceTool,
@@ -428,7 +428,7 @@ export default function VoiceAgentProvider({
             }
 
             startTransition(() => {
-              addTransitionType("filter-results");
+              addReactTransitionType("filter-results");
               replace(nextPath);
             });
             await settleUi({ targetPath: nextPath });