@anaralabs/lector 3.4.0 → 3.5.0

package/dist/_tsup-dts-rollup.d.ts

@@ -16,8 +16,42 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { StoreApi } from 'zustand';
 import type { TypedArray } from 'pdfjs-dist/types/src/display/api';
+import { UseBoundStore } from 'zustand';
+import { useFloating } from '@floating-ui/react';
+import { useInteractions } from '@floating-ui/react';
 import { Virtualizer } from '@tanstack/react-virtual';
 
+declare interface Annotation {
+    id: string;
+    pageNumber: number;
+    highlights: Array<{
+        height: number;
+        left: number;
+        top: number;
+        width: number;
+        pageNumber: number;
+    }>;
+    comment?: string;
+    color?: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export { Annotation }
+export { Annotation as Annotation_alias_1 }
+
+export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, focusedAnnotationId, onAnnotationClick, }: AnnotationHighlightLayerProps) => JSX.Element;
+
+declare interface AnnotationHighlightLayerProps {
+    className?: string;
+    style?: React.CSSProperties;
+    renderTooltipContent?: (props: {
+        annotation: Annotation;
+        onClose: () => void;
+    }) => React.ReactNode;
+    focusedAnnotationId?: string;
+    onAnnotationClick?: (annotation: Annotation) => void;
+}
+
 /**
  * AnnotationLayer renders PDF annotations like links, highlights, and form fields.
  *
@@ -47,6 +81,24 @@ declare interface AnnotationLayerParams {
     jumpOptions?: Parameters<ReturnType<typeof usePdfJump>['jumpToPage']>[1];
 }
 
+declare interface AnnotationState {
+    annotations: Annotation[];
+    addAnnotation: (annotation: Omit<Annotation, "id" | "createdAt" | "updatedAt">) => void;
+    updateAnnotation: (id: string, updates: Partial<Annotation>) => void;
+    deleteAnnotation: (id: string) => void;
+    setAnnotations: (annotations: Annotation[]) => void;
+}
+
+export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, onOpenChange, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
+
+declare interface AnnotationTooltipProps {
+    annotation: Annotation;
+    children: React.ReactNode;
+    tooltipContent: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    isOpen?: boolean;
+}
+
 /**
  * Calculates the highlight rectangles for a given text match.
  *
@@ -310,6 +362,44 @@ export declare const Thumbnails: ({ children, ...props }: HTMLProps<HTMLDivEleme
 
 export declare const TotalPages: ({ ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
 
+export declare const useAnnotationActions: ({ annotation, onClose, }: UseAnnotationActionsProps) => UseAnnotationActionsReturn;
+
+declare interface UseAnnotationActionsProps {
+    annotation: Annotation;
+    onClose?: () => void;
+}
+
+declare interface UseAnnotationActionsReturn {
+    comment: string;
+    isEditing: boolean;
+    setComment: (comment: string) => void;
+    setIsEditing: (isEditing: boolean) => void;
+    handleSaveComment: () => void;
+    handleColorChange: (color: string) => void;
+    handleCancelEdit: () => void;
+    colors: string[];
+}
+
+declare const useAnnotations: UseBoundStore<StoreApi<AnnotationState>>;
+export { useAnnotations }
+export { useAnnotations as useAnnotations_alias_1 }
+
+export declare const useAnnotationTooltip: ({ annotation, onOpenChange, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
+
+declare interface UseAnnotationTooltipProps {
+    annotation: Annotation;
+    onOpenChange?: (open: boolean) => void;
+}
+
+declare interface UseAnnotationTooltipReturn {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    refs: ReturnType<typeof useFloating>["refs"];
+    floatingStyles: ReturnType<typeof useFloating>["floatingStyles"];
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
+}
+
 declare const usePdf: <T>(selector: (state: PDFState) => T) => T;
 export { usePdf }
 export { usePdf as usePdf_alias_1 }
@@ -355,6 +445,8 @@ declare const usePDFOutline: () => {
     items: Array<any>;
 }[] | undefined;
 
+export declare const usePDFPageNumber: () => number;
+
 export declare const useSearch: () => {
     textContent: {
         pageNumber: number;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { AnnotationTooltip } from './_tsup-dts-rollup.js';
+export { AnnotationHighlightLayer } from './_tsup-dts-rollup.js';
 export { AnnotationLayer } from './_tsup-dts-rollup.js';
 export { CanvasLayer } from './_tsup-dts-rollup.js';
 export { ColoredHighlightLayer } from './_tsup-dts-rollup.js';
@@ -26,7 +28,10 @@ export { SearchResult } from './_tsup-dts-rollup.js';
 export { SearchResults } from './_tsup-dts-rollup.js';
 export { useSearch } from './_tsup-dts-rollup.js';
 export { calculateHighlightRects } from './_tsup-dts-rollup.js';
+export { Annotation } from './_tsup-dts-rollup.js';
+export { useAnnotations } from './_tsup-dts-rollup.js';
 export { LinkService } from './_tsup-dts-rollup.js';
+export { usePDFPageNumber } from './_tsup-dts-rollup.js';
 export { useSelectionDimensions } from './_tsup-dts-rollup.js';
 export { ColoredHighlight } from './_tsup-dts-rollup.js';
 export { HighlightRect } from './_tsup-dts-rollup.js';

package/dist/index.js

@@ -1,30 +1,16 @@
 'use client';
 
-import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
-import React, { createContext, forwardRef, useContext, useState, useRef, useCallback, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useCallback, useContext, useState, useRef, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
+import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, flip } from '@floating-ui/react';
 import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
-import { useStore, createStore } from 'zustand';
+import { create, useStore, createStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useDebounce } from 'use-debounce';
 import { v4 } from 'uuid';
-import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions } from '@floating-ui/react';
+import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
+import { useDebounce } from 'use-debounce';
 import { Slot } from '@radix-ui/react-slot';
 
-// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
+// src/components/annotation-tooltip.tsx
 
 // src/lib/clamp.ts
 var clamp = (value, min, max) => {
@@ -146,6 +132,373 @@ var PDFStore = createZustandContext(
 );
 var usePdf = (selector) => useStore(PDFStore.useContext(), selector);
 
+// src/hooks/useAnnotationTooltip.ts
+var defaultRect = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+var useAnnotationTooltip = ({
+  annotation,
+  onOpenChange
+}) => {
+  const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1e3;
+  const [isOpen, setIsOpen] = useState(isNewAnnotation);
+  const viewportRef = usePdf((state) => state.viewportRef);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    placement: "top",
+    open: isOpen,
+    onOpenChange: (open) => {
+      setIsOpen(open);
+      onOpenChange?.(open);
+    },
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(10),
+      flip({
+        crossAxis: false
+      }),
+      shift({ padding: 8 })
+    ]
+  });
+  const dismiss = useDismiss(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+  const updateTooltipPosition = useCallback(() => {
+    if (!annotation.highlights.length) return;
+    const lastHighlight = annotation.highlights[annotation.highlights.length - 1];
+    refs.setReference({
+      getBoundingClientRect: () => {
+        const viewportElement = viewportRef.current;
+        if (!viewportElement || !lastHighlight) return defaultRect;
+        const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
+        if (!pageElement) return defaultRect;
+        const pageRect = pageElement.getBoundingClientRect();
+        const left = pageRect.left + lastHighlight.left;
+        const top = pageRect.top + lastHighlight.top;
+        const width = lastHighlight.width;
+        const height = lastHighlight.height;
+        return {
+          width,
+          height,
+          x: left,
+          y: top,
+          top,
+          right: left + width,
+          bottom: top + height,
+          left
+        };
+      }
+    });
+  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef]);
+  useEffect(() => {
+    updateTooltipPosition();
+    const handleScroll = () => {
+      requestAnimationFrame(updateTooltipPosition);
+    };
+    const handleResize = () => {
+      requestAnimationFrame(updateTooltipPosition);
+    };
+    if (viewportRef.current) {
+      viewportRef.current.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+    }
+    window.addEventListener("resize", handleResize, { passive: true });
+    return () => {
+      if (viewportRef.current) {
+        viewportRef.current.removeEventListener("scroll", handleScroll);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [updateTooltipPosition, viewportRef]);
+  return {
+    isOpen,
+    setIsOpen,
+    refs,
+    floatingStyles,
+    getFloatingProps,
+    getReferenceProps
+  };
+};
+var AnnotationTooltip = ({
+  annotation,
+  children,
+  tooltipContent,
+  onOpenChange,
+  isOpen: controlledIsOpen
+}) => {
+  const {
+    isOpen: uncontrolledIsOpen,
+    setIsOpen,
+    refs,
+    floatingStyles,
+    getFloatingProps,
+    getReferenceProps
+  } = useAnnotationTooltip({
+    annotation,
+    onOpenChange
+  });
+  const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
+  const handleClick = useCallback(() => {
+    if (controlledIsOpen === void 0) {
+      setIsOpen(!isOpen);
+    }
+  }, [controlledIsOpen, isOpen, setIsOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setReference,
+        onClick: handleClick,
+        ...getReferenceProps(),
+        children
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        className: "bg-white shadow-lg rounded-lg p-3 z-50 min-w-[200px]",
+        style: {
+          ...floatingStyles,
+          position: "fixed",
+          zIndex: 9999
+        },
+        ...getFloatingProps(),
+        children: tooltipContent
+      }
+    )
+  ] });
+};
+var useAnnotations = create((set) => ({
+  annotations: [],
+  addAnnotation: (annotation) => set((state) => ({
+    annotations: [
+      ...state.annotations,
+      {
+        ...annotation,
+        id: v4(),
+        createdAt: /* @__PURE__ */ new Date(),
+        updatedAt: /* @__PURE__ */ new Date()
+      }
+    ]
+  })),
+  updateAnnotation: (id, updates) => set((state) => ({
+    annotations: state.annotations.map(
+      (annotation) => annotation.id === id ? {
+        ...annotation,
+        ...updates,
+        updatedAt: /* @__PURE__ */ new Date()
+      } : annotation
+    )
+  })),
+  deleteAnnotation: (id) => set((state) => ({
+    annotations: state.annotations.filter((annotation) => annotation.id !== id)
+  })),
+  setAnnotations: (annotations) => set({ annotations })
+}));
+var PDFPageNumberContext = createContext(0);
+var usePDFPageNumber = () => {
+  return useContext(PDFPageNumberContext);
+};
+var useAnnotationActions = ({
+  annotation,
+  onClose
+}) => {
+  const { updateAnnotation } = useAnnotations();
+  const [comment, setComment] = useState(annotation.comment || "");
+  const [isEditing, setIsEditing] = useState(false);
+  const handleSaveComment = useCallback(() => {
+    updateAnnotation(annotation.id, { comment });
+    setIsEditing(false);
+    onClose?.();
+  }, [annotation.id, comment, updateAnnotation, onClose]);
+  const handleColorChange = useCallback(
+    (color) => {
+      updateAnnotation(annotation.id, { color });
+      onClose?.();
+    },
+    [annotation.id, updateAnnotation, onClose]
+  );
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    onClose?.();
+  }, [onClose]);
+  const colors = [
+    "rgba(255, 255, 0, 0.3)",
+    // Yellow
+    "rgba(0, 255, 0, 0.3)",
+    // Green
+    "rgba(255, 182, 193, 0.3)",
+    // Pink
+    "rgba(135, 206, 235, 0.3)"
+    // Sky Blue
+  ];
+  return {
+    comment,
+    isEditing,
+    setComment,
+    setIsEditing,
+    handleSaveComment,
+    handleColorChange,
+    handleCancelEdit,
+    colors
+  };
+};
+var DefaultAnnotationTooltipContent = ({
+  annotation,
+  onClose
+}) => {
+  const {
+    comment,
+    isEditing,
+    setComment,
+    setIsEditing,
+    handleSaveComment,
+    handleColorChange,
+    handleCancelEdit,
+    colors
+  } = useAnnotationActions({
+    annotation,
+    onClose
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: colors.map((color) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "w-6 h-6 rounded",
+        style: { backgroundColor: color },
+        onClick: () => handleColorChange(color)
+      },
+      color
+    )) }),
+    isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: comment,
+          onChange: (e) => setComment(e.target.value),
+          className: "border rounded p-2 text-sm",
+          placeholder: "Add a comment...",
+          rows: 3
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCancelEdit,
+            className: "px-2 py-1 text-sm text-gray-600 hover:text-gray-800",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSaveComment,
+            className: "px-2 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",
+            children: "Save"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { children: annotation.comment ? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: annotation.comment }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsEditing(true),
+        className: "text-sm text-blue-500 hover:text-blue-600",
+        children: "Add comment"
+      }
+    ) })
+  ] });
+};
+var AnnotationHighlightLayer = ({
+  className,
+  style,
+  renderTooltipContent,
+  focusedAnnotationId,
+  onAnnotationClick
+}) => {
+  const { annotations } = useAnnotations();
+  const pageNumber = usePDFPageNumber();
+  const pageAnnotations = annotations.filter(
+    (annotation) => annotation.pageNumber === pageNumber
+  );
+  return /* @__PURE__ */ jsx("div", { className, style, children: pageAnnotations.map((annotation) => /* @__PURE__ */ jsx(
+    AnnotationTooltip,
+    {
+      annotation,
+      isOpen: focusedAnnotationId === annotation.id,
+      onOpenChange: (open) => {
+        if (open && onAnnotationClick) {
+          onAnnotationClick(annotation);
+        }
+      },
+      tooltipContent: renderTooltipContent ? renderTooltipContent({
+        annotation,
+        onClose: () => {
+        }
+      }) : /* @__PURE__ */ jsx(
+        DefaultAnnotationTooltipContent,
+        {
+          annotation,
+          onClose: () => {
+          }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { cursor: "pointer" },
+          onClick: () => onAnnotationClick?.(annotation),
+          children: annotation.highlights.map((highlight, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: highlight.top,
+                left: highlight.left,
+                width: highlight.width,
+                height: highlight.height,
+                backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
+                transition: "background-color 0.2s ease",
+                cursor: "pointer",
+                opacity: focusedAnnotationId === annotation.id ? 1 : 0.5
+              }
+            },
+            index
+          ))
+        }
+      )
+    },
+    annotation.id
+  )) });
+};
+
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // src/lib/cancellable.ts
 var cancellable = (promise) => {
   let isCancelled = false;
@@ -184,9 +537,9 @@ var usePdfJump = () => {
     const finalOptions = { ...defaultOptions, ...options };
     virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
   };
-  const jumpToOffset = (offset2) => {
+  const jumpToOffset = (offset3) => {
     if (!virtualizer) return;
-    virtualizer.scrollToOffset(offset2, {
+    virtualizer.scrollToOffset(offset3, {
       align: "start",
       behavior: "smooth"
     });
@@ -387,10 +740,6 @@ var PDFLinkServiceContext = createContext(defaultLinkService);
 var usePDFLinkService = () => {
   return useContext(PDFLinkServiceContext);
 };
-var PDFPageNumberContext = createContext(0);
-var usePDFPageNumber = () => {
-  return useContext(PDFPageNumberContext);
-};
 var useVisibility = ({
   elementRef
 }) => {
@@ -1336,6 +1685,7 @@ var Page = ({
           style: {
             ...style,
             "--scale-factor": 1,
+            "--total-scale-factor": 1,
             position: "relative",
             width,
             height
@@ -1442,21 +1792,21 @@ var useObserveElement = () => {
     if (!targetWindow) {
       return;
     }
-    let offset2 = 0;
+    let offset3 = 0;
     const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
       targetWindow,
       () => {
-        cb(offset2, false);
+        cb(offset3, false);
       },
       instance.options.isScrollingResetDelay
     );
     const createHandler = (isScrolling) => () => {
       const { horizontal, isRtl } = instance.options;
-      offset2 = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+      offset3 = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
       const zoom = store.getState().zoom;
-      offset2 = offset2 / zoom;
+      offset3 = offset3 / zoom;
       fallback();
-      cb(offset2, isScrolling);
+      cb(offset3, isScrolling);
     };
     const handler = createHandler(true);
     const endHandler = createHandler(false);
@@ -1477,8 +1827,8 @@ var useScrollFn = () => {
   const scrollToFn = useCallback(
     (_offset, canSmooth, instance) => {
       const zoom = store.getState().zoom;
-      const offset2 = _offset * zoom;
-      elementScroll(offset2, canSmooth, instance);
+      const offset3 = _offset * zoom;
+      elementScroll(offset3, canSmooth, instance);
     },
     [store]
   );
@@ -2593,10 +2943,10 @@ var PinchEngine = class extends Engine {
   }
   computeMovement() {
     const {
-      offset: offset2,
+      offset: offset3,
       lastOffset
     } = this.state;
-    this.state.movement = [offset2[0] / lastOffset[0], offset2[1] - lastOffset[1]];
+    this.state.movement = [offset3[0] / lastOffset[0], offset3[1] - lastOffset[1]];
   }
   axisIntent() {
     const state = this.state;
@@ -4153,4 +4503,4 @@ function mergeAdjacentRects(rects) {
   return merged;
 }
 
-export { AnnotationLayer2 as AnnotationLayer, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, usePdf, usePdfJump, useSearch, useSelectionDimensions };
+export { AnnotationHighlightLayer, AnnotationLayer2 as AnnotationLayer, AnnotationTooltip, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, useAnnotations, usePDFPageNumber, usePdf, usePdfJump, useSearch, useSelectionDimensions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anaralabs/lector",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Headless PDF viewer for React",
   "author": "andrewdr (https://github.com/andrewdoro)",
   "license": "MIT",