fix(web): keep the sidebar through route transitions; end them within 120 ms

Router updates now run in a React transition, so a route whose code is still loading keeps the current page up
and the view transition captures the new page with its sidebar (it used to drop out and pop back on the first
course-to-lesson visit). The root group's 250 ms UA morph is off: pointer input goes to the document while a
transition runs, so it stays as short as the old page's 120 ms fade. The pointer-events rule had no effect.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/src/main.tsx

@@ -70,12 +70,15 @@ const router = createBrowserRouter([
 // Navigating to another kind of page (library, course, lesson, account, studio…) runs as a view transition: the old
 // page dissolves while the new one's content rises in (styles in @stc/ui tokens.css). Steps within a page (lesson
 // to lesson) are animated by the page itself. Reduced motion and browsers without the API navigate plainly.
+// Router updates run in a React transition (v7_startTransition), so a route whose code is still loading keeps the
+// current page up instead of falling back to nothing; the view transition captures the new page once it renders
+// (with the course sidebar still in place).
 const routePatterns = featureRoutes.map((r) => ({ path: r.path }));
 const plainNavigate = router.navigate.bind(router);
 router.navigate = ((to: Parameters<typeof plainNavigate>[0], opts?: Parameters<typeof plainNavigate>[1]) => {
   const animate = typeof to !== "number" && to !== null && "startViewTransition" in document && !reducedMotion()
     && changesPage(routePatterns, router.state.location.pathname, typeof to === "string" ? to : createPath(to));
-  return plainNavigate(to as never, animate ? { ...opts, viewTransition: opts?.viewTransition ?? true, flushSync: opts?.flushSync ?? true } : opts);
+  return plainNavigate(to as never, animate ? { ...opts, viewTransition: opts?.viewTransition ?? true } : opts);
 }) as typeof router.navigate;
 
-createRoot(document.getElementById("root")!).render(<RouterProvider router={router} />);
+createRoot(document.getElementById("root")!).render(<RouterProvider router={router} future={{ v7_startTransition: true }} />);

apps/web/src/motion.e2e.test.ts

@@ -44,7 +44,8 @@ async function freePort(): Promise<number> {
 export async function until<T>(f: () => Promise<T>, what: string, ms = 8000): Promise<NonNullable<T>> {
   const end = Date.now() + ms;
   for (;;) {
-    const v = await f().catch(() => null);
+    // A stalled DevTools call (a heavily loaded machine) counts as "not yet" instead of hanging the test.
+    const v = await Promise.race([f(), Bun.sleep(3000).then(() => null)]).catch(() => null);
     if (v) return v as NonNullable<T>;
     if (Date.now() > end) throw new Error(`timed out waiting for ${what}`);
     await Bun.sleep(25);
@@ -123,6 +124,31 @@ run("navigation motion (headless Chrome)", () => {
     expect(r.anims.some((a) => a.startsWith("stc-fade-out@") && a.includes("::view-transition-old(root)"))).toBe(true);
   }, 30_000);
 
+  test("course to lesson: the sidebar stays through the transition, which is over within 220 ms", async () => {
+    // A fresh page, so the lesson route's code is not loaded yet (the case where the sidebar used to drop out).
+    await open("/c/sample", ".lr-main > article h1");
+    const side = await rect(".lr-side");
+    await click('.lr-les[href="/c/sample/m1-intro"]');
+    await until(() => exists(".lr-main .lr-lesson h1.title"), "lesson");
+    await Bun.sleep(300);
+    const r = await m();
+    expect(r.vt).toBe(1);
+    expect(r.anims.filter((a) => a.includes("(lr-side)") || a.includes("(stc-top)"))).toEqual([]);
+    expect(await rect(".lr-side")).toBe(side);
+    // Every view-transition animation ends by 220 ms (no 250 ms UA default left over).
+    await open("/c/sample", ".lr-main > article h1");
+    const ends = await chrome.eval<number[]>(`(() => {
+      document.querySelector('.lr-les[href="/c/sample/m1-code"]').click();
+      const ends = [], t0 = performance.now();
+      return new Promise((r) => { const f = () => {
+        for (const a of document.getAnimations()) if (a.effect.pseudoElement?.startsWith("::view-transition")) ends.push(a.effect.getComputedTiming().endTime);
+        if (performance.now() - t0 < 500) requestAnimationFrame(f); else r(ends);
+      }; f(); });
+    })()`);
+    expect(ends.length).toBeGreaterThan(0);
+    expect(Math.max(...ends)).toBeLessThanOrEqual(220);
+  }, 30_000);
+
   test("lesson to lesson: the old lesson stays until the next is ready, then swaps; sidebar and header do not move", async () => {
     await open("/c/sample/m1-intro", ".lr-main .lr-lesson h1.title");
     const side = await rect(".lr-side"), top = await rect(".stc-top");