@particle-academy/fancy-sheets 0.6.0 → 0.6.2

package/dist/index.cjs

@@ -1,13 +1,17 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var reactFancy = require('@particle-academy/react-fancy');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
 // src/components/Spreadsheet/Spreadsheet.tsx
-var SpreadsheetContext = react.createContext(null);
+var SpreadsheetContext = React.createContext(null);
 function useSpreadsheet() {
-  const ctx = react.useContext(SpreadsheetContext);
+  const ctx = React.useContext(SpreadsheetContext);
   if (!ctx) {
     throw new Error("useSpreadsheet must be used within a <Spreadsheet> component");
   }
@@ -1545,8 +1549,8 @@ function reducer(state, action) {
   }
 }
 function useSpreadsheetStore(initialData) {
-  const [state, dispatch] = react.useReducer(reducer, initialData, (data) => createInitialState(data));
-  const actions = react.useMemo(() => ({
+  const [state, dispatch] = React.useReducer(reducer, initialData, (data) => createInitialState(data));
+  const actions = React.useMemo(() => ({
     setCellValue: (address, value) => dispatch({ type: "SET_CELL_VALUE", address, value }),
     setCellFormat: (addresses, format) => dispatch({ type: "SET_CELL_FORMAT", addresses, format }),
     setSelection: (cell) => dispatch({ type: "SET_SELECTION", cell }),
@@ -1573,9 +1577,9 @@ function useSpreadsheetStore(initialData) {
 }
 function ColumnResizeHandle({ colIndex }) {
   const { resizeColumn, getColumnWidth } = useSpreadsheet();
-  const startX = react.useRef(0);
-  const startWidth = react.useRef(0);
-  const handlePointerDown = react.useCallback(
+  const startX = React.useRef(0);
+  const startWidth = React.useRef(0);
+  const handlePointerDown = React.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1608,7 +1612,7 @@ function ColumnResizeHandle({ colIndex }) {
 ColumnResizeHandle.displayName = "ColumnResizeHandle";
 function ColumnHeaders() {
   const { columnCount, rowCount, rowHeight, getColumnWidth, selection, selectRange, _isDragging } = useSpreadsheet();
-  const handleColumnMouseDown = react.useCallback(
+  const handleColumnMouseDown = React.useCallback(
     (colIdx, e) => {
       if (e.button !== 0) return;
       if (e.shiftKey) {
@@ -1623,7 +1627,7 @@ function ColumnHeaders() {
     },
     [rowCount, selectRange, selection.activeCell, _isDragging]
   );
-  const handleColumnMouseEnter = react.useCallback(
+  const handleColumnMouseEnter = React.useCallback(
     (colIdx) => {
       if (_isDragging.current) {
         const activeCol = parseAddress(selection.activeCell).col;
@@ -1634,7 +1638,7 @@ function ColumnHeaders() {
     },
     [rowCount, selection.activeCell, selectRange, _isDragging]
   );
-  const handleMouseUp = react.useCallback(() => {
+  const handleMouseUp = React.useCallback(() => {
     _isDragging.current = false;
   }, [_isDragging]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1696,7 +1700,7 @@ function RowHeader({ rowIndex }) {
     const maxCol = Math.max(s.col, e.col);
     return rowIndex >= minRow && rowIndex <= maxRow && minCol === 0 && maxCol >= columnCount - 1;
   });
-  const handleMouseDown = react.useCallback(
+  const handleMouseDown = React.useCallback(
     (e) => {
       if (e.button !== 0) return;
       if (e.shiftKey) {
@@ -1711,7 +1715,7 @@ function RowHeader({ rowIndex }) {
     },
     [rowIndex, columnCount, selectRange, selection.activeCell, _isDragging]
   );
-  const handleMouseEnter = react.useCallback(() => {
+  const handleMouseEnter = React.useCallback(() => {
     if (_isDragging.current) {
       const activeRow = parseAddress(selection.activeCell).row;
       const minRow = Math.min(activeRow, rowIndex);
@@ -1719,7 +1723,7 @@ function RowHeader({ rowIndex }) {
       selectRange(toAddress(minRow, 0), toAddress(maxRow, columnCount - 1));
     }
   }, [rowIndex, columnCount, selection.activeCell, selectRange, _isDragging]);
-  const handleMouseUp = react.useCallback(() => {
+  const handleMouseUp = React.useCallback(() => {
     _isDragging.current = false;
   }, [_isDragging]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1787,7 +1791,7 @@ function getCellDisplayValue2(cell) {
   const val = cell.formula && cell.computedValue !== void 0 ? cell.computedValue : cell.value;
   return formatCellValue(val, cell);
 }
-var Cell = react.memo(function Cell2({ address, row, col }) {
+var Cell = React.memo(function Cell2({ address, row, col }) {
   const {
     activeSheet,
     selection,
@@ -1809,7 +1813,7 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
   const isEditing = editingCell === address;
   const displayValue = getCellDisplayValue2(cell);
   const width = getColumnWidth(col);
-  const handleMouseDown = react.useCallback(
+  const handleMouseDown = React.useCallback(
     (e) => {
       if (e.button !== 0) return;
       if (e.shiftKey) {
@@ -1823,15 +1827,15 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
     },
     [address, setSelection, extendSelection, addSelection, _isDragging]
   );
-  const handleMouseEnter = react.useCallback(() => {
+  const handleMouseEnter = React.useCallback(() => {
     if (_isDragging.current) {
       extendSelection(address);
     }
   }, [address, extendSelection, _isDragging]);
-  const handleMouseUp = react.useCallback(() => {
+  const handleMouseUp = React.useCallback(() => {
     _isDragging.current = false;
   }, [_isDragging]);
-  const handleDoubleClick = react.useCallback(() => {
+  const handleDoubleClick = React.useCallback(() => {
     if (readOnly) return;
     startEdit();
   }, [readOnly, startEdit]);
@@ -1864,7 +1868,7 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
     formatStyle.borderWidth = 1;
     formatStyle.borderStyle = "solid";
   }
-  const [showComment, setShowComment] = react.useState(false);
+  const [showComment, setShowComment] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1927,15 +1931,15 @@ function CellEditor() {
     getColumnWidth,
     rowHeight
   } = useSpreadsheet();
-  const inputRef = react.useRef(null);
-  const mountedAt = react.useRef(0);
-  react.useEffect(() => {
+  const inputRef = React.useRef(null);
+  const mountedAt = React.useRef(0);
+  React.useEffect(() => {
     if (editingCell && inputRef.current) {
       mountedAt.current = Date.now();
       inputRef.current.focus();
     }
   }, [editingCell]);
-  const handleBlur = react.useCallback(() => {
+  const handleBlur = React.useCallback(() => {
     if (Date.now() - mountedAt.current < 100) return;
     confirmEdit();
   }, [confirmEdit]);
@@ -1971,7 +1975,7 @@ function CellEditor() {
 CellEditor.displayName = "CellEditor";
 function SelectionOverlay() {
   const { selection, getColumnWidth, rowHeight } = useSpreadsheet();
-  const rects = react.useMemo(() => {
+  const rects = React.useMemo(() => {
     return selection.ranges.map((range, i) => {
       const norm = normalizeRange(range.start, range.end);
       const s = parseAddress(norm.start);
@@ -2057,8 +2061,8 @@ function SpreadsheetGrid({ className }) {
     redo,
     contextMenuItems
   } = useSpreadsheet();
-  const containerRef = react.useRef(null);
-  const handleKeyDown = react.useCallback(
+  const containerRef = React.useRef(null);
+  const handleKeyDown = React.useCallback(
     (e) => {
       if (editingCell) return;
       if (e.key === "ArrowUp") {
@@ -2143,14 +2147,14 @@ function SpreadsheetGrid({ className }) {
     const top = row * rowHeight;
     return { left, top };
   })() : null;
-  const handleCopy = react.useCallback(() => {
+  const handleCopy = React.useCallback(() => {
     const range = selection.ranges[0];
     if (range) {
       const tsv = cellsToTSV(activeSheet.cells, range);
       navigator.clipboard.writeText(tsv);
     }
   }, [selection, activeSheet]);
-  const handlePaste = react.useCallback(() => {
+  const handlePaste = React.useCallback(() => {
     navigator.clipboard.readText().then((text) => {
       if (!text) return;
       const { values } = tsvToCells(text);
@@ -2162,7 +2166,7 @@ function SpreadsheetGrid({ className }) {
       }
     });
   }, [selection, setCellValue]);
-  const handleClearSelection = react.useCallback(() => {
+  const handleClearSelection = React.useCallback(() => {
     const range = selection.ranges[0];
     if (!range) return;
     const { start, end } = range;
@@ -2270,9 +2274,10 @@ function SpreadsheetGrid({ className }) {
   ] });
 }
 SpreadsheetGrid.displayName = "SpreadsheetGrid";
+var ALL_BUTTONS = ["undo", "bold", "align", "freeze", "format", "decimals", "formulaBar"];
 var btnClass = "inline-flex items-center justify-center rounded px-2 py-1 text-[12px] font-medium text-zinc-600 transition-colors hover:bg-zinc-100 disabled:opacity-40 dark:text-zinc-300 dark:hover:bg-zinc-800";
 var activeBtnClass = "bg-zinc-200 dark:bg-zinc-700";
-function DefaultToolbar({ extra }) {
+function DefaultToolbar({ extra, buttons }) {
   const {
     selection,
     activeSheet,
@@ -2322,105 +2327,97 @@ function DefaultToolbar({ extra }) {
     }
   };
   const formulaBarValue = editingCell ? editValue : cell?.formula ? "=" + cell.formula : cell?.value != null ? String(cell.value) : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 border-b border-zinc-200 px-1.5 py-1 dark:border-zinc-700", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: btnClass, onClick: undo, disabled: !canUndo || readOnly, title: "Undo (Ctrl+Z)", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1 4 1 10 7 10" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: btnClass, onClick: redo, disabled: !canRedo || readOnly, title: "Redo (Ctrl+Y)", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "23 4 23 10 17 10" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: reactFancy.cn(btnClass, isBold && activeBtnClass),
-          onClick: () => setCellFormat(selectedAddresses, { bold: !isBold }),
-          disabled: readOnly,
-          title: "Bold",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "B" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: reactFancy.cn(btnClass, isItalic && activeBtnClass),
-          onClick: () => setCellFormat(selectedAddresses, { italic: !isItalic }),
-          disabled: readOnly,
-          title: "Italic",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic", children: "I" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
-      ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: reactFancy.cn(btnClass, textAlign === align && activeBtnClass),
-          onClick: () => setCellFormat(selectedAddresses, { textAlign: align }),
-          disabled: readOnly,
-          title: `Align ${align}`,
-          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: align === "left" ? "3" : align === "center" ? "6" : "9", y1: "12", x2: align === "left" ? "15" : align === "center" ? "18" : "21", y2: "12" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
-          ] })
-        },
-        align
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: reactFancy.cn(btnClass, activeSheet.frozenRows > 0 && activeBtnClass),
-          onClick: () => {
-            if (activeSheet.frozenRows > 0) {
-              setFrozenRows(0);
-            } else {
-              const row = selection.activeCell.match(/\d+/);
-              setFrozenRows(row ? parseInt(row[0], 10) - 1 || 1 : 1);
-            }
-          },
-          disabled: readOnly,
-          title: activeSheet.frozenRows > 0 ? `Unfreeze rows (${activeSheet.frozenRows} frozen)` : "Freeze rows above current cell",
-          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "4", x2: "21", y2: "4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "14", x2: "21", y2: "14", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "19", x2: "21", y2: "19", strokeDasharray: "3 3" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: reactFancy.cn(btnClass, activeSheet.frozenCols > 0 && activeBtnClass),
-          onClick: () => {
-            if (activeSheet.frozenCols > 0) {
-              setFrozenCols(0);
-            } else {
-              const colMatch = selection.activeCell.match(/^([A-Z]+)/);
-              if (colMatch) {
-                const col = colMatch[1].split("").reduce((acc, ch) => acc * 26 + ch.charCodeAt(0) - 64, 0) - 1;
-                setFrozenCols(col || 1);
+  const divider = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" });
+  const groups = [];
+  if (buttons.has("undo")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: btnClass, onClick: undo, disabled: !canUndo || readOnly, title: "Undo (Ctrl+Z)", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "1 4 1 10 7 10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: btnClass, onClick: redo, disabled: !canRedo || readOnly, title: "Redo (Ctrl+Y)", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "23 4 23 10 17 10" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
+        ] }) })
+      ] }, "undo")
+    );
+  }
+  if (buttons.has("bold")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: reactFancy.cn(btnClass, isBold && activeBtnClass), onClick: () => setCellFormat(selectedAddresses, { bold: !isBold }), disabled: readOnly, title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "B" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: reactFancy.cn(btnClass, isItalic && activeBtnClass), onClick: () => setCellFormat(selectedAddresses, { italic: !isItalic }), disabled: readOnly, title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic", children: "I" }) })
+      ] }, "bold")
+    );
+  }
+  if (buttons.has("align")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.jsx("button", { className: reactFancy.cn(btnClass, textAlign === align && activeBtnClass), onClick: () => setCellFormat(selectedAddresses, { textAlign: align }), disabled: readOnly, title: `Align ${align}`, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: align === "left" ? "3" : align === "center" ? "6" : "9", y1: "12", x2: align === "left" ? "15" : align === "center" ? "18" : "21", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+      ] }) }, align)) }, "align")
+    );
+  }
+  if (buttons.has("freeze")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: reactFancy.cn(btnClass, activeSheet.frozenRows > 0 && activeBtnClass),
+            onClick: () => {
+              if (activeSheet.frozenRows > 0) {
+                setFrozenRows(0);
               } else {
-                setFrozenCols(1);
+                const row = selection.activeCell.match(/\d+/);
+                setFrozenRows(row ? parseInt(row[0], 10) - 1 || 1 : 1);
               }
-            }
-          },
-          disabled: readOnly,
-          title: activeSheet.frozenCols > 0 ? `Unfreeze columns (${activeSheet.frozenCols} frozen)` : "Freeze columns left of current cell",
-          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "3", x2: "4", y2: "21" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "3", x2: "14", y2: "21", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "3", x2: "19", y2: "21", strokeDasharray: "3 3" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+            },
+            disabled: readOnly,
+            title: activeSheet.frozenRows > 0 ? `Unfreeze rows (${activeSheet.frozenRows} frozen)` : "Freeze rows above current cell",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "4", x2: "21", y2: "4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "14", x2: "21", y2: "14", strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "19", x2: "21", y2: "19", strokeDasharray: "3 3" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: reactFancy.cn(btnClass, activeSheet.frozenCols > 0 && activeBtnClass),
+            onClick: () => {
+              if (activeSheet.frozenCols > 0) {
+                setFrozenCols(0);
+              } else {
+                const colMatch = selection.activeCell.match(/^([A-Z]+)/);
+                if (colMatch) {
+                  const col = colMatch[1].split("").reduce((acc, ch) => acc * 26 + ch.charCodeAt(0) - 64, 0) - 1;
+                  setFrozenCols(col || 1);
+                } else {
+                  setFrozenCols(1);
+                }
+              }
+            },
+            disabled: readOnly,
+            title: activeSheet.frozenCols > 0 ? `Unfreeze columns (${activeSheet.frozenCols} frozen)` : "Freeze columns left of current cell",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "3", x2: "4", y2: "21" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "3", x2: "14", y2: "21", strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "3", x2: "19", y2: "21", strokeDasharray: "3 3" })
+            ] })
+          }
+        )
+      ] }, "freeze")
+    );
+  }
+  if (buttons.has("format")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
           className: "h-6 rounded border border-zinc-200 bg-transparent px-1 text-[11px] text-zinc-600 outline-none hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600",
@@ -2438,39 +2435,32 @@ function DefaultToolbar({ extra }) {
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "datetime", children: "Date & Time" })
           ]
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          className: btnClass,
-          onClick: () => setCellFormat(selectedAddresses, { decimals: Math.max(0, currentDecimals - 1) }),
-          disabled: readOnly || currentDecimals <= 0,
-          title: `Decrease decimal places (currently ${currentDecimals})`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2190" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          className: btnClass,
-          onClick: () => setCellFormat(selectedAddresses, { decimals: currentDecimals + 1 }),
-          disabled: readOnly,
-          title: `Increase decimal places (currently ${currentDecimals})`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".00" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2192" })
-          ]
-        }
-      ),
-      extra && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
-        extra
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fancy-sheets-formula-bar": "", className: "flex items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700", children: [
+      ) }, "format")
+    );
+  }
+  if (buttons.has("decimals")) {
+    groups.push(
+      /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: btnClass, onClick: () => setCellFormat(selectedAddresses, { decimals: Math.max(0, currentDecimals - 1) }), disabled: readOnly || currentDecimals <= 0, title: `Decrease decimal places (currently ${currentDecimals})`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2190" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: btnClass, onClick: () => setCellFormat(selectedAddresses, { decimals: currentDecimals + 1 }), disabled: readOnly, title: `Increase decimal places (currently ${currentDecimals})`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px]", children: ".00" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2192" })
+        ] })
+      ] }, "decimals")
+    );
+  }
+  if (extra) {
+    groups.push(/* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: extra }, "extra"));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    groups.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 border-b border-zinc-200 px-1.5 py-1 dark:border-zinc-700", children: groups.map((group, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+      i > 0 && divider,
+      group
+    ] }, i)) }),
+    buttons.has("formulaBar") && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fancy-sheets-formula-bar": "", className: "flex items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-center text-[11px] font-medium text-zinc-500 dark:text-zinc-400", children: selection.activeCell }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2487,15 +2477,16 @@ function DefaultToolbar({ extra }) {
     ] })
   ] });
 }
-function SpreadsheetToolbar({ children, className, extra }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fancy-sheets-toolbar": "", className: reactFancy.cn("", className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbar, { extra }) });
+function SpreadsheetToolbar({ children, className, extra, buttons: buttonsProp }) {
+  const buttonsSet = new Set(buttonsProp ?? ALL_BUTTONS);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fancy-sheets-toolbar": "", className: reactFancy.cn("", className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbar, { extra, buttons: buttonsSet }) });
 }
 SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
 function SpreadsheetSheetTabs({ className }) {
   const { workbook, setActiveSheet, addSheet, renameSheet, deleteSheet, readOnly } = useSpreadsheet();
-  const [renamingId, setRenamingId] = react.useState(null);
-  const [renameValue, setRenameValue] = react.useState("");
-  const handleDoubleClick = react.useCallback(
+  const [renamingId, setRenamingId] = React.useState(null);
+  const [renameValue, setRenameValue] = React.useState("");
+  const handleDoubleClick = React.useCallback(
     (sheetId, name) => {
       if (readOnly) return;
       setRenamingId(sheetId);
@@ -2503,7 +2494,7 @@ function SpreadsheetSheetTabs({ className }) {
     },
     [readOnly]
   );
-  const handleRenameConfirm = react.useCallback(() => {
+  const handleRenameConfirm = React.useCallback(() => {
     if (renamingId && renameValue.trim()) {
       renameSheet(renamingId, renameValue.trim());
     }
@@ -2589,18 +2580,18 @@ function SpreadsheetRoot({
   contextMenuItems
 }) {
   const { state, actions } = useSpreadsheetStore(data ?? defaultData);
-  const onChangeRef = react.useRef(onChange);
-  const isExternalSync = react.useRef(false);
-  const prevDataRef = react.useRef(data);
+  const onChangeRef = React.useRef(onChange);
+  const isExternalSync = React.useRef(false);
+  const prevDataRef = React.useRef(data);
   onChangeRef.current = onChange;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (data && data !== prevDataRef.current && data !== state.workbook) {
       isExternalSync.current = true;
       actions.setWorkbook(data);
       prevDataRef.current = data;
     }
   }, [data]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isExternalSync.current) {
       isExternalSync.current = false;
       return;
@@ -2608,15 +2599,15 @@ function SpreadsheetRoot({
     prevDataRef.current = state.workbook;
     onChangeRef.current?.(state.workbook);
   }, [state.workbook]);
-  const activeSheet = react.useMemo(
+  const activeSheet = React.useMemo(
     () => state.workbook.sheets.find((s) => s.id === state.workbook.activeSheetId),
     [state.workbook]
   );
-  const getColumnWidth = react.useCallback(
+  const getColumnWidth = React.useCallback(
     (col) => activeSheet.columnWidths[col] ?? defaultColumnWidth,
     [activeSheet.columnWidths, defaultColumnWidth]
   );
-  const isCellSelected = react.useCallback(
+  const isCellSelected = React.useCallback(
     (address) => {
       const target = parseAddress(address);
       return state.selection.ranges.some((range) => {
@@ -2628,12 +2619,12 @@ function SpreadsheetRoot({
     },
     [state.selection.ranges]
   );
-  const isCellActive = react.useCallback(
+  const isCellActive = React.useCallback(
     (address) => state.selection.activeCell === address,
     [state.selection.activeCell]
   );
-  const isDraggingRef = react.useRef(false);
-  const ctx = react.useMemo(
+  const isDraggingRef = React.useRef(false);
+  const ctx = React.useMemo(
     () => ({
       workbook: state.workbook,
       activeSheet,
@@ -2672,11 +2663,11 @@ var Spreadsheet = Object.assign(SpreadsheetRoot, {
   SheetTabs: SpreadsheetSheetTabs
 });
 function Sheet({ data, onChange, contextMenuItems, ...props }) {
-  const workbook = react.useMemo(
+  const workbook = React.useMemo(
     () => data ? { sheets: [data], activeSheetId: data.id } : void 0,
     [data]
   );
-  const handleChange = react.useMemo(() => {
+  const handleChange = React.useMemo(() => {
     if (!onChange) return void 0;
     return (wb) => onChange(wb.sheets[0]);
   }, [onChange]);
@@ -2687,11 +2678,12 @@ function SheetWorkbook({
   hideToolbar = false,
   hideTabs = false,
   toolbarExtra,
+  toolbarButtons,
   contextMenuItems,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Spreadsheet, { ...props, contextMenuItems, children: [
-    !hideToolbar && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Toolbar, { extra: toolbarExtra }),
+    !hideToolbar && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Toolbar, { extra: toolbarExtra, buttons: toolbarButtons }),
     /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}),
     !hideTabs && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.SheetTabs, {})
   ] });