@kabmo-labs/kabmo 0.7.0 → 0.9.0

package/src/client/hooks/editor/use-editor-drop.test.ts

@@ -243,3 +243,104 @@ describe('useEditorDrop', () => {
     expect(harness.results).toHaveLength(0);
   });
 });
+
+/**
+ * The capture-phase claim, which exists because CodeMirror handles `drop`
+ * itself: for a drag carrying files it reads each file's TEXT and inserts it
+ * into the document, then calls `preventDefault`, so the panel's own handler saw
+ * `defaultPrevented` and stood down. Measured in the browser: dropping `b.ts` on
+ * an open `a.ts` put `b.ts`'s text at the top of the buffer, and the autosave
+ * wrote it to disk.
+ *
+ * The claim is scoped to a code surface, so a drop on the composer is still the
+ * composer's.
+ */
+describe('useEditorDrop capture claim', () => {
+  /** A drop event whose target is `element`, recording the calls it received. */
+  function captureEvent(target: Node, transfer: DataTransfer) {
+    const calls: string[] = [];
+    const event = {
+      target,
+      dataTransfer: transfer,
+      preventDefault: () => calls.push('preventDefault'),
+      stopPropagation: () => calls.push('stopPropagation'),
+    };
+    return { event: event as never, calls };
+  }
+
+  async function capture(api: UseEditorDropResult | null, event: unknown): Promise<void> {
+    await act(async () => {
+      api?.captureDropProps.onDropCapture(event as never);
+    });
+    for (let pass = 0; pass < 4; pass += 1) {
+      await act(async () => {
+        await Promise.resolve();
+      });
+    }
+  }
+
+  /** Mount the hook and hand back the API plus a node for each target shape. */
+  async function mountWithTargets() {
+    const results: { ok: boolean; message: string }[] = [];
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const surface = document.createElement('div');
+    surface.setAttribute('data-code-surface', '');
+    const inner = document.createElement('div');
+    surface.appendChild(inner);
+    const composer = document.createElement('div');
+    container.append(surface, composer);
+
+    let api: UseEditorDropResult | null = null;
+    const Probe = () => {
+      api = useEditorDrop({ enabled: true, onResult: (r) => results.push(r) });
+      return null;
+    };
+    await act(async () => {
+      render(h(Probe, {}), container);
+    });
+    return { api: () => api, inner, composer, results };
+  }
+
+  beforeEach(() => {
+    scopeResponse = { ok: true, status: 200, body: {} };
+    fetchCalls = [];
+    opened = [];
+  });
+
+  test('claims a file drop aimed at a code surface, and opens the file', async () => {
+    scopeResponse = {
+      ok: true,
+      status: 200,
+      body: { root: '/repo', path: 'src/b.ts', name: 'b.ts', kind: 'text' },
+    };
+    const { api, inner } = await mountWithTargets();
+    const { event, calls } = captureEvent(inner, fileTransfer('file:///repo/src/b.ts'));
+
+    await capture(api(), event);
+
+    // Claimed BEFORE the surface's own handler could insert the file's text.
+    expect(calls).toEqual(['preventDefault', 'stopPropagation']);
+    expect(opened).toHaveLength(1);
+  });
+
+  test('leaves a drop aimed anywhere else to the bubble handler', async () => {
+    const { api, composer } = await mountWithTargets();
+    const { event, calls } = captureEvent(composer, fileTransfer('file:///repo/src/b.ts'));
+
+    await capture(api(), event);
+
+    expect(calls).toEqual([]);
+    expect(opened).toHaveLength(0);
+  });
+
+  test('ignores a text drag, which CodeMirror should still insert', async () => {
+    const { api, inner } = await mountWithTargets();
+    const textDrag = { types: ['text/plain'], files: [], getData: () => 'copied text' } as unknown as DataTransfer;
+    const { event, calls } = captureEvent(inner, textDrag);
+
+    await capture(api(), event);
+
+    expect(calls).toEqual([]);
+  });
+});

package/src/client/hooks/editor/use-editor-drop.ts

@@ -62,9 +62,34 @@ export interface EditorDropProps {
   onDrop: (e: TargetedDragEvent<HTMLElement>) => void;
 }
 
