art-bd-ui 1.0.41 → 1.0.43

package/dist/cjs/_virtual/index3.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _commonjsHelpers = require('./_commonjsHelpers.js');
-var index = require('../node_modules/attr-accept/dist/es/index.js');
+var index = require('../node_modules/pako/index.js');
 
-var esExports = index.__require();
-var _accepts = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(esExports);
+var pakoExports = index.__require();
+var pako = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(pakoExports);
 
-exports.default = _accepts;
+exports.default = pako;

package/dist/cjs/_virtual/index4.js

@@ -1,5 +1,11 @@
 'use strict';
 
-var shim = {exports: {}};
+Object.defineProperty(exports, '__esModule', { value: true });
 
-exports.__module = shim;
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var index = require('../node_modules/attr-accept/dist/es/index.js');
+
+var esExports = index.__require();
+var _accepts = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(esExports);
+
+exports.default = _accepts;

package/dist/cjs/_virtual/index5.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var propTypes = {exports: {}};
+var shim = {exports: {}};
 
-exports.__module = propTypes;
+exports.__module = shim;

package/dist/cjs/_virtual/index6.js

@@ -1,11 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var propTypes = {exports: {}};
 
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var index = require('../node_modules/color-name/index.js');
-
-var colorNameExports = index.__require();
-var names = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(colorNameExports);
-
-exports.default = names;
+exports.__module = propTypes;

package/dist/cjs/_virtual/index7.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _commonjsHelpers = require('./_commonjsHelpers.js');
-var index$1 = require('../node_modules/color-convert/index.js');
+var index = require('../node_modules/color-name/index.js');
 
-var colorConvertExports = index$1.__require();
-var index = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(colorConvertExports);
+var colorNameExports = index.__require();
+var names = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(colorNameExports);
 
-exports.default = index;
+exports.default = names;

package/dist/cjs/_virtual/index8.js

@@ -1,5 +1,11 @@
 'use strict';
 
-var es = {};
+Object.defineProperty(exports, '__esModule', { value: true });
 
-exports.__exports = es;
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var index$1 = require('../node_modules/color-convert/index.js');
+
+var colorConvertExports = index$1.__require();
+var index = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(colorConvertExports);
+
+exports.default = index;

package/dist/cjs/_virtual/index9.js

@@ -1,11 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var es = {};
 
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var index = require('../node_modules/pako/index.js');
-
-var pakoExports = index.__require();
-var pako = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(pakoExports);
-
-exports.default = pako;
+exports.__exports = es;

package/dist/cjs/components/ui/pdf-content/hooks/use-page-layout.js

@@ -2,48 +2,42 @@
 
 var React = require('react');
 
-const DEFAULT_PAGE_HEIGHT = 800;
+const DEFAULT_PAGE_SIZE = { width: 612, height: 792 };
 const PAGE_GAP = 16;
