yamlover 0.3.1 → 0.3.3

package/src/client/renderers/paged.ts

@@ -0,0 +1,137 @@
+import { useEffect, useRef } from "react";
+import { pageFromUrl, writePageToUrl } from "../paths";
+
+/** Page-tracking + zoom-anchoring for a vertically-paged viewer (PDF, DjVu). */
+export interface PagedScroll {
+  /** Record {page, fraction-within-page} from the current scroll — call BEFORE a zoom commit. */
+  captureAnchor(): void;
+  /** After the zoom reflow, put that same page+fraction back under the viewport. */
+  restoreAnchor(): void;
+  /** Scroll a 1-based page to the top of the viewport (used for the initial `?page=` restore). */
+  scrollToPage(n: number): void;
+  /** The page the URL asked for on mount (1 if none). */
+  initialPage: number;
+}
+
+/**
+ * Tracks the current page of a paged viewer and keeps it stable across zoom and reload.
+ *
+ * `scrollRef` is the scrolling container; `getPageEls()` returns the page elements top-to-bottom
+ * (1-based by array index, may be short/sparse before everything has rendered); `ready` is true
+ * once pages are laid out enough to measure. While ready it (a) writes the current page to `?page=`
+ * on scroll (rAF-throttled, replaceState — no remount), (b) restores `?page=` once on load
+ * (re-attempting until the target page's height settles, since it may start as a placeholder), and
+ * (c) exposes capture/restore so the caller can hold the reading position across a zoom reflow.
+ *
+ * All geometry uses getBoundingClientRect relative to the scroller, so it is correct regardless of
+ * which element is the page's offsetParent.
+ */
+export function usePagedScroll(
+  scrollRef: React.RefObject<HTMLElement | null>,
+  getPageEls: () => HTMLElement[],
+  ready: boolean,
+): PagedScroll {
+  const initialPage = useRef(pageFromUrl()).current;
+  const anchor = useRef<{ page: number; fraction: number } | null>(null);
+  const suppress = useRef(false); // true around a programmatic scroll → don't write ?page=
+  const restored = useRef(false); // initial ?page= scroll settled
+  const lastH = useRef(0); // target-page height at the last restore attempt (settled when stable)
+
+  // A page's top in the scroller's content coordinates (offsetParent-agnostic).
+  const contentTop = (el: HTMLElement): number => {
+    const sc = scrollRef.current!;
+    return el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop;
+  };
+  // The 1-based page at the viewport's "reading" line (a bit below the top).
+  const currentPage = (): number => {
+    const sc = scrollRef.current;
+    const els = getPageEls();
+    if (!sc || !els.length) return 1;
+    const probeY = sc.getBoundingClientRect().top + sc.clientHeight * 0.3;
+    for (let i = 0; i < els.length; i++) {
+      const r = els[i]?.getBoundingClientRect();
+      if (r && probeY < r.bottom) return i + 1;
+    }
+    return els.length;
+  };
+  const scrollTo = (top: number) => {
+    const sc = scrollRef.current;
+    if (!sc) return;
+    suppress.current = true;
+    sc.scrollTop = top;
+    setTimeout(() => (suppress.current = false), 120); // outlast the resulting scroll event
+  };
+  const scrollToPage = (n: number) => {
+    const els = getPageEls();
+    if (!els.length) return;
+    const t = els[Math.min(Math.max(n, 1), els.length) - 1];
+    if (t) scrollTo(contentTop(t));
+  };
+
+  // Page tracking — rAF-throttled scroll → ?page=.
+  useEffect(() => {
+    const sc = scrollRef.current;
+    if (!sc || !ready) return;
+    let raf = 0;
+    const onScroll = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        if (!suppress.current) writePageToUrl(currentPage());
+      });
+    };
+    sc.addEventListener("scroll", onScroll, { passive: true });
+    return () => { sc.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ready]);
+
+  // Initial ?page= restore — runs each render until the target page's height stabilizes (it may
+  // start as an estimated-height placeholder), then latches `restored`.
+  useEffect(() => {
+    if (restored.current || initialPage <= 1) { restored.current = true; return; }
+    if (!ready) return;
+    const els = getPageEls();
+    const t = els[Math.min(initialPage, els.length) - 1];
+    if (!t) return; // target not laid out yet — a later render retries
+    const h = t.getBoundingClientRect().height;
+    scrollToPage(initialPage);
+    if (h > 0 && h === lastH.current) restored.current = true; // height settled → done
+    lastH.current = h;
+  });
+
+  const captureAnchor = () => {
+    const sc = scrollRef.current;
+    const els = getPageEls();
+    if (!sc || !els.length) { anchor.current = null; return; }
+    const page = currentPage();
+    const t = els[page - 1];
+    const h = t?.getBoundingClientRect().height ?? 0;
+    anchor.current = t ? { page, fraction: h ? (sc.scrollTop - contentTop(t)) / h : 0 } : null;
+  };
+  // Restore the anchored page+fraction, RE-APPLYING over a few frames until scrollTop stabilizes:
+  // a zoom commit resizes far-page placeholders and renders newly-near pages asynchronously, which
+  // shifts everything above the anchor — a single set would land a page or two off (or, when
+  // shrinking hard, at the clamped bottom). Re-applying tracks the anchor page as layout settles.
+  const restoreAnchor = () => {
+    const a = anchor.current;
+    if (!a) return;
+    let tries = 0;
+    let last = -1;
+    suppress.current = true;
+    const apply = () => {
+      const sc = scrollRef.current;
+      const t = getPageEls()[a.page - 1];
+      if (!sc || !t) { suppress.current = false; return; }
+      sc.scrollTop = contentTop(t) + a.fraction * t.getBoundingClientRect().height;
+      if (Math.abs(sc.scrollTop - last) > 1 && tries++ < 8) {
+        last = sc.scrollTop;
+        requestAnimationFrame(apply);
+      } else {
+        setTimeout(() => (suppress.current = false), 120); // settled — release the page-writer
+      }
+    };
+    apply();
+  };
+
+  return { captureAnchor, restoreAnchor, scrollToPage, initialPage };
+}

