@pixerate/editor-react 0.17.0 → 0.18.1

package/dist/{chunk-JR5ZBDR7.js → chunk-34HEZX7J.js}

@@ -238,7 +238,7 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef7, useState as useState7, useMemo as useMemo4, useEffect as useEffect5, useCallback as useCallback3 } from "react";
+import { useRef as useRef8, useState as useState8, useMemo as useMemo5, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import {
   indexToColName,
   getSpreadsheetMenuItems,
@@ -328,6 +328,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "
 };
 
 // src/spreadsheet/SpreadsheetGroupRow.tsx
+import React2 from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var formatSummary = (value) => value === null ? "\u2013" : String(value);
 var SpreadsheetGroupRow = ({
@@ -335,9 +336,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__ */ jsx2("td", { "aria-hidden": "true", "data-spacer": "", style: { padding: 0 } }, key);
   return /* @__PURE__ */ jsxs2("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
     /* @__PURE__ */ jsx2("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ jsx2(
       "button",
@@ -353,18 +359,24 @@ var SpreadsheetGroupRow = ({
         children: group.collapsed ? "\u25B8" : "\u25BE"
       }
     ) }),
-    columns.map(({ column }) => {
+    columns.map(({ column }, i) => {
       const summary = group.summaries[column.id];
-      return /* @__PURE__ */ jsx2("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__ */ jsxs2("span", { className: "truncate", children: [
-        group.label,
-        " ",
-        /* @__PURE__ */ jsxs2("span", { className: "font-normal text-muted-foreground", children: [
-          "(",
-          group.rowIndices.length,
-          ")"
-        ] })
-      ] }) : summary !== void 0 ? /* @__PURE__ */ jsx2("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__ */ jsxs2(React2.Fragment, { children: [
+        before,
+        /* @__PURE__ */ jsx2("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__ */ jsxs2("span", { className: "truncate", children: [
+          group.label,
+          " ",
+          /* @__PURE__ */ jsxs2("span", { className: "font-normal text-muted-foreground", children: [
+            "(",
+            group.rowIndices.length,
+            ")"
+          ] })
+        ] }) : summary !== void 0 ? /* @__PURE__ */ jsx2("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__ */ jsx2("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
   ] });
 };
@@ -768,25 +780,96 @@ var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
   ] });
 };
 
