@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/print-preview/cell-styles.js

@@ -0,0 +1,181 @@
+"use strict";
+// Map a `CellFormat` (the host's `getEffectiveFormat` return shape)
+// onto inline CSS for the print-preview / print-iframe HTML cells.
+//
+// We render through plain HTML rather than re-running the Konva
+// pipeline because (a) print needs a DOM tree, not a canvas, and (b)
+// the browser's print engine already handles page splitting, font
+// embedding, and zoom for HTML. Trade-off: a few format nuances
+// (rich-text runs, decoration triangles) drop on the print copy. The
+// canvas grid still renders them in the app — print is best-effort.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cellInlineStyle = exports.toCssColor = void 0;
+var helpers_1 = require("../../helpers");
+/**
+ * Convert a `Color` to a CSS color string. Plain string values pass
+ * through. Theme references resolve to `undefined` so the cell inherits
+ * from the surrounding stylesheet — the canvas grid resolves themes via
+ * `spreadsheetColors`, but threading that all the way into the print
+ * preview adds enough surface area that v1 keeps it text-only and lets
+ * users see explicit hex colors / approximate fills.
+ */
+var toCssColor = function (color) {
+    if (color == null)
+        return undefined;
+    if (typeof color === "string")
+        return color;
+    // ColorTheme — deferred (would need the workbook theme palette here).
+    return undefined;
+};
+exports.toCssColor = toCssColor;
+// Mapping uses the OOXML border-style values (`thin`, `solid_medium`,
+// `solid_thick`, etc.) that the host types expose. Missing entries
+// fall back to a 1 px solid line so an unrecognised style still
+// prints something visible.
+var BORDER_STYLE_CSS = {
+    solid: "solid",
+    thin: "solid",
+    solid_medium: "solid",
+    solid_thick: "solid",
+    double: "double",
+    dotted: "dotted",
+    dashed: "dashed",
+    hair: "solid",
+    mediumDashed: "dashed",
+    mediumDashDot: "dashed",
+    dashDot: "dashed",
+    dashDotDot: "dashed",
+    slantDashDot: "dashed",
+};
+var BORDER_WIDTH_PX = {
+    solid: 1,
+    thin: 1,
+    solid_medium: 2,
+    solid_thick: 3,
+    double: 3,
+    dotted: 1,
+    dashed: 1,
+    hair: 1,
+    mediumDashed: 2,
+    mediumDashDot: 2,
+    dashDot: 1,
+    dashDotDot: 1,
+    slantDashDot: 1,
+};
+var borderCss = function (border, fallbackOn) {
+    var _a, _b, _c;
+    if (border === null || border === void 0 ? void 0 : border.style) {
+        var style = (_a = BORDER_STYLE_CSS[border.style]) !== null && _a !== void 0 ? _a : "solid";
+        var width = (_b = BORDER_WIDTH_PX[border.style]) !== null && _b !== void 0 ? _b : 1;
+        var color = (_c = (0, exports.toCssColor)(border.color)) !== null && _c !== void 0 ? _c : "#000";
+        return "".concat(width, "px ").concat(style, " ").concat(color);
+    }
+    if (fallbackOn) {
+        // Gridline rendering — we lean on a thin gray border on every cell
+        // when the user keeps "show gridlines" on. Matches what Excel /
+        // Sheets do on the print page.
+        return "1px solid #d1d5db";
+    }
+    return undefined;
+};
+var textFormatCss = function (textFormat) {
+    var styles = {};
+    if (!textFormat)
+        return styles;
+    if (textFormat.bold)
+        styles.fontWeight = "bold";
+    if (textFormat.italic)
+        styles.fontStyle = "italic";
+    var decorations = [];
+    if (textFormat.underline)
+        decorations.push("underline");
+    if (textFormat.strikethrough)
+        decorations.push("line-through");
+    if (decorations.length)
+        styles.textDecoration = decorations.join(" ");
+    // Mirrors the canvas renderer's BASELINE_OFFSET_FONT_SCALE (0.58)
+    // font shrink for superscript/subscript.
+    if (textFormat.baselineOffset === "superscript") {
+        styles.verticalAlign = "super";
+    }
+    else if (textFormat.baselineOffset === "subscript") {
+        styles.verticalAlign = "sub";
+    }
+    if (textFormat.fontSize != null) {
+        var scale = textFormat.baselineOffset ? 0.58 : 1;
+        styles.fontSize = "".concat((0, helpers_1.pointToPixel)(textFormat.fontSize) * scale, "px");
+    }
+    else if (textFormat.baselineOffset) {
+        styles.fontSize = "0.58em";
+    }
+    if (textFormat.fontFamily) {
+        // `Arial` matches the canvas-grid default; print picks up whatever
+        // font the user explicitly set.
+        styles.fontFamily = textFormat.fontFamily;
+    }
+    var color = (0, exports.toCssColor)(textFormat.color);
+    if (color)
+        styles.color = color;
+    return styles;
+};
+// `HorizontalAlign` / `VerticalAlign` from common-types use lowercase
+// values (`"left"` / `"center"` / `"right"` / `"top"` / `"middle"` /
+// `"bottom"`) so the maps key off the same strings. Excel's GENERAL
+// alignment depends on cell type — numbers right, text left — we
+// approximate by leaving it unset and letting CSS default kick in
+// (left).
+var HORIZONTAL_ALIGN = {
+    left: "left",
+    center: "center",
+    right: "right",
+};
+var VERTICAL_ALIGN = {
+    top: "top",
+    middle: "middle",
+    bottom: "bottom",
+};
+/**
+ * Resolve all inline styles for one cell. `showGridlines` is the
+ * sidebar toggle: when on, cells get a thin gray border unless an
+ * explicit border overrides it (explicit always wins).
+ */
+var cellInlineStyle = function (format, showGridlines) {
+    var _a, _b;
+    var base = {
+        boxSizing: "border-box",
+        overflow: "hidden",
+        whiteSpace: (format === null || format === void 0 ? void 0 : format.wrapStrategy) === "wrap" ? "normal" : "nowrap",
+        wordBreak: (format === null || format === void 0 ? void 0 : format.wrapStrategy) === "wrap" ? "break-word" : undefined,
+        padding: "0 4px",
+        lineHeight: "1.2",
+    };
+    Object.assign(base, textFormatCss((_a = format === null || format === void 0 ? void 0 : format.textFormat) !== null && _a !== void 0 ? _a : undefined));
+    var bg = (0, exports.toCssColor)(format === null || format === void 0 ? void 0 : format.backgroundColor);
+    if (bg)
+        base.backgroundColor = bg;
+    var borders = (_b = format === null || format === void 0 ? void 0 : format.borders) !== null && _b !== void 0 ? _b : undefined;
+    var top = borderCss(borders === null || borders === void 0 ? void 0 : borders.top, showGridlines);
+    var right = borderCss(borders === null || borders === void 0 ? void 0 : borders.right, showGridlines);
+    var bottom = borderCss(borders === null || borders === void 0 ? void 0 : borders.bottom, showGridlines);
+    var left = borderCss(borders === null || borders === void 0 ? void 0 : borders.left, showGridlines);
+    if (top)
+        base.borderTop = top;
+    if (right)
+        base.borderRight = right;
+    if (bottom)
+        base.borderBottom = bottom;
+    if (left)
+        base.borderLeft = left;
+    var ha = (format === null || format === void 0 ? void 0 : format.horizontalAlignment)
+        ? HORIZONTAL_ALIGN[format.horizontalAlignment]
+        : undefined;
+    if (ha)
+        base.textAlign = ha;
+    var va = (format === null || format === void 0 ? void 0 : format.verticalAlignment)
+        ? VERTICAL_ALIGN[format.verticalAlignment]
+        : undefined;
+    if (va)
+        base.verticalAlign = va;
+    return base;
+};
+exports.cellInlineStyle = cellInlineStyle;

