### Install Project Dependencies and Run Dev Server

Source: https://github.com/extend-hq/ui/blob/main/README.md

Install project dependencies using pnpm and start the development server.

```bash
pnpm install
pnpm v4:dev
```

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

### Install File System Block

Source: https://github.com/extend-hq/ui/blob/main/README.md

Install the File System Block component using shadcn-ui.

```bash
npx shadcn@latest add @extend/file-system-block
```

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

### Install Viewer and Utility Components

Source: https://github.com/extend-hq/ui/blob/main/README.md

Install various viewer and utility components for handling different file types and uploads.

```bash
npx shadcn@latest add @extend/pdf-viewer
npx shadcn@latest add @extend/docx-viewer
npx shadcn@latest add @extend/xlsx-viewer
npx shadcn@latest add @extend/file-upload
npx shadcn@latest add @extend/file-thumbnail
npx shadcn@latest add @extend/e-signature
```

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

### Manual Installation of File Thumbnail

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-thumbnail.mdx

Manually install the File Thumbnail component by copying the source file and updating import paths.

```bash
Copy `components/ui/file-thumbnail.tsx` from the registry item into your
project.
```

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

### Install PDF Viewer via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/pdf-viewer.mdx

Install the PDF Viewer component using npm. This is the quickest way to add the component to your project.

```bash
npx shadcn@latest add @extend/pdf-viewer
```

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

### File System Block Usage Example

Source: https://github.com/extend-hq/ui/blob/main/README.md

Example of how to use the FileSystemBlock component in a React application. It defines file items and provides functions for getting file URLs and loading children.

```tsx
import type { FileSystemItem } from "@/components/ui/file-system"
import { FileSystemBlock } from "@/components/blocks/file-system-block"

const items: FileSystemItem[] = [
  {
    kind: "folder",
    path: "reports/",
    hasChildren: true,
  },
  {
    kind: "file",
    path: "bank-statement.pdf",
    contentType: "application/pdf",
    url: "/documents/bank-statement.pdf",
    previewImageUrl: "/documents/bank-statement-preview.png",
  },
]

export default function Page() {
  return (
    <FileSystemBlock
      items={items}
      title="Documents"
      defaultView="icons"
      className="h-[720px]"
      getFileUrl={(file) =>
        `/api/files/sign?path=${encodeURIComponent(file.path)}`
      }
      loadChildren={async ({ path }) => {
        const response = await fetch(
          `/api/files?prefix=${encodeURIComponent(path)}`
        )
        return response.json()
      }}
    />
  )
}
```

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

### Install Layout Blocks Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/layout-blocks.mdx

Install necessary dependencies and copy the component source code into your project. Update import paths as needed.

```bash
npm install @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 @tanstack/react-virtual@^3.13.26 react-markdown@^10.1.0 rehype-raw@^7.0.0 rehype-sanitize@^6.0.0 remark-gfm@^4.0.1
```

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

### Install Dependencies for File Upload

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-upload.mdx

Manually install the necessary dependencies for the File Upload component, including Huge Icons and Border Beam.

```bash
npm install @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 border-beam@^1.0.1
```

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

### Install PDF Viewer Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/pdf-viewer.mdx

Manually install the necessary dependencies for the PDF Viewer component. Ensure all listed packages are installed to avoid runtime errors.

```bash
npm install @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 @tanstack/react-virtual@^3.13.26 pdf-lib@^1.17.1 pdfjs-dist@5.4.296 react-pdf@^10.4.1
```

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

### Install E-Signature Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/e-signature.mdx

Manually install the necessary dependencies for the E-Signature component, including HugeIcons, pdf-lib, and signature_pad.

```bash
npm install @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 pdf-lib@^1.17.1 signature_pad@^5.1.3
```

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

### Install Bounding Box Citations CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/bounding-box-citations.mdx

Use the shadcn-ui CLI to add the @extend/bounding-box-citations component to your project.

```bash
npx shadcn@latest add @extend/bounding-box-citations
```

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

### Install Schema Builder Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/schema-builder.mdx

Install the necessary npm packages for Schema Builder if you are performing a manual installation. Ensure these versions are compatible with your project.

```bash
npm install @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.2 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 @pierre/diffs@^1.2.7 next-themes@0.4.6
```

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

### Install File System Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Manually install the necessary npm packages for the File System component and its related registry items.

```bash
npm install @pierre/trees @hugeicons/react @hugeicons/core-free-icons
```

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

### Install File System Component via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Use this command to quickly add the File System component to your project using shadcn-ui.

```bash
npx shadcn@latest add @extend/file-system
```

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

### Install Document Splits via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-splits.mdx

Use the npx command to add the Document Splits component to your project.

```bash
npx shadcn@latest add @extend/document-splits
```

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

### Install File Thumbnail via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-thumbnail.mdx

