### Start Development Server

Source: https://github.com/anaralabs/lector/blob/main/examples/basic/README.md

Start the development server to run the Lector basic example locally.

```bash
pnpm dev
```

--------------------------------

### Complete Example with All Options

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

A comprehensive example demonstrating the integration of Root, Pages, Page, and AnnotationLayer with various configuration options.

```APIDOC
## Complete Example

### Description
This example shows a fully configured PDF viewer with links, page navigation, and other components.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
See individual component documentation for parameters.

### Request Example
```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  AnnotationLayer,
  CurrentPage,
  TotalPages,
} from "@anaralabs/lector";
import { GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";
import "pdfjs-dist/web/pdf_viewer.css";

GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/legacy/build/pdf.worker.mjs",
  import.meta.url
).toString();

export default function PdfWithLinks() {
  return (
    <div className="flex flex-col h-screen">
      <Root
        source="/document-with-links.pdf"
        className="flex-1 flex flex-col border rounded-lg overflow-hidden"
        isZoomFitWidth={true}
      >
        <div className="bg-white border-b p-3">
          <span className="text-sm">
            Page <CurrentPage /> of <TotalPages />
          </span>
        </div>

        <Pages className="flex-1 p-4 overflow-auto">
          <Page>
            <CanvasLayer />
            <TextLayer />
            <AnnotationLayer
              externalLinksEnabled={true}
              jumpOptions={{
                behavior: "smooth",
                align: "start",
              }}
            />
          </Page>
        </Pages>
      </Root>
    </div>
  );
}
```

### Response
N/A (Component Usage)
```

--------------------------------

### Lector Local Development Setup

Source: https://github.com/anaralabs/lector/blob/main/README.md

Steps to set up local development for Lector using PNPM and Yalc. This involves installing dependencies, publishing the package locally, and running the development server.

```bash
# navigate to lector package folder and install dependencies
pnpm i
# when you first start development, make sure you publish the package locally
yalc publish
# and run the project in development mode to start a watcher that rebuilds the project and pushes the changes locally on save
pnpm dev
```

--------------------------------

### Basic PDF Viewer Component

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/installation.mdx

Create a basic PDF viewer component to verify the Lector installation. This example demonstrates the core components for rendering a PDF.

```tsx
import { Root, Pages, Page, CanvasLayer } from "@anaralabs/lector";

function BasicPDFViewer() {
  return (
    <Root source='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Install Dependencies

Source: https://github.com/anaralabs/lector/blob/main/examples/basic/README.md

Install the necessary project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Run Development Server

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/README.md

Commands to start the Next.js development server using npm, pnpm, or yarn.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

--------------------------------

### Complete PDF Viewer with Links and Forms

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

A comprehensive example demonstrating a PDF viewer with enabled external links, smooth internal navigation, and form rendering. Includes PDF.js worker setup and basic UI elements.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  AnnotationLayer,
  CurrentPage,
  TotalPages,
} from "@anaralabs/lector";
import { GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";
import "pdfjs-dist/web/pdf_viewer.css";

GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/legacy/build/pdf.worker.mjs",
  import.meta.url
).toString();

export default function PdfWithLinks() {
  return (
    <div className="flex flex-col h-screen">
      <Root
        source="/document-with-links.pdf"
        className="flex-1 flex flex-col border rounded-lg overflow-hidden"
        isZoomFitWidth={true}
      >
        <div className="bg-white border-b p-3">
          <span className="text-sm">
            Page <CurrentPage /> of <TotalPages />
          </span>
        </div>

        <Pages className="flex-1 p-4 overflow-auto">
          <Page>
            <CanvasLayer />
            <TextLayer />
            <AnnotationLayer
              externalLinksEnabled={true}
              jumpOptions={{
                behavior: "smooth",
                align: "start",
              }}
            />
          </Page>
        </Pages>
      </Root>
    </div>
  );
}

```

--------------------------------

### Create a Basic PDF Viewer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

A minimal example demonstrating how to set up a basic PDF viewer using Lector's core components.