package/dist/cjs/components/print-preview/index.d.ts

@@ -0,0 +1,5 @@
+export { PrintPreviewDialog } from "./print-preview-dialog";
+export type { PrintPreviewDialogProps } from "./print-preview-dialog";
+export type { PrintSettings, PaperSizeId, Orientation, ScaleMode, MarginPresetId, Margins, PrintScope, PrintAlignment, PrintVerticalAlignment, PageOrder, HeaderFooterFields, } from "./settings";
+export { DEFAULT_PRINT_SETTINGS, PAPER_SIZES, MARGIN_PRESETS } from "./settings";
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/print-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,YAAY,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,SAAS,EACT,cAAc,EACd,OAAO,EACP,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,SAAS,EACT,kBAAkB,GACnB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MARGIN_PRESETS = exports.PAPER_SIZES = exports.DEFAULT_PRINT_SETTINGS = exports.PrintPreviewDialog = void 0;
+var print_preview_dialog_1 = require("./print-preview-dialog");
+Object.defineProperty(exports, "PrintPreviewDialog", { enumerable: true, get: function () { return print_preview_dialog_1.PrintPreviewDialog; } });
+var settings_1 = require("./settings");
+Object.defineProperty(exports, "DEFAULT_PRINT_SETTINGS", { enumerable: true, get: function () { return settings_1.DEFAULT_PRINT_SETTINGS; } });
+Object.defineProperty(exports, "PAPER_SIZES", { enumerable: true, get: function () { return settings_1.PAPER_SIZES; } });
+Object.defineProperty(exports, "MARGIN_PRESETS", { enumerable: true, get: function () { return settings_1.MARGIN_PRESETS; } });

