yamlover 0.3.4 → 0.3.6

package/src/client/renderers/paged.ts

@@ -1,137 +0,0 @@
-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/panzoom.ts

@@ -1,101 +0,0 @@
-import L from "leaflet";
-
-/**
- * The unified pan/zoom/select gesture model for a Leaflet map (shared by the image viewer and the
- * KML map, see the UI guide). It overrides Leaflet's defaults so SELECTING is the primary gesture:
- *
- *   - plain DRAG    → rubber-band a selection rectangle (→ `onSelect`, to annotate the region)
- *   - ctrl/alt DRAG → pan (grab-and-drag the canvas)
- *   - plain WHEEL   → pan vertically (scroll the canvas, like scrolling text)
- *   - ctrl/alt WHEEL→ zoom around the cursor
- *
- * When `onSelect` is omitted (e.g. an inline chapter chunk, which has no annotation target), plain
- * drag PANS instead (Leaflet's default) and the plain wheel is left alone so the page keeps
- * scrolling — only ctrl/alt-wheel zoom is added. Returns a disposer to unwire everything.
- */
-export interface GestureOptions {
-  /** A plain-drag rectangle finished. `bounds` is in the map's coordinate space (CRS.Simple pixels
-   *  for an image, lat/lng for a map); `screen` is the viewport point to anchor the menu at. */
-  onSelect?: (bounds: L.LatLngBounds, screen: { x: number; y: number }) => void;
-  /** The live rubber-band color (the current highlight color). */
-  color?: () => string;
-}
-
-const hasMod = (e: MouseEvent | WheelEvent): boolean => e.ctrlKey || e.altKey || e.metaKey;
-
-export function wireGestures(map: L.Map, opts: GestureOptions): () => void {
-  const container = map.getContainer();
-  const selectable = !!opts.onSelect;
-
-  // Selecting needs drag free for the rubber-band; without it, keep Leaflet's drag-to-pan.
-  if (selectable) map.dragging.disable();
-  map.scrollWheelZoom.disable(); // we drive the wheel ourselves (pan vs. zoom by modifier)
-  map.doubleClickZoom.disable();
-  map.boxZoom.disable();
-
-  let band: L.Rectangle | null = null;
-  let start: L.LatLng | null = null;
-  let startPt: L.Point | null = null;
-  let panning = false;
-  let panPrev: L.Point | null = null;
-
-  const onDown = (e: L.LeafletMouseEvent) => {
-    if (e.originalEvent.button !== 0) return; // left button only — right/middle never select or pan
-    if (hasMod(e.originalEvent)) {
-      if (!selectable) return; // dragging still enabled → Leaflet pans natively
-      panning = true; // modifier-drag → manual pan
-      panPrev = e.containerPoint;
-      L.DomUtil.disableTextSelection();
-    } else if (selectable) {
-      start = e.latlng; // plain drag → rubber-band a selection
-      startPt = e.containerPoint;
-      const c = opts.color?.() ?? "#f9e2af";
-      // a bold dashed "marching ants" rubber-band so the selection is clearly visible over a busy map
-      band = L.rectangle(L.latLngBounds(e.latlng, e.latlng), { className: "yo-band", color: c, weight: 3, dashArray: "6 4", fillColor: c, fillOpacity: 0.25, interactive: false }).addTo(map);
-      L.DomUtil.disableTextSelection();
-    }
-  };
-  const onMove = (e: L.LeafletMouseEvent) => {
-    if (panning && panPrev) {
-      map.panBy(panPrev.subtract(e.containerPoint), { animate: false });
-      panPrev = e.containerPoint;
-    } else if (band && start) {
-      band.setBounds(L.latLngBounds(start, e.latlng));
-    }
-  };
-  const onUp = (e: L.LeafletMouseEvent) => {
-    L.DomUtil.enableTextSelection();
-    if (panning) { panning = false; panPrev = null; return; }
-    if (band && start && startPt) {
-      const bounds = L.latLngBounds(start, e.latlng);
-      const moved = startPt.distanceTo(e.containerPoint) >= 4; // ignore a click (zero-size drag)
-      band.remove();
-      band = null; start = null; startPt = null;
-      const oe = e.originalEvent;
-      if (moved) opts.onSelect!(bounds, { x: oe.clientX, y: oe.clientY });
-    }
-  };
-  map.on("mousedown", onDown);
-  map.on("mousemove", onMove);
-  map.on("mouseup", onUp);
-
-  const onWheel = (ev: WheelEvent) => {
-    if (hasMod(ev)) {
-      ev.preventDefault();
-      map.setZoomAround(map.mouseEventToLatLng(ev), map.getZoom() + (ev.deltaY < 0 ? 1 : -1));
-    } else if (selectable) {
-      ev.preventDefault(); // a full image/map view pans vertically on a plain wheel
-      map.panBy([0, ev.deltaY], { animate: false });
-    }
-    // else (chunk, plain wheel): let the event bubble so the page scrolls
-  };
-  container.addEventListener("wheel", onWheel, { passive: false });
-
-  return () => {
-    map.off("mousedown", onDown);
-    map.off("mousemove", onMove);
-    map.off("mouseup", onUp);
-    container.removeEventListener("wheel", onWheel);
-    band?.remove();
-  };
-}