+/**
+ * Handlers that must run BEFORE a code surface sees the drag.
+ *
+ * CodeMirror handles `drop` itself, on its own `contentDOM`: for a drag carrying
+ * FILES it reads each file's text and INSERTS it into the document, then calls
+ * `preventDefault` — so the panel's own drop handler saw `defaultPrevented` and
+ * stood down. Measured in the browser: dropping `b.ts` on an open `a.ts` put
+ * `DROPPED_CONTENT` at the top of the buffer (and the autosave then wrote it to
+ * disk), while the overlay had promised "Drop a file to open it".
+ *
+ * A capture-phase listener on the panel is what wins that race, because capture
+ * runs from the outermost element inward — the surface's own handler has not run
+ * yet. It claims ONLY a drag that is over a code surface (`[data-code-surface]`,
+ * set by `CodeSurface`), so a drop on the composer still belongs to the composer
+ * and a drop on the chat's own chrome still reaches `onDrop` as before.
+ */
+export interface EditorDropCaptureProps {
+  onDropCapture: (e: TargetedDragEvent<HTMLElement>) => void;
+}
+
+/** The attribute a code surface marks itself with, for the capture handler. */
+export const CODE_SURFACE_ATTRIBUTE = 'data-code-surface';
+
 export interface UseEditorDropResult {
   isDragging: boolean;
   dropProps: EditorDropProps;
+  /** Spread on the same element as `dropProps`. */
+  captureDropProps: EditorDropCaptureProps;
 }
 
 /**
@@ -241,18 +266,9 @@ export function useEditorDrop({ enabled = true, onResult }: UseEditorDropOptions
     if (depthRef.current === 0) setIsDragging(false);
   }, []);
 
-  const onDrop = useCallback((e: TargetedDragEvent<HTMLElement>) => {
-    // The composer claimed it: one gesture must not both open the file and
-    // queue it as an attachment. `defaultPrevented` is the platform's own
-    // signal for "someone deeper already handled this".
-    if (e.defaultPrevented) return;
-    if (!isOpenableDrag(e.dataTransfer)) return;
-    e.preventDefault();
-    e.stopPropagation();
-    reset();
-    if (!enabledRef.current || !e.dataTransfer) return;
-
-    const dt = e.dataTransfer;
+  /** Open what a drop carries — shared by the bubble and the capture paths. */
+  const openDropped = useCallback((dt: DataTransfer | null) => {
+    if (!dt) return;
     // Handles first: they are the only shape that carries write access, and a
     // Finder drag has nothing else.
     void openDroppedHandle(dt, onResultRef.current).then((opened) => {
@@ -269,7 +285,44 @@ export function useEditorDrop({ enabled = true, onResult }: UseEditorDropOptions
       // several would leave the user on whichever resolved last.
       void openDroppedReference(references[0], onResultRef.current);
     });
-  }, [reset]);
+  }, []);
+
+  const onDrop = useCallback((e: TargetedDragEvent<HTMLElement>) => {
+    // The composer claimed it: one gesture must not both open the file and
+    // queue it as an attachment. `defaultPrevented` is the platform's own
+    // signal for "someone deeper already handled this".
+    if (e.defaultPrevented) return;
+    if (!isOpenableDrag(e.dataTransfer)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    reset();
+    if (!enabledRef.current || !e.dataTransfer) return;
+    openDropped(e.dataTransfer);
+  }, [openDropped, reset]);
+
+  /**
+   * Claim a file drop that is about to land on a code surface.
+   *
+   * Capture phase, so it runs before CodeMirror's own `drop` handler on the
+   * `contentDOM` — that one reads a dropped file's TEXT and inserts it into the
+   * document, which would silently rewrite the open file on the next autosave.
+   * Scoped to `[data-code-surface]` so a drop anywhere else keeps the existing
+   * behaviour, the composer's included.
+   */
+  const onDropCapture = useCallback((e: TargetedDragEvent<HTMLElement>) => {
+    if (!isOpenableDrag(e.dataTransfer)) return;
+    const target = e.target;
+    if (!(target instanceof Element) || !target.closest(`[${CODE_SURFACE_ATTRIBUTE}]`)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    reset();
+    if (!enabledRef.current || !e.dataTransfer) return;
+    openDropped(e.dataTransfer);
+  }, [openDropped, reset]);
 
-  return { isDragging, dropProps: { onDragEnter, onDragOver, onDragLeave, onDrop } };
+  return {
+    isDragging,
+    dropProps: { onDragEnter, onDragOver, onDragLeave, onDrop },
+    captureDropProps: { onDropCapture },
+  };
 }

package/src/client/hooks/editor/use-editor-find.ts

@@ -8,10 +8,11 @@
  *
  * Owns the query, the option toggles, which match is "current", and the two
  * write paths (replace one, replace all). Every rule it applies lives in
- * `shared/lib/code/editor/find`, so the count in the widget, the marks painted
- * on the surface and the bytes written back are the same list — the failure
- * this shape exists to prevent is a widget that says "3 of 7" over highlights
- * that disagree.
+ * `shared/lib/code/editor/find-scan` (the match list) and `find-replace` (what
+ * one match becomes), so the count in the widget, the marks painted on the
+ * surface and the bytes written back are the same list — the failure this shape
+ * exists to prevent is a widget that says "3 of 7" over highlights that
+ * disagree.
  *
  * The query and the toggles persist per session; whether the bar is OPEN does
  * not. A reload that reopened a find bar over the file would be noise the user
@@ -26,11 +27,10 @@ import {
   findMatches,
   lineStartOffset,
   matchIndexAtOrAfter,
-  replaceAllMatches,
-  replaceMatch,
   stepMatchIndex,
   type FindOptions,
-} from '@/shared/lib/code/editor/find';
+} from '@/shared/lib/code/editor/find-scan';
+import { replaceAllMatches, replaceMatch } from '@/shared/lib/code/editor/find-replace';
 import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
 import type { EditorFindState, UseEditorFindOptions } from '@/client/hooks/editor/find-state';
 