Use the npx command to add the File Thumbnail component to your project.

```bash
npx shadcn@latest add @extend/file-thumbnail
```

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

### Install DOCX Editor Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-editor.mdx

Manually install the necessary npm packages for the DOCX Editor and its dependencies.

```bash
npm install @base-ui/react@^1.4.1 @extend-ai/react-docx@^0.7.0-alpha.2 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6
```

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

### Install DOCX Viewer Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-viewer.mdx

Install the necessary npm packages for the DOCX Viewer. Ensure you are using compatible versions.

```bash
npm install @extend-ai/react-docx@^0.7.0-alpha.2 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6
```

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

### Install DOCX Viewer via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-viewer.mdx

Use this command to quickly add the DOCX Viewer to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/docx-viewer
```

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

### Install CSV Viewer via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/csv-tsv-viewer.mdx

Use the shadcn-ui CLI to add the @extend/csv-viewer package to your project.

```bash
npx shadcn@latest add @extend/csv-viewer
```

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

### Install Document Splits Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-splits.mdx

Manually install the required npm packages for Document Splits. Ensure you have the correct versions.

```bash
npm install @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.2 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6
```

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

### Install Excel Editor Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-editor.mdx

Manually install the necessary npm packages for the Excel Editor. Ensure you have the correct versions.

```bash
npm install @base-ui/react@^1.4.1 @extend-ai/react-xlsx@^0.10.0 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 class-variance-authority@^0.7.1
```

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

### Install Layout Blocks via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/layout-blocks.mdx

Use this command to add the Layout Blocks component to your project using shadcn.

```bash
npx shadcn@latest add @extend/layout-blocks
```

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

### Install E-Signature via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/e-signature.mdx

Use this command to quickly add the E-Signature component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/e-signature
```

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

### Install Additional Components for Excel Editor

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-editor.mdx

Install the Excel Viewer and Group components, which are reused by the Excel Editor for UI elements like sheet tabs and the formula bar.

```bash
npx shadcn@latest add @extend/xlsx-viewer @extend/group
```

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

### Install File Upload via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-upload.mdx

Use this command to quickly add the File Upload component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/file-upload
```

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

### Install CSV Viewer Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/csv-tsv-viewer.mdx

Manually install the required dependencies for the CSV Viewer component, including glide-data-grid, hugeicons, and papaparse.

```bash
npm install @glideapps/glide-data-grid@6.0.4-alpha24 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 papaparse@^5.5.3
```

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

### Install Layout Blocks Component

Source: https://github.com/extend-hq/ui/blob/main/README.md

Install the layout blocks component using the shadcn CLI. This component is used for inspecting OCR and layout output.

```bash
npx shadcn@latest add @extend/layout-blocks-block
```

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

### Install Bounding Box Citations Component

Source: https://github.com/extend-hq/ui/blob/main/README.md

Install the bounding box citations component using the shadcn CLI. This component is used for reviewing extracted values against the source PDF.

```bash
npx shadcn@latest add @extend/bounding-box-citations-block
```

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

### Install XLSX Viewer Dependencies Manually

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-viewer.mdx

Manually install the necessary npm packages for the XLSX Viewer component. Ensure you have the correct versions.

```bash
npm install @extend-ai/react-xlsx@^0.10.0 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6
```

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

### Install XLSX Viewer via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-viewer.mdx

Use this command to quickly add the XLSX Viewer component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/xlsx-viewer
```

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

### Install DOCX Editor via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-editor.mdx

Use this command to quickly add the DOCX Editor to your project using shadcn-ui.

```bash
npx shadcn@latest add @extend/docx-editor
```

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

### Install Schema Builder via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/schema-builder.mdx

Use this command to quickly add the Schema Builder component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/schema-builder
```

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

### Install Bounding Box Citations Dependencies

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/bounding-box-citations.mdx

Manually install the required npm packages for Bounding Box Citations, including glide-data-grid, hugeicons, and diffs.

```bash
npm install @glideapps/glide-data-grid@6.0.4-alpha24 @hugeicons/core-free-icons@^4.2.0 @hugeicons/react@^1.1.6 @pierre/diffs@^1.1.22
```

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

### Install Document Viewer Sidebar via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-viewer-sidebar.mdx

Use this command to add the Document Viewer Sidebar component to your project using shadcn-ui.

```bash
npx shadcn@latest add @extend/document-viewer-sidebar
```

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

### Install Excel Editor via CLI

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-editor.mdx

Use this command to quickly add the Excel Editor component to your project using the shadcn CLI.

```bash
npx shadcn@latest add @extend/xlsx-editor
```

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

### File System Data Model Example

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Defines the structure for file and folder items in the File System component's manifest. Explicit folder entries are optional.

```typescript
const items: FileSystemItem[] = [
  {
    kind: "folder",
    path: "invoices/2026/",
    hasChildren: true,
  },
  {
    kind: "file",
    key: "invoices/2026/jan.pdf",
    path: "invoices/2026/jan.pdf",
    contentType: "application/pdf",
    size: 482193,
    createdAt: "2026-01-04T10:02:00.000Z",
    updatedAt: "2026-06-09T18:21:00.000Z",
    etag: '"abc123"',
    previewImageUrl: "/thumbnails/invoices/2026/jan.png",
  },
]
```

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

### Render PDF Viewer Component

Source: https://github.com/extend-hq/ui/blob/main/README.md

Render the installed PDF viewer component in your React application. Ensure the file path is correct.

```tsx
import { PDFViewer } from "@/components/ui/pdf-viewer"

