@anaralabs/lector 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Anara
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+<p align="center">
+  <!-- <h1 align="center"><img src="https://www.anara.ai/icons/logo.png" width="196" /></h1> -->
+  <p align="center">
+    <i>Simple primitives to compose powerful PDF viewing experiences.<br>powered by <code><a href="https://mozilla.github.io/pdf.js/">PDF.js</a></code> and <code><a href="https://reactjs.org/">React</a></code></i>
+  </p>
+</p>
+
+# `lector`
+
+A composable, headless PDF viewer toolkit for React applications, powered by `PDF.js`. Build feature-rich PDF viewing experiences with full control over the UI and functionality.
+
+[![npm version](https://badge.fury.io/js/@anaralabs%2Flector.svg)](https://www.npmjs.com/package/@anaralabs/lector)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Installation
+
+```bash
+npm install @anaralabs/lector pdfjs-dist
+
+# or with yarn
+yarn add @anaralabs/lector pdfjs-dist
+
+# or with pnpm
+pnpm add @anaralabs/lector pdfjs-dist
+```
+
+## Basic Usage
+
+Here's a simple example of how to create a basic PDF viewer:
+
+```tsx
+import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
+import "pdfjs-dist/web/pdf_viewer.css";
+
+export default function PDFViewer() {
+  return (
+    <Root
+      source="/sample.pdf"
+      className="w-full h-[500px] border overflow-hidden rounded-lg"
+      loader={<div className="p-4">Loading...</div>}
+    >
+      <Pages className="p-4">
+        <Page>
+          <CanvasLayer />
+          <TextLayer />
+        </Page>
+      </Pages>
+    </Root>
+  );
+}
+```
+
+## Features
+
+- 📱 Responsive and mobile-friendly
+- 🎨 Fully customizable UI components
+- 🔍 Text selection and search functionality
+- 📑 Page thumbnails and outline navigation
+- 🌗 First-class dark mode support
+- 🖱️ Pan and zoom controls
+- 📝 Form filling support
+- 🔗 Internal and external link handling
+
+## Contributing
+
+We welcome contributions! Key areas we're focusing on:
+
+1. Performance optimizations
+2. Accessibility improvements
+3. Mobile/touch interactions
+4. Documentation and examples
+
+## Thanks
+
+Special thanks to these open-source projects that provided inspiration:
+
+- [react-pdf-headless](https://github.com/jkgenser/react-pdf-headless)
+- [pdfreader](https://github.com/OnedocLabs/pdfreader)
+
+## License
+
+MIT © [Unriddle AI]()

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

@@ -0,0 +1,303 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Context } from 'react';
+import type { DocumentInitParameters } from 'pdfjs-dist/types/src/display/api';
+import { ForwardRefExoticComponent } from 'react';
+import { FunctionComponent } from 'react';
+import { HTMLProps } from 'react';
+import type { IPDFLinkService } from 'pdfjs-dist/types/web/interfaces';
+import { JSX } from 'react/jsx-runtime';
+import type { JSX as JSX_2 } from 'react';
+import type { PageViewport } from 'pdfjs-dist';
+import { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFPageProxy } from 'pdfjs-dist';
+import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { StoreApi } from 'zustand';
+import type { TypedArray } from 'pdfjs-dist/types/src/display/api';
+import { Virtualizer } from '@tanstack/react-virtual';
+
+export declare const AnnotationLayer: ({ renderForms, className, style, ...props }: AnnotationLayerParams & HTMLProps<HTMLDivElement>) => JSX.Element;
+
+declare interface AnnotationLayerParams {
+    /**
+     * Whether to render forms.
+     */
+    renderForms?: boolean;
+}
+
+export declare function calculateHighlightRects(pageProxy: PDFPageProxy, textMatch: TextPosition): Promise<HighlightRect[]>;
+
+export declare const cancellable: <T extends Promise<unknown>>(promise: T) => {
+    promise: T;
+    cancel: () => void;
+};
+
+export declare const CanvasLayer: ({ style, ...props }: HTMLProps<HTMLCanvasElement>) => JSX.Element;
+
+export declare const clamp: (value: number, min: number, max: number) => number;
+
+export declare const CurrentPage: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
+
+export declare const CurrentZoom: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
+
+export declare const CustomLayer: ({ children, }: {
+    children: (pageNumber: number) => JSX_2.Element;
+}) => JSX_2.Element;
+
+export declare const firstMemo: <T>(first: boolean, memo: unknown, initializer: () => T) => T;
+
+export declare const getFitWidthZoom: (containerWidth: number, viewports: PageViewport[], zoomOptions: {
+    minZoom: number;
+    maxZoom: number;
+}) => number;
+
+export declare const HighlightLayer: ForwardRefExoticComponent<HighlightLayerProps & RefAttributes<HTMLDivElement>>;
+
+declare interface HighlightLayerProps extends ComponentPropsWithoutRef<"div"> {
+    asChild?: boolean;
+}
+
+declare type HighlightRect = {
+    pageNumber: number;
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+    type?: "pixels" | "percent";
+};
+export { HighlightRect }
+export { HighlightRect as HighlightRect_alias_1 }
+
+export declare interface InitialPDFState {
+    pdfDocumentProxy: PDFDocumentProxy;
+    pageProxies: PDFPageProxy[];
+    viewports: Array<PageViewport>;
+    zoom: number;
+    isZoomFitWidth?: boolean;
+    zoomOptions?: ZoomOptions;
+}
+
+export declare class LinkService implements IPDFLinkService {
+    _pdfDocumentProxy?: PDFDocumentProxy;
+    externalLinkEnabled: boolean;
+    isInPresentationMode: boolean;
+    get pdfDocumentProxy(): PDFDocumentProxy;
+    constructor();
+    get pagesCount(): number;
+    getDestinationHash(dest: unknown[]): string;
+    getAnchorUrl(): string;
+    addLinkAttributes(link: HTMLAnchorElement, url: string, newWindow?: boolean | undefined): void;
+    goToDestination(dest: string | unknown[] | Promise<unknown[]>): Promise<void>;
+}
+
+export declare const NextPage: () => void;
+
+export declare const Outline: ({ children, ...props }: HTMLProps<HTMLUListElement> & {
+    children: ReactElement<typeof OutlineItem>;
+}) => JSX.Element;
+
+export declare const OutlineChildItems: ({ ...props }: HTMLProps<HTMLUListElement> & {
+    children?: ReactElement<typeof OutlineItem>[];
+}) => JSX.Element;
+
+export declare const OutlineItem: FunctionComponent<OutlineItemProps>;
+
+declare interface OutlineItemProps extends HTMLProps<HTMLDivElement> {
+    level?: number;
+    item?: OutlineItemType;
+    children?: ReactElement<typeof OutlineChildItems>;
+    outlineItem?: ReactElement<typeof OutlineItem>;
+}
+
+declare type OutlineItemType = NonNullable<ReturnType<typeof usePDFOutline>>[number];
+
+export declare const Page: ({ children, pageNumber, style, ...props }: HTMLProps<HTMLDivElement> & {
+    children: ReactNode;
+    pageNumber?: number;
+}) => JSX.Element;
+
+export declare const Pages: ({ children, gap, virtualizerOptions, initialOffset, onOffsetChange, ...props }: HTMLProps<HTMLDivElement> & {
+    virtualizerOptions?: {
+        overscan?: number;
+    };
+    gap?: number;
+    children: ReactElement;
+    initialOffset?: number;
+    onOffsetChange?: (offset: number) => void;
+}) => JSX.Element;
+
+declare interface PDFState {
+    pdfDocumentProxy: PDFDocumentProxy;
+    zoom: number;
+    updateZoom: (zoom: number | ((prevZoom: number) => number), isZoomFitWidth?: boolean) => void;
+    isZoomFitWidth: boolean;
+    zoomFitWidth: () => void;
+    isPinching: boolean;
+    setIsPinching: (isPinching: boolean) => void;
+    currentPage: number;
+    setCurrentPage: (pageNumber: number) => void;
+    viewports: Array<PageViewport>;
+    viewportRef: React.MutableRefObject<HTMLDivElement | null>;
+    pageProxies: PDFPageProxy[];
+    textContent: TextContent[];
+    setTextContent: (textContents: TextContent[]) => void;
+    zoomOptions: Required<ZoomOptions>;
+    virtualizer: PDFVirtualizer | null;
+    setVirtualizer: (virtualizer: PDFVirtualizer) => void;
+    highlights: HighlightRect[];
+    setHighlight: (higlights: HighlightRect[]) => void;
+    getPdfPageProxy: (pageNumber: number) => PDFPageProxy;
+    customSelectionRects: HighlightRect[];
+    setCustomSelectionRects: (rects: HighlightRect[]) => void;
+}
+
+export declare const PDFStore: {
+    useContext: () => StoreApi<PDFState>;
+    Context: Context<StoreApi<PDFState>>;
+    Provider: (props: {
+        children?: React.ReactNode;
+        initialValue: InitialPDFState;
+    }) => JSX.Element;
+};
+
+export declare type PDFVirtualizer = Virtualizer<any, any>;
+
+export declare const PreviousPage: () => void;
+
+export declare const Root: ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & usePDFDocumentParams & {
+loader?: ReactNode;
+}, "ref"> & RefAttributes<unknown>>;
+
+export declare const Search: ({ children, loading }: SearchProps) => ReactNode;
+
+declare interface SearchOptions {
+    threshold?: number;
+    limit?: number;
+    textSize?: number;
+}
+
+declare interface SearchProps {
+    children: React.ReactNode;
+    loading?: React.ReactNode;
+}
+
+export declare interface SearchResult {
+    pageNumber: number;
+    text: string;
+    score: number;
+    matchIndex: number;
+    isExactMatch: boolean;
+}
+
+export declare interface SearchResults {
+    exactMatches: SearchResult[];
+    fuzzyMatches: SearchResult[];
+    hasMoreResults: boolean;
+}
+
+export declare const SelectionTooltip: ({ children }: SelectionTooltipProps) => JSX.Element;
+
+declare interface SelectionTooltipProps {
+    children: React_2.ReactNode;
+}
+
+export declare type Source = string | URL | TypedArray | ArrayBuffer | DocumentInitParameters;
+
+declare type TextContent = {
+    pageNumber: number;
+    text: string;
+};
+
+export declare const TextLayer: ({ className, style, ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
+
+declare interface TextPosition {
+    pageNumber: number;
+    text: string;
+    matchIndex: number;
+}
+
+export declare const Thumbnail: ({ pageNumber, ...props }: HTMLProps<HTMLCanvasElement> & {
+    pageNumber?: number;
+}) => JSX.Element;
+
+export declare const Thumbnails: ({ children, ...props }: HTMLProps<HTMLDivElement> & {
+    children: ReactElement<typeof Thumbnail>;
+}) => JSX.Element;
+
+export declare const TotalPages: ({ ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
+
+declare const usePdf: <T>(selector: (state: PDFState) => T) => T;
+export { usePdf }
+export { usePdf as usePdf_alias_1 }
+
+export declare const usePDFDocumentContext: ({ onDocumentLoad, source, initialRotation, isZoomFitWidth, zoom, zoomOptions, }: usePDFDocumentParams) => {
+    initialState: InitialPDFState | null | undefined;
+};
+
+export declare interface usePDFDocumentParams {
+    /**
+     * The URL of the PDF file to load.
+     */
+    source: Source;
+    onDocumentLoad?: ({ proxy, source, }: {
+        proxy: PDFDocumentProxy;
+        source: Source;
+    }) => void;
+    initialRotation?: number;
+    isZoomFitWidth?: boolean;
+    zoom?: number;
+    zoomOptions?: ZoomOptions;
+}
+
+export declare const usePdfJump: () => {
+    jumpToPage: (pageIndex: number, options?: {
+        align?: "start" | "center" | "end" | "auto";
+        behavior?: "auto" | "smooth";
+    }) => void;
+    jumpToOffset: (offset: number) => void;
+    jumpToHighlightRects: (rects: HighlightRect[], type: "pixels" | "percent", align?: "start" | "center", additionalOffset?: number) => void;
+};
+
+declare const usePDFOutline: () => {
+    title: string;
+    bold: boolean;
+    italic: boolean;
+    color: Uint8ClampedArray;
+    dest: string | Array<any> | null;
+    url: string | null;
+    unsafeUrl: string | undefined;
+    newWindow: boolean | undefined;
+    count: number | undefined;
+    items: Array<any>;
+}[] | undefined;
+
+export declare const useSearch: () => {
+    textContent: {
+        pageNumber: number;
+        text: string;
+    }[];
+    keywords: string[];
+    searchResults: SearchResults;
+    search: (searchText: string, options?: SearchOptions) => SearchResults;
+};
+
+export declare const useSelectionDimensions: () => {
+    getDimension: () => {
+        highlights: HighlightRect[];
+        text: string;
+        isCollapsed: boolean;
+    } | undefined;
+};
+
+export declare const ZoomIn: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;
+
+export declare interface ZoomOptions {
+    minZoom?: number;
+    maxZoom?: number;
+}
+
+export declare const ZoomOut: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;
+
+export { }

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+export { AnnotationLayer } from './_tsup-dts-rollup.js';
+export { CanvasLayer } from './_tsup-dts-rollup.js';
+export { CustomLayer } from './_tsup-dts-rollup.js';
+export { HighlightLayer } from './_tsup-dts-rollup.js';
+export { TextLayer } from './_tsup-dts-rollup.js';
+export { Outline } from './_tsup-dts-rollup.js';
+export { OutlineChildItems } from './_tsup-dts-rollup.js';
+export { OutlineItem } from './_tsup-dts-rollup.js';
+export { Page } from './_tsup-dts-rollup.js';
+export { CurrentPage } from './_tsup-dts-rollup.js';
+export { NextPage } from './_tsup-dts-rollup.js';
+export { PreviousPage } from './_tsup-dts-rollup.js';
+export { TotalPages } from './_tsup-dts-rollup.js';
+export { Pages } from './_tsup-dts-rollup.js';
+export { Root } from './_tsup-dts-rollup.js';
+export { Search } from './_tsup-dts-rollup.js';
+export { SelectionTooltip } from './_tsup-dts-rollup.js';
+export { Thumbnail } from './_tsup-dts-rollup.js';
+export { Thumbnails } from './_tsup-dts-rollup.js';
+export { CurrentZoom } from './_tsup-dts-rollup.js';
+export { ZoomIn } from './_tsup-dts-rollup.js';
+export { ZoomOut } from './_tsup-dts-rollup.js';
+export { usePdfJump } from './_tsup-dts-rollup.js';
+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 { LinkService } from './_tsup-dts-rollup.js';
+export { useSelectionDimensions } from './_tsup-dts-rollup.js';
+export { HighlightRect } from './_tsup-dts-rollup.js';
+export { usePdf } from './_tsup-dts-rollup.js';