@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/toolbar/font-family-selector.js

@@ -0,0 +1,167 @@
+import { CheckIcon, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import React, { memo } from "react";
+import { useFocusSheet } from "../../atoms";
+import { loadWebFont } from "../../hooks/use-fonts";
+const DEFAULT_FONT_LIST = [
+    {
+        value: "Arial",
+        label: "Arial",
+    },
+    {
+        value: "Calibri",
+        label: "Calibri",
+    },
+    {
+        value: "Cambria",
+        label: "Cambria",
+    },
+    {
+        value: "Caveat",
+        label: "Caveat",
+    },
+    {
+        value: "Comfortaa",
+        label: "Comfortaa",
+    },
+    {
+        value: "Comic Sans MS",
+        label: "Comic Sans MS",
+    },
+    {
+        value: "Consolas",
+        label: "Consolas",
+    },
+    {
+        value: "Corsiva",
+        label: "Corsiva",
+    },
+    {
+        value: "Courier New",
+        label: "Courier New",
+    },
+    {
+        value: "Droid Sans",
+        label: "Droid Sans",
+    },
+    {
+        value: "Droid Serif",
+        label: "Droid Serif",
+    },
+    {
+        value: "Georgia",
+        label: "Georgia",
+    },
+    {
+        value: "Impact",
+        label: "Impact",
+    },
+    {
+        value: "Lexend",
+        label: "Lexend",
+    },
+    {
+        value: "Lobster",
+        label: "Lobster",
+    },
+    {
+        value: "Lora",
+        label: "Lora",
+    },
+    {
+        value: "Merriweather",
+        label: "Merriweather",
+    },
+    {
+        value: "Montserrat",
+        label: "Montserrat",
+    },
+    {
+        value: "Nunito",
+        label: "Nunito",
+    },
+    {
+        value: "Oswald",
+        label: "Oswald",
+    },
+    {
+        value: "Pacifico",
+        label: "Pacifico",
+    },
+    {
+        value: "Proxima Nova",
+        label: "Proxima Nova",
+    },
+    {
+        value: "Roboto",
+        label: "Roboto",
+    },
+    {
+        value: "Roboto Mono",
+        label: "Roboto Mono",
+    },
+    {
+        value: "Roboto Serif",
+        label: "Roboto Serif",
+    },
+    {
+        value: "Source Sans 3",
+        label: "Source Sans 3",
+    },
+    {
+        value: "Times New Roman",
+        label: "Times New Roman",
+    },
+    {
+        value: "Trebuchet MS",
+        label: "Trebuchet MS",
+    },
+    {
+        value: "Ubuntu",
+        label: "Ubuntu",
+    },
+    {
+        value: "Verdana",
+        label: "Verdana",
+    },
+];
+export const FontFamilySelector = memo(({ theme, value = theme.primaryFontFamily, fontList = DEFAULT_FONT_LIST, triggerVariant, onRequestFonts, onChange, }) => {
+    const defaultFontFamily = theme.primaryFontFamily;
+    const isDefault = value === defaultFontFamily;
+    const focusSheet = useFocusSheet();
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(IconButton, { tooltip: "Font", className: "justify-between", variant: triggerVariant },
+                React.createElement("div", { className: "text-xs py-1 w-[80px] overflow-hidden text-ellipsis whitespace-nowrap text-left" }, isDefault ? `Default (${value})` : value),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { align: "start" },
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        onChange(defaultFontFamily);
+                        focusSheet?.();
+                    } },
+                    "Default (",
+                    defaultFontFamily,
+                    ")"),
+                React.createElement(DropdownMenuSeparator, null),
+                fontList.map(({ label, value: fontValue }, idx) => {
+                    const isChecked = value === fontValue;
+                    return (React.createElement(DropdownMenuCheckboxItem, { key: idx, checked: isChecked, onClick: async () => {
+                            if (onRequestFonts) {
+                                await onRequestFonts([fontValue]);
+                            }
+                            else {
+                                await loadWebFont([
+                                    `${fontValue}:400`,
+                                    `${fontValue}:700`,
+                                ]);
+                            }
+                            onChange(fontValue);
+                            focusSheet?.();
+                        } },
+                        React.createElement(DropdownMenuItemIndicator, null,
+                            React.createElement(CheckIcon, null)),
+                        label));
+                })))));
+});