export default function Page() {
  return <PDFViewer file="/sample.pdf" className="h-[720px]" />
}
```

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

### Render Layout Blocks Component

Source: https://github.com/extend-hq/ui/blob/main/README.md

Render the installed layout blocks component with OCR output. This component displays selectable blocks and PDF overlays.

```tsx
import type { ParsedOcrOutput } from "@/components/ui/layout-blocks"
import { OcrBlocksBlock } from "@/components/blocks/layout-blocks-block"

const output: ParsedOcrOutput = {
  chunks: [
    {
      blocks: [
        {
          id: "title",
          type: "heading",
          content: "Statement of Work",
          metadata: { page: { number: 1, width: 612, height: 792 }, avgOcrConfidence: 0.99 },
          boundingBox: { left: 72, top: 96, right: 360, bottom: 124 },
        },
      ],
    },
  ],
}

export default function Page() {
  return <OcrBlocksBlock file="/documents/statement.pdf" output={output} />
}
```

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

### OcrBlocksPanel Component Source

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/layout-blocks.mdx

This is the source code for the OcrBlocksPanel component, which renders selectable layout results. Ensure to update import paths to match your project setup.

```typescript
import {
  type OcrBlock,
  OcrBlocksPanel,
} from "@extend/layout-blocks";

interface OcrBlocksSourceProps {
  blocks: OcrBlock[];
  activeBlockId?: string;
  onBlockFocus?: (block: OcrBlock) => void;
}

export function OcrBlocksSource({
  blocks,
  activeBlockId,
  onBlockFocus,
}: OcrBlocksSourceProps) {
  return (
    <OcrBlocksPanel
      blocks={blocks}
      activeBlockId={activeBlockId}
      onBlockFocus={onBlockFocus}
    />
  );
}
```

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

### Render Bounding Box Citations Component

Source: https://github.com/extend-hq/ui/blob/main/README.md

Render the installed bounding box citations component with review fields. This component displays field-level citations and editable form controls.

```tsx
import type { ReviewField } from "@/components/ui/bounding-box-citations"
import { HumanReviewBlock } from "@/components/blocks/bounding-box-citations-block"

const fields: ReviewField[] = [
  {
    key: "invoice_total",
    schema: {
      type: "number",
      title: "Invoice total",
      description: "Total amount due on the invoice.",
    },
    actual: 1280.5,
    expected: 1280.5,
    location: { page: 1, area: { left: 62, top: 82, width: 22, height: 4 } },
  },
]

export default function Page() {
  return (
    <HumanReviewBlock
      file="/documents/invoice.pdf"
      fields={fields}
      className="h-[720px]"
    />
  )
}
```

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

### File Upload Component Source Code

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-upload.mdx

This is the core source code for the File Upload component. Ensure to update import paths to match your project setup.

```typescript
import { FC } from "react";
import {
  FileUpload,
  type FileUploadItem,
  type AcceptedFileType,
} from "@extend/file-upload";
import { BorderBeam } from "@extend/border-beam";

export const FileUploadDemo: FC = () => {
  return (
    <FileUpload
      title="Click to upload or drop files"
      description="PDF, DOCX, XLSX, CSV, PNG, or JPG"
      acceptedFileTypes={[
        "image/*",
        "application/pdf",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      ]}
      onFilesAccepted={(files) => {
        console.log("Accepted files:", files);
      }}
      onFilesChange={(files) => {
        console.log("Files changed:", files);
      }}
    />
  );
};

```

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

### FileSystem Component Properties

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

The FileSystem component accepts various properties to customize its behavior and appearance. These include the list of items to display, optional class names, titles, default views, and callbacks for view and selection changes, file opening, and URL retrieval.

```APIDOC
## FileSystem Component

### Description

This component renders a file system interface, allowing users to navigate and interact with files and folders. It supports various configurations for display and interaction.

### Properties

