@pixerate/editor-react 0.17.0 → 0.18.1

package/dist/spreadsheet/index.cjs

@@ -41,7 +41,8 @@ __export(spreadsheet_exports, {
   SpreadsheetValidationDialog: () => SpreadsheetValidationDialog,
   useFillHandle: () => useFillHandle,
   useSpreadsheetClipboard: () => useSpreadsheetClipboard,
-  useSpreadsheetEditor: () => useSpreadsheetEditor
+  useSpreadsheetEditor: () => useSpreadsheetEditor,
+  useSpreadsheetViewport: () => useSpreadsheetViewport
 });
 module.exports = __toCommonJS(spreadsheet_exports);
 
@@ -282,8 +283,8 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react8 = require("react");
-var import_spreadsheet7 = require("@pixerate/editor/spreadsheet");
+var import_react10 = require("react");
+var import_spreadsheet8 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
 var import_react2 = __toESM(require("react"), 1);
@@ -362,6 +363,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "
 };
 
 // src/spreadsheet/SpreadsheetGroupRow.tsx
+var import_react3 = __toESM(require("react"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var formatSummary = (value) => value === null ? "\u2013" : String(value);
 var SpreadsheetGroupRow = ({
@@ -369,9 +371,14 @@ var SpreadsheetGroupRow = ({
   columns,
   groupColId,
   onToggle,
-  trailingCell
+  trailingCell,
+  labelColumns = columns,
+  leadingColumns,
+  leftSpace = 0,
+  rightSpace = 0
 }) => {
-  const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
+  const labelColId = labelColumns.some((c) => c.column.id === groupColId) ? groupColId : labelColumns[0]?.column.id;
+  const spacer = (key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { "aria-hidden": "true", "data-spacer": "", style: { padding: 0 } }, key);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
@@ -387,24 +394,30 @@ var SpreadsheetGroupRow = ({
         children: group.collapsed ? "\u25B8" : "\u25BE"
       }
     ) }),
-    columns.map(({ column }) => {
+    columns.map(({ column }, i) => {
       const summary = group.summaries[column.id];
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "truncate", children: [
-        group.label,
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
-          "(",
-          group.rowIndices.length,
-          ")"
-        ] })
-      ] }) : summary !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null }, column.id);
+      const before = leadingColumns !== void 0 && i === leadingColumns && leftSpace > 0 ? spacer("space:left") : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react3.default.Fragment, { children: [
+        before,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "truncate", children: [
+          group.label,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
+            "(",
+            group.rowIndices.length,
+            ")"
+          ] })
+        ] }) : summary !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null })
+      ] }, column.id);
     }),
+    leadingColumns !== void 0 && leadingColumns >= columns.length && leftSpace > 0 && spacer("space:left"),
+    rightSpace > 0 && spacer("space:right"),
     trailingCell && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
   ] });
 };
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
 function gridHasFocus(grid) {
   if (!grid || typeof document === "undefined") return false;
@@ -413,12 +426,12 @@ function gridHasFocus(grid) {
   return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
 }
 function useSpreadsheetClipboard(gridRef, state, readOnly) {
-  const stateRef = (0, import_react3.useRef)(state);
+  const stateRef = (0, import_react4.useRef)(state);
   stateRef.current = state;
-  const readOnlyRef = (0, import_react3.useRef)(readOnly);
+  const readOnlyRef = (0, import_react4.useRef)(readOnly);
   readOnlyRef.current = readOnly;
-  const copiedRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const copiedRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     if (typeof document === "undefined") return;
     const handleCopy = (e) => {
       const s = stateRef.current;
@@ -441,7 +454,7 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
       document.removeEventListener("paste", handlePaste);
     };
   }, [gridRef]);