package/src/client/renderers/pdf.tsx

@@ -4,6 +4,7 @@ import "react-pdf/dist/Page/TextLayer.css";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import { Annotation, NodeJson, blobUrl } from "../api";
 import { DEFAULT_COLOR, colorOf, editable, useAnnotationMenu, useMaterialAnnotations } from "./annotate";
+import { usePagedScroll } from "./paged";
 
 /** A rectangular annotation region on a PDF page, in points (origin top-left). `ann` is the source
  *  annotation when real/saved (→ clickable to edit); absent for the live preview. */
@@ -31,6 +32,16 @@ export function PdfView({ node }: { node: NodeJson }) {
   const [pages, setPages] = useState(0);
   const [zoom, setZoom] = useState(1); // ctrl/alt-wheel scale factor
   const [orig, setOrig] = useState<Record<number, { w: number; h: number }>>({}); // each page's natural size in points
+  // Pages whose pdf.js TEXT LAYER is unusable for selection — absent (a scanned PDF has no text)
+  // or pathological (some fonts make pdf.js emit glyph boxes many times a line tall, so a text
+  // selection's geometry is garbage). Such pages fall back to a drag-marquee, like images.
+  const [marquee, setMarquee] = useState<Set<number>>(() => new Set());
+  const [drag, setDrag] = useState<{ page: number; x0: number; y0: number; x1: number; y1: number } | null>(null);
+  // Zoom scales the page content via a CSS transform (no re-raster → no blink). The transformed
+  // `.pdf-content` is out of flow, so a `.pdf-sizer` reserves the SCALED footprint to keep the
+  // scrollbar/height right; `contentH` is the content's natural (unscaled) height, measured below.
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentH, setContentH] = useState(0);
 
   // WINDOWED RENDERING: every page keeps a wrapper (so the scroll height is right), but only
   // pages near the viewport mount a real <Page> — mounting ALL of them queues every canvas