-function usePageLayout({ numPages, scale }) {
-    const pageDims = React.useRef(new Map());
-    // Bumped when page measurements change so memoized offsets recompute.
-    const [layoutVersion, setLayoutVersion] = React.useState(0);
-    const onPageMeasured = React.useCallback((page, dims) => {
-        const prev = pageDims.current.get(page);
-        if (prev && Math.abs(prev.height - dims.height) < 1 && Math.abs(prev.width - dims.width) < 1)
-            return;
-        pageDims.current.set(page, dims);
-        setLayoutVersion((v) => v + 1);
-    }, []);
-    const estimatePageHeight = React.useCallback((page) => {
-        const measured = pageDims.current.get(page);
-        if (measured)
-            return measured.height;
-        // Use nearest known height as a better estimate
-        for (const [, dim] of pageDims.current)
-            return dim.height;
-        return DEFAULT_PAGE_HEIGHT * scale;
-    }, [scale]);
+function usePageLayout({ numPages, pageSizes, containerWidth, scale }) {
+    const fallbackSize = React.useMemo(() => {
+        const firstKnownPage = pageSizes.values().next();
+        if (!firstKnownPage.done)
+            return firstKnownPage.value;
+        return DEFAULT_PAGE_SIZE;
+    }, [pageSizes]);
+    const pageHeights = React.useMemo(() => Array.from({ length: numPages }, (_, index) => {
+        var _a;
+        const pageNumber = index + 1;
+        const baseSize = (_a = pageSizes.get(pageNumber)) !== null && _a !== void 0 ? _a : fallbackSize;
+        const effectiveWidth = containerWidth > 0 ? containerWidth : baseSize.width;
+        const scaleFromWidth = effectiveWidth / baseSize.width;
+        return baseSize.height * scaleFromWidth * scale;
+    }), [numPages, pageSizes, fallbackSize, containerWidth, scale]);
     const pageOffsets = React.useMemo(() => {
+        var _a;
         const offsets = [];
         let y = 0;
         for (let i = 0; i < numPages; i++) {
             offsets.push(y);
-            y += estimatePageHeight(i + 1) + PAGE_GAP;
+            y += (_a = pageHeights[i]) !== null && _a !== void 0 ? _a : 0;
+            if (i < numPages - 1)
+                y += PAGE_GAP;
         }
         return offsets;
-        // layoutVersion is intentionally included to recompute when measurements change
-    }, [numPages, estimatePageHeight, layoutVersion]);
+    }, [numPages, pageHeights]);
     const totalHeight = React.useMemo(() => {
+        var _a;
         if (numPages === 0 || pageOffsets.length === 0)
             return 0;
-        return pageOffsets[numPages - 1] + estimatePageHeight(numPages);
-    }, [numPages, pageOffsets, estimatePageHeight]);
-    const resetLayout = React.useCallback(() => {
-        pageDims.current.clear();
-        setLayoutVersion(0);
-    }, []);
-    return { pageOffsets, totalHeight, estimatePageHeight, onPageMeasured, resetLayout };
+        return pageOffsets[numPages - 1] + ((_a = pageHeights[numPages - 1]) !== null && _a !== void 0 ? _a : 0);
+    }, [numPages, pageOffsets, pageHeights]);
+    return { pageOffsets, pageHeights, totalHeight };
 }
 
 exports.usePageLayout = usePageLayout;

package/dist/cjs/components/ui/pdf-content/pdf-content.js

@@ -1,17 +1,21 @@
 'use strict';
 
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../node_modules/react-pdf/dist/index.js');
+var reactWindow = require('../../../node_modules/react-window/dist/react-window.js');
 var pdfPage = require('./pdf-page.js');
 var usePdfScale = require('./hooks/use-pdf-scale.js');
 var usePageLayout = require('./hooks/use-page-layout.js');
-var useVirtualPages = require('./hooks/use-virtual-pages.js');
 var utils$1 = require('./utils.js');
 var empty = require('../../utility/empty/empty.js');
 var icon = require('../../media/icon/icon.js');
 var skeleton = require('../../utility/skeleton/skeleton.js');
+var useUpdateEffect = require('../../../hooks/use-update-effect.js');
 var useResizeObserver = require('../../../hooks/use-resize-observer.js');
+require('../../../_virtual/throttle.js');
+require('../../../_virtual/isEqual.js');
 var utils = require('../../../lib/utils.js');
 require('../../../node_modules/react-pdf/dist/Page/AnnotationLayer.css.js');
 require('../../../node_modules/react-pdf/dist/Page/TextLayer.css.js');
@@ -21,48 +25,128 @@ var pdf = require('../../../node_modules/pdfjs-dist/build/pdf.js');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 pdf.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('components/ui/pdf-content/pdf-content.js', document.baseURI).href))).toString();
 const PAGE_GAP = 16;