- **items** (FileSystemItem[]) - Required - The array of file system items to display.
- **className** (string) - Optional - Additional CSS class names for the component.
- **title** (string) - Optional - The title displayed for the file system, defaults to "Files".
- **defaultView** ("icons" | "list" | "columns" | "gallery") - Optional - The default view mode for the file system, defaults to "icons".
- **view** (FileSystemView) - Optional - The current view mode of the file system.
- **onViewChange** ((view: FileSystemView) => void) - Optional - Callback function invoked when the view mode changes.
- **defaultPath** (string) - Optional - The default path to display when the component mounts, defaults to an empty string.
- **onSelectionChange** ((item: FileSystemItem | null) => void) - Optional - Callback function invoked when the selected item changes.
- **onFileOpen** ((file: FileSystemFileItem, url: string | null) => void) - Optional - Callback function invoked when a file is opened.
- **getFileUrl** ((file: FileSystemFileItem) => string | Promise<string>) - Optional - Function to get the URL for a given file.
- **loadChildren** ((args: FileSystemLoadChildrenArgs) => Promise<...>) - Optional - Function to asynchronously load children of a folder.
- **loadPreviewImageUrl** ((file: FileSystemFileItem, pageIndex: number) => Promise<string | null>) - Optional - Function to load a preview image URL for a file.
- **renderFilePreview** ((file: FileSystemFileItem) => React.ReactNode) - Optional - Function to render a custom preview for a file.
```

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

### FileSystemFileItem Structure

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Defines the structure for a file item within the file system. Includes properties like kind, path, name, content type, size, and preview-related information.

```APIDOC
## FileSystemFileItem

### Description

Represents a file within the file system.

### Properties

- **kind** ("file") - Required - Specifies that this item is a file.
- **path** (string) - Required - The unique path of the file.
- **key** (string) - Optional - An alternative key for the file, defaults to its path.
- **name** (string) - Optional - The display name of the file.
- **parentPath** (string) - Optional - The path of the parent folder.
- **contentType** (string) - Optional - The MIME type of the file.
- **size** (number) - Optional - The size of the file in bytes.
- **createdAt** (string) - Optional - The timestamp when the file was created.
- **updatedAt** (string) - Optional - The timestamp when the file was last updated.
- **etag** (string) - Optional - The ETag of the file, used for caching.
- **url** (string) - Optional - The direct URL to access the file.
- **previewImageUrl** (string | null) - Optional - The URL of a preview image for the file.
- **previewImageUrls** (string[] | null) - Optional - An array of URLs for preview images.
- **previewPageCount** (number) - Optional - The number of pages in the file (e.g., for PDFs).
- **previewAspectRatio** (number) - Optional - The aspect ratio of the file's preview.
- **metadata** (Record<string, string>) - Optional - A record of custom metadata associated with the file.
```

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

### Document Splits Component Source Code

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-splits.mdx

Copy and paste this source code into your project. Update import paths as needed.

```typescript
import React, {
  useCallback,
  useMemo,
  useState,
} from "react";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardBehavior,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import {
  DocumentSplit,
  DocumentSplitPageId,
  DocumentSplits as DocumentSplitsPrimitive,
} from "@extend/document-splits";
import { FileThumbnail } from "./file-thumbnail";

export interface DocumentSplitsProps {
  activePage?: number;
  className?: string;
  splits: DocumentSplit[];
  thumbnailImages?: Record<DocumentSplitPageId, string>;
  withFrameDivider?: boolean;
  onSelectPage: (pageNumber: number) => void;
  onSplitsChange: (splits: DocumentSplit[]) => void;
}