package/src/client/hooks/editor/use-outline-view.test.ts

@@ -0,0 +1,182 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The outline hook's two bounds, which no component test can see:
+ *
+ * - **the scan is DEBOUNCED**, because it walks the whole buffer and the buffer
+ *   changes on every keystroke (measured: 704 ms per keystroke at 10 MB with a
+ *   live scan, 34 ms without). A declaration list does not change mid-word, so
+ *   the rows are recomputed once typing stops;
+ * - **a different document scans IMMEDIATELY**, because rows from the previous
+ *   file point at lines of a document that is gone;
+ * - **a buffer past the scan ceiling is never scanned**, and says why.
+ *
+ * Rendered with `h()` against happy-dom and driven with FAKE timers: the
+ * behaviour under test is a timer, so advancing the clock is the only way to
+ * assert it without paying the debounce in every run.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, jest, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import {
+  OUTLINE_SCAN_DELAY_MS,
+  useOutlineView,
+  type OutlineView,
+} from '@/client/hooks/editor/use-outline-view';
+import { MAX_OUTLINE_SCAN_CHARS } from '@/shared/lib/code/outline/rows';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+/** One declaration per `export function`, so a buffer's rows are countable. */
+function source(count: number): string {
+  return Array.from({ length: count }, (_, i) => `export function fn${i}() {}`).join('\n');
+}
+
+interface ProbeProps {
+  content: string;
+  language?: string;
+  path?: string | null;
+  state?: 'ready' | 'loading';
+  note?: string | null;
+}
+
+let latest: OutlineView | null = null;
+
+function Probe({ content, language = 'typescript', path = 'src/a.ts', state = 'ready', note = null }: ProbeProps) {
+  latest = useOutlineView({ content, language, path, state, note });
+  return h('div', {});
+}
+
+async function mount(props: ProbeProps): Promise<void> {
+  latest = null;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(Probe, props), container);
+  });
+}
+
+/** Re-render with new props, then flush Preact's own scheduling. */
+async function update(props: ProbeProps): Promise<void> {
+  await act(async () => {
+    render(h(Probe, props), container);
+  });
+}
+
+/** Let the debounce fire, plus a tick for the re-render it causes. */
+async function settle(): Promise<void> {
+  jest.advanceTimersByTime(OUTLINE_SCAN_DELAY_MS);
+  await act(async () => {});
+}
+
+/** Run the body under fake timers, restoring real ones even on a throw. */
+async function withFakeTimers(body: () => Promise<void>): Promise<void> {
+  jest.useFakeTimers();
+  try {
+    await body();
+  } finally {
+    jest.useRealTimers();
+  }
+}
+
+describe('useOutlineView', () => {
+  test('the first document is outlined on the FIRST render, not one timer later', async () => {
+    await mount({ content: source(3) });
+
+    // No `settle()`: a freshly opened file's rows must not arrive late.
+    expect(latest?.symbols.map((symbol) => symbol.name)).toEqual(['fn0', 'fn1', 'fn2']);
+    expect(latest?.total).toBe(3);
+  });
+
+  test('a keystroke does NOT rescan until the buffer goes quiet', async () => {
+    await withFakeTimers(async () => {
+      await mount({ content: source(2) });
+      expect(latest?.total).toBe(2);
+
+      // A new declaration typed in, but the debounce has not elapsed: the rows
+      // are still the previous scan's. This is the property that makes typing
+      // cheap on a large file.
+      await update({ content: source(3) });
+      expect(latest?.total).toBe(2);
+
+      await settle();
+      expect(latest?.total).toBe(3);
+    });
+  });
+
+  test('a burst of edits coalesces into ONE scan of the final text', async () => {
+    await withFakeTimers(async () => {
+      await mount({ content: source(1) });
+
+      for (const count of [2, 3, 4, 5]) {
+        await update({ content: source(count) });
+        // Shorter than the debounce, so each edit re-arms it.
+        jest.advanceTimersByTime(20);
+        await act(async () => {});
+      }
+      // Nothing has landed yet: the last edit re-armed the timer.
+      expect(latest?.total).toBe(1);
+
+      await settle();
+      expect(latest?.total).toBe(5);
+    });
+  });
+
+  test('a DIFFERENT document is scanned at once, never on the timer', async () => {
+    await mount({ content: source(2), path: 'src/a.ts' });
+    expect(latest?.total).toBe(2);
+
+    await update({ content: source(7), path: 'src/b.ts' });
+    // No settle: rows from the previous file must not survive a tab switch.
+    expect(latest?.total).toBe(7);
+    expect(latest?.symbols[0].name).toBe('fn0');
+  });
+
+  test('a buffer past the scan ceiling is never scanned, and the notice says why', async () => {
+    await withFakeTimers(async () => {
+      // One character over the ceiling, without a megabyte of real text.
+      const padded = `${source(2)}\n${'x'.repeat(MAX_OUTLINE_SCAN_CHARS)}`;
+      await mount({ content: padded });
+      await settle();
+
+      expect(latest?.symbols).toEqual([]);
+      expect(latest?.total).toBe(0);
+      expect(latest?.notice).toContain('too large to outline');
+    });
+  });
+
+  test('a document that is not ready has no rows, and prints the state sentence', async () => {
+    await mount({ content: source(3), state: 'loading' });
+
+    expect(latest?.symbols).toEqual([]);
+    expect(latest?.notice).toBe('Reading the file…');
+  });
+
+  test('the caller note wins over the state sentence', async () => {
+    await mount({ content: '', state: 'ready', note: 'This tab has no outline.' });
+
+    expect(latest?.symbols).toEqual([]);
+    expect(latest?.notice).toBe('This tab has no outline.');
+  });
+});