+const OVERSCAN = 3;
+const PAGE_SIZE_BATCH = 100;
+function getPageGap(index, numPages) {
+    return index < numPages - 1 ? PAGE_GAP : 0;
+}
+function getSafePageNumber(page, numPages) {
+    return utils$1.clamp(Number.isFinite(page) ? page : 1, 1, Math.max(1, numPages));
+}
+function createEmptyPageSizes() {
+    return new Map();
+}
+function findMostVisiblePage(firstIndex, lastIndex, viewportMid, pageOffsets, pageHeights) {
+    var _a, _b;
+    let bestPage = firstIndex + 1;
+    let bestDist = Number.POSITIVE_INFINITY;
+    for (let i = firstIndex; i <= lastIndex; i++) {
+        const pageHeight = (_a = pageHeights[i]) !== null && _a !== void 0 ? _a : 0;
+        const pageMid = ((_b = pageOffsets[i]) !== null && _b !== void 0 ? _b : 0) + pageHeight / 2;
+        const dist = Math.abs(viewportMid - pageMid);
+        if (dist < bestDist) {
+            bestDist = dist;
+            bestPage = i + 1;
+        }
+    }
+    return bestPage;
+}
+function loadPageSizes(pdf) {
+    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        try {
+            const nextPageSizes = createEmptyPageSizes();
+            for (let startPage = 1; startPage <= pdf.numPages; startPage += PAGE_SIZE_BATCH) {
+                const endPage = Math.min(startPage + PAGE_SIZE_BATCH - 1, pdf.numPages);
+                const pages = yield Promise.all(Array.from({ length: endPage - startPage + 1 }, (_, offset) => pdf.getPage(startPage + offset)));
+                pages.forEach((page) => {
+                    const { width, height } = page.getViewport({ scale: 1 });
+                    nextPageSizes.set(page.pageNumber, { width, height });
+                });
+            }
+            return nextPageSizes;
+        }
+        catch (_a) {
+            return createEmptyPageSizes();
+        }
+    });
+}
+function PDFVirtualRow({ index, style, ariaAttributes, containerWidth, numPages, pageHeights, scale, renderTextLayer, renderAnnotationLayer, }) {
+    var _a;
+    const gap = getPageGap(index, numPages);
+    return (jsxRuntime.jsx(pdfPage.PDFPage, { pageNumber: index + 1, containerWidth: containerWidth, scale: scale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, placeholderHeight: (_a = pageHeights[index]) !== null && _a !== void 0 ? _a : 0, ariaAttributes: ariaAttributes, style: Object.assign(Object.assign({}, style), { boxSizing: "border-box", paddingBottom: gap }) }));
+}
 function PDFSkeleton() {
     return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 p-6", children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-1/3" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-5/6" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-2/3" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-4/5" })] }));
 }
 function PDFEmptyState({ icon: icon$1, title, description }) {
     return (jsxRuntime.jsxs(empty.EmptyState, { className: "py-12", children: [jsxRuntime.jsx(empty.EmptyMedia, { variant: "icon", children: jsxRuntime.jsx(icon.Icon, { name: icon$1 }) }), jsxRuntime.jsxs(empty.EmptyHeader, { children: [jsxRuntime.jsx(empty.EmptyTitle, { children: title }), jsxRuntime.jsx(empty.EmptyDescription, { children: description })] })] }));
 }
