@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,374 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrintPreviewDialog = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var ui_1 = require("@rowsncolumns/ui");
+var icons_1 = require("@rowsncolumns/icons");
+var page_block_1 = require("./page-block");
+var config_1 = require("../../config");
+var settings_1 = require("./settings");
+var use_page_layout_1 = require("./use-page-layout");
+var run_print_1 = require("./run-print");
+var resolveSheet = function (sheet, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var defaultColumnWidth = (_a = sheet.defaultColumnWidth) !== null && _a !== void 0 ? _a : config_1.DEFAULT_COLUMN_WIDTH;
+    var defaultRowHeight = (_b = sheet.defaultRowHeight) !== null && _b !== void 0 ? _b : config_1.DEFAULT_ROW_HEIGHT;
+    return {
+        sheetId: sheet.sheetId,
+        name: sheet.title || "Sheet ".concat(sheet.sheetId),
+        rowCount: (_e = (_d = (_c = options.getDataRowCount) === null || _c === void 0 ? void 0 : _c.call(options, sheet.sheetId)) !== null && _d !== void 0 ? _d : sheet.rowCount) !== null && _e !== void 0 ? _e : 0,
+        columnCount: (_h = (_g = (_f = options.getDataColumnCount) === null || _f === void 0 ? void 0 : _f.call(options, sheet.sheetId)) !== null && _g !== void 0 ? _g : sheet.columnCount) !== null && _h !== void 0 ? _h : 0,
+        merges: (_j = sheet.merges) !== null && _j !== void 0 ? _j : undefined,
+        frozenRows: (_k = sheet.frozenRowCount) !== null && _k !== void 0 ? _k : undefined,
+        frozenColumns: (_l = sheet.frozenColumnCount) !== null && _l !== void 0 ? _l : undefined,
+        getColumnWidth: function (c) { var _a, _b, _c; return (_c = (_b = (_a = sheet.columnMetadata) === null || _a === void 0 ? void 0 : _a[c]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : defaultColumnWidth; },
+        getRowHeight: function (r) { var _a, _b, _c; return (_c = (_b = (_a = sheet.rowMetadata) === null || _a === void 0 ? void 0 : _a[r]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : defaultRowHeight; },
+    };
+};
+var labelClass = "text-xs font-medium text-rnc-foreground/80 mb-1 block";
+var fieldRowClass = "mb-3";
+var 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";
+var PrintPreviewDialog = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, sheets = _a.sheets, activeSheetId = _a.activeSheetId, selections = _a.selections, title = _a.title, getFormattedValue = _a.getFormattedValue, getEffectiveFormat = _a.getEffectiveFormat, getDataRowCount = _a.getDataRowCount, getDataColumnCount = _a.getDataColumnCount, getCellData = _a.getCellData;
+    var _b = tslib_1.__read((0, react_1.useState)(settings_1.DEFAULT_PRINT_SETTINGS), 2), settings = _b[0], setSettings = _b[1];
+    var printContainerRef = (0, react_1.useRef)(null);
+    // Look up the active sheet from the supplied list. When the id
+    // doesn't match anything (shouldn't happen) we render nothing.
+    var activeSheetSource = (0, react_1.useMemo)(function () { return sheets.find(function (s) { return s.sheetId === activeSheetId; }); }, [sheets, activeSheetId]);
+    var activeSheet = (0, react_1.useMemo)(function () {
+        return activeSheetSource
+            ? resolveSheet(activeSheetSource, {
+                getDataRowCount: getDataRowCount,
+                getDataColumnCount: getDataColumnCount,
+            })
+            : undefined;
+    }, [activeSheetSource, getDataRowCount, getDataColumnCount]);
+    var resolvedAllSheets = (0, react_1.useMemo)(function () {
+        return sheets.map(function (s) {
+            return resolveSheet(s, { getDataRowCount: getDataRowCount, getDataColumnCount: getDataColumnCount });
+        });
+    }, [sheets, getDataRowCount, getDataColumnCount]);
+    var selectionBounds = (0, react_1.useMemo)(function () {
+        var _a;
+        var range = (_a = selections === null || selections === void 0 ? void 0 : selections[0]) === null || _a === void 0 ? void 0 : _a.range;
+        if (!range)
+            return undefined;
+        return {
+            startRow: range.startRowIndex,
+            endRow: range.endRowIndex,
+            startColumn: range.startColumnIndex,
+            endColumn: range.endColumnIndex,
+        };
+    }, [selections]);
+    var hasNote = (0, react_1.useMemo)(function () {
+        return getCellData
+            ? function (sheetId, rowIndex, columnIndex) { var _a; return !!((_a = getCellData(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.note); }
+            : undefined;
+    }, [getCellData]);
+    var sheetsForScope = (0, react_1.useMemo)(function () {
+        if (!isOpen || !activeSheet)
+            return [];
+        switch (settings.scope) {
+            case "workbook":
+                return resolvedAllSheets.length ? resolvedAllSheets : [activeSheet];
+            case "selection":
+                if (!selectionBounds)
+                    return [activeSheet];
+                return [tslib_1.__assign(tslib_1.__assign({}, activeSheet), { printBounds: selectionBounds })];
+            case "current-sheet":
+            default:
+                return [activeSheet];
+        }
+    }, [isOpen, settings.scope, resolvedAllSheets, activeSheet, selectionBounds]);
+    var pages = (0, react_1.useMemo)(function () {
+        var e_1, _a, e_2, _b;
+        var _c;
+        if (!isOpen)
+            return [];
+        var out = [];
+        var contentArea = (0, settings_1.resolveContentArea)(settings);
+        try {
+            for (var sheetsForScope_1 = tslib_1.__values(sheetsForScope), sheetsForScope_1_1 = sheetsForScope_1.next(); !sheetsForScope_1_1.done; sheetsForScope_1_1 = sheetsForScope_1.next()) {
+                var sheet = sheetsForScope_1_1.value;
+                // 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.
+                var bounds = (_c = sheet.printBounds) !== null && _c !== void 0 ? _c : {
+                    startRow: 1,
+                    endRow: Math.max(1, sheet.rowCount),
+                    startColumn: 1,
+                    endColumn: Math.max(1, sheet.columnCount),
+                };
+                var range = (0, use_page_layout_1.measureRange)(bounds.startRow, bounds.endRow, bounds.startColumn, bounds.endColumn, sheet.getColumnWidth, sheet.getRowHeight);
+                var scale = (0, use_page_layout_1.resolveScale)(settings.scaleMode, settings.customScale, range.width, range.height, contentArea.width, contentArea.height);
+                var repeatRows = settings.repeatFrozenRows && sheet.frozenRows ? sheet.frozenRows : 0;
+                var repeatColumns = settings.repeatFrozenColumns && sheet.frozenColumns
+                    ? sheet.frozenColumns
+                    : 0;
+                var blocks = (0, use_page_layout_1.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: scale,
+                    pageOrder: settings.pageOrder,
+                    repeatRows: repeatRows,
+                    repeatColumns: repeatColumns,
+                });
+                try {
+                    for (var blocks_1 = (e_2 = void 0, tslib_1.__values(blocks)), blocks_1_1 = blocks_1.next(); !blocks_1_1.done; blocks_1_1 = blocks_1.next()) {
+                        var block = blocks_1_1.value;
+                        out.push({ sheet: sheet, block: block });
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (blocks_1_1 && !blocks_1_1.done && (_b = blocks_1.return)) _b.call(blocks_1);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (sheetsForScope_1_1 && !sheetsForScope_1_1.done && (_a = sheetsForScope_1.return)) _a.call(sheetsForScope_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        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.
+    var renderedAt = (0, react_1.useMemo)(function () { return new Date(); }, [isOpen, settings]);
+    var pageDims = (0, react_1.useMemo)(function () { return (0, settings_1.resolvePageDimensions)(settings); }, [settings]);
+    var margins = (0, react_1.useMemo)(function () { return (0, settings_1.resolveMargins)(settings); }, [settings]);
+    var contentArea = (0, react_1.useMemo)(function () { return (0, settings_1.resolveContentArea)(settings); }, [settings]);
+    var setField = function (key, value) { return setSettings(function (prev) {
+        var _a;
+        return (tslib_1.__assign(tslib_1.__assign({}, prev), (_a = {}, _a[key] = value, _a)));
+    }); };
+    var onPrint = (0, react_1.useCallback)(function () {
+        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.
+        var blocks = printContainerRef.current.querySelectorAll("[data-page-index]");
+        var pagesHtml = Array.from(blocks)
+            .map(function (el) { return el.outerHTML; })
+            .join("");
+        (0, run_print_1.runPrint)({
+            pagesHtml: 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.
+    var computeScaleForSheet = function (sheet) {
+        var _a;
+        var bounds = (_a = sheet.printBounds) !== null && _a !== void 0 ? _a : {
+            startRow: 1,
+            endRow: Math.max(1, sheet.rowCount),
+            startColumn: 1,
+            endColumn: Math.max(1, sheet.columnCount),
+        };
+        var range = (0, use_page_layout_1.measureRange)(bounds.startRow, bounds.endRow, bounds.startColumn, bounds.endColumn, sheet.getColumnWidth, sheet.getRowHeight);
+        return (0, use_page_layout_1.resolveScale)(settings.scaleMode, settings.customScale, range.width, range.height, contentArea.width, contentArea.height);
+    };
+    return (react_1.default.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_1.default.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-solid border-rnc-border" },
+            react_1.default.createElement("div", { className: "flex items-center gap-3" },
+                react_1.default.createElement(ui_1.IconButton, { onClick: onClose, "aria-label": "Close" },
+                    react_1.default.createElement(icons_1.Cross2Icon, null)),
+                react_1.default.createElement("div", { className: "font-semibold text-sm text-rnc-foreground" }, "Print preview"),
+                react_1.default.createElement("div", { className: "text-xs text-rnc-muted-foreground" },
+                    pages.length,
+                    " ",
+                    pages.length === 1 ? "page" : "pages")),
+            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                react_1.default.createElement(ui_1.Button, { variant: "ghost", size: "xs", onClick: onClose }, "Cancel"),
+                react_1.default.createElement(ui_1.Button, { variant: "primary", size: "xs", onClick: onPrint }, "Print"))),
+        react_1.default.createElement("div", { className: "flex-1 flex min-h-0" },
+            react_1.default.createElement("div", { className: "flex-1 overflow-auto bg-rnc-muted/30 p-8" },
+                react_1.default.createElement("div", { ref: printContainerRef, className: "flex flex-col items-center gap-6" },
+                    pages.map(function (_a, i) {
+                        var _b;
+                        var sheet = _a.sheet, block = _a.block;
+                        var bounds = (_b = sheet.printBounds) !== null && _b !== void 0 ? _b : {
+                            startRow: 1,
+                            endRow: Math.max(1, sheet.rowCount),
+                            startColumn: 1,
+                            endColumn: Math.max(1, sheet.columnCount),
+                        };
+                        var repeatRows = settings.repeatFrozenRows && sheet.frozenRows
+                            ? sheet.frozenRows
+                            : 0;
+                        var repeatColumns = settings.repeatFrozenColumns && sheet.frozenColumns
+                            ? sheet.frozenColumns
+                            : 0;
+                        return (react_1.default.createElement("div", { key: "".concat(sheet.sheetId, "-").concat(block.index), className: "flex flex-col items-center" },
+                            react_1.default.createElement("div", { className: "text-[11px] text-rnc-muted-foreground mb-1 tabular-nums" },
+                                sheet.name,
+                                " \u2014 page ",
+                                i + 1,
+                                " of ",
+                                pages.length),
+                            react_1.default.createElement(page_block_1.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_1.default.createElement("div", { className: "text-xs text-rnc-muted-foreground py-12" }, "No content to print on the selected scope.")) : null)),
+            react_1.default.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_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Print"),
+                    react_1.default.createElement(ui_1.Select, { value: settings.scope, onValueChange: function (v) { return setField("scope", v); } },
+                        react_1.default.createElement(ui_1.SelectTrigger, null,
+                            react_1.default.createElement(ui_1.SelectValue, null)),
+                        react_1.default.createElement(ui_1.SelectPortal, null,
+                            react_1.default.createElement(ui_1.SelectContent, { className: "z-[101]" },
+                                react_1.default.createElement(ui_1.SelectItem, { value: "current-sheet" }, "Current sheet"),
+                                sheets.length > 1 ? (react_1.default.createElement(ui_1.SelectItem, { value: "workbook" }, "Workbook")) : null,
+                                selectionBounds ? (react_1.default.createElement(ui_1.SelectItem, { value: "selection" }, "Selection")) : null)))),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Paper size"),
+                    react_1.default.createElement(ui_1.Select, { value: settings.paperSize, onValueChange: function (v) { return setField("paperSize", v); } },
+                        react_1.default.createElement(ui_1.SelectTrigger, null,
+                            react_1.default.createElement(ui_1.SelectValue, null)),
+                        react_1.default.createElement(ui_1.SelectPortal, null,
+                            react_1.default.createElement(ui_1.SelectContent, { className: "z-[101]" }, Object.values(settings_1.PAPER_SIZES).map(function (p) { return (react_1.default.createElement(ui_1.SelectItem, { key: p.id, value: p.id }, p.label)); }))))),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Page orientation"),
+                    react_1.default.createElement("div", { className: "flex gap-1" }, ["portrait", "landscape"].map(function (o) { return (react_1.default.createElement(ui_1.Button, { key: o, onClick: function () { return setField("orientation", o); }, size: "xs", className: "border border-solid py-1 ".concat(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_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Scale"),
+                    react_1.default.createElement(ui_1.Select, { value: settings.scaleMode, onValueChange: function (v) { return setField("scaleMode", v); } },
+                        react_1.default.createElement(ui_1.SelectTrigger, null,
+                            react_1.default.createElement(ui_1.SelectValue, null)),
+                        react_1.default.createElement(ui_1.SelectPortal, null,
+                            react_1.default.createElement(ui_1.SelectContent, { className: "z-[101]" },
+                                react_1.default.createElement(ui_1.SelectItem, { value: "100" }, "Normal (100%)"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "fit-width" }, "Fit to width"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "fit-page" }, "Fit to page"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "custom" }, "Custom\u2026")))),
+                    settings.scaleMode === "custom" ? (react_1.default.createElement("div", { className: "mt-2 flex items-center gap-2" },
+                        react_1.default.createElement("input", { type: "number", min: 10, max: 400, step: 5, className: controlClass, value: Math.round(settings.customScale * 100), onChange: function (e) {
+                                var v = Math.max(10, Math.min(400, Number(e.target.value) || 100));
+                                setField("customScale", v / 100);
+                            } }),
+                        react_1.default.createElement("span", { className: "text-xs text-rnc-muted-foreground" }, "%"))) : null),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Margins"),
+                    react_1.default.createElement(ui_1.Select, { value: settings.marginPreset, onValueChange: function (v) {
+                            return setField("marginPreset", v);
+                        } },
+                        react_1.default.createElement(ui_1.SelectTrigger, null,
+                            react_1.default.createElement(ui_1.SelectValue, null)),
+                        react_1.default.createElement(ui_1.SelectPortal, null,
+                            react_1.default.createElement(ui_1.SelectContent, { className: "z-[101]" },
+                                react_1.default.createElement(ui_1.SelectItem, { value: "normal" }, "Normal"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "narrow" }, "Narrow"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "wide" }, "Wide"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "custom" }, "Custom\u2026")))),
+                    settings.marginPreset === "custom" ? (react_1.default.createElement("div", { className: "mt-2 grid grid-cols-2 gap-2" }, ["top", "right", "bottom", "left"].map(function (edge) { return (react_1.default.createElement("div", { key: edge },
+                        react_1.default.createElement("label", { className: "text-[10px] uppercase tracking-wide text-rnc-muted-foreground" }, edge),
+                        react_1.default.createElement("input", { type: "number", min: 0, step: 6, className: controlClass, value: settings.customMargins[edge], onChange: function (e) {
+                                var _a;
+                                return setField("customMargins", tslib_1.__assign(tslib_1.__assign({}, settings.customMargins), (_a = {}, _a[edge] = Math.max(0, Number(e.target.value) || 0), _a)));
+                            } }))); }))) : null),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Formatting"),
+                    react_1.default.createElement("label", { className: "flex items-center gap-2 text-xs py-1" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: settings.showGridlines, onChange: function (e) { return setField("showGridlines", e.target.checked); } }),
+                        "Show gridlines"),
+                    react_1.default.createElement("label", { className: "flex items-center gap-2 text-xs py-1" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: settings.showNotes, onChange: function (e) { return setField("showNotes", e.target.checked); } }),
+                        "Show notes")),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Page order"),
+                    react_1.default.createElement(ui_1.Select, { value: settings.pageOrder, onValueChange: function (v) { return setField("pageOrder", v); } },
+                        react_1.default.createElement(ui_1.SelectTrigger, null,
+                            react_1.default.createElement(ui_1.SelectValue, null)),
+                        react_1.default.createElement(ui_1.SelectPortal, null,
+                            react_1.default.createElement(ui_1.SelectContent, { className: "z-[101]" },
+                                react_1.default.createElement(ui_1.SelectItem, { value: "over-then-down" }, "Over, then down"),
+                                react_1.default.createElement(ui_1.SelectItem, { value: "down-then-over" }, "Down, then over"))))),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Horizontal alignment"),
+                    react_1.default.createElement("div", { className: "flex gap-1" }, ["left", "center", "right"].map(function (a) { return (react_1.default.createElement(ui_1.Button, { key: a, onClick: function () { return setField("horizontalAlignment", a); }, size: "xs", className: "border border-solid capitalize  py-1 ".concat(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_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Vertical alignment"),
+                    react_1.default.createElement("div", { className: "flex gap-1" }, ["top", "middle", "bottom"].map(function (a) { return (react_1.default.createElement(ui_1.Button, { key: a, onClick: function () { return setField("verticalAlignment", a); }, size: "xs", className: "border border-solid capitalize py-1 ".concat(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_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("label", { className: labelClass }, "Headers & footers")),
+                [
+                    ["pageNumbers", "Page numbers"],
+                    ["workbookTitle", "Workbook title"],
+                    ["sheetName", "Sheet name"],
+                    ["currentDate", "Current date"],
+                    ["currentTime", "Current time"],
+                ].map(function (_a) {
+                    var _b = tslib_1.__read(_a, 2), key = _b[0], label = _b[1];
+                    return (react_1.default.createElement("label", { key: key, className: "flex items-center gap-2 text-xs py-1 text-rnc-foreground" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: settings.headerFooter[key], onChange: function (e) {
+                                var _a;
+                                return setField("headerFooter", tslib_1.__assign(tslib_1.__assign({}, settings.headerFooter), (_a = {}, _a[key] = e.target.checked, _a)));
+                            } }),
+                        label));
+                }),
+                react_1.default.createElement("div", { className: fieldRowClass },
+                    react_1.default.createElement("div", { className: labelClass }, "Row & column headers"),
+                    react_1.default.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_1.default.createElement("label", { className: "flex items-center gap-2 text-xs py-1 text-rnc-foreground ".concat(activeSheet.frozenRows ? "" : "opacity-40 cursor-not-allowed") },
+                    react_1.default.createElement("input", { type: "checkbox", disabled: !activeSheet.frozenRows, checked: settings.repeatFrozenRows, onChange: function (e) { return setField("repeatFrozenRows", e.target.checked); } }),
+                    "Repeat frozen rows"),
+                react_1.default.createElement("label", { className: "flex items-center gap-2 text-xs py-1 text-rnc-foreground ".concat(activeSheet.frozenColumns ? "" : "opacity-40 cursor-not-allowed") },
+                    react_1.default.createElement("input", { type: "checkbox", disabled: !activeSheet.frozenColumns, checked: settings.repeatFrozenColumns, onChange: function (e) {
+                            return setField("repeatFrozenColumns", e.target.checked);
+                        } }),
+                    "Repeat frozen columns")))));
+};
+exports.PrintPreviewDialog = PrintPreviewDialog;

package/dist/cjs/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/cjs/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/cjs/components/print-preview/run-print.js

@@ -0,0 +1,72 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runPrint = void 0;
+var buildPrintDocument = function (_a) {
+    var pagesHtml = _a.pagesHtml, pageWidth = _a.pageWidth, pageHeight = _a.pageHeight, sizeKeyword = _a.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>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>Print</title>\n    <style>\n      @page {\n        size: ".concat(sizeKeyword, ";\n        margin: 0;\n      }\n      html, body {\n        margin: 0;\n        padding: 0;\n        background: white;\n      }\n      body {\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        color: #111827;\n        -webkit-print-color-adjust: exact;\n        print-color-adjust: exact;\n      }\n      [data-page-index] {\n        /* Strip the preview's drop shadow + outer gap. The page-block\n           div already has the right paper dimensions. */\n        box-shadow: none !important;\n        margin: 0 !important;\n      }\n      /* Skip the trailing break-after on the final block \u2014 without\n         this Chrome / Safari emit one extra blank page after the\n         last real page. */\n      [data-page-index]:last-child {\n        break-after: auto !important;\n        page-break-after: auto !important;\n      }\n      table { border-collapse: collapse; }\n      td { vertical-align: top; }\n    </style>\n  </head>\n  <body>").concat(pagesHtml, "</body>\n</html>");
+};
+var runPrint = function (opts) {
+    if (typeof document === "undefined")
+        return;
+    var 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);
+    var removed = false;
+    var cleanup = function () {
+        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.
+    var onLoad = function () {
+        var win = iframe.contentWindow;
+        if (!win) {
+            cleanup();
+            return;
+        }
+        win.addEventListener("afterprint", cleanup);
+        window.addEventListener("focus", function () {
+            // Delay so afterprint has a chance to fire first.
+            setTimeout(cleanup, 1000);
+        }, { once: true });
+        try {
+            win.focus();
+            win.print();
+        }
+        catch (_a) {
+            cleanup();
+        }
+    };
+    iframe.addEventListener("load", onLoad, { once: true });
+};
+exports.runPrint = runPrint;

package/dist/cjs/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/cjs/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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"}