@youtyan/code-viewer 0.1.15 → 0.1.17

package/web/app.js

@@ -378,6 +378,18 @@
     { action: "scroll-main-up", key: "k", scope: "main" },
     { action: "scroll-main-page-down", key: "d", scope: "main", ctrl: true },
     { action: "scroll-main-page-up", key: "u", scope: "main", ctrl: true },
+    { action: "scroll-main-page-down", key: "pagedown", scope: "main" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "main" },
+    { action: "scroll-main-page-down", key: "pagedown", scope: "global" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "global" },
+    { action: "scroll-main-page-down", key: "pagedown", scope: "sidebar" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "sidebar" },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "main", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "main", ctrl: true },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "global", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "global", ctrl: true },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "sidebar", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "sidebar", ctrl: true },
     { action: "tab-preview", key: "p", scope: "main", pendingG: true },
     { action: "tab-code", key: "c", scope: "main", pendingG: true },
     { action: "goto-top", key: "g", pendingG: true },
@@ -6772,6 +6784,7 @@
     const DEFAULT_RANGE = { from: "HEAD", to: "worktree" };
     const VIRTUAL_SOURCE_LINE_THRESHOLD = 3000;
     const VIRTUAL_SOURCE_SIZE_THRESHOLD = 1024 * 1024;
+    const VIRTUAL_SOURCE_PAGE_SIZE = 2000;
     const VIRTUAL_SOURCE_ROW_HEIGHT = 20;
     const VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH = 2000;
     let highlightLoadPromise = null;
@@ -6912,6 +6925,8 @@
         const before = scroller.scrollTop;
         if (edge === "center")
           scroller.scrollTop = Math.max(0, top - Math.round(scroller.clientHeight / 2));
+        else if (edge === "start")
+          scroller.scrollTop = top;
         else if (top < scroller.scrollTop)
           scroller.scrollTop = top;
         else if (bottom > scroller.scrollTop + scroller.clientHeight)
@@ -6944,7 +6959,7 @@
       const delta = unit === "page" ? pageRows : 1;
       cursor.line = Math.max(1, Math.min(total, cursor.line + direction * delta));
       syncSourceCursorRows(target);
-      scrollSourceCursorIntoView(cursor);
+      scrollSourceCursorIntoView(cursor, unit === "page" ? "start" : "nearest");
       return true;
     }
     function scrollMainPanel(direction, repeated = false, unit = "line") {
@@ -6959,6 +6974,31 @@
       else
         window.scrollBy({ top, behavior });
     }
+    let MAIN_SURFACE_FOCUS_SEQ = 0;
+    function focusMainSurface() {
+      const target = findMainScrollTarget();
+      if (target?.matches("#content .gdp-source-virtual-scroller")) {
+        target.focus({ preventScroll: true });
+        setPanelFocusScope("main");
+        return;
+      }
+      focusMainPanel();
+    }
+    function scheduleMainSurfaceFocus() {
+      const seq = ++MAIN_SURFACE_FOCUS_SEQ;
+      const apply = () => {
+        if (seq !== MAIN_SURFACE_FOCUS_SEQ || PALETTE)
+          return;
+        if (isEditableKeyTarget(document.activeElement))
+          return;
+        focusMainSurface();
+      };
+      focusMainPanel();
+      queueMicrotask(apply);
+      requestAnimationFrame(apply);
+      setTimeout(apply, 100);
+      setTimeout(apply, 300);
+    }
     function scrollMainToEdge(edge) {
       if (moveSourceCursor(edge === "bottom" ? 1 : -1, "edge", edge))
         return;
@@ -7586,7 +7626,7 @@
                 children_omitted: dir.children_omitted,
                 children_omitted_reason: dir.children_omitted_reason
               });
-              focusSidebarPanel();
+              scheduleMainSurfaceFocus();
             });
           } else {
             li.addEventListener("click", toggleDir);
@@ -7622,7 +7662,7 @@
               onFileClick(f2);
             else
               scrollToFile(f2.path);
-            focusSidebarPanel();
+            scheduleMainSurfaceFocus();
           });
           if (!onFileClick)
             li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -7655,7 +7695,7 @@
             onFileClick(f2);
           else
             scrollToFile(f2.path);