export function DocumentSplits({
  activePage,
  className,
  splits,
  thumbnailImages,
  withFrameDivider = true,
  onSelectPage,
  onSplitsChange,
}: DocumentSplitsProps) {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardBehavior.coordinateGetter,
    })
  );

  const handleDragEnd = useCallback(
    (event: any) => {
      const {
        active,
        over
      } = event;

      if (!over) return;

      const activeId = active.id;
      const overId = over.id;

      if (activeId === overId) return;

      const activeContainerId = active.data.current.sortable.containerId;
      const overContainerId = over.data.current.sortable.containerId;

      const activeItemIndex = splits.findIndex(split => split.id === activeContainerId);
      const overItemIndex = splits.findIndex(split => split.id === overContainerId);

      const activeItem = splits[activeItemIndex];
      const overItem = splits[overItemIndex];

      if (!activeItem || !overItem) return;

      const activePageIndex = activeItem.pages.indexOf(activeId as DocumentSplitPageId);
      const overPageIndex = overItem.pages.indexOf(overId as DocumentSplitPageId);

      // Dragging within the same container
      if (activeContainerId === overContainerId) {
        const newPages = arrayMove(activeItem.pages, activePageIndex, overPageIndex);
        const newSplits = [...splits];
        newSplits[activeItemIndex] = {
          ...activeItem,
          pages: newPages,
        };
        onSplitsChange(newSplits);
      } else {
        // Dragging between containers
        const newSplits = [...splits];

        // Remove from active container
        newSplits[activeItemIndex] = {
          ...activeItem,
          pages: activeItem.pages.filter(pageId => pageId !== activeId),
        };

        // Add to over container
        const newOverPages = [...overItem.pages];
        newOverPages.splice(overPageIndex, 0, activeId as DocumentSplitPageId);
        newSplits[overItemIndex] = {
          ...overItem,
          pages: newOverPages,
        };

        onSplitsChange(newSplits);
      }
    },
    [splits, onSplitsChange]
  );

  const handleDragOver = useCallback(
    (event: any) => {
      const {
        active,
        over
      } = event;

      if (!over) return;

      const activeId = active.id;
      const overId = over.id;

      if (activeId === overId) return;

      const activeContainerId = active.data.current.sortable.containerId;
      const overContainerId = over.data.current.sortable.containerId;

      if (activeContainerId !== overContainerId) {
        // Enabling dropping over containers
        return true;
      }
    },
    []
  );

  const handleSelectPage = useCallback(
    (pageId: DocumentSplitPageId) => {
      onSelectPage(Number(pageId));
    },
    [onSelectPage]
  );

  const memoizedSplits = useMemo(() => splits, [splits]);

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
      onDragOver={handleDragOver}
    >
      <SortableContext
        items={memoizedSplits.map(split => split.id)}
        strategy={verticalListSortingStrategy}
      >
        <DocumentSplitsPrimitive
          activePage={activePage}
          className={className}
          splits={memoizedSplits}
          thumbnailImages={thumbnailImages}
          withFrameDivider={withFrameDivider}
          onSelectPage={handleSelectPage}
        />
      </SortableContext>
    </DndContext>
  );
}

```

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

### Self-host PDF.js Assets for PDF Viewer

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/pdf-viewer.mdx

Configure the PDF Viewer to use self-hosted PDF.js CMaps and standard fonts. This avoids external asset requests and ensures PDFs with CID fonts render correctly.

```tsx
<PDFViewer
  file="/path/to/document.pdf"
  documentOptions={{
    cMapPacked: true,
    cMapUrl: "/pdfjs/cmaps/",
    standardFontDataUrl: "/pdfjs/standard_fonts/",
  }}
/>
```

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

### DocumentViewerSidebarSkeleton Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-viewer-sidebar.mdx

The DocumentViewerSidebarSkeleton component displays the loading state for the sidebar while document thumbnails are being prepared.

```APIDOC
## DocumentViewerSidebarSkeleton

### Description
The DocumentViewerSidebarSkeleton component renders the sidebar loading state used while document thumbnails are not ready.

### Props
#### Path Parameters
- **inline** (boolean) - Required - Determines if the skeleton should be displayed in an inline layout.
```

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

### FileSystemFolderItem Structure

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Defines the structure for a folder item within the file system. Includes properties like kind, path, name, and metadata related to its creation and modification.

```APIDOC
## FileSystemFolderItem

### Description

Represents a folder within the file system.

### Properties

- **kind** ("folder") - Required - Specifies that this item is a folder.
- **path** (string) - Required - The unique path of the folder.
- **name** (string) - Optional - The display name of the folder.
- **parentPath** (string) - Optional - The path of the parent folder.
- **hasChildren** (boolean) - Optional - Indicates if the folder contains child items.
- **createdAt** (string) - Optional - The timestamp when the folder was created.
- **updatedAt** (string) - Optional - The timestamp when the folder was last updated.
```

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

### Lazy Loading Folder Contents

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-system.mdx

Implement lazy loading for large buckets by providing a `loadChildren` function. This function fetches folder contents on demand when a folder is opened.

```tsx
<FileSystem
  items={rootItems}
  loadChildren={async ({ path, cursor }) =>
    fetch(`/api/files/list?prefix=${path}&cursor=${cursor ?? ""}`).then((r) =>
      r.json()
    )
  }
  getFileUrl={async (file) =>
    `/api/files/sign?key=${encodeURIComponent(file.key ?? file.path)}`
  }
/>
```

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

### OcrBlocksPanel

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/layout-blocks.mdx

The OcrBlocksPanel component renders selectable layout results with type, markdown text, confidence, and page context.

```APIDOC
## OcrBlocksPanel

### Description
The OcrBlocksPanel component renders selectable layout results with type, markdown text, confidence, and page context.

### Props
#### Parameters
- **activeBlockId** (string) - Optional - 
- **blocks** (OcrBlock[]) - Required - 
- **className** (string) - Optional - 
- **onBlockFocus** ((block: OcrBlock) => void) - Optional - 
```

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

### FileThumbnail API Reference

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-thumbnail.mdx

The FileThumbnail component renders a reusable thumbnail shell and accepts externally generated previews from your rendering pipeline. It supports various props to customize its appearance and behavior, including file information, aspect ratio, loading, and error states.

```APIDOC
## FileThumbnail