@@ -72,6 +83,27 @@ export function PdfView({ node }: { node: NodeJson }) {
     .filter((a) => a.selector?.type === "pdf")
     .map((a) => ({ page: num(a.selector!.page) || 1, x: num(a.selector!.x), y: num(a.selector!.y), w: num(a.selector!.w), h: num(a.selector!.h), title: a.description, color: colorOf(a), ann: editable(a) ? a : undefined }));
 
+  // Page tracking + zoom-anchoring (`?page=` in the URL; same page stays put across a zoom). Every
+  // page has a `.pdf-page` wrapper (windowing swaps only the CONTENT), so the list is dense 1..N.
+  const getPageEls = () => {
+    const out: HTMLElement[] = [];
+    for (let i = 1; i <= pages; i++) { const el = wraps.current.get(i); if (el) out.push(el); }
+    return out;
+  };
+  const paged = usePagedScroll(ref, getPageEls, width > 0 && pages > 0);
+  const pagedRef = useRef(paged);
+  pagedRef.current = paged;
+  // After a zoom COMMIT reflows the pages, restore the captured reading position.
+  useLayoutEffect(() => { paged.restoreAnchor(); }, [zoom]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // The `.filepdf` scroller is its OWN scroll container nested in the (focused) RHS pane, so the
+  // pane's focus can't drive it — focus it on mount so arrows / space / PageUp-Down / Home-End
+  // scroll the document natively. Skip when embedded as a chapter chunk (several would fight + jump).
+  useEffect(() => {
+    const el = ref.current;
+    if (el && !el.closest(".chunk-body")) el.focus({ preventScroll: true });
+  }, []);
+
   // Track the pane width so pages re-flow on resize.
   useLayoutEffect(() => {
     const el = ref.current;
@@ -81,20 +113,103 @@ export function PdfView({ node }: { node: NodeJson }) {
     return () => ro.disconnect();
   }, []);
 
-  // ctrl/alt-wheel zooms; a plain wheel is left alone so the pane keeps scrolling.
+  // Measure the content's natural (unscaled) height so the sizer can reserve `height*disp`.
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setContentH(el.offsetHeight));
+    ro.observe(el);
+    setContentH(el.offsetHeight);
+    return () => ro.disconnect();
+  }, [pages, width > 0]);
+
+  // ctrl/alt-wheel zooms; a plain wheel is left alone so the pane keeps scrolling. Zoom is applied
+  // as a CSS scale on the content (below) — NOT by re-rastering the pages — so it never blinks; the
+  // reading position is anchored at the start of a wheel burst and restored after each step.
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
+    let bursting = false;
+    let end = 0;
     const onWheel = (e: WheelEvent) => {
       if (!(e.ctrlKey || e.altKey || e.metaKey)) return;
       e.preventDefault();
+      if (!bursting) { pagedRef.current.captureAnchor(); bursting = true; }
+      clearTimeout(end);
+      end = window.setTimeout(() => (bursting = false), 250);
       setZoom((z) => Math.min(5, Math.max(0.4, z * (e.deltaY < 0 ? 1.1 : 1 / 1.1))));
     };
     el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
