### Install @paprize/puppeteer Library

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/quick-start.md

Install the @paprize/puppeteer library using npm package manager. This library requires an instance of Puppeteer or Puppeteer Core to be set up in the environment. The installation command adds the library to the project's dependencies.

```bash
npm install @paprize/puppeteer
```

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

### Paprize Vanilla JS Report Setup and Configuration

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/quick-start.md

Demonstrates setting up a Paprize report using Vanilla JavaScript. It includes adding sections with specific dimensions and margins, listening for page completion events to update headers, and scheduling pagination. This snippet requires the `@paprize/core` and `@paprize/vanilla` libraries.

```html
<div data-pz-preview>
    <div data-pz-section id="section-1">...</div>
    <div data-pz-section id="section-2">...</div>
</div>

<script>
    import { pageSize, pageMargin } from '@paprize/core';
    import { PaprizeReport } from '@paprize/vanilla';

    const report = new PaprizeReport();

    await report.addSection({
        id: 'section-1',
        dimension: pageSize.A4,
        margin: pageMargin.Narrow,
        ...configs,
    });

    await report.addSection({
        id: 'section-2',
        dimension: pageSize.A5,
        margin: pageMargin.None,
        ...configs,
    });

    report.monitor.addEventListener('pageCompleted', (pageContext) => {
        if (pageContext.components.pageHeader) {
            pageContext.components.pageHeader.innerHTML = `<h4>Page ${pageContext.pageIndex + 1} of ${pageContext.totalPages}</h4>`;
        }
    });

    await r.schedulePagination();
</script>
```

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

### Install Paprize Vanilla JS Package

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/quick-start.md

Install the `@paprize/vanilla` library using npm. This is the first step to integrating Paprize's reporting features into your JavaScript project.

```bash
npm install @paprize/vanilla
```

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

### Generate PDF from Report HTML - Vanilla JavaScript

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/quick-start.md

Convert a report HTML file to PDF using @paprize/puppeteer's reportToPdf function. This code launches a headless Puppeteer browser, loads a local HTML report file, and exports it to PDF format. Requires Puppeteer to be installed and configured. The implementation includes browser launch configuration with security flags for PDF generation in server environments.

```typescript
import { reportToPdf } from '@paprize/puppeteer';
import { promises as fs } from 'fs';
import puppeteer, { type Browser } from 'puppeteer';

let browser!: Browser;

try {
    browser = await puppeteer.launch({
        headless: true,
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-dev-shm-usage',
            '--disable-gpu',
            '--disable-web-security',
        ],
    });

    const page = await browser.newPage();

    const pdf = await reportToPdf(
        page,
        new URL(`file://${import.meta.dirname}/report.html`)
    );

    await fs.writeFile('report.pdf', pdf);
} finally {
    await browser.close();
}
```

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

### Generate PDF from React Application - TypeScript

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/quick-start.md

Convert a React application to PDF using @paprize/puppeteer's serveReport and reportToPdf functions. This implementation starts a local HTTP server to serve the React app's dist directory, then converts the rendered application to PDF. Includes proper cleanup of browser and server resources. The serveReport function requires the built React application in the 'dist' directory.

```typescript
import { promises as fs } from 'fs';
import { serveReport, reportToPdf } from '@paprize/puppeteer';
import puppeteer, { type Browser } from 'puppeteer';

let browser!: Browser;
let server!: Awaited<ReturnType<typeof serveReport>>;

try {
    browser = await puppeteer.launch({
        headless: true,
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-dev-shm-usage',
            '--disable-gpu',
            '--disable-web-security',
        ],
    });

    server = await serveReport('dist');

    const page = await browser.newPage();

    const pdf = await reportToPdf(
        page,
        new URL('mewo-company', server.getHost())
    );

    await fs.writeFile('mewo-company.pdf', pdf);
} finally {
    await browser.close();
    server.close();
}
```

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

### Create a Section with Data Attributes in Zero

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Illustrates creating a Paprize report section using only HTML data attributes, a feature of the 'Zero' configuration. This method simplifies section setup by defining properties like page size and margin directly in the HTML markup. No external JavaScript dependencies are required for this basic setup.

```html
<div
    data-pz-section
    data-pz-section-page-size="A4"
    data-pz-section-page-margin="narrow"
>
    ...
