@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/print-preview/print-preview-dialog.js

@@ -0,0 +1,322 @@
+// Full-screen print-preview dialog. Modeled on Google Sheets — left
+// area scrolls through paginated previews, right sidebar configures
+// paper / orientation / scale / margins / scope / gridlines.
+//
+// API: the host passes `sheet={activeSheet}` (the existing `Sheet`
+// object from `useSpreadsheetState.sheets`) plus the cell-data
+// accessors as flat props. Everything the dialog needs is either
+// already on the Sheet (`title`, `merges`, `frozenRowCount`,
+// `frozenColumnCount`, per-row/column metadata sizes) or passed
+// alongside (`getFormattedValue`, `getEffectiveFormat`, …) — no
+// adapter object, no nested PrintSheet construction.
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Button, IconButton, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, } from "@rowsncolumns/ui";
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { PageBlock } from "./page-block";
+import { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT } from "../../config";
+import { DEFAULT_PRINT_SETTINGS, PAPER_SIZES, resolveContentArea, resolveMargins, resolvePageDimensions, } from "./settings";
+import { computePageLayout, measureRange, resolveScale, } from "./use-page-layout";
+import { runPrint } from "./run-print";
+const resolveSheet = (sheet, options) => {
+    const defaultColumnWidth = sheet.defaultColumnWidth ?? DEFAULT_COLUMN_WIDTH;
+    const defaultRowHeight = sheet.defaultRowHeight ?? DEFAULT_ROW_HEIGHT;
+    return {
+        sheetId: sheet.sheetId,
+        name: sheet.title || `Sheet ${sheet.sheetId}`,
+        rowCount: options.getDataRowCount?.(sheet.sheetId) ?? sheet.rowCount ?? 0,
+        columnCount: options.getDataColumnCount?.(sheet.sheetId) ?? sheet.columnCount ?? 0,
+        merges: sheet.merges ?? undefined,
+        frozenRows: sheet.frozenRowCount ?? undefined,
+        frozenColumns: sheet.frozenColumnCount ?? undefined,
+        getColumnWidth: (c) => sheet.columnMetadata?.[c]?.size ?? defaultColumnWidth,
+        getRowHeight: (r) => sheet.rowMetadata?.[r]?.size ?? defaultRowHeight,
+    };
+};
+const labelClass = "text-xs font-medium text-rnc-foreground/80 mb-1 block";
+const fieldRowClass = "mb-3";
+const controlClass = "w-full text-xs border border-solid border-rnc-border rounded-sm px-2 py-1.5 bg-rnc-background text-rnc-foreground focus:outline-none focus:ring-1 focus:ring-ring";
+export const PrintPreviewDialog = ({ isOpen, onClose, sheets, activeSheetId, selections, title, getFormattedValue, getEffectiveFormat, getDataRowCount, getDataColumnCount, getCellData, }) => {
+    const [settings, setSettings] = useState(DEFAULT_PRINT_SETTINGS);
+    const printContainerRef = useRef(null);
+    // Look up the active sheet from the supplied list. When the id
+    // doesn't match anything (shouldn't happen) we render nothing.
+    const activeSheetSource = useMemo(() => sheets.find((s) => s.sheetId === activeSheetId), [sheets, activeSheetId]);
+    const activeSheet = useMemo(() => activeSheetSource
+        ? resolveSheet(activeSheetSource, {
+            getDataRowCount,
+            getDataColumnCount,
+        })
+        : undefined, [activeSheetSource, getDataRowCount, getDataColumnCount]);
+    const resolvedAllSheets = useMemo(() => sheets.map((s) => resolveSheet(s, { getDataRowCount, getDataColumnCount })), [sheets, getDataRowCount, getDataColumnCount]);
+    const selectionBounds = useMemo(() => {
+        const range = selections?.[0]?.range;
+        if (!range)
+            return undefined;
+        return {
+            startRow: range.startRowIndex,
+            endRow: range.endRowIndex,
+            startColumn: range.startColumnIndex,
+            endColumn: range.endColumnIndex,
+        };
+    }, [selections]);
+    const hasNote = useMemo(() => getCellData
+        ? (sheetId, rowIndex, columnIndex) => !!getCellData(sheetId, rowIndex, columnIndex)?.note
+        : undefined, [getCellData]);
+    const sheetsForScope = useMemo(() => {
+        if (!isOpen || !activeSheet)
+            return [];
+        switch (settings.scope) {
+            case "workbook":
+                return resolvedAllSheets.length ? resolvedAllSheets : [activeSheet];
+            case "selection":
+                if (!selectionBounds)
+                    return [activeSheet];
+                return [{ ...activeSheet, printBounds: selectionBounds }];
+            case "current-sheet":
+            default:
+                return [activeSheet];
+        }
+    }, [isOpen, settings.scope, resolvedAllSheets, activeSheet, selectionBounds]);
+    const pages = useMemo(() => {
+        if (!isOpen)
+            return [];
+        const out = [];
+        const contentArea = resolveContentArea(settings);
+        for (const sheet of sheetsForScope) {
+            // Grid is 1-indexed inclusive-inclusive (index 0 of sheetData is
+            // reserved). `rowCount = 10` means data lives at rows 1..10 —
+            // endRow is the count itself, not count - 1.
+            const bounds = sheet.printBounds ?? {
+                startRow: 1,
+                endRow: Math.max(1, sheet.rowCount),
+                startColumn: 1,
+                endColumn: Math.max(1, sheet.columnCount),
+            };
+            const range = measureRange(bounds.startRow, bounds.endRow, bounds.startColumn, bounds.endColumn, sheet.getColumnWidth, sheet.getRowHeight);
+            const scale = resolveScale(settings.scaleMode, settings.customScale, range.width, range.height, contentArea.width, contentArea.height);
+            const repeatRows = settings.repeatFrozenRows && sheet.frozenRows ? sheet.frozenRows : 0;
+            const repeatColumns = settings.repeatFrozenColumns && sheet.frozenColumns
+                ? sheet.frozenColumns
+                : 0;
+            const blocks = computePageLayout({
+                startRow: bounds.startRow,
+                endRow: bounds.endRow,
+                startColumn: bounds.startColumn,
+                endColumn: bounds.endColumn,
+                getColumnWidth: sheet.getColumnWidth,
+                getRowHeight: sheet.getRowHeight,
+                contentWidth: contentArea.width,
+                contentHeight: contentArea.height,
+                scale,
+                pageOrder: settings.pageOrder,
+                repeatRows,
+                repeatColumns,
+            });
+            for (const block of blocks)
+                out.push({ sheet, block });
+        }
+        return out;
+    }, [isOpen, settings, sheetsForScope]);
+    // Single Date snapshot reused by every page so the printed copies
+    // agree on "now" — Google Sheets does the same so a multi-page print
+    // doesn't tick over a minute mid-document.
+    const renderedAt = useMemo(() => new Date(), [isOpen, settings]);
+    const pageDims = useMemo(() => resolvePageDimensions(settings), [settings]);
+    const margins = useMemo(() => resolveMargins(settings), [settings]);
+    const contentArea = useMemo(() => resolveContentArea(settings), [settings]);
+    const setField = (key, value) => setSettings((prev) => ({ ...prev, [key]: value }));
+    const onPrint = useCallback(() => {
+        if (!printContainerRef.current)
+            return;
+        // Send only the page-block elements to the iframe. Dumping the
+        // full container HTML pulls in the on-screen wrappers + per-page
+        // "Sheet — page N of M" labels, and those labels nudge the first
+        // PageBlock partway down so the browser's print engine breaks
+        // before it finishes — first physical page renders blank and all
+        // real content shifts by one.
+        const blocks = printContainerRef.current.querySelectorAll("[data-page-index]");
+        const pagesHtml = Array.from(blocks)
+            .map((el) => el.outerHTML)
+            .join("");
+        runPrint({
+            pagesHtml,
+            pageWidth: pageDims.width,
+            pageHeight: pageDims.height,
+            sizeKeyword: pageDims.sizeKeyword,
+        });
+    }, [pageDims]);
+    if (!isOpen || !activeSheet)
+        return null;
+    // Effective scale across all rendered sheets — same input we feed
+    // each sheet's `computePageLayout` so PageBlock cells display at the
+    // matching size on screen.
+    const computeScaleForSheet = (sheet) => {
+        const bounds = sheet.printBounds ?? {
+            startRow: 1,
+            endRow: Math.max(1, sheet.rowCount),
+            startColumn: 1,
+            endColumn: Math.max(1, sheet.columnCount),
+        };
+        const range = measureRange(bounds.startRow, bounds.endRow, bounds.startColumn, bounds.endColumn, sheet.getColumnWidth, sheet.getRowHeight);
+        return resolveScale(settings.scaleMode, settings.customScale, range.width, range.height, contentArea.width, contentArea.height);
+    };
+    return (React.createElement("div", { className: "fixed inset-0 z-[100] bg-rnc-background flex flex-col font-system", role: "dialog", "aria-modal": "true", "aria-label": "Print preview" },
+        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-solid border-rnc-border" },
+            React.createElement("div", { className: "flex items-center gap-3" },
+                React.createElement(IconButton, { onClick: onClose, "aria-label": "Close" },
+                    React.createElement(Cross2Icon, null)),
+                React.createElement("div", { className: "font-semibold text-sm text-rnc-foreground" }, "Print preview"),
+                React.createElement("div", { className: "text-xs text-rnc-muted-foreground" },
+                    pages.length,
+                    " ",
+                    pages.length === 1 ? "page" : "pages")),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(Button, { variant: "ghost", size: "xs", onClick: onClose }, "Cancel"),
+                React.createElement(Button, { variant: "primary", size: "xs", onClick: onPrint }, "Print"))),
+        React.createElement("div", { className: "flex-1 flex min-h-0" },
+            React.createElement("div", { className: "flex-1 overflow-auto bg-rnc-muted/30 p-8" },
+                React.createElement("div", { ref: printContainerRef, className: "flex flex-col items-center gap-6" },
+                    pages.map(({ sheet, block }, i) => {
+                        const bounds = sheet.printBounds ?? {
+                            startRow: 1,
+                            endRow: Math.max(1, sheet.rowCount),
+                            startColumn: 1,
+                            endColumn: Math.max(1, sheet.columnCount),
+                        };
+                        const repeatRows = settings.repeatFrozenRows && sheet.frozenRows
+                            ? sheet.frozenRows
+                            : 0;
+                        const repeatColumns = settings.repeatFrozenColumns && sheet.frozenColumns
+                            ? sheet.frozenColumns
+                            : 0;
+                        return (React.createElement("div", { key: `${sheet.sheetId}-${block.index}`, className: "flex flex-col items-center" },
+                            React.createElement("div", { className: "text-[11px] text-rnc-muted-foreground mb-1 tabular-nums" },
+                                sheet.name,
+                                " \u2014 page ",
+                                i + 1,
+                                " of ",
+                                pages.length),
+                            React.createElement(PageBlock, { block: block, pageWidth: pageDims.width, pageHeight: pageDims.height, margins: margins, scale: computeScaleForSheet(sheet), showGridlines: settings.showGridlines, showNotes: settings.showNotes, horizontalAlignment: settings.horizontalAlignment, verticalAlignment: settings.verticalAlignment, sheetId: sheet.sheetId, getFormattedValue: getFormattedValue, getEffectiveFormat: getEffectiveFormat, getColumnWidth: sheet.getColumnWidth, getRowHeight: sheet.getRowHeight, merges: sheet.merges, hasNote: hasNote, frozenRowStart: repeatRows > 0 ? bounds.startRow : undefined, frozenRowEnd: repeatRows > 0
+                                    ? bounds.startRow + repeatRows - 1
+                                    : undefined, frozenColumnStart: repeatColumns > 0 ? bounds.startColumn : undefined, frozenColumnEnd: repeatColumns > 0
+                                    ? bounds.startColumn + repeatColumns - 1
+                                    : undefined, headerFooter: Object.values(settings.headerFooter).some(Boolean)
+                                    ? {
+                                        fields: settings.headerFooter,
+                                        workbookTitle: title,
+                                        sheetName: sheet.name,
+                                        pageNumber: i + 1,
+                                        pageCount: pages.length,
+                                        now: renderedAt,
+                                    }
+                                    : undefined })));
+                    }),
+                    pages.length === 0 ? (React.createElement("div", { className: "text-xs text-rnc-muted-foreground py-12" }, "No content to print on the selected scope.")) : null)),
+            React.createElement("aside", { className: "w-[320px] shrink-0 border-l border-solid border-rnc-border overflow-y-auto p-4 bg-rnc-background border-t-0" },
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Print"),
+                    React.createElement(Select, { value: settings.scope, onValueChange: (v) => setField("scope", v) },
+                        React.createElement(SelectTrigger, null,
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, { className: "z-[101]" },
+                                React.createElement(SelectItem, { value: "current-sheet" }, "Current sheet"),
+                                sheets.length > 1 ? (React.createElement(SelectItem, { value: "workbook" }, "Workbook")) : null,
+                                selectionBounds ? (React.createElement(SelectItem, { value: "selection" }, "Selection")) : null)))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Paper size"),
+                    React.createElement(Select, { value: settings.paperSize, onValueChange: (v) => setField("paperSize", v) },
+                        React.createElement(SelectTrigger, null,
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, { className: "z-[101]" }, Object.values(PAPER_SIZES).map((p) => (React.createElement(SelectItem, { key: p.id, value: p.id }, p.label))))))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Page orientation"),
+                    React.createElement("div", { className: "flex gap-1" }, ["portrait", "landscape"].map((o) => (React.createElement(Button, { key: o, onClick: () => setField("orientation", o), size: "xs", className: `border border-solid py-1 ${settings.orientation === o
+                            ? "border-rnc-primary bg-rnc-primary text-rnc-primary-foreground hover:bg-rnc-primary hover:text-rnc-primary-foreground"
+                            : "border-rnc-border hover:bg-rnc-accent"}` }, o === "portrait" ? "Portrait" : "Landscape"))))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Scale"),
+                    React.createElement(Select, { value: settings.scaleMode, onValueChange: (v) => setField("scaleMode", v) },
+                        React.createElement(SelectTrigger, null,
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, { className: "z-[101]" },
+                                React.createElement(SelectItem, { value: "100" }, "Normal (100%)"),
+                                React.createElement(SelectItem, { value: "fit-width" }, "Fit to width"),
+                                React.createElement(SelectItem, { value: "fit-page" }, "Fit to page"),
+                                React.createElement(SelectItem, { value: "custom" }, "Custom\u2026")))),
+                    settings.scaleMode === "custom" ? (React.createElement("div", { className: "mt-2 flex items-center gap-2" },
+                        React.createElement("input", { type: "number", min: 10, max: 400, step: 5, className: controlClass, value: Math.round(settings.customScale * 100), onChange: (e) => {
+                                const v = Math.max(10, Math.min(400, Number(e.target.value) || 100));
+                                setField("customScale", v / 100);
+                            } }),
+                        React.createElement("span", { className: "text-xs text-rnc-muted-foreground" }, "%"))) : null),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Margins"),
+                    React.createElement(Select, { value: settings.marginPreset, onValueChange: (v) => setField("marginPreset", v) },
+                        React.createElement(SelectTrigger, null,
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, { className: "z-[101]" },
+                                React.createElement(SelectItem, { value: "normal" }, "Normal"),
+                                React.createElement(SelectItem, { value: "narrow" }, "Narrow"),
+                                React.createElement(SelectItem, { value: "wide" }, "Wide"),
+                                React.createElement(SelectItem, { value: "custom" }, "Custom\u2026")))),
+                    settings.marginPreset === "custom" ? (React.createElement("div", { className: "mt-2 grid grid-cols-2 gap-2" }, ["top", "right", "bottom", "left"].map((edge) => (React.createElement("div", { key: edge },
+                        React.createElement("label", { className: "text-[10px] uppercase tracking-wide text-rnc-muted-foreground" }, edge),
+                        React.createElement("input", { type: "number", min: 0, step: 6, className: controlClass, value: settings.customMargins[edge], onChange: (e) => setField("customMargins", {
+                                ...settings.customMargins,
+                                [edge]: Math.max(0, Number(e.target.value) || 0),
+                            }) })))))) : null),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Formatting"),
+                    React.createElement("label", { className: "flex items-center gap-2 text-xs py-1" },
+                        React.createElement("input", { type: "checkbox", checked: settings.showGridlines, onChange: (e) => setField("showGridlines", e.target.checked) }),
+                        "Show gridlines"),
+                    React.createElement("label", { className: "flex items-center gap-2 text-xs py-1" },
+                        React.createElement("input", { type: "checkbox", checked: settings.showNotes, onChange: (e) => setField("showNotes", e.target.checked) }),
+                        "Show notes")),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Page order"),
+                    React.createElement(Select, { value: settings.pageOrder, onValueChange: (v) => setField("pageOrder", v) },
+                        React.createElement(SelectTrigger, null,
+                            React.createElement(SelectValue, null)),
+                        React.createElement(SelectPortal, null,
+                            React.createElement(SelectContent, { className: "z-[101]" },
+                                React.createElement(SelectItem, { value: "over-then-down" }, "Over, then down"),
+                                React.createElement(SelectItem, { value: "down-then-over" }, "Down, then over"))))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Horizontal alignment"),
+                    React.createElement("div", { className: "flex gap-1" }, ["left", "center", "right"].map((a) => (React.createElement(Button, { key: a, onClick: () => setField("horizontalAlignment", a), size: "xs", className: `border border-solid capitalize  py-1 ${settings.horizontalAlignment === a
+                            ? "border-rnc-primary bg-rnc-primary hover:bg-rnc-primary text-rnc-primary-foreground hover:text-rnc-primary-foreground"
+                            : "border-rnc-border hover:bg-rnc-accent"}` }, a))))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Vertical alignment"),
+                    React.createElement("div", { className: "flex gap-1" }, ["top", "middle", "bottom"].map((a) => (React.createElement(Button, { key: a, onClick: () => setField("verticalAlignment", a), size: "xs", className: `border border-solid capitalize py-1 ${settings.verticalAlignment === a
+                            ? "border-rnc-primary bg-rnc-primary hover:bg-rnc-primary text-rnc-primary-foreground hover:text-rnc-primary-foreground"
+                            : "border-rnc-border hover:bg-rnc-accent"}` }, a))))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("label", { className: labelClass }, "Headers & footers")),
+                [
+                    ["pageNumbers", "Page numbers"],
+                    ["workbookTitle", "Workbook title"],
+                    ["sheetName", "Sheet name"],
+                    ["currentDate", "Current date"],
+                    ["currentTime", "Current time"],
+                ].map(([key, label]) => (React.createElement("label", { key: key, className: "flex items-center gap-2 text-xs py-1 text-rnc-foreground" },
+                    React.createElement("input", { type: "checkbox", checked: settings.headerFooter[key], onChange: (e) => setField("headerFooter", {
+                            ...settings.headerFooter,
+                            [key]: e.target.checked,
+                        }) }),
+                    label))),
+                React.createElement("div", { className: fieldRowClass },
+                    React.createElement("div", { className: labelClass }, "Row & column headers"),
+                    React.createElement("div", { className: "text-[10px] text-rnc-muted-foreground leading-snug" }, "Go to View > Freeze to select which rows/columns to repeat on all pages")),
+                React.createElement("label", { className: `flex items-center gap-2 text-xs py-1 text-rnc-foreground ${activeSheet.frozenRows ? "" : "opacity-40 cursor-not-allowed"}` },
+                    React.createElement("input", { type: "checkbox", disabled: !activeSheet.frozenRows, checked: settings.repeatFrozenRows, onChange: (e) => setField("repeatFrozenRows", e.target.checked) }),
+                    "Repeat frozen rows"),
+                React.createElement("label", { className: `flex items-center gap-2 text-xs py-1 text-rnc-foreground ${activeSheet.frozenColumns ? "" : "opacity-40 cursor-not-allowed"}` },
+                    React.createElement("input", { type: "checkbox", disabled: !activeSheet.frozenColumns, checked: settings.repeatFrozenColumns, onChange: (e) => setField("repeatFrozenColumns", e.target.checked) }),
+                    "Repeat frozen columns")))));
+};