+    return () => { el.removeEventListener("wheel", onWheel); clearTimeout(end); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const pageWidth = Math.min(width, 1000) * zoom;
+  // RASTER the pages at a FIXED, zoom-independent width (supersampled by QUALITY so CSS zoom-in
+  // stays crisp to ~QUALITY×), and apply the user's zoom as a CSS scale on the content wrapper.
+  // Because the <Page width> never changes with zoom, pdf.js never re-rasterises (no canvas remount,
+  // no white flash) and the windowed `near` set doesn't churn — zoom is a pure, blink-free reflow.
+  const QUALITY = 2;
+  const pageWidth = Math.min(width, 1000) * QUALITY; // the raster width fed to <Page>
+  const disp = zoom / QUALITY; // CSS zoom on the content; display width = pageWidth*disp = base*zoom
+  const previewColor = preview?.color ?? DEFAULT_COLOR;
+
+  // Judge a page's text layer once it has rendered: unusable when there is no real text (< 3
+  // spans) or a typical glyph box is an implausible fraction of the page height (a normal line is
+  // ~1–2%; the pathological case is ~30%). Unusable pages switch to the marquee overlay below.
+  const judgeTextLayer = (pn: number) => {
+    const wrap = wraps.current.get(pn);
+    const tl = wrap?.querySelector(".textLayer");
+    const pageH = wrap?.getBoundingClientRect().height || 0;
+    let unusable = true;
+    if (tl && pageH) {
+      const hs = [...tl.querySelectorAll("span")]
+        .filter((s) => s.textContent?.trim())
+        .map((s) => s.getBoundingClientRect().height)
+        .sort((a, b) => a - b);
+      unusable = hs.length < 3 || hs[hs.length >> 1] / pageH > 0.05;
+    }
+    setMarquee((m) => {
+      if (unusable === m.has(pn)) return m;
+      const next = new Set(m);
+      if (unusable) next.add(pn);
+      else next.delete(pn);
+      return next;
+    });
+  };
+
+  // Marquee drag on an unusable-text-layer page. The wrapper rect is in DISPLAY (CSS-zoomed) px;
+  // divide by `disp` so coords are in RASTER (content-local) px — the same space the preview rect
+  // and saved regions render in (they live inside the zoomed content), and `/sc` then gives points.
+  const dragStart = (pn: number, e: React.MouseEvent) => {
+    const wrap = wraps.current.get(pn);
+    if (!wrap) return;
+    const pr = wrap.getBoundingClientRect();
+    const x = (e.clientX - pr.left) / disp, y = (e.clientY - pr.top) / disp;
+    setDrag({ page: pn, x0: x, y0: y, x1: x, y1: y });
+  };
+  const dragMove = (e: React.MouseEvent) =>
+    setDrag((d) => {
+      const wrap = d && wraps.current.get(d.page);
+      if (!wrap) return d;
+      const pr = wrap.getBoundingClientRect();
+      return { ...d!, x1: (e.clientX - pr.left) / disp, y1: (e.clientY - pr.top) / disp };
+    });
+  const dragEnd = (pn: number, e: React.MouseEvent) => {
+    const d = drag;
+    setDrag(null);
+    if (!d || d.page !== pn) return;
+    const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // raster px per point
+    const wrap = wraps.current.get(pn);
+    if (!sc || !wrap) return;
+    const pr = wrap.getBoundingClientRect();
+    const x1 = (e.clientX - pr.left) / disp, y1 = (e.clientY - pr.top) / disp; // raster px
+    const left = Math.min(d.x0, x1), top = Math.min(d.y0, y1), w = Math.abs(x1 - d.x0), h = Math.abs(y1 - d.y0);
+    if (w * disp < 3 || h * disp < 3) return; // a click, not a drag (threshold in display px)
+    openCreate(
+      { type: "pdf", page: pn, x: Math.round(left / sc), y: Math.round(top / sc), w: Math.round(w / sc), h: Math.round(h / sc) },
+      { x: pr.left + left * disp, y: pr.top + (top + h) * disp + 6 }, // menu position in viewport px
+    );
+  };
 
   // A finished text selection on a page → a `pdf` region (its bounding box, converted to points).
   const onMouseUp = () => {
@@ -104,30 +219,34 @@ export function PdfView({ node }: { node: NodeJson }) {
     const pageEl = host?.closest(".pdf-page") as HTMLElement | null;
     if (!pageEl || !ref.current?.contains(pageEl)) return;
     const pn = Number(pageEl.dataset.page);
-    const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // rendered px per point
+    const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // raster px per point
     if (!sc) return;
-    const pr = pageEl.getBoundingClientRect();
+    const pr = pageEl.getBoundingClientRect(); // display (CSS-zoomed) px
     const sr = sel.getRangeAt(0).getBoundingClientRect();
     if (sr.width < 2 || sr.height < 2) return;
+    // sr/pr are display px → ÷disp to raster (content-local) px, then ÷sc to points.
+    const k = sc * disp; // display px per point
     openCreate(
-      { type: "pdf", page: pn, x: Math.round((sr.left - pr.left) / sc), y: Math.round((sr.top - pr.top) / sc), w: Math.round(sr.width / sc), h: Math.round(sr.height / sc) },
+      { type: "pdf", page: pn, x: Math.round((sr.left - pr.left) / k), y: Math.round((sr.top - pr.top) / k), w: Math.round(sr.width / k), h: Math.round(sr.height / k) },
       { x: sr.left, y: sr.bottom + 6 },
     );
   };
 
   return (
     <>
-      <div className="filepdf yo-zoomable" ref={ref} onMouseUp={onMouseUp}>
+      <div className="filepdf yo-zoomable" ref={ref} tabIndex={0} onMouseUp={onMouseUp}>
         <Document
           file={blobUrl(node.path)}
           onLoadSuccess={({ numPages }) => setPages(numPages)}
           loading={<div className="loading">loading PDF…</div>}
           error={<div className="error">could not load PDF</div>}
         >
-          {width > 0 &&
-            Array.from({ length: pages }, (_, i) => {
+          {width > 0 && (
+            <div className="pdf-sizer" style={{ width: pageWidth * disp, height: contentH * disp }}>
+            <div className="pdf-content" ref={contentRef} style={{ width: pageWidth, transform: `scale(${disp})`, transformOrigin: "top left" }}>
+            {Array.from({ length: pages }, (_, i) => {
               const pn = i + 1;
-              const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // rendered px per point — tracks zoom
+              const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // RASTER px per point (regions render inside the CSS-zoomed content)
               // a far page's placeholder: its measured aspect when known, A4 portrait until then
               const estHeight = pageWidth * (orig[pn] ? orig[pn].h / orig[pn].w : Math.SQRT2);
               return (
@@ -146,8 +265,26 @@ export function PdfView({ node }: { node: NodeJson }) {
                         pageNumber={pn}
                         width={pageWidth}
                         onLoadSuccess={(p) => setOrig((o) => (o[pn] ? o : { ...o, [pn]: { w: p.originalWidth || pageWidth, h: p.originalHeight || pageWidth * Math.SQRT2 } }))}
+                        onRenderTextLayerSuccess={() => judgeTextLayer(pn)}
                         loading={<div className="loading" style={{ height: estHeight }}>page {pn}…</div>}
                       />
+                      {/* unusable text layer → a crosshair marquee over the page (drag a box). It
+                          sits ABOVE the text layer but BELOW the region divs (rendered next), so
+                          existing editable regions stay clickable while empty areas start a drag. */}
+                      {marquee.has(pn) && sc > 0 && (
+                        <div className="pdf-marquee" onMouseDown={(e) => dragStart(pn, e)} onMouseMove={dragMove} onMouseUp={(e) => dragEnd(pn, e)}>
+                          {drag?.page === pn && (
+                            <div
+                              className="pdf-region"
+                              style={{
+                                left: Math.min(drag.x0, drag.x1), top: Math.min(drag.y0, drag.y1),
+                                width: Math.abs(drag.x1 - drag.x0), height: Math.abs(drag.y1 - drag.y0),
+                                borderColor: previewColor, background: previewColor + "2e",
+                              }}
+                            />
+                          )}
+                        </div>
+                      )}
                       {sc > 0 &&
                         regions.filter((r) => r.page === pn).map((r, j) => {
                           const c = r.color || DEFAULT_COLOR;
@@ -168,6 +305,9 @@ export function PdfView({ node }: { node: NodeJson }) {
                 </div>
               );
             })}
+            </div>
+            </div>
+          )}
         </Document>
       </div>
       {palette}

package/src/client/styles.css

@@ -148,6 +148,10 @@ body {
   flex: 1 1 auto;
   padding: 14px 18px;
 }
+/* programmatically focused on TOC click (so the keyboard drives the viewer) — no focus ring */
+.right:focus {
+  outline: none;
+}
 .splitter {
   flex: 0 0 5px;
   cursor: col-resize;
@@ -519,6 +523,11 @@ a.chunk-index:hover {
   height: calc(100vh - 160px);
   min-height: 360px;
 }
+/* focused on mount so the keyboard scrolls the document — no focus ring on the scroller */
+.filepdf:focus,
+.filedjvu:focus {
+  outline: none;
+}
 .fileimage {
   /* keep the image's own aspect ratio — never stretch (007) */
   max-width: 100%;
@@ -544,16 +553,47 @@ a.chunk-index:hover {
   background: #fff;
 }
 .filepdf .react-pdf__Page,
-.djvu-page {
+.djvu-page-wrap {
   margin: 0 0 12px; /* left-aligned (004) */
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
 }
-/* a decoded DjVu page — width is driven inline by the zoom factor (ctrl/alt-wheel) */
+/* a DjVu page: a positioned wrapper (sized inline to the display width) holding the decoded page
+   <canvas>, its OCR text layer (selectable), the marquee overlay, and the annotation region divs */
+.djvu-page-wrap {
+  position: relative;
+}
 .djvu-page {
   display: block;
+  width: 100%;
   max-width: none;
   background: #fff;
 }
+/* a not-yet-decoded page (windowed rendering) — fills the wrapper's estimated height */
+.djvu-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: #888;
+  font-size: 12px;
+}
+/* OCR text layer: transparent positioned spans over the page → native browser text selection */
+.djvu-textlayer {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow: hidden;
+  line-height: 1;
+}
+.djvu-textlayer span {
+  position: absolute;
+  color: transparent;
+  white-space: pre;
+  transform-origin: 0 0;
+  cursor: text;
+}
 
 /* rendered Markdown / AsciiDoc body */
 .markup {
@@ -884,14 +924,43 @@ a.chunk-index:hover {
   background: #fff;
   opacity: 0.06;
 }
-.pdf-region {
+/* Zoom is a CSS transform on .pdf-content (scales the rendered pages with NO re-raster → no
+   blink). The transformed content is taken out of flow, so .pdf-sizer reserves its scaled
+   footprint to keep the scroll height correct. */
+.pdf-sizer {
+  position: relative;
+}
+.pdf-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* drag-marquee overlay for pages with no usable text layer (scanned/pathological PDF, or a DjVu
+   with no OCR) — above the text layer (z 2), below the editable region divs so saved regions
+   stay clickable */
+.pdf-marquee,
+.djvu-marquee {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  cursor: crosshair;
+  user-select: none;
+}
+.pdf-region,
+.djvu-region {
   position: absolute;
   box-sizing: border-box;
+  /* above the text layer (z 2) and the marquee overlay (z 3) so a saved region is the topmost
+     element at its rectangle — otherwise a text-layer span or the marquee swallows the click and
+     the edit/delete menu never opens */
+  z-index: 4;
   border: 2px solid #f9e2af;
   background: rgba(249, 226, 175, 0.18);
   pointer-events: none; /* the live preview must not block selecting text under it */
 }
-.pdf-region.editable {
+.pdf-region.editable,
+.djvu-region.editable {
   pointer-events: auto; /* a saved region is clickable → the edit menu */
   cursor: pointer;
 }
@@ -1020,6 +1089,12 @@ mark.yo-annotation {
 .dirview-item:hover {
   background: var(--panel);
 }
+/* keyboard selection (roving focus — arrows walk, Enter opens) */
+.dirview-item:focus {
+  outline: none;
+  background: var(--panel);
+  box-shadow: 0 0 0 2px var(--accent) inset;
+}
 .dirview-icon {
   flex: none;
   width: 22px;