</div>
```

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

### Add Page Header in Vanilla/Zero

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Configures a page header for a Paprize report using Vanilla JavaScript or the Zero configuration. This header is rendered at the start of every page within a section. If a section header is present, the page header on the first page will appear after it.

```html
<div data-pz-page-header>...</div>
```

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

### Using useReportInfo Hook in JSX

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

This snippet illustrates accessing all sections within the report using the useReportInfo hook. It is used in report-level components to get section data. Inputs: None; outputs: sections (array of section objects). Limitations: Triggers pagination engine re-runs; recommended to use with Layout Suspension for data availability.

```jsx
const { sections } = useReportInfo();
```

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

### Using useSectionInfo Hook in JSX

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

This example shows how to destructure the sectionId from the useSectionInfo hook, which provides information about the current section. It depends on the SectionInfo type and assumes a section context. Inputs: None; outputs: sectionId (string or identifier). Limitations: Typed as SectionInfo, may cause re-renders if not suspended.

```jsx
const { sectionId } : SectionInfo = useSectionInfo();
```

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

### Programmatically Replace Content with JSON Data in Vanilla Reports (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/inject-data.md

This snippet shows how to listen for the pageCompleted event in a Vanilla Paprize report and replace placeholder text with JSON data retrieved via getJsonData. It provides a programmatic alternative to attribute-based binding. The example uses the defaultData object defined earlier.

```TypeScript
import { pageSize, pageMargin } from '@paprize/core';
import { PaprizeReport } from '@paprize/vanilla';

const report = new PaprizeReport();

...

report.monitor.addEventListener('pageCompleted', async (pageContext) => {
    const json = await report.getJsonData(defaultData);
    pageContext.components.pageContent.textContent.replaceAll(
        '{NAME}',
        json.info.name
    );
});

...
```

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

### Handle Async Data with Section Suspension in React TSX

Source: https://context7.com/pejmannik/paprize/llms.txt

This example illustrates handling asynchronous data loading in reports by suspending section pagination until promises resolve, using @paprize/react hooks and components. It requires React, @paprize/react, and state management. Inputs are fetch promises, outputs are rendered content post-resolution. Limitations include potential loading state UI blocking pagination and reliance on proper promise handling to avoid infinite suspension.

```tsx
import { Section, PageContent, useSectionSuspension } from '@paprize/react';
import { useState, useEffect } from 'react';

function AsyncDataSection() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const suspension = useSectionSuspension();

  useEffect(() => {
    const promise = fetch('/api/report-data')
      .then(res => res.json())
      .then(result => {
        setData(result);
        setLoading(false);
      });

    // Register promise with pagination engine
    suspension.add(promise);
  }, []);

  if (loading) {
    return <div>Loading data...</div>;
  }

  return (
    <div>
      <h2>Data Loaded Successfully</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

function Report() {
  return (
    <Section size={pageSize.A4}>
      <PageContent>
        <AsyncDataSection />
      </PageContent>
    </Section>
  );
}
```

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

### Use JSON Data in React Component with useJsonData Hook (TSX)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/inject-data.md

In this React example, the useJsonData hook retrieves the injected JSON data and makes it available inside a functional component. The component renders a string that includes the name and lastName fields. This approach integrates Paprize data seamlessly with React's rendering flow.

```TSX
function MyComponent() {
    const data = useJsonData<MyData>(defaultData);

    return `By ${data.info.name} ${data.info.lastName}`;
}
```

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

### Use TablePlugin with Options (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/plugin.md

Shows how to instantiate the `TablePlugin` with options to customize table rendering. Options like `cloneHeader` control header repetition across pages when tables span multiple pages.

```typescript
import { TablePlugin } from '@paprize/core';

const plugins = [new TablePlugin({ cloneHeader: true })];
```

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

### Vanilla JavaScript PaprizeReport Class Initialization and Section Addition

Source: https://context7.com/pejmannik/paprize/llms.txt

Demonstrates initializing the PaprizeReport class in vanilla JavaScript and adding a report section with specified dimensions and margins. It requires the '@paprize/vanilla' and '@paprize/core' modules. The output is a console log indicating the number of sections generated and confirmation of successful pagination.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Vanilla Paprize Report</title>
</head>
<body>
  <div id="report-section" data-paprize-section>
    <div data-paprize-page-header>
      <h1>Report Header</h1>
    </div>

    <div data-paprize-page-content>
      <h2>Sales Data</h2>
      <p>This content will be automatically paginated...</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>

    <div data-paprize-page-footer>
      <p>Page <span data-paprize-v-page-number></span></p>
    </div>
  </div>

  <script type="module">
    import { PaprizeReport } from '@paprize/vanilla';
    import { pageSize, pageMargin } from '@paprize/core';

    const report = new PaprizeReport({
      root: document.body,
      keepInitialElementAfterPagination: false
    });

    await report.addSection({
      id: 'report-section',
      size: pageSize.A4,
      margin: pageMargin.Normal,
      orientation: 'portrait'
    });

    const result = await report.schedulePagination();

    console.log(`Report generated with ${result.sections.length} sections`);

    // Wait for all suspended sections to complete
    await result.suspension;
    console.log('All sections paginated successfully');
  </script>
</body>
</html>
```

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

### Initialize PaprizeReport and Add Section

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/paprize-report.md

Initializes a new PaprizeReport instance and adds a report section with specified dimensions and margins. Requires '@paprize/core' and '@paprize/vanilla' packages. The function returns a Promise that resolves after the section is added.

```typescript
import { pageSize, pageMargin } from '@paprize/core';
import { PaprizeReport } from '@paprize/vanilla';

const report = new PaprizeReport();

await report.addSection({
    id: 'section-1',
    dimension: pageSize.A4,
    margin: pageMargin.Narrow,
    ...configs,
});
```

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

### Create HTML report structure

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/zero-config.md

Defines the basic HTML structure for a report using data attributes for page sections and content. This structure is used as input for the report generation process. No external dependencies needed.

```html
<div data-pz-preview>
    <div data-pz-section>
        <div data-pz-page-header>
            <h2>Page <span data-pz-v-page-number></span></h2>
        </div>

        <div data-pz-page-content>...</div>
    </div>
</div>
```

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

### Generate PDF from HTML report

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/zero-config.md

Uses @paprize/puppeteer to convert an HTML report file to PDF. Requires Puppeteer and fs modules. Takes a static HTML file path as input and outputs a PDF file.

```typescript
import { reportToPdf } from '@paprize/puppeteer';
import { promises as fs } from 'fs';
import puppeteer, { type Browser } from 'puppeteer';

let browser!: Browser;

try {
    browser = await puppeteer.launch({ headless: true });

    const page = await browser.newPage();

    const pdf = await reportToPdf(
        page,
        new URL(`file://${import.meta.dirname}/report.html`)
    );

    await fs.writeFile('report.pdf', pdf);
} finally {
    await browser.close();
}
```

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

### Create a Section in Vanilla JavaScript

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Demonstrates how to add a new section to a Paprize report using Vanilla JavaScript. It involves defining a section in HTML and then configuring it programmatically with options like page size and margin. Dependencies include the PaprizeReport class and configuration objects for page size and margin.

```html
<div data-pz-section id="section-1">...</div>
```

```javascript
const report = new PaprizeReport();
await report.addSection({
    id: 'section-1',
    dimension: pageSize.A4,
    margin: pageMargin.Narrow,
    ...configs,
});
```

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

### Core Paginator API in TypeScript

Source: https://context7.com/pejmannik/paprize/llms.txt

Static method for paginating DOM content into pages. Takes a content element and page dimensions, returns HTML strings for each page. Requires @paprize/core package.

```typescript
import { Paginator } from '@paprize/core';