package/dist/cjs/components/print-preview/page-block.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import type { CellFormat, GridRange } from "@rowsncolumns/common-types";
+import type { PageBlock as PageBlockType } from "./use-page-layout";
+import { type HeaderFooterFields, type Margins, type PrintAlignment, type PrintVerticalAlignment } from "./settings";
+export type CellAccess = {
+    sheetId: number;
+    getFormattedValue: (sheetId: number, rowIndex: number, columnIndex: number) => string | undefined | null;
+    getEffectiveFormat: (sheetId: number, rowIndex: number, columnIndex: number) => CellFormat | null | undefined;
+    getColumnWidth: (columnIndex: number) => number;
+    getRowHeight: (rowIndex: number) => number;
+    /**
+     * Merges that intersect the current sheet. Used to convert anchor
+     * cells into `rowspan` / `colspan` and to skip cells covered by
+     * another anchor. Pass `[]` to ignore merges (renderable but
+     * imperfect for sheets that use them).
+     */
+    merges?: GridRange[];
+    /**
+     * Returns a truthy value when the cell carries a note / comment.
+     * Used to paint the "show notes" red corner marker. The note text
+     * itself is not emitted in v1.
+     */
+    hasNote?: (sheetId: number, rowIndex: number, columnIndex: number) => boolean;
+};
+export type PageBlockProps = CellAccess & {
+    block: PageBlockType;
+    pageWidth: number;
+    pageHeight: number;
+    margins: Margins;
+    scale: number;
+    showGridlines: boolean;
+    showNotes: boolean;
+    horizontalAlignment: PrintAlignment;
+    verticalAlignment: PrintVerticalAlignment;
+    /**
+     * Frozen-row / frozen-column ranges that repeat on every page.
+     * Independent of `block.startRow/startColumn` — those describe the
+     * scrolled body chunk, while `frozenRowStart..frozenRowEnd` is the
+     * fixed prefix prepended to every page. Pass `frozenRowEnd <
+     * frozenRowStart` to disable.
+     */
+    frozenRowStart?: number;
+    frozenRowEnd?: number;
+    frozenColumnStart?: number;
+    frozenColumnEnd?: number;
+    /** Header / footer text already resolved for this page. */
+    headerFooter?: {
+        fields: HeaderFooterFields;
+        workbookTitle?: string;
+        sheetName?: string;
+        pageNumber: number;
+        pageCount: number;
+        now: Date;
+    };
+    /**
+     * When `false` the outer page chrome (drop shadow, white background)
+     * is dropped so the iframe-side rendering doesn't waste ink on it.
+     */
+    screen?: boolean;
+};
+export declare const PageBlock: React.FC<PageBlockProps>;
+//# sourceMappingURL=page-block.d.ts.map

