@semiont/react-ui 0.5.25 → 0.5.27

package/dist/PdfAnnotationCanvas.client-EVUPTUWZ.js

@@ -0,0 +1,677 @@
+'use client';
+"use client";
+import {
+  loadPdfDocument,
+  renderPdfPageToDataUrl,
+  toViewportAnchorRect
+} from "./chunk-VXASXU4K.js";
+import {
+  useTranslations
+} from "./chunk-5VDTWRXJ.js";
+import "./chunk-PCRRBU7H.js";
+import "./chunk-O23TLLXW.js";
+
+// src/components/pdf-annotation/PdfAnnotationCanvas.tsx
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { resourceId as toResourceId } from "@semiont/core";
+import { createFragmentSelector, anchorRuns, isTextRun, textUnder } from "@semiont/core";
+
+// src/components/pdf-annotation/rects-for-page.ts
+import { getTargetSelector, parseFragmentSelector } from "@semiont/core";
+function fragmentSelectors(target) {
+  const selector = getTargetSelector(target);
+  if (!selector) return [];
+  const selectors = Array.isArray(selector) ? selector : [selector];
+  return selectors.filter((s) => s.type === "FragmentSelector").map((s) => s);
+}
+function rectsForPage(annotations, pageNumber) {
+  const rects = [];
+  for (const annotation of annotations) {
+    fragmentSelectors(annotation.target).forEach((sel, selectorIndex) => {
+      const coord = parseFragmentSelector(sel.value);
+      if (coord && coord.page === pageNumber) {
+        rects.push({ annId: annotation.id, selectorIndex, coord, annotation });
+      }
+    });
+  }
+  return rects;
+}
+
+// src/components/pdf-annotation/estimate-slot-height.ts
+function estimateSlotHeight(columnWidth, rasterWidth, aspect) {
+  if (!columnWidth || !rasterWidth || !aspect) return null;
+  if (columnWidth <= 0 || rasterWidth <= 0 || aspect <= 0) return null;
+  return Math.round(Math.min(columnWidth, rasterWidth) * aspect);
+}
+
+// src/components/pdf-annotation/PdfAnnotationCanvas.tsx
+import { createHoverHandlers } from "@semiont/sdk";
+
+// src/lib/pdf-coordinates.ts
+function canvasToPdfCoordinates(canvasRect, page, _pageWidth, pageHeight, scale = 1) {
+  const x1 = Math.min(canvasRect.startX, canvasRect.endX);
+  const y1 = Math.min(canvasRect.startY, canvasRect.endY);
+  const x2 = Math.max(canvasRect.startX, canvasRect.endX);
+  const y2 = Math.max(canvasRect.startY, canvasRect.endY);
+  const pdfX = x1 / scale;
+  const pdfWidth = (x2 - x1) / scale;
+  const pdfY = pageHeight - y2 / scale;
+  const pdfHeight = (y2 - y1) / scale;
+  return {
+    page,
+    x: Math.round(pdfX),
+    y: Math.round(pdfY),
+    width: Math.round(pdfWidth),
+    height: Math.round(pdfHeight)
+  };
+}
+function pdfToCanvasCoordinates(pdfCoord, pageHeight, scale = 1) {
+  const canvasX = pdfCoord.x * scale;
+  const canvasWidth = pdfCoord.width * scale;
+  const canvasY = (pageHeight - pdfCoord.y - pdfCoord.height) * scale;
+  const canvasHeight = pdfCoord.height * scale;
+  return {
+    x: canvasX,
+    y: canvasY,
+    width: canvasWidth,
+    height: canvasHeight
+  };
+}
+
+// src/components/pdf-annotation/PdfAnnotationCanvas.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PRELOAD_MARGIN = "100% 0px";
+var STRIP_PAGE_WIDTH = 30;
+var SCROLL_AXIS = "vertical";
+function scrollElementIntoView(el, options) {
+  if (typeof el?.scrollIntoView === "function") el.scrollIntoView(options);
+}
+function getMotivationColor(motivation) {
+  if (!motivation) {
+    return { stroke: "rgb(156, 163, 175)", fill: "rgba(156, 163, 175, 0.2)" };
+  }
+  switch (motivation) {
+    case "highlighting":
+      return { stroke: "rgb(250, 204, 21)", fill: "rgba(250, 204, 21, 0.3)" };
+    case "linking":
+      return { stroke: "rgb(59, 130, 246)", fill: "rgba(59, 130, 246, 0.2)" };
+    case "assessing":
+      return { stroke: "rgb(239, 68, 68)", fill: "rgba(239, 68, 68, 0.2)" };
+    case "commenting":
+      return { stroke: "rgb(255, 255, 255)", fill: "rgba(255, 255, 255, 0.2)" };
+    default:
+      return { stroke: "rgb(156, 163, 175)", fill: "rgba(156, 163, 175, 0.2)" };
+  }
+}
+function PdfPageView({
+  doc,
+  pageNumber,
+  scale,
+  resourceUri,
+  existingAnnotations,
+  drawingMode,
+  selectedMotivation,
+  session,
+  hoveredAnnotationId,
+  selectedAnnotationId,
+  hoverDelayMs,
+  fetchResourceAnchored
+}) {
+  const [pageImageUrl, setPageImageUrl] = useState(null);
+  const [pageDimensions, setPageDimensions] = useState(null);
+  const [pageAnchored, setPageAnchored] = useState(null);
+  const [displayDimensions, setDisplayDimensions] = useState(null);
+  const [errorKey, setErrorKey] = useState(null);
+  const t = useTranslations("PdfViewer");
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [selection, setSelection] = useState(null);
+  const imageRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function resolveAnchored(page) {
+      try {
+        const runs = (await page.getTextContent()).items.filter(isTextRun);
+        if (runs.length > 0) return anchorRuns(runs, pageNumber);
+        return await fetchResourceAnchored();
+      } catch {
+        return null;
+      }
+    }
+    async function loadPage() {
+      try {
+        const page = await doc.getPage(pageNumber);
+        if (cancelled) return;
+        const viewport = page.getViewport({ scale: 1 });
+        setPageDimensions({ width: viewport.width, height: viewport.height });
+        const [anchored, { dataUrl }] = await Promise.all([
+          resolveAnchored(page),
+          renderPdfPageToDataUrl(page, scale)
+        ]);
+        if (cancelled) return;
+        setPageAnchored(anchored);
+        setPageImageUrl(dataUrl);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error loading page:", err);
+        setErrorKey("pageLoadFailed");
+      }
+    }
+    loadPage();
+    return () => {
+      cancelled = true;
+    };
+  }, [doc, pageNumber, scale, fetchResourceAnchored]);
+  useEffect(() => {
+    const updateDisplayDimensions = () => {
+      if (imageRef.current) {
+        setDisplayDimensions({
+          width: imageRef.current.clientWidth,
+          height: imageRef.current.clientHeight
+        });
+      }
+    };
+    updateDisplayDimensions();
+    let resizeObserver = null;
+    try {
+      resizeObserver = new ResizeObserver(updateDisplayDimensions);
+      if (imageRef.current) {
+        resizeObserver.observe(imageRef.current);
+      }
+    } catch (error) {
+      console.warn("ResizeObserver not supported, falling back to window resize listener");
+      window.addEventListener("resize", updateDisplayDimensions);
+    }
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      } else {
+        window.removeEventListener("resize", updateDisplayDimensions);
+      }
+    };
+  }, [pageImageUrl]);
+  const handleMouseDown = useCallback((e) => {
+    if (!drawingMode) return;
+    if (!imageRef.current) return;
+    const rect = imageRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setIsDrawing(true);
+    setSelection({
+      startX: x,
+      startY: y,
+      endX: x,
+      endY: y
+    });
+  }, [drawingMode]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDrawing || !selection || !imageRef.current) return;
+    const rect = imageRef.current.getBoundingClientRect();
+    setSelection({
+      ...selection,
+      endX: e.clientX - rect.left,
+      endY: e.clientY - rect.top
+    });
+  }, [isDrawing, selection]);
+  const handleMouseUp = useCallback(() => {
+    if (!isDrawing || !selection || !pageDimensions || !displayDimensions || !session) {
+      setIsDrawing(false);
+      setSelection(null);
+      return;
+    }
+    const dragDistance = Math.sqrt(
+      Math.pow(selection.endX - selection.startX, 2) + Math.pow(selection.endY - selection.startY, 2)
+    );
+    const MIN_DRAG_DISTANCE = 10;
+    if (dragDistance < MIN_DRAG_DISTANCE) {
+      if (existingAnnotations.length > 0) {
+        let hitRect;
+        const hit = rectsForPage(existingAnnotations, pageNumber).find((r) => {
+          const rect = pdfToCanvasCoordinates(r.coord, pageDimensions.height, 1);
+          const scaleX2 = displayDimensions.width / pageDimensions.width;
+          const scaleY2 = displayDimensions.height / pageDimensions.height;
+          const displayX = rect.x * scaleX2;
+          const displayY = rect.y * scaleY2;
+          const displayWidth = rect.width * scaleX2;
+          const displayHeight = rect.height * scaleY2;
+          const inside = selection.endX >= displayX && selection.endX <= displayX + displayWidth && selection.endY >= displayY && selection.endY <= displayY + displayHeight;
+          if (inside && imageRef.current) {
+            hitRect = toViewportAnchorRect(imageRef.current.getBoundingClientRect(), displayX, displayY, displayWidth, displayHeight);
+          }
+          return inside;
+        });
+        if (hit) {
+          session?.client.browse.click(hit.annId, hitRect);
+          setIsDrawing(false);
+          setSelection(null);
+          return;
+        }
+      }
+      setIsDrawing(false);
+      setSelection(null);
+      return;
+    }
+    const scaleX = pageDimensions.width / displayDimensions.width;
+    const scaleY = pageDimensions.height / displayDimensions.height;
+    const nativeSelection = {
+      startX: selection.startX * scaleX,
+      startY: selection.startY * scaleY,
+      endX: selection.endX * scaleX,
+      endY: selection.endY * scaleY
+    };
+    const pdfCoord = canvasToPdfCoordinates(
+      nativeSelection,
+      pageNumber,
+      pageDimensions.width,
+      pageDimensions.height,
+      1
+      // Use scale 1.0 since we already scaled to native coords
+    );
+    const fragmentSelector = createFragmentSelector(pdfCoord);
+    const quoted = pageAnchored ? textUnder(pageAnchored, pdfCoord) : "";
+    if (selectedMotivation) {
+      session.client.mark.request(
+        toResourceId(resourceUri),
+        [
+          {
+            type: "FragmentSelector",
+            conformsTo: "http://tools.ietf.org/rfc/rfc3778",
+            value: fragmentSelector
+          },
+          ...quoted ? [{ type: "TextQuoteSelector", exact: quoted }] : []
+        ],
+        selectedMotivation
+      );
+    }
+    setIsDrawing(false);
+  }, [isDrawing, selection, pageNumber, pageDimensions, displayDimensions, selectedMotivation, existingAnnotations, session, resourceUri, pageAnchored]);
+  const pageRects = rectsForPage(existingAnnotations, pageNumber);
+  const { handleMouseEnter, handleMouseLeave } = useMemo(
+    () => createHoverHandlers((id) => session?.client.beckon.hover(id), hoverDelayMs),
+    [session, hoverDelayMs]
+  );
+  const { stroke, fill } = getMotivationColor(selectedMotivation ?? null);
+  if (errorKey) {
+    return /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__error", children: t(errorKey) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "semiont-pdf-annotation-canvas__container",
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: () => {
+        if (isDrawing) {
+          setIsDrawing(false);
+          setSelection(null);
+        }
+      },
+      "data-drawing-mode": drawingMode || "none",
+      children: [
+        pageImageUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: imageRef,
+            src: pageImageUrl,
+            alt: `PDF page ${pageNumber}`,
+            className: "semiont-pdf-annotation-canvas__image",
+            draggable: false,
+            style: { pointerEvents: "none" },
+            onLoad: () => {
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  if (imageRef.current) {
+                    setDisplayDimensions({
+                      width: imageRef.current.clientWidth,
+                      height: imageRef.current.clientHeight
+                    });
+                  }
+                });
+              });
+            }
+          }
+        ),
+        displayDimensions && pageDimensions && /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__overlay-container", children: /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__overlay", children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "semiont-pdf-annotation-canvas__svg",
+            width: displayDimensions.width,
+            height: displayDimensions.height,
+            children: [
+              pageRects.map((r) => {
+                const rect = pdfToCanvasCoordinates(r.coord, pageDimensions.height, 1);
+                const scaleX = displayDimensions.width / pageDimensions.width;
+                const scaleY = displayDimensions.height / pageDimensions.height;
+                const isHovered = r.annId === hoveredAnnotationId;
+                const isSelected = r.annId === selectedAnnotationId;
+                const annMotivation = r.annotation.motivation;
+                const { stroke: annStroke, fill: annFill } = getMotivationColor(annMotivation);
+                return /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: rect.x * scaleX,
+                    y: rect.y * scaleY,
+                    width: rect.width * scaleX,
+                    height: rect.height * scaleY,
+                    stroke: annStroke,
+                    strokeWidth: isSelected ? 4 : isHovered ? 3 : 2,
+                    fill: annFill,
+                    style: {
+                      pointerEvents: "auto",
+                      cursor: "pointer",
+                      opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
+                    },
+                    onClick: (e) => session?.client.browse.click(r.annId, e.currentTarget.getBoundingClientRect()),
+                    onMouseEnter: () => handleMouseEnter(r.annId),
+                    onMouseLeave: handleMouseLeave
+                  },
+                  `${r.annId}:${r.selectorIndex}`
+                );
+              }),
+              selection && (() => {
+                const rectX = Math.min(selection.startX, selection.endX);
+                const rectY = Math.min(selection.startY, selection.endY);
+                const rectWidth = Math.abs(selection.endX - selection.startX);
+                const rectHeight = Math.abs(selection.endY - selection.startY);
+                return /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: rectX,
+                    y: rectY,
+                    width: rectWidth,
+                    height: rectHeight,
+                    stroke,
+                    strokeWidth: 2,
+                    strokeDasharray: "5,5",
+                    fill,
+                    pointerEvents: "none"
+                  }
+                );
+              })()
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function PdfAnnotationCanvas({
+  pdfUrl,
+  resourceUri,
+  existingAnnotations = [],
+  drawingMode,
+  selectedMotivation,
+  session,
+  hoveredAnnotationId,
+  selectedAnnotationId,
+  hoverDelayMs = 150,
+  pageLayout = "paged"
+}) {
+  const [pdfDoc, setPdfDoc] = useState(null);
+  const [numPages, setNumPages] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorKey, setErrorKey] = useState(null);
+  const t = useTranslations("PdfViewer");
+  const [pageShape, setPageShape] = useState(null);
+  const [columnWidth, setColumnWidth] = useState(null);
+  const columnRef = useRef(null);
+  const [scale] = useState(1.5);
+  const [visiblePages, setVisiblePages] = useState(/* @__PURE__ */ new Set());
+  const [onscreenPages, setOnscreenPages] = useState(/* @__PURE__ */ new Set());
+  const slotRefs = useRef(/* @__PURE__ */ new Map());
+  const observerRef = useRef(null);
+  const onscreenRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadPdf() {
+      try {
+        setIsLoading(true);
+        setErrorKey(null);
+        const doc = await loadPdfDocument(pdfUrl);
+        if (cancelled) return;
+        setPdfDoc(doc);
+        setNumPages(doc.numPages);
+        setIsLoading(false);
+        try {
+          const first = await doc.getPage(1);
+          if (cancelled) return;
+          const natural = first.getViewport({ scale: 1 });
+          setPageShape({
+            aspect: natural.height / natural.width,
+            rasterWidth: first.getViewport({ scale }).width
+          });
+        } catch {
+        }
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error loading PDF:", err);
+        setErrorKey("loadFailed");
+        setIsLoading(false);
+      }
+    }
+    loadPdf();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfUrl, scale]);
+  const resourceAnchoredRef = useRef(null);
+  const fetchResourceAnchored = useCallback(() => {
+    if (!session) return Promise.resolve(null);
+    const cached = resourceAnchoredRef.current;
+    if (cached && cached.uri === resourceUri) return cached.outcome;
+    const uri = resourceUri;
+    const outcome = session.client.browse.resourceAnchoredText(toResourceId(uri)).then(
+      (served) => served && !("declined" in served) ? served : null,
+      () => {
+        if (resourceAnchoredRef.current?.uri === uri) resourceAnchoredRef.current = null;
+        return null;
+      }
+    );
+    resourceAnchoredRef.current = { uri, outcome };
+    return outcome;
+  }, [session, resourceUri]);
+  useEffect(() => {
+    if (pageLayout !== "scroll") return;
+    const measure = () => {
+      if (columnRef.current) setColumnWidth(columnRef.current.clientWidth);
+    };
+    measure();
+    let observer = null;
+    try {
+      observer = new ResizeObserver(measure);
+      if (columnRef.current) observer.observe(columnRef.current);
+    } catch {
+      window.addEventListener("resize", measure);
+    }
+    return () => {
+      if (observer) observer.disconnect();
+      else window.removeEventListener("resize", measure);
+    };
+  }, [pageLayout]);
+  const slotHeight = estimateSlotHeight(columnWidth, pageShape?.rasterWidth ?? null, pageShape?.aspect ?? null) ?? (pageShape ? Math.round(pageShape.rasterWidth * pageShape.aspect) : null);
+  useEffect(() => {
+    if (pageLayout !== "scroll" || numPages === 0) return;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          setVisiblePages((prev) => {
+            const next = new Set(prev);
+            for (const entry of entries) {
+              const page = Number(entry.target.dataset.page);
+              if (!page) continue;
+              if (entry.isIntersecting) next.add(page);
+              else next.delete(page);
+            }
+            return next;
+          });
+        },
+        { rootMargin: PRELOAD_MARGIN }
+      );
+    } catch {
+      setVisiblePages(new Set(Array.from({ length: numPages }, (_, i) => i + 1)));
+      return;
+    }
+    observerRef.current = observer;
+    for (const el of slotRefs.current.values()) observer.observe(el);
+    let onscreen = null;
+    try {
+      onscreen = new IntersectionObserver((entries) => {
+        setOnscreenPages((prev) => {
+          const next = new Set(prev);
+          for (const entry of entries) {
+            const page = Number(entry.target.dataset.page);
+            if (!page) continue;
+            if (entry.isIntersecting) next.add(page);
+            else next.delete(page);
+          }
+          return next;
+        });
+      });
+      onscreenRef.current = onscreen;
+      for (const el of slotRefs.current.values()) onscreen.observe(el);
+    } catch {
+      setOnscreenPages(/* @__PURE__ */ new Set([1]));
+    }
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+      onscreen?.disconnect();
+      onscreenRef.current = null;
+    };
+  }, [pageLayout, numPages]);
+  const registerSlot = useCallback((page) => (el) => {
+    const previous = slotRefs.current.get(page);
+    if (previous) {
+      observerRef.current?.unobserve(previous);
+      onscreenRef.current?.unobserve(previous);
+    }
+    if (el) {
+      slotRefs.current.set(page, el);
+      observerRef.current?.observe(el);
+      onscreenRef.current?.observe(el);
+    } else {
+      slotRefs.current.delete(page);
+    }
+  }, []);
+  const currentTickRef = useRef(null);
+  const scrollToPage = useCallback((page) => {
+    scrollElementIntoView(slotRefs.current.get(page), { block: "start" });
+  }, []);
+  const currentPage = pageLayout === "scroll" ? onscreenPages.size > 0 ? Math.min(...onscreenPages) : 1 : pageNumber;
+  useEffect(() => {
+    if (numPages === 0) return;
+    const BACK = ["ArrowLeft", "PageUp"];
+    const FORWARD = ["ArrowRight", "PageDown"];
+    const onKeyDown = (e) => {
+      if (!BACK.includes(e.key) && !FORWARD.includes(e.key)) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const el = e.target;
+      const tag = el?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || el?.isContentEditable) return;
+      const next = FORWARD.includes(e.key) ? currentPage + 1 : currentPage - 1;
+      if (next < 1 || next > numPages) return;
+      e.preventDefault();
+      if (pageLayout === "scroll") scrollToPage(next);
+      else setPageNumber(next);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [numPages, currentPage, pageLayout, scrollToPage]);
+  const stripRef = useRef(null);
+  useEffect(() => {
+    scrollElementIntoView(currentTickRef.current, { block: "nearest", inline: "nearest" });
+    const active = typeof document !== "undefined" ? document.activeElement : null;
+    if (active && stripRef.current?.contains(active) && active !== currentTickRef.current) {
+      currentTickRef.current?.focus();
+    }
+  }, [currentPage]);
+  const pageProps = {
+    scale,
+    resourceUri,
+    existingAnnotations,
+    drawingMode,
+    selectedMotivation,
+    session,
+    hoveredAnnotationId,
+    selectedAnnotationId,
+    hoverDelayMs,
+    fetchResourceAnchored
+  };
+  if (errorKey) {
+    return /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__error", children: t(errorKey) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "semiont-pdf-annotation-canvas", children: [
+    isLoading && /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__loading", children: t("loading") }),
+    pdfDoc && pageLayout === "scroll" ? /* @__PURE__ */ jsxs("div", { className: "semiont-pdf-annotation-canvas__viewport", "data-axis": SCROLL_AXIS, children: [
+      numPages > 0 && pageShape && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "semiont-pdf-annotation-canvas__strip",
+          "data-axis": SCROLL_AXIS,
+          "data-scroller": "true",
+          "aria-orientation": SCROLL_AXIS,
+          ref: stripRef,
+          children: Array.from({ length: numPages }, (_, i) => i + 1).map((page) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-page": page,
+              className: "semiont-pdf-annotation-canvas__strip-page",
+              style: { height: `${Math.round(STRIP_PAGE_WIDTH * pageShape.aspect)}px` },
+              "aria-label": t("pageOf", { page, total: numPages }),
+              tabIndex: page === currentPage ? 0 : -1,
+              ...page === currentPage ? { "aria-current": "page" } : {},
+              ref: page === currentPage ? currentTickRef : void 0,
+              onClick: () => scrollToPage(page),
+              children: page
+            },
+            page
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__column", "data-axis": SCROLL_AXIS, ref: columnRef, children: Array.from({ length: numPages }, (_, i) => i + 1).map((page) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: registerSlot(page),
+          "data-page": page,
+          className: "semiont-pdf-annotation-canvas__slot",
+          style: slotHeight ? { minHeight: slotHeight } : void 0,
+          children: visiblePages.has(page) && /* @__PURE__ */ jsx(PdfPageView, { doc: pdfDoc, pageNumber: page, ...pageProps })
+        },
+        page
+      )) })
+    ] }) : pdfDoc && !isLoading && // `key` is load-bearing: without it React reuses this instance
+    // across page changes, so the previous page's raster, text map and
+    // load error survive into the next page — a stale overlay, a quote
+    // taken from the wrong page, and an error that never clears. Each
+    // page is a different thing; mounting it as one resets all of it.
+    /* @__PURE__ */ jsx(PdfPageView, { doc: pdfDoc, pageNumber, ...pageProps }, pageNumber),
+    numPages > 0 && /* @__PURE__ */ jsxs("nav", { className: "semiont-pdf-annotation-canvas__controls", "aria-label": t("pagination"), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: currentPage <= 1,
+          onClick: () => pageLayout === "scroll" ? scrollToPage(currentPage - 1) : setPageNumber(pageNumber - 1),
+          className: "semiont-pdf-annotation-canvas__button",
+          children: t("previous")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "semiont-pdf-annotation-canvas__page-info", "aria-live": "polite", children: t("pageOf", { page: currentPage, total: numPages }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: currentPage >= numPages,
+          onClick: () => pageLayout === "scroll" ? scrollToPage(currentPage + 1) : setPageNumber(pageNumber + 1),
+          className: "semiont-pdf-annotation-canvas__button",
+          children: t("next")
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PdfAnnotationCanvas
+};
+//# sourceMappingURL=PdfAnnotationCanvas.client-EVUPTUWZ.js.map