// Create a container with report content
const contentElement = document.getElementById('report-content');

// Define page size (height and width in pixels)
const pageSize = { height: 1056, width: 816 }; // A4 at 96 DPI

// Paginate the content
const paginatedPages = Paginator.paginate(contentElement, pageSize, {
  id: 'my-report',
  plugins: []
});

// Result is an array of HTML strings, one per page
console.log(`Generated ${paginatedPages.length} pages`);
paginatedPages.forEach((pageHtml, index) => {
  console.log(`Page ${index + 1}: ${pageHtml.substring(0, 100)}...`);
});
```

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

### Puppeteer PDF Generation from HTML Report

Source: https://context7.com/pejmannik/paprize/llms.txt

Generates a PDF file from an HTML report using Puppeteer. It launches a headless Chrome instance, serves the report locally, optionally injects JSON data, and converts the report to PDF. Dependencies include 'puppeteer-core', '@paprize/puppeteer', and 'fs/promises'. The output is a 'report.pdf' file.

```javascript
import puppeteer from 'puppeteer-core';
import { reportToPdf, serveReport } from '@paprize/puppeteer';
import { writeFile } from 'fs/promises';
import path from 'path';

async function generatePDF() {
  // Launch Puppeteer browser
  const browser = await puppeteer.launch({
    headless: true,
    executablePath: '/usr/bin/google-chrome'
  });

  try {
    const page = await browser.newPage();

    // Serve the report HTML file locally
    const server = await serveReport(path.join(__dirname, 'dist'));
    const reportUrl = new URL('http://localhost:' + server.port);

    // Optional: Inject JSON data into the report
    const jsonData = {
      companyName: 'Acme Corporation',
      fiscalYear: 2024,
      revenue: 5000000,
      employees: 150
    };

    // Generate PDF with timeout and custom options
    const pdfBuffer = await reportToPdf(page, reportUrl, jsonData, {
      timeout: 60000,
      printBackground: true,
      preferCSSPageSize: true
    });

    // Save to file
    await writeFile('report.pdf', pdfBuffer);
    console.log('PDF generated successfully: report.pdf');

    // Cleanup
    await server.close();
  } finally {
    await browser.close();
  }
}

generatePDF().catch(console.error);
```

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

### Use Default Plugins with Custom Plugins (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/plugin.md

Shows how to combine custom plugins with Paprize's default plugins.  By spreading the defaultPlugins array into a custom array, built-in functionality can be retained. This ensures that functionalities like PageBreakPlugin and TablePlugin remain available.

```typescript
import { defaultPlugins } from '@paprize/core';