package/src/client/renderers/pdf.tsx

@@ -1,316 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Document, Page, pdfjs } from "react-pdf";
-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. */
-interface PdfRegion { page: number; x: number; y: number; w: number; h: number; title?: string; color?: string; ann?: Annotation }
-const num = (v: unknown): number => Number(v) || 0;
-
-// pdf.js renders in a Web Worker; point it at the bundled worker (the version
-// react-pdf depends on) resolved through Vite. Done once at module load.
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  "pdfjs-dist/build/pdf.worker.min.mjs",
-  import.meta.url,
-).toString();
-
-/**
- * Renders a `application/pdf` file with pdf.js (via react-pdf): every page laid out top-to-bottom,
- * fit to the pane's width. A plain wheel scrolls the document and text stays selectable; ctrl/alt-
- * wheel zooms (scales the page width), matching the image/map viewers (see the UI guide).
- * SELECTING text on a page raises the color palette and saves a `pdf` region annotation (the
- * selection's bounding box, in page points) — the same flow as image/map regions. The document is
- * loaded straight from `/api/blob` so pdf.js streams the bytes itself.
- */
-export function PdfView({ node }: { node: NodeJson }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(0);
-  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
-  // through the pdf.js worker at open (and again on each zoom), which saturates the main
-  // thread and janks scrolling on long documents. Far pages are fixed-height placeholders.
-  const wraps = useRef(new Map<number, HTMLElement>());
-  const [near, setNear] = useState<Set<number>>(() => new Set());
-  useEffect(() => {
-    if (!pages) return;
-    const obs = new IntersectionObserver(
-      (entries) => {
-        setNear((prev) => {
-          const next = new Set(prev);
-          for (const e of entries) {
-            const pn = Number((e.target as HTMLElement).dataset.page);
-            if (e.isIntersecting) next.add(pn);
-            else next.delete(pn);
-          }
-          return next.size === prev.size && [...next].every((p) => prev.has(p)) ? prev : next;
-        });
-      },
-      // root = the .filepdf scroller (the pane scrolls INSIDE it — a viewport root would
-      // never see pages clipped below its fold); pre-render ~2 screens above/below
-      { root: ref.current, rootMargin: "2000px 0px" },
-    );
-    for (const el of wraps.current.values()) obs.observe(el);
-    return () => obs.disconnect();
-    // wrappers exist only once BOTH the page count and the pane width are known
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pages, width > 0]);
-
-  const material = useMaterialAnnotations(node.path);
-  const { openCreate, openEdit, palette, preview } = useAnnotationMenu(material);
-  // include the live PREVIEW so the rectangle stays drawn while the menu is open
-  const shown = preview
-    ? [...material.annotations, { path: "(preview)", selector: preview.selector, tag: preview.tag } as Annotation]
-    : material.annotations;
-  const regions: PdfRegion[] = shown
-    .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;
-    if (!el) return;
-    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-
-  // 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); clearTimeout(end); };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // 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 = () => {
-    const sel = window.getSelection();
-    if (!sel || sel.isCollapsed || !sel.anchorNode) return;
-    const host = sel.anchorNode.nodeType === 1 ? (sel.anchorNode as Element) : sel.anchorNode.parentElement;
-    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; // raster px per point
-    if (!sc) return;
-    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) / 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} 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 && (
-            <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; // 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 (
-                <div
-                  key={i}
-                  className="pdf-page"
-                  data-page={pn}
-                  ref={(el) => {
-                    if (el) wraps.current.set(pn, el);
-                    else wraps.current.delete(pn);
-                  }}
-                >
-                  {near.has(pn) ? (
-                    <>
-                      <Page
-                        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;
-                          return (
-                            <div
-                              key={j}
-                              className={"pdf-region" + (r.ann ? " editable" : "")}
-                              title={r.ann ? r.title || "click to recolor or delete" : r.title}
-                              onClick={r.ann ? (e) => { e.stopPropagation(); openEdit(r.ann!, { x: e.clientX, y: e.clientY }); } : undefined}
-                              style={{ left: r.x * sc, top: r.y * sc, width: r.w * sc, height: r.h * sc, borderColor: c, background: c + "2e" }}
-                            />
-                          );
-                        })}
-                    </>
-                  ) : (
-                    <div className="pdf-placeholder" style={{ width: pageWidth, height: estHeight }} />
-                  )}
-                </div>
-              );
-            })}
-            </div>
-            </div>
-          )}
-        </Document>
-      </div>
-      {palette}
-    </>
-  );
-}