-const PDFContent = React.forwardRef(function PDFContent({ file, renderTextLayer = true, renderAnnotationLayer = true, initialScale = 1, minScale = 0.5, maxScale = 3, onDocumentLoad, onPageChange, onScaleChange, className, }, ref) {
+const NO_DATA_PLACEHOLDER = (jsxRuntime.jsx(PDFEmptyState, { icon: "file-text", title: "No PDF to display", description: "Provide a PDF file to preview it here." }));
+const LOADING_PLACEHOLDER = jsxRuntime.jsx(PDFSkeleton, {});
+const ERROR_PLACEHOLDER = (jsxRuntime.jsx(PDFEmptyState, { icon: "alert-circle", title: "Failed to load PDF", description: "The PDF file could not be loaded." }));
+const PDFContent = React.forwardRef(function PDFContent({ file, renderTextLayer = true, renderAnnotationLayer = true, initialScale = 1, minScale = 0.5, maxScale = 3, height, onDocumentLoad, onPageChange, onScaleChange, className, }, ref) {
     var _a;
     const containerRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const pageSizesRequestIdRef = React.useRef(0);
     const rect = useResizeObserver.useResizeObserver(containerRef);
     const containerWidth = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
     const [numPages, setNumPages] = React.useState(0);
+    const [visiblePage, setVisiblePage] = React.useState(1);
+    const [isLayoutReady, setIsLayoutReady] = React.useState(false);
+    const [pageSizes, setPageSizes] = React.useState(createEmptyPageSizes);
     const { scale, setScale } = usePdfScale.usePdfScale({ initialScale, minScale, maxScale, onScaleChange });
-    const { pageOffsets, totalHeight, estimatePageHeight, onPageMeasured, resetLayout } = usePageLayout.usePageLayout({
+    const { pageOffsets, pageHeights } = usePageLayout.usePageLayout({
         numPages,
+        pageSizes,
+        containerWidth,
         scale,
     });
-    const { visiblePage, renderedPages, onScroll, resetVirtualState } = useVirtualPages.useVirtualPages({
-        containerRef,
-        numPages,
-        pageOffsets,
-        estimatePageHeight,
-        scale,
-    });
-    // Notify parent of page changes
-    React.useEffect(() => {
+    const setVisiblePageIfNeeded = React.useCallback((nextPage) => {
+        setVisiblePage((currentPage) => (currentPage === nextPage ? currentPage : nextPage));
+    }, []);
+    useUpdateEffect.useUpdateEffect(() => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(visiblePage);
     }, [visiblePage, onPageChange]);
-    // Imperative scrollToPage
-    const scrollToPage = React.useCallback((page) => {
+    const handleRowsRendered = React.useCallback(({ startIndex, stopIndex }) => {
         var _a;
-        const safe = utils$1.clamp(Number.isFinite(page) ? page : 1, 1, Math.max(1, numPages));
-        const container = containerRef.current;
-        if (!container)
+        if (numPages === 0)
+            return;
+        const maxIndex = numPages - 1;
+        const first = utils$1.clamp(startIndex, 0, maxIndex);
+        const last = utils$1.clamp(stopIndex, first, maxIndex);
+        const listElement = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.element;
+        if (!listElement) {
+            setVisiblePageIfNeeded(first + 1);
             return;
-        const top = (_a = pageOffsets[safe - 1]) !== null && _a !== void 0 ? _a : 0;
-        container.scrollTo({
-            top: Math.max(0, top - PAGE_GAP),
+        }
+        const viewportMid = listElement.scrollTop + listElement.clientHeight / 2;
+        const next = findMostVisiblePage(first, last, viewportMid, pageOffsets, pageHeights);
+        setVisiblePageIfNeeded(next);
+    }, [numPages, pageOffsets, pageHeights, setVisiblePageIfNeeded]);
+    const rowHeight = React.useCallback((index) => {
+        var _a;
+        const baseHeight = (_a = pageHeights[index]) !== null && _a !== void 0 ? _a : 0;
+        const gap = getPageGap(index, numPages);
+        return baseHeight + gap;
+    }, [numPages, pageHeights]);
+    const rowProps = React.useMemo(() => ({
+        containerWidth,
+        numPages,
+        pageHeights,
+        scale,
+        renderTextLayer,
+        renderAnnotationLayer,
+    }), [containerWidth, numPages, pageHeights, scale, renderTextLayer, renderAnnotationLayer]);
+    const scrollToPage = React.useCallback((page) => {
+        var _a;
+        const safePage = getSafePageNumber(page, numPages);
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToRow({
+            index: safePage - 1,
+            align: "start",
             behavior: "smooth",
         });
-    }, [numPages, pageOffsets]);
-    // Expose imperative API
+    }, [numPages]);
     React.useImperativeHandle(ref, () => ({
         scrollToPage,
         getState: () => ({
@@ -72,21 +156,28 @@ const PDFContent = React.forwardRef(function PDFContent({ file, renderTextLayer
         }),
         setScale,
     }), [scrollToPage, visiblePage, numPages, scale, setScale]);
-    // Reset state when document changes
-    React.useEffect(() => {
-        resetLayout();
-        resetVirtualState();
+    const resetDocumentState = React.useCallback(() => {
+        pageSizesRequestIdRef.current += 1;
+        setIsLayoutReady(false);
+        setVisiblePage(1);
         setNumPages(0);
-    }, [file, resetLayout, resetVirtualState]);
-    // Document load handler
-    const handleDocumentLoad = React.useCallback((pdf) => {
-        setNumPages(pdf.numPages);
+        setPageSizes(createEmptyPageSizes());
+    }, []);
+    useUpdateEffect.useUpdateEffect(() => {
+        resetDocumentState();
+    }, [file, resetDocumentState]);
+    const handleDocumentLoadSuccess = React.useCallback((pdf) => {
+        const requestId = ++pageSizesRequestIdRef.current;
         onDocumentLoad === null || onDocumentLoad === void 0 ? void 0 : onDocumentLoad(pdf.numPages);
+        void loadPageSizes(pdf).then((nextPageSizes) => {
+            if (requestId !== pageSizesRequestIdRef.current)
+                return;
+            setPageSizes(nextPageSizes);
+            setNumPages(pdf.numPages);
+            setIsLayoutReady(true);
+        });
     }, [onDocumentLoad]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, "data-pdf-stage": "root", className: utils.cn("relative overflow-auto bg-muted/40", className), onScroll: onScroll, children: jsxRuntime.jsx(Document.default, { file: file, onLoadSuccess: handleDocumentLoad, loading: jsxRuntime.jsx(PDFSkeleton, {}), error: jsxRuntime.jsx(PDFEmptyState, { icon: "alert-circle", title: "Failed to load PDF", description: "The PDF file could not be loaded." }), noData: jsxRuntime.jsx(PDFEmptyState, { icon: "file-text", title: "No PDF to display", description: "Provide a PDF file to preview it here." }), children: jsxRuntime.jsx("div", { className: "relative", style: { height: totalHeight }, children: renderedPages.map((pageNumber) => {
-                    var _a;
-                    return (jsxRuntime.jsx(pdfPage.PDFPage, { pageNumber: pageNumber, offsetY: (_a = pageOffsets[pageNumber - 1]) !== null && _a !== void 0 ? _a : 0, containerWidth: containerWidth, scale: scale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, placeholderHeight: estimatePageHeight(pageNumber), onMeasured: onPageMeasured }, pageNumber));
-                }) }) }) }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, "data-pdf-stage": "root", className: utils.cn("relative h-full min-h-0 overflow-auto bg-muted/40", className), style: height !== undefined ? { height } : undefined, children: jsxRuntime.jsx(Document.default, { file: file, onLoadSuccess: handleDocumentLoadSuccess, loading: LOADING_PLACEHOLDER, error: ERROR_PLACEHOLDER, noData: NO_DATA_PLACEHOLDER, children: isLayoutReady ? (jsxRuntime.jsx(reactWindow.List, { listRef: listRef, rowCount: numPages, rowHeight: rowHeight, rowComponent: PDFVirtualRow, rowProps: rowProps, overscanCount: OVERSCAN, onRowsRendered: handleRowsRendered, className: "h-full w-full" })) : (LOADING_PLACEHOLDER) }) }));
 });
 
 exports.PDFContent = PDFContent;

package/dist/cjs/components/ui/pdf-content/pdf-page.js

@@ -1,20 +1,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 require('../../../node_modules/react-pdf/dist/index.js');
 var skeleton = require('../../utility/skeleton/skeleton.js');
+var utils = require('../../../lib/utils.js');
 var Page = require('../../../node_modules/react-pdf/dist/Page.js');
 
-function PDFPage({ pageNumber, offsetY, containerWidth, scale, renderTextLayer, renderAnnotationLayer, placeholderHeight, onMeasured, }) {
-    const wrapRef = React.useRef(null);
-    const width = containerWidth > 0 ? containerWidth : undefined;
-    return (jsxRuntime.jsx("div", { ref: wrapRef, "data-page-num": pageNumber, className: "absolute inset-x-0 flex will-change-transform justify-center", style: { transform: `translateY(${offsetY}px)` }, children: jsxRuntime.jsx(Page.default, { pageNumber: pageNumber, width: width, scale: scale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, onRenderSuccess: () => {
-                const el = wrapRef.current;
-                if (!el)
-                    return;
-                onMeasured(pageNumber, { width: el.offsetWidth, height: el.offsetHeight });
-            }, loading: jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3 p-6", style: { height: placeholderHeight }, children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-5/6" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-2/3" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-4/5" })] }) }) }));
+function PDFPageLoadingState({ placeholderHeight }) {
+    return (jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3 p-6", style: { height: placeholderHeight }, children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-5/6" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-2/3" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-4/5" })] }));
+}
+function PDFPage({ pageNumber, containerWidth, scale, renderTextLayer, renderAnnotationLayer, placeholderHeight, className, style, ariaAttributes, }) {
+    const pageWidth = containerWidth > 0 ? containerWidth : undefined;
+    return (jsxRuntime.jsx("div", Object.assign({ "data-page-num": pageNumber, className: utils.cn("flex justify-center", className), style: style }, ariaAttributes, { children: jsxRuntime.jsx(Page.default, { pageNumber: pageNumber, width: pageWidth, scale: scale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, loading: jsxRuntime.jsx(PDFPageLoadingState, { placeholderHeight: placeholderHeight }) }) })));
 }
 
 exports.PDFPage = PDFPage;