const customPlugins = [myCustomPlugin, ...defaultPlugins];
```

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

### Implementing Page Content in Vanilla and React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

The Page Content component holds the main report content and is essential for pagination, which operates only on this component by splitting content across pages based on section settings like page size, headers, and footers. It requires placement within a Section and uses cloned DOM elements for pagination, discarding original elements and states post-processing. Inputs include the content to paginate; outputs are paginated pages; limitations include no state preservation after pagination.

```html
<div data-pz-page-content>...</div>
```

```tsx
<PageContent>...</PageContent>
```

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

### Selectively Import PageBreakPlugin (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/plugin.md

Demonstrates how to selectively import and use specific plugins such as PageBreakPlugin.  This offers more control over included plugins and avoids unnecessary imports.

```typescript
import { PageBreakPlugin } from '@paprize/core';

const customPlugins = [myCustomPlugin, new PageBreakPlugin()];
```

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

### Report Preview Custom Styling with Screen Media Query in CSS

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-preview.md

Applies custom styles to specific classes within a screen media query to target preview elements without affecting print output. Targets classes like .paprize-preview, .paprize-page, and .paprize-section. Purpose is to customize on-screen appearance; no dependencies; inputs are CSS rules, outputs are styled elements; limitations require media query to avoid print interference.

```css
@media screen {
    .paprize-preview {
    }
    .paprize-page {
    }
    .paprize-section {
    }
}
```

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

### Attribute-Based Page Info

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/page-info.md

Use data attributes for simple page and section information display, especially with Zero Config.

```APIDOC
## Attribute-Based Page Info

### Description
For simple use cases or when using Zero Config, you can leverage attribute-based page info. The content of elements with specific attributes will be replaced with corresponding values after pagination.

### Available Attributes
- **Current Page Number:** `data-pz-v-page-number`
- **Total Number of Pages:** `data-pz-v-total-pages`
- **Current Section Number:** `data-pz-v-section-number`
- **Total Number of Sections:** `data-pz-v-total-sections`

### Example

**HTML Markup:**
```html
<span data-pz-v-total-pages></span>
```

**After Pagination (if current section has 10 pages):**
```html
<span data-pz-v-total-pages>10</span>
```
```

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

### PaprizeReport Events

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/page-info.md

Subscribe to pagination events to update report content dynamically. Includes pageCompleted, sectionCompleted, and paginationCycleCompleted.

```APIDOC
## PaprizeReport Events

### Description
Monitor the `monitor` property of `PaprizeReport` to subscribe to pagination events and update report content with corresponding page information. Be cautious when modifying element content within these events as changes are applied after pagination and can affect page height.

### PageCompleted Event
Triggered after pagination is completed for each page. Provides page information and fires once per page in each pagination cycle.

- **Event Name**: `pageCompleted`
- **Event Object**: `DomPageContext`

#### Example Usage
```tsx
const report = new PaprizeReport();
report.monitor.addEventListener('pageCompleted', (pageContext) => {
    if (pageContext.pageHeader) {
        pageContext.pageHeader.innerHTML = `<h4>Page Header ${pageContext.index + 1} of ${pageContext.totalPages}</h4>`;
    }
});
```

### SectionCompleted Event
Triggered when a section has been fully paginated. Provides section information and fires once per report in each pagination cycle.

- **Event Name**: `sectionCompleted`
- **Event Object**: `DomSectionContext`

### PaginationCycleCompleted Event
Triggered when an entire pagination cycle is completed. Provides information about all paginated sections and fires at least once after scheduling pagination. This event triggers again if a suspended section becomes unsuspend.

- **Event Name**: `paginationCycleCompleted`
- **Event Object**: `DomPaginationCycleCompleted`
```

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

### Create a Section in React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Shows how to implement a Paprize report section within a React application. It involves using the Section component and passing configuration props such as margin, dimension, and orientation. Advanced customization can be achieved via Layout components or Plugins. Dependencies include React and Paprize's React components.

```typescript
<Section
    margin={pageMargin.Narrow}
    dimension={pageSize.A4}
    orientation={'landscape'}
    {...configs}
>
    ...
</Section>
```

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

### Implementing Page Footer in Vanilla and React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

The Page Footer appears at the end of each page and, if a Section Footer exists, precedes it on the last page. It must be a direct child of the Section and handles per-page footer content. Inputs include footer elements; outputs are footers appended to each page; limitations include positioning after content but before section footers on the final page.

```html
<div data-pz-page-footer>...</div>
```

```tsx
<PageFooter>...</PageFooter>
```

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

### Configure Page Sizes and Margins in TypeScript

Source: https://context7.com/pejmannik/paprize/llms.txt

This code snippet shows how to use predefined page sizes and margin settings from the @paprize/core package for common paper formats in report sections. It depends on @paprize/core and optionally JSX for rendering. Inputs are predefined size and margin constants or custom objects, with no direct outputs other than configured Section components. Limitations involve adherence to standard formats; custom sizes may cause rendering inconsistencies in some PDF generators.

```typescript
import { pageSize, pageMargin } from '@paprize/core';