package/src/client/hooks/editor/use-outline-view.ts

@@ -15,15 +15,44 @@
  *
  * The scan runs only in the `ready` state, so a half-read buffer never produces
  * a list of rows that are about to move.
+ *
+ * Two bounds keep a large file from making the panel the most expensive thing in
+ * the editor, and each was measured rather than guessed (see `outline/rows.ts`):
+ *
+ * - **The scan is DEBOUNCED.** It walks the whole document — 366 ms on 10 MB in
+ *   Bun — and the published buffer changes on every keystroke, so a live scan
+ *   charged that to typing. Measured in the browser at 10 MB with the panel
+ *   open: 704 ms per keystroke live, 34 ms without. A declaration list does not
+ *   change mid-word, so the rows are recomputed once the buffer goes quiet.
+ * - **The scan is SKIPPED past `MAX_OUTLINE_SCAN_CHARS`**, and the panel says
+ *   why instead of showing an empty list that reads as "no declarations here".
+ *
+ * A DIFFERENT DOCUMENT is scanned at once, never on the timer: rows from the
+ * previous file point at lines of a document that is gone.
  */
 
-import { useMemo } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { extractOutline } from '@/shared/lib/code/outline/extract';
 import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
 import { outlineEmptyNotice, type EditorDocumentState } from '@/shared/lib/code/outline/document';
