@tonzxz/government-forms 0.1.0 → 0.2.0

package/FORM_CATALOG.md

@@ -42,3 +42,7 @@ Additional extracted components outside the reports directory:
 Purchase Order receives eligible purchase requests, approver display data and the generated PO number from the host. It does not query or authorize those records itself. Inventory item types are exported as `Inventory` and `InventoryStatus`.
 
 `extraction-manifest.json` records original source paths and SHA-256 hashes for traceability. Most source components are copied with import rewrites; the PO and RSMP forms were separated from their page/modal shells. Agency branding and remote font loading were removed where found. These are extracted application templates, not a guarantee that every agency accepts an identical document layout.
+
+## Document viewers
+
+Every inventory entry exports `PreviewDialog` and `PreviewPanel` in addition to the existing `Preview`. Pass that preview’s typed props in `previewProps`. Both include PDF download and print controls; PR includes its XLSX exporter automatically. Other forms accept an optional `onExportXlsx` callback. Import `inventory/styles.css` once. See README for integration.

package/README.md

@@ -2,6 +2,56 @@
 
 An installable React 19 library extracted from BCS IMS. The npm package is `@tonzxz/government-forms`; its inventory entry point is `@tonzxz/government-forms/inventory`. The package is configured for public npm distribution.
 
+## Document preview with PDF, XLSX, and print (0.2.0)
+
+`Preview` is the printable document layout. `PreviewDialog` adds the scrollable modal and export toolbar shown in the original system. `PreviewPanel` embeds the same viewer directly on a page. All `/inventory/<code>` paths expose these components, including `/inventory/pplc`.
+
+Import the package CSS once as described below. In Next.js, use the viewer from a client component:
+
+```tsx
+"use client";
+import { useState } from "react";
+import {
+  PreviewDialog,
+  type PrRecord,
+  type PrSignatories,
+} from "@tonzxz/government-forms/inventory/pr";
+
+export function PurchaseRequestDetails({
+  record,
+  signatories,
+}: {
+  record: PrRecord;
+  signatories?: PrSignatories;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        View purchase request
+      </button>
+      <PreviewDialog
+        open={open}
+        onOpenChange={setOpen}
+        filename={record.prNo}
+        previewProps={{ record, signatories }}
+      />
+    </>
+  );
+}
+```
+
+Pass your API record to `record`; document numbers, agency details, line items, and signatories come from your ERP. The viewer does not fetch or save data. PR includes **Download XLSX**, **Download PDF**, **Print**, and **Close**. Other viewers include PDF and print; supply `onExportXlsx` to enable your spreadsheet exporter. The on-screen preview is the original HTML paper layout; PDF download renders that layout in the browser. PR documents automatically split after 12 items per page so later items remain visible and exportable.
+
+For an embedded viewer, use `PreviewPanel` from the same import path with `previewProps={{ record, signatories }}`. Each form retains its own preview props; TypeScript shows the required fields. `pplc` uses its ledger preview props, not `PrRecord`.
+
+To show a **Preview document** button beside the generic form's submit button, pass `preview={<Preview record={record} signatories={signatories} />}` and `previewFilename={record.prNo}` to `PRForm`, importing `Preview` from the PR path. Update that record from your controlled form values for a live draft preview. Supply `onExportXlsx` on `PRForm` if you also want its spreadsheet button; the PR `PreviewDialog` and `PreviewPanel` wire the exporter automatically.
+
+The generic six-field PR payload is not a complete `PrRecord`. Map your draft or saved ERP data explicitly, or use the dedicated `PurchaseRequestCreateForm` for the fuller entry layout. Installing the update alone does not add a preview to an existing ERP page: render one of these viewer components.
+
+Custom document layouts can use `DocumentPreviewDialog` or `DocumentPreviewPanel` from `@tonzxz/government-forms/inventory/preview` and pass the printable layout as `children`.
+
+
 ## Included
 
 - 25 configurable report definitions, available through `GovernmentForm`.
@@ -22,7 +72,7 @@ npm install @tonzxz/government-forms react@^19 react-dom@^19
 Before publishing, install the generated archive in a different repository:
 
 ```sh
-npm install /absolute/path/to/tonzxz-government-forms-0.1.0.tgz
+npm install /absolute/path/to/tonzxz-government-forms-0.2.0.tgz
 ```
 
 The public package can be installed without npm authentication. Consumers use the exact same package version independently; deployments and databases stay separate.
