paged-react 0.1.0

package/README.md

@@ -0,0 +1,173 @@
+# paged-react
+
+React components for building print-ready documents with automatic pagination.
+
+The examples below use the expected npm package name:
+
+```sh
+npm install paged-react
+```
+
+## Quick Start
+
+Import the components and the package stylesheet once in your app.
+
+```tsx
+import { Document, PageBreak, pageSizes } from "paged-react";
+import "paged-react/styles.css";
+// The package imports its base CSS from the main entry. If your bundler does not load library CSS side effects, import `paged-react/styles.css` manually.
+
+export function Report() {
+  return (
+    <Document>
+      <Document.Segment pageSize={pageSizes.A4} className="report-page">
+        <Document.Header>
+          <h1>Monthly Report</h1>
+        </Document.Header>
+
+        <Document.Body>
+          <p>This content will be split into pages when it gets too long.</p>
+          <PageBreak />
+          <p>This starts on the next page.</p>
+        </Document.Body>
+
+        <Document.Footer>
+          <span>Company footer</span>
+        </Document.Footer>
+      </Document.Segment>
+    </Document>
+  );
+}
+```
+
+`Document.Segment` must receive a `pageSize`. Use a built-in size such as `pageSizes.A4`, `pageSizes.Letter`, or pass your own size object:
+
+```tsx
+<Document.Segment pageSize={{ width: "210mm", height: "297mm" }}>
+  {/* header, body, and footer */}
+</Document.Segment>
+```
+
+## Printing
+
+`paged-react` creates the paginated DOM. Use `react-to-print` to open the browser print dialog.
+
+```tsx
+import { useRef } from "react";
+import { useReactToPrint } from "react-to-print"; // npm i react-to-print
+import { Document, pageSizes } from "paged-react";
+import "paged-react/styles.css";
+
+export function PrintableReport() {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const print = useReactToPrint({ contentRef });
+
+  return (
+    <>
+      <button type="button" onClick={print}>
+        Print
+      </button>
+
+      <Document ref={contentRef}>
+        <Document.Segment pageSize={pageSizes.A4}>
+          <Document.Header>Header</Document.Header>
+          <Document.Body>Report content</Document.Body>
+          <Document.Footer>Footer</Document.Footer>
+        </Document.Segment>
+      </Document>
+    </>
+  );
+}
+```
+
+## Optional Screen Preview CSS
+
+The package CSS handles the document structure. Add this optional CSS in your app to make pages look nicer on screen before printing:
+
+```css
+@media screen {
+  [data-paged-react-pages] {
+    gap: 24px;
+  }
+
+  [data-paged-react-page] {
+    border: 1px solid gray;
+  }
+}
+```
+
+## Main Pieces
+
+- `Document`: the root component. Attach your print ref here.
+- `Document.Segment`: one paginated section with its own page size.
+- `Document.Header`: repeated at the top of every generated page in the segment.
+- `Document.Body`: the content that gets split across pages.
+- `Document.Footer`: repeated at the bottom of every generated page in the segment.
+- `PageBreak`: starts following content on a new page.
+- `Watermark`: renders a watermark inside the document.
+- `pageSizes`: built-in page sizes, including A-series, B4, B5, Letter, Legal, and Ledger.
+
+Slots accept normal `div` props such as `className`, `style`, `id`, `data-*`, and `aria-*`.
+
+## Watermark
+
+Use `Watermark` inside `Document`. It receives a render function with the current zero-based `pageIndex` and the generated `pages` array. The `Watermark` component gets copied over and rendered to every-single page.
+
+```tsx
+<Document>
+  <Document.Segment pageSize={pageSizes.A4}>
+    <Document.Body>Report content</Document.Body>
+  </Document.Segment>
+
+  <Watermark>
+    {({ pageIndex, pages }) => (
+      <div>
+        Draft - page {pageIndex + 1} of {pages.length}
+      </div>
+    )}
+  </Watermark>
+</Document>
+```
+
+The rendered watermark is portaled into each generated page.
+
+## Tables
+
+Direct child `<table>` elements inside `Document.Body` can be split by row when they overflow a page.
+
+```tsx
+<Document.Segment pageSize={pageSizes.A4} repeatTableHeader>
+  <Document.Body>
+    <table>{/* rows */}</table>
+  </Document.Body>
+</Document.Segment>
+```
+
+If a table has a `<thead>`, the first table fragment keeps that header even when `repeatTableHeader` is not set. Use `repeatTableHeader` on `Document.Segment` when continuation pages should also repeat the original `<thead>`.
+
+## Page Breaks
+
+Use `PageBreak` for an explicit new page. This is the supported way to force a page break.
+
+`page-break-inside: avoid` is supported as a keep-together hint. Use it when a block should move to the next page instead of being split across pages.
+
+`break-before`, `page-break-before`, `break-after`, and `page-break-after` are intentionally ignored. Use `PageBreak` so there is only one explicit way to force a new page.
+
+## Limitations
+
+- This is not a full browser print engine. It uses DOM measurement and cloning to build pages.
+- Pagination runs in the browser, so output can vary slightly between browsers, fonts, zoom levels, and loaded assets.
+- Very complex layouts can be difficult to split perfectly, especially grids, flex-heavy layouts, positioned elements, transforms, and deeply nested components.
+- If an item cannot be broken down and does not fit in one page, it stays on a single generated page and is clipped.
+- Tables are best supported when the table is a direct child of `Document.Body`.
+- Images and custom fonts should be loaded before printing for the most reliable result.
+- Server-side rendering cannot know final page breaks because pagination depends on browser layout measurement.
+
+## Styling Hooks
+
+- `[data-paged-react-document]`: root container
+- `[data-paged-react-pages]`: generated pages wrapper
+- `[data-paged-react-page]`: generated page
+- `[data-paged-react-page-header]`: rendered header slot
+- `[data-paged-react-page-body]`: rendered body slot
+- `[data-paged-react-page-footer]`: rendered footer slot