package/dist/esm/components/toolbar/font-size-selector.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type FontSizeSelectorProps = {
+    defaultFontSizePoint?: number;
+    value?: number | null;
+    onChange(value: number): void;
+    options?: string[];
+};
+export declare const FontSizeSelector: ({ defaultFontSizePoint, value: fontSizeValue, onChange, options, }: FontSizeSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=font-size-selector.d.ts.map

package/dist/esm/components/toolbar/font-size-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/font-size-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,KAAK,qBAAqB,GAAG;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAI,oEAK9B,qBAAqB,sBAyLvB,CAAC"}

package/dist/esm/components/toolbar/font-size-selector.js

@@ -0,0 +1,139 @@
+import { MinusIcon, PlusIcon } from "@rowsncolumns/icons";
+import { Button, cn, Input, Popover, PopoverAnchor, PopoverContent, PopoverPortal, Stack, } from "@rowsncolumns/ui";
+import { isNil } from "@rowsncolumns/utils";
+import React, { useCallback, useState } from "react";
+import { useRef } from "react";
+import { useActiveEditor } from "../../atoms/active-editor.atom";
+import { useFocusSheet } from "../../atoms";
+import { DEFAULT_FONT_SIZE_PT } from "../../config";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { ToolbarIconButton } from "./buttons";
+const fontSizeOptions = [6, 7, 8, 9, 10, 11, 12, 14, 18, 24, 36].map(String);
+export const FontSizeSelector = ({ defaultFontSizePoint = DEFAULT_FONT_SIZE_PT, value: fontSizeValue, onChange, options = fontSizeOptions, }) => {
+    const numberValue = fontSizeValue ?? defaultFontSizePoint;
+    const value = String(numberValue);
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(() => options.indexOf(value));
+    const openMenu = useCallback(() => setIsOpen(true), []);
+    const closeMenu = useCallback(() => setIsOpen(false), []);
+    const focusSheet = useFocusSheet();
+    const activeEditor = useActiveEditor();
+    /**
+     * Hand focus back after the size input/dropdown is done. When a cell is
+     * being edited, focus the editor directly — ProseMirror re-paints the
+     * kept selection on focus — rather than `focusSheet`, which suppresses
+     * refocus while focus sits on toolbar chrome outside the grid.
+     */
+    const returnFocus = useCallback(() => {
+        if (activeEditor) {
+            activeEditor.focus();
+        }
+        else {
+            focusSheet?.();
+        }
+    }, [activeEditor, focusSheet]);
+    const valueRef = useRef("");
+    const handleKeyDown = useCallback((e) => {
+        const len = options.length - 1;
+        switch (e.key) {
+            case "ArrowDown": {
+                if (!isOpen) {
+                    openMenu();
+                    return;
+                }
+                setHighlightedIndex((prev) => {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                if (!isOpen) {
+                    openMenu();
+                }
+                setHighlightedIndex((prev) => {
+                    if (prev === 0) {
+                        return len;
+                    }
+                    return Math.max(0, prev - 1);
+                });
+                e.preventDefault();
+                break;
+            case "Escape":
+                closeMenu();
+                break;
+            case "Enter":
+                onChange(Number(valueRef.current));
+                closeMenu();
+                returnFocus();
+                break;
+            case "Tab":
+                onChange(Number(valueRef.current));
+                closeMenu();
+                break;
+        }
+    }, [options, isOpen, onChange, closeMenu, openMenu, returnFocus]);
+    /**
+     * Steppers increment from the size the selection actually has. While a
+     * cell is being edited, the last fontSize applied to the editor selection
+     * lives in the run marks, not in the cell-level `value` prop — stepping
+     * from `value` would re-apply the same size on every click.
+     */
+    const stepBase = () => activeEditor?.getSelectionFontSize?.() ??
+        (Number(inputValue) || numberValue);
+    const applySize = (size) => {
+        setInputValue(String(size));
+        onChange(size);
+    };
+    const onIncrement = () => {
+        applySize(stepBase() + 1);
+    };
+    const onDecrement = () => {
+        applySize(Math.max(1, stepBase() - 1));
+    };
+    useIsomorphicLayoutEffect(() => {
+        valueRef.current = inputValue;
+    }, [inputValue]);
+    useIsomorphicLayoutEffect(() => {
+        if (!isNil(options[highlightedIndex])) {
+            setInputValue(options[highlightedIndex]);
+        }
+    }, [highlightedIndex]);
+    useIsomorphicLayoutEffect(() => {
+        setInputValue(String(value));
+        setHighlightedIndex(options.indexOf(value));
+    }, [value, options]);
+    return (React.createElement(Stack, { className: "gap-1" },
+        React.createElement(ToolbarIconButton, { shrink: true, size: "xs", onClick: onDecrement, tooltip: "Decrease font size" },
+            React.createElement(MinusIcon, null)),
+        React.createElement(Popover, { open: isOpen },
+            React.createElement(PopoverAnchor, { asChild: true },
+                React.createElement(Input, { ref: inputRef, value: inputValue, onChange: (e) => {
+                        setInputValue(e.target.value);
+                    }, onKeyDown: handleKeyDown, onFocus: () => {
+                        openMenu();
+                    }, onBlur: () => {
+                        closeMenu();
+                    }, className: "w-[40px] text-xs text-center" })),
+            React.createElement(PopoverPortal, null,
+                React.createElement(PopoverContent, { align: "start", sideOffset: 2, className: "w-[40px] min-w-0 p-1", onOpenAutoFocus: (event) => {
+                        event.preventDefault();
+                    } }, options.map((item, index) => (React.createElement(Button, { key: item, onMouseDown: (event) => {
+                        // Don't let the option button take focus (that blurs the
+                        // size input mid-gesture); apply, close, and hand focus
+                        // back to the editor/grid explicitly instead.
+                        event.preventDefault();
+                        onChange?.(Number(item));
+                        closeMenu();
+                        returnFocus();
+                    }, className: cn(highlightedIndex === index
+                        ? "bg-rnc-foreground/10"
+                        : undefined, "text-xs pr-1.5 pl-1.5 justify-center") }, item)))))),
+        React.createElement(ToolbarIconButton, { shrink: true, size: "xs", onClick: onIncrement, tooltip: "Increase font size" },
+            React.createElement(PlusIcon, null))));
+};

package/dist/esm/components/toolbar/index.d.ts

@@ -0,0 +1,25 @@
+export * from "./toolbar";
+export * from "./buttons";
+export * from "./scale-selector";
+export * from "./font-size-selector";
+export * from "./text-color-selector";
+export * from "./background-color-selector";
+export * from "./merge-cells-selector";
+export * from "./border-selector";
+export * from "./font-family-selector";
+export * from "./text-horizontal-align-selector";
+export * from "./text-vertical-align-selector";
+export * from "./text-wrap-selector";
+export * from "./text-format-selector";
+export * from "./theme-selector";
+export * from "./table-actions";
+export * from "./cell-style-selector";
+export * from "./table-style-selector";
+export * from "./border-color-selector";
+export * from "./color-selector";
+export * from "./border-line-style-options";
+export * from "./border-location-options";
+export * from "./insert-menu";
+export * from "./view-menu";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/esm/components/toolbar/index.js

@@ -0,0 +1,24 @@
+export * from "./toolbar";
+export * from "./buttons";
+export * from "./scale-selector";
+export * from "./font-size-selector";
+export * from "./text-color-selector";
+export * from "./background-color-selector";
+export * from "./merge-cells-selector";
+export * from "./border-selector";
+export * from "./font-family-selector";
+export * from "./text-horizontal-align-selector";
+export * from "./text-vertical-align-selector";
+export * from "./text-wrap-selector";
+export * from "./text-format-selector";
+export * from "./theme-selector";
+export * from "./table-actions";
+export * from "./cell-style-selector";
+export * from "./table-style-selector";
+export * from "./border-color-selector";
+export * from "./color-selector";
+export * from "./border-line-style-options";
+export * from "./border-location-options";
+export * from "./insert-menu";
+export * from "./view-menu";
+export * from "./types";

package/dist/esm/components/toolbar/insert-menu.d.ts

@@ -0,0 +1,22 @@
+import { type CellInterface, type SelectionArea } from "@rowsncolumns/grid";
+import React from "react";
+import type { PivotTable } from "../../types";
+import type { CanvasGridProps, SelectionAttributes } from "../canvas-grid/typings";
+type InsertMenuProps = {
+    sheetId: number;
+    activeCell: CellInterface;
+    selections: SelectionArea<SelectionAttributes>[];
+    onRequestCreatePivotTable?(pivotTable: PivotTable): void;
+    onCreateNewSheet?: CanvasGridProps["onCreateNewSheet"];
+    onInsertCellsShiftRight?: CanvasGridProps["onInsertCellsShiftRight"];
+    onInsertCellsShiftDown?: CanvasGridProps["onInsertCellsShiftDown"];
+    onInsertRow?: CanvasGridProps["onInsertRow"];
+    onInsertColumn?: CanvasGridProps["onInsertColumn"];
+    onCreateChart?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    onRequestInsertImage?(sheetId: number, activeCell: CellInterface, insertOverCells?: boolean): void;
+    onRequestInsertLink?(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    onRequestDataValidation: CanvasGridProps["onRequestDataValidation"];
+};
+export declare const InsertMenu: React.MemoExoticComponent<({ sheetId, activeCell, selections, onCreateNewSheet, onInsertCellsShiftRight, onInsertCellsShiftDown, onInsertRow, onInsertColumn, onCreateChart, onRequestInsertImage, onRequestInsertLink, onRequestDataValidation, onRequestCreatePivotTable, }: InsertMenuProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=insert-menu.d.ts.map

package/dist/esm/components/toolbar/insert-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert-menu.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/insert-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAEnB,MAAM,oBAAoB,CAAC;AAgB5B,OAAO,KAAuB,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAA4B,UAAU,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACjD,yBAAyB,CAAC,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,uBAAuB,CAAC,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;IACrE,sBAAsB,CAAC,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;IACnE,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,aAAa,CAAC,CACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,oBAAoB,CAAC,CACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,eAAe,CAAC,EAAE,OAAO,GACxB,IAAI,CAAC;IACR,mBAAmB,CAAC,CAClB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,uBAAuB,EAAE,eAAe,CAAC,yBAAyB,CAAC,CAAC;CACrE,CAAC;AAEF,eAAO,MAAM,UAAU,iRAelB,eAAe,uBA2PnB,CAAC"}

package/dist/esm/components/toolbar/insert-menu.js

@@ -0,0 +1,143 @@
+import { selectionFromActiveCell, } from "@rowsncolumns/grid";
+import { ChevronRightIcon, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, } from "@rowsncolumns/ui";
+import { uuid, uuidString } from "@rowsncolumns/utils";
+import React, { memo, useRef } from "react";
+import { getUserSelections } from "../../api/selections";
+import { useFocusSheet, useInsertNote } from "../../atoms";
+export const InsertMenu = memo(({ sheetId, activeCell, selections, onCreateNewSheet, onInsertCellsShiftRight, onInsertCellsShiftDown, onInsertRow, onInsertColumn, onCreateChart, onRequestInsertImage, onRequestInsertLink, onRequestDataValidation, onRequestCreatePivotTable, }) => {
+    const focusSheet = useFocusSheet();
+    const onInsertNote = useInsertNote();
+    const shouldFocusSheetRef = useRef(true);
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "xl", tooltip: "Insert", className: "gap-1" },
+                React.createElement("div", { className: "text-xs" }, "Insert"),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(DropdownMenuPortal, null,
+            React.createElement(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet?.();
+                    }
+                } },
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, null,
+                        "Cells",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertCellsShiftRight?.(sheetId, activeCell, selections) }, "Insert cells and shift right"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertCellsShiftDown?.(sheetId, activeCell, selections) }, "Insert cells and shift down"))),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, null,
+                        "Rows",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertRow?.(sheetId, activeCell.rowIndex, 1) }, "Insert 1 row above"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertRow?.(sheetId, activeCell.rowIndex + 1, 1) }, "Insert 1 row below"))),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, null,
+                        "Columns",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertColumn?.(sheetId, activeCell.columnIndex, 1) }, "Insert 1 column left"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertColumn?.(sheetId, activeCell.columnIndex + 1, 1) }, "Insert 1 column right"))),
+                React.createElement(DropdownMenuItem, { onClick: () => onCreateNewSheet?.() },
+                    "Sheet",
+                    React.createElement(DropdownRightSlot, null, "Shift+F11")),
+                React.createElement(DropdownMenuSeparator, null),
+                onRequestCreatePivotTable ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        const sel = selections.length
+                            ? selections
+                            : selectionFromActiveCell(activeCell);
+                        const pivotTable = {
+                            pivotId: uuidString(),
+                            columns: [],
+                            rows: [],
+                            values: [],
+                            source: {
+                                ...sel[0].range,
+                                sheetId,
+                            },
+                            targetPosition: {
+                                ...activeCell,
+                                sheetId,
+                            },
+                        };
+                        onRequestCreatePivotTable?.(pivotTable);
+                    } }, "Pivot Table")) : null,
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        onCreateChart?.(sheetId, activeCell, selections);
+                    } }, "Chart"),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, null,
+                        "Image",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                shouldFocusSheetRef.current = false;
+                                onRequestInsertImage?.(sheetId, activeCell, false);
+                            } }, "Insert image in cell"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                shouldFocusSheetRef.current = false;
+                                onRequestInsertImage?.(sheetId, activeCell, true);
+                            } }, "Insert image over cell"))),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        onRequestInsertLink?.(sheetId, activeCell, selections);
+                    } }, "Link"),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        const finalSelections = getUserSelections(activeCell, selections);
+                        const dropdownValidationRule = {
+                            id: uuid(),
+                            ranges: finalSelections.map((sel) => ({
+                                ...sel.range,
+                                sheetId,
+                            })),
+                            condition: {
+                                type: "ONE_OF_LIST",
+                                values: [
+                                    {
+                                        userEnteredValue: "Option 1, Option 2",
+                                    },
+                                ],
+                            },
+                            // Excel parity: UI-created rules ignore blanks by default.
+                            allowBlank: true,
+                        };
+                        onRequestDataValidation?.(sheetId, activeCell, selections, dropdownValidationRule);
+                    } }, "Dropdown"),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = true;
+                        const finalSelections = getUserSelections(activeCell, selections);
+                        const dropdownValidationRule = {
+                            id: uuid(),
+                            ranges: finalSelections.map((sel) => ({
+                                ...sel.range,
+                                sheetId,
+                            })),
+                            condition: {
+                                type: "BOOLEAN",
+                            },
+                            // Excel parity: UI-created rules ignore blanks by default.
+                            allowBlank: true,
+                        };
+                        onRequestDataValidation?.(sheetId, activeCell, selections, dropdownValidationRule, false);
+                    } }, "Checkbox"),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        onInsertNote?.(sheetId, activeCell, selections);
+                    } },
+                    "Note",
+                    React.createElement(DropdownRightSlot, null, "Shift+F2"))))));
+});