package/dist/cjs/components/print-preview/page-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-block.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/page-block.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,OAAO,EACZ,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,YAAY,CAAC;AAEpB,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAClB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CACR,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,OAAO,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,cAAc,CAAC;IACpC,iBAAiB,EAAE,sBAAsB,CAAC;IAC1C;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2DAA2D;IAC3D,YAAY,CAAC,EAAE;QACb,MAAM,EAAE,kBAAkB,CAAC;QAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,GAAG,EAAE,IAAI,CAAC;KACX,CAAC;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+HF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6Q9C,CAAC"}

package/dist/cjs/components/print-preview/page-block.js

@@ -0,0 +1,322 @@
+"use strict";
+// Render one printable page as a styled HTML table. Each PageBlock
+// produces one of these — the dialog stacks them vertically with the
+// paper-size dimensions so what the user sees on screen is the
+// rendered page, not a thumbnail.
+//
+// The same component is also used inside the print iframe (with
+// `screen={false}`) so the printed output matches the on-screen
+// preview byte-for-byte.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageBlock = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var cell_styles_1 = require("./cell-styles");
+var settings_1 = require("./settings");
+/**
+ * Build a (row, col) → "skip" map for cells covered by a merge anchor
+ * elsewhere, plus an anchor → {rowSpan, colSpan} map for the cells
+ * that DO render. Spans are clamped to the visible block so a merge
+ * straddling a page break renders correctly on each side.
+ */
+var useMergeMap = function (block, merges) {
+    return (0, react_1.useMemo)(function () {
+        var e_1, _a;
+        var skip = new Set();
+        var anchors = new Map();
+        if (!(merges === null || merges === void 0 ? void 0 : merges.length))
+            return { skip: skip, anchors: anchors };
+        try {
+            for (var merges_1 = tslib_1.__values(merges), merges_1_1 = merges_1.next(); !merges_1_1.done; merges_1_1 = merges_1.next()) {
+                var m = merges_1_1.value;
+                // Skip merges that don't touch this page block at all.
+                var r0 = Math.max(m.startRowIndex, block.startRow);
+                var r1 = Math.min(m.endRowIndex, block.endRow);
+                var c0 = Math.max(m.startColumnIndex, block.startColumn);
+                var c1 = Math.min(m.endColumnIndex, block.endColumn);
+                if (r0 > r1 || c0 > c1)
+                    continue;
+                // The anchor we want to RENDER is the top-left visible cell of
+                // the merge inside this block (Excel always paints the merge
+                // contents from the top-left). For straddling merges that
+                // means the cell at (r0, c0) — even if it's not the canonical
+                // anchor, it's the right place for this page's copy.
+                var anchorKey = "".concat(r0, ":").concat(c0);
+                anchors.set(anchorKey, {
+                    rowSpan: r1 - r0 + 1,
+                    colSpan: c1 - c0 + 1,
+                });
+                for (var r = r0; r <= r1; r++) {
+                    for (var c = c0; c <= c1; c++) {
+                        if (r === r0 && c === c0)
+                            continue;
+                        skip.add("".concat(r, ":").concat(c));
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (merges_1_1 && !merges_1_1.done && (_a = merges_1.return)) _a.call(merges_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return { skip: skip, anchors: anchors };
+    }, [block, merges]);
+};
+var ALIGN_TO_FLEX = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+var VALIGN_TO_FLEX = {
+    top: "flex-start",
+    middle: "center",
+    bottom: "flex-end",
+};
+/**
+ * Render the optional header / footer strip across one page. Auto-
+ * places enabled fields into a 3-column grid (left / center / right)
+ * to match the Google Sheets default before the user customises.
+ */
+var HeaderFooterStrip = function (_a) {
+    var position = _a.position, data = _a.data;
+    var fields = data.fields, workbookTitle = data.workbookTitle, sheetName = data.sheetName, pageNumber = data.pageNumber, pageCount = data.pageCount, now = data.now;
+    var dateTime = (function () {
+        var parts = [];
+        if (fields.currentDate)
+            parts.push(now.toLocaleDateString());
+        if (fields.currentTime) {
+            parts.push(now.toLocaleTimeString(undefined, {
+                hour: "2-digit",
+                minute: "2-digit",
+            }));
+        }
+        return parts.join(" ");
+    })();
+    var pageLabel = fields.pageNumbers ? "".concat(pageNumber, " / ").concat(pageCount) : "";
+    // Auto-layout: header gets identity fields, footer gets page counter.
+    var left = position === "header" && fields.workbookTitle ? workbookTitle !== null && workbookTitle !== void 0 ? workbookTitle : "" : "";
+    var center = position === "header"
+        ? fields.sheetName
+            ? sheetName !== null && sheetName !== void 0 ? sheetName : ""
+            : ""
+        : pageLabel;
+    var right = position === "header" ? dateTime : "";
+    if (!left && !center && !right)
+        return null;
+    var stripBase = {
+        display: "flex",
+        width: "100%",
+        height: position === "header" ? settings_1.HEADER_STRIP_HEIGHT : settings_1.FOOTER_STRIP_HEIGHT,
+        fontSize: 10,
+        color: "#6b7280",
+        flexShrink: 0,
+    };
+    var cellBase = {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    };
+    return (react_1.default.createElement("div", { style: stripBase },
+        react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, cellBase), { justifyContent: "flex-start" }) }, left),
+        react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, cellBase), { justifyContent: "center" }) }, center),
+        react_1.default.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, cellBase), { justifyContent: "flex-end" }) }, right)));
+};
+var PageBlock = function (_a) {
+    var block = _a.block, pageWidth = _a.pageWidth, pageHeight = _a.pageHeight, margins = _a.margins, scale = _a.scale, showGridlines = _a.showGridlines, showNotes = _a.showNotes, horizontalAlignment = _a.horizontalAlignment, verticalAlignment = _a.verticalAlignment, sheetId = _a.sheetId, getFormattedValue = _a.getFormattedValue, getEffectiveFormat = _a.getEffectiveFormat, getColumnWidth = _a.getColumnWidth, getRowHeight = _a.getRowHeight, merges = _a.merges, hasNote = _a.hasNote, frozenRowStart = _a.frozenRowStart, frozenRowEnd = _a.frozenRowEnd, frozenColumnStart = _a.frozenColumnStart, frozenColumnEnd = _a.frozenColumnEnd, headerFooter = _a.headerFooter, _b = _a.screen, screen = _b === void 0 ? true : _b;
+    var showFrozenRows = frozenRowStart !== undefined &&
+        frozenRowEnd !== undefined &&
+        frozenRowEnd >= frozenRowStart;
+    var showFrozenColumns = frozenColumnStart !== undefined &&
+        frozenColumnEnd !== undefined &&
+        frozenColumnEnd >= frozenColumnStart;
+    // useMergeMap currently only inspects merges inside one rectangle;
+    // we feed it the body block. Merges that straddle the frozen/body
+    // discontinuity render as separate cells — a v1 simplification that
+    // matches what Excel does when those rows aren't contiguous in the
+    // printed flow either.
+    var _c = useMergeMap(block, merges), skip = _c.skip, anchors = _c.anchors;
+    var columnIndices = [];
+    if (showFrozenColumns) {
+        for (var c = frozenColumnStart; c <= frozenColumnEnd; c++) {
+            columnIndices.push(c);
+        }
+    }
+    for (var c = block.startColumn; c <= block.endColumn; c++) {
+        columnIndices.push(c);
+    }
+    var rowIndices = [];
+    if (showFrozenRows) {
+        for (var r = frozenRowStart; r <= frozenRowEnd; r++) {
+            rowIndices.push(r);
+        }
+    }
+    for (var r = block.startRow; r <= block.endRow; r++) {
+        rowIndices.push(r);
+    }
+    var pageOuter = {
+        width: pageWidth,
+        height: pageHeight,
+        backgroundColor: "white",
+        boxSizing: "border-box",
+        paddingTop: margins.top,
+        paddingRight: margins.right,
+        paddingBottom: margins.bottom,
+        paddingLeft: margins.left,
+        boxShadow: screen ? "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)" : undefined,
+        overflow: "hidden",
+        breakAfter: "page",
+        pageBreakAfter: "always",
+    };
+    // `overflow: hidden` here (rather than only on `pageOuter`) is what
+    // enforces the bottom + right margins. `transform: scale()` on the
+    // table inside doesn't affect layout — only the visual rendering —
+    // so a table whose CSS height exceeds the content area still
+    // occupies the padding-bottom region in flow. Clipping at
+    // `pageOuter` only stops bleed at the paper edge, which leaves the
+    // bottom margin looking smaller than the top in landscape (and any
+    // time the data tightly fills the page).
+    var contentBox = {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        overflow: "hidden",
+        justifyContent: ALIGN_TO_FLEX[horizontalAlignment],
+        alignItems: VALIGN_TO_FLEX[verticalAlignment],
+    };
+    var tableWrap = {
+        // The content box is the printable area; the table is the actual
+        // sheet slice scaled by the user-selected scale factor. Using a
+        // CSS `transform: scale(...)` instead of resizing each cell keeps
+        // text crisp on screen and prints sharply because browsers
+        // re-rasterize transforms during print rendering.
+        transform: "scale(".concat(scale, ")"),
+        transformOrigin: "".concat(horizontalAlignment === "right" ? "right" : horizontalAlignment === "center" ? "center" : "left", " ") +
+            "".concat(verticalAlignment === "bottom" ? "bottom" : verticalAlignment === "middle" ? "center" : "top"),
+    };
+    // `tableLayout: fixed` only honors `<col width>` when the table
+    // itself has an explicit width. Without it browsers can fall back to
+    // a content-based layout — cells with long unwrappable strings then
+    // blow out past their column and the page's `overflow: hidden`
+    // clips the rightmost column mid-cell. We size the table to
+    // `block.width`, which equals the sum of the band's column widths
+    // (computed by `sliceAxis`) and is guaranteed ≤ page content area.
+    // `height: block.height` does the same for rows so vertical
+    // splitting also lands on row boundaries.
+    // Explicit `border-bottom` + `border-right` on the table guarantee a
+    // visible closing edge regardless of how `border-collapse` decides to
+    // render the outermost cell borders. With pure cell-based collapse,
+    // the last row's bottom edge straddles the table boundary (half
+    // inside / half outside) and the outside half can disappear into
+    // sub-pixel rounding or get clipped by the page's content-area
+    // overflow. The table-level border lives entirely inside the
+    // `width`/`height` content box so it always survives.
+    var closingEdge = showGridlines
+        ? "1px solid #d1d5db"
+        : undefined;
+    var table = {
+        borderCollapse: "collapse",
+        tableLayout: "fixed",
+        width: block.width,
+        height: block.height,
+        fontFamily: "Arial, sans-serif",
+        fontSize: 12,
+        color: "#111827",
+        borderBottom: closingEdge,
+        borderRight: closingEdge,
+    };
+    // Outer page becomes a flex column when header/footer strips are
+    // present so the middle content area is what actually paginates.
+    var pageOuterWithStrips = headerFooter
+        ? tslib_1.__assign(tslib_1.__assign({}, pageOuter), { display: "flex", flexDirection: "column" }) : pageOuter;
+    var contentBoxWithStrips = headerFooter
+        ? tslib_1.__assign(tslib_1.__assign({}, contentBox), { flex: 1 }) : contentBox;
+    var noteMarkerStyle = {
+        position: "absolute",
+        top: 1,
+        right: 1,
+        width: 0,
+        height: 0,
+        borderTop: "5px solid #ef4444",
+        borderLeft: "5px solid transparent",
+        pointerEvents: "none",
+    };
+    return (react_1.default.createElement("div", { style: pageOuterWithStrips, "data-page-index": block.index },
+        headerFooter ? (react_1.default.createElement(HeaderFooterStrip, { position: "header", data: headerFooter })) : null,
+        react_1.default.createElement("div", { style: contentBoxWithStrips },
+            react_1.default.createElement("div", { style: tableWrap },
+                react_1.default.createElement("table", { style: table },
+                    react_1.default.createElement("colgroup", null, columnIndices.map(function (c, i) { return (react_1.default.createElement("col", { key: "".concat(c, "-").concat(i), style: { width: getColumnWidth(c) } })); })),
+                    react_1.default.createElement("tbody", null, rowIndices.map(function (r, ri) {
+                        var rowHeight = getRowHeight(r);
+                        return (react_1.default.createElement("tr", { key: "".concat(r, "-").concat(ri), style: { height: rowHeight } }, columnIndices.map(function (c, ci) {
+                            var _a, _b;
+                            var key = "".concat(r, ":").concat(c);
+                            if (skip.has(key))
+                                return null;
+                            var span = anchors.get(key);
+                            var format = getEffectiveFormat(sheetId, r, c);
+                            var value = (_a = getFormattedValue(sheetId, r, c)) !== null && _a !== void 0 ? _a : "";
+                            var cellHeight = rowHeight * ((_b = span === null || span === void 0 ? void 0 : span.rowSpan) !== null && _b !== void 0 ? _b : 1);
+                            // `position: relative` + `overflow: hidden` on
+                            // the cell, then ABSOLUTELY-POSITIONED content
+                            // inside. In HTML table layout, `height` on
+                            // `<td>` is treated as a minimum — even with
+                            // `overflow: hidden`, oversized content
+                            // (e.g. a 48 pt glyph in a 20 px row) still
+                            // grows the cell box. Taking the content out
+                            // of the cell's flow with `position: absolute`
+                            // breaks that link: the cell stays at its
+                            // declared height + the visible content is
+                            // clipped by the cell's `overflow: hidden`.
+                            var style = tslib_1.__assign(tslib_1.__assign({}, (0, cell_styles_1.cellInlineStyle)(format, showGridlines)), { position: "relative", overflow: "hidden", height: cellHeight });
+                            var noted = showNotes && (hasNote === null || hasNote === void 0 ? void 0 : hasNote(sheetId, r, c));
+                            var innerStyle = {
+                                position: "absolute",
+                                top: 0,
+                                right: 0,
+                                bottom: 0,
+                                left: 0,
+                                // Preserve the visual padding the cell would
+                                // otherwise have applied in normal flow.
+                                padding: "0 4px",
+                                overflow: "hidden",
+                                whiteSpace: (format === null || format === void 0 ? void 0 : format.wrapStrategy) === "wrap"
+                                    ? "normal"
+                                    : "nowrap",
+                                wordBreak: (format === null || format === void 0 ? void 0 : format.wrapStrategy) === "wrap"
+                                    ? "break-word"
+                                    : undefined,
+                                display: "flex",
+                                alignItems: (format === null || format === void 0 ? void 0 : format.verticalAlignment) === "bottom"
+                                    ? "flex-end"
+                                    : (format === null || format === void 0 ? void 0 : format.verticalAlignment) === "middle"
+                                        ? "center"
+                                        : "flex-start",
+                                justifyContent: (format === null || format === void 0 ? void 0 : format.horizontalAlignment) === "right"
+                                    ? "flex-end"
+                                    : (format === null || format === void 0 ? void 0 : format.horizontalAlignment) === "center"
+                                        ? "center"
+                                        : "flex-start",
+                            };
+                            return (react_1.default.createElement("td", { key: "".concat(c, "-").concat(ci), rowSpan: span === null || span === void 0 ? void 0 : span.rowSpan, colSpan: span === null || span === void 0 ? void 0 : span.colSpan, style: style },
+                                react_1.default.createElement("div", { style: innerStyle },
+                                    react_1.default.createElement("span", { style: {
+                                            overflow: "hidden",
+                                            textOverflow: (format === null || format === void 0 ? void 0 : format.wrapStrategy) === "wrap"
+                                                ? undefined
+                                                : "clip",
+                                            maxHeight: "100%",
+                                            width: "100%",
+                                        } }, value)),
+                                noted ? react_1.default.createElement("span", { style: noteMarkerStyle }) : null));
+                        })));
+                    }))))),
+        headerFooter ? (react_1.default.createElement(HeaderFooterStrip, { position: "footer", data: headerFooter })) : null));
+};
+exports.PageBlock = PageBlock;

