@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/pivot-placeholder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/pivot-placeholder/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;CACrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kEAM9B,qBAAqB,sBAmCvB,CAAC"}

package/dist/esm/components/pivot-placeholder/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+export const PivotPlaceholder = ({ pivotTable, displayName, left, top, onRequestEditPivotTable, }) => {
+    return (React.createElement("div", { key: pivotTable.pivotId, onClick: () => onRequestEditPivotTable?.(pivotTable), role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRequestEditPivotTable?.(pivotTable);
+            }
+        }, className: "absolute pointer-events-auto cursor-pointer select-none group", style: {
+            top,
+            left,
+        } },
+        React.createElement("div", { className: "transition-all duration-200 border border-dashed border-rnc-border bg-rnc-background rounded-lg shadow-sm hover:shadow-md hover:border-blue-500 p-2", style: {
+                minWidth: "280px",
+                maxWidth: "320px",
+            } },
+            React.createElement("div", { className: "font-semibold text-rnc-foreground text-sm mb-2 " }, displayName),
+            React.createElement("div", { className: "text-xs text-rnc-foreground leading-relaxed" }, "To build a report, choose fields from the PivotTable Field List"))));
+};

package/dist/esm/components/print-preview/cell-styles.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from "react";
+import type { CellFormat, Color } from "@rowsncolumns/common-types";
+/**
+ * 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.
+ */
+export declare const toCssColor: (color: Color | string | null | undefined) => string | undefined;
+/**
+ * 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).
+ */
+export declare const cellInlineStyle: (format: CellFormat | null | undefined, showGridlines: boolean) => CSSProperties;
+//# sourceMappingURL=cell-styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell-styles.d.ts","sourceRoot":"","sources":["../../../../components/print-preview/cell-styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EAIN,MAAM,4BAA4B,CAAC;AAIpC;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,KAC/D,MAAM,GACN,SAKH,CAAC;AA6GF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,UAAU,GAAG,IAAI,GAAG,SAAS,EACrC,eAAe,OAAO,KACrB,aAoCF,CAAC"}

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

@@ -0,0 +1,174 @@
+// 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.
+import { pointToPixel } from "../../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.
+ */
+export const toCssColor = (color) => {
+    if (color == null)
+        return undefined;
+    if (typeof color === "string")
+        return color;
+    // ColorTheme — deferred (would need the workbook theme palette here).
+    return undefined;
+};
+// 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.
+const 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",
+};
+const 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,
+};
+const borderCss = (border, fallbackOn) => {
+    if (border?.style) {
+        const style = BORDER_STYLE_CSS[border.style] ?? "solid";
+        const width = BORDER_WIDTH_PX[border.style] ?? 1;
+        const color = toCssColor(border.color) ?? "#000";
+        return `${width}px ${style} ${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;
+};
+const textFormatCss = (textFormat) => {
+    const styles = {};
+    if (!textFormat)
+        return styles;
+    if (textFormat.bold)
+        styles.fontWeight = "bold";
+    if (textFormat.italic)
+        styles.fontStyle = "italic";
+    const 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) {
+        const scale = textFormat.baselineOffset ? 0.58 : 1;
+        styles.fontSize = `${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;
+    }
+    const color = 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).
+const HORIZONTAL_ALIGN = {
+    left: "left",
+    center: "center",
+    right: "right",
+};
+const 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).
+ */
+export const cellInlineStyle = (format, showGridlines) => {
+    const base = {
+        boxSizing: "border-box",
+        overflow: "hidden",
+        whiteSpace: format?.wrapStrategy === "wrap" ? "normal" : "nowrap",
+        wordBreak: format?.wrapStrategy === "wrap" ? "break-word" : undefined,
+        padding: "0 4px",
+        lineHeight: "1.2",
+    };
+    Object.assign(base, textFormatCss(format?.textFormat ?? undefined));
+    const bg = toCssColor(format?.backgroundColor);
+    if (bg)
+        base.backgroundColor = bg;
+    const borders = format?.borders ?? undefined;
+    const top = borderCss(borders?.top, showGridlines);
+    const right = borderCss(borders?.right, showGridlines);
+    const bottom = borderCss(borders?.bottom, showGridlines);
+    const left = borderCss(borders?.left, showGridlines);
+    if (top)
+        base.borderTop = top;
+    if (right)
+        base.borderRight = right;
+    if (bottom)
+        base.borderBottom = bottom;
+    if (left)
+        base.borderLeft = left;
+    const ha = format?.horizontalAlignment
+        ? HORIZONTAL_ALIGN[format.horizontalAlignment]
+        : undefined;
+    if (ha)
+        base.textAlign = ha;
+    const va = format?.verticalAlignment
+        ? VERTICAL_ALIGN[format.verticalAlignment]
+        : undefined;
+    if (va)
+        base.verticalAlign = va;
+    return base;
+};

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