package/dist/cjs/components/ui/pdf-viewer/pdf-viewer.js

@@ -10,7 +10,7 @@ var utils = require('../pdf-content/utils.js');
 var utils$1 = require('../../../lib/utils.js');
 var file = require('../../../utils/file.js');
 
-function PDFViewer({ file: file$1, formData, flatten = true, initialScale = 1, minScale = 0.5, maxScale = 3, scaleStep = 0.1, renderTextLayer = true, renderAnnotationLayer = true, className, style, }) {
+function PDFViewer({ file: file$1, formData, styles, flatten = true, initialScale = 1, minScale = 0.5, maxScale = 3, scaleStep = 0.1, renderTextLayer = true, renderAnnotationLayer = true, height, className, style, }) {
     const contentRef = React.useRef(null);
     const [scale, setScale] = React.useState(initialScale);
     const [numPages, setNumPages] = React.useState(0);
@@ -18,6 +18,7 @@ function PDFViewer({ file: file$1, formData, flatten = true, initialScale = 1, m
     const { pdfBlob, isProcessing } = useFilledPdf.useFilledPdf({
         file: file$1,
         formData,
+        styles,
         flatten,
     });
     const goToPage = React.useCallback((p) => {
@@ -43,7 +44,7 @@ function PDFViewer({ file: file$1, formData, flatten = true, initialScale = 1, m
             return;
         file.printBlob(pdfBlob);
     }, [pdfBlob]);
-    return (jsxRuntime.jsxs("div", { className: utils$1.cn("flex flex-col overflow-hidden rounded-xl border", className), style: style, children: [jsxRuntime.jsx(toolbar.Toolbar, { scale: scale, minScale: minScale, maxScale: maxScale, onZoomIn: zoomIn, onZoomOut: zoomOut, pageNumber: visiblePage, numPages: numPages, onPageChange: goToPage, onPrev: prev, onNext: next, canDownload: !isProcessing, onDownload: download, canPrint: !isProcessing, onPrint: print, isBusy: isProcessing }), jsxRuntime.jsx(pdfContent.PDFContent, { ref: contentRef, file: pdfBlob, initialScale: initialScale, minScale: minScale, maxScale: maxScale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, onDocumentLoad: handleDocumentLoad, onPageChange: setVisiblePage, onScaleChange: setScale })] }));
+    return (jsxRuntime.jsxs("div", { className: utils$1.cn("flex min-h-0 flex-col overflow-hidden rounded-xl border", className), style: Object.assign({ height }, style), children: [jsxRuntime.jsx(toolbar.Toolbar, { scale: scale, minScale: minScale, maxScale: maxScale, onZoomIn: zoomIn, onZoomOut: zoomOut, pageNumber: visiblePage, numPages: numPages, onPageChange: goToPage, onPrev: prev, onNext: next, canDownload: !isProcessing, onDownload: download, canPrint: !isProcessing, onPrint: print, isBusy: isProcessing }), jsxRuntime.jsx(pdfContent.PDFContent, { ref: contentRef, file: pdfBlob, className: "flex-1 min-h-0", initialScale: initialScale, minScale: minScale, maxScale: maxScale, renderTextLayer: renderTextLayer, renderAnnotationLayer: renderAnnotationLayer, onDocumentLoad: handleDocumentLoad, onPageChange: setVisiblePage, onScaleChange: setScale })] }));
 }
 
 exports.PDFViewer = PDFViewer;