The FileThumbnail component renders the reusable thumbnail shell. It accepts externally generated previews from your own rendering pipeline.

### Props

| Prop | Type | Default | Required |
|---|---|---|---|
| `file` | `ThumbnailFile | File` | `-` | Yes |
| `className` | `string` | `-` | No |
| `previewAspectRatio` | `number` | `-` | No |
| `previewClassName` | `string` | `-` | No |
| `previewContent` | `React.ReactNode` | `-` | No |
| `previewImageUrl` | `string | null` | `-` | No |
| `isLoading` | `boolean` | `false` | No |
| `hasError` | `boolean` | `false` | No |

### ThumbnailFile Type

| Prop | Type | Default | Required |
|---|---|---|---|
| `name` | `string` | `-` | Yes |
| `type` | `string` | `-` | Yes |
```

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

### Next.js Dynamic Import for SSR

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/csv-tsv-viewer.mdx

Render the CSV Viewer through next/dynamic with ssr: false to avoid browser-only API errors in Next.js SSR environments.

```tsx
"use client"

import dynamic from "next/dynamic"

const CsvViewer = dynamic(
(() => import("@/components/ui/csv-viewer").then((mod) => mod.CsvViewer)),
{ ssr: false }
)
```

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

### DocxEditorPreview Component

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-editor.mdx

The DocxEditorPreview component renders an editable DOCX file with upload, toolbar, thumbnails, zoom, and export controls.

```APIDOC
## Component: DocxEditorPreview

### Description
The DocxEditorPreview component renders an editable DOCX file with upload, toolbar, thumbnails, zoom, and export controls.

### Props
- **className** (string) - Optional - CSS class names for styling the component.
- **defaultIsDark** (boolean) - Optional - Sets the default theme mode. Defaults to `false` (light).
- **fileName** (string) - Optional - The name of the file being edited.
- **isDark** (boolean) - Optional - Controls the theme mode (dark/light).
- **onIsDarkChange** ((isDark: boolean) => void) - Optional - Callback function triggered when the theme mode changes.
- **rounded** (boolean) - Optional - Applies rounded corners to the component. Defaults to `false`.
- **src** (string) - Optional - URL of the DOCX file to load.
```

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

### ESignatureBlock Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/e-signature.mdx

The ESignatureBlock component renders a PDF signing workflow. It includes a document preview, a signature field panel, a signature dialog, and functionality for exporting the signed PDF. It accepts a `file` prop to specify the PDF document to be signed.

```APIDOC
## ESignatureBlock

### Description
The ESignatureBlock component renders a PDF signing workflow with a document preview, signature field panel, signature dialog, and signed-PDF export.

### Props

#### `file`
- **Type**: `string`
- **Default**: `-`
- **Required**: No
- **Description**: Specifies the PDF document to be used in the signing workflow.
```

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

### useElementWidth Hook API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-viewer-sidebar.mdx

The useElementWidth hook provides a ref and the measured width of an element, which is useful for making responsive layout decisions within the viewer.

```APIDOC
## useElementWidth

### Description
The useElementWidth hook returns a ref and measured width for responsive viewer layout decisions.

### Returns
- `ref`: A React ref object to attach to the element whose width is to be measured.
- `width`: The measured width of the element.
```

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

### DocumentViewerThumbnailSidebar Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-viewer-sidebar.mdx

The DocumentViewerThumbnailSidebar component renders a responsive sidebar container for document thumbnails. It accepts several props to control its behavior and appearance.

```APIDOC
## DocumentViewerThumbnailSidebar

### Description
The DocumentViewerThumbnailSidebar component renders a responsive sidebar container for document thumbnails.

### Props
#### Path Parameters
- **children** (React.ReactNode) - Required - The content to be rendered within the sidebar.
- **className** (string) - Optional - Additional CSS classes to apply to the sidebar.
- **inline** (boolean) - Required - Determines if the sidebar should render in an inline layout.
- **open** (boolean) - Required - Controls the visibility state of the sidebar.
```

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

### DocxViewerPreview Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/docx-viewer.mdx

The DocxViewerPreview component provides a way to render DOCX files with integrated controls for upload, theme selection, and zoom functionality. It wraps the core `@extend-ai/react-docx` viewer.

```APIDOC
## DocxViewerPreview

### Description
The DocxViewerPreview component renders a DOCX file with upload, theme, and zoom controls around the `@extend-ai/react-docx` viewer.

### Props

#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* None

### Request Example
* None

### Response
#### Success Response (200)
* None

#### Response Example
* None