@@ -43,7 +93,7 @@ const [value, setValue] = useState(() => createFormValues(definition));
 <PRForm value={value} onChange={setValue} onSubmit={savePurchaseRequest} />;
 ```
 
-Every report code in the catalog has an `/inventory/<code>` entry. Each exports its configurable form as both `default` and `Form`, plus `definition`, `Preview`, and the original named preview. Dedicated entry components are also exported where available. `Preview` and dedicated entry components retain their own typed props; their data models differ from the generic form payload.
+Every report code in the catalog has an `/inventory/<code>` entry. Each exports its configurable form as both `default` and `Form`, plus `definition`, `Preview`, `PreviewDialog`, `PreviewPanel`, and the original named preview. Dedicated entry components are also exported where available. `Preview` and dedicated entry components retain their own typed props; their data models differ from the generic form payload.
 
 `/inventory/pplc` is an alias for the existing PPELC form (`/inventory/ppelc`); its document code stays `ppelc`. Additional paths `/inventory/po` and `/inventory/item` export their dedicated entry components as `default`/`Form` and their previews as `Preview`; these two do not have a generic `definition`. Existing root and `/forms/<code>` imports remain supported.
 

package/dist/document-preview.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType, type ReactNode } from 'react';
+export type DocumentPreviewProps = {
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    filename?: string;
+    /** Optional spreadsheet exporter supplied by the form or ERP integration. */
+    onExportXlsx?: () => void | Promise<void>;
+    className?: string;
+};
+export type DocumentPreviewDialogProps = DocumentPreviewProps & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+/** Embedded paper preview with PDF/print actions. This displays the document layout, not a PDF iframe. */
+export declare function DocumentPreviewPanel({ title, description, className, ...props }: DocumentPreviewProps): import("react/jsx-runtime").JSX.Element;
+/** Accessible modal equivalent of the application's document-details viewer. */
+export declare function DocumentPreviewDialog({ open, onOpenChange, title, description, className, ...props }: DocumentPreviewDialogProps): import("react/jsx-runtime").JSX.Element;
+export type FormPreviewPanelProps<P extends object> = Omit<DocumentPreviewProps, 'children'> & {
+    previewProps: P;
+};
+export type FormPreviewDialogProps<P extends object> = Omit<DocumentPreviewDialogProps, 'children'> & {
+    previewProps: P;
+};
+/** Bind a viewer to each existing document's exact typed props. No record data is fabricated. */
+export declare function createDocumentPreviewComponents<P extends object>(Preview: ComponentType<P>, defaults: {
+    title: string;
+    filename: string;
+}, exportXlsx?: (props: P) => void | Promise<void>): {
+    PreviewPanel: ({ previewProps, ...props }: FormPreviewPanelProps<P>) => import("react/jsx-runtime").JSX.Element;
+    PreviewDialog: ({ previewProps, ...props }: FormPreviewDialogProps<P>) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/document-preview.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+function PreviewBody({ children, filename = 'document', onExportXlsx, close }) {
+    const paper = useRef(null);
+    const lock = useRef(false);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState('');
+    async function perform(action) {
+        if (lock.current || !paper.current)
+            return;
+        lock.current = true;
+        setBusy(action);
+        setError('');
+        try {
+            if (action === 'xlsx')
+                await onExportXlsx?.();
+            else if (action === 'pdf') {
+                const { exportPreviewElementToPdf } = await import('./gam/utils/export-preview-pdf.js');
+                await exportPreviewElementToPdf(paper.current, filename.replace(/\.pdf$/i, '') + '.pdf');
+            }
+            else {
+                const { printElement } = await import('./gam/utils/print-element.js');
+                await printElement(paper.current, filename);
+            }
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'Unable to prepare the document. Please try again.');
+        }
+        finally {
+            lock.current = false;
+            setBusy(null);
+        }
+    }
+    return _jsxs(_Fragment, { children: [_jsx("div", { className: "qforms-preview-viewport", tabIndex: 0, "aria-label": "Document pages", children: _jsx("div", { ref: paper, className: "qforms-preview-paper", children: children }) }), error && _jsx("p", { role: "alert", className: "qforms-preview-error", children: error }), _jsxs("footer", { className: "qforms-preview-actions", "aria-busy": busy !== null, children: [_jsx("span", { role: "status", className: "qforms-preview-status", children: busy ? 'Preparing document…' : '' }), onExportXlsx && _jsx("button", { type: "button", disabled: busy !== null, onClick: () => void perform('xlsx'), children: "Download XLSX" }), _jsx("button", { type: "button", disabled: busy !== null, onClick: () => void perform('pdf'), children: "Download PDF" }), _jsx("button", { type: "button", disabled: busy !== null, onClick: () => void perform('print'), children: "Print" }), close] })] });
+}
+/** Embedded paper preview with PDF/print actions. This displays the document layout, not a PDF iframe. */
+export function DocumentPreviewPanel({ title = 'Document preview', description = 'Preview the document before downloading or printing.', className = '', ...props }) {
+    return _jsxs("section", { className: `qforms-preview-panel ${className}`, "aria-label": title, children: [_jsxs("header", { className: "qforms-preview-header", children: [_jsx("h2", { children: title }), _jsx("p", { children: description })] }), _jsx(PreviewBody, { ...props })] });
+}
+/** Accessible modal equivalent of the application's document-details viewer. */
+export function DocumentPreviewDialog({ open, onOpenChange, title = 'Document preview', description = 'Read-only view of the document.', className = '', ...props }) {
+    return _jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: "qforms-preview-backdrop" }), _jsxs(Dialog.Popup, { className: `qforms-preview-dialog ${className}`, children: [_jsxs("header", { className: "qforms-preview-header", children: [_jsx(Dialog.Title, { children: title }), _jsx(Dialog.Description, { children: description }), _jsx(Dialog.Close, { className: "qforms-preview-dismiss", "aria-label": "Close document preview", children: "\u00D7" })] }), _jsx(PreviewBody, { ...props, close: _jsx(Dialog.Close, { className: "qforms-preview-close", children: "Close" }) })] })] }) });
+}
+/** Bind a viewer to each existing document's exact typed props. No record data is fabricated. */
+export function createDocumentPreviewComponents(Preview, defaults, exportXlsx) {
+    function PreviewPanel({ previewProps, ...props }) {
+        return _jsx(DocumentPreviewPanel, { ...defaults, onExportXlsx: exportXlsx ? () => exportXlsx(previewProps) : undefined, ...props, children: _jsx(Preview, { ...previewProps }) });
+    }
+    function PreviewDialog({ previewProps, ...props }) {
+        return _jsx(DocumentPreviewDialog, { ...defaults, onExportXlsx: exportXlsx ? () => exportXlsx(previewProps) : undefined, ...props, children: _jsx(Preview, { ...previewProps }) });
+    }
+    return { PreviewPanel, PreviewDialog };
+}

package/dist/gam/utils/export-preview-pdf.js

@@ -129,46 +129,53 @@ export async function renderPreviewToCanvas(root) {
     // html2canvas's cloned iframe and can crop wrapped table text.
     const pageWidth = Math.ceil(Math.max(pageRect.width, page.scrollWidth));
     const pageHeight = Math.ceil(Math.max(pageRect.height, page.scrollHeight));
-    const canvas = await html2canvas(page, {
-        backgroundColor: "#fff",
-        scale: Math.min(Math.max(window.devicePixelRatio || 2, 2), 3),
-        useCORS: true,
-        scrollX: 0,
-        scrollY: -window.scrollY,
-        width: pageWidth,
-        height: pageHeight,
-        windowWidth: pageWidth,
-        windowHeight: pageHeight,
-        onclone: (clonedDocument, clonedPage) => {
-            // Preview ancestors carry screen-only scaling and clipping. Remove those
-            // from the capture so text and borders use the same natural coordinates.
-            let ancestor = clonedPage;
-            while (ancestor) {
-                ancestor.style.setProperty("transform", "none", "important");
-                ancestor.style.setProperty("zoom", "1", "important");
-                ancestor.style.setProperty("overflow", "visible", "important");
-                ancestor = ancestor.parentElement;
-            }
-            // html2canvas 1.4.1 can't parse lab()/oklch()/lch() — Tailwind v4 uses them
-            // inside generated stylesheets. Resolve them to rgb() in the clone before
-            // html2canvas reads computed styles.
-            sanitizeUnsupportedColorFunctions(clonedDocument, createUnsupportedColorNormalizer());
-            // ICS uses the page itself as its white paper background. Clear every
-            // structural table fill in the capture clone so html2canvas cannot paint
-            // an opaque header or cell layer over labels and values. Both PDF export
-            // and printing use this capture path.
-            const clonedIcsPage = clonedPage.matches('[data-ics-preview="true"]')
-                ? clonedPage
-                : clonedPage.querySelector('[data-ics-preview="true"]');
-            if (clonedIcsPage) {
-                const tableLayers = clonedIcsPage.querySelectorAll("table, thead, tbody, tr, th, td");
-                for (const layer of tableLayers) {
-                    layer.style.setProperty("background", "transparent", "important");
-                    layer.style.setProperty("background-color", "transparent", "important");
+    // html2canvas measures font baselines with a hidden 1px image in the live
+    // document. Tailwind's block-image reset breaks that inline baseline probe.
+    // Restrict this temporary override to the probe, preserving document images.
+    const metricsStyle = document.createElement('style');
+    metricsStyle.textContent = 'body > div[style*="visibility: hidden"] > img[width="1"][height="1"] { display: inline !important; }';
+    document.head.appendChild(metricsStyle);
+    try {
+        const canvas = await html2canvas(page, {
+            backgroundColor: "#fff",
+            scale: Math.min(Math.max(window.devicePixelRatio || 2, 2), 3),
+            useCORS: true,
+            scrollX: 0,
+            scrollY: -window.scrollY,
+            width: pageWidth,
+            height: pageHeight,
+            windowWidth: pageWidth,
+            windowHeight: pageHeight,
+            onclone: (clonedDocument, clonedPage) => {
+                // Preview ancestors carry screen-only scaling and clipping. Remove those
+                // from the capture so text and borders use the same natural coordinates.
+                let ancestor = clonedPage;
+                while (ancestor) {
+                    ancestor.style.setProperty("transform", "none", "important");
+                    ancestor.style.setProperty("zoom", "1", "important");
+                    ancestor.style.setProperty("overflow", "visible", "important");
+                    ancestor = ancestor.parentElement;
                 }
-            }
-            const style = clonedDocument.createElement("style");
-            style.textContent = `
+                // html2canvas 1.4.1 can't parse lab()/oklch()/lch() — Tailwind v4 uses them
+                // inside generated stylesheets. Resolve them to rgb() in the clone before
+                // html2canvas reads computed styles.
+                sanitizeUnsupportedColorFunctions(clonedDocument, createUnsupportedColorNormalizer());
+                // ICS uses the page itself as its white paper background. Clear every
+                // structural table fill in the capture clone so html2canvas cannot paint
+                // an opaque header or cell layer over labels and values. Both PDF export
+                // and printing use this capture path.
+                const clonedIcsPage = clonedPage.matches('[data-ics-preview="true"]')
+                    ? clonedPage
+                    : clonedPage.querySelector('[data-ics-preview="true"]');
+                if (clonedIcsPage) {
+                    const tableLayers = clonedIcsPage.querySelectorAll("table, thead, tbody, tr, th, td");
+                    for (const layer of tableLayers) {
+                        layer.style.setProperty("background", "transparent", "important");
+                        layer.style.setProperty("background-color", "transparent", "important");
+                    }
+                }
+                const style = clonedDocument.createElement("style");
+                style.textContent = `
 				html, body {
 					background: #fff !important;
 				}
@@ -183,10 +190,14 @@ export async function renderPreviewToCanvas(root) {
 					transform: none !important;
 				}
 			`;
