@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/hidden-markers/index.js

@@ -0,0 +1,39 @@
+import { useGridContext } from "@rowsncolumns/grid";
+import { TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, } from "@rowsncolumns/icons";
+import React from "react";
+import { StyledHiddenMarkerButton } from "./style";
+export const HiddenColumnMarkers = ({ hiddenDimensions, expandedDimensions, onShowColumn, }) => {
+    const { getCellOffsetFromCoords } = useGridContext();
+    const markers = hiddenDimensions.map((columnIndex, index) => {
+        const position = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex,
+        });
+        const { x = 0, y = 0 } = position ?? {};
+        return (React.createElement(StyledHiddenMarkerButton, { style: {
+                transform: `translate3d(${x}px, ${y}px, 0)`,
+            }, key: columnIndex, onClick: () => onShowColumn?.(expandedDimensions[index]), "aria-label": "Show column", tooltip: "Show column" },
+            React.createElement(TriangleLeftIcon, null),
+            React.createElement(TriangleRightIcon, null)));
+    });
+    return React.createElement(React.Fragment, null, markers);
+};
+export const HiddenRowMarkers = ({ hiddenDimensions, expandedDimensions, onShowRow, }) => {
+    const { getCellOffsetFromCoords } = useGridContext();
+    const markers = hiddenDimensions.map((rowIndex, index) => {
+        const position = getCellOffsetFromCoords({
+            rowIndex,
+            columnIndex: 0,
+        });
+        const { x = 0, y = 0 } = position ?? {};
+        return (React.createElement(StyledHiddenMarkerButton, { style: {
+                position: "absolute",
+                left: x,
+                top: y,
+                pointerEvents: "all",
+            }, key: rowIndex, onClick: () => onShowRow?.(expandedDimensions[index]), isVertical: true, "aria-label": "Show row", tooltip: "Show row" },
+            React.createElement(TriangleUpIcon, null),
+            React.createElement(TriangleDownIcon, null)));
+    });
+    return React.createElement(React.Fragment, null, markers);
+};

package/dist/esm/components/hidden-markers/style.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const StyledHiddenMarkerButton: React.ForwardRefExoticComponent<Omit<import("@rowsncolumns/ui").IconButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    isVertical?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/hidden-markers/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/hidden-markers/style.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,wBAAwB;iBAEgC,OAAO;2CAY1E,CAAC"}

package/dist/esm/components/hidden-markers/style.js

@@ -0,0 +1,4 @@
+import { cn, IconButton } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledHiddenMarkerButton = React.forwardRef(({ className, isVertical, ...props }, ref) => (React.createElement(IconButton, { ref: ref, className: cn("flex absolute border-none p-0 rounded-sm bg-none left-0 top-0 pointer-events-auto w-[30px] h-[15px] mt-[5px] -ml-[15px]", "bg-transparent text-rnc-foreground hover:bg-rnc-background hover:shadow-md print:hidden min-h-0 min-w-0", isVertical ? "w-[15px] h-[30px] ml-px -mt-[15px] flex-col" : undefined, className), ...props })));
+StyledHiddenMarkerButton.displayName = "StyledHiddenMarkerButton";

package/dist/esm/components/insert-function-dialog/index.d.ts

