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 <noreply@anthropic.com>

packages/ui/src/tokens.css

@@ -82,8 +82,9 @@ code, pre { font-family: var(--mono); }
 
 /* View transitions (route changes, lesson swaps). The old page dissolves over the live new one, whose content
    plays its own enter animation; the header and the course sidebar are their own groups and do not move.
-   The overlay never takes pointer input, so a click during a transition reaches the new page. */
-::view-transition { pointer-events: none; }
+   While a transition runs the browser sends pointer input to the document, so it is kept to --t-exit: the root
+   group's default 250 ms morph is off (old and new root are both the viewport). Keyboard input is unaffected. */
+::view-transition-group(root) { animation: none; }
 ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
 ::view-transition-old(root) { z-index: 1; animation: stc-fade-out var(--t-exit) var(--ease-out) both; }
 ::view-transition-new(root) { animation: none; }

packages/ui/test/motion-css.test.ts

@@ -92,9 +92,10 @@ test("prefers-reduced-motion turns off every animation, transition and view tran
   expect(block).toMatch(/\*::details-content\s*\{\s*transition:\s*none !important/);
 });
 
-test("view transitions never take pointer input and keep the header and sidebar still", () => {
+test("view transitions are short and keep the header and sidebar still", () => {
   const css = strip(tokensCss);
-  expect(css).toMatch(/::view-transition\s*\{[^}]*pointer-events:\s*none/);
+  // the UA default (a 250 ms root morph) would outlast the 220 ms ceiling
+  expect(css).toMatch(/::view-transition-group\(root\)\s*\{\s*animation:\s*none/);
   expect(css).toMatch(/\.stc-top\s*\{[^}]*view-transition-name:\s*stc-top/);
   expect(strip(learnerCss)).toMatch(/\.lr-side\s*\{[^}]*view-transition-name:\s*lr-side/);
   expect(css).toMatch(/::view-transition-group\(stc-top\)[^{]*\{[^}]*animation:\s*none/);