// Available page sizes
const sizes = {
  a4: pageSize.A4,           // 210mm × 297mm
  a3: pageSize.A3,           // 297mm × 420mm
  letter: pageSize.Letter,   // 8.5in × 11in
  legal: pageSize.Legal,     // 8.5in × 14in
  tabloid: pageSize.Tabloid  // 11in × 17in
};

// Available margins
const margins = {
  none: pageMargin.None,         // 0mm all sides
  narrow: pageMargin.Narrow,     // 12.7mm all sides
  normal: pageMargin.Normal,     // 25.4mm all sides
  wide: pageMargin.Wide          // 50.8mm all sides
};

// Usage in Section
<Section
  size={pageSize.A4}
  margin={pageMargin.Normal}
  orientation="portrait"
>
  <PageContent>
    {/* Content here */}
  </PageContent>
</Section>

// Custom size and margins
<Section
  size={{ height: 1200, width: 900 }}
  margin={{ top: 50, right: 40, bottom: 50, left: 40 }}
  orientation="portrait"
>
  <PageContent>
    {/* Content here */}
  </PageContent>
</Section>
```

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

### ReportBuilder Event Monitoring for Pagination Lifecycle

Source: https://context7.com/pejmannik/paprize/llms.txt

Subscribes to various pagination lifecycle events using the ReportBuilder from '@paprize/core'. It logs events such as section creation, page completion, section completion, and the overall pagination cycle completion. This allows for progress tracking and custom handling during the report generation process. Requires an async context to await scheduling.

```typescript
import { ReportBuilder } from '@paprize/core';

const reportBuilder = new ReportBuilder();

// Monitor section creation
reportBuilder.monitor.addEventListener('sectionCreated', (context) => {
  console.log(`Section created: ${context.sectionId}, index: ${context.sectionIndex}`);
});

// Monitor page completion
reportBuilder.monitor.addEventListener('pageCompleted', (pageContext) => {
  console.log(`Page ${pageContext.pageIndex + 1} of section ${pageContext.sectionId} completed`);
  console.log(`Total pages in section: ${pageContext.totalPages}`);
});

// Monitor section completion
reportBuilder.monitor.addEventListener('sectionCompleted', (sectionContext) => {
  console.log(`Section ${sectionContext.sectionId} completed with ${sectionContext.pages.length} pages`);
  console.log(`Is paginated: ${sectionContext.isPaginated}`);
  console.log(`Is suspended: ${sectionContext.isSuspended}`);
});

// Monitor full pagination cycle completion
reportBuilder.monitor.addEventListener('paginationCycleCompleted', (result) => {
  console.log(`Pagination cycle completed for ${result.sections.length} sections`);
  result.sections.forEach(section => {
    console.log(`  - ${section.sectionId}: ${section.pages.length} pages`);
  });
});

// Add sections and trigger pagination
await reportBuilder.tryAddSection(
  { id: 'section-1', size: { height: 1056, width: 816 } },
  components, // Assuming 'components' is defined elsewhere
  async (pages) => { /* render pages */ }
);

await reportBuilder.schedulePagination();
```

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

### useSectionInfo Hook

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

Retrieves information about the current section and its associated pages.

```APIDOC
## useSectionInfo

### Description
Get information about the current section and its pages.

### Method
React Hook

### Endpoint
N/A (Hook)

### Parameters
None

### Request Example
```jsx
const { sectionId } : SectionInfo = useSectionInfo();
```

### Response
#### Success Response (Object)
- **sectionId** (string) - The unique identifier for the current section.

#### Response Example
```json
{
  "sectionId": "introduction"
}
```
```

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

### useReportInfo Hook

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

Retrieves information about all sections within the entire report.

```APIDOC
## useReportInfo

### Description
Retrieves information about all sections within the report.

### Method
React Hook

### Endpoint
N/A (Hook)

### Parameters
None

### Request Example
```jsx
const { sections } = useReportInfo();
```

### Response
#### Success Response (Object)
- **sections** (array) - An array containing information about each section in the report.
  - Each section object may contain properties like `sectionId`, `title`, etc.

#### Response Example
```json
{
  "sections": [
    {
      "sectionId": "introduction",
      "title": "Introduction"
    },
    {
      "sectionId": "chapter-1",
      "title": "Chapter 1: Getting Started"
    }
  ]
}
```
```

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

### Report Preview Wrapper Usage in HTML and TSX

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-preview.md

Wraps report sections to enable preview styling that mimics Chrome's print preview. In Vanilla HTML, use the data-pz-preview attribute on a div containing section elements; in React, nest ReportPreview inside ReportRoot with Section children. Dependencies include Section components; limitations involve potential interference from browser extensions during print.

```html
<div data-pz-preview>
    <div data-pz-section ...>...</div>
    <div data-pz-section ...>...</div>