package/dist/esm/components/print-preview/run-print.d.ts

@@ -0,0 +1,11 @@
+export type RunPrintOptions = {
+    /** The cell-table HTML rendered by the preview. */
+    pagesHtml: string;
+    /** CSS px for one paper page (orientation-resolved). */
+    pageWidth: number;
+    pageHeight: number;
+    /** Keyword that goes into `@page { size: ... }` (e.g. `letter landscape`). */
+    sizeKeyword: string;
+};
+export declare const runPrint: (opts: RunPrintOptions) => void;
+//# sourceMappingURL=run-print.d.ts.map

package/dist/esm/components/print-preview/run-print.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-print.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/run-print.ts"],"names":[],"mappings":"AAcA,MAAM,MAAM,eAAe,GAAG;IAC5B,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAuDF,eAAO,MAAM,QAAQ,GAAI,MAAM,eAAe,KAAG,IAkDhD,CAAC"}

package/dist/esm/components/print-preview/run-print.js

@@ -0,0 +1,107 @@
+// Send the print preview to the browser's print engine.
+//
+// Approach: create a hidden iframe, inject the same HTML the on-screen
+// preview just rendered, plus an `@page` stylesheet matching the
+// active settings, then call `iframe.contentWindow.print()`. After
+// the print dialog closes we tear the iframe down. This avoids the
+// pitfall of calling `window.print()` directly — that prints the
+// whole host page (toolbar, sidebars, the rest of the app chrome).
+//
+// The iframe trick relies on (a) `srcdoc` being available, and (b)
+// the print stylesheet honoring `@page size`. Both have been
+// well-supported in Chrome / Firefox / Safari / Edge since 2018 —
+// matches the host's Konva canvas + ProseMirror baseline.
+const buildPrintDocument = ({ pagesHtml, pageWidth, pageHeight, sizeKeyword, }) => {
+    // The on-screen preview wraps each page in its own div with
+    // `breakAfter: page` already set — the only extra work the print
+    // CSS does is force the body to size to the page and strip the
+    // screen-only chrome (drop shadow, gap between pages, scrolling).
+    return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Print</title>
+    <style>
+      @page {
+        size: ${sizeKeyword};
+        margin: 0;
+      }
+      html, body {
+        margin: 0;
+        padding: 0;
+        background: white;
+      }
+      body {
+        font-family: Arial, sans-serif;
+        font-size: 12px;
+        color: #111827;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
+      [data-page-index] {
+        /* Strip the preview's drop shadow + outer gap. The page-block
+           div already has the right paper dimensions. */
+        box-shadow: none !important;
+        margin: 0 !important;
+      }
+      /* Skip the trailing break-after on the final block — without
+         this Chrome / Safari emit one extra blank page after the
+         last real page. */
+      [data-page-index]:last-child {
+        break-after: auto !important;
+        page-break-after: auto !important;
+      }
+      table { border-collapse: collapse; }
+      td { vertical-align: top; }
+    </style>
+  </head>
+  <body>${pagesHtml}</body>
+</html>`;
+};
+export const runPrint = (opts) => {
+    if (typeof document === "undefined")
+        return;
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.style.cssText = [
+        "position: fixed",
+        "right: 0",
+        "bottom: 0",
+        "width: 0",
+        "height: 0",
+        "border: 0",
+        "visibility: hidden",
+    ].join(";");
+    iframe.srcdoc = buildPrintDocument(opts);
+    document.body.appendChild(iframe);
+    let removed = false;
+    const cleanup = () => {
+        if (removed)
+            return;
+        removed = true;
+        iframe.remove();
+    };
+    // Fires when the user dismisses the system print dialog. We listen
+    // on both `afterprint` and a fallback focus event because Safari
+    // occasionally skips the former.
+    const onLoad = () => {
+        const win = iframe.contentWindow;
+        if (!win) {
+            cleanup();
+            return;
+        }
+        win.addEventListener("afterprint", cleanup);
+        window.addEventListener("focus", () => {
+            // Delay so afterprint has a chance to fire first.
+            setTimeout(cleanup, 1000);
+        }, { once: true });
+        try {
+            win.focus();
+            win.print();
+        }
+        catch {
+            cleanup();
+        }
+    };
+    iframe.addEventListener("load", onLoad, { once: true });
+};

package/dist/esm/components/print-preview/settings.d.ts

@@ -0,0 +1,130 @@
+export declare const DPI = 96;
+export type PaperSizeId = "letter" | "tabloid" | "legal" | "statement" | "executive" | "folio" | "a3" | "a4" | "a5" | "b4" | "b5";
+export type PaperSize = {
+    id: PaperSizeId;
+    label: string;
+    /** CSS-pixel dimensions in PORTRAIT orientation. Swap for landscape. */
+    width: number;
+    height: number;
+    /**
+     * Value emitted in `@page { size: ... }` for the print stylesheet.
+     * Use a CSS-named size when the browser supports it (`letter`,
+     * `legal`, `A4`, `A5`, `B4`, `B5`, etc.); fall back to an explicit
+     * "<W>in <H>in" pair for the imperial / regional sizes (Statement,
+     * Executive, Folio, Tabloid) that have no portable keyword.
+     */
+    pageSize: string;
+};
+export declare const PAPER_SIZES: Record<PaperSizeId, PaperSize>;
+export type Orientation = "portrait" | "landscape";
+export type Margins = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type MarginPresetId = "normal" | "narrow" | "wide" | "custom";
+export declare const MARGIN_PRESETS: Record<Exclude<MarginPresetId, "custom">, Margins>;
+export type ScaleMode = "100" | "fit-width" | "fit-page" | "custom";
+export type PrintScope = "current-sheet" | "workbook" | "selection";
+export type PrintAlignment = "left" | "center" | "right";
+export type PrintVerticalAlignment = "top" | "middle" | "bottom";
+/**
+ * `over-then-down` (Excel's `overThenDown`) walks pages left-to-right
+ * across column bands first, then advances to the next row band.
+ * `down-then-over` (Excel's default `downThenOver`) walks vertically
+ * within a column band before moving to the next column band. Google
+ * Sheets exposes both via the "Page order" dropdown.
+ */
+export type PageOrder = "over-then-down" | "down-then-over";
+/**
+ * Header / footer toggles. v1 auto-places enabled fields:
+ *   - `workbookTitle` → header left
+ *   - `sheetName`     → header center
+ *   - `currentDate`   → header right (combined with time if both on)
+ *   - `pageNumbers`   → footer center
+ *   - `currentTime`   → header right (combined with date if both on)
+ * The Google-Sheets-style "Edit custom fields" 3-zone editor is a
+ * future enhancement; the toggles here are the data they'd compose
+ * onto an explicit layout.
+ */
+export type HeaderFooterFields = {
+    pageNumbers: boolean;
+    workbookTitle: boolean;
+    sheetName: boolean;
+    currentDate: boolean;
+    currentTime: boolean;
+};
+export type PrintSettings = {
+    paperSize: PaperSizeId;
+    orientation: Orientation;
+    scaleMode: ScaleMode;
+    /** Used only when `scaleMode === "custom"`; ratio (1 = 100 %). */
+    customScale: number;
+    marginPreset: MarginPresetId;
+    /** Used only when `marginPreset === "custom"`. */
+    customMargins: Margins;
+    scope: PrintScope;
+    showGridlines: boolean;
+    /**
+     * Print a small marker on cells that carry a comment / note. The
+     * note text itself is not emitted — Google Sheets prints them in a
+     * trailing endnote section, which is deferred.
+     */
+    showNotes: boolean;
+    pageOrder: PageOrder;
+    horizontalAlignment: PrintAlignment;
+    verticalAlignment: PrintVerticalAlignment;
+    headerFooter: HeaderFooterFields;
+    /**
+     * Repeat the sheet's frozen rows on every printed page (the
+     * `<Sheet>.frozenRowCount` value). Matches Excel's
+     * `<sheetProperties>.titleRows` semantic. Disabled when the sheet
+     * has no frozen rows.
+     */
+    repeatFrozenRows: boolean;
+    repeatFrozenColumns: boolean;
+};
+export declare const DEFAULT_PRINT_SETTINGS: PrintSettings;
+/**
+ * True when any header / footer field is enabled. Drives content-area
+ * sizing — we carve a fixed strip out of the page only when there's
+ * something to draw there.
+ */
+export declare const hasHeaderFooter: (settings: PrintSettings) => boolean;
+/** Fixed strip heights in CSS pixels. */
+export declare const HEADER_STRIP_HEIGHT = 28;
+export declare const FOOTER_STRIP_HEIGHT = 28;
+/**
+ * Resolve the active margin box. Falls back to Normal when an unknown
+ * preset id slips in (shouldn't happen in practice, but defends the
+ * pagination math from NaN width/height).
+ */
+export declare const resolveMargins: (settings: PrintSettings) => Margins;
+/**
+ * Resolve the outer page rectangle (paper size + orientation), in CSS
+ * pixels. Used both by the on-screen preview blocks and by the print
+ * stylesheet's `@page size`.
+ *
+ * `@page { size }` accepts `<keyword> landscape` (`letter landscape`,
+ * `A4 landscape`, …) but NOT `<W>in <H>in landscape`. For papers that
+ * already use explicit dimensions (Tabloid / Statement / Executive /
+ * Folio — no portable CSS keyword), we swap the two numbers manually
+ * in landscape rather than appending the keyword.
+ */
+export declare const resolvePageDimensions: (settings: PrintSettings) => {
+    width: number;
+    height: number;
+    sizeKeyword: string;
+};
+/**
+ * Usable content rectangle inside one page = paper minus margins
+ * minus optional header/footer strips, minus a small reserve for the
+ * trailing cell border. The pagination engine walks rows/columns
+ * against this box.
+ */
+export declare const resolveContentArea: (settings: PrintSettings) => {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=settings.d.ts.map

package/dist/esm/components/print-preview/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/settings.ts"],"names":[],"mappings":"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"}