### Props Table
| Prop                          | Type                        | Default | Required |
| ----------------------------- | --------------------------- | ------- | -------- |
| `className`                   | `string`                    | `-`     | No       |
| `defaultIsDark`               | `boolean`                   | `false` | No       |
| `defaultThumbnailSidebarOpen` | `boolean`                   | `false` | No       |
| `fileName`                    | `string`                    | `-`     | No       |
| `isDark`                      | `boolean`                   | `-`     | No       |
| `onIsDarkChange`              | `(isDark: boolean) => void` | `-`     | No       |
| `rounded`                     | `boolean`                   | `false` | No       |
| `src`                         | `string`                    | `-`     | No       |
```

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

### FileUpload Component API Reference

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/file-upload.mdx

The FileUpload component provides a drag-and-drop interface for file uploads. It handles file validation and maintains an internal upload queue. You can manage this queue externally using callbacks.

```APIDOC
## FileUpload Component API Reference

The FileUpload component renders a drag-and-drop file picker, validates accepted files, and keeps an internal upload queue unless you mirror it through callbacks.

### Props

| Prop | Type | Default | Required |
|---|---|---|---|
| `accept` | `string` | `-` | No |
| `acceptedFileTypes` | `AcceptedFileType[]` | Image, PDF, and Sheet icons | No |
| `borderBeamTheme` | `React.ComponentProps<typeof BorderBeam>["theme"]` | `"light"` | No |
| `browseLabel` | `string` | `"Browse files"` | No |
| `className` | `string` | `-` | No |
| `description` | `string` | `"PDF, DOCX, XLSX, CSV, PNG, or JPG"` | No |
| `draggingLabel` | `string` | `"Drop to add"` | No |
| `multiple` | `boolean` | `true` | No |
| `showBorderBeam` | `boolean` | `true` | No |
| `showFileList` | `boolean` | `true` | No |
| `title` | `string` | `"Click to upload or drop files"` | No |
| `onFilesAccepted` | `(files: File[]) => void` | `-` | No |
| `onFilesChange` | `(files: FileUploadItem[]) => void` | `-` | No |
```

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

### HumanReviewPanel API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/bounding-box-citations.mdx

The HumanReviewPanel component renders editable review fields and a JSON diff for the same extraction output. It allows for detailed review and comparison of extracted data against source citations.

```APIDOC
## HumanReviewPanel

The HumanReviewPanel component renders editable review fields and a JSON diff for the same extraction output.

### Props

- **fields** (`ReviewField[]`) - Optional - sample fields - An array of review fields to display.
- **activeFieldKey** (`string`) - Optional - `-` - The key of the currently active field.
- **className** (`string`) - Optional - `-` - Custom CSS class for the component.
- **onFieldFocus** (`(field: ReviewField) => void`) - Optional - `-` - Callback function when a field gains focus.
- **showExpected** (`boolean`) - Optional - `true` - Whether to show expected values for comparison.
- **theme** (`"light" | "dark"`) - Optional - `"light"` - The theme of the component ('light' or 'dark').
```

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

### XlsxViewerPreview Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-viewer.mdx

The XlsxViewerPreview component renders an Excel workbook with upload, theme, zoom, sheet navigation, and grid controls around the `@extend-ai/react-xlsx` viewer.

```APIDOC
## XlsxViewerPreview

### Description
The XlsxViewerPreview component renders an Excel workbook with upload, theme, zoom, sheet navigation, and grid controls around the `@extend-ai/react-xlsx` viewer.

### Props

- **className** (string) - Optional - Allows custom styling of the component.
- **defaultIsDark** (boolean) - Optional - Sets the default theme to dark mode if true. Defaults to `false`.
- **fileName** (string) - Optional - Specifies the name of the file being viewed.
- **isDark** (boolean) - Optional - Controls the current theme, dark mode if true.
- **onIsDarkChange** ((isDark: boolean) => void) - Optional - Callback function triggered when the theme changes.
- **rounded** (boolean) - Optional - Applies rounded styling to the component. Defaults to `false`.
- **src** (string) - Optional - The source path or data for the XLSX workbook.
```

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

### XlsxEditorPreview Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/xlsx-editor.mdx

The XlsxEditorPreview component renders an editable Excel workbook with upload, theme, zoom, formula editing, sheet controls, and export.

```APIDOC
## XlsxEditorPreview Component API

The XlsxEditorPreview component renders an editable Excel workbook with upload, theme, zoom, formula editing, sheet controls, and export.

### Props

| Prop             | Type                        | Default | Required |
| ---------------- | --------------------------- | ------- | -------- |
| `className`      | `string`                    | `-`     | No       |
| `defaultIsDark`  | `boolean`                   | `false` | No       |
| `fileName`       | `string`                    | `-`     | No       |
| `isDark`         | `boolean`                   | `-`     | No       |
| `onIsDarkChange` | `(isDark: boolean) => void` | `-`     | No       |
| `rounded`        | `boolean`                   | `false` | No       |
| `src`            | `string`                    | `-`     | No       |
```

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

### ReviewField API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/bounding-box-citations.mdx

Represents a single field within the review process, including its schema, actual value, expected value, and location.

```APIDOC
## ReviewField