```tsx
import { Root, Pages, Page, CanvasLayer, TextLayer } from "@anaralabs/lector";

function PDFViewer() {
  return (
    <Root source='/sample.pdf' className='w-full h-[600px] border rounded-lg overflow-hidden'>
      <Pages className='p-4'>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Install Lector and pdfjs-dist

Source: https://github.com/anaralabs/lector/blob/main/README.md

Install the Lector package and pdfjs-dist using your preferred package manager.

```bash
npm install @anaralabs/lector pdfjs-dist
```

```bash
yarn add @anaralabs/lector pdfjs-dist
```

```bash
pnpm add @anaralabs/lector pdfjs-dist
```

--------------------------------

### Install Lector and PDF.js

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/installation.mdx

Install the main Lector package and its peer dependency, pdfjs-dist, using your preferred package manager.

```bash
# Using npm
npm install @anaralabs/lector pdfjs-dist
```

```bash
# Using yarn
yarn add @anaralabs/lector pdfjs-dist
```

```bash
# Using pnpm
pnpm add @anaralabs/lector pdfjs-dist
```

```bash
# Using bun
bun add @anaralabs/lector pdfjs-dist
```

--------------------------------

### Basic PDF Viewer Setup

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Sets up a basic PDF viewer with essential layers including annotations. Ensure the source prop points to your PDF file.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  AnnotationLayer,
} from "@anaralabs/lector";

export default function MyPdfViewer() {
  return (
    <Root source="/my-document.pdf">
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
          <AnnotationLayer />
        </Page>
      </Pages>
    </Root>
  );
}

```

--------------------------------

### Basic PDF Viewer Setup with Highlight Select

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/select.mdx

Sets up a PDF viewer with text selection and highlighting capabilities using the Root component. Ensure the source prop points to your PDF file.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  HighlightLayer,
  useSelectionDimensions,
  usePdf,
} from "@anaralabs/lector";

const PdfHighlightSelect = () => (
  <Root
    source="/pdf/document.pdf"
    className="flex bg-gray-50 h-[500px]"
    loader={<div className="p-4">Loading...</div>}
  >
    <HighlightLayerContent />
  </Root>
);

export default PdfHighlightSelect;
```

--------------------------------

### Install Yalc Globally

Source: https://github.com/anaralabs/lector/blob/main/README.md

Install Yalc globally to manage local package development and testing across different package managers.

```bash
pnpm i yalc -g
```

--------------------------------

### Clone Lector Repository

Source: https://github.com/anaralabs/lector/blob/main/examples/basic/README.md

Clone the Lector repository to your local machine. Navigate into the basic example directory.

```bash
git clone https://github.com/anaralabs/lector.git
cd lector/examples/basic
```

--------------------------------

### Basic PDF Viewer Setup with Lector

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/basic.mdx

Implement a minimal PDF viewer with basic rendering. Supports dark mode, loading states, and layered canvas/text rendering. Ensure the PDF file is accessible at the specified URL.

```tsx
"use client";

import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
import React from "react";
import "@/lib/setup";

const fileUrl = "/pdf/pathways.pdf";