package/dist/esm/components/toolbar/merge-cells-selector.d.ts

@@ -0,0 +1,15 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
+import { Direction } from "@rowsncolumns/grid";
+import React from "react";
+import type { SelectionAttributes } from "../canvas-grid/typings";
+type MergeCellsSelectorProps = {
+    activeCell: CellInterface;
+    selections: SelectionArea[];
+    sheetId: number;
+    onMerge(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[], direction?: Direction): void;
+    onUnMerge(sheetId: number, activeCell: CellInterface, selections: SelectionArea<SelectionAttributes>[]): void;
+    merges?: GridRange[] | null;
+};
+export declare const MergeCellsSelector: ({ activeCell, selections, sheetId, merges, onMerge, onUnMerge, }: MergeCellsSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=merge-cells-selector.d.ts.map

package/dist/esm/components/toolbar/merge-cells-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-cells-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/merge-cells-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAgB,MAAM,oBAAoB,CAAC;AAY7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CACL,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,SAAS,CAAC,EAAE,SAAS,GACpB,IAAI,CAAC;IACR,SAAS,CACP,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,aAAa,EACzB,UAAU,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAC/C,IAAI,CAAC;IACR,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kEAOhC,uBAAuB,sBAqFzB,CAAC"}

package/dist/esm/components/toolbar/merge-cells-selector.js

@@ -0,0 +1,48 @@
+import { Direction, isEqualCells } from "@rowsncolumns/grid";
+import { AiOutlineMergeCells, MdOutlineArrowDropDown, } from "@rowsncolumns/icons";
+import { DropdownMenuPortal, IconButton, Stack } from "@rowsncolumns/ui";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@rowsncolumns/ui";
+import React from "react";
+import { useFocusSheet } from "../../atoms";
+import { DEFAULT_ARRAY } from "../../config";
+export const MergeCellsSelector = ({ activeCell, selections = DEFAULT_ARRAY, sheetId, merges, onMerge, onUnMerge, }) => {
+    const focusSheet = useFocusSheet();
+    const isMerged = !!merges?.find((merge) => isEqualCells({ rowIndex: merge.startRowIndex, columnIndex: merge.startColumnIndex }, activeCell));
+    const selection = selections[selections.length - 1];
+    const disableMenu = selections.length === 0 && !isMerged;
+    const canMergeHorizontally = selection &&
+        selection.range.startColumnIndex !== selection.range.endColumnIndex;
+    const canMergeVertically = selection && selection.range.startRowIndex !== selection.range.endRowIndex;
+    return (React.createElement(Stack, null,
+        React.createElement(IconButton, { onClick: () => {
+                if (isMerged) {
+                    onUnMerge(sheetId, activeCell, selections);
+                }
+                else {
+                    onMerge(sheetId, activeCell, selections);
+                }
+            }, isActive: isMerged, tooltip: isMerged ? "Unmerge All" : "Merge all", disabled: disableMenu },
+            React.createElement(AiOutlineMergeCells, null)),
+        React.createElement(DropdownMenu, { modal: false },
+            React.createElement(DropdownMenuTrigger, { disabled: disableMenu, asChild: true },
+                React.createElement(IconButton, { shrink: true, disabled: disableMenu },
+                    React.createElement(MdOutlineArrowDropDown, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "end" },
+                    React.createElement(DropdownMenuItem, { disabled: isMerged, onClick: () => {
+                            onMerge(sheetId, activeCell, selections);
+                            focusSheet?.();
+                        } }, "Merge all"),
+                    React.createElement(DropdownMenuItem, { disabled: isMerged || !canMergeVertically, onClick: () => {
+                            onMerge(sheetId, activeCell, selections, Direction.Down);
+                            focusSheet?.();
+                        } }, "Merge vertically"),
+                    React.createElement(DropdownMenuItem, { onClick: () => {
+                            onMerge(sheetId, activeCell, selections, Direction.Right);
+                            focusSheet?.();
+                        }, disabled: isMerged || !canMergeHorizontally }, "Merge horizontally"),
+                    React.createElement(DropdownMenuItem, { disabled: !isMerged, onClick: () => {
+                            onUnMerge(sheetId, activeCell, selections);
+                            focusSheet?.();
+                        } }, "Unmerge"))))));
+};

package/dist/esm/components/toolbar/scale-selector.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type ScaleSelectorProps = {
+    value?: number;
+    options?: number[];
+    /** Minimum scale (default 0.1 = 10%, matches Excel). */
+    minScale?: number;
+    /** Maximum scale (default 4 = 400%, matches Excel). */
+    maxScale?: number;
+    onChange?(value: number): void;
+};
+export declare const ScaleSelector: ({ value, onChange, options, minScale, maxScale, }: ScaleSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=scale-selector.d.ts.map

package/dist/esm/components/toolbar/scale-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/scale-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAeF,eAAO,MAAM,aAAa,GAAI,mDAM3B,kBAAkB,sBAgFpB,CAAC"}