-            clonedDocument.head.appendChild(style);
-        },
-    });
-    return { canvas, orientation, fitOnePage };
+                clonedDocument.head.appendChild(style);
+            },
+        });
+        return { canvas, orientation, fitOnePage };
+    }
+    finally {
+        metricsStyle.remove();
+    }
 }
 export async function exportPreviewElementToPdf(root, filename) {
     const pages = Array.from(root.querySelectorAll(PDF_PAGE_SELECTOR));

package/dist/gam/utils/print-element.js

@@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client";
  * Opens the browser print dialog so the DOCUMENT FORM itself is printed —
  * never the screen, the modal, or anything else on the page.
  *
- * Why this approach can't fail:
+ * Rendering approach:
  *  - The preview is rendered with the SAME html2canvas pipeline the
  *    "Download PDF" buttons use. html2canvas captures ONLY the target element,
  *    so the modal/backdrop/app chrome are never part of the rendered output.
@@ -20,65 +20,45 @@ import { createRoot } from "react-dom/client";
  *    size or a letterboxed/whitespace layout.
  */
 import { renderPreviewToCanvas } from "./export-preview-pdf.js";
-// A4 dimensions in millimeters — portrait 210×297, landscape 297×210.
-const A4_PORTRAIT_MM = { width: 210, height: 297 };
-const A4_LANDSCAPE_MM = { width: 297, height: 210 };
-function buildPrintHtml({ imageSrc, title, landscape, }) {
+function buildPrintHtml({ pages, title }) {
     const safeTitle = title.replace(/[<>&"']/g, "");
-    const pageMm = landscape ? A4_LANDSCAPE_MM : A4_PORTRAIT_MM;
-    return `<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<title>${safeTitle}</title>
-		<style>
-			@page {
-				size: A4 ${landscape ? "landscape" : "portrait"};
-				margin: 0;
-			}
-			html, body {
-				margin: 0;
-				padding: 0;
-				background: #fff;
-			}
-			/* The print sheet is exactly A4, so the form fills the sheet with no
-			   browser-default paper size (e.g. Letter) or letterboxing involved. */
-			.print-stage {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: ${pageMm.width}mm;
-				height: ${pageMm.height}mm;
-				background: #fff;
-			}
-			.print-stage img {
-				display: block;
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="print-stage">
-			<img src="${imageSrc}" alt="" />
-		</div>
-	</body>
-</html>`;
+    return `<!doctype html><html><head><meta charset="utf-8"><title>${safeTitle}</title><style>
+ @page portrait { size: A4 portrait; margin: 0; }
+ @page landscape { size: A4 landscape; margin: 0; }
+ html, body { margin: 0; padding: 0; background: white; }
+ .print-stage { width: 210mm; height: 297mm; page: portrait; break-after: page; }
+ .print-stage.landscape { width: 297mm; height: 210mm; page: landscape; }
+ .print-stage:last-child { break-after: auto; }
+ img { display: block; width: 100%; height: 100%; object-fit: contain; }
+ </style></head><body>${pages.map(page => `<div class="print-stage${page.landscape ? ' landscape' : ''}"><img src="${page.imageSrc}" alt=""></div>`).join('')}</body></html>`;
 }
 export async function printElement(root, title = "Document") {
     const cleanTitle = title.replace(/\.pdf$/i, "").trim() || "Document";
-    // Render the form exactly like the Download PDF buttons do. html2canvas
-    // only captures `root` (the document preview), so the modal can never
-    // appear in the printed output.
-    const { canvas, orientation } = await renderPreviewToCanvas(root);
-    const imageSrc = canvas.toDataURL("image/png");
-    const landscape = orientation === "landscape";
+    const explicitPages = Array.from(root.querySelectorAll('[data-pdf-page="true"], .iar-a4-page, .itr-a4-page, .regspi-a4-page, .splc-a4-page, .spc-a4-page'));
+    const pages = [];
+    for (const element of explicitPages.length > 0 ? explicitPages : [root]) {
+        const { canvas, orientation, fitOnePage } = await renderPreviewToCanvas(element);
+        const landscape = orientation === 'landscape';
+        const pageHeight = fitOnePage ? canvas.height : canvas.width * (landscape ? 210 / 297 : 297 / 210);
+        for (let y = 0; y < canvas.height; y += pageHeight) {
+            const slice = document.createElement('canvas');
+            slice.width = canvas.width;
+            slice.height = Math.ceil(fitOnePage ? canvas.height : pageHeight);
+            const ctx = slice.getContext('2d');
+            if (!ctx)
+                throw new Error('Unable to prepare the print page.');
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, slice.width, slice.height);
+            const height = Math.min(pageHeight, canvas.height - y);
+            ctx.drawImage(canvas, 0, y, canvas.width, height, 0, 0, canvas.width, height);
+            pages.push({ imageSrc: slice.toDataURL('image/png'), landscape });
+        }
+    }
     const iframe = document.createElement("iframe");
     // Off-screen but not display:none — some browsers refuse to print
     // display:none iframes. Sized to A4 proportions so layout is computed.
     iframe.style.cssText = "position:fixed;top:0;left:-10000px;width:794px;height:1123px;border:0;";
-    iframe.srcdoc = buildPrintHtml({ imageSrc, title: cleanTitle, landscape });
+    iframe.srcdoc = buildPrintHtml({ pages, title: cleanTitle });
     iframe.setAttribute("aria-hidden", "true");
     document.body.appendChild(iframe);
     return new Promise(resolve => {
@@ -104,26 +84,26 @@ export async function printElement(root, title = "Document") {
                 cleanup();
                 return;
             }
-            const image = frameDocument.querySelector("img");
+            const images = Array.from(frameDocument.querySelectorAll("img"));
             const firePrint = () => {
                 if (printTriggered)
                     return;
                 printTriggered = true;
                 frameWindow.focus();
+                frameWindow.addEventListener("afterprint", () => cleanup(), { once: true });
                 frameWindow.print();
                 // Chrome fires "afterprint" on the printed window once the dialog
                 // closes. Listen there so cleanup happens right after.
-                frameWindow.addEventListener("afterprint", () => cleanup());
             };
-            if (image && !image.complete) {
-                image.addEventListener("load", () => firePrint(), { once: true });
-                image.addEventListener("error", () => firePrint(), { once: true });
-                // Fallback: if the image stalls, still open the dialog.
-                fallbackTimer = window.setTimeout(() => firePrint(), 3000);
+            if (images.some(image => !image.complete)) {
+                void Promise.all(images.map(image => image.complete ? Promise.resolve() : new Promise(resolve => {
+                    image.addEventListener('load', () => resolve(), { once: true });
+                    image.addEventListener('error', () => resolve(), { once: true });
+                }))).then(firePrint);
+                fallbackTimer = window.setTimeout(firePrint, 3000);
             }
-            else {
+            else
                 firePrint();
-            }
         });
         iframe.addEventListener("error", () => cleanup());
     });

package/dist/government-form.d.ts

@@ -11,6 +11,11 @@ export type GovernmentFormProps = {
     submitLabel?: string;
     disabled?: boolean;
     children?: ReactNode;
+    /** Supply the actual document preview and map the form data to its typed props. */
+    preview?: ReactNode;
+    previewTitle?: string;
+    previewFilename?: string;
+    onExportXlsx?: () => void | Promise<void>;
 };
 /** A controlled entry form for the repository's configurable report definitions. */
-export declare function GovernmentForm({ code, definition, value, onChange, onSubmit, validate, submitLabel, disabled, children }: GovernmentFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function GovernmentForm({ code, definition, value, onChange, onSubmit, validate, submitLabel, disabled, children, preview, previewTitle, previewFilename, onExportXlsx }: GovernmentFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/government-form.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from 'react';
+import { DocumentPreviewDialog } from './document-preview.js';
 import { formDefinitions, validateFormValues } from './definitions.js';
 /** A controlled entry form for the repository's configurable report definitions. */
-export function GovernmentForm({ code, definition = formDefinitions[code], value, onChange, onSubmit, validate, submitLabel = 'Save document', disabled = false, children }) {
+export function GovernmentForm({ code, definition = formDefinitions[code], value, onChange, onSubmit, validate, submitLabel = 'Save document', disabled = false, children, preview, previewTitle, previewFilename, onExportXlsx }) {
     const prefix = useId();
+    const [previewOpen, setPreviewOpen] = useState(false);
     const saving = useRef(false);
     const [pending, setPending] = useState(false);
     const [errors, setErrors] = useState({});
@@ -41,5 +43,5 @@ export function GovernmentForm({ code, definition = formDefinitions[code], value
                 saving.current = false;
                 setPending(false);
             }
-        }, children: [_jsxs("header", { className: "qforms-header", children: [_jsx("p", { className: "qforms-code", children: definition.reportCode }), _jsx("h2", { children: definition.title }), _jsx("p", { children: definition.description })] }), Object.keys(errors).length > 0 && _jsxs("div", { ref: summaryRef, tabIndex: -1, role: "alert", className: "qforms-errors", children: [_jsx("strong", { children: "Review the form before saving." }), _jsx("ul", { children: Object.entries(errors).map(([key, error]) => _jsx("li", { children: _jsx("a", { href: `#${prefix}-${key}`, children: error }) }, key)) })] }), _jsx("div", { className: "qforms-grid", children: definition.fields.map(field => input(field, value.values[field.id] ?? '', `values.${field.id}`, next => onChange({ ...value, values: { ...value.values, [field.id]: next } }))) }), !!definition.tableFields?.length && _jsxs("section", { className: "qforms-lines", "aria-label": "Line items", children: [_jsxs("div", { className: "qforms-line-heading", children: [_jsx("h3", { children: "Line items" }), _jsx("button", { type: "button", disabled: locked, onClick: () => onChange({ ...value, rows: [...value.rows, Object.fromEntries(definition.tableFields.map(field => [field.id, '']))] }), children: "Add item" })] }), value.rows.map((row, index) => _jsxs("fieldset", { className: "qforms-row", children: [_jsxs("legend", { children: ["Item ", index + 1] }), _jsx("div", { className: "qforms-grid", children: definition.tableFields.map(field => input(field, row[field.id] ?? '', `rows.${index}.${field.id}`, next => onChange({ ...value, rows: value.rows.map((item, i) => i === index ? { ...item, [field.id]: next } : item) }))) }), _jsx("button", { type: "button", disabled: locked, "aria-label": `Remove item ${index + 1}`, onClick: () => { setErrors({}); onChange({ ...value, rows: value.rows.filter((_, i) => i !== index) }); }, children: "Remove item" })] }, index))] }), children, saveError && _jsx("p", { role: "alert", className: "qforms-error", children: saveError }), _jsx("footer", { children: _jsx("button", { type: "submit", disabled: locked, children: pending ? 'Saving…' : submitLabel }) })] });
+        }, children: [_jsxs("header", { className: "qforms-header", children: [_jsx("p", { className: "qforms-code", children: definition.reportCode }), _jsx("h2", { children: definition.title }), _jsx("p", { children: definition.description })] }), Object.keys(errors).length > 0 && _jsxs("div", { ref: summaryRef, tabIndex: -1, role: "alert", className: "qforms-errors", children: [_jsx("strong", { children: "Review the form before saving." }), _jsx("ul", { children: Object.entries(errors).map(([key, error]) => _jsx("li", { children: _jsx("a", { href: `#${prefix}-${key}`, children: error }) }, key)) })] }), _jsx("div", { className: "qforms-grid", children: definition.fields.map(field => input(field, value.values[field.id] ?? '', `values.${field.id}`, next => onChange({ ...value, values: { ...value.values, [field.id]: next } }))) }), !!definition.tableFields?.length && _jsxs("section", { className: "qforms-lines", "aria-label": "Line items", children: [_jsxs("div", { className: "qforms-line-heading", children: [_jsx("h3", { children: "Line items" }), _jsx("button", { type: "button", disabled: locked, onClick: () => onChange({ ...value, rows: [...value.rows, Object.fromEntries(definition.tableFields.map(field => [field.id, '']))] }), children: "Add item" })] }), value.rows.map((row, index) => _jsxs("fieldset", { className: "qforms-row", children: [_jsxs("legend", { children: ["Item ", index + 1] }), _jsx("div", { className: "qforms-grid", children: definition.tableFields.map(field => input(field, row[field.id] ?? '', `rows.${index}.${field.id}`, next => onChange({ ...value, rows: value.rows.map((item, i) => i === index ? { ...item, [field.id]: next } : item) }))) }), _jsx("button", { type: "button", disabled: locked, "aria-label": `Remove item ${index + 1}`, onClick: () => { setErrors({}); onChange({ ...value, rows: value.rows.filter((_, i) => i !== index) }); }, children: "Remove item" })] }, index))] }), children, saveError && _jsx("p", { role: "alert", className: "qforms-error", children: saveError }), _jsxs("footer", { children: [preview != null && _jsx("button", { type: "button", onClick: () => setPreviewOpen(true), children: "Preview document" }), _jsx("button", { type: "submit", disabled: locked, children: pending ? 'Saving…' : submitLabel })] }), preview != null && _jsx(DocumentPreviewDialog, { open: previewOpen, onOpenChange: setPreviewOpen, title: previewTitle ?? `${definition.title} — Document preview`, filename: previewFilename ?? definition.reportCode, onExportXlsx: onExportXlsx, children: preview })] });
 }

package/dist/index.d.ts

@@ -47,3 +47,5 @@ export * from './inventory/components/inventory-item-form.js';
 export * from './inventory/components/inventory-item-preview.js';
 export * from './inventory/types.js';
 export * from './gam/components/purchase-order-page-client.js';
+export { DocumentPreviewDialog, DocumentPreviewPanel } from './document-preview.js';
+export type { DocumentPreviewProps, DocumentPreviewDialogProps, FormPreviewDialogProps, FormPreviewPanelProps } from './document-preview.js';

package/dist/index.js

@@ -48,3 +48,4 @@ export * from './inventory/components/inventory-item-form.js';
 export * from './inventory/components/inventory-item-preview.js';
 export * from './inventory/types.js';
 export * from './gam/components/purchase-order-page-client.js';
+export { DocumentPreviewDialog, DocumentPreviewPanel } from './document-preview.js';

package/dist/inventory/iar.d.ts

@@ -2,3 +2,8 @@ export { Form, Form as default, definition } from '../forms/iar.js';
 export { IarDocumentPreview, IarDocumentPreview as Preview } from '../reports/iar/_components/document-preview.js';
 export { IarCreateForm } from '../reports/iar/_components/create-form.js';
 export type * from '../reports/iar/types.js';
+import { IarDocumentPreview as PreviewComponent } from '../reports/iar/_components/document-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/iar.js

@@ -2,3 +2,8 @@
 export { Form, Form as default, definition } from '../forms/iar.js';
 export { IarDocumentPreview, IarDocumentPreview as Preview } from '../reports/iar/_components/document-preview.js';
 export { IarCreateForm } from '../reports/iar/_components/create-form.js';
+import { IarDocumentPreview as PreviewComponent } from '../reports/iar/_components/document-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'IAR document preview', filename: 'iar' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;

package/dist/inventory/ics.d.ts

@@ -1,2 +1,7 @@
 export { Form, Form as default, definition } from '../forms/ics.js';
 export { IcsPreview, IcsPreview as Preview } from '../gam/components/ics-preview.js';
+import { IcsPreview as PreviewComponent } from '../gam/components/ics-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/ics.js

@@ -1,3 +1,8 @@
 "use client";
 export { Form, Form as default, definition } from '../forms/ics.js';
 export { IcsPreview, IcsPreview as Preview } from '../gam/components/ics-preview.js';
+import { IcsPreview as PreviewComponent } from '../gam/components/ics-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'ICS document preview', filename: 'ics' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;

package/dist/inventory/iirup.d.ts

@@ -1,2 +1,7 @@
 export { Form, Form as default, definition } from '../forms/iirup.js';
 export { IirupPreview, IirupPreview as Preview } from '../gam/components/iirup-preview.js';
+import { IirupPreview as PreviewComponent } from '../gam/components/iirup-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/iirup.js

@@ -1,3 +1,8 @@
 "use client";
 export { Form, Form as default, definition } from '../forms/iirup.js';
 export { IirupPreview, IirupPreview as Preview } from '../gam/components/iirup-preview.js';
+import { IirupPreview as PreviewComponent } from '../gam/components/iirup-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'IIRUP document preview', filename: 'iirup' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;

package/dist/inventory/iirusp.d.ts

@@ -2,3 +2,8 @@ export { Form, Form as default, definition } from '../forms/iirusp.js';
 export { IiruspDocumentPreview, IiruspDocumentPreview as Preview } from '../reports/iirusp/_components/document-preview.js';
 export { IiruspCreateForm } from '../reports/iirusp/_components/create-form.js';
 export type * from '../reports/iirusp/types.js';
+import { IiruspDocumentPreview as PreviewComponent } from '../reports/iirusp/_components/document-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/iirusp.js

@@ -2,3 +2,8 @@
 export { Form, Form as default, definition } from '../forms/iirusp.js';
 export { IiruspDocumentPreview, IiruspDocumentPreview as Preview } from '../reports/iirusp/_components/document-preview.js';
 export { IiruspCreateForm } from '../reports/iirusp/_components/create-form.js';
+import { IiruspDocumentPreview as PreviewComponent } from '../reports/iirusp/_components/document-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'IIRUSP document preview', filename: 'iirusp' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;

package/dist/inventory/item.d.ts

@@ -1,3 +1,8 @@
 export { InventoryItemForm as default, InventoryItemForm as Form, InventoryItemForm } from './components/inventory-item-form.js';
 export { InventoryItemPreview as Preview, InventoryItemPreview } from './components/inventory-item-preview.js';
 export type * from './types.js';
+import { InventoryItemPreview as PreviewComponent } from './components/inventory-item-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/item.js

@@ -1,3 +1,8 @@
 "use client";
 export { InventoryItemForm as default, InventoryItemForm as Form, InventoryItemForm } from './components/inventory-item-form.js';
 export { InventoryItemPreview as Preview, InventoryItemPreview } from './components/inventory-item-preview.js';
+import { InventoryItemPreview as PreviewComponent } from './components/inventory-item-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'ITEM document preview', filename: 'item' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;

package/dist/inventory/itr.d.ts

@@ -2,3 +2,8 @@ export { Form, Form as default, definition } from '../forms/itr.js';
 export { ItrPreview, ItrPreview as Preview } from '../gam/components/itr-preview.js';
 export { CreateForm as ItrCreateForm } from '../reports/itr/_components/create-form.js';
 export type * from '../reports/itr/types.js';
+import { ItrPreview as PreviewComponent } from '../gam/components/itr-preview.js';
+import type { ComponentType, ComponentProps } from 'react';
+import type { FormPreviewDialogProps, FormPreviewPanelProps } from '../document-preview.js';
+export declare const PreviewDialog: ComponentType<FormPreviewDialogProps<ComponentProps<typeof PreviewComponent>>>;
+export declare const PreviewPanel: ComponentType<FormPreviewPanelProps<ComponentProps<typeof PreviewComponent>>>;

package/dist/inventory/itr.js

@@ -2,3 +2,8 @@
 export { Form, Form as default, definition } from '../forms/itr.js';
 export { ItrPreview, ItrPreview as Preview } from '../gam/components/itr-preview.js';
 export { CreateForm as ItrCreateForm } from '../reports/itr/_components/create-form.js';
+import { ItrPreview as PreviewComponent } from '../gam/components/itr-preview.js';
+import { createDocumentPreviewComponents } from '../document-preview.js';
+const previewComponents = createDocumentPreviewComponents(PreviewComponent, { title: 'ITR document preview', filename: 'itr' });
+export const PreviewDialog = previewComponents.PreviewDialog;
+export const PreviewPanel = previewComponents.PreviewPanel;