perf: stop idle reader re-render loop from visibility reset

viewportPages() reset every visible page's `visible` ratio to 0 and then
restored it, producing two reactive writes per page on each call. For
translated (compacted) pages, pageLayout reads `visible`, so the
pageLayout watcher re-scheduled the viewport, which re-ran
viewportPages() on the next frame. The reader re-rendered all mounted
pages and rebuilt emphasis overlays at display refresh rate while idle
(~170% CPU in the packaged app).

- Only reset pages that actually left the viewport.
- Skip replacing compaction results on a cache hit when the cached entry
  is already current.
- Add a regression test asserting that an unchanged viewport triggers no
  reactive updates.

Idle CPU on the same translated document drops from ~170% to ~6%.

Author: reycn

src/features/reader/paragraph-compaction.mjs

@@ -309,7 +309,10 @@ export function createParagraphCompaction({
           ':' +
           p.blocks.map((b) => b.translation).join('\n');
         if (cache.has(key)) {
-          if (cache.get(key)) results.value = new Map(results.value).set(p.number, cache.get(key));
+          const cached = cache.get(key);
+          // An unchanged result must not replace the map and re-render every page.
+          if (cached && results.value.get(p.number) !== cached)
+            results.value = new Map(results.value).set(p.number, cached);
           continue;
         }
         try {

src/features/reader/reader-viewport.mjs

@@ -38,8 +38,13 @@ export function createReaderViewport({ renderState, session, motion, view, activ
         },
         view.active.value,
       );
+    // Reset only pages that left the viewport. Clearing a still-visible page and
+    // restoring its ratio triggers pageLayout, which schedules this lookup again
+    // on the next frame and keeps the whole reader re-rendering while idle.
+    const stillVisible = new Set(window.visible.map((item) => item.number));
     for (const n of renderState.visiblePages)
-      if (session.pages.value[n - 1]) session.pages.value[n - 1].visible = 0;
+      if (!stillVisible.has(n) && session.pages.value[n - 1])
+        session.pages.value[n - 1].visible = 0;
     renderState.visiblePages.clear();
     let best;
     for (const item of window.visible) {

tests/reader/reader-viewport.test.mjs

@@ -0,0 +1,61 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { effect, reactive, ref, stop } from 'vue';
+import { createReaderViewport } from '../../src/features/reader/reader-viewport.mjs';
+
+function readerViewport(bounds) {
+  const pages = ref(reactive([1, 2, 3].map((number) => ({ number, visible: 0 }))));
+  const layout = {
+    columns: 1,
+    rows: [0, 1, 2].map((i) => ({ offset: i * 110, extent: 100, start: i, end: i + 1 })),
+    frames: [0, 1, 2].map((i) => ({ number: i + 1, x: 0, y: i * 110, width: 100, height: 100 })),
+  };
+  const rect = (r) => ({ getBoundingClientRect: () => r });
+  const renderState = {
+    layoutElement: { value: rect({ left: 0, top: 0 }) },
+    renderMetrics: { viewportLookups: 0, geometryReads: 0 },
+    visiblePages: new Set(),
+    renderWindow: ref(new Set()),
+    canvasEls: new Map(),
+  };
+  const viewport = createReaderViewport({
+    renderState,
+    session: { pages, restoringView: { value: false } },
+    motion: { pinching: { value: false }, referenceReturn: { value: null } },
+    view: { reader: { value: rect(bounds) }, pageLayout: { value: layout }, active: ref(1) },
+    activity: { foreground: { value: true } },
+    actions: { canvasRendering: { releaseCanvas() {} } },
+  });
+  return { pages, viewport };
+}
+
+test('repeating an unchanged viewport lookup does not touch page visibility', () => {
+  const { pages, viewport } = readerViewport({ left: 0, right: 100, top: 50, bottom: 150 });
+  viewport.viewportPages();
+  let runs = 0;
+  const runner = effect(() => {
+    for (const page of pages.value) void page.visible;
+    runs++;
+  });
+  runs = 0;
+  viewport.viewportPages();
+  stop(runner);
+  // A reset-then-restore would re-run pageLayout and schedule another lookup.
+  assert.equal(runs, 0);
+  assert.deepEqual(
+    pages.value.map((page) => page.visible),
+    [0.5, 0.4, 0],
+  );
+});
+
+test('pages that scroll out of the viewport are cleared', () => {
+  const bounds = { left: 0, right: 100, top: 50, bottom: 150 };
+  const { pages, viewport } = readerViewport(bounds);
+  viewport.viewportPages();
+  Object.assign(bounds, { top: 220, bottom: 320 });
+  viewport.viewportPages();
+  assert.deepEqual(
+    pages.value.map((page) => page.visible),
+    [0, 0, 1],
+  );
+});