@semiont/react-ui 0.2.32 → 0.2.33-build.74

package/dist/PdfAnnotationCanvas.client-7FE67FUX.css

@@ -0,0 +1,106 @@
+/* src/components/pdf-annotation/PdfAnnotationCanvas.css */
+.semiont-pdf-annotation-canvas {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.semiont-pdf-annotation-canvas__loading,
+.semiont-pdf-annotation-canvas__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+.semiont-pdf-annotation-canvas__error {
+  color: var(--error-color);
+}
+[data-theme=dark] .semiont-pdf-annotation-canvas__error {
+  color: var(--error-color);
+}
+.semiont-pdf-annotation-canvas__container {
+  position: relative;
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 1rem;
+}
+.semiont-pdf-annotation-canvas__container[data-drawing-mode=rectangle] {
+  cursor: crosshair;
+}
+.semiont-pdf-annotation-canvas__container[data-drawing-mode=none] {
+  cursor: default;
+}
+.semiont-pdf-annotation-canvas__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+[data-theme=dark] .semiont-pdf-annotation-canvas__image {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+}
+.semiont-pdf-annotation-canvas__overlay-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 1rem;
+  pointer-events: none;
+}
+.semiont-pdf-annotation-canvas__overlay {
+  position: relative;
+  pointer-events: none;
+}
+.semiont-pdf-annotation-canvas__svg {
+  pointer-events: none;
+}
+.semiont-pdf-annotation-canvas__svg rect {
+  pointer-events: auto;
+}
+.semiont-pdf-annotation-canvas__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+.semiont-pdf-annotation-canvas__button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .semiont-pdf-annotation-canvas__button {
+    transition: background-color 0.2s;
+  }
+}
+.semiont-pdf-annotation-canvas__button:hover:not(:disabled) {
+  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
+}
+.semiont-pdf-annotation-canvas__button:focus-visible {
+  outline: 2px solid var(--focus-color, #0066cc);
+  outline-offset: 2px;
+}
+.semiont-pdf-annotation-canvas__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.semiont-pdf-annotation-canvas__page-info {
+  font-size: 0.875rem;
+  min-width: 7rem;
+  text-align: center;
+}
+/*# sourceMappingURL=PdfAnnotationCanvas.client-7FE67FUX.css.map */

package/dist/PdfAnnotationCanvas.client-7FE67FUX.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pdf-annotation/PdfAnnotationCanvas.css"],"sourcesContent":["/**\n * PDF Annotation Canvas Styles\n *\n * Provides consistent styling for PDF annotation interface,\n * following the same pattern as image annotation (SvgDrawingCanvas).\n */\n\n.semiont-pdf-annotation-canvas {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n}\n\n.semiont-pdf-annotation-canvas__loading,\n.semiont-pdf-annotation-canvas__error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n/* stylelint-disable semiont/accessibility -- Error indicator added by semantic-indicators.css */\n\n.semiont-pdf-annotation-canvas__error {\n  color: var(--error-color);\n}\n\n[data-theme=\"dark\"] .semiont-pdf-annotation-canvas__error {\n  color: var(--error-color);\n}\n\n/* stylelint-enable semiont/accessibility */\n\n.semiont-pdf-annotation-canvas__container {\n  position: relative;\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  padding: 1rem;\n}\n\n.semiont-pdf-annotation-canvas__container[data-drawing-mode=\"rectangle\"] {\n  cursor: crosshair;\n}\n\n.semiont-pdf-annotation-canvas__container[data-drawing-mode=\"none\"] {\n  cursor: default;\n}\n\n.semiont-pdf-annotation-canvas__image {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n[data-theme=\"dark\"] .semiont-pdf-annotation-canvas__image {\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);\n}\n\n.semiont-pdf-annotation-canvas__overlay-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  padding: 1rem;\n  pointer-events: none;\n}\n\n.semiont-pdf-annotation-canvas__overlay {\n  position: relative;\n  pointer-events: none;\n}\n\n.semiont-pdf-annotation-canvas__svg {\n  pointer-events: none;\n}\n\n.semiont-pdf-annotation-canvas__svg rect {\n  pointer-events: auto;\n}\n\n.semiont-pdf-annotation-canvas__controls {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: 1rem;\n  border-top: 1px solid var(--border-color);\n}\n\n.semiont-pdf-annotation-canvas__button {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background: transparent;\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .semiont-pdf-annotation-canvas__button {\n    transition: background-color 0.2s;\n  }\n}\n\n.semiont-pdf-annotation-canvas__button:hover:not(:disabled) {\n  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));\n}\n\n.semiont-pdf-annotation-canvas__button:focus-visible {\n  outline: 2px solid var(--focus-color, #0066cc);\n  outline-offset: 2px;\n}\n\n.semiont-pdf-annotation-canvas__button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.semiont-pdf-annotation-canvas__page-info {\n  font-size: 0.875rem;\n  min-width: 7rem;\n  text-align: center;\n}\n\n/*# sourceMappingURL=src/components/pdf-annotation/PdfAnnotationCanvas.css.map */"],"mappings":";AAOA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,UAAQ;AACR,SAAO;AACT;AAEA,CAAC;AACD,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS;AACX;AAIA,CATC;AAUC,SAAO,IAAI;AACb;AAEA,CAAC,iBAAmB,CAbnB;AAcC,SAAO,IAAI;AACb;AAIA,CAAC;AACC,YAAU;AACV,QAAM;AACN,YAAU;AACV,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS;AACX;AAEA,CAVC,wCAUwC,CAAC;AACxC,UAAQ;AACV;AAEA,CAdC,wCAcwC,CAAC;AACxC,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,aAAW;AACX,UAAQ;AACR,cAAY,EAAE,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,IAAI,KAAK,IAAI,EAAE,EAAE,EAAE,EAAE;AACrE,uBAAqB;AAClB,oBAAkB;AACb,eAAa;AACvB;AAEA,CAAC,iBAAmB,CAVnB;AAWC,cAAY,EAAE,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,IAAI,KAAK,IAAI,EAAE,EAAE,EAAE,EAAE;AACvE;AAEA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS;AACT,kBAAgB;AAClB;AAEA,CAAC;AACC,YAAU;AACV,kBAAgB;AAClB;AAEA,CAAC;AACC,kBAAgB;AAClB;AAEA,CAJC,mCAImC;AAClC,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK;AACL,WAAS;AACT,cAAY,IAAI,MAAM,IAAI;AAC5B;AAEA,CAAC;AACC,WAAS,OAAO;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,cAAY;AACZ,UAAQ;AACV;AAEA,QAAO,wBAAyB;AAC9B,GATD;AAUG,gBAAY,iBAAiB;AAC/B;AACF;AAEA,CAdC,qCAcqC,MAAM,KAAK;AAC/C,oBAAkB,IAAI,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrD;AAEA,CAlBC,qCAkBqC;AACpC,WAAS,IAAI,MAAM,IAAI,aAAa,EAAE;AACtC,kBAAgB;AAClB;AAEA,CAvBC,qCAuBqC;AACpC,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,aAAW;AACX,aAAW;AACX,cAAY;AACd;","names":[]}

