makersclaw 0.1.0 → 0.3.0

package/registry/blocks/pdf-viewer/pdf-viewer.jsx

@@ -0,0 +1,1368 @@
+"use client";
+
+// PdfViewer — a PDF on screen: pages in one scrolling column, a page
+// rail of thumbnails, zoom (steps, fit width, fit page, Ctrl/⌘ + wheel or
+// pinch), find in the text, and highlights with notes that save through
+// callbacks. pdf.js (via react-pdf, see ./pdfjs.js) draws the pages; this
+// file is the viewer around them, in the kit and the workspace's tokens.
+//
+// Client only, one static bundle. pdf.js needs the DOM and a worker, and
+// the app's check refuses import() (so no next/dynamic): the modules load
+// with the page (the server half through ssr-shim.js), and the viewer is
+// created only after the first effect — the mount guard. Until then, on
+// the server and in the first paint, the same frame shows with skeleton
+// pages, so nothing jumps.
+//
+// Only the pages near the window are drawn (a 300-page contract scrolls
+// like a 3-page quote); the others hold their exact place as blank paper.
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Button, Field, Icon, IconButton, Input, InputGroup, Kbd, Menu, PasswordInput, Sheet, Skeleton, Tooltip, cx, toast } from "../../ui";
+import { Document, Page } from "./pdfjs";
+import { NotesPanel, TONE_FILL, TONE_RING, toneOf } from "./notes";
+import {
+  anchorAt,
+  clampZoom,
+  findMatches,
+  fitScale,
+  highlightAt,
+  itemBox,
+  indexMatches,
+  layoutPages,
+  markItem,
+  pageAt,
+  rectsForQuote,
+  stepZoom,
+  toPageRects,
+  visiblePages,
+} from "./helpers";
+
+const GAP = 16; // px between pages
+const PAD = 16; // px around the column
+const WIDE = 900; // viewer width (px) from which the rails sit beside the pages
+const COMPACT = 640; // under this the toolbar folds its search and zoom steps
+
+// The search marks, painted into pdf.js's transparent text layer.
+const MARK = "rounded-[2px] bg-warning/35 text-transparent";
+const MARK_CURRENT = "rounded-[2px] bg-primary/40 text-transparent outline-2 outline-primary";
+
+// Handed to pdf.js; copied once per load attempt (react-pdf reloads the
+// document when `options` changes identity, so never per render).
+const OPTIONS = { isEvalSupported: false };
+
+const ZOOM_CHOICES = [
+  { value: "fit", label: "Fit width" },
+  { value: "page", label: "Fit page" },
+  { value: "0.5", label: "50%" },
+  { value: "0.75", label: "75%" },
+  { value: "1", label: "100%" },
+  { value: "1.25", label: "125%" },
+  { value: "1.5", label: "150%" },
+  { value: "2", label: "200%" },
+  { value: "3", label: "300%" },
+];
+
+/** A ref for the viewer's handle: `const v = usePdfViewer()`, then
+ *  `<PdfViewer viewerRef={v} … />` and `v.current?.goToPage(3)`. */
+export function usePdfViewer() {
+  return useRef(null);
+}
+
+export function PdfViewer(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) {
+    return (
+      <Frame className={props.className} height={props.height} label={props.title}>
+        <ToolbarSkeleton />
+        <PagesSkeleton />
+      </Frame>
+    );
+  }
+  return <LiveViewer {...props} />;
+}
+
+function Frame({ className, height = "min(80vh, 860px)", label, children, rootRef, onKeyDown }) {
+  return (
+    <section
+      ref={rootRef}
+      aria-label={label || "PDF document"}
+      onKeyDown={onKeyDown}
+      style={{ height }}
+      className={cx("flex min-h-96 flex-col overflow-hidden rounded-lg border border-border bg-background", className)}
+    >
+      {children}
+    </section>
+  );
+}
+
+// ---- the live viewer --------------------------------------------------------
+
+/** What react-pdf is given: a URL as is, a Blob as is, bytes COPIED (pdf.js
+ *  moves an ArrayBuffer into its worker, which empties the caller's). */
+function toSource(file) {
+  if (!file) return null;
+  if (typeof file === "string") return file;
+  if (typeof ArrayBuffer !== "undefined" && file instanceof ArrayBuffer) return { data: new Uint8Array(file.slice(0)) };
+  if (ArrayBuffer.isView?.(file)) return { data: new Uint8Array(file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength)) };
+  return file;
+}
+
+function LiveViewer({
+  file,
+  title,
+  fileName,
+  highlights,
+  onHighlight,
+  onHighlightChange,
+  onHighlightDelete,
+  initialPage = 1,
+  onPageChange,
+  defaultZoom = "fit",
+  thumbnails = true,
+  search = true,
+  download = true,
+  notes,
+  viewerRef,
+  emptyTitle = "No document yet",
+  emptyBody = "When a PDF is attached, it shows here.",
+  height,
+  loading = false,
+  className,
+}) {
+  const readOnly = !onHighlight;
+  const [attempt, setAttempt] = useState(0);
+  const source = useMemo(() => toSource(file), [file, attempt]); // eslint-disable-line react-hooks/exhaustive-deps
+  // A retry is a new load: react-pdf caches a document by (file, options).
+  const options = useMemo(() => ({ ...OPTIONS }), [attempt]);
+
+  // The document and its geometry.
+  const [pdf, setPdf] = useState(null);
+  const [sizes, setSizes] = useState(null); // [{ width, height }] at scale 1
+  const [loadError, setLoadError] = useState(null);
+  const [password, setPassword] = useState(null); // { submit(pw), wrong }
+  const texts = useRef(null); // [[str]] per page, read on the first search
+  const geo = useRef(null); // [[{ str, x, y, w, h }]] per page, the same read
+  const reading = useRef(null); // the read in progress
+  const [textsReady, setTextsReady] = useState(false);
+
+  // The frame's own width decides the layout, not the window's: the viewer
+  // may sit in a narrow column of a wide screen.
+  const rootRef = useRef(null);
+  const [rootWidth, setRootWidth] = useState(1024);
+  const wide = rootWidth >= WIDE;
+  const compact = rootWidth < COMPACT;
+
+  // The scrolling column.
+  const scroller = useRef(null);
+  const [view, setView] = useState({ top: 0, height: 600, width: 600 });
+  const anchor = useRef(null); // { page, frac, offset } kept across a zoom
+
+  // Zoom: "fit" (width) · "page" · a number.
+  const [zoom, setZoom] = useState(defaultZoom);
+  const scale = useMemo(() => {
+    if (!sizes) return 1;
+    if (zoom === "fit") return fitScale(sizes, view.width - PAD * 2);
+    if (zoom === "page") return fitScale(sizes, view.width - PAD * 2, view.height - PAD * 2);
+    return clampZoom(zoom);
+  }, [zoom, sizes, view.width, view.height]);
+  const layout = useMemo(() => layoutPages(sizes ?? [], scale, GAP, PAD), [sizes, scale]);
+  const pageCount = sizes?.length ?? 0;
+  const maxWidth = sizes?.length ? Math.max(...sizes.map((s) => s.width)) * scale : 0;
+  const current = pageCount ? pageAt(layout.tops, view.top + Math.min(view.height / 3, 240)) : 1;
+  const [first, last] = visiblePages(layout, view.top, view.top + view.height, 1);
+
+  // Panels.
+  const [railOpen, setRailOpen] = useState(thumbnails);
+  const [railSheet, setRailSheet] = useState(false);
+  const [notesOpen, setNotesOpen] = useState(notes ?? (highlights?.length ?? 0) > 0);
+  const [notesSheet, setNotesSheet] = useState(false);
+  const showNotes = !readOnly || (highlights?.length ?? 0) > 0;
+
+  // Search.
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [matchIndex, setMatchIndex] = useState(0);
+  const searchInput = useRef(null);
+  const jump = useRef(false); // scroll to the current match once its page has drawn its text
+
+  // Highlights: the parent's list, with this viewer's unsaved changes on top.
+  const [items, setItems] = useState(() => highlights ?? []);
+  useEffect(() => setItems(highlights ?? []), [highlights]);
+  const [activeId, setActiveId] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [selection, setSelection] = useState(null); // { page, rects, text }
+  const [composer, setComposer] = useState(false); // the "Add note" field in the selection bar
+  const deletes = useRef(new Map()); // id → timer, while its Undo is offered
+
+  // ---- loading --------------------------------------------------------------
+
+  const onLoadSuccess = useCallback(async (doc) => {
+    setLoadError(null);
+    setPassword(null);
+    texts.current = null;
+    geo.current = null;
+    reading.current = null;
+    setTextsReady(false);
+    const out = [];
+    for (let i = 1; i <= doc.numPages; i++) {
+      const p = await doc.getPage(i);
+      const vp = p.getViewport({ scale: 1 });
+      out.push({ width: vp.width, height: vp.height });
+    }
+    setPdf(doc);
+    setSizes(out);
+  }, []);
+
+  const onLoadError = useCallback((e) => {
+    setPdf(null);
+    setSizes(null);
+    setLoadError(e ?? new Error("Unknown error"));
+  }, []);
+
+  const onPassword = useCallback((submit, reason) => {
+    setPassword({ submit, wrong: reason === 2 });
+  }, []);
+
+  useEffect(() => {
+    setPdf(null);
+    setSizes(null);
+    setLoadError(null);
+    setPassword(null);
+    setSelection(null);
+    setMatchIndex(0);
+  }, [source]);
+
+  // The words of every page, read once, on the first search.
+  const ensureTexts = useCallback(() => {
+    if (!pdf || texts.current) return;
+    if (reading.current?.pdf === pdf) return;
+    const job = { pdf };
+    reading.current = job;
+    (async () => {
+      const out = [];
+      const boxes = [];
+      for (let i = 1; i <= pdf.numPages; i++) {
+        const p = await pdf.getPage(i);
+        const tc = await p.getTextContent();
+        out.push(tc.items.map((it) => it.str ?? ""));
+        boxes.push(tc.items.map(itemBox));
+      }
+      if (reading.current !== job) return;
+      texts.current = out;
+      geo.current = boxes;
+      setTextsReady(true);
+    })().catch(() => {
+      if (reading.current === job) reading.current = null;
+    });
+  }, [pdf]);
+
+  // ---- the column's size and scroll ------------------------------------------
+
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+    const ro = new ResizeObserver(() => setRootWidth(root.clientWidth));
+    ro.observe(root);
+    setRootWidth(root.clientWidth);
+    return () => ro.disconnect();
+  }, []);
+
+  const measure = useCallback(() => {
+    const el = scroller.current;
+    if (!el) return;
+    setView((v) => (v.top === el.scrollTop && v.height === el.clientHeight && v.width === el.clientWidth ? v : { top: el.scrollTop, height: el.clientHeight, width: el.clientWidth }));
+  }, []);
+
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (!el) return undefined;
+    let width = el.clientWidth;
+    const ro = new ResizeObserver(() => {
+      // A fit zoom changes with the width: keep the same line in view.
+      if (el.clientWidth !== width && layoutRef.current.tops.length) anchor.current = { ...anchorAt(layoutRef.current, el.scrollTop), offset: 0 };
+      width = el.clientWidth;
+      measure();
+    });
+    ro.observe(el);
+    measure();
+    return () => ro.disconnect();
+  }, [measure, sizes]);
+
+  const frame = useRef(0);
+  const onScroll = () => {
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(measure);
+  };
+
+  // After a zoom, put the anchored line back where it was.
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    const a = anchor.current;
+    if (!el || !a || !layout.tops.length) return;
+    anchor.current = null;
+    const top = layout.tops[a.page - 1] + a.frac * layout.heights[a.page - 1] - (a.offset ?? 0);
+    el.scrollTop = Math.max(0, top);
+    measure();
+  }, [layout, measure]);
+
+  const zoomTo = useCallback(
+    (next, offset = 0) => {
+      if (next === zoom) return;
+      const el = scroller.current;
+      if (el && layout.tops.length) anchor.current = { ...anchorAt(layout, el.scrollTop + offset), offset };
+      setZoom(next);
+    },
+    [layout, zoom],
+  );
+
+  // Ctrl/⌘ + wheel (and a trackpad pinch, which arrives as one) zooms
+  // around the pointer instead of zooming the whole page.
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el) return undefined;
+    const onWheel = (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const offset = e.clientY - el.getBoundingClientRect().top;
+      zoomTo(clampZoom(Math.round(scale * Math.exp(-e.deltaY * 0.01) * 100) / 100), offset);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [scale, zoomTo, sizes]);
+
+  // ---- going places -----------------------------------------------------------
+
+  const goToPage = useCallback(
+    (n, { frac = 0, smooth = false } = {}) => {
+      const el = scroller.current;
+      if (!el || !pageCount) return;
+      const p = Math.min(pageCount, Math.max(1, Math.round(n) || 1));
+      const top = layout.tops[p - 1] + frac * layout.heights[p - 1] - (frac ? el.clientHeight / 3 : PAD);
+      el.scrollTo({ top: Math.max(0, top), behavior: smooth && !reducedMotion() ? "smooth" : "auto" });
+    },
+    [layout, pageCount],
+  );
+
+  const goToHighlight = useCallback(
+    (h) => {
+      if (!h) return;
+      setActiveId(h.id);
+      if (!h.page) return;
+      const y = Math.min(...(h.rects?.length ? h.rects.map((r) => r.y) : [0]));
+      goToPage(h.page, { frac: y, smooth: true });
+    },
+    [goToPage],
+  );
+
+  // The first page to open on, once the geometry is known.
+  const opened = useRef(false);
+  useEffect(() => {
+    if (!sizes || opened.current) return;
+    opened.current = true;
+    if (initialPage > 1) requestAnimationFrame(() => goToPage(initialPage));
+  }, [sizes, initialPage, goToPage]);
+
+  const lastReported = useRef(null);
+  useEffect(() => {
+    if (!pageCount || lastReported.current === current) return;
+    lastReported.current = current;
+    onPageChange?.(current, pageCount);
+  }, [current, pageCount, onPageChange]);
+
+  // A highlight given by its words alone ({ text, page? }, no rects) is
+  // placed once the pages' text has been read.
+  const unplaced = items.some((h) => !h.rects?.length && h.text);
+  useEffect(() => {
+    if (unplaced && pdf) ensureTexts();
+  }, [unplaced, pdf, ensureTexts]);
+  const shown = useMemo(() => {
+    if (!unplaced) return items;
+    return items.map((h) => {
+      if (h.rects?.length || !h.text) return h;
+      if (!textsReady || !geo.current || !sizes) return { ...h, rects: [] };
+      const pages = h.page ? [h.page] : sizes.map((_, i) => i + 1);
+      for (const n of pages) {
+        const rects = rectsForQuote(geo.current[n - 1], h.text, sizes[n - 1]);
+        if (rects.length) return { ...h, page: n, rects };
+      }
+      return { ...h, page: h.page ?? null, rects: [] };
+    });
+  }, [items, unplaced, textsReady, sizes]);
+
+  // ---- search -----------------------------------------------------------------
+
+  const matches = useMemo(() => (textsReady && query ? findMatches(texts.current, query) : []), [textsReady, query]);
+  const byItem = useMemo(() => indexMatches(matches), [matches]);
+  const currentMatch = matches[matchIndex] ?? null;
+
+  const renderText = useMemo(() => {
+    if (!matches.length) return undefined;
+    return ({ pageNumber, itemIndex, str }) => {
+      const here = byItem.get(`${pageNumber}:${itemIndex}`);
+      if (!here) return markItem(str, null);
+      const cur = currentMatch && currentMatch.page === pageNumber && currentMatch.item === itemIndex ? currentMatch.start : -1;
+      return markItem(str, here, { current: cur, markClass: MARK, currentClass: MARK_CURRENT });
+    };
+  }, [matches, byItem, currentMatch]);
+
+  const scrollToMark = useCallback(() => {
+    const mark = scroller.current?.querySelector('mark[data-current="true"]');
+    if (!mark) return false;
+    mark.scrollIntoView({ block: "center", inline: "nearest", behavior: reducedMotion() ? "auto" : "smooth" });
+    return true;
+  }, []);
+
+  // A new current match: its page's text layer redraws with the new mark
+  // (or the page is drawn, once the column is taken there), and when it
+  // has, onTextDrawn centres the mark.
+  const drawn = useRef([first, last]);
+  drawn.current = [first, last];
+  useEffect(() => {
+    if (!currentMatch) return;
+    jump.current = true;
+    const [a, b] = drawn.current;
+    if (currentMatch.page < a || currentMatch.page > b) goToPage(currentMatch.page);
+  }, [currentMatch, goToPage]);
+
+  const onTextDrawn = useCallback(() => {
+    if (jump.current && scrollToMark()) jump.current = false;
+  }, [scrollToMark]);
+
+  const openSearch = () => {
+    setSearchOpen(true);
+    ensureTexts();
+    requestAnimationFrame(() => {
+      searchInput.current?.focus();
+      searchInput.current?.select();
+    });
+  };
+  const step = (dir) => {
+    if (!matches.length) return;
+    setMatchIndex((i) => (i + dir + matches.length) % matches.length);
+  };
+  const closeSearch = () => {
+    setQuery("");
+    setMatchIndex(0);
+    setSearchOpen(false);
+  };
+
+  // ---- highlights ---------------------------------------------------------------
+
+  const selectionRef = useRef(null);
+  selectionRef.current = selection;
+  const composerRef = useRef(false);
+  composerRef.current = composer;
+  const readSelection = useCallback(() => {
+    if (readOnly) return;
+    // Typing a note in the selection bar moves the browser's selection into
+    // its field: that is not a new selection of the page's text.
+    if (document.activeElement?.closest?.("[data-selection-bar]")) return;
+    const sel = window.getSelection?.();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) {
+      if (!composerRef.current) setSelection(null);
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const start = range.startContainer.nodeType === 1 ? range.startContainer : range.startContainer.parentElement;
+    if (start?.closest?.("[data-selection-bar]")) return;
+    const pageEl = start?.closest?.(".react-pdf__Page");
+    if (!pageEl || !scroller.current?.contains(pageEl)) return setSelection(null);
+    const page = Number(pageEl.dataset.pageNumber);
+    const rects = toPageRects([...range.getClientRects()], pageEl.getBoundingClientRect());
+    const text = sel.toString().replace(/\s+/g, " ").trim();
+    if (!rects.length || !text) return setSelection(null);
+    const prev = selectionRef.current;
+    if (prev && prev.page === page && prev.text === text) return;
+    setComposer(false);
+    setSelection({ page, rects, text });
+  }, [readOnly]);
+  useEffect(() => {
+    if (!selection) setComposer(false);
+  }, [selection]);
+
+  // Pointer selections settle on pointerup; keyboard and touch ones
+  // (shift+arrows, the handles on a phone) through selectionchange.
+  const pointerDown = useRef(false);
+  useEffect(() => {
+    if (readOnly) return undefined;
+    let timer = 0;
+    const onChange = () => {
+      if (pointerDown.current) return;
+      clearTimeout(timer);
+      timer = setTimeout(readSelection, 180);
+    };
+    document.addEventListener("selectionchange", onChange);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("selectionchange", onChange);
+    };
+  }, [readOnly, readSelection]);
+
+  const save = async (fn, rollback, failTitle) => {
+    let res;
+    try {
+      res = await fn();
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (!res?.ok) {
+      rollback();
+      toast.error(failTitle, { description: res?.error ? String(res.error) : "Check your connection and try again." });
+    }
+    return res;
+  };
+
+  const createHighlight = async (note = "") => {
+    if (!selection || !onHighlight) return;
+    const temp = { id: `new-${Date.now()}`, page: selection.page, rects: selection.rects, text: selection.text, note, tone: "warning", pending: true };
+    setItems((list) => [...list, temp]);
+    window.getSelection?.()?.removeAllRanges();
+    setSelection(null);
+    setComposer(false);
+    setActiveId(temp.id);
+    if (wide && showNotes) setNotesOpen(true);
+    const { id: _id, pending: _p, ...data } = temp;
+    const res = await save(
+      () => onHighlight(data),
+      () => setItems((list) => list.filter((x) => x.id !== temp.id)),
+      "Couldn't save the highlight",
+    );
+    if (res?.ok) {
+      const id = res.id ?? temp.id;
+      setItems((list) => list.map((x) => (x.id === temp.id ? { ...x, id, pending: false } : x)));
+      setActiveId((a) => (a === temp.id ? id : a));
+    }
+  };
+
+  const change = async (h, patch) => {
+    if (h.pending) return toast.info("Still saving that highlight", { description: "Try again in a moment." });
+    const before = items.find((x) => x.id === h.id);
+    setItems((list) => list.map((x) => (x.id === h.id ? { ...x, ...patch } : x)));
+    if (!onHighlightChange) return;
+    await save(
+      () => onHighlightChange(h.id, patch),
+      () => setItems((list) => list.map((x) => (x.id === h.id ? before : x))),
+      patch.note !== undefined ? "Couldn't save the note" : "Couldn't change the colour",
+    );
+  };
+
+  const remove = (h) => {
+    if (h.pending) return;
+    const index = items.findIndex((x) => x.id === h.id);
+    setItems((list) => list.filter((x) => x.id !== h.id));
+    if (activeId === h.id) setActiveId(null);
+    const restore = () =>
+      setItems((list) => {
+        const next = [...list];
+        next.splice(Math.min(index, next.length), 0, h);
+        return next;
+      });
+    // The delete waits while Undo is offered; Undo simply never sends it.
+    const timer = setTimeout(async () => {
+      deletes.current.delete(h.id);
+      if (!onHighlightDelete) return;
+      await save(() => onHighlightDelete(h.id), restore, "Couldn't delete the highlight");
+    }, 5000);
+    deletes.current.set(h.id, { timer, run: () => onHighlightDelete?.(h.id) });
+    toast("Highlight deleted", {
+      description: h.text ? `“${h.text.slice(0, 60)}${h.text.length > 60 ? "…" : ""}”` : undefined,
+      action: {
+        label: "Undo",
+        onClick: () => {
+          clearTimeout(timer);
+          deletes.current.delete(h.id);
+          restore();
+        },
+      },
+    });
+  };
+
+  // Leaving the viewer sends the deletes that were waiting on Undo.
+  useEffect(
+    () => () => {
+      for (const { timer, run } of deletes.current.values()) {
+        clearTimeout(timer);
+        Promise.resolve()
+          .then(run)
+          .catch(() => {});
+      }
+      deletes.current.clear();
+    },
+    [],
+  );
+
+  const copy = async (h) => {
+    try {
+      await navigator.clipboard.writeText(h.text ?? "");
+      toast.success("Copied");
+    } catch {
+      toast.error("Couldn't copy", { description: "Your browser blocked the clipboard." });
+    }
+  };
+
+  // A click on a highlight (the text layer lies over them, so this is a
+  // hit test at the point) selects it and shows its note.
+  const onPageClick = (e, page) => {
+    const sel = window.getSelection?.();
+    if (sel && !sel.isCollapsed) return;
+    const box = e.currentTarget.getBoundingClientRect();
+    const h = highlightAt(shown, page, (e.clientX - box.left) / box.width, (e.clientY - box.top) / box.height);
+    if (!h) return setActiveId(null);
+    setActiveId(h.id);
+    if (wide) setNotesOpen(true);
+    else setNotesSheet(true);
+  };
+
+  const openNote = (id) => {
+    setEditingId(id);
+    if (id) {
+      setActiveId(id);
+      if (wide) setNotesOpen(true);
+      else setNotesSheet(true);
+    }
+  };
+
+  // ---- the handle and the keys ---------------------------------------------------
+
+  useImperativeHandle(
+    viewerRef,
+    () => ({
+      goToPage: (n) => goToPage(n, { smooth: true }),
+      goToHighlight: (id) => goToHighlight(shown.find((h) => h.id === id)),
+      search: (q) => {
+        setSearchOpen(true);
+        ensureTexts();
+        setQuery(q ?? "");
+        setMatchIndex(0);
+      },
+      setZoom: (z) => zoomTo(z),
+      get page() {
+        return current;
+      },
+      get pageCount() {
+        return pageCount;
+      },
+    }),
+    [goToPage, goToHighlight, shown, ensureTexts, zoomTo, current, pageCount],
+  );
+
+  const onKeyDown = (e) => {
+    const mod = e.metaKey || e.ctrlKey;
+    if (mod && e.key.toLowerCase() === "f" && search && pdf) {
+      e.preventDefault();
+      openSearch();
+    } else if (mod && (e.key === "=" || e.key === "+")) {
+      e.preventDefault();
+      zoomTo(stepZoom(scale, 1));
+    } else if (mod && e.key === "-") {
+      e.preventDefault();
+      zoomTo(stepZoom(scale, -1));
+    } else if (mod && e.key === "0") {
+      e.preventDefault();
+      zoomTo("fit");
+    } else if (e.key === "Escape" && selection) {
+      setSelection(null);
+      setComposer(false);
+    }
+  };
+
+  const onDownload = () => {
+    const name = fileName || `${(title || "document").replace(/[\\/:*?"<>|]+/g, " ").trim()}.pdf`;
+    if (typeof file === "string") {
+      // raw: an <a download> is how a browser saves a URL; it is never shown.
+      const a = document.createElement("a");
+      a.href = file;
+      a.download = name;
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      return;
+    }
+    const blob = file instanceof Blob ? file : new Blob([file?.data ?? file], { type: "application/pdf" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+
+  // ---- drawing ------------------------------------------------------------------
+
+  const zoomLabel = zoom === "fit" ? "Fit" : zoom === "page" ? "Page" : `${Math.round(scale * 100)}%`;
+  const noteCount = items.length;
+
+  const toolbar = (
+    <Toolbar
+      compact={compact}
+      ready={Boolean(pdf && sizes)}
+      title={title}
+      current={current}
+      pageCount={pageCount}
+      onPage={(n) => goToPage(n)}
+      rail={thumbnails ? { open: wide ? railOpen : railSheet, toggle: () => (wide ? setRailOpen((o) => !o) : setRailSheet(true)) } : null}
+      search={
+        search
+          ? {
+              open: searchOpen,
+              query,
+              count: matches.length,
+              index: matchIndex,
+              ready: textsReady,
+              inputRef: searchInput,
+              onOpen: openSearch,
+              onClose: closeSearch,
+              onQuery: (q) => {
+                setQuery(q);
+                setMatchIndex(0);
+                ensureTexts();
+              },
+              onStep: step,
+            }
+          : null
+      }
+      zoom={{ label: zoomLabel, value: typeof zoom === "number" ? String(zoom) : zoom, scale, onZoom: zoomTo }}
+      notes={showNotes ? { open: wide ? notesOpen : notesSheet, count: noteCount, toggle: () => (wide ? setNotesOpen((o) => !o) : setNotesSheet(true)) } : null}
+      onDownload={download && file ? onDownload : null}
+    />
+  );
+
+  if (loading) {
+    return (
+      <Frame className={className} height={height} label={title} rootRef={rootRef}>
+        <ToolbarSkeleton />
+        <PagesSkeleton />
+      </Frame>
+    );
+  }
+
+  if (!file) {
+    return (
+      <Frame className={className} height={height} label={title} rootRef={rootRef}>
+        <div className="grid flex-1 place-items-center bg-muted/40 p-6">
+          <Placeholder icon="file" title={emptyTitle} body={emptyBody} />
+        </div>
+      </Frame>
+    );
+  }
+
+  const notesPanel = (
+    <NotesPanel
+      highlights={shown}
+      activeId={activeId}
+      editingId={editingId}
+      readOnly={readOnly}
+      onJump={(h) => {
+        goToHighlight(h);
+        if (!wide) setNotesSheet(false);
+      }}
+      onEdit={openNote}
+      onSaveNote={(h, note) => note !== (h.note ?? "") && change(h, { note })}
+      onTone={(h, tone) => change(h, { tone })}
+      onDelete={remove}
+      onCopy={copy}
+    />
+  );
+
+  return (
+    <Frame className={className} height={height} label={title} rootRef={rootRef} onKeyDown={onKeyDown}>
+      {toolbar}
+      <Document
+        key={attempt}
+        file={source}
+        options={options}
+        suspense={false}
+        onLoadSuccess={onLoadSuccess}
+        onLoadError={onLoadError}
+        onSourceError={onLoadError}
+        onPassword={onPassword}
+        onItemClick={({ pageNumber }) => goToPage(pageNumber, { smooth: true })}
+        loading={() => (password ? <PasswordGate {...password} /> : <PagesSkeleton />)}
+        error={() => <LoadError error={loadError} onRetry={() => setAttempt((n) => n + 1)} />}
+        noData={() => <Placeholder icon="file" title={emptyTitle} body={emptyBody} />}
+        className="flex min-h-0 flex-1"
+      >
+        {thumbnails && wide && railOpen ? (
+          <aside className="w-40 shrink-0 overflow-y-auto border-r border-border bg-muted/40" aria-label="Pages">
+            <PageRail sizes={sizes} current={current} onPick={(n) => goToPage(n)} />
+          </aside>
+        ) : null}
+
+        <div
+          ref={scroller}
+          onScroll={onScroll}
+          onPointerDown={() => {
+            pointerDown.current = true;
+          }}
+          onPointerUp={(e) => {
+            pointerDown.current = false;
+            if (!e.target.closest?.("[data-selection-bar]")) setTimeout(readSelection, 0);
+          }}
+          tabIndex={0}
+          role="region"
+          aria-label={`${title || "Document"}, page ${current} of ${pageCount || "…"}`}
+          className="relative min-w-0 flex-1 overflow-auto overscroll-contain bg-muted/50 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          {!sizes ? (
+            <PagesSkeleton />
+          ) : (
+            <div className="relative" style={{ height: layout.total, width: Math.max(view.width, maxWidth + PAD * 2) }}>
+              {sizes.map((s, i) => {
+                const n = i + 1;
+                const w = Math.round(s.width * scale);
+                const h = layout.heights[i];
+                const live = n >= first && n <= last;
+                return (
+                  <div key={n} className="absolute inset-x-0 flex justify-center" style={{ top: layout.tops[i], height: h }}>
+                    {live ? (
+                      // raw: the page's paper; a click on it hit-tests the
+                      // highlights, which lie under pdf.js's text layer.
+                      <div className="relative shadow-sm ring-1 ring-border" style={{ width: w, height: h }} onClick={(e) => onPageClick(e, n)}>
+                        <Page
+                          pageNumber={n}
+                          scale={scale}
+                          renderTextLayer
+                          renderAnnotationLayer
+                          customTextRenderer={renderText}
+                          onRenderTextLayerSuccess={onTextDrawn}
+                          loading={<Skeleton shape="rect" className="h-full w-full rounded-none" />}
+                        >
+                          <HighlightLayer items={shown} page={n} activeId={activeId} onOpen={(h) => openNote(h.id)} />
+                          {selection?.page === n ? (
+                            <SelectionBar
+                              selection={selection}
+                              composer={composer}
+                              onHighlight={() => createHighlight("")}
+                              onNote={() => setComposer(true)}
+                              onSaveNote={(note) => createHighlight(note)}
+                              onCancel={() => {
+                                setComposer(false);
+                                setSelection(null);
+                                window.getSelection?.()?.removeAllRanges();
+                              }}
+                              onCopy={() => copy(selection)}
+                            />
+                          ) : null}
+                        </Page>
+                      </div>
+                    ) : (
+                      <div aria-hidden="true" className="rounded-[2px] bg-card ring-1 ring-border" style={{ width: w, height: h }} />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {showNotes && wide && notesOpen ? (
+          <aside className="flex w-80 shrink-0 flex-col border-l border-border bg-background" aria-label="Highlights and notes">
+            <div className="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-border px-4">
+              <p className="text-sm font-medium">
+                Highlights <span className="ml-1 text-muted-foreground tabular-nums">{noteCount || ""}</span>
+              </p>
+              <IconButton icon="x" label="Close highlights" size="sm" onClick={() => setNotesOpen(false)} className="-mr-2" />
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto">{notesPanel}</div>
+          </aside>
+        ) : null}
+
+        {/* On a narrow viewer the rails are sheets. */}
+        {thumbnails && !wide ? (
+          <Sheet open={railSheet} onClose={() => setRailSheet(false)} side="start" title="Pages" description={pageCount ? `${pageCount} ${pageCount === 1 ? "page" : "pages"}` : undefined}>
+            <PageRail
+              sizes={sizes}
+              current={current}
+              grid
+              onPick={(n) => {
+                setRailSheet(false);
+                goToPage(n);
+              }}
+            />
+          </Sheet>
+        ) : null}
+        {showNotes && !wide ? (
+          <Sheet open={notesSheet} onClose={() => setNotesSheet(false)} title="Highlights" description={noteCount ? `${noteCount} in this document` : undefined}>
+            <div className="-mx-4 -my-4">{notesPanel}</div>
+          </Sheet>
+        ) : null}
+      </Document>
+    </Frame>
+  );
+}
+
+const reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+// ---- the toolbar ----------------------------------------------------------------
+
+function Toolbar({ compact, ready, title, current, pageCount, onPage, rail, search, zoom, notes, onDownload }) {
+  const [draft, setDraft] = useState(String(current));
+  const [editing, setEditing] = useState(false);
+  useEffect(() => {
+    if (!editing) setDraft(String(current));
+  }, [current, editing]);
+  const commit = () => {
+    setEditing(false);
+    const n = parseInt(draft, 10);
+    if (Number.isFinite(n)) onPage(n);
+    else setDraft(String(current));
+  };
+
+  const searchField = search ? (
+    <InputGroup
+      ref={search.inputRef}
+      icon="search"
+      type="search"
+      value={search.query}
+      placeholder="Find in document"
+      aria-label="Find in document"
+      aria-keyshortcuts="Meta+F Control+F"
+      autoComplete="off"
+      spellCheck={false}
+      className={compact ? "w-full" : "w-64"}
+      suffix={
+        search.query.trim().length >= 2 ? (
+          <span className="tabular-nums text-xs" aria-live="polite">
+            {!search.ready ? "Reading…" : search.count ? `${search.index + 1} of ${search.count}` : "No matches"}
+          </span>
+        ) : null
+      }
+      onChange={(e) => search.onQuery(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          search.onStep(e.shiftKey ? -1 : 1);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          search.onClose();
+        }
+      }}
+    />
+  ) : null;
+
+  const steps = search?.open ? (
+    <div className="flex shrink-0 items-center">
+      <Tooltip label="Previous match (Shift+Enter)">
+        <IconButton icon="chevron-up" label="Previous match" size="sm" disabled={!search.count} onClick={() => search.onStep(-1)} />
+      </Tooltip>
+      <Tooltip label="Next match (Enter)">
+        <IconButton icon="chevron-down" label="Next match" size="sm" disabled={!search.count} onClick={() => search.onStep(1)} />
+      </Tooltip>
+      <IconButton icon="x" label="Close search" size="sm" onClick={search.onClose} />
+    </div>
+  ) : null;
+
+  return (
+    <div className="shrink-0 border-b border-border bg-background">
+      <div className="flex h-14 items-center gap-1 px-2">
+        {rail ? (
+          <Tooltip label={rail.open ? "Hide pages" : "Show pages"}>
+            <IconButton icon="panel-left" label={rail.open ? "Hide pages" : "Show pages"} aria-pressed={rail.open} disabled={!ready} onClick={rail.toggle} />
+          </Tooltip>
+        ) : null}
+        {title && !compact ? <p className="mx-1 min-w-0 max-w-64 truncate text-sm font-medium" title={title}>{title}</p> : null}
+
+        {/* The pager. */}
+        <div className={cx("flex items-center gap-0.5", !compact && "mx-auto")} aria-label="Page" role="group">
+          {!compact ? <IconButton icon="chevron-left" label="Previous page" size="sm" disabled={!ready || current <= 1} onClick={() => onPage(current - 1)} /> : null}
+          <div className="w-14 shrink-0">
+          <Input
+            value={ready ? draft : ""}
+            inputMode="numeric"
+            aria-label={`Page number, ${pageCount} pages`}
+            disabled={!ready}
+            className="text-center tabular-nums"
+            onFocus={(e) => {
+              setEditing(true);
+              e.target.select();
+            }}
+            onChange={(e) => setDraft(e.target.value.replace(/[^\d]/g, ""))}
+            onBlur={commit}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") e.currentTarget.blur();
+              if (e.key === "Escape") {
+                setDraft(String(current));
+                setEditing(false);
+                e.currentTarget.blur();
+              }
+            }}
+          />
+          </div>
+          <span className="whitespace-nowrap px-1.5 text-sm text-muted-foreground tabular-nums">of {ready ? pageCount : "–"}</span>
+          {!compact ? <IconButton icon="chevron-right" label="Next page" size="sm" disabled={!ready || current >= pageCount} onClick={() => onPage(current + 1)} /> : null}
+        </div>
+
+        <div className={cx("flex items-center gap-1", compact && "ml-auto")}>
+          {search && !compact ? (
+            search.open ? (
+              <div className="flex items-center gap-0.5">
+                {searchField}
+                {steps}
+              </div>
+            ) : (
+              <Tooltip label="Find (⌘F)">
+                <IconButton icon="search" label="Find in document" disabled={!ready} onClick={search.onOpen} />
+              </Tooltip>
+            )
+          ) : null}
+          {search && compact && !search.open ? <IconButton icon="search" label="Find in document" disabled={!ready} onClick={search.onOpen} /> : null}
+
+          <div className="flex items-center">
+            {!compact ? (
+              <Tooltip label="Zoom out (⌘−)">
+                <IconButton icon="minus" label="Zoom out" size="sm" disabled={!ready} onClick={() => zoom.onZoom(stepZoom(zoom.scale, -1))} />
+              </Tooltip>
+            ) : null}
+            <Menu
+              label={`Zoom, ${zoom.label}`}
+              size="md"
+              align="end"
+              trigger={<span className="min-w-10 text-center text-sm tabular-nums">{zoom.label}</span>}
+              items={[
+                {
+                  type: "radio",
+                  value: ZOOM_CHOICES.some((c) => c.value === zoom.value) ? zoom.value : "",
+                  onValueChange: (v) => zoom.onZoom(v === "fit" || v === "page" ? v : Number(v)),
+                  options: ZOOM_CHOICES,
+                },
+              ]}
+            />
+            {!compact ? (
+              <Tooltip label="Zoom in (⌘+)">
+                <IconButton icon="plus" label="Zoom in" size="sm" disabled={!ready} onClick={() => zoom.onZoom(stepZoom(zoom.scale, 1))} />
+              </Tooltip>
+            ) : null}
+          </div>
+
+          {notes ? (
+            <Tooltip label={notes.open ? "Hide highlights" : "Show highlights"}>
+              <Button variant="quiet" icon="highlighter" aria-pressed={notes.open} aria-label={`Highlights, ${notes.count}`} iconOnly={compact || !notes.count} disabled={!ready} onClick={notes.toggle}>
+                {!compact && notes.count ? <span className="tabular-nums">{notes.count}</span> : null}
+              </Button>
+            </Tooltip>
+          ) : null}
+          {onDownload ? (
+            <Tooltip label="Download">
+              <IconButton icon="download" label="Download PDF" disabled={!ready} onClick={onDownload} />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+
+      {/* On a narrow viewer the search is a row of its own. */}
+      {search && compact && search.open ? (
+        <div className="flex items-center gap-1 px-2 pb-2">
+          <div className="min-w-0 flex-1">{searchField}</div>
+          {steps}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ---- the page rail --------------------------------------------------------------
+
+function PageRail({ sizes, current, onPick, grid = false }) {
+  const currentRef = useRef(null);
+  useEffect(() => {
+    currentRef.current?.scrollIntoView?.({ block: "nearest" });
+  }, [current]);
+  if (!sizes) {
+    return (
+      <div className="grid gap-4 p-4" aria-hidden="true">
+        {[0, 1, 2].map((i) => (
+          <Skeleton key={i} shape="rect" className="mx-auto aspect-[3/4] w-24" />
+        ))}
+      </div>
+    );
+  }
+  const width = grid ? 120 : 104;
+  return (
+    <ol className={cx("p-3", grid ? "grid grid-cols-2 gap-x-3 gap-y-4 sm:grid-cols-3" : "grid gap-4")}>
+      {sizes.map((s, i) => {
+        const n = i + 1;
+        const on = n === current;
+        return (
+          <li key={n} ref={on ? currentRef : undefined} className="grid justify-items-center gap-1.5">
+            {/* raw: a page's picture is the button; no kit part holds a canvas. */}
+            <button
+              type="button"
+              onClick={() => onPick(n)}
+              aria-label={`Page ${n}`}
+              aria-current={on ? "page" : undefined}
+              className={cx(
+                "block overflow-hidden rounded-[3px] shadow-sm outline-none ring-1 transition-shadow duration-150 motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                on ? "ring-2 ring-primary" : "ring-border hover:ring-foreground/30",
+              )}
+            >
+              <LazyThumb width={width} height={Math.round((s.height / s.width) * width)}>
+                <Page pageNumber={n} width={width} renderTextLayer={false} renderAnnotationLayer={false} loading={<Skeleton shape="rect" className="h-full w-full rounded-none" />} />
+              </LazyThumb>
+            </button>
+            <span className={cx("text-xs tabular-nums", on ? "font-medium text-foreground" : "text-muted-foreground")}>{n}</span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/** Draws its child only once it has come near the visible part of the
+ *  rail; until then, blank paper of the right size. */
+function LazyThumb({ width, height, children }) {
+  const ref = useRef(null);
+  const [near, setNear] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || near) return undefined;
+    const io = new IntersectionObserver((entries) => entries.some((e) => e.isIntersecting) && setNear(true), { rootMargin: "400px 0px" });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [near]);
+  return (
+    <div ref={ref} className="bg-card" style={{ width, height }}>
+      {near ? children : null}
+    </div>
+  );
+}
+
+// ---- on the page ------------------------------------------------------------------
+
+function HighlightLayer({ items, page, activeId, onOpen }) {
+  const here = items.filter((h) => h.page === page && h.rects?.length);
+  if (!here.length) return null;
+  return (
+    <>
+      {/* The marker strokes. The LAYER multiplies into the page (a blend
+          inside a layer of its own would only blend with that layer), so
+          the ink shows through the tone as through a highlighter pen. */}
+      <div className="pointer-events-none absolute inset-0 z-[1] mix-blend-multiply" aria-hidden="true">
+        {here.flatMap((h) => {
+          const tone = toneOf(h);
+          const active = h.id === activeId;
+          return h.rects.map((r, i) => (
+            <div
+              key={`${h.id}-${i}`}
+              className={cx(
+                "absolute rounded-[2px] transition-[outline-color,opacity] duration-150 motion-reduce:transition-none",
+                TONE_FILL[tone],
+                h.pending && "opacity-60",
+                active && cx("outline-2 outline-offset-1", TONE_RING[tone]),
+              )}
+              style={{ left: `${r.x * 100}%`, top: `${r.y * 100}%`, width: `${r.w * 100}%`, height: `${r.h * 100}%` }}
+            />
+          ));
+        })}
+      </div>
+      {/* The note pins, unblended, at the end of each highlight that has one. */}
+      <div className="pointer-events-none absolute inset-0 z-[2]">
+        {here
+          .filter((h) => h.note)
+          .map((h) => {
+            const last = h.rects[h.rects.length - 1];
+            return (
+              // raw: a 20px pin on the page; the kit's smallest button is
+              // 36px and would cover the text it annotates.
+              <button
+                key={h.id}
+                type="button"
+                aria-label={`Note on page ${page}: ${h.note.slice(0, 80)}`}
+                title={h.note}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onOpen(h);
+                }}
+                className="pointer-events-auto absolute grid size-5 -translate-y-1/2 place-items-center rounded-full bg-background text-foreground shadow-sm ring-1 ring-border transition-transform duration-150 hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+                style={{ left: `min(calc(${(last.x + last.w) * 100}% + 4px), calc(100% - 24px))`, top: `${(last.y + last.h / 2) * 100}%` }}
+              >
+                <Icon name="message-square" size={12} />
+              </button>
+            );
+          })}
+      </div>
+    </>
+  );
+}
+
+function SelectionBar({ selection, composer, onHighlight, onNote, onSaveNote, onCancel, onCopy }) {
+  const [note, setNote] = useState("");
+  const top = Math.min(...selection.rects.map((r) => r.y));
+  const bottom = Math.max(...selection.rects.map((r) => r.y + r.h));
+  const first = selection.rects[0];
+  const x = Math.min(0.85, Math.max(0.15, first.x + first.w / 2));
+  // Above the selection, unless it starts near the top of the page.
+  const above = top > 0.08;
+  return (
+    // raw: a floating bar pinned to the selection inside the page; mousedown
+    // is swallowed so pressing a button does not clear the selection.
+    <div
+      role="toolbar"
+      aria-label="Selected text"
+      data-selection-bar=""
+      onMouseDown={(e) => {
+        if (!e.target.closest("textarea")) e.preventDefault();
+      }}
+      onClick={(e) => e.stopPropagation()}
+      className={cx("absolute z-10 -translate-x-1/2", above ? "-translate-y-full" : "")}
+      style={{ left: `${x * 100}%`, top: above ? `calc(${top * 100}% - 8px)` : `calc(${bottom * 100}% + 8px)` }}
+    >
+      <div className="rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg">
+        {composer ? (
+          <form
+            className="grid w-72 max-w-[80vw] gap-2 p-1"
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSaveNote(note.trim());
+            }}
+          >
+            <p className="line-clamp-2 border-l-2 border-warning pl-2 text-xs text-muted-foreground">{selection.text}</p>
+            <textarea
+              // raw: the kit Textarea's 44px minimum and resize corner are
+              // too heavy for a note typed in a floating bar over the page.
+              autoFocus
+              rows={3}
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Write a note…"
+              aria-label="Note"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  onSaveNote(note.trim());
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onCancel();
+                }
+              }}
+              className="w-full resize-none rounded-md border border-input bg-background px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <div className="flex items-center justify-between gap-2">
+              <span className="hidden text-xs text-muted-foreground sm:inline">
+                <Kbd>⌘</Kbd> <Kbd>↵</Kbd> to save
+              </span>
+              <div className="ml-auto flex gap-1">
+                <Button size="sm" variant="quiet" onClick={onCancel}>
+                  Cancel
+                </Button>
+                <Button size="sm" variant="primary" type="submit">
+                  Save
+                </Button>
+              </div>
+            </div>
+          </form>
+        ) : (
+          <div className="flex items-center gap-0.5">
+            <Button size="sm" variant="quiet" icon="highlighter" onClick={onHighlight}>
+              Highlight
+            </Button>
+            <Button size="sm" variant="quiet" icon="message-square" onClick={onNote}>
+              Add note
+            </Button>
+            <IconButton size="sm" icon="copy" label="Copy text" onClick={onCopy} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---- states -----------------------------------------------------------------------
+
+function ToolbarSkeleton() {
+  return (
+    <div className="flex h-14 shrink-0 items-center gap-3 border-b border-border px-3" aria-hidden="true">
+      <Skeleton shape="rect" className="size-8" />
+      <Skeleton className="mx-auto w-24" />
+      <Skeleton shape="rect" className="h-8 w-20" />
+    </div>
+  );
+}
+
+function PagesSkeleton() {
+  return (
+    <div className="grid flex-1 content-start justify-items-center gap-4 overflow-hidden bg-muted/50 p-4" aria-busy="true" aria-label="Loading document">
+      {[0, 1].map((i) => (
+        <div key={i} className="grid aspect-[1/1.414] w-full max-w-2xl content-start gap-3 rounded-[2px] bg-card p-[8%] shadow-sm ring-1 ring-border">
+          <Skeleton className="h-5 w-1/3" />
+          <Skeleton className="mt-4 w-full" />
+          <Skeleton className="w-11/12" />
+          <Skeleton className="w-4/5" />
+          <Skeleton className="mt-4 w-full" />
+          <Skeleton className="w-2/3" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Placeholder({ icon, title, body, children }) {
+  return (
+    <div className="grid max-w-sm justify-items-center gap-2 text-center">
+      <span className="grid size-12 place-items-center rounded-full bg-background text-muted-foreground ring-1 ring-border">
+        <Icon name={icon} size={20} />
+      </span>
+      <p className="mt-1 text-base font-medium">{title}</p>
+      {body ? <p className="text-sm text-muted-foreground">{body}</p> : null}
+      {children ? <div className="mt-3">{children}</div> : null}
+    </div>
+  );
+}
+
+function LoadError({ error, onRetry }) {
+  const msg = String(error?.message ?? "");
+  const why = /invalid pdf|invalid or corrupted/i.test(msg)
+    ? "The file is damaged, or it isn't a PDF."
+    : /missing pdf|404|not found/i.test(msg)
+      ? "The file couldn't be found. It may have been moved or deleted."
+      : /network|fetch|cors/i.test(msg)
+        ? "The file couldn't be downloaded. Check your connection and try again."
+        : "Something went wrong while opening it.";
+  return (
+    <div className="grid flex-1 place-items-center bg-muted/40 p-6">
+      <Placeholder icon="warning" title="This PDF didn't open" body={why}>
+        <Button icon="refresh" onClick={onRetry}>
+          Try again
+        </Button>
+      </Placeholder>
+    </div>
+  );
+}
+
+function PasswordGate({ submit, wrong }) {
+  const [value, setValue] = useState("");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => setBusy(false), [wrong, submit]);
+  return (
+    <div className="grid flex-1 place-items-center bg-muted/40 p-6">
+      <form
+        className="grid w-full max-w-sm gap-4 rounded-lg border border-border bg-background p-5 shadow-sm"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!value) return;
+          setBusy(true);
+          submit(value);
+        }}
+      >
+        <div className="grid gap-1">
+          <p className="flex items-center gap-2 text-base font-medium">
+            <Icon name="lock" size={16} /> This PDF is protected
+          </p>
+          <p className="text-sm text-muted-foreground">Enter its password to open it.</p>
+        </div>
+        <Field id="pdf-password" label="Password" error={wrong && !busy ? "That password didn't work. Try again." : undefined}>
+          <PasswordInput id="pdf-password" value={value} autoFocus invalid={wrong && !busy} onChange={(e) => setValue(e.target.value)} />
+        </Field>
+        <Button type="submit" variant="primary" loading={busy} disabled={!value}>
+          Open
+        </Button>
+      </form>
+    </div>
+  );
+}