@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/outline-gutter/index.js

@@ -0,0 +1,450 @@
+"use strict";
+// Outline gutter (row/column grouping UI). Rendered as DOM siblings of
+// `.rnc-canvas-wrapper` — not nested inside — so the wrapper stays the
+// `position: relative` ancestor that `BaseGrid` relies on for active
+// cell + selection positioning.
+//
+// The grid is wrapped in a flex layout:
+//
+//   <flex column>
+//     <ColumnOutlineGutter />  (full width strip, when columns are grouped)
+//     <flex row>
+//       <RowOutlineGutter />   (full height strip, when rows are grouped)
+//       <rnc-canvas-wrapper>BaseGrid + overlays</rnc-canvas-wrapper>
+//     </flex row>
+//   </flex column>
+//
+// Buttons are positioned by `getRowOffset` / `getColumnOffset` so they
+// stay aligned with the cell their summary lives on; scroll position
+// shifts the buttons horizontally / vertically.
+//
+// Bracket lines and the "1 / 2 / 3" level bar are intentionally minimal
+// here — the goal is a functional MVP. Polish can layer on later.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ROW_HEADER_WIDTH = exports.COLUMN_HEADER_HEIGHT = exports.computeOutlineGutterSize = exports.RowOutlineGutter = exports.ColumnOutlineGutter = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var config_1 = require("../../config");
+Object.defineProperty(exports, "COLUMN_HEADER_HEIGHT", { enumerable: true, get: function () { return config_1.COLUMN_HEADER_HEIGHT; } });
+Object.defineProperty(exports, "ROW_HEADER_WIDTH", { enumerable: true, get: function () { return config_1.ROW_HEADER_WIDTH; } });
+var scroll_subscriber_1 = require("../../signals/scroll-subscriber");
+var ui_1 = require("@rowsncolumns/ui");
+var icons_1 = require("@rowsncolumns/icons");
+/**
+ * Compute the pixel offset of cell `index` from the first DATA cell
+ * (index 1). Mirrors the math the canvas runs internally but without
+ * a dependency on BaseGrid's imperative ref. Hidden cells contribute
+ * 0. Callers add `leftInset`/`topInset` to account for the
+ * row-header / column-header (those don't belong in this offset).
+ */
+var computeOffset = function (metadata, index, defaultSize) {
+    var _a;
+    if (index <= 1)
+        return 0;
+    var offset = 0;
+    for (var i = 1; i < index; i++) {
+        var meta = metadata === null || metadata === void 0 ? void 0 : metadata[i];
+        var hidden = !!((meta === null || meta === void 0 ? void 0 : meta.hiddenByUser) ||
+            (meta === null || meta === void 0 ? void 0 : meta.hiddenByFilter) ||
+            (meta === null || meta === void 0 ? void 0 : meta.hiddenByGroup));
+        if (hidden)
+            continue;
+        offset += (_a = meta === null || meta === void 0 ? void 0 : meta.size) !== null && _a !== void 0 ? _a : defaultSize;
+    }
+    return offset;
+};
+/**
+ * Track the grid's live scroll position and re-render on every update.
+ * Subscribes to `scrollSubscriber` (the rxjs Subject CanvasGrid emits
+ * to inside `handleScroll`). Used by the outline gutters so they slide
+ * in sync with the canvas.
+ */
+var useGridScrollPosition = function () {
+    var _a = tslib_1.__read((0, react_1.useState)({ scrollTop: 0, scrollLeft: 0 }), 2), scroll = _a[0], setScroll = _a[1];
+    (0, react_1.useEffect)(function () {
+        var sub = scroll_subscriber_1.scrollSubscriber.subscribe(function (pos) {
+            var _a, _b;
+            setScroll({
+                scrollTop: (_a = pos.scrollTop) !== null && _a !== void 0 ? _a : 0,
+                scrollLeft: (_b = pos.scrollLeft) !== null && _b !== void 0 ? _b : 0,
+            });
+        });
+        return function () { return sub.unsubscribe(); };
+    }, []);
+    return scroll;
+};
+/**
+ * Walk the dimension's outline levels and emit a summary marker for
+ * each (nested) group. A summary is the cell ADJACENT to the group
+ * boundary on the user-configured side (right of the group when
+ * `summaryAfter=true`, below when `summaryAfter=true` for the row
+ * axis — both treated the same way).
+ *
+ * For nested groups, multiple summary markers can share the same
+ * index — one per nesting level. Each summary carries its
+ * `startIndex` so the renderer can draw a bracket line from
+ * `getOffset(startIndex)` to `getOffset(summaryIndex)`.
+ */
+var findSummaries = function (metadata, summaryAfter) {
+    var _a, _b, _c, _d;
+    if (!(metadata === null || metadata === void 0 ? void 0 : metadata.length))
+        return [];
+    var out = [];
+    var length = metadata.length;
+    var levelAt = function (i) { var _a, _b; return i >= 0 && i < length ? (_b = (_a = metadata[i]) === null || _a === void 0 ? void 0 : _a.outlineLevel) !== null && _b !== void 0 ? _b : 0 : 0; };
+    // Track where each currently-open outline level began so we can pair
+    // it with its closing index when we emit the summary marker.
+    var openStarts = new Map();
+    if (summaryAfter) {
+        // Scan one past `length` so a group ending at the last metadata
+        // entry still emits a summary marker at the next (un-stored) index.
+        var prevLevel = 0;
+        for (var i = 0; i <= length; i++) {
+            var curr = levelAt(i);
+            if (curr > prevLevel) {
+                for (var level = prevLevel + 1; level <= curr; level++) {
+                    openStarts.set(level, i);
+                }
+            }
+            else if (curr < prevLevel) {
+                var collapsed = !!((_a = metadata[i]) === null || _a === void 0 ? void 0 : _a.collapsed);
+                // Close higher levels first (innermost group ends first).
+                for (var level = prevLevel; level > curr; level--) {
+                    var startIndex = (_b = openStarts.get(level)) !== null && _b !== void 0 ? _b : i;
+                    out.push({ index: i, startIndex: startIndex, collapsed: collapsed, level: level });
+                    openStarts.delete(level);
+                }
+            }
+            prevLevel = curr;
+        }
+    }
+    else {
+        // summaryAfter=false: summary cell sits BEFORE the group. Mirror
+        // image of the forward scan.
+        var prevLevel = 0;
+        for (var i = length; i >= -1; i--) {
+            var curr = levelAt(i);
+            if (curr > prevLevel) {
+                for (var level = prevLevel + 1; level <= curr; level++) {
+                    openStarts.set(level, i);
+                }
+            }
+            else if (curr < prevLevel) {
+                var collapsed = !!((_c = metadata[i]) === null || _c === void 0 ? void 0 : _c.collapsed);
+                for (var level = prevLevel; level > curr; level--) {
+                    var startIndex = (_d = openStarts.get(level)) !== null && _d !== void 0 ? _d : i;
+                    out.push({ index: i, startIndex: startIndex, collapsed: collapsed, level: level });
+                    openStarts.delete(level);
+                }
+            }
+            prevLevel = curr;
+        }
+    }
+    return out;
+};
+/**
+ * Walk a sparse `DimensionProperties` array once and report the
+ * largest `outlineLevel` seen. Returns 0 when no grouping is in use.
+ */
+var computeMaxOutlineLevel = function (metadata) {
+    var e_1, _a;
+    var _b;
+    if (!(metadata === null || metadata === void 0 ? void 0 : metadata.length))
+        return 0;
+    var max = 0;
+    try {
+        for (var metadata_1 = tslib_1.__values(metadata), metadata_1_1 = metadata_1.next(); !metadata_1_1.done; metadata_1_1 = metadata_1.next()) {
+            var meta = metadata_1_1.value;
+            var level = (_b = meta === null || meta === void 0 ? void 0 : meta.outlineLevel) !== null && _b !== void 0 ? _b : 0;
+            if (level > max)
+                max = level;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (metadata_1_1 && !metadata_1_1.done && (_a = metadata_1.return)) _a.call(metadata_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return max;
+};
+exports.ColumnOutlineGutter = (0, react_1.memo)(function (_a) {
+    var sheetId = _a.sheetId, columnMetadata = _a.columnMetadata, rowMetadata = _a.rowMetadata, _b = _a.summaryRight, summaryRight = _b === void 0 ? true : _b, onCollapseColumnGroup = _a.onCollapseColumnGroup, onExpandColumnGroup = _a.onExpandColumnGroup, onSetOutlineDepth = _a.onSetOutlineDepth;
+    // Shift the strip right by the row outline gutter's width when one
+    // exists, so the strip's content lines up with the canvas (which
+    // sits to the right of the row gutter).
+    var leftInset = (0, react_1.useMemo)(function () { return (0, exports.computeOutlineGutterSize)(rowMetadata); }, [rowMetadata]);
+    var maxColumnOutlineLevel = (0, react_1.useMemo)(function () { return computeMaxOutlineLevel(columnMetadata); }, [columnMetadata]);
+    var getColumnOffset = (0, react_1.useCallback)(function (columnIndex) {
+        return computeOffset(columnMetadata, columnIndex, config_1.DEFAULT_COLUMN_WIDTH) +
+            config_1.ROW_HEADER_WIDTH;
+    }, [columnMetadata]);
+    var scrollLeft = useGridScrollPosition().scrollLeft;
+    var summaries = (0, react_1.useMemo)(function () {
+        return maxColumnOutlineLevel > 0
+            ? findSummaries(columnMetadata, summaryRight)
+            : [];
+    }, [columnMetadata, maxColumnOutlineLevel, summaryRight]);
+    // When nested groups share the same summary cell (common with
+    // `summaryRight=true`: outer and inner end at the same column), we
+    // render the bracket for every level but only the OUTERMOST
+    // (lowest level number) gets a +/- button — matches Excel.
+    // Granular collapse of inner groups uses the level-selector
+    // buttons instead.
+    var buttonLevelForIndex = (0, react_1.useMemo)(function () {
+        var e_2, _a;
+        var m = new Map();
+        try {
+            for (var summaries_1 = tslib_1.__values(summaries), summaries_1_1 = summaries_1.next(); !summaries_1_1.done; summaries_1_1 = summaries_1.next()) {
+                var s = summaries_1_1.value;
+                var existing = m.get(s.index);
+                if (existing === undefined || s.level < existing) {
+                    m.set(s.index, s.level);
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (summaries_1_1 && !summaries_1_1.done && (_a = summaries_1.return)) _a.call(summaries_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return m;
+    }, [summaries]);
+    if (maxColumnOutlineLevel <= 0)
+        return null;
+    // N+1 level-selector buttons. `depth=1` collapses every group;
+    // `depth=maxColumnOutlineLevel+1` expands every group. The strip
+    // is tall enough to hold one lane per button so none get clipped.
+    var depthCount = maxColumnOutlineLevel + 1;
+    var gutterHeight = depthCount * config_1.OUTLINE_GUTTER_LEVEL_PX + config_1.OUTLINE_GUTTER_PAD_PX;
+    // Left edge of the first data column in the gutter's coord space.
+    // Summary +/- buttons, the bracket line, and dots all get clipped
+    // to this boundary so they never bleed into the level-selector
+    // lane or the row-header column above the grid.
+    var summaryMinX = leftInset + config_1.ROW_HEADER_WIDTH;
+    return (react_1.default.createElement("div", { "data-testid": "column-outline-gutter", className: "bg-rnc-background relative overflow-hidden border-l border-r border-r-rnc-border border-l-rnc-border border-solid border-t-rnc-border border-t border-b-0", style: {
+            height: gutterHeight,
+            paddingLeft: leftInset,
+        } },
+        react_1.default.createElement("div", { className: "absolute flex flex-col", style: {
+                left: 2,
+                top: config_1.OUTLINE_GUTTER_PAD_PX / 2,
+                gap: 1,
+            } }, Array.from({ length: depthCount }, function (_, i) { return i + 1; }).map(function (depth) { return (react_1.default.createElement(ui_1.Button, { key: "col-level-".concat(depth), "aria-label": "Set column outline depth to ".concat(depth), size: "xs", variant: "outline", className: "p-0 min-w-0 min-h-0 text-[10px] w-4 h-4 justify-center", onClick: function (e) {
+                e.stopPropagation();
+                onSetOutlineDepth === null || onSetOutlineDepth === void 0 ? void 0 : onSetOutlineDepth(sheetId, "column", depth);
+            } }, depth)); })),
+        summaries.map(function (_a) {
+            var index = _a.index, startIndex = _a.startIndex, collapsed = _a.collapsed, level = _a.level;
+            // Anchor positions inside the cell area; add `leftInset` so
+            // x=0 of the strip lines up with the grid's content origin.
+            var buttonX = getColumnOffset(index) - scrollLeft + leftInset;
+            var lineStartX = getColumnOffset(startIndex) - scrollLeft + leftInset + 2;
+            var y = (level - 1) * config_1.OUTLINE_GUTTER_LEVEL_PX + config_1.OUTLINE_GUTTER_PAD_PX / 2;
+            var lineCenterY = y + 6;
+            // Gap (in px) the bracket line should leave before the
+            // button starts, so the two don't visually run together.
+            var lineButtonGap = 4;
+            // Length of the small downward "hook" tick at the start of
+            // the bracket (matches Excel's outline visual).
+            var hookLength = 4;
+            // One small dot per grouped column, centered on each cell
+            // and aligned with the bracket line (Excel's outline visual).
+            var childIndices = [];
+            if (!collapsed) {
+                var _b = tslib_1.__read(summaryRight
+                    ? [startIndex, index - 1]
+                    : [index + 1, startIndex], 2), from = _b[0], to = _b[1];
+                for (var c = from; c <= to; c++)
+                    childIndices.push(c);
+            }
+            var showSummary = buttonX >= summaryMinX;
+            // Clip the bracket line / hook / dots to the level-selector
+            // boundary so they don't visually leak under the "1/2/3" lane
+            // when the group's start column is scrolled off-screen.
+            var lineStartXClamped = Math.max(lineStartX, summaryMinX);
+            var lineWidth = buttonX - lineStartXClamped - lineButtonGap;
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "col-".concat(index, "-").concat(level) },
+                showSummary && !collapsed && lineWidth > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: "absolute bg-rnc-border h-[1px]", style: {
+                            left: lineStartXClamped,
+                            top: lineCenterY,
+                            width: lineWidth,
+                        } }),
+                    lineStartX >= summaryMinX ? (react_1.default.createElement("span", { className: "absolute bg-rnc-border w-[1px]", style: {
+                            left: lineStartX,
+                            top: lineCenterY,
+                            height: hookLength,
+                        } })) : null,
+                    childIndices.map(function (c) {
+                        var colStart = getColumnOffset(c);
+                        var colEnd = getColumnOffset(c + 1);
+                        var cx = colStart +
+                            (colEnd - colStart) / 2 -
+                            scrollLeft +
+                            leftInset;
+                        if (cx - 1 < summaryMinX)
+                            return null;
+                        return (react_1.default.createElement("span", { key: "col-dot-".concat(c), className: "absolute bg-rnc-border rounded-full w-1 h-1", style: {
+                                left: cx - 1,
+                                top: lineCenterY + 3,
+                            } }));
+                    }))) : null,
+                showSummary && buttonLevelForIndex.get(index) === level ? (react_1.default.createElement(ui_1.Button, { "aria-label": collapsed
+                        ? "Expand column group at ".concat(index)
+                        : "Collapse column group at ".concat(index), size: "xs", variant: "outline", className: "absolute p-0 min-w-0 min-h-0", style: {
+                        left: buttonX,
+                        top: y,
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (collapsed)
+                            onExpandColumnGroup === null || onExpandColumnGroup === void 0 ? void 0 : onExpandColumnGroup(sheetId, index);
+                        else
+                            onCollapseColumnGroup === null || onCollapseColumnGroup === void 0 ? void 0 : onCollapseColumnGroup(sheetId, index);
+                    } }, collapsed ? (react_1.default.createElement(icons_1.PlusIcon, { className: "w-3 h-3" })) : (react_1.default.createElement(icons_1.MinusIcon, { className: "w-3 h-3" })))) : null));
+        })));
+});
+exports.ColumnOutlineGutter.displayName = "ColumnOutlineGutter";
+exports.RowOutlineGutter = (0, react_1.memo)(function (_a) {
+    var sheetId = _a.sheetId, rowMetadata = _a.rowMetadata, _b = _a.summaryBelow, summaryBelow = _b === void 0 ? true : _b, onCollapseRowGroup = _a.onCollapseRowGroup, onExpandRowGroup = _a.onExpandRowGroup, onSetOutlineDepth = _a.onSetOutlineDepth;
+    var topInset = 0;
+    var maxRowOutlineLevel = (0, react_1.useMemo)(function () { return computeMaxOutlineLevel(rowMetadata); }, [rowMetadata]);
+    var getRowOffset = (0, react_1.useCallback)(function (rowIndex) {
+        return computeOffset(rowMetadata, rowIndex, config_1.DEFAULT_ROW_HEIGHT) +
+            config_1.COLUMN_HEADER_HEIGHT;
+    }, [rowMetadata]);
+    var scrollTop = useGridScrollPosition().scrollTop;
+    var summaries = (0, react_1.useMemo)(function () {
+        return maxRowOutlineLevel > 0 ? findSummaries(rowMetadata, summaryBelow) : [];
+    }, [rowMetadata, maxRowOutlineLevel, summaryBelow]);
+    // Dedup buttons by index (outermost level wins) — matches Excel.
+    // See the matching `ColumnOutlineGutter` block for the rationale.
+    var buttonLevelForIndex = (0, react_1.useMemo)(function () {
+        var e_3, _a;
+        var m = new Map();
+        try {
+            for (var summaries_2 = tslib_1.__values(summaries), summaries_2_1 = summaries_2.next(); !summaries_2_1.done; summaries_2_1 = summaries_2.next()) {
+                var s = summaries_2_1.value;
+                var existing = m.get(s.index);
+                if (existing === undefined || s.level < existing) {
+                    m.set(s.index, s.level);
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (summaries_2_1 && !summaries_2_1.done && (_a = summaries_2.return)) _a.call(summaries_2);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        return m;
+    }, [summaries]);
+    if (maxRowOutlineLevel <= 0)
+        return null;
+    // N+1 level-selector buttons, stacked horizontally at the top of
+    // the row gutter strip. The strip is wide enough to hold one lane
+    // per button so none get clipped.
+    var depthCount = maxRowOutlineLevel + 1;
+    var gutterWidth = depthCount * config_1.OUTLINE_GUTTER_LEVEL_PX + config_1.OUTLINE_GUTTER_PAD_PX;
+    // Top edge of the first data row in the gutter's coord space.
+    // Summary +/- buttons, the bracket line, and dots all get clipped
+    // to this boundary so they never bleed into the level-selector
+    // row or the column-header band beside the grid.
+    var summaryMinY = topInset + config_1.COLUMN_HEADER_HEIGHT;
+    return (react_1.default.createElement("div", { "data-testid": "row-outline-gutter", className: "bg-rnc-background relative overflow-hidden border-t border-b border-t-rnc-border border-b-rnc-border border-solid border-l-rnc-border border-l border-r-0", style: {
+            width: gutterWidth,
+            paddingTop: topInset,
+        } },
+        react_1.default.createElement("div", { className: "absolute flex flex-row", style: {
+                left: config_1.OUTLINE_GUTTER_PAD_PX / 2,
+                top: 2,
+                gap: 1,
+            } }, Array.from({ length: depthCount }, function (_, i) { return i + 1; }).map(function (depth) { return (react_1.default.createElement(ui_1.Button, { key: "row-level-".concat(depth), "aria-label": "Set row outline depth to ".concat(depth), size: "xs", variant: "outline", className: "p-0 min-w-0 min-h-0 text-[10px] w-4 h-4 justify-center", onClick: function (e) {
+                e.stopPropagation();
+                onSetOutlineDepth === null || onSetOutlineDepth === void 0 ? void 0 : onSetOutlineDepth(sheetId, "row", depth);
+            } }, depth)); })),
+        summaries.map(function (_a) {
+            var index = _a.index, startIndex = _a.startIndex, collapsed = _a.collapsed, level = _a.level;
+            var buttonY = getRowOffset(index) - scrollTop + topInset;
+            var lineStartY = getRowOffset(startIndex) - scrollTop + topInset + 2;
+            var x = (level - 1) * config_1.OUTLINE_GUTTER_LEVEL_PX + config_1.OUTLINE_GUTTER_PAD_PX / 2;
+            var lineCenterX = x + 6;
+            // Gap before the button + length of the rightward "hook"
+            // tick at the start (matches Excel's outline visual; the
+            // row axis is just the column axis rotated 90°).
+            var lineButtonGap = 4;
+            var hookLength = 4;
+            // One small dot per grouped row, centered on each row and
+            // aligned with the bracket line (Excel's outline visual).
+            var childIndices = [];
+            if (!collapsed) {
+                var _b = tslib_1.__read(summaryBelow
+                    ? [startIndex, index - 1]
+                    : [index + 1, startIndex], 2), from = _b[0], to = _b[1];
+                for (var c = from; c <= to; c++)
+                    childIndices.push(c);
+            }
+            var showSummary = buttonY >= summaryMinY;
+            // Clip the bracket line / hook / dots to the level-selector
+            // boundary so they don't visually leak under the "1/2/3" lane
+            // when the group's start row is scrolled off-screen.
+            var lineStartYClamped = Math.max(lineStartY, summaryMinY);
+            var lineHeight = buttonY - lineStartYClamped - lineButtonGap;
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "row-".concat(index, "-").concat(level) },
+                showSummary && !collapsed && lineHeight > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: "absolute bg-rnc-border w-[1px]", style: {
+                            left: lineCenterX,
+                            top: lineStartYClamped,
+                            height: lineHeight,
+                        } }),
+                    lineStartY >= summaryMinY ? (react_1.default.createElement("span", { className: "absolute bg-rnc-border h-[1px]", style: {
+                            left: lineCenterX,
+                            top: lineStartY,
+                            width: hookLength,
+                        } })) : null,
+                    childIndices.map(function (c) {
+                        var rowStart = getRowOffset(c);
+                        var rowEnd = getRowOffset(c + 1);
+                        var cy = rowStart + (rowEnd - rowStart) / 2 - scrollTop + topInset;
+                        if (cy - 1 < summaryMinY)
+                            return null;
+                        return (react_1.default.createElement("span", { key: "row-dot-".concat(c), className: "absolute bg-rnc-border rounded-full w-1 h-1", style: {
+                                left: lineCenterX + 3,
+                                top: cy - 1,
+                            } }));
+                    }))) : null,
+                showSummary && buttonLevelForIndex.get(index) === level ? (react_1.default.createElement(ui_1.Button, { "aria-label": collapsed
+                        ? "Expand row group at ".concat(index)
+                        : "Collapse row group at ".concat(index), className: "absolute p-0 min-w-0 min-h-0", size: "xs", variant: "outline", style: {
+                        left: x,
+                        top: buttonY,
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        if (collapsed)
+                            onExpandRowGroup === null || onExpandRowGroup === void 0 ? void 0 : onExpandRowGroup(sheetId, index);
+                        else
+                            onCollapseRowGroup === null || onCollapseRowGroup === void 0 ? void 0 : onCollapseRowGroup(sheetId, index);
+                    } }, collapsed ? (react_1.default.createElement(icons_1.PlusIcon, { className: "w-3 h-3" })) : (react_1.default.createElement(icons_1.MinusIcon, { className: "w-3 h-3" })))) : null));
+        })));
+});
+exports.RowOutlineGutter.displayName = "RowOutlineGutter";
+/**
+ * Pixel width / height the outline gutter will reserve for the given
+ * axis. Returns 0 when the metadata has no `outlineLevel > 0`. Use
+ * this from your composing layout to compute the inset the *other*
+ * axis's gutter needs. Must stay in sync with `gutterWidth` /
+ * `gutterHeight` inside the row/column gutter components — the strip
+ * holds N+1 level-selector lanes (one per level plus the "expand all"
+ * lane) plus the constant pad.
+ */
+var computeOutlineGutterSize = function (metadata) {
+    var max = computeMaxOutlineLevel(metadata);
+    if (max <= 0)
+        return 0;
+    return (max + 1) * config_1.OUTLINE_GUTTER_LEVEL_PX + config_1.OUTLINE_GUTTER_PAD_PX;
+};
+exports.computeOutlineGutterSize = computeOutlineGutterSize;