package/src/client/renderers/plaintext.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { NodeJson, blobUrl } from "../api";
-import { Chunk } from "./registry";
-
-/**
- * The renderer for a `binary`/`text/plain` (`.txt`/`.text`/`.log`) node: the file's
- * bytes shown verbatim in a `<pre>` — NO markup interpretation. (A bare `.txt`
- * otherwise falls to the marklower renderer, which both processes `*…*`/`_…_`-style
- * formatting sequences and re-flows the text, both misleading for plain text.)
- *
- * Because the server serves `text/plain` as raw bytes (it is deliberately kept out
- * of the server's TEXT_FORMATS), the **encoding is chosen on the client** — legacy
- * Cyrillic files are commonly CP866 / Windows-1251 / KOI8-R, not UTF-8. The choice
- * rides in the URL as `?enc=`, alongside `?format=`, so a particular reading is a
- * shareable link; the {@link EncodingControl} `config` control in the node bar
- * writes it (like the CSV controls / markdown width input). Bytes are fetched once
- * per path and re-decoded in place when the encoding changes — no refetch.
- */
-
-const params = () => new URLSearchParams(window.location.search);
-
-/** Selectable encodings — label shown in the bar → the `TextDecoder` label. All four
- *  are part of the WHATWG Encoding standard, so `TextDecoder` decodes them natively. */
-export const ENCODINGS: { label: string; value: string }[] = [
-  { label: "UTF-8", value: "utf-8" },
-  { label: "Windows-1251", value: "windows-1251" },
-  { label: "CP866", value: "ibm866" },
-  { label: "KOI8-R", value: "koi8-r" },
-];
-const DEFAULT_ENCODING = "utf-8";
-const isEncoding = (v: string) => ENCODINGS.some((e) => e.value === v);
-
-/** The encoding from the URL's `?enc=`, or UTF-8 (an unknown value is ignored). */
-export function textEncoding(): string {
-  const e = params().get("enc") ?? "";
-  return isEncoding(e) ? e : DEFAULT_ENCODING;
-}
-
-/** Decode bytes under `encoding`, falling back to UTF-8 if the label is unsupported. */
-function decode(bytes: Uint8Array, encoding: string): string {
-  try {
-    return new TextDecoder(encoding).decode(bytes);
-  } catch {
-    return new TextDecoder("utf-8").decode(bytes);
-  }
-}
-
-/** Fetch a file's raw bytes once per `path` (decoding happens separately, so changing
- *  the encoding does not refetch). */
-function useBytes(path: string): { bytes: Uint8Array | null; error: string | null } {
-  const [bytes, setBytes] = useState<Uint8Array | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  useEffect(() => {
-    let cancelled = false;
-    setBytes(null);
-    setError(null);
-    fetch(blobUrl(path))
-      .then((r) => r.arrayBuffer())
-      .then((buf) => !cancelled && setBytes(new Uint8Array(buf)))
-      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
-    return () => {
-      cancelled = true;
-    };
-  }, [path]);
-  return { bytes, error };
-}
-
-export function PlaintextView({ node }: { node: NodeJson }) {
-  const { bytes, error } = useBytes(node.path);
-  const encoding = textEncoding();
-  const text = useMemo(() => (bytes ? decode(bytes, encoding) : null), [bytes, encoding]);
-  if (error) return <div className="error">text: {error}</div>;
-  if (text == null) return <div className="loading">reading…</div>;
-  return (
-    <div className="text">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <pre className="plaintext">{text}</pre>
-    </div>
-  );
-}
-
-/** A plain-text chunk embedded inline in a chapter: just the verbatim text, decoded
- *  as UTF-8 (no per-chunk URL controls, like the CSV chunk). */
-export function PlaintextChunk({ chunk }: { chunk: Chunk }) {
-  const { bytes, error } = useBytes(chunk.path);
-  const text = useMemo(() => (bytes ? decode(bytes, DEFAULT_ENCODING) : null), [bytes]);
-  if (error) return <div className="error">text: {error}</div>;
-  if (text == null) return <div className="loading">reading…</div>;
-  return <pre className="plaintext">{text}</pre>;
-}
-
-/**
- * The encoding selector shown in the node bar beside the plaintext tab — the
- * `config` hook. Writes `?enc=` (preserving the path + other params) and calls
- * `rerender` so {@link PlaintextView} re-decodes the already-fetched bytes.
- */
-export function EncodingControl({ rerender }: { rerender: () => void }) {
-  const enc = textEncoding();
-  const setEnc = (value: string) => {
-    const q = params();
-    if (value && value !== DEFAULT_ENCODING) q.set("enc", value);
-    else q.delete("enc");
-    const qs = q.toString();
-    window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
-    rerender();
-  };
-  return (
-    <label className="enc-control">
-      encoding{" "}
-      <select value={enc} onChange={(e) => setEnc(e.target.value)}>
-        {ENCODINGS.map((o) => (
-          <option key={o.value} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}