@@ -0,0 +1,2 @@
+export { PrintPreviewDialog } from "./print-preview-dialog";
+export { DEFAULT_PRINT_SETTINGS, PAPER_SIZES, MARGIN_PRESETS } from "./settings";

package/dist/esm/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/esm/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/esm/components/print-preview/page-block.js

@@ -0,0 +1,308 @@
+// 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.
+import React, { useMemo } from "react";
+import { cellInlineStyle } from "./cell-styles";
+import { FOOTER_STRIP_HEIGHT, HEADER_STRIP_HEIGHT, } from "./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.
+ */
+const useMergeMap = (block, merges) => useMemo(() => {
+    const skip = new Set();
+    const anchors = new Map();
+    if (!merges?.length)
+        return { skip, anchors };
+    for (const m of merges) {
+        // Skip merges that don't touch this page block at all.
+        const r0 = Math.max(m.startRowIndex, block.startRow);
+        const r1 = Math.min(m.endRowIndex, block.endRow);
+        const c0 = Math.max(m.startColumnIndex, block.startColumn);
+        const 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.
+        const anchorKey = `${r0}:${c0}`;
+        anchors.set(anchorKey, {
+            rowSpan: r1 - r0 + 1,
+            colSpan: c1 - c0 + 1,
+        });
+        for (let r = r0; r <= r1; r++) {
+            for (let c = c0; c <= c1; c++) {
+                if (r === r0 && c === c0)
+                    continue;
+                skip.add(`${r}:${c}`);
+            }
+        }
+    }
+    return { skip, anchors };
+}, [block, merges]);
+const ALIGN_TO_FLEX = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+const 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.
+ */
+const HeaderFooterStrip = ({ position, data }) => {
+    const { fields, workbookTitle, sheetName, pageNumber, pageCount, now } = data;
+    const dateTime = (() => {
+        const 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(" ");
+    })();
+    const pageLabel = fields.pageNumbers ? `${pageNumber} / ${pageCount}` : "";
+    // Auto-layout: header gets identity fields, footer gets page counter.
+    const left = position === "header" && fields.workbookTitle ? workbookTitle ?? "" : "";
+    const center = position === "header"
+        ? fields.sheetName
+            ? sheetName ?? ""
+            : ""
+        : pageLabel;
+    const right = position === "header" ? dateTime : "";
+    if (!left && !center && !right)
+        return null;
+    const stripBase = {
+        display: "flex",
+        width: "100%",
+        height: position === "header" ? HEADER_STRIP_HEIGHT : FOOTER_STRIP_HEIGHT,
+        fontSize: 10,
+        color: "#6b7280",
+        flexShrink: 0,
+    };
+    const cellBase = {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    };
+    return (React.createElement("div", { style: stripBase },
+        React.createElement("div", { style: { ...cellBase, justifyContent: "flex-start" } }, left),
+        React.createElement("div", { style: { ...cellBase, justifyContent: "center" } }, center),
+        React.createElement("div", { style: { ...cellBase, justifyContent: "flex-end" } }, right)));
+};
+export const PageBlock = ({ block, pageWidth, pageHeight, margins, scale, showGridlines, showNotes, horizontalAlignment, verticalAlignment, sheetId, getFormattedValue, getEffectiveFormat, getColumnWidth, getRowHeight, merges, hasNote, frozenRowStart, frozenRowEnd, frozenColumnStart, frozenColumnEnd, headerFooter, screen = true, }) => {
+    const showFrozenRows = frozenRowStart !== undefined &&
+        frozenRowEnd !== undefined &&
+        frozenRowEnd >= frozenRowStart;
+    const 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.
+    const { skip, anchors } = useMergeMap(block, merges);
+    const columnIndices = [];
+    if (showFrozenColumns) {
+        for (let c = frozenColumnStart; c <= frozenColumnEnd; c++) {
+            columnIndices.push(c);
+        }
+    }
+    for (let c = block.startColumn; c <= block.endColumn; c++) {
+        columnIndices.push(c);
+    }
+    const rowIndices = [];
+    if (showFrozenRows) {
+        for (let r = frozenRowStart; r <= frozenRowEnd; r++) {
+            rowIndices.push(r);
+        }
+    }
+    for (let r = block.startRow; r <= block.endRow; r++) {
+        rowIndices.push(r);
+    }
+    const 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).
+    const contentBox = {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        overflow: "hidden",
+        justifyContent: ALIGN_TO_FLEX[horizontalAlignment],
+        alignItems: VALIGN_TO_FLEX[verticalAlignment],
+    };
+    const 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(${scale})`,
+        transformOrigin: `${horizontalAlignment === "right" ? "right" : horizontalAlignment === "center" ? "center" : "left"} ` +
+            `${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.
+    const closingEdge = showGridlines
+        ? "1px solid #d1d5db"
+        : undefined;
+    const 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.
+    const pageOuterWithStrips = headerFooter
+        ? { ...pageOuter, display: "flex", flexDirection: "column" }
+        : pageOuter;
+    const contentBoxWithStrips = headerFooter
+        ? { ...contentBox, flex: 1 }
+        : contentBox;
+    const noteMarkerStyle = {
+        position: "absolute",
+        top: 1,
+        right: 1,
+        width: 0,
+        height: 0,
+        borderTop: "5px solid #ef4444",
+        borderLeft: "5px solid transparent",
+        pointerEvents: "none",
+    };
+    return (React.createElement("div", { style: pageOuterWithStrips, "data-page-index": block.index },
+        headerFooter ? (React.createElement(HeaderFooterStrip, { position: "header", data: headerFooter })) : null,
+        React.createElement("div", { style: contentBoxWithStrips },
+            React.createElement("div", { style: tableWrap },
+                React.createElement("table", { style: table },
+                    React.createElement("colgroup", null, columnIndices.map((c, i) => (React.createElement("col", { key: `${c}-${i}`, style: { width: getColumnWidth(c) } })))),
+                    React.createElement("tbody", null, rowIndices.map((r, ri) => {
+                        const rowHeight = getRowHeight(r);
+                        return (React.createElement("tr", { key: `${r}-${ri}`, style: { height: rowHeight } }, columnIndices.map((c, ci) => {
+                            const key = `${r}:${c}`;
+                            if (skip.has(key))
+                                return null;
+                            const span = anchors.get(key);
+                            const format = getEffectiveFormat(sheetId, r, c);
+                            const value = getFormattedValue(sheetId, r, c) ?? "";
+                            const cellHeight = rowHeight * (span?.rowSpan ?? 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`.
+                            const style = {
+                                ...cellInlineStyle(format, showGridlines),
+                                position: "relative",
+                                overflow: "hidden",
+                                height: cellHeight,
+                            };
+                            const noted = showNotes && hasNote?.(sheetId, r, c);
+                            const 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?.wrapStrategy === "wrap"
+                                    ? "normal"
+                                    : "nowrap",
+                                wordBreak: format?.wrapStrategy === "wrap"
+                                    ? "break-word"
+                                    : undefined,
+                                display: "flex",
+                                alignItems: format?.verticalAlignment === "bottom"
+                                    ? "flex-end"
+                                    : format?.verticalAlignment === "middle"
+                                        ? "center"
+                                        : "flex-start",
+                                justifyContent: format?.horizontalAlignment === "right"
+                                    ? "flex-end"
+                                    : format?.horizontalAlignment === "center"
+                                        ? "center"
+                                        : "flex-start",
+                            };
+                            return (React.createElement("td", { key: `${c}-${ci}`, rowSpan: span?.rowSpan, colSpan: span?.colSpan, style: style },
+                                React.createElement("div", { style: innerStyle },
+                                    React.createElement("span", { style: {
+                                            overflow: "hidden",
+                                            textOverflow: format?.wrapStrategy === "wrap"
+                                                ? undefined
+                                                : "clip",
+                                            maxHeight: "100%",
+                                            width: "100%",
+                                        } }, value)),
+                                noted ? React.createElement("span", { style: noteMarkerStyle }) : null));
+                        })));
+                    }))))),
+        headerFooter ? (React.createElement(HeaderFooterStrip, { position: "footer", data: headerFooter })) : null));
+};

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