@ricsam/react-spreadsheets 0.0.13 → 0.0.15

package/dist/mjs/lib.mjs

@@ -1787,6 +1787,7 @@ var Spreadsheet = forwardRef(({
   "aria-describedby": ariaDescribedBy,
   cellData: controlledCellData,
   onCellDataChange,
+  onCellDataPatch,
   onCellDataChangeError,
   rowCount,
   columnCount,
@@ -1991,6 +1992,7 @@ var Spreadsheet = forwardRef(({
   }, [overlayPlaceholder, containerDivRef, viewport, gridDims, placeholderPos]);
   const effectsRefOb = {
     onCellDataChange,
+    onCellDataPatch,
     onCellDataChangeError,
     controlledCellData,
     parseValue,
@@ -2237,13 +2239,13 @@ var Spreadsheet = forwardRef(({
     return selectionManager.listenToUpdateData((updates) => {
       const editingState = selectionManager.isEditing;
       try {
-        const { cellData, onCellDataChange } = effectsRef.current;
-        const newData = new Map(cellData);
+        const { cellData, onCellDataChange, onCellDataPatch, controlledCellData } = effectsRef.current;
+        const patch = new Map;
         updates.forEach(({ value, rowIndex, colIndex }) => {
           const key = `${indexToColumn(colIndex)}${rowIndex + 1}`;
           const parseValue = effectsRef.current.parseValue;
           if (value === "") {
-            newData.delete(key);
+            patch.set(key, undefined);
           } else {
             let parsedValue = value;
             if (parseValue && typeof value === "string") {
@@ -2263,10 +2265,23 @@ var Spreadsheet = forwardRef(({
                 });
               }
             }
-            newData.set(key, parsedValue);
+            patch.set(key, parsedValue);
           }
         });
-        onCellDataChange?.(newData);
+        if (onCellDataPatch) {
+          onCellDataPatch(patch);
+          if (controlledCellData !== undefined)
+            return;
+        }
+        const newData = new Map(cellData);
+        patch.forEach((value, key) => {
+          if (value === undefined)
+            newData.delete(key);
+          else
+            newData.set(key, value);
+        });
+        if (!onCellDataPatch)
+          onCellDataChange?.(newData);
         setInternalCellData(newData);
       } catch (error) {
         console.error("Failed to update spreadsheet cell data:", error);
@@ -3145,12 +3160,370 @@ import {
   parseCellReference as parseCellReference2,
   getCellReference as getCellReference2
 } from "@ricsam/formula-engine";
-import React3, { useCallback as useCallback4, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
+import React4, { useCallback as useCallback4, useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
+
+// src/workbook/sheet-navigation.tsx
+import { useEffect as useEffect4, useId as useId2, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SheetNavigation({
+  sheets,
+  activeSheet,
+  workbookName,
+  panelId,
+  onSelect,
+  onAdd,
+  onRename,
+  onDelete,
+  children
+}) {
+  const id = useId2();
+  const root = useRef4(null);
+  const menuButton = useRef4(null);
+  const menu = useRef4(null);
+  const input = useRef4(null);
+  const [menuOpen, setMenuOpen] = useState5(false);
+  const [renaming, setRenaming] = useState5(null);
+  const [name, setName] = useState5("");
+  const [error, setError] = useState5("");
+  const [notice, setNotice] = useState5("");
+  const selected = sheets.includes(activeSheet) ? activeSheet : sheets[0];
+  const focusTab = (sheet = selected) => {
+    const tabs = root.current?.querySelectorAll('[role="tab"]');
+    tabs?.[sheets.indexOf(sheet ?? "")]?.focus();
+  };
+  useEffect4(() => {
+    const tab = root.current?.querySelector('[aria-selected="true"]');
+    const strip = tab?.parentElement;
+    if (!tab || !strip)
+      return;
+    const bounds = strip.getBoundingClientRect();
+    const target = tab.getBoundingClientRect();
+    if (target.left < bounds.left)
+      strip.scrollLeft -= bounds.left - target.left;
+    else if (target.right > bounds.right)
+      strip.scrollLeft += target.right - bounds.right;
+  }, [activeSheet, sheets.join("\x00")]);
+  useEffect4(() => {
+    if (renaming) {
+      input.current?.focus();
+      input.current?.select();
+    }
+  }, [renaming]);
+  useEffect4(() => {
+    if (!menuOpen)
+      return;
+    menu.current?.querySelector("button")?.focus();
+    const outside = (event) => {
+      if (!root.current?.contains(event.target))
+        setMenuOpen(false);
+    };
+    document.addEventListener("pointerdown", outside);
+    return () => document.removeEventListener("pointerdown", outside);
+  }, [menuOpen]);
+  useEffect4(() => {
+    setMenuOpen(false);
+    setRenaming(null);
+    setError("");
+  }, [workbookName]);
+  useEffect4(() => {
+    if (renaming && !sheets.includes(renaming)) {
+      setRenaming(null);
+      setError("");
+    }
+  }, [renaming, sheets.join("\x00")]);
+  const run = (action) => {
+    try {
+      action();
+      setError("");
+      return true;
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Unable to update this sheet. Please try again.");
+      return false;
+    }
+  };
+  const startRename = (sheet) => {
+    setMenuOpen(false);
+    setError("");
+    setRenaming(sheet);
+    setName(sheet);
+  };
+  const cancelRename = () => {
+    setRenaming(null);
+    setError("");
+    focusTab();
+  };
+  const saveRename = (event) => {
+    event.preventDefault();
+    if (!renaming)
+      return;
+    const next = name.trim();
+    if (!next) {
+      setError("Enter a sheet name.");
+      input.current?.focus();
+      return;
+    }
+    if (sheets.some((sheet) => sheet !== renaming && sheet.toLocaleLowerCase() === next.toLocaleLowerCase())) {
+      setError("A sheet with this name already exists. Choose a different name.");
+      input.current?.focus();
+      return;
+    }
+    if (run(() => {
+      if (next !== renaming)
+        onRename(renaming, next);
+    })) {
+      setRenaming(null);
+      setNotice(`Sheet renamed to ${next}.`);
+      menuButton.current?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", {
+    ref: root,
+    className: "rsp-sheet-navigation",
+    onKeyDown: (event) => event.stopPropagation(),
+    children: [
+      /* @__PURE__ */ jsx4("span", {
+        className: "rsp-sr-only",
+        role: "status",
+        children: notice
+      }),
+      renaming && /* @__PURE__ */ jsxs3("form", {
+        className: "rsp-sheet-rename",
+        onSubmit: saveRename,
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            cancelRename();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx4("label", {
+            htmlFor: `${id}-name`,
+            children: "Sheet name"
+          }),
+          /* @__PURE__ */ jsx4("input", {
+            ref: input,
+            id: `${id}-name`,
+            className: "rsp-sheet-tab-input",
+            value: name,
+            onChange: (event) => {
+              setName(event.target.value);
+              setError("");
+            },
+            "aria-invalid": !!error,
+            "aria-describedby": error ? `${id}-error` : undefined,
+            "data-testid": `rename-sheet-input-${renaming}`
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            type: "submit",
+            className: "rsp-sheet-action",
+            children: "Save"
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            className: "rsp-sheet-action",
+            onClick: cancelRename,
+            children: "Cancel"
+          })
+        ]
+      }),
+      error && /* @__PURE__ */ jsx4("div", {
+        id: `${id}-error`,
+        className: "rsp-sheet-error",
+        role: "alert",
+        children: error
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: "rsp-sheet-tabs",
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: "rsp-sheet-tabs-scroll",
+            role: "tablist",
+            "aria-label": `${workbookName} sheets`,
+            children: sheets.map((sheet, index) => /* @__PURE__ */ jsx4("button", {
+              type: "button",
+              role: "tab",
+              className: `rsp-sheet-tab${activeSheet === sheet ? " rsp-sheet-tab-active" : ""}`,
+              "aria-controls": panelId,
+              "aria-selected": activeSheet === sheet,
+              tabIndex: sheet === selected ? 0 : -1,
+              title: sheet,
+              "data-testid": `sheet-tab-${sheet}`,
+              onClick: () => {
+                setMenuOpen(false);
+                onSelect(sheet);
+              },
+              onDoubleClick: () => startRename(sheet),
+              onKeyDown: (event) => {
+                const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                let next;
+                if (event.key === "ArrowRight")
+                  next = (index + (rtl ? -1 : 1) + sheets.length) % sheets.length;
+                if (event.key === "ArrowLeft")
+                  next = (index + (rtl ? 1 : -1) + sheets.length) % sheets.length;
+                if (event.key === "Home")
+                  next = 0;
+                if (event.key === "End")
+                  next = sheets.length - 1;
+                if (next !== undefined) {
+                  event.preventDefault();
+                  onSelect(sheets[next]);
+                  focusTab(sheets[next]);
+                }
+                if (event.key === "F2") {
+                  event.preventDefault();
+                  startRename(sheet);
+                }
+              },
+              children: /* @__PURE__ */ jsx4("span", {
+                children: sheet
+              })
+            }, sheet))
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            className: "rsp-add-sheet-button",
+            title: "Add Sheet",
+            "aria-label": "Add Sheet",
+            "data-testid": `add-sheet-${workbookName}`,
+            onClick: () => {
+              setMenuOpen(false);
+              run(onAdd);
+            },
+            children: /* @__PURE__ */ jsx4("svg", {
+              "aria-hidden": "true",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              children: /* @__PURE__ */ jsx4("path", {
+                d: "M12 5v14M5 12h14"
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            ref: menuButton,
+            type: "button",
+            className: "rsp-icon-button rsp-sheet-menu-trigger",
+            title: "Sheet actions",
+            "aria-label": selected ? `Sheet actions for ${selected}` : "Sheet actions",
+            disabled: !selected,
+            "aria-haspopup": "menu",
+            "aria-expanded": menuOpen,
+            "aria-controls": menuOpen ? `${id}-menu` : undefined,
+            onClick: () => setMenuOpen((open) => !open),
+            onKeyDown: (event) => {
+              if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setMenuOpen(true);
+              }
+            },
+            children: /* @__PURE__ */ jsxs3("svg", {
+              "aria-hidden": "true",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              children: [
+                /* @__PURE__ */ jsx4("circle", {
+                  cx: "5",
+                  cy: "12",
+                  r: "2"
+                }),
+                /* @__PURE__ */ jsx4("circle", {
+                  cx: "12",
+                  cy: "12",
+                  r: "2"
+                }),
+                /* @__PURE__ */ jsx4("circle", {
+                  cx: "19",
+                  cy: "12",
+                  r: "2"
+                })
+              ]
+            })
+          }),
+          children
+        ]
+      }),
+      menuOpen && selected && /* @__PURE__ */ jsxs3("div", {
+        ref: menu,
+        id: `${id}-menu`,
+        role: "menu",
+        "aria-label": `Actions for ${selected}`,
+        className: "rsp-sheet-menu",
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget) && event.relatedTarget !== menuButton.current)
+            setMenuOpen(false);
+        },
+        onKeyDown: (event) => {
+          const items = Array.from(menu.current?.querySelectorAll("button") ?? []);
+          const index = items.indexOf(document.activeElement);
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+            items[next]?.focus();
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setMenuOpen(false);
+            menuButton.current?.focus();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: "rsp-sheet-menu-name",
+            title: selected,
+            children: selected
+          }),
+          /* @__PURE__ */ jsxs3("button", {
+            type: "button",
+            role: "menuitem",
+            onClick: () => startRename(selected),
+            "data-testid": `rename-sheet-${selected}`,
+            children: [
+              "Rename sheet ",
+              /* @__PURE__ */ jsx4("span", {
+                "aria-hidden": "true",
+                children: "F2"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            role: "menuitem",
+            "aria-disabled": sheets.length <= 1,
+            className: "rsp-sheet-delete",
+            "data-testid": `delete-sheet-${selected}`,
+            onClick: () => {
+              if (sheets.length <= 1)
+                return;
+              if (window.confirm(`Delete sheet "${selected}" and its contents?`)) {
+                if (run(() => onDelete(selected))) {
+                  setMenuOpen(false);
+                  setNotice(`Sheet ${selected} deleted.`);
+                  menuButton.current?.focus();
+                }
+              }
+            },
+            children: "Delete sheet"
+          }),
+          sheets.length <= 1 && /* @__PURE__ */ jsx4("div", {
+            className: "rsp-sheet-menu-hint",
+            children: "Keep at least one sheet."
+          })
+        ]
+      })
+    ]
+  });
+}
 
 // src/utils/use-scheme-root.ts
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 function useSchemeRoot() {
-  const [element, setElement] = useState5(null);
+  const [element, setElement] = useState6(null);
   const scheme = useColorScheme(element);
   return { ref: setElement, "data-rsp-scheme": scheme };
 }
@@ -3531,7 +3904,7 @@ class WorkbookSelectionManager {
 }
 
 // src/workbook/workbook.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var getWrapCellStyle = (style) => style?.wrapText ? {
   whiteSpace: "pre-wrap",
   overflowWrap: "anywhere",
@@ -3562,64 +3935,7 @@ var getBorderCellStyle = (style) => (() => {
     ...borderSides.left && { borderLeftColor: style.borderColor }
   };
 })();
-var Edit2Icon = ({ className = "", ...props }) => /* @__PURE__ */ jsxs3("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  className,
-  ...props,
-  children: [
-    /* @__PURE__ */ jsx4("path", {
-      d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"
-    }),
-    /* @__PURE__ */ jsx4("path", {
-      d: "m15 5 4 4"
-    })
-  ]
-});
-var Trash2Icon = ({ className = "", ...props }) => /* @__PURE__ */ jsxs3("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  className,
-  ...props,
-  children: [
-    /* @__PURE__ */ jsx4("path", {
-      d: "M3 6h18"
-    }),
-    /* @__PURE__ */ jsx4("path", {
-      d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-    }),
-    /* @__PURE__ */ jsx4("path", {
-      d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-    }),
-    /* @__PURE__ */ jsx4("line", {
-      x1: "10",
-      x2: "10",
-      y1: "11",
-      y2: "17"
-    }),
-    /* @__PURE__ */ jsx4("line", {
-      x1: "14",
-      x2: "14",
-      y1: "11",
-      y2: "17"
-    })
-  ]
-});
-var PlusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsxs3("svg", {
+var PlusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsxs4("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -3632,15 +3948,15 @@ var PlusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsxs3("svg", {
   className,
   ...props,
   children: [
-    /* @__PURE__ */ jsx4("path", {
+    /* @__PURE__ */ jsx5("path", {
       d: "M5 12h14"
     }),
-    /* @__PURE__ */ jsx4("path", {
+    /* @__PURE__ */ jsx5("path", {
       d: "M12 5v14"
     })
   ]
 });
-var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx4("svg", {
+var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx5("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -3652,13 +3968,13 @@ var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx4("svg", {
   strokeLinejoin: "round",
   className,
   ...props,
-  children: /* @__PURE__ */ jsx4("path", {
+  children: /* @__PURE__ */ jsx5("path", {
     d: "M5 12h14"
   })
 });
 function useEngine(engine) {
-  const [state, setState] = useState6(() => engine.getState());
-  React3.useEffect(() => {
+  const [state, setState] = useState7(() => engine.getState());
+  React4.useEffect(() => {
     return engine.onUpdate(() => {
       setState(engine.getState());
     });
@@ -3764,8 +4080,8 @@ function FormulaSheet({
   ...rest
 }) {
   const schemeRoot = useSchemeRoot();
-  const [selectedArea, setSelectedArea] = useState6(null);
-  const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const [selectedArea, setSelectedArea] = useState7(null);
+  const clipboardManager = React4.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const state = useEngine(engine);
   const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
   const getEngineTableAt = useCallback4((cell) => {
@@ -3804,20 +4120,14 @@ function FormulaSheet({
     ...selection?.navigation,
     getTableAt: selection?.navigation?.getTableAt ?? getEngineTableAt
   }), [getEngineTableAt, selection?.navigation]);
-  const onCellDataChange = useCallback4((updatedSpreadsheet) => {
-    const data = new Map(updatedSpreadsheet);
-    data.forEach((value, key) => {
-      if (typeof value === "string") {
+  const onCellDataPatch = useCallback4((patch) => {
+    engine.transact(() => {
+      patch.forEach((value, key) => {
         const { colIndex, rowIndex } = parseCellReference2(key);
-        const coercedValue = coerceCellInput(value, engine.getCellDataType({ workbookName, sheetName, colIndex, rowIndex }));
-        if (coercedValue === undefined) {
-          data.delete(key);
-        } else {
-          data.set(key, coercedValue);
-        }
-      }
+        const address = { workbookName, sheetName, colIndex, rowIndex };
+        engine.setCellContent(address, typeof value === "string" ? coerceCellInput(value, engine.getCellDataType(address)) : value);
+      });
     });
-    engine.setSheetContent({ sheetName, workbookName }, data);
   }, [sheetName, engine, workbookName]);
   const passedSelectionEffects = selection?.effects;
   const selectionManagerEffects = useCallback4((spreadsheetSelectionManager) => {
@@ -3944,30 +4254,210 @@ function FormulaSheet({
     viewId,
     workbookName
   ]);
+  const renderCallbacks = useMemo2(() => {
+    const metadata = engine.getWorkbookMetadata(workbookName);
+    const defaults = metadata?.defaultCellStyle;
+    const fontStyle = (style) => ({
+      ...style?.fontFamily && { fontFamily: style.fontFamily },
+      ...style?.bold !== undefined && { fontWeight: style.bold ? "bold" : "normal" },
+      ...style?.italic !== undefined && { fontStyle: style.italic ? "italic" : "normal" },
+      ...style?.underline !== undefined && { textDecoration: style.underline ? "underline" : "none" }
+    });
+    const styles = new Map;
+    const getStyle = (cell) => {
+      if (styles.has(cell.id))
+        return styles.get(cell.id);
+      const explicit = engine.getCellStyle({
+        sheetName,
+        workbookName,
+        colIndex: cell.colIndex,
+        rowIndex: cell.rowIndex
+      });
+      const style = defaults ? { ...defaults, ...explicit } : explicit;
+      if (styles.size >= 4096)
+        styles.clear();
+      styles.set(cell.id, style);
+      return style;
+    };
+    return {
+      customCellStyle: (cell) => {
+        const conditionalStyle = getStyle(cell);
+        const tableInfo = engine.isCellInTable({
+          sheetName,
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex,
+          workbookName
+        });
+        if (!tableInfo) {
+          const style = conditionalStyle ? {
+            ...conditionalStyle.backgroundColor && {
+              backgroundColor: conditionalStyle.backgroundColor
+            },
+            ...conditionalStyle.color && {
+              color: conditionalStyle.color
+            },
+            ...conditionalStyle.fontSize && {
+              fontSize: conditionalStyle.fontSize
+            },
+            ...fontStyle(conditionalStyle),
+            ...getBorderCellStyle(conditionalStyle),
+            ...getWrapCellStyle(conditionalStyle)
+          } : {};
+          return customCellStyle ? customCellStyle(cell, style) : style;
+        }
+        const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
+        const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
+        const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
+        const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
+        const style = {
+          border: "1px solid var(--_rsp-table-border-light)"
+        };
+        if (isHeaderRow) {
+          style.backgroundColor = "var(--_rsp-table-header-bg)";
+          style.color = "var(--_rsp-table-header-color)";
+          style.fontWeight = "bold";
+          style.borderBottom = "2px solid var(--_rsp-table-header-border)";
+        } else {
+          const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
+          if (dataRowIndex % 2 === 0) {
+            style.backgroundColor = "var(--_rsp-table-even-row-bg)";
+          } else {
+            style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
+          }
+        }
+        if (isFirstColumn) {
+          style.borderLeft = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isLastColumn) {
+          style.borderRight = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isHeaderRow) {
+          style.borderTop = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isLastRow) {
+          style.borderBottom = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (conditionalStyle?.backgroundColor) {
+          style.backgroundColor = conditionalStyle.backgroundColor;
+        }
+        if (conditionalStyle?.color) {
+          style.color = conditionalStyle.color;
+        }
+        if (conditionalStyle?.fontSize) {
+          style.fontSize = conditionalStyle.fontSize;
+        }
+        Object.assign(style, fontStyle(conditionalStyle));
+        Object.assign(style, getBorderCellStyle(conditionalStyle));
+        Object.assign(style, getWrapCellStyle(conditionalStyle));
+        if (customCellStyle) {
+          return customCellStyle(cell, style);
+        }
+        return style;
+      },
+      customCellRenderer: (cell) => {
+        const cellRef = getCellReference2({
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex
+        });
+        const value = showFormulas ? sheet?.content.get(cellRef) : engine.getCellValue({
+          sheetName,
+          workbookName,
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex
+        }, verboseErrors);
+        const conditionalStyle = getStyle(cell);
+        const conditionalStyleProps = {};
+        if (conditionalStyle?.backgroundColor) {
+          conditionalStyleProps.backgroundColor = conditionalStyle.backgroundColor;
+        }
+        if (conditionalStyle?.color) {
+          conditionalStyleProps.color = conditionalStyle.color;
+        }
+        if (conditionalStyle?.fontSize) {
+          conditionalStyleProps.fontSize = conditionalStyle.fontSize;
+        }
+        Object.assign(conditionalStyleProps, fontStyle(conditionalStyle), getWrapContentStyle(conditionalStyle));
+        let defaultElement;
+        if (showFormulas) {
+          defaultElement = /* @__PURE__ */ jsx5("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            style: conditionalStyleProps,
+            children: getCellDisplayText(value)
+          });
+        } else if (typeof value === "boolean") {
+          defaultElement = /* @__PURE__ */ jsx5("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            "data-type": "boolean",
+            style: {
+              ...conditionalStyleProps,
+              width: "100%",
+              textAlign: "center",
+              fontFamily: conditionalStyle?.fontFamily ?? "'Courier New', monospace"
+            },
+            children: value ? "TRUE" : "FALSE"
+          });
+        } else if (typeof value === "number") {
+          defaultElement = /* @__PURE__ */ jsx5("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            "data-type": "number",
+            style: { ...conditionalStyleProps, width: "100%", textAlign: "right" },
+            children: value.toLocaleString("en-US", {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 10
+            })
+          });
+        } else {
+          defaultElement = /* @__PURE__ */ jsx5("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            style: { ...conditionalStyleProps, width: "100%", textAlign: "left" },
+            children: getCellDisplayText(value)
+          });
+        }
+        if (customCellRenderer) {
+          return customCellRenderer(cell, defaultElement);
+        }
+        return defaultElement;
+      }
+    };
+  }, [
+    engine,
+    state,
+    workbookName,
+    sheetName,
+    sheet,
+    showFormulas,
+    verboseErrors,
+    customCellStyle,
+    customCellRenderer
+  ]);
   if (!sheet) {
-    return /* @__PURE__ */ jsxs3("div", {
+    return /* @__PURE__ */ jsxs4("div", {
       className: "rsp-root rsp-workbook",
       ...schemeRoot,
       children: [
         toolbar,
-        /* @__PURE__ */ jsx4("div", {
+        /* @__PURE__ */ jsx5("div", {
           style: { flex: 1 }
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "rsp-root rsp-workbook",
     ...schemeRoot,
     children: [
       toolbar,
-      /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx5("div", {
         className: "rsp-workbook-body",
-        children: /* @__PURE__ */ jsx4(Spreadsheet, {
+        children: /* @__PURE__ */ jsx5(Spreadsheet, {
           disableClipboard: true,
           style: { height: "100%", width: "100%" },
           cellData: sheet?.content,
-          onCellDataChange,
+          onCellDataPatch,
           onCellDataChangeError,
           ...rest,
           components,
@@ -3985,183 +4475,7 @@ function FormulaSheet({
           containerProps: isSelected && selectedArea ? {
             "data-grid-no-interaction": "true"
           } : {},
-          customCellStyle: (cell) => {
-            const conditionalStyle = engine.getCellStyle({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            const tableInfo = engine.isCellInTable({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            if (!tableInfo) {
-              const style = conditionalStyle ? {
-                ...conditionalStyle.backgroundColor && {
-                  backgroundColor: conditionalStyle.backgroundColor
-                },
-                ...conditionalStyle.color && {
-                  color: conditionalStyle.color
-                },
-                ...conditionalStyle.fontSize && {
-                  fontSize: conditionalStyle.fontSize
-                },
-                ...conditionalStyle.bold && {
-                  fontWeight: "bold"
-                },
-                ...conditionalStyle.italic && {
-                  fontStyle: "italic"
-                },
-                ...conditionalStyle.underline && {
-                  textDecoration: "underline"
-                },
-                ...getBorderCellStyle(conditionalStyle),
-                ...getWrapCellStyle(conditionalStyle)
-              } : {};
-              return customCellStyle ? customCellStyle(cell, style) : style;
-            }
-            const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
-            const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
-            const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
-            const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
-            const style = {
-              border: "1px solid var(--_rsp-table-border-light)"
-            };
-            if (isHeaderRow) {
-              style.backgroundColor = "var(--_rsp-table-header-bg)";
-              style.color = "var(--_rsp-table-header-color)";
-              style.fontWeight = "bold";
-              style.borderBottom = "2px solid var(--_rsp-table-header-border)";
-            } else {
-              const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
-              if (dataRowIndex % 2 === 0) {
-                style.backgroundColor = "var(--_rsp-table-even-row-bg)";
-              } else {
-                style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
-              }
-            }
-            if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isLastColumn) {
-              style.borderRight = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isHeaderRow) {
-              style.borderTop = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isLastRow) {
-              style.borderBottom = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (conditionalStyle?.backgroundColor) {
-              style.backgroundColor = conditionalStyle.backgroundColor;
-            }
-            if (conditionalStyle?.color) {
-              style.color = conditionalStyle.color;
-            }
-            if (conditionalStyle?.fontSize) {
-              style.fontSize = conditionalStyle.fontSize;
-            }
-            if (conditionalStyle?.bold) {
-              style.fontWeight = "bold";
-            }
-            if (conditionalStyle?.italic) {
-              style.fontStyle = "italic";
-            }
-            if (conditionalStyle?.underline) {
-              style.textDecoration = "underline";
-            }
-            Object.assign(style, getBorderCellStyle(conditionalStyle));
-            Object.assign(style, getWrapCellStyle(conditionalStyle));
-            if (customCellStyle) {
-              return customCellStyle(cell, style);
-            }
-            return style;
-          },
-          customCellRenderer: (cell) => {
-            const cellRef = getCellReference2({
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex
-            });
-            const value = showFormulas ? sheet?.content.get(cellRef) : engine.getCellValue({
-              sheetName,
-              workbookName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex
-            }, verboseErrors);
-            const conditionalStyle = engine.getCellStyle({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            const conditionalStyleProps = {};
-            if (conditionalStyle?.backgroundColor) {
-              conditionalStyleProps.backgroundColor = conditionalStyle.backgroundColor;
-            }
-            if (conditionalStyle?.color) {
-              conditionalStyleProps.color = conditionalStyle.color;
-            }
-            if (conditionalStyle?.fontSize) {
-              conditionalStyleProps.fontSize = conditionalStyle.fontSize;
-            }
-            if (conditionalStyle?.bold) {
-              conditionalStyleProps.fontWeight = "bold";
-            }
-            if (conditionalStyle?.italic) {
-              conditionalStyleProps.fontStyle = "italic";
-            }
-            if (conditionalStyle?.underline) {
-              conditionalStyleProps.textDecoration = "underline";
-            }
-            Object.assign(conditionalStyleProps, getWrapContentStyle(conditionalStyle));
-            let defaultElement;
-            if (showFormulas) {
-              defaultElement = /* @__PURE__ */ jsx4("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                style: conditionalStyleProps,
-                children: getCellDisplayText(value)
-              });
-            } else if (typeof value === "boolean") {
-              defaultElement = /* @__PURE__ */ jsx4("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                "data-type": "boolean",
-                style: {
-                  ...conditionalStyleProps,
-                  width: "100%",
-                  textAlign: "center",
-                  fontFamily: "'Courier New', monospace"
-                },
-                children: value ? "TRUE" : "FALSE"
-              });
-            } else if (typeof value === "number") {
-              defaultElement = /* @__PURE__ */ jsx4("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                "data-type": "number",
-                style: { ...conditionalStyleProps, width: "100%", textAlign: "right" },
-                children: value.toLocaleString("en-US", {
-                  minimumFractionDigits: 0,
-                  maximumFractionDigits: 10
-                })
-              });
-            } else {
-              defaultElement = /* @__PURE__ */ jsx4("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                style: { ...conditionalStyleProps, width: "100%", textAlign: "left" },
-                children: getCellDisplayText(value)
-              });
-            }
-            if (customCellRenderer) {
-              return customCellRenderer(cell, defaultElement);
-            }
-            return defaultElement;
-          }
+          ...renderCallbacks
         })
       })
     ]
@@ -4191,18 +4505,16 @@ function FormulaWorkbook({
   ...rest
 }) {
   const schemeRoot = useSchemeRoot();
-  const state = useEngine(engine);
-  const [renamingSheet, setRenamingSheet] = useState6(null);
-  const [newSheetName, setNewSheetName] = useState6("");
-  const [spreadsheetZoom, setSpreadsheetZoom] = useState6(1);
-  const renameCommittedRef = useRef4(false);
-  const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  useEngine(engine);
+  const panelId = React4.useId();
+  const [spreadsheetZoom, setSpreadsheetZoom] = useState7(1);
+  const clipboardManager = React4.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const sheetNames = engine.getOrderedSheetNames(workbookName);
-  const [internalActiveSheet, setInternalActiveSheet] = useState6(() => {
+  const [internalActiveSheet, setInternalActiveSheet] = useState7(() => {
     return sheetNames[0] || "";
   });
-  const isControlledRef = useRef4(controlledActiveSheet !== undefined);
-  React3.useEffect(() => {
+  const isControlledRef = useRef5(controlledActiveSheet !== undefined);
+  React4.useEffect(() => {
     const isCurrentlyControlled = controlledActiveSheet !== undefined;
     if (isControlledRef.current !== isCurrentlyControlled) {
       console.error(`FormulaWorkbook: Component changed from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isCurrentlyControlled ? "controlled" : "uncontrolled"} mode. ` + `A component should not switch between controlled and uncontrolled modes. ` + `Decide between using activeSheet and onActiveSheetChange props (controlled) or neither (uncontrolled) for the lifetime of the component.`);
@@ -4213,10 +4525,10 @@ function FormulaWorkbook({
   const handleActiveSheetChange = useCallback4((sheetName) => {
     if (onActiveSheetChange) {
       onActiveSheetChange(sheetName);
-    } else {
-      setInternalActiveSheet(sheetName);
     }
-  }, [onActiveSheetChange]);
+    if (controlledActiveSheet === undefined)
+      setInternalActiveSheet(sheetName);
+  }, [onActiveSheetChange, controlledActiveSheet]);
   const activeSheetOverlayChildren = sheetOverlayChildren?.[activeSheet];
   const activeSheetSelectedOverlayId = sheetSelectedOverlayIds?.[activeSheet];
   const activeSheetColumnWidths = sheetLayouts?.[activeSheet]?.columnWidths;
@@ -4234,76 +4546,37 @@ function FormulaWorkbook({
     onSheetRowHeightsChange?.(activeSheet, rowHeights);
   }, [activeSheet, onSheetRowHeightsChange]);
   const addSheet = () => {
-    try {
-      const newSheet = engine.createSheet({
-        workbookName
-      });
-      handleActiveSheetChange(newSheet.name);
-    } catch (error) {
-      console.error("Failed to add sheet:", error);
-    }
-  };
-  const startRenaming = (sheetName) => {
-    renameCommittedRef.current = false;
-    setRenamingSheet(sheetName);
-    setNewSheetName(sheetName);
-  };
-  const cancelRenaming = () => {
-    setRenamingSheet(null);
-    setNewSheetName("");
+    const newSheet = engine.createSheet({ workbookName });
+    handleActiveSheetChange(newSheet.name);
   };
   const renameSheet = (oldName, newName) => {
-    if (renameCommittedRef.current) {
-      cancelRenaming();
-      return;
-    }
-    if (!newName.trim() || newName.trim() === oldName) {
-      cancelRenaming();
-      return;
-    }
-    try {
-      renameCommittedRef.current = true;
-      engine.renameSheet({
-        workbookName,
-        sheetName: oldName,
-        newSheetName: newName.trim()
-      });
-      if (activeSheet === oldName) {
-        handleActiveSheetChange(newName.trim());
-      }
-      cancelRenaming();
-    } catch (error) {
-      console.error("Failed to rename sheet:", error);
-      cancelRenaming();
-    }
+    engine.renameSheet({ workbookName, sheetName: oldName, newSheetName: newName });
+    if (activeSheet === oldName)
+      handleActiveSheetChange(newName);
   };
   const deleteSheet = (sheetName) => {
     if (sheetNames.length <= 1) {
       console.error("Cannot delete the last sheet");
       return;
     }
-    try {
-      engine.removeSheet({ workbookName, sheetName });
-      if (activeSheet === sheetName) {
-        const remainingSheets = sheetNames.filter((name) => name !== sheetName);
-        const nextSheet = remainingSheets[0];
-        if (nextSheet) {
-          handleActiveSheetChange(nextSheet);
-        }
+    engine.removeSheet({ workbookName, sheetName });
+    if (activeSheet === sheetName) {
+      const remainingSheets = sheetNames.filter((name) => name !== sheetName);
+      const nextSheet = remainingSheets[Math.min(sheetNames.indexOf(sheetName), remainingSheets.length - 1)];
+      if (nextSheet) {
+        handleActiveSheetChange(nextSheet);
       }
-    } catch (error) {
-      console.error("Failed to delete sheet:", error);
     }
   };
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "rsp-root rsp-workbook",
     ...schemeRoot,
     children: [
       toolbar,
-      /* @__PURE__ */ jsxs3("div", {
+      /* @__PURE__ */ jsxs4("div", {
         className: "rsp-workbook-header",
         children: [
-          /* @__PURE__ */ jsx4("div", {
+          /* @__PURE__ */ jsx5("div", {
             style: {
               display: "flex",
               alignItems: "center",
@@ -4312,13 +4585,13 @@ function FormulaWorkbook({
               overflow: "hidden",
               textOverflow: "ellipsis"
             },
-            children: /* @__PURE__ */ jsx4("span", {
+            children: /* @__PURE__ */ jsx5("span", {
               className: "rsp-workbook-name",
               "data-testid": `workbook-name-${workbookName}`,
               children: workbookName
             })
           }),
-          /* @__PURE__ */ jsxs3("span", {
+          /* @__PURE__ */ jsxs4("span", {
             className: "rsp-zoom-value",
             "data-testid": `sheet-count-${workbookName}`,
             children: [
@@ -4328,16 +4601,19 @@ function FormulaWorkbook({
           })
         ]
       }),
-      /* @__PURE__ */ jsx4("div", {
-        style: { flex: 1, overflow: "hidden" },
-        children: /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx5("div", {
+        id: panelId,
+        role: "tabpanel",
+        "aria-label": activeSheet || "Sheet",
+        style: { flex: 1, minHeight: 0, overflow: "hidden" },
+        children: /* @__PURE__ */ jsx5("div", {
           style: {
             transform: spreadsheetZoom !== 1 ? `scale(${spreadsheetZoom})` : undefined,
             transformOrigin: "0 0",
             width: spreadsheetZoom !== 1 ? `${100 / spreadsheetZoom}%` : "100%",
             height: spreadsheetZoom !== 1 ? `${100 / spreadsheetZoom}%` : "100%"
           },
-          children: /* @__PURE__ */ jsx4(FormulaSheet, {
+          children: /* @__PURE__ */ jsx5(FormulaSheet, {
             sheetName: activeSheet,
             workbookName,
             engine,
@@ -4361,138 +4637,53 @@ function FormulaWorkbook({
           }, `${workbookName}-${activeSheet}`)
         })
       }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "rsp-sheet-tabs",
-        children: [
-          /* @__PURE__ */ jsxs3("div", {
-            className: "rsp-sheet-tabs-scroll",
-            children: [
-              /* @__PURE__ */ jsx4("div", {
-                style: { display: "flex", alignItems: "center", gap: 4 },
-                children: sheetNames.map((sheetName) => {
-                  const isRenaming = renamingSheet === sheetName;
-                  const isActive = activeSheet === sheetName;
-                  return /* @__PURE__ */ jsx4("div", {
-                    children: isRenaming ? /* @__PURE__ */ jsx4("div", {
-                      style: { display: "flex", alignItems: "center", gap: 4 },
-                      children: /* @__PURE__ */ jsx4("input", {
-                        className: "rsp-sheet-tab-input",
-                        type: "text",
-                        value: newSheetName,
-                        onChange: (e) => setNewSheetName(e.target.value),
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter") {
-                            renameSheet(sheetName, newSheetName);
-                          } else if (e.key === "Escape") {
-                            cancelRenaming();
-                          }
-                        },
-                        onBlur: () => {
-                          if (newSheetName.trim() && newSheetName.trim() !== sheetName) {
-                            renameSheet(sheetName, newSheetName);
-                          } else {
-                            cancelRenaming();
-                          }
-                        },
-                        autoFocus: true,
-                        "data-testid": `rename-sheet-input-${sheetName}`
-                      })
-                    }) : /* @__PURE__ */ jsxs3("div", {
-                      className: cn("rsp-sheet-tab", {
-                        "rsp-sheet-tab-active": isActive
-                      }),
-                      onClick: () => handleActiveSheetChange(sheetName),
-                      onDoubleClick: () => startRenaming(sheetName),
-                      "data-testid": `sheet-tab-${sheetName}`,
-                      children: [
-                        /* @__PURE__ */ jsx4("span", {
-                          children: sheetName
-                        }),
-                        /* @__PURE__ */ jsxs3("div", {
-                          className: "sheet-tab-actions",
-                          children: [
-                            /* @__PURE__ */ jsx4("button", {
-                              type: "button",
-                              className: "rsp-icon-button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                startRenaming(sheetName);
-                              },
-                              title: "Rename Sheet",
-                              "data-testid": `rename-sheet-${sheetName}`,
-                              children: /* @__PURE__ */ jsx4(Edit2Icon, {
-                                style: { width: 12, height: 12 }
-                              })
-                            }),
-                            sheetNames.length > 1 && /* @__PURE__ */ jsx4("button", {
-                              type: "button",
-                              className: "rsp-icon-button rsp-icon-button-delete",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                if (confirm(`Are you sure you want to delete sheet "${sheetName}"?`)) {
-                                  deleteSheet(sheetName);
-                                }
-                              },
-                              title: "Delete Sheet",
-                              "data-testid": `delete-sheet-${sheetName}`,
-                              children: /* @__PURE__ */ jsx4(Trash2Icon, {
-                                style: { width: 12, height: 12 }
-                              })
-                            })
-                          ]
-                        })
-                      ]
-                    })
-                  }, sheetName);
-                })
-              }),
-              /* @__PURE__ */ jsx4("button", {
-                type: "button",
-                className: "rsp-add-sheet-button",
-                onClick: addSheet,
-                title: "Add Sheet",
-                "data-testid": `add-sheet-${workbookName}`,
-                children: /* @__PURE__ */ jsx4(PlusIcon, {
-                  style: { width: 12, height: 12 }
-                })
+      /* @__PURE__ */ jsx5(SheetNavigation, {
+        sheets: sheetNames,
+        activeSheet,
+        workbookName,
+        panelId,
+        onSelect: handleActiveSheetChange,
+        onAdd: addSheet,
+        onRename: renameSheet,
+        onDelete: deleteSheet,
+        children: /* @__PURE__ */ jsxs4("div", {
+          className: "rsp-zoom-controls",
+          children: [
+            /* @__PURE__ */ jsx5("button", {
+              type: "button",
+              className: "rsp-icon-button",
+              onClick: () => setSpreadsheetZoom(Math.max(0.5, Math.round((spreadsheetZoom - 0.1) * 10) / 10)),
+              disabled: spreadsheetZoom <= 0.5,
+              title: "Zoom Out",
+              style: { opacity: spreadsheetZoom <= 0.5 ? 0.5 : 1 },
+              children: /* @__PURE__ */ jsx5(MinusIcon, {
+                style: { width: 12, height: 12 }
               })
-            ]
-          }),
-          /* @__PURE__ */ jsxs3("div", {
-            className: "rsp-zoom-controls",
-            children: [
-              /* @__PURE__ */ jsx4("button", {
-                type: "button",
-                className: "rsp-icon-button",
-                onClick: () => setSpreadsheetZoom(Math.max(0.5, spreadsheetZoom - 0.1)),
-                disabled: spreadsheetZoom <= 0.5,
-                title: "Zoom Out",
-                style: { opacity: spreadsheetZoom <= 0.5 ? 0.5 : 1 },
-                children: /* @__PURE__ */ jsx4(MinusIcon, {
-                  style: { width: 12, height: 12 }
-                })
-              }),
-              /* @__PURE__ */ jsxs3("span", {
-                className: "rsp-zoom-value",
-                children: [
-                  Math.round(spreadsheetZoom * 100),
-                  "%"
-                ]
-              }),
-              /* @__PURE__ */ jsx4("button", {
-                type: "button",
-                className: "rsp-icon-button",
-                onClick: () => setSpreadsheetZoom(Math.min(2, spreadsheetZoom + 0.1)),
-                disabled: spreadsheetZoom >= 2,
-                title: "Zoom In",
-                style: { opacity: spreadsheetZoom >= 2 ? 0.5 : 1 },
-                children: /* @__PURE__ */ jsx4(PlusIcon, {
-                  style: { width: 12, height: 12 }
-                })
+            }),
+            /* @__PURE__ */ jsxs4("button", {
+              type: "button",
+              className: "rsp-zoom-value rsp-zoom-reset",
+              "aria-label": `Zoom ${Math.round(spreadsheetZoom * 100)}%. Reset to 100%`,
+              title: "Reset zoom to 100%",
+              onClick: () => setSpreadsheetZoom(1),
+              children: [
+                Math.round(spreadsheetZoom * 100),
+                "%"
+              ]
+            }),
+            /* @__PURE__ */ jsx5("button", {
+              type: "button",
+              className: "rsp-icon-button",
+              onClick: () => setSpreadsheetZoom(Math.min(2, Math.round((spreadsheetZoom + 0.1) * 10) / 10)),
+              disabled: spreadsheetZoom >= 2,
+              title: "Zoom In",
+              style: { opacity: spreadsheetZoom >= 2 ? 0.5 : 1 },
+              children: /* @__PURE__ */ jsx5(PlusIcon, {
+                style: { width: 12, height: 12 }
               })
-            ]
-          })
-        ]
+            })
+          ]
+        })
       })
     ]
   });
@@ -4504,9 +4695,9 @@ var DEFAULT_ZOOM = 1;
 var MIN_ZOOM = 0.5;
 var MAX_ZOOM = 3;
 // src/utils/use-click-away.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useClickAway = (ref, callback) => {
-  useEffect4(() => {
+  useEffect5(() => {
     const handleClickAway = (event) => {
       if (ref) {
         const away = !ref.contains(event.target);
@@ -4571,4 +4762,4 @@ export {
   useResizeObserver
 };
 
-//# debugId=A4984B6C177B85D364756E2164756E21
+//# debugId=66ABFE3983D95F6964756E2164756E21