</div>
```

```tsx
<ReportRoot>
    <ReportPreview>...</ReportPreview>
</ReportRoot>
```

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

### Configure Layout Pagination Options - HTML & React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/layout-components.md

Customizes pagination behavior through hyphenation and page keeping settings. HTML implementation uses data attributes directly on elements. React implementation wraps children in a Layout component with props. Configuration follows precedence: component props > parent props > global Section config.

```html
<p
    data-pz-hyphen="-"
    data-pz-keep-on-same-page="true"
    data-pz-hyphenation-enabled="true"
>
    ...
</p>
```

```jsx
<Layout hyphen={'-'} keepOnSamePage={true} hyphenationEnabled={true}>
    <p>...</p>
</Layout>
```

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

### Use PageBreakPlugin (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/plugin.md

Illustrates the usage of `PageBreakPlugin` to control page breaks based on HTML attributes.  The plugin splits pages based on elements with `data-pz-page-break="true"`.

```typescript
import { PageBreakPlugin } from '@paprize/core';

const plugins = [new PageBreakPlugin()];
```

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

### usePageInfo Hook

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

Retrieves the current page index and total number of pages within the current section.

```APIDOC
## usePageInfo

### Description
Gets the current page info (index and total pages) within the current section.

### Method
React Hook

### Endpoint
N/A (Hook)

### Parameters
None

### Request Example
```jsx
const { pageIndex, totalPages } = usePageInfo();
```

### Response
#### Success Response (Object)
- **pageIndex** (number) - The index of the current page.
- **totalPages** (number) - The total number of pages in the current section.

#### Response Example
```json
{
  "pageIndex": 5,
  "totalPages": 10
}
```
```

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

### Using usePageInfo Hook in JSX

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/page-info.md

This code snippet demonstrates the use of the usePageInfo hook to access the current page index and total pages within a React component. It requires the component to be within a pagination context. Inputs: None direct; outputs: pageIndex (number) and totalPages (number). Limitations: May trigger re-renders; use Layout Suspension to avoid loops.

```jsx
const { pageIndex, totalPages } = usePageInfo();
```

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

### Implementing Page Overlay in Vanilla and React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

The Page Overlay adds extra content on top of or behind each page, suitable for watermarks or fixed elements like live inputs at specific positions. Overlays are not paginated, requiring user handling of collisions; they must be direct children of the Section. Inputs include positioned elements; outputs are overlaid content per page; limitations include manual collision management and no automatic pagination adjustment.

```html
<div data-pz-page-overlay>
    <div
        style="
                position: absolute;
                z-index: -1;
                top: 50%;
                transform: rotate(-90deg);
            "
    >
        watermark
    </div>
</div>
```

```tsx
<PageOverlay>
    <div
        style={{
            position: 'absolute',
            zIndex: -1,
            top: '50%',
            transform: 'rotate(-90deg)',
        }}
    >
        watermark
    </div>
</PageOverlay>
```

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

### Attribute-Based Page Information Display

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/page-info.md

Demonstrates using custom data attributes for simple, attribute-based population of pagination information like total pages directly within HTML elements. The content is updated after the pagination process.

```html
<span data-pz-v-total-pages></span>
```

```html
<span data-pz-v-total-pages>10</span>
```

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

### Customizing Report Preview with CSS Variables

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-preview.md

Overrides default styles by setting CSS custom properties for elements like page background, margins, and shadows. These variables affect the overall preview appearance and should be defined globally or on the preview container. No specific dependencies; outputs styled report sections with inputs as variable values; limitations include ensuring compatibility with print media.

```css
--paprize-page-background-color: #ffffff;
--paprize-page-margin-bottom: 10px;
--paprize-page-box-shadow: rgb(142 138 138) -1px 3px 5px 2px;
--paprize-section-margin-bottom: 10px;
--paprize-preview-background-color: rgb(218 220 224);
--paprize-preview-padding: 30px 10px;
```

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

### React ReportRoot Component in TSX

Source: https://context7.com/pejmannik/paprize/llms.txt

Root component for React reports with pagination lifecycle management. Includes page headers, footers, and content sections. Requires @paprize/react package.

```tsx
import { ReportRoot, ReportPreview, Section, PageContent, PageHeader, PageFooter } from '@paprize/react';
import { pageSize } from '@paprize/core';