const Basic = () => {
  return (
    <Root
      source={fileUrl}
      className='w-full h-[500px] border overflow-hidden rounded-lg'
      loader={<div className='p-4'>Loading...</div>}>
      <Pages className='dark:invert-[94%] dark:hue-rotate-180 dark:brightness-[80%] dark:contrast-[228%]'>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
};

export default Basic;
```

--------------------------------

### Interactive Highlights with usePdfJump Hook

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/highlight.mdx

Make highlights interactive by using the `usePdfJump` hook to navigate to specific highlight areas. This example demonstrates handling clicks on example elements to trigger navigation.

```tsx
"use client";

const HighlightLayerContent = () => {
  const { jumpToHighlightRects } = usePdfJump();
  const [selectedExample, setSelectedExample] = useState<string | null>(null);

  const handleExampleClick = async (example: (typeof examples)[0]) => {
    setSelectedExample(example.text);
    jumpToHighlightRects(example.highlights, "pixels");
  };

  return (
    <div className="flex">
      <div className="flex-1">
        <Pages className="p-4">
          <Page>
            <CanvasLayer />
            <TextLayer />
            <HighlightLayer className="bg-yellow-200/70" />
          </Page>
        </Pages>
      </div>
      <div className="w-80 p-4">
        {examples.map((example) => (
          <div
            key={example.id}
            onClick={() => handleExampleClick(example)}
            className={`p-3 rounded ${
              selectedExample === example.text
                ? "bg-yellow-100"
                : "hover:bg-gray-50"
            }`}
          >
            <h3>{example.title}</h3>
            <p>{example.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
};
```

--------------------------------

### Basic PDF Highlight Layer Setup

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/highlight.mdx

Integrate the HighlightLayer component within the Lector PDF viewer structure to display highlights. Ensure all necessary Lector components are imported.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  HighlightLayer,
} from "@anaralabs/lector";

export default function MyPdfViewer() {
  return (
    <Root source="/my-document.pdf">
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
          <HighlightLayer className="bg-yellow-200/70" />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Configure Zoom Limits

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/zoom-control.mdx

Customize the minimum and maximum zoom levels for the PDF viewer by passing the `zoomOptions` prop to the `Root` component. This example sets a minimum zoom of 10% and a maximum zoom of 2000%.

```tsx
<Root
  zoomOptions={{
    minZoom: 0.1,  // Allow 10% minimum zoom
    maxZoom: 20,   // Allow 2000% maximum zoom
  }}
>
```

--------------------------------

### Custom Styling for HighlightLayer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/highlight.mdx

Apply custom styles to the HighlightLayer component using the `className` prop. Examples show how to set background color, opacity, and rounded corners.

```tsx
// Yellow highlight with 70% opacity
<HighlightLayer className="bg-yellow-200/70" />
```

```tsx
// Custom color
<HighlightLayer className="bg-blue-300/50" />
```

```tsx
// Multiple styles
<HighlightLayer className="bg-purple-200/60 rounded-sm" />
```

--------------------------------

### Highlight Layer Implementation for Text Selection

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/select.mdx

Component to manage text selection and highlighting logic. It uses hooks to get selection dimensions and set highlights on the PDF.

```tsx
const HighlightLayerContent = () => {
  const selectionDimensions = useSelectionDimensions();
  const setHighlights = usePdf((state) => state.setHighlight);

  const handleHighlight = () => {
    const dimension = selectionDimensions.getDimension();
    if (dimension && !dimension.isCollapsed) {
      setHighlights(dimension.highlights);
    }
  };

  return (
    <Pages className="p-4 w-full">
      <Page>
        {selectionDimensions && <CustomSelect onHighlight={handleHighlight} />}
        <CanvasLayer />
        <TextLayer />
        <HighlightLayer className="bg-yellow-200/70" />
      </Page>
    </Pages>
  );
};
```

--------------------------------

### Styling Link Hovers with CSS

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Customizes the visual appearance of clickable links when hovered over using CSS. This example applies a yellow background and shadow effect.

```css
.annotationLayer .linkAnnotation > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

```

--------------------------------

### Create PDF Viewer with Custom Navigation

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/page-navigation.mdx

Set up a PDF viewer component that includes custom navigation controls. Ensure the source prop points to your PDF document and provide a loader component for the initial loading state.

```tsx
"use client";

import { Root, Pages, Page, CanvasLayer, TextLayer } from "@anaralabs/lector";
import PageNavigationButtons from "./ui/page-navigation-buttons";

const PageNavigation = () => {
  return (
    <Root
      source="/pdf/document.pdf"
      className="flex bg-gray-50 h-[500px]"
      loader={<div className="p-4">Loading...</div>}
    >
      <div className="relative flex-1">
        <Pages className="p-4">
          <Page>
            <CanvasLayer />
            <TextLayer />
          </Page>
        </Pages>
        <PageNavigationButtons />
      </div>
    </Root>
  );
};

export default PageNavigation;
```

--------------------------------

### Root Component Configuration

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

Configure the main container for the PDF viewer. Specify the PDF source, styling, and optional callbacks for loading and error handling.

```tsx
<Root
  source='/path/to/pdf' // URL or path to PDF file
  className='...' // Container styling
  loader={<Loading />} // Custom loading component
  onLoad={handleLoad} // Called when PDF is loaded
  onError={handleError} // Called on load error
>
  {/* Child components */}
</Root>
```

--------------------------------

### Set Up PDF.js Worker

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

Configure the PDF.js worker source before using Lector components. This is essential for PDF rendering.

```tsx
import { GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";
import "pdfjs-dist/web/pdf_viewer.css";

// Set up the worker
GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/legacy/build/pdf.worker.mjs",
  import.meta.url
).toString();
```

--------------------------------

### PDF Viewer with Thumbnails and Zoom Controls

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/thumbnails.mdx

Implement a PDF viewer with a toggleable thumbnail sidebar and zoom functionality. Requires importing Lector components and managing UI state for thumbnail visibility.

```tsx
"use client";

import {
  CanvasLayer,
  CurrentPage,
  CurrentZoom,
  Page,
  Pages,
  Root,
  TextLayer,
  Thumbnail,
  Thumbnails,
  ZoomIn,
  ZoomOut,
} from "@anaralabs/lector";
import { cn } from "fumadocs-ui/components/api";
import { useState } from "react";

const WithThumbnails = () => {
  const [showThumbnails, setShowThumbnails] = useState(true);

  return (
    <Root
      source="/pdf/document.pdf"
      className="bg-gray-100 border rounded-md overflow-hidden relative h-[700px] flex flex-col justify-stretch"
      loader={<div className="p-4">Loading...</div>}
    >
      {/* Control Bar */}
      <div className="bg-gray-100 border-b p-1 flex items-center justify-center text-sm text-gray-600 gap-2">
        <button
          onClick={() => setShowThumbnails((show) => !show)}
          className="px-2 hover:bg-gray-300 hover:text-gray-900 py-1 rounded-full"
        >
          {showThumbnails ? "Hide" : "Show"} Thumbnails
        </button>
        <span className="flex-grow" />
        Page
        <CurrentPage className="bg-white rounded-full px-3 py-1 border text-center" />
        Zoom
        <ZoomOut className="px-3 py-1 -mr-2 text-gray-900">-</ZoomOut>
        <CurrentZoom className="bg-white rounded-full px-3 py-1 border text-center w-16" />
        <ZoomIn className="px-3 py-1 -ml-2 text-gray-900">+</ZoomIn>
        <span className="flex-grow" />
      </div>

      {/* Main Content */}
      <div
        className={cn(
          "basis-0 grow min-h-0 relative grid",
          "transition-all duration-300",
          showThumbnails ? "grid-cols-[24rem,1fr]" : "grid-cols-[0,1fr]"
        )}
      >
        {/* Thumbnails Panel */}
        <div className="overflow-y-auto overflow-x-hidden">
          <div className="w-96 overflow-x-hidden">
            <Thumbnails className="flex flex-col gap-4 items-center py-4">
              <Thumbnail className="transition-all w-48 hover:shadow-lg hover:outline hover:outline-gray-300" />
            </Thumbnails>
          </div>
        </div>

        {/* PDF Viewer */}
        <Pages className="p-4 h-full">
          <Page>
            <CanvasLayer />
            <TextLayer />
          </Page>
        </Pages>
      </div>
    </Root>
  );
};

export default WithThumbnails;

```

--------------------------------

### Basic PDF Form Viewer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/pdf-form.mdx

Set up a basic interactive PDF form viewer with submission handling and a side panel for displaying form values. Requires the PdfFormLayer component.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  AnnotationLayer,
} from "@anaralabs/lector";
import { FormEvent } from "react";

type FormValues = {
  [key: string]: FormDataEntryValue;
} | null;

export default function PdfForm() {
  const [formValues, setFormValues] = useState<FormValues>(null);

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const values = Object.fromEntries(formData.entries());
    setFormValues(values);
  };

  return (
    <div className="flex">
      <form onSubmit={handleSubmit}>
        <button type="submit">Get form values</button>
        <Root source="/my-form.pdf">
          <Pages>
            <Page>
              <CanvasLayer />
              <TextLayer />
              <AnnotationLayer />
            </Page>
          </Pages>
        </Root>
      </form>
      <div className="border-l">
        <h2>Form Values</h2>
        {formValues && <pre>{JSON.stringify(formValues, null, 2)}</pre>}
      </div>
    </div>
  );
}

```

--------------------------------

### Configure PDF.js Worker (App Router)

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/installation.mdx

Set up the PDF.js worker source in your PDF viewer component for the App Router. Ensure the worker path is correctly resolved using import.meta.url.

```tsx
import { GlobalWorkerOptions } from "pdfjs-dist/legacy/build/pdf.mjs";
import "pdfjs-dist/web/pdf_viewer.css";

// Set up the worker
GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/legacy/build/pdf.worker.mjs",
  import.meta.url
).toString();

export function PDFViewer() {
  return (
    <Root source='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Implement PDF Viewer with Zoom Controls

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/zoom-control.mdx

This component renders a PDF viewer with interactive zoom controls. It requires the `@anaralabs/lector` library and configures zoom limits via `zoomOptions`. Ensure the `source` prop points to a valid PDF file.

```tsx
"use client";

import {
  CanvasLayer,
  CurrentZoom,
  Page,
  Pages,
  Root,
  TextLayer,
  ZoomIn,
  ZoomOut,
} from "@anaralabs/lector";

const ViewerZoomControl = () => {
  return (
    <Root
      source="/pdf/document.pdf"
      className="bg-gray-100 border rounded-md overflow-hidden relative h-[500px] flex flex-col justify-stretch"
      loader={<div className="p-4">Loading...</div>}
      zoomOptions={{
        minZoom: 0.5, // 50% minimum zoom
        maxZoom: 10, // 1000% maximum zoom
      }}
    >
      <div className="bg-gray-100 border-b p-1 flex items-center justify-center text-sm text-gray-600 gap-2">
        Zoom
        <ZoomOut className="px-3 py-1 -mr-2 text-gray-900">-</ZoomOut>
        <CurrentZoom className="bg-white rounded-full px-3 py-1 border text-center w-16" />
        <ZoomIn className="px-3 py-1 -ml-2 text-gray-900">+</ZoomIn>
      </div>
      <Pages className="p-4 h-full">
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
};

export default ViewerZoomControl;
```

--------------------------------

### AnnotationLayer Configuration Options

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Customize link behavior and navigation options for the AnnotationLayer component.

```APIDOC
## AnnotationLayer Configuration Options

### Description
Customize link behavior and navigation options for the AnnotationLayer component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **externalLinksEnabled** (boolean) - Optional - Controls whether external links (http/https) should be clickable. Defaults to `true`.
- **jumpOptions** (object) - Optional - Customize how internal page links navigate.
  - **behavior** (string) - Optional - Specifies the scroll animation behavior. Accepts `"smooth"` or `"auto"`. Defaults to `"smooth"`.
  - **align** (string) - Optional - Specifies the alignment of the target page in the viewport. Accepts `"start"`, `"center"`, or `"end"`. Defaults to `"start"`.
- **renderForms** (boolean) - Optional - Enables rendering of interactive form fields. Defaults to `true`.

### Request Example
```tsx
<AnnotationLayer
  externalLinksEnabled={true}
  jumpOptions={{
    behavior: "smooth", // or "auto"
    align: "start",     // or "center", "end"
  }}
  renderForms={true}
/>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Consumer Project Yalc Integration

Source: https://github.com/anaralabs/lector/blob/main/README.md

Add the locally published Lector package to your consumer project using Yalc. This can be done by adding it to package.json or linking it directly.

```bash
# add local package to your package.json of the consumer project using yalc
yalc add @anaralabs/lector
# or if you don't want to add the yalc package in your package.json
yalc link @anaralabs/lector
```

--------------------------------

### Basic PDF Viewer Component

Source: https://github.com/anaralabs/lector/blob/main/README.md

A simple React component demonstrating the basic usage of Lector to render a PDF. Ensure 'pdfjs-dist/web/pdf_viewer.css' is imported for default styling.

```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>
  );
}
```

--------------------------------

### Lector PDF Viewer with Custom Search UI

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/search.mdx

This component integrates Lector's core viewer with a custom search interface. It utilizes hooks for PDF handling, search, and debouncing user input to provide a real-time search experience. Ensure Lector's `Root` component wraps the viewer and search components.

```tsx
"use client";

import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  HighlightLayer,
  Search,
} from "@anaralabs/lector";
import { useDebounce } from "use-debounce";
import {
  calculateHighlightRects,
  SearchResult,
  usePdf,
  usePdfJump,
  useSearch,
} from "@anaralabs/lector";
import { useEffect, useState } from "react";

// Define the TextPosition interface
interface TextPosition {
  pageNumber: number;
  text: string;
  matchIndex: number;
  searchText?: string;
}

interface ResultItemProps {
  result: SearchResult;
  originalSearchText: string;
}

// Exact term highlighting component
const ResultItem = ({ result, originalSearchText }: ResultItemProps) => {
  const { jumpToHighlightRects } = usePdfJump();
  const getPdfPageProxy = usePdf((state) => state.getPdfPageProxy);

  const onClick = async () => {
    const pageProxy = getPdfPageProxy(result.pageNumber);
    const rects = await calculateHighlightRects(pageProxy, {
      pageNumber: result.pageNumber,
      text: result.text,
      matchIndex: result.matchIndex,
      searchText: originalSearchText, // Pass searchText for exact term highlighting
    });
    jumpToHighlightRects(rects, "pixels");
  };

  return (
    <div
      className="flex py-2 hover:bg-gray-50 flex-col cursor-pointer"
      onClick={onClick}
    >
      <div className="flex-1 min-w-0">
        <p className="text-sm text-gray-900">{result.text}</p>
      </div>
      <div className="flex items-center gap-4 text-sm text-gray-500">
        <span className="ml-auto">Page {result.pageNumber}</span>
      </div>
    </div>
  );
};

// Search UI component
function SearchUI() {
  const [searchText, setSearchText] = useState("");
  const [debouncedSearchText] = useDebounce(searchText, 500);
  const [limit, setLimit] = useState(5);
  const { searchResults: results, search } = useSearch();

  useEffect(() => {
    setLimit(5);
    search(debouncedSearchText, { limit: 5 });
  }, [debouncedSearchText]);

  const handleLoadMore = async () => {
    const newLimit = limit + 5;
    await search(debouncedSearchText, { limit: newLimit });
    setLimit(newLimit);
  };

  return (
    <div className="flex flex-col w-80 h-full">
      <div className="px-4 py-4 border-b border-gray-200 bg-white">
        <input
          type="text"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          placeholder="Search in document..."
          className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
        />
      </div>
      <div className="flex-1 overflow-y-auto px-4">
        <div className="py-4">
          {!searchText ? null : !results.exactMatches.length &&
            !results.fuzzyMatches.length ? (
            <div className="text-center py-4 text-gray-500">
              No results found
            </div>
          ) : (
            <div className="flex flex-col gap-4">
              {results.exactMatches.length > 0 && (
                <div className="space-y-2">
                  <h3 className="text-sm font-medium text-gray-700">
                    Exact Matches
                  </h3>
                  <div className="divide-y divide-gray-100">
                    {results.exactMatches.map((result) => (
                      <ResultItem
                        key={`${result.pageNumber}-${result.matchIndex}`}
                        result={result}
                        originalSearchText={searchText}
                      />
                    ))}
                  </div>
                </div>
              )}

              {results.hasMoreResults && (
                <button
                  onClick={handleLoadMore}
                  className="w-full py-2 px-4 text-sm text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors"
                >
                  Load More Results
                </button>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Main component
export default function CustomSearchExample() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col">
        <h3 className="text-lg font-semibold mb-2">
          Exact Search Term Highlighting
        </h3>
        <Root
          source="/pdf/pathways.pdf"
          className="flex bg-gray-50 h-[500px]"
          loader={<div className="p-4">Loading...</div>}
        >
          <Search>
            <SearchUI />
          </Search>
          <Pages className="p-4 w-full">
            <Page>
              <CanvasLayer />
              <TextLayer />
              <HighlightLayer className="bg-yellow-200/70" />
            </Page>
          </Pages>
        </Root>
      </div>
    </div>
  );
}

```

--------------------------------

### Styling Link Hovers

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Customize the visual appearance of link hovers using CSS.

```APIDOC
## Styling Link Hovers

### Description
Links are automatically styled with hover effects. You can customize this appearance using CSS selectors targeting the annotation layer.

### Method
N/A (CSS Styling)

### Endpoint
N/A (CSS Styling)

### Parameters
N/A

### Request Example
```css
.annotationLayer .linkAnnotation > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}
```

### Response
N/A (CSS Styling)
```

--------------------------------

### Implement Custom Navigation Buttons

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/page-navigation.mdx

Implement custom navigation controls including previous/next page buttons, direct page number input, and smooth transitions. This component utilizes hooks from @anaralabs/lector for PDF interaction.

```tsx
import { usePdf, usePdfJump } from "@anaralabs/lector";
import { useEffect, useState } from "react";
import { Button } from "./button";

const PageNavigationButtons = () => {
  const pages = usePdf((state) => state.pdfDocumentProxy?.numPages);
  const currentPage = usePdf((state) => state.currentPage);
  const [pageNumber, setPageNumber] = useState<string | number>(currentPage);
  const { jumpToPage } = usePdfJump();

  const handlePreviousPage = () => {
    if (currentPage > 1) {
      jumpToPage(currentPage - 1, { behavior: "auto" });
    }
  };

  const handleNextPage = () => {
    if (currentPage < pages) {
      jumpToPage(currentPage + 1, { behavior: "auto" });
    }
  };

  useEffect(() => {
    setPageNumber(currentPage);
  }, [currentPage]);

  return (
    <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex items-center gap-3 bg-white/90 backdrop-blur-sm rounded-full shadow-lg px-4 py-2.5 border border-gray-200">
      <Button
        onClick={handlePreviousPage}
        disabled={currentPage <= 1}
        className="rounded-full disabled:opacity-40"
        aria-label="Previous page"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
        >
          <path d="m15 18-6-6 6-6" />
        </svg>
      </Button>

      <div className="flex items-center gap-2">
        <input
          type="number"
          value={pageNumber}
          onChange={(e) => setPageNumber(e.target.value)}
          onBlur={(e) => {
            const value = Number(e.target.value);
            if (value >= 1 && value <= pages && currentPage !== value) {
              jumpToPage(value, { behavior: "auto" });
            } else {
              setPageNumber(currentPage);
            }
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.currentTarget.blur();
            }
          }}
          className="w-12 h-7 text-center bg-gray-50 border rounded-md text-sm focus:ring-2"
        />
        <span className="text-sm text-gray-500 font-medium">
          / {pages || 1}
        </span>
      </div>

      <Button
        onClick={handleNextPage}
        disabled={currentPage >= pages}
        className="rounded-full disabled:opacity-40"
        aria-label="Next page"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
        >
          <path d="m9 18 6-6-6-6" />
        </svg>
      </Button>
    </div>
  );
};

export default PageNavigationButtons;
```

--------------------------------

### Import Required Styles

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/installation.mdx

Import the default PDF viewer CSS styles into your main CSS file or component to ensure proper rendering.

```tsx
// Import the default PDF viewer styles
import "pdfjs-dist/web/pdf_viewer.css";
```

--------------------------------

### PDF Viewer Loading State

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/highlight.mdx

Provide a custom loading indicator for the PDF viewer using the `loader` prop on the `Root` component. This improves user experience during PDF loading.

```tsx
<Root
  source={fileUrl}
  className="bg-gray-50"
  loader={<div className="p-4">Loading PDF...</div>}
>
  <HighlightLayerContent />
</Root>
```

--------------------------------

### Configure Internal Link Navigation

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Customizes the scrolling behavior and alignment when navigating to internal PDF links. Use 'smooth' for animated scrolling or 'auto' for instant jumps.

```tsx
<AnnotationLayer
  jumpOptions={{
    behavior: "smooth", // or "auto"
    align: "start",     // or "center", "end"
  }}
/>

```

--------------------------------

### Enable Form Rendering in AnnotationLayer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Configures the AnnotationLayer to render interactive form fields present in the PDF. Defaults to true, enabling form interaction.

```tsx
<AnnotationLayer
  renderForms={true} // default: true
/>

```

--------------------------------

### Full Context Highlighting in PDF

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/search.mdx

Use this to highlight the entire text chunk that contains the search term. Omit the `searchText` parameter from `calculateHighlightRects` to enable this behavior.

```tsx
// Highlight the entire text chunk containing the search term
const ResultItemFullHighlight = ({ result }) => {
  const onClick = async () => {
    const rects = await calculateHighlightRects(pageProxy, {
      pageNumber: result.pageNumber,
      text: result.text,
      matchIndex: result.matchIndex,
      // No searchText parameter = highlight full context
    });
    jumpToHighlightRects(rects, "pixels");
  };
};
```

--------------------------------

### Link Service API

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Access and control the LinkService directly for advanced programmatic interactions.

```APIDOC
## Link Service API

### Description
For advanced use cases, you can access the `LinkService` directly to programmatically control PDF navigation and link behavior.

### Method
N/A (Hook Usage)

### Endpoint
N/A (Hook Usage)

### Parameters
#### Hook: `usePDFLinkService()`
Returns an instance of the `LinkService`.

#### LinkService Properties & Methods
- **page** (number) - Sets or gets the current page number.
- **goToDestination(dest: string)** - Navigates to a specific PDF destination.
- **externalLinkEnabled** (boolean) - Enables or disables external link handling.

### Request Example
```tsx
import { usePDFLinkService } from "@anaralabs/lector";

function MyComponent() {
  const linkService = usePDFLinkService();

  // Navigate to a specific page programmatically
  const goToPage = (pageNumber: number) => {
    linkService.page = pageNumber;
  };

  // Navigate to a destination
  const goToDestination = async (dest: string) => {
    await linkService.goToDestination(dest);
  };

  // Enable/disable external links
  linkService.externalLinkEnabled = true;

  return (
    // Your component JSX
  );
}
```

### Response
N/A (Hook Usage)
```

--------------------------------

### Accessing PDF Link Service API

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Provides programmatic control over PDF link navigation and settings using the `usePDFLinkService` hook. Allows direct manipulation of page navigation and link behaviors.

```tsx
import { usePDFLinkService } from "@anaralabs/lector";

function MyComponent() {
  const linkService = usePDFLinkService();

  // Navigate to a specific page programmatically
  const goToPage = (pageNumber: number) => {
    linkService.page = pageNumber;
  };

  // Navigate to a destination
  const goToDestination = async (dest: string) => {
    await linkService.goToDestination(dest);
  };

  // Enable/disable external links
  linkService.externalLinkEnabled = true;

  return (
    // Your component JSX
  );
}

```

--------------------------------

### Configure PDF.js Worker (Pages Directory)

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/installation.mdx

Configure the PDF.js worker by importing the minified worker file directly in your PDF viewer component when using the Pages Directory.

```tsx
import { Root, Pages, Page, CanvasLayer } from "@anaralabs/lector";
import "pdfjs-dist/legacy/build/pdf.worker.min.mjs";
import "pdfjs-dist/web/pdf_viewer.css";

export function PDFViewer() {
  return (
    <Root source='/sample.pdf'>
      <Pages>
        <Page>
          <CanvasLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Highlight Rectangle Definition (Pixels)

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/highlight.mdx

Define highlight areas using pixel coordinates. This format is required when using the `jumpToHighlightRects` function with the 'pixels' unit.

```tsx
const highlight = {
  pageNumber: 1,
  left: 63.069,
  top: 438.736,
  width: 465.831,
  height: 10.888,
};
```

--------------------------------

### Pages Component Usage

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

The Pages component manages page layout and virtualization within the viewer. Apply custom styling using the className prop.

```tsx
<Pages
  className='...'
>
  {/* Page component */}
</Pages>
```

--------------------------------

### AnnotationLayer Basic Usage

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

The AnnotationLayer component automatically handles clickable links in PDFs, including both internal page references and external URLs.

```APIDOC
## Basic Usage of AnnotationLayer

### Description
The `AnnotationLayer` component automatically handles clickable links in PDFs, including both internal page references and external URLs.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A

### Request Example
```tsx
import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  AnnotationLayer,
} from "@anaralabs/lector";

export default function MyPdfViewer() {
  return (
    <Root source="/my-document.pdf">
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
          <AnnotationLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

### Response
N/A (Component Usage)
```

--------------------------------

### Custom Selection Tooltip Component

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/select.mdx

A custom tooltip component that appears when text is selected, providing a button to trigger highlighting. It wraps a button with the SelectionTooltip provider.

```tsx
import { SelectionTooltip } from "@anaralabs/lector";

export const CustomSelect = ({ onHighlight }: { onHighlight: () => void }) => {
  return (
    <SelectionTooltip>
      <button
        className="bg-white shadow-lg rounded-md px-3 py-1 hover:bg-yellow-200/70"
        onClick={onHighlight}
      >
        Highlight
      </button>
    </SelectionTooltip>
  );
};
```

--------------------------------

### Exact Term Highlighting in PDF

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/search.mdx

Use this when you need to highlight only the precise search term within the PDF content. Ensure `searchText` is passed to `calculateHighlightRects`.

```tsx
// Highlight only the exact search term
const ResultItem = ({ result, originalSearchText }) => {
  const onClick = async () => {
    const rects = await calculateHighlightRects(pageProxy, {
      pageNumber: result.pageNumber,
      text: result.text,
      matchIndex: result.matchIndex,
      searchText: originalSearchText, // Pass searchText to highlight only the exact term
    });
    jumpToHighlightRects(rects, "pixels");
  };
};
```

--------------------------------

### Add Page Navigation to Viewer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

Implement page navigation in your PDF viewer using CurrentPage and TotalPages components. Display the current page number and the total number of pages.

```tsx
import { CurrentPage, TotalPages } from "@anaralabs/lector";

function PDFViewerWithNavigation() {
  return (
    <Root source='/sample.pdf'>
      <div className='flex items-center gap-2 p-2'>
        <CurrentPage /> of <TotalPages />
      </div>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

--------------------------------

### Enable External Links in AnnotationLayer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/links.mdx

Controls whether external URLs (http/https) within the PDF are clickable. Defaults to true.

```tsx
<AnnotationLayer
  externalLinksEnabled={true} // default: true
/>

```

--------------------------------

### Page Layer Components

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

Render different aspects of a PDF page using specific layer components. Each layer serves a distinct purpose, such as rendering content, enabling text selection, or displaying annotations.

```tsx
<Page>
  <CanvasLayer /> {/* Renders the PDF content */}
  <TextLayer /> {/* Enables text selection */}
  <AnnotationLayer /> {/* Renders annotations and links */}
  <HighlightLayer /> {/* Custom highlight overlay */}
</Page>
```

--------------------------------

### Form Submission Handling

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/code/pdf-form.mdx

Process form submissions using FormData, filtering out any empty or null values before setting the form state. This ensures only relevant data is captured.

```tsx
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);

  // Filter out empty values
  const values = Object.fromEntries(
    Array.from(formData.entries()).filter(([, value]) => {
      return value !== "" && value != null;
    })
  );

  setFormValues(Object.keys(values).length > 0 ? values : null);
};

```

--------------------------------

### Add Zoom Controls to Viewer

Source: https://github.com/anaralabs/lector/blob/main/packages/docs/content/docs/basic-usage.mdx

Integrate zoom controls into your PDF viewer using ZoomIn, ZoomOut, and CurrentZoom components. These components provide interactive zoom functionality.

```tsx
import { ZoomIn, ZoomOut, CurrentZoom } from "@anaralabs/lector";

function PDFViewerWithZoom() {
  return (
    <Root source='/sample.pdf'>
      <div className='flex gap-2 p-2'>
        <ZoomOut />
        <CurrentZoom />
        <ZoomIn />
      </div>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```