package/dist/cjs/components/print-preview/print-preview-dialog.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { CellData, CellFormat } from "@rowsncolumns/common-types";
+import type { SelectionArea } from "@rowsncolumns/grid";
+import type { Sheet } from "../../types";
+export type PrintPreviewDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    /**
+     * The full sheet list — same array the host keeps in
+     * `useSpreadsheetState.sheets`. Drives the "Workbook" scope and
+     * the active-sheet lookup against `activeSheetId`.
+     */
+    sheets: Sheet[];
+    /**
+     * Which sheet in `sheets` is currently active. "Current sheet" /
+     * "Selection" scopes operate on this one.
+     */
+    activeSheetId: number;
+    /**
+     * Current selections — same value as
+     * `useSpreadsheetState.selections`. The first selection's range is
+     * what the "Selection" scope prints. Pass `[]` (or omit) to hide
+     * the option from the scope dropdown.
+     */
+    selections?: SelectionArea[];
+    /**
+     * Workbook display name. Shown in the header strip when the
+     * "Workbook title" header field is enabled.
+     */
+    title?: string;
+    /**
+     * Cell-data accessors. Same signatures as `useSpreadsheetState`'s
+     * return values — pass them straight through.
+     */
+    getFormattedValue: (sheetId: number, rowIndex: number, columnIndex: number) => string | undefined | null;
+    getEffectiveFormat: (sheetId: number, rowIndex: number, columnIndex: number) => CellFormat | null | undefined;
+    /** Optional — last non-empty data row. Falls back to `sheet.rowCount`. */
+    getDataRowCount?: (sheetId: number) => number | undefined;
+    /** Optional — last non-empty data column. Falls back to `sheet.columnCount`. */
+    getDataColumnCount?: (sheetId: number) => number | undefined;
+    /**
+     * Optional — `useSpreadsheetState.getCellData`. Used to flag noted
+     * cells when the user enables "Show notes". Omit to hide the
+     * marker.
+     */
+    getCellData?: (sheetId: number, rowIndex: number, columnIndex: number) => CellData | null | undefined;
+};
+export declare const PrintPreviewDialog: React.FC<PrintPreviewDialogProps>;
+//# sourceMappingURL=print-preview-dialog.d.ts.map

package/dist/cjs/components/print-preview/print-preview-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"print-preview-dialog.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/print-preview-dialog.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAatE,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EAEX,MAAM,4BAA4B,CAAC;AAIpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AA0BzC,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,iBAAiB,EAAE,CACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAClB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,0EAA0E;IAC1E,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC1D,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAC;CAClC,CAAC;AAsDF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAonBhE,CAAC"}