package/dist/PdfAnnotationCanvas.client-UW5TZJL2.mjs

@@ -0,0 +1,485 @@
+'use client';
+"use client";
+import "./chunk-3JTO27MH.mjs";
+
+// src/components/pdf-annotation/PdfAnnotationCanvas.tsx
+import { useRef, useState, useCallback, useEffect } from "react";
+import { getTargetSelector } from "@semiont/api-client";
+
+// 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 canvasHeight = pageHeight * 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
+  };
+}
+function createFragmentSelector(coord) {
+  return `page=${coord.page}&viewrect=${coord.x},${coord.y},${coord.width},${coord.height}`;
+}
+function parseFragmentSelector(fragment) {
+  try {
+    const pageMatch = fragment.match(/page=(\d+)/);
+    if (!pageMatch) return null;
+    const page = parseInt(pageMatch[1], 10);
+    const viewrectMatch = fragment.match(/viewrect=([\d.]+),([\d.]+),([\d.]+),([\d.]+)/);
+    if (!viewrectMatch) return null;
+    return {
+      page,
+      x: parseFloat(viewrectMatch[1]),
+      y: parseFloat(viewrectMatch[2]),
+      width: parseFloat(viewrectMatch[3]),
+      height: parseFloat(viewrectMatch[4])
+    };
+  } catch {
+    return null;
+  }
+}
+function getPageFromFragment(fragment) {
+  const match = fragment.match(/page=(\d+)/);
+  return match ? parseInt(match[1], 10) : null;
+}
+
+// src/lib/browser-pdfjs.ts
+async function ensurePdfJs() {
+  if (typeof window !== "undefined" && window.pdfjsLib) {
+    return window.pdfjsLib;
+  }
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "/pdfjs/pdf.min.mjs";
+    script.type = "module";
+    script.onload = () => {
+      const pdfjsLib = window.pdfjsLib;
+      if (!pdfjsLib) {
+        reject(new Error("PDF.js loaded but pdfjsLib not available"));
+        return;
+      }
+      pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.mjs";
+      resolve(pdfjsLib);
+    };
+    script.onerror = () => {
+      reject(new Error("Failed to load PDF.js from /pdfjs/pdf.min.mjs"));
+    };
+    document.head.appendChild(script);
+  });
+}
+async function loadPdfDocument(source) {
+  const pdfjsLib = await ensurePdfJs();
+  if (typeof source === "string") {
+    const response = await fetch(source, {
+      credentials: "include",
+      headers: {
+        "Accept": "application/pdf"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch PDF: ${response.status} ${response.statusText}`);
+    }
+    const arrayBuffer = await response.arrayBuffer();
+    const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+    return loadingTask.promise;
+  } else {
+    const loadingTask = pdfjsLib.getDocument({ data: source });
+    return loadingTask.promise;
+  }
+}
+async function renderPdfPageToDataUrl(page, scale = 1) {
+  const viewport = page.getViewport({ scale });
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Failed to get 2D context");
+  }
+  canvas.width = viewport.width;
+  canvas.height = viewport.height;
+  const renderTask = page.render({
+    canvasContext: context,
+    viewport
+  });
+  await renderTask.promise;
+  return {
+    dataUrl: canvas.toDataURL("image/png"),
+    width: viewport.width,
+    height: viewport.height
+  };
+}
+
+// src/components/pdf-annotation/PdfAnnotationCanvas.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+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 PdfAnnotationCanvas({
+  resourceUri,
+  existingAnnotations = [],
+  drawingMode,
+  selectedMotivation,
+  onAnnotationCreate,
+  onAnnotationClick,
+  onAnnotationHover,
+  hoveredAnnotationId,
+  selectedAnnotationId
+}) {
+  const resourceId = resourceUri.split("/").pop();
+  const pdfUrl = `/api/resources/${resourceId}`;
+  const [pdfDoc, setPdfDoc] = useState(null);
+  const [numPages, setNumPages] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [currentPage, setCurrentPage] = useState(null);
+  const [pageImageUrl, setPageImageUrl] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [pageDimensions, setPageDimensions] = useState(null);
+  const [displayDimensions, setDisplayDimensions] = useState(null);
+  const [scale] = useState(1.5);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [selection, setSelection] = useState(null);
+  const containerRef = useRef(null);
+  const imageRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadPdf() {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const doc = await loadPdfDocument(pdfUrl);
+        if (cancelled) return;
+        setPdfDoc(doc);
+        setNumPages(doc.numPages);
+        setIsLoading(false);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error loading PDF:", err);
+        setError("Failed to load PDF");
+        setIsLoading(false);
+      }
+    }
+    loadPdf();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfUrl]);
+  useEffect(() => {
+    if (!pdfDoc) return;
+    let cancelled = false;
+    const doc = pdfDoc;
+    async function loadPage() {
+      try {
+        const page = await doc.getPage(pageNumber);
+        if (cancelled) return;
+        setCurrentPage(page);
+        const viewport = page.getViewport({ scale: 1 });
+        setPageDimensions({
+          width: viewport.width,
+          height: viewport.height
+        });
+        const { dataUrl } = await renderPdfPageToDataUrl(page, scale);
+        if (cancelled) return;
+        setPageImageUrl(dataUrl);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Error loading page:", err);
+        setError("Failed to load page");
+      }
+    }
+    loadPage();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfDoc, pageNumber, scale]);
+  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 (error2) {
+      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 || drawingMode !== "rectangle") 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 || !onAnnotationCreate) {
+      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 (onAnnotationClick && existingAnnotations.length > 0) {
+        const clickedAnnotation = pageAnnotations.find((ann) => {
+          const fragmentSel = getFragmentSelector(ann.target);
+          if (!fragmentSel) return false;
+          const pdfCoord2 = parseFragmentSelector(fragmentSel.value);
+          if (!pdfCoord2) return false;
+          const rect = pdfToCanvasCoordinates(pdfCoord2, 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;
+          return selection.endX >= displayX && selection.endX <= displayX + displayWidth && selection.endY >= displayY && selection.endY <= displayY + displayHeight;
+        });
+        if (clickedAnnotation) {
+          onAnnotationClick(clickedAnnotation);
+          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);
+    onAnnotationCreate(fragmentSelector);
+    setIsDrawing(false);
+    setSelection(null);
+  }, [isDrawing, selection, pageNumber, pageDimensions, displayDimensions, onAnnotationCreate, onAnnotationClick, existingAnnotations]);
+  const getFragmentSelector = (target) => {
+    const selector = getTargetSelector(target);
+    if (!selector) return null;
+    const selectors = Array.isArray(selector) ? selector : [selector];
+    const found = selectors.find((s) => s.type === "FragmentSelector");
+    if (!found || found.type !== "FragmentSelector") return null;
+    return found;
+  };
+  const pageAnnotations = existingAnnotations.filter((ann) => {
+    const fragmentSel = getFragmentSelector(ann.target);
+    if (!fragmentSel) return false;
+    const page = getPageFromFragment(fragmentSel.value);
+    return page === pageNumber;
+  });
+  const { stroke, fill } = getMotivationColor(selectedMotivation ?? null);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__error", children: error });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "semiont-pdf-annotation-canvas", children: [
+    isLoading && /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__loading", children: "Loading PDF..." }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        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
+            }
+          ),
+          displayDimensions && pageDimensions && /* @__PURE__ */ jsx("div", { className: "semiont-pdf-annotation-canvas__overlay-container", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "semiont-pdf-annotation-canvas__overlay",
+              style: {
+                width: displayDimensions.width,
+                height: displayDimensions.height
+              },
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "semiont-pdf-annotation-canvas__svg",
+                  style: {
+                    width: displayDimensions.width,
+                    height: displayDimensions.height
+                  },
+                  children: [
+                    pageAnnotations.map((ann) => {
+                      const fragmentSel = getFragmentSelector(ann.target);
+                      if (!fragmentSel) return null;
+                      const pdfCoord = parseFragmentSelector(fragmentSel.value);
+                      if (!pdfCoord) return null;
+                      const rect = pdfToCanvasCoordinates(pdfCoord, pageDimensions.height, 1);
+                      const scaleX = displayDimensions.width / pageDimensions.width;
+                      const scaleY = displayDimensions.height / pageDimensions.height;
+                      const isHovered = ann.id === hoveredAnnotationId;
+                      const isSelected = ann.id === selectedAnnotationId;
+                      return /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: rect.x * scaleX,
+                          y: rect.y * scaleY,
+                          width: rect.width * scaleX,
+                          height: rect.height * scaleY,
+                          stroke,
+                          strokeWidth: isSelected ? 4 : isHovered ? 3 : 2,
+                          fill,
+                          style: {
+                            pointerEvents: "auto",
+                            cursor: "pointer",
+                            opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
+                          },
+                          onClick: () => onAnnotationClick?.(ann),
+                          onMouseEnter: () => onAnnotationHover?.(ann.id),
+                          onMouseLeave: () => onAnnotationHover?.(null)
+                        },
+                        ann.id
+                      );
+                    }),
+                    selection && isDrawing && /* @__PURE__ */ jsx(
+                      "rect",
+                      {
+                        x: Math.min(selection.startX, selection.endX),
+                        y: Math.min(selection.startY, selection.endY),
+                        width: Math.abs(selection.endX - selection.startX),
+                        height: Math.abs(selection.endY - selection.startY),
+                        stroke,
+                        strokeWidth: 2,
+                        strokeDasharray: "5,5",
+                        fill,
+                        pointerEvents: "none"
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    numPages > 0 && /* @__PURE__ */ jsxs("div", { className: "semiont-pdf-annotation-canvas__controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: pageNumber <= 1,
+          onClick: () => setPageNumber(pageNumber - 1),
+          className: "semiont-pdf-annotation-canvas__button",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "semiont-pdf-annotation-canvas__page-info", children: [
+        "Page ",
+        pageNumber,
+        " of ",
+        numPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          disabled: pageNumber >= numPages,
+          onClick: () => setPageNumber(pageNumber + 1),
+          className: "semiont-pdf-annotation-canvas__button",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PdfAnnotationCanvas
+};
+//# sourceMappingURL=PdfAnnotationCanvas.client-UW5TZJL2.mjs.map