function MyReport() {
  return (
    <ReportRoot>
      <ReportPreview>
        <Section size={pageSize.A4}>
          <PageHeader>
            <div style={{ padding: '20px', borderBottom: '2px solid #000' }}>
              <h1>Company Report 2024</h1>
            </div>
          </PageHeader>

          <PageContent>
            <h2>Financial Overview</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            <table>
              <thead>
                <tr><th>Quarter</th><th>Revenue</th><th>Profit</th></tr>
              </thead>
              <tbody>
                <tr><td>Q1</td><td>$1.2M</td><td>$200K</td></tr>
                <tr><td>Q2</td><td>$1.5M</td><td>$300K</td></tr>
              </tbody>
            </table>
          </PageContent>

          <PageFooter>
            <div style={{ padding: '10px', textAlign: 'center' }}>
              Page <span data-paprize-v-page-number></span> of <span data-paprize-v-total-pages></span>
            </div>
          </PageFooter>
        </Section>
      </ReportPreview>
    </ReportRoot>
  );
}

export default MyReport;
```

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

### Add Section Header in Vanilla/Zero

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Defines a section header for a Paprize report using Vanilla JavaScript or the Zero configuration. This header appears only on the first page of a section. The implementation involves adding a specific data attribute to a div element.

```html
<div data-pz-section-header>...</div>
```

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

### Implementing Section Footer in Vanilla and React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

The Section Footer renders only at the end of the entire Section, specifically on the last page after any Page Footer. It requires direct placement within the Section for final section-level content. Inputs include section-end elements; outputs are a single footer on the last page; limitations include exclusive rendering on the final page, ignoring multi-page distribution.

```html
<div data-pz-section-footer>...</div>
```

```tsx
<SectionFooter>...</SectionFooter>
```

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

### React Section Component in TSX

Source: https://context7.com/pejmannik/paprize/llms.txt

Defines report sections with page size, margins, and orientation. Supports section headers/footers and automatic content pagination. Requires @paprize/react and @paprize/core.

```tsx
import { Section, PageContent, SectionHeader, SectionFooter } from '@paprize/react';
import { pageSize, pageMargin } from '@paprize/core';

function MultiSectionReport() {
  return (
    <>
      <Section id="cover" size={pageSize.A4} orientation="portrait">
        <PageContent>
          <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <h1 style={{ fontSize: '48px' }}>Annual Report</h1>
          </div>
        </PageContent>
      </Section>

      <Section
        id="content"
        size={pageSize.A4}
        orientation="landscape"
        margin={pageMargin.Normal}
      >
        <SectionHeader>
          <h2 style={{ padding: '20px', background: '#f0f0f0' }}>Main Content Section</h2>
        </SectionHeader>

        <PageContent>
          <div>
            {Array.from({ length: 50 }).map((_, i) => (
              <p key={i}>Paragraph {i + 1} with content that will be paginated automatically.</p>
            ))}
          </div>
        </PageContent>

        <SectionFooter>
          <div style={{ padding: '20px', borderTop: '1px solid #ccc' }}>
            End of section footer
          </div>
        </SectionFooter>
      </Section>
    </>
  );
}
```

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

### Monitor Page Completion Event in PaprizeReport

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/page-info.md

Subscribes to the 'pageCompleted' event using PaprizeReport's monitor. This allows dynamic updates to page headers with current and total page numbers after pagination.

```tsx
const report = new PaprizeReport();
report.monitor.addEventListener('pageCompleted', (pageContext) => {
    if (pageContext.pageHeader) {
        pageContext.pageHeader.innerHTML = `<h4>Page Header ${pageContext.index + 1} of ${pageContext.totalPages}</h4>`;
    }
});
```

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

### Bind JSON Data to HTML Elements via data-pz-v-json-data-key Attribute (HTML)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/inject-data.md

These HTML snippets demonstrate how to bind JSON data to page elements using the data-pz-v-json-data-key attribute. After pagination, the element's content is automatically replaced with the corresponding JSON value. This works for both Zero and Vanilla implementations.

```HTML
<span data-pz-v-json-data-key="info.lastName"></span>
```

```HTML
<span data-pz-v-json-data-key="info.name"></span>
```

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

### Schedule Pagination for PaprizeReport

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/paprize-report.md

Schedules the pagination operation for a PaprizeReport instance. This function is asynchronous and returns a Promise. It's important to note that parallel pagination is not supported.

```typescript
await r.schedulePagination();
```

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

### Initialize useSectionSuspension Hook

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/section-suspension.md

Initializes the useSectionSuspension hook to control pagination timing. Returns release and reset functions to manage when the section should be paginated. Used when a section depends on data from other sections, such as a table of contents.

```jsx
const { release, reset } = useSectionSuspension();
```

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

### Inject JSON Data in Reports with React TSX

Source: https://context7.com/pejmannik/paprize/llms.txt

This snippet demonstrates how to access server-side injected JSON data within React-based reports using the @paprize/react hook for dynamic content rendering. It requires the @paprize/react package and provides a default data structure as fallback. Inputs are a default ReportData object, outputs are rendered report elements including tables. Limitations include dependency on server-side data injection for production use and potential performance issues with large datasets.

```tsx
import { useJsonData } from '@paprize/react';