@@ -0,0 +1,32 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import React from "react";
+type InsertFunctionDialogProps = {
+    /** Controls visibility. */
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /**
+     * Function catalog — typically the same data passed to the canvas
+     * grid as `functionDescriptions`. When empty the dialog renders a
+     * "no functions" message.
+     */
+    functionDescriptions?: CalculatorFunction[] | null;
+    /**
+     * Fired with the user's pick. The host is responsible for
+     * inserting the formula at the active cell — typically by calling
+     * `makeEditable(sheetId, activeCell, "=" + name + "(")`.
+     */
+    onInsert(functionName: string): void;
+};
+/**
+ * Insert Function dialog. Excel calls it "Insert Function"; Sheets
+ * exposes the same data through the "fx" button on the formula bar.
+ * Search box filters by name + description; double-click or Insert
+ * button commits.
+ *
+ * The dialog deliberately stays UI-only — it never touches cell
+ * state directly. The host wires `onInsert` to the formula editor /
+ * `makeEditable` so the host's mutation policy applies.
+ */
+export declare const InsertFunctionDialog: React.MemoExoticComponent<({ open, onOpenChange, functionDescriptions, onInsert, }: InsertFunctionDialogProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/insert-function-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/insert-function-dialog/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAUrE,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,KAAK,yBAAyB,GAAG;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,sFAM5B,yBAAyB,uBAkJ7B,CAAC"}

package/dist/esm/components/insert-function-dialog/index.js

@@ -0,0 +1,75 @@
+import { Button, cn, Dialog, DialogBody, DialogContent, DialogTitle, Input, } from "@rowsncolumns/ui";
+import React, { memo, useMemo, useState } from "react";
+/**
+ * Insert Function dialog. Excel calls it "Insert Function"; Sheets
+ * exposes the same data through the "fx" button on the formula bar.
+ * Search box filters by name + description; double-click or Insert
+ * button commits.
+ *
+ * The dialog deliberately stays UI-only — it never touches cell
+ * state directly. The host wires `onInsert` to the formula editor /
+ * `makeEditable` so the host's mutation policy applies.
+ */
+export const InsertFunctionDialog = memo(({ open, onOpenChange, functionDescriptions, onInsert, }) => {
+    const [query, setQuery] = useState("");
+    const [selectedName, setSelectedName] = useState(undefined);
+    const filtered = useMemo(() => {
+        const all = functionDescriptions ?? [];
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return all;
+        return all.filter((fn) => {
+            return (fn.title.toLowerCase().includes(q) ||
+                fn.description?.toLowerCase().includes(q));
+        });
+    }, [functionDescriptions, query]);
+    const selected = useMemo(() => selectedName
+        ? filtered.find((fn) => fn.title === selectedName)
+        : filtered[0], [filtered, selectedName]);
+    const commit = () => {
+        if (selected) {
+            onInsert(selected.title);
+            onOpenChange(false);
+            setQuery("");
+            setSelectedName(undefined);
+        }
+    };
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[640px] max-w-[90vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Insert function"),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3" },
+                React.createElement(Input, { autoFocus: true, placeholder: "Search functions", value: query, onChange: (e) => {
+                        setQuery(e.target.value);
+                        setSelectedName(undefined);
+                    }, onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                            e.preventDefault();
+                            commit();
+                        }
+                    }, className: "text-sm" }),
+                React.createElement("div", { className: "flex border-rnc-border border border-solid rounded" },
+                    React.createElement("div", { className: "w-[40%] max-h-[280px] overflow-y-auto border-l-0 border-t-0 border-b-0 border-r border-solid border-rnc-border flex flex-col" }, filtered.length === 0 ? (React.createElement("div", { className: "p-3 text-xs text-rnc-muted-foreground" }, "No matching functions.")) : (filtered.map((fn) => {
+                        const isActive = selected?.title === fn.title;
+                        return (React.createElement(Button, { key: fn.title, onClick: () => setSelectedName(fn.title), onDoubleClick: commit, className: cn("flex-1 rounded-none", isActive
+                                ? "bg-rnc-foreground/10"
+                                : "hover:bg-rnc-foreground/5") }, fn.title));
+                    }))),
+                    React.createElement("div", { className: "flex-1 p-3 overflow-y-auto max-h-[280px]" }, selected ? (React.createElement("div", { className: "flex flex-col gap-2 text-xs" },
+                        React.createElement("div", { className: "font-mono font-semibold text-sm" }, selected.title),
+                        selected.syntax ? (React.createElement("div", { className: "font-mono text-rnc-muted-foreground" }, selected.syntax)) : null,
+                        selected.description ? (React.createElement("p", { className: "m-0" }, selected.description)) : null,
+                        selected.parameters?.length ? (React.createElement("div", { className: "mt-1" },
+                            React.createElement("div", { className: "font-semibold pb-1" }, "Parameters"),
+                            React.createElement("ul", { className: "m-0 pl-4 flex flex-col gap-1" }, selected.parameters.map((p) => (React.createElement("li", { key: p.title },
+                                React.createElement("span", { className: "font-mono" }, p.title),
+                                p.description ? (React.createElement("span", { className: "text-rnc-muted-foreground" },
+                                    " — ",
+                                    p.description)) : null)))))) : null,
+                        selected.example ? (React.createElement("div", { className: "mt-1" },
+                            React.createElement("div", { className: "font-semibold pb-1" }, "Example"),
+                            React.createElement("code", { className: "font-mono" }, selected.example))) : null)) : (React.createElement("div", { className: "text-xs text-rnc-muted-foreground" }, "Select a function to see its details.")))),
+                React.createElement("div", { className: "flex justify-end gap-2 pt-1" },
+                    React.createElement(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { size: "sm", onClick: commit, disabled: !selected }, "Insert"))))));
+});
+InsertFunctionDialog.displayName = "InsertFunctionDialog";