package/dist/cjs/components/pivot-placeholder/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { PivotTable } from "../../types";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type PivotPlaceholderProps = {
+    pivotTable: PivotTable;
+    displayName: string;
+    left: number;
+    top: number;
+    onRequestEditPivotTable: CanvasGridProps["onRequestEditPivotTable"];
+};
+export declare const PivotPlaceholder: ({ pivotTable, displayName, left, top, onRequestEditPivotTable, }: PivotPlaceholderProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/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/cjs/components/pivot-placeholder/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotPlaceholder = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var PivotPlaceholder = function (_a) {
+    var pivotTable = _a.pivotTable, displayName = _a.displayName, left = _a.left, top = _a.top, onRequestEditPivotTable = _a.onRequestEditPivotTable;
+    return (react_1.default.createElement("div", { key: pivotTable.pivotId, onClick: function () { return onRequestEditPivotTable === null || onRequestEditPivotTable === void 0 ? void 0 : onRequestEditPivotTable(pivotTable); }, role: "button", tabIndex: 0, onKeyDown: function (e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRequestEditPivotTable === null || onRequestEditPivotTable === void 0 ? void 0 : onRequestEditPivotTable(pivotTable);
+            }
+        }, className: "absolute pointer-events-auto cursor-pointer select-none group", style: {
+            top: top,
+            left: left,
+        } },
+        react_1.default.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_1.default.createElement("div", { className: "font-semibold text-rnc-foreground text-sm mb-2 " }, displayName),
+            react_1.default.createElement("div", { className: "text-xs text-rnc-foreground leading-relaxed" }, "To build a report, choose fields from the PivotTable Field List"))));
+};
+exports.PivotPlaceholder = PivotPlaceholder;

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