Represents a single field within the review process.

### Properties

- **key** (`string`) - Required - `-` - The unique identifier for the review field.
- **schema** (`ReviewFieldSchema`) - Required - `-` - The schema definition for the field.
- **actual** (`JsonValue`) - Required - `-` - The actual extracted value for the field.
- **expected** (`JsonValue`) - Required - `-` - The expected value for the field (used when `showExpected` is enabled).
- **location** (`{ page: number; area: HighlightArea }`) - Optional - `-` - The location of the field in the source document, including page number and highlight area.
```

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

### SchemaBuilderPanel Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/schema-builder.mdx

The SchemaBuilderPanel component is used to render an editable schema table and a JSON view for a serialized schema. It accepts various props to customize its behavior and appearance.

```APIDOC
## SchemaBuilderPanel

### Description
The SchemaBuilderPanel component renders the editable schema table and a JSON view for the serialized schema.

### Props

- **className** (string) - Optional - Customizes the component's styling.
- **defaultSchema** (SchemaBuilderSchema) - Optional - Sets the initial schema when no explicit schema is provided.
- **schema** (SchemaBuilderSchema) - Optional - The current schema being edited or displayed.
- **onSchemaChange** ((schema: SchemaBuilderSchema) => void) - Optional - Callback function triggered when the schema is modified.
- **theme** ("light" | "dark") - Optional - Determines the visual theme of the component, defaulting to the application's theme.
```

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

### SchemaBuilderProperty API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/schema-builder.mdx

SchemaBuilderProperty defines the structure for individual properties within a schema, including their key, type, description, and nested structures.

```APIDOC
## SchemaBuilderProperty

### Description
Represents a property within the schema builder, defining its characteristics and potential nested structures.

### Props

- **id** (string) - Required - Unique identifier for the property.
- **key** (string) - Required - The name of the property.
- **type** (SchemaBuilderFieldType) - Required - The data type of the property (e.g., string, number, boolean, enum, object, array).
- **description** (string) - Required - A description of the property's purpose.
- **enumValues** (SchemaBuilderEnumValue[]) - Optional - An array of possible values if the property type is an enum.
- **properties** (SchemaBuilderProperty[]) - Optional - An array of nested properties if the property type is an object.
- **items** ({ type; properties?; enumValues? }) - Optional - Defines the structure of items within an array property. Can specify type, nested properties, or enum values.
```

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

### useInlineThumbnailSidebar Hook API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-viewer-sidebar.mdx

The useInlineThumbnailSidebar hook determines whether the thumbnail sidebar should be displayed inline based on the measured width of the viewer.

```APIDOC
## useInlineThumbnailSidebar

### Description
The useInlineThumbnailSidebar hook returns whether the sidebar should render inline for a measured viewer width.

### Returns
- `boolean`: True if the sidebar should render inline, false otherwise.
```

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

### Portal Root Element

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/csv-tsv-viewer.mdx

Add this fixed portal root element as the last child of your app's body before using the component.

```tsx
<div id="portal" className="fixed top-0 left-0 z-40" />
```

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

### DocumentSplits Component API

Source: https://github.com/extend-hq/ui/blob/main/apps/v4/content/docs/components/document-splits.mdx

The DocumentSplits component renders controlled split groups and paints cached page images through FileThumbnail. It manages the organization of document pages into distinct split groups.

```APIDOC
## DocumentSplits

### Description
The DocumentSplits component renders controlled split groups and paints cached page images through FileThumbnail.

### Props

#### Required Props
- **activePage** (number) - The currently active page number.
- **splits** (DocumentSplit[]) - An array of DocumentSplit objects defining the structure of the splits.
- **onSelectPage** ( (pageNumber: number) => void ) - Callback function invoked when a page is selected.
- **onSplitsChange** ( (splits: DocumentSplit[]) => void ) - Callback function invoked when the splits are changed.

#### Optional Props
- **className** (string) - Additional CSS class names for styling.
- **thumbnailImages** (Record<DocumentSplitPageId, string>) - A record mapping document split page IDs to their thumbnail image URLs. Defaults to an empty object.
- **withFrameDivider** (boolean) - Whether to display a frame divider. Defaults to true.

### DocumentSplit Type

Represents a single split group within the DocumentSplits component.

#### Props

- **id** (string) - Required - The unique identifier for the split group.
- **title** (string) - Required - The title of the split group.
- **pages** (DocumentSplitPageId[]) - Required - An array of page IDs belonging to this split group.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.