+// src/spreadsheet/useSpreadsheetViewport.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
+import {
+  fullSpreadsheetViewWindow,
+  getSpreadsheetScrollToCell,
+  getSpreadsheetViewWindow,
+  measureSpreadsheetView,
+  sameSpreadsheetViewWindow,
+  shouldVirtualizeSpreadsheet
+} from "@pixerate/editor/spreadsheet";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect4;
+function useSpreadsheetViewport(scrollRef, view, options = {}) {
+  const metrics = useMemo3(() => measureSpreadsheetView(view), [view]);
+  const virtual = shouldVirtualizeSpreadsheet(view, options.virtualize ?? "auto");
+  const [viewport, setViewport] = useState5({ scrollTop: 0, scrollLeft: 0, width: 0, height: 0 });
+  const windowOptions = useMemo3(
+    () => ({ merges: options.merges, overscanRows: options.overscanRows, overscanColumns: options.overscanColumns }),
+    [options.merges, options.overscanRows, options.overscanColumns]
+  );
+  const win = useMemo3(
+    () => virtual ? getSpreadsheetViewWindow(metrics, viewport, windowOptions) : fullSpreadsheetViewWindow(metrics),
+    [virtual, metrics, viewport, windowOptions]
+  );
+  const latest = useRef5({ metrics, viewport, virtual, windowOptions });
+  latest.current = { metrics, viewport, virtual, windowOptions };
+  const readViewport = useCallback3(() => {
+    const el = scrollRef.current;
+    if (!el) return null;
+    return { scrollTop: el.scrollTop, scrollLeft: el.scrollLeft, width: el.clientWidth, height: el.clientHeight };
+  }, [scrollRef]);
+  const updateViewport = useCallback3((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 && sameSpreadsheetViewWindow(getSpreadsheetViewWindow(m, prev, o), getSpreadsheetViewWindow(m, next, o));
+      return same ? prev : next;
+    });
+  }, []);
+  const onScroll = useCallback3(() => {
+    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 = 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
-import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
 import { applyFormulaSuggestion, getFormulaHints } from "@pixerate/editor/spreadsheet";
 import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
-  const [caret, setCaret] = useState5(null);
-  const [focused, setFocused] = useState5(false);
-  const [selected, setSelected] = useState5(0);
-  const [dismissed, setDismissed] = useState5(false);
-  const [position, setPosition] = useState5(null);
-  const pendingCaret = useRef5(null);
-  const hints = useMemo3(
+  const [caret, setCaret] = useState6(null);
+  const [focused, setFocused] = useState6(false);
+  const [selected, setSelected] = useState6(0);
+  const [dismissed, setDismissed] = useState6(false);
+  const [position, setPosition] = useState6(null);
+  const pendingCaret = useRef6(null);
+  const hints = useMemo4(
     () => 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 = useRef5({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = useRef6({ 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;
@@ -796,7 +879,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -846,7 +929,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -855,7 +938,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -919,16 +1002,16 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
 };
 
 // src/spreadsheet/SheetTabs.tsx
-import { useRef as useRef6, useState as useState6 } from "react";
+import { useRef as useRef7, useState as useState7 } from "react";
 import { getSheetTabMenuItems, sheetDropIndex } from "@pixerate/editor/spreadsheet";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var SheetTabs = ({ state, readOnly = false, className = "" }) => {
   const { controller, sheets } = state;
-  const [renaming, setRenaming] = useState6(null);
-  const [error, setError] = useState6(null);
-  const [menu, setMenu] = useState6(null);
-  const dragFrom = useRef6(null);
-  const [dropTarget, setDropTarget] = useState6(null);
+  const [renaming, setRenaming] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [menu, setMenu] = useState7(null);
+  const dragFrom = useRef7(null);
+  const [dropTarget, setDropTarget] = useState7(null);
   const commitRename = (cancelOnError) => {
     if (!renaming) return;
     const sheet = sheets.find((s) => s.id === renaming.id);
@@ -1125,30 +1208,59 @@ var SpreadsheetEditor = ({
   onAddColumnClick,
   onColumnHeaderClick,
   onColumnResize,
-  showSheetTabs = false
+  showSheetTabs = false,
+  virtualize = "auto"
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = useRef7(null);
-  const formulaBarRef = useRef7(null);
-  const cellInputRef = useRef7(null);
-  const [resizingColId, setResizingColId] = useState7(null);
-  const [hoveredColId, setHoveredColId] = useState7(null);
-  const [resizeStartX, setResizeStartX] = useState7(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState7(0);
+  const gridRef = useRef8(null);
+  const scrollRef = useRef8(null);
+  const formulaBarRef = useRef8(null);
+  const cellInputRef = useRef8(null);
+  const [resizingColId, setResizingColId] = useState8(null);
+  const [hoveredColId, setHoveredColId] = useState8(null);
+  const [resizeStartX, setResizeStartX] = useState8(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState8(0);
   const view = state.viewModel;
+  const { window: viewWindow, onScroll: handleGridScroll } = useSpreadsheetViewport(scrollRef, view, {
+    virtualize,
+    merges: state.document.table?.merges,
+    activeCell: state.activeCell
+  });
+  const columnSlots = useMemo5(() => {
+    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 = useMemo5(
+    () => columnSlots.flatMap((slot) => slot.kind === "col" ? [slot.viewCol] : []),
+    [columnSlots]
+  );
+  const rowSlots = useMemo5(() => {
+    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] = useState7(null);
-  const [panel, setPanel] = useState7(null);
-  const [listMenu, setListMenu] = useState7(null);
+  const [menu, setMenu] = useState8(null);
+  const [panel, setPanel] = useState8(null);
+  const [listMenu, setListMenu] = useState8(null);
   const overlay = state.conditionalFormatOverlay;
   const filter = state.document.table?.filter;
-  const filteredColIds = useMemo4(
+  const filteredColIds = useMemo5(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = useCallback3((rIdx, cIdx, e) => {
+  const handleCellContextMenu = useCallback4((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
@@ -1157,33 +1269,33 @@ var SpreadsheetEditor = ({
     }
     setMenu({ x: e.clientX, y: e.clientY, items: getSpreadsheetMenuItems(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const nameSuggestions = useMemo4(
+  const nameSuggestions = useMemo5(
     () => state.controller.getNameSuggestions(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.document]
   );
-  const activeRawValue = useMemo4(() => {
+  const activeRawValue = useMemo5(() => {
     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 = useMemo4(
+  const activeSpill = useMemo5(
     () => 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 = useMemo4(() => {
+  const coordLabel = useMemo5(() => {
     if (!state.activeCell) return "--";
     const colName = indexToColName(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = useState7(null);
+  const [formulaDraft, setFormulaDraft] = useState8(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  useEffect5(() => {
+  useEffect6(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -1199,19 +1311,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = useCallback3((rIdx, cIdx, e) => {
+  const handleCellClick = useCallback4((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 = useCallback3((rIdx, cIdx) => {
+  const handleCellDblClick = useCallback4((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = useCallback3((e) => {
+  const handleKeyDown = useCallback4((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1283,12 +1395,12 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const activeListValues = useMemo4(
+  const activeListValues = useMemo5(
     () => 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 = useMemo4(
+  const activeRule = useMemo5(
     () => 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]
@@ -1302,7 +1414,7 @@ var SpreadsheetEditor = ({
     const rect = td?.getBoundingClientRect();
     setListMenu({ x: rect ? rect.left : 0, y: rect ? rect.bottom : 0, row, col, values });
   }
-  useEffect5(() => {
+  useEffect6(() => {
     if (!listMenu) return;
     const close = (e) => {
       if (!e.target?.closest?.('[aria-label="Allowed values"], .spreadsheet-list-arrow')) setListMenu(null);
@@ -1325,11 +1437,11 @@ var SpreadsheetEditor = ({
       else gridRef.current?.focus();
     });
   };
-  const stateRef = useRef7(state);
+  const stateRef = useRef8(state);
   stateRef.current = state;
-  const onColumnResizeRef = useRef7(onColumnResize);
+  const onColumnResizeRef = useRef8(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -1380,7 +1492,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = useCallback3((el, container) => {
+  const measureElementContentWidth = useCallback4((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -1428,7 +1540,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = useCallback3((colId, colIndex) => {
+  const autoFitColumn = useCallback4((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -1464,12 +1576,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = useCallback3((colId, colIndex, e) => {
+  const handleResizeDblClick = useCallback4((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = useCallback3((colId, colIndex, e) => {
+  const handleHeaderDblClick = useCallback4((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1554,10 +1666,19 @@ var SpreadsheetEditor = ({
           inputMessage.inputTitle && /* @__PURE__ */ jsx7("span", { className: "mr-1 font-semibold text-foreground", children: inputMessage.inputTitle }),
           inputMessage.inputMessage
         ] }),
-        /* @__PURE__ */ jsx7("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ jsxs7("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
+        /* @__PURE__ */ jsx7("div", { ref: scrollRef, className: "relative flex-1 overflow-auto", onScroll: handleGridScroll, children: /* @__PURE__ */ jsxs7("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__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
             /* @__PURE__ */ jsx7("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__ */ jsxs7(
+            columnSlots.map((slot) => slot.kind === "space" ? /* @__PURE__ */ jsx7(
+              "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__ */ jsxs7(
               "th",
               {
                 "data-col": cIdx,
@@ -1616,7 +1737,7 @@ var SpreadsheetEditor = ({
                 ]
               },
               col.id
-            )),
+            ))(slot.viewCol)),
             onAddColumnClick && /* @__PURE__ */ jsx7(
               "th",
               {
@@ -1627,13 +1748,21 @@ var SpreadsheetEditor = ({
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx7("tbody", { children: view.rows.map((viewRow) => {
+          /* @__PURE__ */ jsx7("tbody", { children: rowSlots.map((rowSlot) => {
+            if (rowSlot.kind === "space") {
+              return /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", "data-spacer": "", style: { height: rowSlot.height }, children: /* @__PURE__ */ jsx7("td", { colSpan: columnSlots.length + 2, style: { padding: 0, border: 0 } }) }, rowSlot.key);
+            }
+            const viewRow = rowSlot.viewRow;
             if (viewRow.kind === "group") {
               return /* @__PURE__ */ jsx7(
                 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
@@ -1658,7 +1787,9 @@ var SpreadsheetEditor = ({
                       children: displayRowIndex + 1
                     }
                   ),
-                  view.columns.map((viewCol) => {
+                  columnSlots.map((slot) => {
+                    if (slot.kind === "space") return /* @__PURE__ */ jsx7("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;
@@ -1841,19 +1972,19 @@ var SpreadsheetEditor = ({
 };
 
 // src/spreadsheet/NameManager.tsx
-import { useMemo as useMemo5, useState as useState8 } from "react";
+import { useMemo as useMemo6, useState as useState9 } from "react";
 import { getNameManagerRows, parseFormula } from "@pixerate/editor/spreadsheet";
 import { jsx as jsx8, jsxs as jsxs8 } from "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 = useMemo5(
+  const rows = useMemo6(
     () => getNameManagerRows(controller),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, state.document, state.names]
   );
-  const [draft, setDraft] = useState8(EMPTY_DRAFT);
-  const [error, setError] = useState8(null);
+  const [draft, setDraft] = useState9(EMPTY_DRAFT);
+  const [error, setError] = useState9(null);
   const edit = (row) => {
     setError(null);
     setDraft({
@@ -2004,9 +2135,10 @@ export {
   SpreadsheetValidationDialog,
   SpreadsheetConditionalFormatPanel,
   SpreadsheetDataValidationPanel,
+  useSpreadsheetViewport,
   FormulaHints,
   SheetTabs,
   SpreadsheetEditor,
   NameManager
 };
-//# sourceMappingURL=chunk-JR5ZBDR7.js.map
+//# sourceMappingURL=chunk-34HEZX7J.js.map