interface ReportData {
  companyName: string;
  fiscalYear: number;
  departments: Array<{
    name: string;
    budget: number;
    employees: number;
  }>;
}

function DynamicReport() {
  const defaultData: ReportData = {
    companyName: 'Demo Company',
    fiscalYear: 2024,
    departments: [
      { name: 'Engineering', budget: 2000000, employees: 50 },
      { name: 'Sales', budget: 1500000, employees: 30 }
    ]
  };

  const data = useJsonData<ReportData>(defaultData);

  return (
    <PageContent>
      <h1>{data?.companyName} - {data?.fiscalYear}</h1>

      <table>
        <thead>
          <tr>
            <th>Department</th>
            <th>Budget</th>
            <th>Employees</th>
          </tr>
        </thead>
        <tbody>
          {data?.departments.map(dept => (
            <tr key={dept.name}>
              <td>{dept.name}</td>
              <td>${dept.budget.toLocaleString()}</td>
              <td>{dept.employees}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </PageContent>
  );
}
```

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

### Inject JSON Data into Report via reportToPdf (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/inject-data.md

This snippet reads a JSON file using Node's fs module and passes the serialized data to the reportToPdf function. It enables dynamic data injection during the report building process. The code requires a page context and a valid JSON file path.

```TypeScript
import { promises as fs } from 'fs';

const jsonData = await fs.readFile('my-json-data.json', 'utf-8');
await reportToPdf(page, '/', jsonData);
```

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

### Suspend Section with Promises in TypeScript

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/vanilla/section-suspension.md

Demonstrates suspending a section's pagination using a promise. The section will be skipped until the promise resolves. This requires the `PaprizeReport` and `pageSize` objects.

```typescript
const report = new PaprizeReport();

let resolve: () => void;
const myPromise = new Promise<void>((res) => {
    resolve = res;
});

await report.addSection({
    id: 'section-1',
    dimension: pageSize.A4,
    suspense: [myPromise],
});

await report.addSection({
    id: 'section-2',
    dimension: pageSize.A4,
});

// Pagination will not run for section-1, but section-2 will be paginated.
await r.schedulePagination();

// After 2 seconds, the pagination operation will run for section-1.
setTimeout(() => {
    resolve();
}, 2000);
```

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

### Add PageBreak Component - HTML & React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/layout-components.md

Forces page breaks in Paprize reports. The vanilla HTML version uses a data attribute on a div element. The React version uses a self-closing PageBreak component. Both achieve the same result of pushing content to the next page.

```html
<div data-pz-page-break></div>
```

```tsx
<PageBreak />
```

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

### Add Page Header in React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Adds a page header to a Paprize report in a React environment. The 'PageHeader' component is used to define content that appears on every page. It must be a direct child of the 'Section' component, and on the first page, it renders after the 'SectionHeader' if one is present.

```typescript
<PageHeader>...</PageHeader>
```

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

### Implement Section List Component with Suspension in TypeScript

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/react/section-suspension.md

Implements a React component that displays all section names while suspending its own pagination until all other sections complete pagination. Uses useReportInfo and useSectionInfo hooks to access section data, then releases suspension via useEffect when all sections are paginated.

```tsx
function SectionList() {
    const { sections } = useReportInfo();
    const { sectionId } = useSectionInfo();
    const { release, reset } = useSectionSuspension();

    const allOtherArePaginated = sections.every((s) =>
        s.sectionId === sectionId ? !s.isPaginated : s.isPaginated
    );

    useEffect(() => {
        if (allOtherArePaginated) {
            release();
        }
    }, [release, allOtherArePaginated]);

    return (
        <nav>
            <ul>
                {sections.map((section) => (
                    <li key={section.sectionName}>{section.sectionName}</li>
                ))}
            </ul>
        </nav>
    );
}
```

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

### Define Report Data Interface and Default Values (TypeScript)

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/puppeteer/inject-data.md

This snippet declares a TypeScript interface describing the shape of the report data and provides a default data object. It serves as a contract for the JSON structure expected by the report. The default values can be used directly when injecting data.

```TypeScript
interface MyReportData {
    info: {
        name: string;
        lastName: string;
        age: number;
    };
}

const defaultData = {
    info: { name: 'John', lastName: 'Doe', age: 44 },
};
```

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

### Add Section Header in React

Source: https://github.com/pejmannik/paprize/blob/main/packages/website/docs/components/report-components.md

Implements a section header within a React-based Paprize report. The 'SectionHeader' component is used to define content that will be rendered exclusively on the first page of a section. This component must be a direct child of the 'Section' component.

```typescript
<SectionHeader>...</SectionHeader>
```

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