package/dist/components/context.d.ts

@@ -0,0 +1,4 @@
+export declare const context: import("react").Context<{
+    pages: HTMLElement[] | null;
+} | null>;
+//# sourceMappingURL=context.d.ts.map

package/dist/components/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/components/context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;WAA0B,WAAW,EAAE,GAAG,IAAI;SAAgB,CAAC"}

package/dist/components/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+export const context = createContext(null);
+//# sourceMappingURL=context.js.map

package/dist/components/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/components/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAyC,IAAI,CAAC,CAAC"}

package/dist/components/document.d.ts

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import type { DocumentProps } from "../types.js";
+type DocumentComponent = ReturnType<typeof forwardRef<HTMLDivElement, DocumentProps>> & {
+    Segment: typeof DocumentSegment;
+    Header: typeof DocumentHeader;
+    Body: typeof DocumentBody;
+    Footer: typeof DocumentFooter;
+};
+export declare const DocumentSegment: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: import("react").ReactNode;
+    pageSize: import("../types.js").PageSize;
+    repeatTableHeader?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DocumentHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DocumentBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DocumentFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Document: DocumentComponent;
+export {};
+//# sourceMappingURL=document.d.ts.map

package/dist/components/document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../src/components/document.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwC,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAIV,aAAa,EAEd,MAAM,aAAa,CAAC;AAGrB,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,GAAG;IACtF,OAAO,EAAE,OAAO,eAAe,CAAC;IAChC,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,MAAM,EAAE,OAAO,cAAc,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;kDAsB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;kDAQ1B,CAAC;AAEF,eAAO,MAAM,YAAY;;kDASvB,CAAC;AAEH,eAAO,MAAM,cAAc;;kDAQ1B,CAAC;AA4EF,eAAO,MAAM,QAAQ,EAKf,iBAAiB,CAAC"}