-          focusSidebarPanel();
+          scheduleMainSurfaceFocus();
         });
         if (!onFileClick)
           li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -9875,6 +9915,9 @@
         url.searchParams.delete("virtual");
       return url.pathname + url.search;
     }
+    function buildFileRangeUrl(target, start, end) {
+      return "/file_range?path=" + encodeURIComponent(target.path) + "&ref=" + encodeURIComponent(target.ref || "worktree") + "&start=" + encodeURIComponent(String(start)) + "&end=" + encodeURIComponent(String(end));
+    }
     function currentSourceLineTarget(target) {
       const routeTarget = sourceTargetFromRoute();
       return sourceTargetsEqual(routeTarget, target) && STATE.route.screen === "file" ? STATE.route.line : undefined;
@@ -9938,6 +9981,161 @@
     document.addEventListener("mouseup", () => {
       SOURCE_LINE_DRAG = null;
     });
+    function virtualSourceSearchRanges(line, query) {
+      const needle = query.toLowerCase();
+      if (!needle)
+        return [];
+      const haystack = line.toLowerCase();
+      const ranges = [];
+      let cursor = 0;
+      while (cursor <= haystack.length) {
+        const index = haystack.indexOf(needle, cursor);
+        if (index < 0)
+          break;
+        ranges.push({ start: index, end: index + query.length });
+        cursor = Math.max(index + query.length, index + 1);
+      }
+      return ranges;
+    }
+    function collectVirtualSourceSearchMatches(lines, query, max = 5000) {
+      const matches = [];
+      for (let index = 0;index < lines.length && matches.length < max; index++) {
+        for (const range of virtualSourceSearchRanges(lines[index] || "", query)) {
+          matches.push({ line: index + 1, start: range.start, end: range.end });
+          if (matches.length >= max)
+            break;
+        }
+      }
+      return matches;
+    }
+    function appendVirtualSourceLineCode(code2, line, query, activeRange, lineNumber) {
+      const ranges = virtualSourceSearchRanges(line, query);
+      if (!ranges.length)
+        return false;
+      let cursor = 0;
+      for (const range of ranges) {
+        if (range.start > cursor)
+          code2.appendChild(document.createTextNode(line.slice(cursor, range.start)));
+        const mark = document.createElement("mark");
+        const active = !!activeRange && activeRange.line === lineNumber && activeRange.start === range.start && activeRange.end === range.end;
+        mark.className = active ? "gdp-source-virtual-search-hit active" : "gdp-source-virtual-search-hit";
+        mark.textContent = line.slice(range.start, range.end);
+        code2.appendChild(mark);
+        cursor = range.end;
+      }
+      if (cursor < line.length)
+        code2.appendChild(document.createTextNode(line.slice(cursor)));
+      return true;
+    }
+    function createVirtualSourceSearch(wrap, scroller, findMatches, renderFn) {
+      const bar = document.createElement("div");
+      bar.className = "gdp-source-virtual-search";
+      const input = document.createElement("input");
+      input.type = "search";
+      input.placeholder = "Find in file";
+      input.autocomplete = "off";
+      input.spellcheck = false;
+      const count = document.createElement("span");
+      count.className = "gdp-source-virtual-search-count";
+      const previous = document.createElement("button");
+      previous.type = "button";
+      previous.textContent = "Prev";
+      const next = document.createElement("button");
+      next.type = "button";
+      next.textContent = "Next";
+      const close = document.createElement("button");
+      close.type = "button";
+      close.textContent = "Close";
+      bar.append(input, count, previous, next, close);
+      wrap.querySelector(".gdp-source-virtual-info")?.appendChild(bar);
+      bar.hidden = true;
+      let matches = [];
+      let active = -1;
+      let debounce = 0;
+      let searchVersion = 0;
+      const hide = () => {
+        bar.hidden = true;
+        renderFn();
+        scroller.focus({ preventScroll: true });
+      };
+      const sync = () => {
+        const query = input.value;
+        const version = ++searchVersion;
+        if (!query) {
+          matches = [];
+          active = -1;
+          count.textContent = "";
+          renderFn();
+          return;
+        }
+        count.textContent = "Searching...";
+        findMatches(query).then((nextMatches) => {
+          if (version !== searchVersion)
+            return;
+          matches = nextMatches;
+          active = matches.length ? Math.max(0, Math.min(active, matches.length - 1)) : -1;
+          count.textContent = matches.length ? active + 1 + " / " + matches.length : "0 / 0";
+          if (active >= 0)
+            scroller.scrollTop = Math.max(0, (matches[active].line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - VIRTUAL_SOURCE_ROW_HEIGHT * 3);
+          renderFn();
+        }).catch(() => {
+          if (version !== searchVersion)
+            return;
+          matches = [];
+          active = -1;
+          count.textContent = "Search failed";
+          renderFn();
+        });
+      };
+      const scheduleSync = () => {
+        if (debounce)
+          window.clearTimeout(debounce);
+        debounce = window.setTimeout(sync, 120);
+      };
+      const move = (direction) => {
+        if (!matches.length)
+          return;
+        active = (active + direction + matches.length) % matches.length;
+        count.textContent = active + 1 + " / " + matches.length;
+        scroller.scrollTop = Math.max(0, (matches[active].line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - VIRTUAL_SOURCE_ROW_HEIGHT * 3);
+        renderFn();
+      };
+      input.addEventListener("input", () => {
+        active = 0;
+        scheduleSync();
+      });
+      input.addEventListener("keydown", (e2) => {
+        if (e2.key === "Escape") {
+          e2.preventDefault();
+          hide();
+        } else if (e2.key === "Enter") {
+          e2.preventDefault();
+          move(e2.shiftKey ? -1 : 1);
+        }
+      });
+      previous.addEventListener("click", () => move(-1));
+      next.addEventListener("click", () => move(1));
+      close.addEventListener("click", hide);
+      return {
+        open: () => {
+          bar.hidden = false;
+          input.focus();
+          input.select();
+          sync();
+        },
+        query: () => bar.hidden ? "" : input.value,
+        activeRange: () => active >= 0 ? matches[active] || null : null
+      };
+    }
+    function openVirtualSourceSearchFromKeyboard(targetEl) {
+      const active = targetEl?.closest("#content .gdp-source-virtual");
+      const fallback = document.querySelector("#content .gdp-source-viewer.virtual .gdp-source-virtual:not([hidden])");
+      const search = active?.__gdpVirtualSourceSearch || fallback?.__gdpVirtualSourceSearch;
+      if (!search)
+        return false;
+      search.open();
+      return true;
+    }
     function renderVirtualSource(target, textValue, lines, hljsRef, lang) {
       const wrap = document.createElement("div");
       wrap.className = "gdp-source-virtual";
@@ -9986,6 +10184,9 @@
       info.append(badge, summary, actions);
       const scroller = document.createElement("div");
       scroller.className = "gdp-source-virtual-scroller";
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", target.path + " source code");
       const spacer = document.createElement("div");
       spacer.className = "gdp-source-virtual-spacer";
       spacer.style.height = Math.max(1, lines.length * VIRTUAL_SOURCE_ROW_HEIGHT) + "px";
@@ -9997,6 +10198,7 @@
       let raf = 0;
       let renderedStart = -1;
       let renderedEnd = -1;
+      let search = null;
       const render = () => {
         raf = 0;
         const viewportHeight = scroller.clientHeight || window.innerHeight;
@@ -10023,7 +10225,9 @@
           const code2 = document.createElement("span");
           code2.className = "gdp-source-virtual-line-code";
           const line = lines[index] ?? "";
-          if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+          const searchQuery = search?.query() || "";
+          const activeRange = search?.activeRange() || null;
+          if (appendVirtualSourceLineCode(code2, line, searchQuery, activeRange, index + 1)) {} else if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
             try {
               code2.innerHTML = hljsRef.highlight(line, { language: lang, ignoreIllegals: true }).value;
               code2.classList.add("hljs");
@@ -10044,6 +10248,8 @@
       };
       scroller.__gdpRenderVirtualSource = render;
       scroller.addEventListener("scroll", schedule, { passive: true });
+      search = createVirtualSourceSearch(wrap, scroller, (query) => Promise.resolve(collectVirtualSourceSearchMatches(lines, query)), render);
+      wrap.__gdpVirtualSourceSearch = search;
       let resizeObserver = null;
       resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
         if (!scroller.isConnected) {
@@ -10058,6 +10264,253 @@
       schedule();
       return wrap;
     }
+    function renderPagedVirtualSource(target, size, initialStart, initialLines, initialComplete, initialTotal, hljsRef, lang, signal) {
+      const wrap = document.createElement("div");
+      wrap.className = "gdp-source-virtual";
+      const info = document.createElement("div");
+      info.className = "gdp-source-virtual-info";
+      const badge = document.createElement("span");
+      badge.className = "gdp-source-virtual-badge";
+      badge.textContent = "Virtual mode";
+      const summary = document.createElement("span");
+      summary.className = "gdp-source-virtual-summary";
+      const actions = document.createElement("span");
+      actions.className = "gdp-source-virtual-actions";
+      const raw = document.createElement("a");
+      raw.className = "gdp-source-virtual-action";
+      raw.href = buildRawFileUrl(target);
+      raw.target = "_blank";
+      raw.rel = "noreferrer";
+      raw.textContent = "Open raw";
+      const full = document.createElement("a");
+      full.className = "gdp-source-virtual-action";
+      full.href = buildCurrentFileRouteWithVirtualMode(target, "off");
+      full.textContent = "Open full view";
+      full.title = "Render every line without paged loading. This can be slow for large files.";
+      full.addEventListener("click", (e2) => {
+        e2.preventDefault();
+        const url = new URL(full.href, window.location.origin);
+        setRoute(parseRoute(url.pathname, url.search, currentRange()), true);
+        renderStandaloneSource(target);
+      });
+      actions.append(raw, full);
+      info.append(badge, summary, actions);
+      const scroller = document.createElement("div");
+      scroller.className = "gdp-source-virtual-scroller";
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", target.path + " source code");
+      const spacer = document.createElement("div");
+      spacer.className = "gdp-source-virtual-spacer";
+      const windowEl = document.createElement("div");
+      windowEl.className = "gdp-source-virtual-window";
+      spacer.appendChild(windowEl);
+      scroller.appendChild(spacer);
+      wrap.append(info, scroller);
+      const lines = new Map;
+      const requestedPages = new Set;
+      const failedPages = new Set;
+      const targetLine = lineTargetStart(currentSourceLineTarget(target)) || 1;
+      let complete = initialComplete;
+      let totalRows = initialComplete ? Math.max(1, initialTotal) : Math.max(initialTotal || 1, initialStart + initialLines.length - 1, targetLine + VIRTUAL_SOURCE_PAGE_SIZE);
+      initialLines.forEach((line, index) => lines.set(initialStart + index, line));
+      requestedPages.add(Math.max(0, Math.floor((initialStart - 1) / VIRTUAL_SOURCE_PAGE_SIZE)));
+      for (let line = initialStart;line < initialStart + initialLines.length; line += VIRTUAL_SOURCE_PAGE_SIZE) {
+        requestedPages.add(Math.max(0, Math.floor((line - 1) / VIRTUAL_SOURCE_PAGE_SIZE)));
+      }
+      const updateTotals = () => {
+        SOURCE_CURSOR_TOTALS.set(sourceCursorKey(target), totalRows);
+        summary.textContent = (complete ? totalRows.toLocaleString() : lines.size.toLocaleString() + "+") + " lines loaded from " + formatBytes(size) + ". More rows load as you scroll.";
+        spacer.style.height = Math.max(1, totalRows * VIRTUAL_SOURCE_ROW_HEIGHT) + "px";
+      };
+      const loadPage = (line) => {
+        if (signal?.aborted || complete && line > totalRows)
+          return;
+        const page = Math.max(0, Math.floor((line - 1) / VIRTUAL_SOURCE_PAGE_SIZE));
+        if (requestedPages.has(page))
+          return;
+        if (failedPages.has(page))
+          return;
+        requestedPages.add(page);
+        const start = page * VIRTUAL_SOURCE_PAGE_SIZE + 1;
+        const end = start + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+        trackLoad(fetch(buildFileRangeUrl(target, start, end), { signal }).then((res) => res.ok ? res.json() : null).then((data) => {
+          if (!data || signal?.aborted)
+            return;
+          data.lines.forEach((lineValue, index) => lines.set(data.start + index, lineValue));
+          totalRows = data.complete ? Math.max(1, data.total) : Math.max(totalRows, data.total, end + VIRTUAL_SOURCE_PAGE_SIZE);
+          complete = data.complete === true;
+          updateTotals();
+          renderedStart = -1;
+          renderedEnd = -1;
+          render();
+        }).catch((err) => {
+          if (!isAbortError(err)) {
+            failedPages.add(page);
+            renderedStart = -1;
+            renderedEnd = -1;
+            schedule();
+          }
+        }));
+      };
+      let raf = 0;
+      let renderedStart = -1;
+      let renderedEnd = -1;
+      let search = null;
+      let searchController = null;
+      const render = () => {
+        raf = 0;
+        const viewportHeight = scroller.clientHeight || window.innerHeight;
+        const overscan = 20;
+        const start = Math.max(0, Math.floor(scroller.scrollTop / VIRTUAL_SOURCE_ROW_HEIGHT) - overscan);
+        const end = Math.min(totalRows, Math.ceil((scroller.scrollTop + viewportHeight) / VIRTUAL_SOURCE_ROW_HEIGHT) + overscan);
+        if (start === renderedStart && end === renderedEnd)
+          return;
+        renderedStart = start;
+        renderedEnd = end;
+        windowEl.replaceChildren();
+        windowEl.style.transform = "translateY(" + start * VIRTUAL_SOURCE_ROW_HEIGHT + "px)";
+        const fragment = document.createDocumentFragment();
+        for (let index = start;index < end; index++) {
+          const lineNumber = index + 1;
+          if (!lines.has(lineNumber))
+            loadPage(lineNumber);
+          const row = document.createElement("div");
+          row.className = "gdp-source-virtual-row";
+          row.dataset.line = String(lineNumber);
+          row.classList.toggle("gdp-source-line-target", lineInSourceTarget(lineNumber, currentSourceLineTarget(target)));
+          row.classList.toggle("gdp-source-cursor", sourceCursorMatches(target, lineNumber));
+          const num = document.createElement("span");
+          num.className = "gdp-source-virtual-line-number";
+          num.textContent = String(lineNumber);
+          bindSourceLineNumber(num, wrap, target, lineNumber);
+          const code2 = document.createElement("span");
+          code2.className = "gdp-source-virtual-line-code";
+          const line = lines.get(lineNumber);
+          if (line == null) {
+            code2.textContent = "";
+          } else if (appendVirtualSourceLineCode(code2, line, search?.query() || "", search?.activeRange() || null, lineNumber)) {} else if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+            try {
+              code2.innerHTML = hljsRef.highlight(line, { language: lang, ignoreIllegals: true }).value;
+              code2.classList.add("hljs");
+            } catch {
+              code2.textContent = line;
+            }
+          } else {
+            code2.textContent = line;
+          }
+          row.append(num, code2);
+          fragment.appendChild(row);
+        }
+        windowEl.appendChild(fragment);
+        if (!complete && totalRows - end < VIRTUAL_SOURCE_PAGE_SIZE) {
+          totalRows += VIRTUAL_SOURCE_PAGE_SIZE;
+          updateTotals();
+        }
+      };
+      const schedule = () => {
+        if (!raf)
+          raf = requestAnimationFrame(render);
+      };
+      scroller.__gdpRenderVirtualSource = render;
+      scroller.addEventListener("scroll", schedule, { passive: true });
+      const findPagedMatches = async (query, matchSignal) => {
+        const matches = [];
+        let startLine = 1;
+        let done = false;
+        while (!done && matches.length < 5000) {
+          const endLine = startLine + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+          const data = await trackLoad(fetch(buildFileRangeUrl(target, startLine, endLine), { signal: matchSignal }).then((res) => {
+            if (!res.ok)
+              throw new Error("file range failed");
+            return res.json();
+          }));
+          if (matchSignal?.aborted)
+            return [];
+          data.lines.forEach((lineValue, index) => {
+            const lineNumber = data.start + index;
+            lines.set(lineNumber, lineValue);
+            for (const range of virtualSourceSearchRanges(lineValue, query)) {
+              matches.push({ line: lineNumber, start: range.start, end: range.end });
+              if (matches.length >= 5000)
+                break;
+            }
+          });
+          totalRows = data.complete ? Math.max(1, data.total) : Math.max(totalRows, data.total, endLine + VIRTUAL_SOURCE_PAGE_SIZE);
+          complete = data.complete === true;
+          updateTotals();
+          if (data.complete || !data.lines.length)
+            done = true;
+          else
+            startLine = data.start + data.lines.length;
+        }
+        renderedStart = -1;
+        renderedEnd = -1;
+        schedule();
+        return matches;
+      };
+      search = createVirtualSourceSearch(wrap, scroller, (query) => {
+        searchController?.abort();
+        searchController = new AbortController;
+        return findPagedMatches(query, searchController.signal);
+      }, render);
+      wrap.__gdpVirtualSourceSearch = search;
+      let resizeObserver = null;
+      resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+        if (!scroller.isConnected) {
+          resizeObserver?.disconnect();
+          resizeObserver = null;
+          return;
+        }
+        schedule();
+      }) : null;
+      resizeObserver?.observe(scroller);
+      updateTotals();
+      if (targetLine <= 1) {
+        render();
+        schedule();
+      }
+      return wrap;
+    }
+    async function renderPagedSourceText(card, target, size, signal) {
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const isStandalone = card.classList.contains("gdp-standalone-source");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer virtual";
+      const header = isStandalone ? null : document.createElement("div");
+      if (header) {
+        header.className = "gdp-source-meta";
+        header.textContent = target.path + " @ " + target.ref;
+        view.appendChild(header);
+      }
+      const lineTarget = lineTargetStart(currentSourceLineTarget(target)) || 1;
+      const initialPage = Math.max(0, Math.floor((lineTarget - 1) / VIRTUAL_SOURCE_PAGE_SIZE));
+      const initialStart = initialPage * VIRTUAL_SOURCE_PAGE_SIZE + 1;
+      const initialEnd = initialStart + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+      const lang = inferLang(target.path);
+      const hljsRef = STATE.syntaxHighlight ? await loadSyntaxHighlighter() : null;
+      if (signal?.aborted)
+        return false;
+      const initial = await trackLoad(fetch(buildFileRangeUrl(target, initialStart, initialEnd), { signal }).then((res) => res.ok ? res.json() : null));
+      if (!initial)
+        return false;
+      if (signal?.aborted)
+        return false;
+      const tabsHost = card.querySelector(".gdp-file-detail-tabs");
+      if (tabsHost) {
+        tabsHost.hidden = false;
+        tabsHost.replaceChildren(createSourceTabs("code").tabs);
+      }
+      SOURCE_CURSOR_TOTALS.set(sourceCursorKey(target), Math.max(1, initial.total, lineTarget));
+      resetSourceCursorForTarget(target, Math.max(1, initial.total, lineTarget));
+      const virtualCode = renderPagedVirtualSource(target, size, initialStart, initial.lines, initial.complete === true, initial.total, hljsRef, lang, signal);
+      view.appendChild(virtualCode);
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+      return true;
+    }
     function renderSourceMedia(card, target, mediaKind) {
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
       const isStandalone = card.classList.contains("gdp-standalone-source");
@@ -10259,6 +10712,19 @@
           return;
         }
         if (displayKind === "text") {
+          const meta = await loadRawFileInfo(target);
+          if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+            return;
+          if (!isVirtualSourceDisabled() && meta.size != null && meta.size >= VIRTUAL_SOURCE_SIZE_THRESHOLD) {
+            const rendered2 = await renderPagedSourceText(card, target, meta.size, controller.signal);
+            if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+              return;
+            if (!rendered2)
+              return;
+            scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
+            finishSourceLoad(req);
+            return;
+          }
           const response = await trackLoad(fetch(buildRawFileUrl(target), { signal: controller.signal }));
           if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
             return;
@@ -10296,6 +10762,7 @@
       if (virtualScroller) {
         const centeredOffset = virtualScroller.clientHeight / 2 - VIRTUAL_SOURCE_ROW_HEIGHT / 2;
         virtualScroller.scrollTop = Math.max(0, (line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - Math.max(0, centeredOffset));
+        virtualScroller.__gdpRenderVirtualSource?.();
         return;
       }
       const row = card.querySelector('.gdp-source-table tr[data-line="' + String(line) + '"]');
@@ -11541,8 +12008,50 @@
       }
       return false;
     }
+    function handleVirtualSourcePagingKey(e2, targetEl) {
+      if (e2.__gdpVirtualSourcePagingHandled)
+        return true;
+      if (e2.defaultPrevented || e2.isComposing || PALETTE || document.querySelector(".mkdp-lightbox"))
+        return false;
+      const editable = isEditableKeyTarget(targetEl);
+      const inVirtualSearch = !!targetEl?.closest(".gdp-source-virtual-search");
+      if (editable && !inVirtualSearch)
+        return false;
+      const key = e2.key.toLowerCase();
+      if (e2.altKey || e2.metaKey)
+        return false;
+      const isPlainPageKey = (key === "pagedown" || key === "pageup") && !e2.ctrlKey && !e2.shiftKey;
+      const isCtrlArrowKey = (key === "arrowdown" || key === "arrowup") && e2.ctrlKey && !e2.shiftKey;
+      if (!isPlainPageKey && !isCtrlArrowKey)
+        return false;
+      const scroller = findMainScrollTarget();
+      if (!scroller || !scroller.matches("#content .gdp-source-virtual-scroller"))
+        return false;
+      const pageDown = key === "pagedown" || key === "arrowdown";
+      const pageUp = key === "pageup" || key === "arrowup";
+      if (!pageDown && !pageUp)
+        return false;
+      e2.__gdpVirtualSourcePagingHandled = true;
+      e2.preventDefault();
+      e2.stopPropagation();
+      scrollMainPanel(pageDown ? 1 : -1, e2.repeat, "page");
+      focusMainSurface();
+      return true;
+    }
+    function handleVirtualSourcePagingKeydown(e2) {
+      handleVirtualSourcePagingKey(e2, e2.target);
+    }
+    document.addEventListener("keydown", handleVirtualSourcePagingKeydown, { capture: true });
     document.addEventListener("keydown", (e2) => {
+      if (e2.__gdpVirtualSourcePagingHandled)
+        return;
       const targetEl = e2.target;
+      if ((e2.ctrlKey || e2.metaKey) && e2.key.toLowerCase() === "f" && !isEditableKeyTarget(targetEl)) {
+        if (openVirtualSourceSearchFromKeyboard(targetEl)) {
+          e2.preventDefault();
+          return;
+        }
+      }
       const scope = keymapScope(targetEl);
       const action = resolveKeymapAction(e2, {
         scope,