+import { MAX_OUTLINE_SCAN_CHARS, outlineTooLargeNotice, outlineWindow } from '@/shared/lib/code/outline/rows';
+
+/**
+ * How long the buffer must be quiet before the outline is re-scanned.
+ *
+ * Long enough that typing never pays for it, short enough that the rows are
+ * back before the reader looks for them — and sooner than the 800 ms autosave,
+ * so the outline still describes the buffer before the file on disk does.
+ */
+export const OUTLINE_SCAN_DELAY_MS = 300;
 
 export interface OutlineView {
+  /** The rows to render — bounded by `MAX_OUTLINE_ROWS`. */
   symbols: OutlineSymbol[];
+  /** Every symbol the scan found, including the ones not rendered. */
+  total: number;
+  /** True when the panel is showing only the first `MAX_OUTLINE_ROWS`. */
+  truncated: boolean;
   /** The sentence to print when `symbols` is empty. */
   notice: string;
 }
@@ -36,12 +65,70 @@ export interface OutlineSource {
   /** The document's own state, so "still reading" is not "no symbols". */
   state: EditorDocumentState;
   note: string | null;
+  /**
+   * Identity of the document being drawn. A change here scans IMMEDIATELY
+   * instead of on the timer — see the module note.
+   */
+  path: string | null;
 }
 