package/dist/components/document.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { paginateDocument } from "../core/paginate.js";
+import { resolvePageSize } from "../utils/page-size.js";
+import { context } from "./context.js";
+export const DocumentSegment = forwardRef(function DocumentSegment({ children, pageSize, repeatTableHeader, style, ...props }, ref) {
+    const resolvedPageSize = resolvePageSize(pageSize);
+    return (_jsx("div", { ...props, ref: ref, "data-paged-react-repeat-table-header": String(repeatTableHeader === true), "data-paged-react-page-height": resolvedPageSize.height, "data-paged-react-page-width": resolvedPageSize.width, "data-paged-react-segment-source": "", style: {
+            ...style,
+            minHeight: resolvedPageSize.height,
+            width: resolvedPageSize.width,
+        }, children: children }));
+});
+export const DocumentHeader = forwardRef(function DocumentHeader({ children, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-paged-react-header-source": "", children: children }));
+});
+export const DocumentBody = forwardRef(function DocumentBody({ children, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-paged-react-body-source": "", children: children }));
+});
+export const DocumentFooter = forwardRef(function DocumentFooter({ children, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-paged-react-footer-source": "", children: children }));
+});
+const DocumentRoot = forwardRef(function Document({ children, ...props }, ref) {
+    const sourceRef = useRef(null);
+    const pagesRef = useRef(null);
+    const [pages, setPages] = useState(null);
+    const mergedRef = useMemo(() => {
+        return (node) => {
+            pagesRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        };
+    }, [ref]);
+    useEffect(() => {
+        const sourceRoot = sourceRef.current;
+        const pagesRoot = pagesRef.current;
+        if (!sourceRoot) {
+            return;
+        }
+        if (!pagesRoot) {
+            return;
+        }
+        const abortController = new AbortController();
+        setPages(null);
+        void paginateDocument({
+            sourceRoot,
+            pagesRoot,
+            signal: abortController.signal,
+        }).then((generatedPages) => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            setPages(generatedPages);
+        });
+        return () => {
+            abortController.abort();
+        };
+    }, [children]);
+    return (_jsx(context.Provider, { value: { pages }, children: _jsxs("div", { "data-paged-react-document-source": true, style: { display: "contents" }, children: [_jsx("div", { "data-paged-react-root-source": true, ref: sourceRef, style: {
+                        left: "-100000px",
+                        pointerEvents: "none",
+                        position: "absolute",
+                        visibility: "hidden",
+                        top: 0,
+                    }, children: children }), _jsx("div", { "data-paged-react-pages": true, ref: mergedRef, ...props })] }) }));
+});
+export const Document = Object.assign(DocumentRoot, {
+    Segment: DocumentSegment,
+    Header: DocumentHeader,
+    Body: DocumentBody,
+    Footer: DocumentFooter,
+});
+//# sourceMappingURL=document.js.map

package/dist/components/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","sourceRoot":"","sources":["../../src/components/document.tsx"],"names":[],"mappings":"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"}

package/dist/components/page-break.d.ts

@@ -0,0 +1,2 @@
+export declare const PageBreak: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=page-break.d.ts.map

package/dist/components/page-break.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-break.d.ts","sourceRoot":"","sources":["../../src/components/page-break.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,8MAUrB,CAAC"}

package/dist/components/page-break.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+export const PageBreak = forwardRef(function PageBreak(props, ref) {
+    return (_jsx("span", { ...props, ref: ref, "data-paged-react-page-break": "" }));
+});
+//# sourceMappingURL=page-break.js.map

package/dist/components/page-break.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-break.js","sourceRoot":"","sources":["../../src/components/page-break.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG;IAC3B,OAAO,CACL,kBACM,KAAK,EACT,GAAG,EAAE,GAAG,iCACoB,EAAE,GAC9B,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/components/watermark.d.ts

@@ -0,0 +1,7 @@
+export declare function Watermark(props: {
+    children: (ctx: {
+        pageIndex: number;
+        pages: HTMLElement[];
+    }) => React.ReactNode;
+}): import("react").ReactPortal[] | null;
+//# sourceMappingURL=watermark.d.ts.map

package/dist/components/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["../../src/components/watermark.tsx"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CACjF,wCAkDA"}

package/dist/components/watermark.js

@@ -0,0 +1,45 @@
+import { useContext, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { context } from "./context.js";
+export function Watermark(props) {
+    const { children } = props;
+    const ctx = useContext(context);
+    if (ctx === null) {
+        throw "Watermark component must be used within a Document component";
+    }
+    const { pages } = ctx;
+    const wrappers = useMemo(() => {
+        if (pages === null) {
+            return [];
+        }
+        return pages.map(() => {
+            const wrapper = document.createElement("div");
+            wrapper.setAttribute("data-paged-react-watermark", "");
+            return wrapper;
+        });
+    }, [pages]);
+    useEffect(() => {
+        if (pages === null) {
+            return;
+        }
+        for (const [pageIndex, page] of pages.entries()) {
+            const wrapper = wrappers[pageIndex];
+            if (wrapper === undefined) {
+                continue;
+            }
+            page.appendChild(wrapper);
+        }
+        return () => {
+            for (const wrapper of wrappers) {
+                wrapper.remove();
+            }
+        };
+    }, [pages, wrappers]);
+    if (pages === null) {
+        return null;
+    }
+    return wrappers.map((wrapper, pageIndex) => {
+        return createPortal(children({ pageIndex, pages }), wrapper, String(pageIndex));
+    });
+}
+//# sourceMappingURL=watermark.js.map

package/dist/components/watermark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.js","sourceRoot":"","sources":["../../src/components/watermark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,UAAU,SAAS,CAAC,KAEzB;IACC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEhC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,8DAA8D,CAAC;IACvE,CAAC;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC;IAEtB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;YACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC9C,OAAO,CAAC,YAAY,CAAC,4BAA4B,EAAE,EAAE,CAAC,CAAC;YACvD,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,KAAK,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;YAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;YACpC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC1B,SAAS;YACX,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;gBAC/B,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE;QACzC,OAAO,YAAY,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/core/avoid-break.d.ts

@@ -0,0 +1,2 @@
+export declare function canBreakElement(element: Element): boolean;
+//# sourceMappingURL=avoid-break.d.ts.map

package/dist/core/avoid-break.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avoid-break.d.ts","sourceRoot":"","sources":["../../src/core/avoid-break.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAoCzD"}

package/dist/core/avoid-break.js

@@ -0,0 +1,30 @@
+export function canBreakElement(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const tagName = element.tagName.toUpperCase();
+    if ([
+        "SVG",
+        "IMG",
+        "CANVAS",
+        "VIDEO",
+        "IFRAME",
+        "OBJECT",
+        "EMBED",
+        "INPUT",
+        "TEXTAREA",
+        "SELECT",
+        "BUTTON",
+    ].includes(tagName)) {
+        return false;
+    }
+    const computedStyle = getComputedStyle(element);
+    if (["avoid", "avoid-page", "avoid-column"].includes(computedStyle.breakInside)) {
+        return false;
+    }
+    if (computedStyle.pageBreakInside === "avoid") {
+        return false;
+    }
+    return true;
+}
+//# sourceMappingURL=avoid-break.js.map

package/dist/core/avoid-break.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avoid-break.js","sourceRoot":"","sources":["../../src/core/avoid-break.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,OAAgB;IAC9C,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IAE9C,IACE;QACE,KAAK;QACL,KAAK;QACL,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,OAAO;QACP,UAAU;QACV,QAAQ;QACR,QAAQ;KACT,CAAC,QAAQ,CAAC,OAAO,CAAC,EACnB,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAEhD,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC;QAChF,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,aAAa,CAAC,eAAe,KAAK,OAAO,EAAE,CAAC;QAC9C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/core/computed-style.d.ts

@@ -0,0 +1,19 @@
+export type BoxStyle = {
+    borderTopWidth: number;
+    borderBottomWidth: number;
+    marginTop: number;
+    marginBottom: number;
+    paddingTop: number;
+    paddingBottom: number;
+};
+export declare function createComputedStyleCache(): {
+    get(element: Element): {
+        borderBottomWidth: number;
+        borderTopWidth: number;
+        marginBottom: number;
+        marginTop: number;
+        paddingBottom: number;
+        paddingTop: number;
+    };
+};
+//# sourceMappingURL=computed-style.d.ts.map

package/dist/core/computed-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computed-style.d.ts","sourceRoot":"","sources":["../../src/core/computed-style.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,wBAAwB;iBAIvB,OAAO;;;;;;;;EAavB"}

package/dist/core/computed-style.js

@@ -0,0 +1,16 @@
+import { getBoxStyle } from "./utils.js";
+export function createComputedStyleCache() {
+    const styles = new WeakMap();
+    return {
+        get(element) {
+            const cachedStyle = styles.get(element);
+            if (cachedStyle) {
+                return cachedStyle;
+            }
+            const boxStyle = getBoxStyle(element);
+            styles.set(element, boxStyle);
+            return boxStyle;
+        },
+    };
+}
+//# sourceMappingURL=computed-style.js.map

package/dist/core/computed-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computed-style.js","sourceRoot":"","sources":["../../src/core/computed-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAWzC,MAAM,UAAU,wBAAwB;IACtC,MAAM,MAAM,GAAG,IAAI,OAAO,EAAqB,CAAC;IAEhD,OAAO;QACL,GAAG,CAAC,OAAgB;YAClB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAExC,IAAI,WAAW,EAAE,CAAC;gBAChB,OAAO,WAAW,CAAC;YACrB,CAAC;YAED,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;YAEtC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC9B,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/core/layout-ready.d.ts

@@ -0,0 +1,2 @@
+export declare function waitForLayoutReady(root: HTMLElement): Promise<void>;
+//# sourceMappingURL=layout-ready.d.ts.map

package/dist/core/layout-ready.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-ready.d.ts","sourceRoot":"","sources":["../../src/core/layout-ready.ts"],"names":[],"mappings":"AAqBA,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,WAAW,iBAOzD"}

package/dist/core/layout-ready.js

@@ -0,0 +1,23 @@
+async function waitForImages(root) {
+    const images = Array.from(root.querySelectorAll("img"));
+    if (!images.length) {
+        return Promise.resolve();
+    }
+    return Promise.all(images.map((img) => {
+        if (img.complete) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            img.addEventListener("load", () => resolve(), { once: true });
+            img.addEventListener("error", () => resolve(), { once: true });
+        });
+    })).then(() => undefined);
+}
+export async function waitForLayoutReady(root) {
+    if (document.fonts && "ready" in document.fonts) {
+        await document.fonts.ready;
+    }
+    await waitForImages(root);
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+//# sourceMappingURL=layout-ready.js.map

package/dist/core/layout-ready.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-ready.js","sourceRoot":"","sources":["../../src/core/layout-ready.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,aAAa,CAAC,IAAiB;IAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAExD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAED,OAAO,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;QACjB,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC3B,CAAC;QAED,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACnC,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,IAAiB;IACxD,IAAI,QAAQ,CAAC,KAAK,IAAI,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;QAChD,MAAM,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;IAC7B,CAAC;IAED,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;AAC/E,CAAC"}

package/dist/core/page-break.d.ts

@@ -0,0 +1,2 @@
+export declare function splitBodyOnPageBreakMarkers(body: HTMLElement | null): HTMLElement[];
+//# sourceMappingURL=page-break.d.ts.map

package/dist/core/page-break.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-break.d.ts","sourceRoot":"","sources":["../../src/core/page-break.ts"],"names":[],"mappings":"AAAA,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,EAAE,CA+BnF"}

package/dist/core/page-break.js

@@ -0,0 +1,25 @@
+export function splitBodyOnPageBreakMarkers(body) {
+    const bodySlices = [];
+    if (!body) {
+        return bodySlices;
+    }
+    let hasPageBreakMarker = false;
+    let bodySlice = body.cloneNode(false);
+    for (const target of Array.from(body.childNodes)) {
+        if (target instanceof HTMLElement && target.hasAttribute("data-paged-react-page-break")) {
+            hasPageBreakMarker = true;
+            bodySlices.push(bodySlice);
+            bodySlice = body.cloneNode(false);
+            continue;
+        }
+        bodySlice.appendChild(target.cloneNode(true));
+    }
+    if (!hasPageBreakMarker) {
+        bodySlices.push(body);
+        return bodySlices;
+    }
+    // Push the last slice if it has content
+    bodySlices.push(bodySlice);
+    return bodySlices;
+}
+//# sourceMappingURL=page-break.js.map

package/dist/core/page-break.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-break.js","sourceRoot":"","sources":["../../src/core/page-break.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,2BAA2B,CAAC,IAAwB;IAClE,MAAM,UAAU,GAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAC/B,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAgB,CAAC;IAErD,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;QACjD,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,YAAY,CAAC,6BAA6B,CAAC,EAAE,CAAC;YACxF,kBAAkB,GAAG,IAAI,CAAC;YAC1B,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAE3B,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAgB,CAAC;YACjD,SAAS;QACX,CAAC;QAED,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtB,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,wCAAwC;IACxC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE3B,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/dist/core/paginate.d.ts

@@ -0,0 +1,8 @@
+type PaginationContext = {
+    sourceRoot: HTMLDivElement;
+    pagesRoot: HTMLDivElement;
+    signal?: AbortSignal;
+};
+export declare function paginateDocument(ctx: PaginationContext): Promise<HTMLElement[]>;
+export {};
+//# sourceMappingURL=paginate.d.ts.map

package/dist/core/paginate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginate.d.ts","sourceRoot":"","sources":["../../src/core/paginate.ts"],"names":[],"mappings":"AAeA,KAAK,iBAAiB,GAAG;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,CA6ErF"}