package/dist/esm/components/loading-indicator/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type LoadingIndicatorProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const LoadingIndicator: ({ className, ...rest }: LoadingIndicatorProps) => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/loading-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/loading-indicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,wBAG9B,qBAAqB,6BAcvB,CAAC"}

package/dist/esm/components/loading-indicator/index.js

@@ -0,0 +1,8 @@
+import { CircularLoader, cn } from "@rowsncolumns/ui";
+import React from "react";
+import { useLoaderValue } from "../../atoms/loading-indicator.atom";
+export const LoadingIndicator = ({ className, ...rest }) => {
+    const { loading, label } = useLoaderValue();
+    return loading ? (React.createElement("div", { className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-fade-in z-10 shadow-md bg-rnc-background text-rnc-foreground p-4 rounded-md border-rnc-border border-solid border", className), ...rest },
+        React.createElement(CircularLoader, { label: label, className: "bg-transparent h-auto w-auto" }))) : null;
+};

package/dist/esm/components/outline-gutter/index.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import { COLUMN_HEADER_HEIGHT, ROW_HEADER_WIDTH } from "../../config";
+import type { DimensionProperties } from "../../types";
+type DimensionMetadata = (DimensionProperties | null | undefined)[] | null | undefined;
+export type ColumnOutlineGutterProps = {
+    sheetId: number;
+    columnMetadata?: DimensionMetadata;
+    /** Row metadata for the same sheet. Used to compute the row outline
+     * gutter's width so the column strip can pad itself by the same
+     * amount, keeping its content aligned with the canvas's columns. */
+    rowMetadata?: DimensionMetadata;
+    /** True when summaries sit right of the group (Excel default). */
+    summaryRight?: boolean;
+    onCollapseColumnGroup?(sheetId: number, summaryColumnIndex: number): void;
+    onExpandColumnGroup?(sheetId: number, summaryColumnIndex: number): void;
+    /** Excel-style level selector. Renders N+1 numbered buttons in the
+     * gutter's leftInset area. */
+    onSetOutlineDepth?(sheetId: number, axis: "row" | "column", depth: number): void;
+};
+export declare const ColumnOutlineGutter: React.MemoExoticComponent<({ sheetId, columnMetadata, rowMetadata, summaryRight, onCollapseColumnGroup, onExpandColumnGroup, onSetOutlineDepth, }: ColumnOutlineGutterProps) => React.JSX.Element | null>;
+export type RowOutlineGutterProps = {
+    sheetId: number;
+    rowMetadata?: DimensionMetadata;
+    /** True when summaries sit below the group (Excel default). */
+    summaryBelow?: boolean;
+    onCollapseRowGroup?(sheetId: number, summaryRowIndex: number): void;
+    onExpandRowGroup?(sheetId: number, summaryRowIndex: number): void;
+    /** Excel-style level selector. Renders N+1 numbered buttons at the
+     * top of the row gutter strip (in the topInset area). */
+    onSetOutlineDepth?(sheetId: number, axis: "row" | "column", depth: number): void;
+};
+export declare const RowOutlineGutter: React.MemoExoticComponent<({ sheetId, rowMetadata, summaryBelow, onCollapseRowGroup, onExpandRowGroup, onSetOutlineDepth, }: RowOutlineGutterProps) => React.JSX.Element | null>;
+/**
+ * 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.
+ */
+export declare const computeOutlineGutterSize: (metadata: (DimensionProperties | null | undefined)[] | null | undefined) => number;
+export { COLUMN_HEADER_HEIGHT, ROW_HEADER_WIDTH };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/outline-gutter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/outline-gutter/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAE/E,OAAO,EACL,oBAAoB,EAKpB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAmDvD,KAAK,iBAAiB,GAClB,CAAC,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAC1C,IAAI,GACJ,SAAS,CAAC;AAgGd,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;wEAEoE;IACpE,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1E,mBAAmB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IACxE;kCAC8B;IAC9B,iBAAiB,CAAC,CAChB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,KAAK,GAAG,QAAQ,EACtB,KAAK,EAAE,MAAM,GACZ,IAAI,CAAC;CACT,CAAC;AAEF,eAAO,MAAM,mBAAmB,qJAS3B,wBAAwB,8BAkM5B,CAAC;AAGF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IACpE,gBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAClE;6DACyD;IACzD,iBAAiB,CAAC,CAChB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,KAAK,GAAG,QAAQ,EACtB,KAAK,EAAE,MAAM,GACZ,IAAI,CAAC;CACT,CAAC;AAEF,eAAO,MAAM,gBAAgB,+HAQxB,qBAAqB,8BAgLzB,CAAC;AAGF;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,CAAC,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,KACtE,MAIF,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,395 @@
+// 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.
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { COLUMN_HEADER_HEIGHT, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, OUTLINE_GUTTER_LEVEL_PX, OUTLINE_GUTTER_PAD_PX, ROW_HEADER_WIDTH, } from "../../config";
+import { scrollSubscriber } from "../../signals/scroll-subscriber";
+import { Button } from "@rowsncolumns/ui";
+import { MinusIcon, PlusIcon } from "@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).
+ */
+const computeOffset = (metadata, index, defaultSize) => {
+    if (index <= 1)
+        return 0;
+    let offset = 0;
+    for (let i = 1; i < index; i++) {
+        const meta = metadata?.[i];
+        const hidden = !!(meta?.hiddenByUser ||
+            meta?.hiddenByFilter ||
+            meta?.hiddenByGroup);
+        if (hidden)
+            continue;
+        offset += meta?.size ?? 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.
+ */
+const useGridScrollPosition = () => {
+    const [scroll, setScroll] = useState({ scrollTop: 0, scrollLeft: 0 });
+    useEffect(() => {
+        const sub = scrollSubscriber.subscribe((pos) => {
+            setScroll({
+                scrollTop: pos.scrollTop ?? 0,
+                scrollLeft: pos.scrollLeft ?? 0,
+            });
+        });
+        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)`.
+ */
+const findSummaries = (metadata, summaryAfter) => {
+    if (!metadata?.length)
+        return [];
+    const out = [];
+    const length = metadata.length;
+    const levelAt = (i) => i >= 0 && i < length ? metadata[i]?.outlineLevel ?? 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.
+    const 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.
+        let prevLevel = 0;
+        for (let i = 0; i <= length; i++) {
+            const curr = levelAt(i);
+            if (curr > prevLevel) {
+                for (let level = prevLevel + 1; level <= curr; level++) {
+                    openStarts.set(level, i);
+                }
+            }
+            else if (curr < prevLevel) {
+                const collapsed = !!metadata[i]?.collapsed;
+                // Close higher levels first (innermost group ends first).
+                for (let level = prevLevel; level > curr; level--) {
+                    const startIndex = openStarts.get(level) ?? i;
+                    out.push({ index: i, startIndex, collapsed, level });
+                    openStarts.delete(level);
+                }
+            }
+            prevLevel = curr;
+        }
+    }
+    else {
+        // summaryAfter=false: summary cell sits BEFORE the group. Mirror
+        // image of the forward scan.
+        let prevLevel = 0;
+        for (let i = length; i >= -1; i--) {
+            const curr = levelAt(i);
+            if (curr > prevLevel) {
+                for (let level = prevLevel + 1; level <= curr; level++) {
+                    openStarts.set(level, i);
+                }
+            }
+            else if (curr < prevLevel) {
+                const collapsed = !!metadata[i]?.collapsed;
+                for (let level = prevLevel; level > curr; level--) {
+                    const startIndex = openStarts.get(level) ?? i;
+                    out.push({ index: i, startIndex, collapsed, 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.
+ */
+const computeMaxOutlineLevel = (metadata) => {
+    if (!metadata?.length)
+        return 0;
+    let max = 0;
+    for (const meta of metadata) {
+        const level = meta?.outlineLevel ?? 0;
+        if (level > max)
+            max = level;
+    }
+    return max;
+};
+export const ColumnOutlineGutter = memo(({ sheetId, columnMetadata, rowMetadata, summaryRight = true, onCollapseColumnGroup, onExpandColumnGroup, 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).
+    const leftInset = useMemo(() => computeOutlineGutterSize(rowMetadata), [rowMetadata]);
+    const maxColumnOutlineLevel = useMemo(() => computeMaxOutlineLevel(columnMetadata), [columnMetadata]);
+    const getColumnOffset = useCallback((columnIndex) => computeOffset(columnMetadata, columnIndex, DEFAULT_COLUMN_WIDTH) +
+        ROW_HEADER_WIDTH, [columnMetadata]);
+    const { scrollLeft } = useGridScrollPosition();
+    const summaries = useMemo(() => 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.
+    const buttonLevelForIndex = useMemo(() => {
+        const m = new Map();
+        for (const s of summaries) {
+            const existing = m.get(s.index);
+            if (existing === undefined || s.level < existing) {
+                m.set(s.index, s.level);
+            }
+        }
+        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.
+    const depthCount = maxColumnOutlineLevel + 1;
+    const gutterHeight = depthCount * OUTLINE_GUTTER_LEVEL_PX + 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.
+    const summaryMinX = leftInset + ROW_HEADER_WIDTH;
+    return (React.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.createElement("div", { className: "absolute flex flex-col", style: {
+                left: 2,
+                top: OUTLINE_GUTTER_PAD_PX / 2,
+                gap: 1,
+            } }, Array.from({ length: depthCount }, (_, i) => i + 1).map((depth) => (React.createElement(Button, { key: `col-level-${depth}`, "aria-label": `Set column outline depth to ${depth}`, size: "xs", variant: "outline", className: "p-0 min-w-0 min-h-0 text-[10px] w-4 h-4 justify-center", onClick: (e) => {
+                e.stopPropagation();
+                onSetOutlineDepth?.(sheetId, "column", depth);
+            } }, depth)))),
+        summaries.map(({ index, startIndex, collapsed, level }) => {
+            // Anchor positions inside the cell area; add `leftInset` so
+            // x=0 of the strip lines up with the grid's content origin.
+            const buttonX = getColumnOffset(index) - scrollLeft + leftInset;
+            const lineStartX = getColumnOffset(startIndex) - scrollLeft + leftInset + 2;
+            const y = (level - 1) * OUTLINE_GUTTER_LEVEL_PX + OUTLINE_GUTTER_PAD_PX / 2;
+            const lineCenterY = y + 6;
+            // Gap (in px) the bracket line should leave before the
+            // button starts, so the two don't visually run together.
+            const lineButtonGap = 4;
+            // Length of the small downward "hook" tick at the start of
+            // the bracket (matches Excel's outline visual).
+            const hookLength = 4;
+            // One small dot per grouped column, centered on each cell
+            // and aligned with the bracket line (Excel's outline visual).
+            const childIndices = [];
+            if (!collapsed) {
+                const [from, to] = summaryRight
+                    ? [startIndex, index - 1]
+                    : [index + 1, startIndex];
+                for (let c = from; c <= to; c++)
+                    childIndices.push(c);
+            }
+            const 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.
+            const lineStartXClamped = Math.max(lineStartX, summaryMinX);
+            const lineWidth = buttonX - lineStartXClamped - lineButtonGap;
+            return (React.createElement(React.Fragment, { key: `col-${index}-${level}` },
+                showSummary && !collapsed && lineWidth > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "absolute bg-rnc-border h-[1px]", style: {
+                            left: lineStartXClamped,
+                            top: lineCenterY,
+                            width: lineWidth,
+                        } }),
+                    lineStartX >= summaryMinX ? (React.createElement("span", { className: "absolute bg-rnc-border w-[1px]", style: {
+                            left: lineStartX,
+                            top: lineCenterY,
+                            height: hookLength,
+                        } })) : null,
+                    childIndices.map((c) => {
+                        const colStart = getColumnOffset(c);
+                        const colEnd = getColumnOffset(c + 1);
+                        const cx = colStart +
+                            (colEnd - colStart) / 2 -
+                            scrollLeft +
+                            leftInset;
+                        if (cx - 1 < summaryMinX)
+                            return null;
+                        return (React.createElement("span", { key: `col-dot-${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.createElement(Button, { "aria-label": collapsed
+                        ? `Expand column group at ${index}`
+                        : `Collapse column group at ${index}`, size: "xs", variant: "outline", className: "absolute p-0 min-w-0 min-h-0", style: {
+                        left: buttonX,
+                        top: y,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        if (collapsed)
+                            onExpandColumnGroup?.(sheetId, index);
+                        else
+                            onCollapseColumnGroup?.(sheetId, index);
+                    } }, collapsed ? (React.createElement(PlusIcon, { className: "w-3 h-3" })) : (React.createElement(MinusIcon, { className: "w-3 h-3" })))) : null));
+        })));
+});
+ColumnOutlineGutter.displayName = "ColumnOutlineGutter";
+export const RowOutlineGutter = memo(({ sheetId, rowMetadata, summaryBelow = true, onCollapseRowGroup, onExpandRowGroup, onSetOutlineDepth, }) => {
+    const topInset = 0;
+    const maxRowOutlineLevel = useMemo(() => computeMaxOutlineLevel(rowMetadata), [rowMetadata]);
+    const getRowOffset = useCallback((rowIndex) => computeOffset(rowMetadata, rowIndex, DEFAULT_ROW_HEIGHT) +
+        COLUMN_HEADER_HEIGHT, [rowMetadata]);
+    const { scrollTop } = useGridScrollPosition();
+    const summaries = useMemo(() => 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.
+    const buttonLevelForIndex = useMemo(() => {
+        const m = new Map();
+        for (const s of summaries) {
+            const existing = m.get(s.index);
+            if (existing === undefined || s.level < existing) {
+                m.set(s.index, s.level);
+            }
+        }
+        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.
+    const depthCount = maxRowOutlineLevel + 1;
+    const gutterWidth = depthCount * OUTLINE_GUTTER_LEVEL_PX + 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.
+    const summaryMinY = topInset + COLUMN_HEADER_HEIGHT;
+    return (React.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.createElement("div", { className: "absolute flex flex-row", style: {
+                left: OUTLINE_GUTTER_PAD_PX / 2,
+                top: 2,
+                gap: 1,
+            } }, Array.from({ length: depthCount }, (_, i) => i + 1).map((depth) => (React.createElement(Button, { key: `row-level-${depth}`, "aria-label": `Set row outline depth to ${depth}`, size: "xs", variant: "outline", className: "p-0 min-w-0 min-h-0 text-[10px] w-4 h-4 justify-center", onClick: (e) => {
+                e.stopPropagation();
+                onSetOutlineDepth?.(sheetId, "row", depth);
+            } }, depth)))),
+        summaries.map(({ index, startIndex, collapsed, level }) => {
+            const buttonY = getRowOffset(index) - scrollTop + topInset;
+            const lineStartY = getRowOffset(startIndex) - scrollTop + topInset + 2;
+            const x = (level - 1) * OUTLINE_GUTTER_LEVEL_PX + OUTLINE_GUTTER_PAD_PX / 2;
+            const 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°).
+            const lineButtonGap = 4;
+            const hookLength = 4;
+            // One small dot per grouped row, centered on each row and
+            // aligned with the bracket line (Excel's outline visual).
+            const childIndices = [];
+            if (!collapsed) {
+                const [from, to] = summaryBelow
+                    ? [startIndex, index - 1]
+                    : [index + 1, startIndex];
+                for (let c = from; c <= to; c++)
+                    childIndices.push(c);
+            }
+            const 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.
+            const lineStartYClamped = Math.max(lineStartY, summaryMinY);
+            const lineHeight = buttonY - lineStartYClamped - lineButtonGap;
+            return (React.createElement(React.Fragment, { key: `row-${index}-${level}` },
+                showSummary && !collapsed && lineHeight > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: "absolute bg-rnc-border w-[1px]", style: {
+                            left: lineCenterX,
+                            top: lineStartYClamped,
+                            height: lineHeight,
+                        } }),
+                    lineStartY >= summaryMinY ? (React.createElement("span", { className: "absolute bg-rnc-border h-[1px]", style: {
+                            left: lineCenterX,
+                            top: lineStartY,
+                            width: hookLength,
+                        } })) : null,
+                    childIndices.map((c) => {
+                        const rowStart = getRowOffset(c);
+                        const rowEnd = getRowOffset(c + 1);
+                        const cy = rowStart + (rowEnd - rowStart) / 2 - scrollTop + topInset;
+                        if (cy - 1 < summaryMinY)
+                            return null;
+                        return (React.createElement("span", { key: `row-dot-${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.createElement(Button, { "aria-label": collapsed
+                        ? `Expand row group at ${index}`
+                        : `Collapse row group at ${index}`, className: "absolute p-0 min-w-0 min-h-0", size: "xs", variant: "outline", style: {
+                        left: x,
+                        top: buttonY,
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        if (collapsed)
+                            onExpandRowGroup?.(sheetId, index);
+                        else
+                            onCollapseRowGroup?.(sheetId, index);
+                    } }, collapsed ? (React.createElement(PlusIcon, { className: "w-3 h-3" })) : (React.createElement(MinusIcon, { className: "w-3 h-3" })))) : null));
+        })));
+});
+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.
+ */
+export const computeOutlineGutterSize = (metadata) => {
+    const max = computeMaxOutlineLevel(metadata);
+    if (max <= 0)
+        return 0;
+    return (max + 1) * OUTLINE_GUTTER_LEVEL_PX + OUTLINE_GUTTER_PAD_PX;
+};
+export { COLUMN_HEADER_HEIGHT, ROW_HEADER_WIDTH };

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