-export function useOutlineView({ content, language, state, note }: OutlineSource): OutlineView {
-  const symbols = useMemo(
-    () => (state === 'ready' ? extractOutline(content, language) : []),
-    [state, content, language],
-  );
-  return { symbols, notice: outlineEmptyNotice(state, note) };
+interface ScanInput {
+  content: string;
+  language: string;
+  path: string | null;
+}
+
+/** Too large to outline: no scan, and a sentence that names the reason. */
+function tooLarge(content: string): boolean {
+  return content.length > MAX_OUTLINE_SCAN_CHARS;
+}
+
+export function useOutlineView({ content, language, state, note, path }: OutlineSource): OutlineView {
+  // Seeded from the mount values, so the first document's outline is ready on
+  // the first render rather than one timer later.
+  const [scan, setScan] = useState<ScanInput>({ content, language, path });
+  const pathRef = useRef(path);
+
+  useEffect(() => {
+    const documentChanged = path !== pathRef.current;
+    pathRef.current = path;
+    // A document past the ceiling is never scanned, so there is nothing to
+    // schedule — and re-arming a timer per keystroke on a file the panel will
+    // not describe is work for a sentence that never changes.
+    if (documentChanged || tooLarge(content)) {
+      setScan((prev) =>
+        prev.content === content && prev.language === language ? prev : { content, language, path },
+      );
+      return;
+    }
+    // Trailing debounce: every keystroke re-arms it, so the scan runs once the
+    // buffer goes quiet. The updater returns `prev` when nothing moved, which
+    // makes the mount's own timer a no-op instead of a second scan of the same
+    // text.
+    const timer = window.setTimeout(() => {
+      setScan((prev) =>
+        prev.content === content && prev.language === language ? prev : { content, language, path },
+      );
+    }, OUTLINE_SCAN_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [path, content, language]);
+
+  const symbols = useMemo(() => {
+    if (state !== 'ready' || tooLarge(scan.content)) return [];
+    return extractOutline(scan.content, scan.language);
+  }, [state, scan]);
+
+  const visible = useMemo(() => outlineWindow(symbols), [symbols]);
+  // The LIVE length, not the scanned one: the sentence names the file's size as
+  // it is now, and reading it off `scan` would make it lag a debounce behind.
+  const tooLargeNotice = state === 'ready' ? outlineTooLargeNotice(content.length) : null;
+
+  return {
+    symbols: visible.rows,
+    total: visible.total,
+    truncated: visible.truncated,
+    // The size refusal wins over the empty-state sentence: "too large to
+    // outline" is the reason, and the generic one would hide it.
+    notice: tooLargeNotice ?? outlineEmptyNotice(state, note),
+  };
 }

package/src/client/hooks/editor/use-scroll-restore.test.ts

@@ -161,6 +161,19 @@ function storedOffsets(): ScrollPositions | undefined {
   return getSessionValue<ScrollPositions>(SESSION, SCROLL_POSITIONS_KEY);
 }
 
+/**
+ * A READER's scroll: the input that causes it, then the movement.
+ *
+ * The hook distinguishes the two, and it has to: a `scroll` with no input behind
+ * it is the browser re-anchoring the document as its real height lands, which
+ * must NOT be read as the reader moving. `wheel` is the simplest input a code
+ * surface sees.
+ */
+function readerScroll(probe: ProbeHandle, top: number): void {
+  probe.el.dispatchEvent(new Event('wheel', { bubbles: true }));
+  probe.el.scrollTop = top;
+}
+
 describe('useScrollRestore', () => {
   test('restores the stored offset for the tab and surface', async () => {
     const probe = await mount('7', 'code', { '7': { code: 900 } });
@@ -181,7 +194,47 @@ describe('useScrollRestore', () => {
 
   test("a reader's own scroll wins over a pending restore", async () => {
     const probe = await mount('7', 'code', { '7': { code: 900 } });
-    probe.el.scrollTop = 120;
+    readerScroll(probe, 120);
+    await act(async () => {
+      StubResizeObserver.latest()?.fire();
+    });
+    expect(probe.el.scrollTop).toBe(120);
+  });
+
+  test('the document re-anchoring is not the reader, and the restore re-applies', async () => {
+    // The bug the e2e spec found: the restore writes 900, the document's real
+    // height lands a frame later, and CodeMirror re-anchors to keep the visible
+    // content stable — `scrollTop` moves to 420 with nobody assigning. Reading
+    // that as the reader's own scroll dropped the pending restore, so the
+    // anchored value became where the reader stayed (measured: opening a tab
+    // moved them 29 lines) and the wrong offset was persisted.
+    const probe = await mount('7', 'code', { '7': { code: 900 } }, 600);
+    expect(probe.el.scrollTop).toBe(100);
+
+    // The browser's own correction: no input event behind it.
+    probe.el.scrollTop = 420;
+    probe.setHeight(5000);
+    await act(async () => {
+      StubResizeObserver.latest()?.fire();
+    });
+
+    // The restore is still in charge, so the reader lands where the session
+    // recorded — not where the anchoring put them.
+    expect(probe.el.scrollTop).toBe(900);
+  });
+
+  test('a reader’s scroll is still theirs after an anchoring correction', async () => {
+    // The discriminator must not swallow the NEXT real scroll: the input that
+    // explains a movement is consumed by it, so a reader who scrolls after the
+    // document settles keeps their own position.
+    const probe = await mount('7', 'code', { '7': { code: 900 } });
+    probe.el.scrollTop = 420; // anchoring, no input
+    await act(async () => {
+      StubResizeObserver.latest()?.fire();
+    });
+    expect(probe.el.scrollTop).toBe(900);
+
+    readerScroll(probe, 120);
     await act(async () => {
       StubResizeObserver.latest()?.fire();
     });
@@ -192,7 +245,7 @@ describe('useScrollRestore', () => {
     const probe = await mount('7', 'code', {});
     jest.useFakeTimers();
     try {
-      probe.el.scrollTop = 350;
+      readerScroll(probe, 350);
       jest.advanceTimersByTime(200);
       await act(async () => {});
     } finally {