-  const copyShortcutFallback = (0, import_react3.useCallback)(() => {
+  const copyShortcutFallback = (0, import_react4.useCallback)(() => {
     copiedRef.current = false;
     setTimeout(() => {
       if (copiedRef.current) return;
@@ -453,13 +466,13 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
   return { copyShortcutFallback };
 }
 function useFillHandle(state) {
-  const [drag, setDrag] = (0, import_react3.useState)(null);
-  const dragRef = (0, import_react3.useRef)(drag);
+  const [drag, setDrag] = (0, import_react4.useState)(null);
+  const dragRef = (0, import_react4.useRef)(drag);
   dragRef.current = drag;
-  const stateRef = (0, import_react3.useRef)(state);
+  const stateRef = (0, import_react4.useRef)(state);
   stateRef.current = state;
   const dragging = drag !== null;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!dragging) return;
     const handleMouseUp = () => {
       const current = dragRef.current;
@@ -469,13 +482,13 @@ function useFillHandle(state) {
     window.addEventListener("mouseup", handleMouseUp);
     return () => window.removeEventListener("mouseup", handleMouseUp);
   }, [dragging]);
-  const startFill = (0, import_react3.useCallback)((e) => {
+  const startFill = (0, import_react4.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     const range = stateRef.current.selectedRange;
     if (range) setDrag({ source: (0, import_spreadsheet3.normalizeRange)(range), target: null });
   }, []);
-  const extendFill = (0, import_react3.useCallback)((row, col) => {
+  const extendFill = (0, import_react4.useCallback)((row, col) => {
     const current = dragRef.current;
     if (!current) return;
     setDrag({ source: current.source, target: (0, import_spreadsheet3.computeFillTarget)(current.source, { row, col }) });
@@ -484,12 +497,12 @@ function useFillHandle(state) {
 }
 
 // src/spreadsheet/SpreadsheetValidationDialog.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
   const style = prompt.result.errorStyle ?? "stop";
-  const firstButton = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const firstButton = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     firstButton.current?.focus();
   }, [prompt]);
   const buttons = style === "stop" ? [
@@ -555,7 +568,7 @@ var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
 };
 
 // src/spreadsheet/SpreadsheetRulePanels.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var inputClass = "w-full rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground";
@@ -609,18 +622,18 @@ function RuleSwatch({ rule }) {
 }
 var SpreadsheetConditionalFormatPanel = ({ state, onClose }) => {
   const rules = state.document.table?.conditionalFormats ?? [];
-  const [kind, setKind] = (0, import_react5.useState)("greaterThan");
-  const [appliesTo, setAppliesTo] = (0, import_react5.useState)(() => selectionText(state.selectedRange));
-  const [value, setValue] = (0, import_react5.useState)("");
-  const [value2, setValue2] = (0, import_react5.useState)("");
-  const [text, setText] = (0, import_react5.useState)("");
-  const [formula, setFormula] = (0, import_react5.useState)("=");
-  const [rank, setRank] = (0, import_react5.useState)("10");
-  const [period, setPeriod] = (0, import_react5.useState)("today");
-  const [iconSet, setIconSet] = (0, import_react5.useState)("3TrafficLights1");
-  const [color, setColor] = (0, import_react5.useState)("#638ec6");
-  const [styleId, setStyleId] = (0, import_react5.useState)(import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
-  const preset = (0, import_react5.useMemo)(() => import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind), [kind]);
+  const [kind, setKind] = (0, import_react6.useState)("greaterThan");
+  const [appliesTo, setAppliesTo] = (0, import_react6.useState)(() => selectionText(state.selectedRange));
+  const [value, setValue] = (0, import_react6.useState)("");
+  const [value2, setValue2] = (0, import_react6.useState)("");
+  const [text, setText] = (0, import_react6.useState)("");
+  const [formula, setFormula] = (0, import_react6.useState)("=");
+  const [rank, setRank] = (0, import_react6.useState)("10");
+  const [period, setPeriod] = (0, import_react6.useState)("today");
+  const [iconSet, setIconSet] = (0, import_react6.useState)("3TrafficLights1");
+  const [color, setColor] = (0, import_react6.useState)("#638ec6");
+  const [styleId, setStyleId] = (0, import_react6.useState)(import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
+  const preset = (0, import_react6.useMemo)(() => import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind), [kind]);
   const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
   const add = () => {
     if (!ranges) return;
@@ -704,15 +717,15 @@ var SpreadsheetConditionalFormatPanel = ({ state, onClose }) => {
 };
 var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
   const rules = state.document.table?.dataValidations ?? [];
-  const [type, setType] = (0, import_react5.useState)("list");
-  const [operator, setOperator] = (0, import_react5.useState)("between");
-  const [formula1, setFormula1] = (0, import_react5.useState)("");
-  const [formula2, setFormula2] = (0, import_react5.useState)("");
-  const [errorStyle, setErrorStyle] = (0, import_react5.useState)("stop");
-  const [errorMessage, setErrorMessage] = (0, import_react5.useState)("");
-  const [inputMessage, setInputMessage] = (0, import_react5.useState)("");
-  const [ignoreBlank, setIgnoreBlank] = (0, import_react5.useState)(true);
-  const [appliesTo, setAppliesTo] = (0, import_react5.useState)(() => selectionText(state.selectedRange));
+  const [type, setType] = (0, import_react6.useState)("list");
+  const [operator, setOperator] = (0, import_react6.useState)("between");
+  const [formula1, setFormula1] = (0, import_react6.useState)("");
+  const [formula2, setFormula2] = (0, import_react6.useState)("");
+  const [errorStyle, setErrorStyle] = (0, import_react6.useState)("stop");
+  const [errorMessage, setErrorMessage] = (0, import_react6.useState)("");
+  const [inputMessage, setInputMessage] = (0, import_react6.useState)("");
+  const [ignoreBlank, setIgnoreBlank] = (0, import_react6.useState)(true);
+  const [appliesTo, setAppliesTo] = (0, import_react6.useState)(() => selectionText(state.selectedRange));
   const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
   const usesOperator = type === "whole" || type === "decimal" || type === "date" || type === "time" || type === "textLength";
   const needsTwo = usesOperator && (operator === "between" || operator === "notBetween");
@@ -785,35 +798,99 @@ var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
   ] });
 };
 
-// src/spreadsheet/FormulaHints.tsx
-var import_react6 = require("react");
+// src/spreadsheet/useSpreadsheetViewport.ts
+var import_react7 = require("react");
 var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react7.useLayoutEffect : import_react7.useEffect;
+function useSpreadsheetViewport(scrollRef, view, options = {}) {
+  const metrics = (0, import_react7.useMemo)(() => (0, import_spreadsheet5.measureSpreadsheetView)(view), [view]);
+  const virtual = (0, import_spreadsheet5.shouldVirtualizeSpreadsheet)(view, options.virtualize ?? "auto");
+  const [viewport, setViewport] = (0, import_react7.useState)({ scrollTop: 0, scrollLeft: 0, width: 0, height: 0 });
+  const windowOptions = (0, import_react7.useMemo)(
+    () => ({ merges: options.merges, overscanRows: options.overscanRows, overscanColumns: options.overscanColumns }),
+    [options.merges, options.overscanRows, options.overscanColumns]
+  );
+  const win = (0, import_react7.useMemo)(
+    () => virtual ? (0, import_spreadsheet5.getSpreadsheetViewWindow)(metrics, viewport, windowOptions) : (0, import_spreadsheet5.fullSpreadsheetViewWindow)(metrics),
+    [virtual, metrics, viewport, windowOptions]
+  );
+  const latest = (0, import_react7.useRef)({ metrics, viewport, virtual, windowOptions });
+  latest.current = { metrics, viewport, virtual, windowOptions };
+  const readViewport = (0, import_react7.useCallback)(() => {
+    const el = scrollRef.current;
+    if (!el) return null;
+    return { scrollTop: el.scrollTop, scrollLeft: el.scrollLeft, width: el.clientWidth, height: el.clientHeight };
+  }, [scrollRef]);
+  const updateViewport = (0, import_react7.useCallback)((next) => {
+    setViewport((prev) => {
+      const { metrics: m, virtual: v, windowOptions: o } = latest.current;
+      if (!v) return prev;
+      const same = prev.width === next.width && prev.height === next.height && (0, import_spreadsheet5.sameSpreadsheetViewWindow)((0, import_spreadsheet5.getSpreadsheetViewWindow)(m, prev, o), (0, import_spreadsheet5.getSpreadsheetViewWindow)(m, next, o));
+      return same ? prev : next;
+    });
+  }, []);
+  const onScroll = (0, import_react7.useCallback)(() => {
+    const next = readViewport();
+    if (next) updateViewport(next);
+  }, [readViewport, updateViewport]);
+  useIsomorphicLayoutEffect(() => {
+    if (!virtual) return;
+    onScroll();
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => onScroll());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [virtual, onScroll, scrollRef]);
+  const activeRow = options.activeCell?.row;
+  const activeCol = options.activeCell?.col;
+  useIsomorphicLayoutEffect(() => {
+    if (!virtual || activeRow === void 0 || activeCol === void 0) return;
+    const el = scrollRef.current;
+    const current = latest.current.viewport;
+    const measured = readViewport();
+    const base = measured ? { ...measured, scrollTop: Math.max(measured.scrollTop, 0), scrollLeft: Math.max(measured.scrollLeft, 0) } : current;
+    const target = (0, import_spreadsheet5.getSpreadsheetScrollToCell)(latest.current.metrics, base, { row: activeRow, col: activeCol });
+    if (!target) return;
+    const next = { ...base, ...target };
+    if (el) {
+      if (target.scrollTop !== void 0) el.scrollTop = target.scrollTop;
+      if (target.scrollLeft !== void 0) el.scrollLeft = target.scrollLeft;
+    }
+    updateViewport(next);
+  }, [virtual, activeRow, activeCol]);
+  return { metrics, window: win, onScroll };
+}
+
+// src/spreadsheet/FormulaHints.tsx
+var import_react8 = require("react");
+var import_spreadsheet6 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
-  const [caret, setCaret] = (0, import_react6.useState)(null);
-  const [focused, setFocused] = (0, import_react6.useState)(false);
-  const [selected, setSelected] = (0, import_react6.useState)(0);
-  const [dismissed, setDismissed] = (0, import_react6.useState)(false);
-  const [position, setPosition] = (0, import_react6.useState)(null);
-  const pendingCaret = (0, import_react6.useRef)(null);
-  const hints = (0, import_react6.useMemo)(
-    () => (0, import_spreadsheet5.getFormulaHints)(value, caret ?? value.length, { limit, names }),
+  const [caret, setCaret] = (0, import_react8.useState)(null);
+  const [focused, setFocused] = (0, import_react8.useState)(false);
+  const [selected, setSelected] = (0, import_react8.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react8.useState)(false);
+  const [position, setPosition] = (0, import_react8.useState)(null);
+  const pendingCaret = (0, import_react8.useRef)(null);
+  const hints = (0, import_react8.useMemo)(
+    () => (0, import_spreadsheet6.getFormulaHints)(value, caret ?? value.length, { limit, names }),
     [value, caret, limit, names]
   );
   const suggestions = dismissed ? [] : hints.suggestions;
   const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
   const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
-  const latest = (0, import_react6.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = (0, import_react8.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
   latest.current = { suggestions, selected: selectedIndex, value, caret, onAccept };
   const accept = (index) => {
     const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
     const suggestion = list[index];
     if (!suggestion) return;
-    const next = (0, import_spreadsheet5.applyFormulaSuggestion)(current, at ?? current.length, suggestion);
+    const next = (0, import_spreadsheet6.applyFormulaSuggestion)(current, at ?? current.length, suggestion);
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -863,7 +940,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -872,7 +949,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -936,16 +1013,16 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
 };
 
 // src/spreadsheet/SheetTabs.tsx
-var import_react7 = require("react");
-var import_spreadsheet6 = require("@pixerate/editor/spreadsheet");
+var import_react9 = require("react");
+var import_spreadsheet7 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SheetTabs = ({ state, readOnly = false, className = "" }) => {
   const { controller, sheets } = state;
-  const [renaming, setRenaming] = (0, import_react7.useState)(null);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [menu, setMenu] = (0, import_react7.useState)(null);
-  const dragFrom = (0, import_react7.useRef)(null);
-  const [dropTarget, setDropTarget] = (0, import_react7.useState)(null);
+  const [renaming, setRenaming] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const [menu, setMenu] = (0, import_react9.useState)(null);
+  const dragFrom = (0, import_react9.useRef)(null);
+  const [dropTarget, setDropTarget] = (0, import_react9.useState)(null);
   const commitRename = (cancelOnError) => {
     if (!renaming) return;
     const sheet = sheets.find((s) => s.id === renaming.id);
@@ -1016,7 +1093,7 @@ var SheetTabs = ({ state, readOnly = false, className = "" }) => {
                 onContextMenu: (e) => {
                   if (readOnly) return;
                   e.preventDefault();
-                  setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet6.getSheetTabMenuItems)(controller, sheet.id, { onError: setError }) });
+                  setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet7.getSheetTabMenuItems)(controller, sheet.id, { onError: setError }) });
                 },
                 onDragStart: (e) => {
                   dragFrom.current = index;
@@ -1036,7 +1113,7 @@ var SheetTabs = ({ state, readOnly = false, className = "" }) => {
                   dragFrom.current = null;
                   setDropTarget(null);
                   if (from === null) return;
-                  state.moveSheet(sheets[from].id, (0, import_spreadsheet6.sheetDropIndex)(from, index, dropAfter(e)));
+                  state.moveSheet(sheets[from].id, (0, import_spreadsheet7.sheetDropIndex)(from, index, dropAfter(e)));
                 },
                 onDragEnd: () => {
                   dragFrom.current = null;
@@ -1092,7 +1169,7 @@ function frozenCellStyle(viewRow, viewCol) {
     background: "var(--background, #fff)"
   };
 }
-var coordKey = (cell) => cell ? `${(0, import_spreadsheet7.indexToColName)(cell.col)}${cell.row + 1}` : "";
+var coordKey = (cell) => cell ? `${(0, import_spreadsheet8.indexToColName)(cell.col)}${cell.row + 1}` : "";
 function spillBorderStyle(range, row, col) {
   const line = "1px solid color-mix(in srgb, var(--primary, #6366f1) 60%, transparent)";
   return {
@@ -1107,8 +1184,8 @@ function spillBorderStyle(range, row, col) {
   };
 }
 function CellText({ cell, conditional }) {
-  const shown = (0, import_spreadsheet7.formatCellForDisplay)(cell);
-  const color = conditional?.color ?? (shown.color ? (0, import_spreadsheet7.numberFormatColorToCss)(shown.color) : void 0);
+  const shown = (0, import_spreadsheet8.formatCellForDisplay)(cell);
+  const color = conditional?.color ?? (shown.color ? (0, import_spreadsheet8.numberFormatColorToCss)(shown.color) : void 0);
   const decorated = !!conditional?.dataBar || !!conditional?.icon;
   const text = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
@@ -1126,9 +1203,9 @@ function CellText({ cell, conditional }) {
     }
   );
   if (!conditional || !decorated) return text;
-  const icon = conditional.icon ? (0, import_spreadsheet7.getConditionalFormatIcon)(conditional.icon.set, conditional.icon.index) : null;
+  const icon = conditional.icon ? (0, import_spreadsheet8.getConditionalFormatIcon)(conditional.icon.set, conditional.icon.index) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    conditional.dataBar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-data-bar", style: (0, import_spreadsheet7.getDataBarCss)(conditional.dataBar) }),
+    conditional.dataBar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-data-bar", style: (0, import_spreadsheet8.getDataBarCss)(conditional.dataBar) }),
     icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1 min-w-0", style: { position: "relative" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "spreadsheet-cf-icon shrink-0", role: "img", "aria-label": icon.label, "data-icon": conditional.icon.id, style: { color: icon.color }, children: icon.glyph }),
       text
@@ -1142,65 +1219,94 @@ var SpreadsheetEditor = ({
   onAddColumnClick,
   onColumnHeaderClick,
   onColumnResize,
-  showSheetTabs = false
+  showSheetTabs = false,
+  virtualize = "auto"
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react8.useRef)(null);
-  const formulaBarRef = (0, import_react8.useRef)(null);
-  const cellInputRef = (0, import_react8.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react8.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react8.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react8.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react8.useState)(0);
+  const gridRef = (0, import_react10.useRef)(null);
+  const scrollRef = (0, import_react10.useRef)(null);
+  const formulaBarRef = (0, import_react10.useRef)(null);
+  const cellInputRef = (0, import_react10.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react10.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react10.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react10.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react10.useState)(0);
   const view = state.viewModel;
+  const { window: viewWindow, onScroll: handleGridScroll } = useSpreadsheetViewport(scrollRef, view, {
+    virtualize,
+    merges: state.document.table?.merges,
+    activeCell: state.activeCell
+  });
+  const columnSlots = (0, import_react10.useMemo)(() => {
+    const col = (viewCol) => ({ kind: "col", viewCol });
+    if (!viewWindow.virtual) return view.columns.map(col);
+    const slots = view.columns.slice(0, viewWindow.frozenColumns).map(col);
+    if (viewWindow.leftSpace > 0) slots.push({ kind: "space", key: "space:left", width: viewWindow.leftSpace });
+    for (let i = viewWindow.colStart; i < viewWindow.colEnd; i++) slots.push(col(view.columns[i]));
+    if (viewWindow.rightSpace > 0) slots.push({ kind: "space", key: "space:right", width: viewWindow.rightSpace });
+    return slots;
+  }, [view, viewWindow]);
+  const renderedColumns = (0, import_react10.useMemo)(
+    () => columnSlots.flatMap((slot) => slot.kind === "col" ? [slot.viewCol] : []),
+    [columnSlots]
+  );
+  const rowSlots = (0, import_react10.useMemo)(() => {
+    const row = (viewRow) => ({ kind: "row", viewRow });
+    if (!viewWindow.virtual) return view.rows.map(row);
+    const slots = view.rows.slice(0, viewWindow.frozenRows).map(row);
+    if (viewWindow.topSpace > 0) slots.push({ kind: "space", key: "space:top", height: viewWindow.topSpace });
+    for (let i = viewWindow.rowStart; i < viewWindow.rowEnd; i++) slots.push(row(view.rows[i]));
+    if (viewWindow.bottomSpace > 0) slots.push({ kind: "space", key: "space:bottom", height: viewWindow.bottomSpace });
+    return slots;
+  }, [view, viewWindow]);
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = (0, import_react8.useState)(null);
-  const [panel, setPanel] = (0, import_react8.useState)(null);
-  const [listMenu, setListMenu] = (0, import_react8.useState)(null);
+  const [menu, setMenu] = (0, import_react10.useState)(null);
+  const [panel, setPanel] = (0, import_react10.useState)(null);
+  const [listMenu, setListMenu] = (0, import_react10.useState)(null);
   const overlay = state.conditionalFormatOverlay;
   const filter = state.document.table?.filter;
-  const filteredColIds = (0, import_react8.useMemo)(
+  const filteredColIds = (0, import_react10.useMemo)(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = (0, import_react8.useCallback)((rIdx, cIdx, e) => {
+  const handleCellContextMenu = (0, import_react10.useCallback)((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
-    if (!state.selectedRange || !(0, import_spreadsheet7.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+    if (!state.selectedRange || !(0, import_spreadsheet8.rangeContains)(state.selectedRange, rIdx, cIdx)) {
       state.selectCell(rIdx, cIdx);
     }
-    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet7.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet8.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const nameSuggestions = (0, import_react8.useMemo)(
+  const nameSuggestions = (0, import_react10.useMemo)(
     () => state.controller.getNameSuggestions(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.document]
   );
-  const activeRawValue = (0, import_react8.useMemo)(() => {
+  const activeRawValue = (0, import_react10.useMemo)(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const activeSpill = (0, import_react8.useMemo)(
+  const activeSpill = (0, import_react10.useMemo)(
     () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document]
   );
   const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
-  const coordLabel = (0, import_react8.useMemo)(() => {
+  const coordLabel = (0, import_react10.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_spreadsheet7.indexToColName)(state.activeCell.col);
+    const colName = (0, import_spreadsheet8.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react8.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react10.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -1216,19 +1322,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react8.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react10.useCallback)((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
     }
     state.selectCell(rIdx, cIdx, e.shiftKey);
   }, [state]);
-  const handleCellDblClick = (0, import_react8.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react10.useCallback)((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = (0, import_react8.useCallback)((e) => {
+  const handleKeyDown = (0, import_react10.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1300,12 +1406,12 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const activeListValues = (0, import_react8.useMemo)(
+  const activeListValues = (0, import_react10.useMemo)(
     () => state.activeCell && !readOnly ? state.controller.getValidationListValues(state.activeCell.row, state.activeCell.col) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document, readOnly]
   );
-  const activeRule = (0, import_react8.useMemo)(
+  const activeRule = (0, import_react10.useMemo)(
     () => state.activeCell ? state.controller.getDataValidationAt(state.activeCell.row, state.activeCell.col) : void 0,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document]
@@ -1319,7 +1425,7 @@ var SpreadsheetEditor = ({
     const rect = td?.getBoundingClientRect();
     setListMenu({ x: rect ? rect.left : 0, y: rect ? rect.bottom : 0, row, col, values });
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!listMenu) return;
     const close = (e) => {
       if (!e.target?.closest?.('[aria-label="Allowed values"], .spreadsheet-list-arrow')) setListMenu(null);
@@ -1342,11 +1448,11 @@ var SpreadsheetEditor = ({
       else gridRef.current?.focus();
     });
   };
-  const stateRef = (0, import_react8.useRef)(state);
+  const stateRef = (0, import_react10.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react8.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react10.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -1397,7 +1503,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react8.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react10.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -1445,7 +1551,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react8.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react10.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -1481,12 +1587,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react8.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react10.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1571,10 +1677,19 @@ var SpreadsheetEditor = ({
           inputMessage.inputTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-1 font-semibold text-foreground", children: inputMessage.inputTitle }),
           inputMessage.inputMessage
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: scrollRef, className: "relative flex-1 overflow-auto", onScroll: handleGridScroll, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "border-separate border-spacing-0 table-fixed w-max min-w-full [&>*>tr:not([data-spacer])>*]:border-b [&>*>tr>*]:border-border", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
-            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            columnSlots.map((slot) => slot.kind === "space" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "th",
+              {
+                "aria-hidden": "true",
+                "data-spacer": "",
+                className: "p-0",
+                style: { width: slot.width, minWidth: slot.width, maxWidth: slot.width, padding: 0 }
+              },
+              slot.key
+            ) : (({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "th",
               {
                 "data-col": cIdx,
@@ -1633,7 +1748,7 @@ var SpreadsheetEditor = ({
                 ]
               },
               col.id
-            )),
+            ))(slot.viewCol)),
             onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "th",
               {
@@ -1644,13 +1759,21 @@ var SpreadsheetEditor = ({
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: view.rows.map((viewRow) => {
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: rowSlots.map((rowSlot) => {
+            if (rowSlot.kind === "space") {
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { "aria-hidden": "true", "data-spacer": "", style: { height: rowSlot.height }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { colSpan: columnSlots.length + 2, style: { padding: 0, border: 0 } }) }, rowSlot.key);
+            }
+            const viewRow = rowSlot.viewRow;
             if (viewRow.kind === "group") {
               return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 SpreadsheetGroupRow,
                 {
                   group: viewRow.group,
-                  columns: view.columns,
+                  columns: renderedColumns,
+                  labelColumns: view.columns,
+                  leadingColumns: viewWindow.virtual ? viewWindow.frozenColumns : void 0,
+                  leftSpace: viewWindow.leftSpace,
+                  rightSpace: viewWindow.rightSpace,
                   groupColId: state.document.table?.grouping?.colId ?? "",
                   onToggle: state.toggleGroupCollapsed,
                   trailingCell: !!onAddColumnClick
@@ -1659,7 +1782,7 @@ var SpreadsheetEditor = ({
               );
             }
             const displayRowIndex = viewRow.index;
-            const selection = state.selectedRange ? (0, import_spreadsheet7.normalizeRange)(state.selectedRange) : null;
+            const selection = state.selectedRange ? (0, import_spreadsheet8.normalizeRange)(state.selectedRange) : null;
             return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               "tr",
               {
@@ -1675,7 +1798,9 @@ var SpreadsheetEditor = ({
                       children: displayRowIndex + 1
                     }
                   ),
-                  view.columns.map((viewCol) => {
+                  columnSlots.map((slot) => {
+                    if (slot.kind === "space") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { "aria-hidden": "true", "data-spacer": "", style: { padding: 0 } }, slot.key);
+                    const viewCol = slot.viewCol;
                     const span = view.getCellSpan(displayRowIndex, viewCol.index);
                     if (!span) return null;
                     const rIdx = span.source.row;
@@ -1687,11 +1812,11 @@ var SpreadsheetEditor = ({
                     const active = isActiveCell(rIdx, cIdx);
                     const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
                     const conditional = overlay.get(rIdx, cIdx);
-                    const conditionalCss = (0, import_spreadsheet7.getConditionalFormatCss)(conditional);
+                    const conditionalCss = (0, import_spreadsheet8.getConditionalFormatCss)(conditional);
                     const circled = state.controller.isInvalidDataCircled(rIdx, cIdx);
                     const showListArrow = active && !isEditing && !!activeListValues;
-                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet7.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
-                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet7.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet8.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet8.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
                     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                       "td",
                       {
@@ -1760,7 +1885,7 @@ var SpreadsheetEditor = ({
                               children: "\u25BE"
                             }
                           ),
-                          activeSpill && (0, import_spreadsheet7.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
+                          activeSpill && (0, import_spreadsheet8.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
                           showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             "div",
                             {
@@ -1858,19 +1983,19 @@ var SpreadsheetEditor = ({
 };
 
 // src/spreadsheet/NameManager.tsx
-var import_react9 = require("react");
-var import_spreadsheet8 = require("@pixerate/editor/spreadsheet");
+var import_react11 = require("react");
+var import_spreadsheet9 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var EMPTY_DRAFT = { original: null, name: "", refersTo: "=", scope: "", comment: "" };
 var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
   const { controller, sheets } = state;
-  const rows = (0, import_react9.useMemo)(
-    () => (0, import_spreadsheet8.getNameManagerRows)(controller),
+  const rows = (0, import_react11.useMemo)(
+    () => (0, import_spreadsheet9.getNameManagerRows)(controller),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, state.document, state.names]
   );
-  const [draft, setDraft] = (0, import_react9.useState)(EMPTY_DRAFT);
-  const [error, setError] = (0, import_react9.useState)(null);
+  const [draft, setDraft] = (0, import_react11.useState)(EMPTY_DRAFT);
+  const [error, setError] = (0, import_react11.useState)(null);
   const edit = (row) => {
     setError(null);
     setDraft({
@@ -1888,7 +2013,7 @@ var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
       const invalid = controller.validateDefinedName(draft.name.trim());
       if (invalid) throw new Error(invalid);
       try {
-        (0, import_spreadsheet8.parseFormula)(draft.refersTo.trim().startsWith("=") ? draft.refersTo.trim() : `=${draft.refersTo.trim()}`);
+        (0, import_spreadsheet9.parseFormula)(draft.refersTo.trim().startsWith("=") ? draft.refersTo.trim() : `=${draft.refersTo.trim()}`);
       } catch (err) {
         throw new Error(`There's a problem with this formula: ${err?.message ?? draft.refersTo}`);
       }
@@ -2024,6 +2149,7 @@ var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
   SpreadsheetValidationDialog,
   useFillHandle,
   useSpreadsheetClipboard,
-  useSpreadsheetEditor
+  useSpreadsheetEditor,
+  useSpreadsheetViewport
 });
 //# sourceMappingURL=index.cjs.map