@extend-ai/react-xlsx 0.8.0 → 0.8.2

package/dist/index.cjs

@@ -4268,13 +4268,36 @@ function parseWorkbookTableMetadata(archive, workbookSheets) {
       }
       return [{
         displayName: tableNode.getAttribute("displayName") ?? void 0,
+        headerRowCount: parseWorkbookTableCount(tableNode.getAttribute("headerRowCount"), 1),
         headerRowCellStyle: tableNode.getAttribute("headerRowCellStyle") ?? void 0,
         name: tableNode.getAttribute("name") ?? void 0,
-        reference: tableNode.getAttribute("ref") ?? void 0
+        reference: tableNode.getAttribute("ref") ?? void 0,
+        totalsRowCount: parseWorkbookTableCount(tableNode.getAttribute("totalsRowCount"), 0),
+        totalsRowShown: parseWorkbookTableBoolean(tableNode.getAttribute("totalsRowShown"), false)
       }];
     });
   });
 }
+function parseWorkbookTableCount(value, fallback) {
+  if (value === null) {
+    return fallback;
+  }
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+}
+function parseWorkbookTableBoolean(value, fallback) {
+  if (value === null) {
+    return fallback;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "0" || normalized === "false" || normalized === "") {
+    return false;
+  }
+  if (normalized === "1" || normalized === "true") {
+    return true;
+  }
+  return fallback;
+}
 function parseSqrefRanges(sqref) {
   if (!sqref) {
     return [];
@@ -6286,6 +6309,84 @@ function resizeImageRect(rect, handle, deltaX, deltaY, minimumSize = 16) {
   return { height, left, top, width };
 }
 
+// src/safe-calculate.ts
+var SHEET_REF_REGEX = /'((?:[^']|'')+)'!|([A-Za-z_\u0080-\uFFFF][\w.\u0080-\uFFFF]*)!/g;
+function collectReferencedSheetNames(workbook) {
+  const referenced = /* @__PURE__ */ new Set();
+  for (let sheetIdx = 0; sheetIdx < workbook.sheetCount; sheetIdx += 1) {
+    let sheet;
+    try {
+      sheet = workbook.getSheet(sheetIdx);
+    } catch {
+      continue;
+    }
+    const cells = sheet.formulaCells;
+    if (!Array.isArray(cells)) {
+      continue;
+    }
+    for (const cell of cells) {
+      const formula = cell?.formula;
+      if (!formula) {
+        continue;
+      }
+      SHEET_REF_REGEX.lastIndex = 0;
+      let match;
+      while ((match = SHEET_REF_REGEX.exec(formula)) !== null) {
+        const raw = match[1] ?? match[2];
+        if (!raw) {
+          continue;
+        }
+        referenced.add(raw.replace(/''/g, "'"));
+      }
+    }
+  }
+  return referenced;
+}
+function hasUnresolvedSheetReferences(workbook) {
+  let names;
+  try {
+    names = workbook.sheetNames;
+  } catch {
+    return false;
+  }
+  const known = new Set(names);
+  const referenced = collectReferencedSheetNames(workbook);
+  for (const name of referenced) {
+    if (!known.has(name)) {
+      return true;
+    }
+  }
+  return false;
+}
+function safeCalculate(workbook, options = {}) {
+  if (hasUnresolvedSheetReferences(workbook)) {
+    return { workbook, calculated: false, skipReason: "unresolved-sheet-refs" };
+  }
+  try {
+    workbook.calculate();
+    return { workbook, calculated: true, skipReason: null };
+  } catch (err) {
+    console.warn("[react-xlsx] workbook.calculate() trapped; falling back to cached formula values", err);
+    if (options.reparse) {
+      try {
+        return { workbook: options.reparse(), calculated: false, skipReason: "calculate-trapped" };
+      } catch (reparseErr) {
+        console.warn("[react-xlsx] workbook reparse after calculate trap failed", reparseErr);
+      }
+    }
+    return { workbook, calculated: false, skipReason: "calculate-trapped" };
+  }
+}
+function tryRecalculate(workbook) {
+  try {
+    workbook.calculate();
+    return { calculated: true, error: null };
+  } catch (err) {
+    console.warn("[react-xlsx] workbook.calculate() trapped during recalculation", err);
+    return { calculated: false, error: err };
+  }
+}
+
 // src/wasm.ts
 var wasmModulePromise = null;
 function getSheetsWasmModule() {
@@ -6881,17 +6982,18 @@ function rangeContainsCell(range, cell) {
 function mapWorksheetTables(worksheet, metadataForSheet) {
   const rawTables = worksheet?.tables ?? [];
   return rawTables.flatMap((table, index) => {
-    const reference = typeof table.reference === "string" ? table.reference : "";
-    const parsedRange = parseA1RangeReference2(reference);
-    if (!parsedRange) {
-      return [];
-    }
     const rawColumns = Array.isArray(table.columns) ? table.columns : [];
     const rawName = typeof table.name === "string" ? table.name : `Table${index + 1}`;
     const rawDisplayName = typeof table.displayName === "string" ? table.displayName : typeof table.name === "string" ? table.name : `Table ${index + 1}`;
     const metadata = metadataForSheet?.find(
-      (entry) => entry.name && entry.name === rawName || entry.displayName && entry.displayName === rawDisplayName || entry.reference && entry.reference === reference
+      (entry) => entry.name && entry.name === rawName || entry.displayName && entry.displayName === rawDisplayName || entry.reference && entry.reference === table.reference
     );
+    const rawReference = typeof table.reference === "string" ? table.reference : "";
+    const reference = metadata?.reference ?? rawReference;
+    const parsedRange = parseA1RangeReference2(reference);
+    if (!parsedRange) {
+      return [];
+    }
     return [{
       columns: rawColumns.map((column, columnIndex) => ({
         id: typeof column.id === "number" ? column.id ?? columnIndex + 1 : columnIndex + 1,
@@ -6900,17 +7002,47 @@ function mapWorksheetTables(worksheet, metadataForSheet) {
       })),
       displayName: rawDisplayName,
       end: parsedRange.end,
-      headerRowCount: typeof table.headerRowCount === "number" ? table.headerRowCount : 1,
+      headerRowCount: metadata?.headerRowCount ?? resolveWorkbookTableCount(table.headerRowCount, 1),
       headerRowCellStyle: metadata?.headerRowCellStyle,
       name: rawName,
       reference,
       start: parsedRange.start,
       styleInfo: table.styleInfo,
-      totalsRowCount: typeof table.totalsRowCount === "number" ? table.totalsRowCount : 0,
-      totalsRowShown: Boolean(table.totalsRowShown)
+      totalsRowCount: metadata?.totalsRowCount ?? resolveWorkbookTableCount(table.totalsRowCount, 0),
+      totalsRowShown: metadata?.totalsRowShown ?? resolveWorkbookTableBoolean(table.totalsRowShown)
     }];
   });
 }
+function resolveWorkbookTableCount(value, fallback) {
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseInt(value, 10);
+    if (Number.isFinite(parsed) && parsed >= 0) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+function resolveWorkbookTableBoolean(value) {
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return value !== 0;
+  }
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "0" || normalized === "false" || normalized === "") {
+      return false;
+    }
+    if (normalized === "1" || normalized === "true") {
+      return true;
+    }
+  }
+  return false;
+}
 function fileStem(fileName) {
   const normalized = fileName.trim();
   const lastDot = normalized.lastIndexOf(".");
@@ -7041,7 +7173,17 @@ async function resolveWorkbookBuffer({ file, src }, signal) {
   if (file) {
     buffer = file;
   } else if (src) {
-    const response = await fetch(src, { signal });
+    let response;
+    try {
+      response = await fetch(src, { signal });
+    } catch (error) {
+      if (isAbortError(error)) {
+        throw error;
+      }
+      throw new Error(
+        "Failed to fetch workbook. The remote URL may be blocked by CORS, unavailable, or not directly downloadable from the browser."
+      );
+    }
     if (!response.ok) {
       throw new Error(`Failed to fetch workbook (status ${response.status})`);
     }
@@ -7053,18 +7195,21 @@ async function resolveWorkbookBuffer({ file, src }, signal) {
 }
 async function parseWorkbookBuffer(buffer) {
   const wasmModule = await getSheetsWasmModule();
-  const workbook = wasmModule.Workbook.fromBytes(new Uint8Array(buffer));
+  const initialWorkbook = wasmModule.Workbook.fromBytes(new Uint8Array(buffer));
   let totalFormulas = 0;
-  for (let index = 0; index < workbook.sheetCount; index += 1) {
-    totalFormulas += workbook.getSheet(index).formulaCount;
+  for (let index = 0; index < initialWorkbook.sheetCount; index += 1) {
+    totalFormulas += initialWorkbook.getSheet(index).formulaCount;
   }
   const shouldAutoCalculate = totalFormulas <= FORMULA_COUNT_THRESHOLD;
-  if (shouldAutoCalculate) {
-    workbook.calculate();
+  if (!shouldAutoCalculate) {
+    return { shouldAutoCalculate, workbook: initialWorkbook };
   }
+  const result = safeCalculate(initialWorkbook, {
+    reparse: () => wasmModule.Workbook.fromBytes(new Uint8Array(buffer))
+  });
   return {
-    shouldAutoCalculate,
-    workbook
+    shouldAutoCalculate: result.calculated,
+    workbook: result.workbook
   };
 }
 function scheduleLowPriorityTask(task) {
@@ -7597,6 +7742,7 @@ function downloadUrl(src, fileName) {
 }
 function useXlsxViewerController(options) {
   const {
+    allowResizeInReadOnly = false,
     deferLoadingAboveBytes = DEFAULT_DEFER_LOADING_ABOVE_BYTES,
     file,
     fileName,
@@ -7650,6 +7796,7 @@ function useXlsxViewerController(options) {
   const displayFileName = React.useMemo(() => resolveDisplayFileName(src, fileName), [fileName, src]);
   const shouldDeferLoading = deferLoadingAboveBytes > 0;
   const readOnly = requestedReadOnly || forcedReadOnly;
+  const canResizeReadOnly = requestedReadOnly && allowResizeInReadOnly && !forcedReadOnly;
   const workerSupported = useWorker && typeof Worker !== "undefined";
   const shouldUseWorker = workerSupported && forcedReadOnly;
   const shouldForceReadOnlyForBuffer = React.useCallback((bufferByteLength) => !requestedReadOnly && readOnlyAboveBytes > 0 && bufferByteLength > readOnlyAboveBytes, [readOnlyAboveBytes, requestedReadOnly]);
@@ -8303,7 +8450,10 @@ function useXlsxViewerController(options) {
     if (!shouldAutoCalculate) {
       return;
     }
-    targetWorkbook.calculate();
+    const result = tryRecalculate(targetWorkbook);
+    if (!result.calculated) {
+      setShouldAutoCalculate(false);
+    }
   }, [shouldAutoCalculate]);
   const getActiveWorksheet = React.useCallback(() => {
     if (!workbook || !activeSheet) {
@@ -8940,11 +9090,15 @@ function useXlsxViewerController(options) {
     if (!workbook) {
       return;
     }
-    workbook.calculate();
-    refreshWorkbookState(workbook);
+    const result = tryRecalculate(workbook);
+    if (result.calculated) {
+      refreshWorkbookState(workbook);
+      return;
+    }
+    setShouldAutoCalculate(false);
   }, [refreshWorkbookState, workbook]);
   const resizeColumn = React.useCallback((col, widthPx) => {
-    if (readOnly || !workbook || !activeSheet) {
+    if (readOnly && !canResizeReadOnly || !workbook || !activeSheet) {
       return;
     }
     recordHistoryBeforeMutation();
@@ -8954,9 +9108,9 @@ function useXlsxViewerController(options) {
       pxToSheetColumnWidth(resolveContentSheetAxisPixels(widthPx, activeSheet.showGridLines))
     );
     refreshWorkbookState(workbook);
-  }, [activeSheet, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
+  }, [activeSheet, canResizeReadOnly, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
   const resizeRow = React.useCallback((row, heightPx) => {
-    if (readOnly || !workbook || !activeSheet) {
+    if (readOnly && !canResizeReadOnly || !workbook || !activeSheet) {
       return;
     }
     recordHistoryBeforeMutation();
@@ -8966,7 +9120,7 @@ function useXlsxViewerController(options) {
       pxToSheetRowHeight(resolveContentSheetAxisPixels(heightPx, activeSheet.showGridLines))
     );
     refreshWorkbookState(workbook);
-  }, [activeSheet, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
+  }, [activeSheet, canResizeReadOnly, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
   const resolveAnchoredObjectRect = React.useCallback((anchor, worksheet) => {
     const resolveAxisSum = (index, getSize) => {
       let total = 0;
@@ -19944,6 +20098,109 @@ function resolveSelectionColors({
     stroke
   };
 }
+function buildFullCanvasDirtyRect(width, height) {
+  if (width <= 0 || height <= 0) {
+    return [];
+  }
+  return [{
+    height,
+    left: 0,
+    top: 0,
+    width
+  }];
+}
+function intersectsCanvasDirtyRects(left, top, width, height, dirtyRects) {
+  if (dirtyRects.length === 0 || width <= 0 || height <= 0) {
+    return false;
+  }
+  const right = left + width;
+  const bottom = top + height;
+  return dirtyRects.some((dirtyRect) => left < dirtyRect.left + dirtyRect.width && right > dirtyRect.left && top < dirtyRect.top + dirtyRect.height && bottom > dirtyRect.top);
+}
+function blitCanvasWithScrollDelta(canvas, context, bufferCanvas, dpr, width, height, deltaX, deltaY) {
+  if (width <= 0 || height <= 0) {
+    return [];
+  }
+  const clampedDeltaX = Math.max(-width, Math.min(width, deltaX));
+  const clampedDeltaY = Math.max(-height, Math.min(height, deltaY));
+  if (Math.abs(clampedDeltaX) < 0.01 && Math.abs(clampedDeltaY) < 0.01) {
+    return [];
+  }
+  if (Math.abs(clampedDeltaX) >= width || Math.abs(clampedDeltaY) >= height) {
+    return null;
+  }
+  const deviceWidth = Math.max(1, Math.round(width * dpr));
+  const deviceHeight = Math.max(1, Math.round(height * dpr));
+  if (bufferCanvas.width !== deviceWidth) {
+    bufferCanvas.width = deviceWidth;
+  }
+  if (bufferCanvas.height !== deviceHeight) {
+    bufferCanvas.height = deviceHeight;
+  }
+  const bufferContext = bufferCanvas.getContext("2d");
+  if (!bufferContext) {
+    return null;
+  }
+  bufferContext.setTransform(1, 0, 0, 1, 0, 0);
+  bufferContext.clearRect(0, 0, deviceWidth, deviceHeight);
+  bufferContext.drawImage(canvas, 0, 0);
+  const deltaDeviceX = clampedDeltaX * dpr;
+  const deltaDeviceY = clampedDeltaY * dpr;
+  const overlapDeviceWidth = deviceWidth - Math.abs(deltaDeviceX);
+  const overlapDeviceHeight = deviceHeight - Math.abs(deltaDeviceY);
+  if (overlapDeviceWidth <= 0 || overlapDeviceHeight <= 0) {
+    return null;
+  }
+  const sourceX = deltaDeviceX > 0 ? deltaDeviceX : 0;
+  const sourceY = deltaDeviceY > 0 ? deltaDeviceY : 0;
+  const destinationX = deltaDeviceX > 0 ? 0 : -deltaDeviceX;
+  const destinationY = deltaDeviceY > 0 ? 0 : -deltaDeviceY;
+  context.setTransform(1, 0, 0, 1, 0, 0);
+  context.drawImage(
+    bufferCanvas,
+    sourceX,
+    sourceY,
+    overlapDeviceWidth,
+    overlapDeviceHeight,
+    destinationX,
+    destinationY,
+    overlapDeviceWidth,
+    overlapDeviceHeight
+  );
+  context.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const dirtyRects = [];
+  if (clampedDeltaX > 0) {
+    dirtyRects.push({
+      height,
+      left: Math.max(0, width - clampedDeltaX),
+      top: 0,
+      width: Math.min(width, clampedDeltaX)
+    });
+  } else if (clampedDeltaX < 0) {
+    dirtyRects.push({
+      height,
+      left: 0,
+      top: 0,
+      width: Math.min(width, -clampedDeltaX)
+    });
+  }
+  if (clampedDeltaY > 0) {
+    dirtyRects.push({
+      height: Math.min(height, clampedDeltaY),
+      left: 0,
+      top: Math.max(0, height - clampedDeltaY),
+      width
+    });
+  } else if (clampedDeltaY < 0) {
+    dirtyRects.push({
+      height: Math.min(height, -clampedDeltaY),
+      left: 0,
+      top: 0,
+      width
+    });
+  }
+  return dirtyRects;
+}
 function buildConditionalFormatRuleKey(rule) {
   return `${rule.kind}:${rule.priority}:${rule.ranges.map((range) => `${range.start.row}:${range.start.col}-${range.end.row}:${range.end.col}`).join("|")}`;
 }
@@ -20322,6 +20579,7 @@ function GridRow({
   actualRow,
   editingCell,
   editingValue,
+  frozenRowHeaderZIndex,
   getCellData,
   headerLabelLiveScale,
   leadingSpacerWidth,
@@ -20338,6 +20596,7 @@ function GridRow({
   readOnly,
   renderCellAdornment,
   rowHeight,
+  rowHeaderZIndex,
   rowHeaderWidth,
   stickyLeftByCol,
   stickyTop,
@@ -20370,7 +20629,7 @@ function GridRow({
           textAlign: "center",
           userSelect: "none",
           width: rowHeaderWidth,
-          zIndex: stickyTop !== void 0 ? 45 : 35
+          zIndex: stickyTop !== void 0 ? frozenRowHeaderZIndex : rowHeaderZIndex
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -20803,8 +21062,20 @@ function XlsxGrid({
   const topBodyCanvasRef = React4.useRef(null);
   const leftBodyCanvasRef = React4.useRef(null);
   const cornerBodyCanvasRef = React4.useRef(null);
-  const topHeaderCanvasRef = React4.useRef(null);
-  const leftHeaderCanvasRef = React4.useRef(null);
+  const bodyBlitBufferCanvasRef = React4.useRef({
+    corner: null,
+    left: null,
+    scroll: null,
+    top: null
+  });
+  const headerBlitBufferCanvasRef = React4.useRef({
+    left: null,
+    top: null
+  });
+  const topFrozenHeaderCanvasRef = React4.useRef(null);
+  const topScrollHeaderCanvasRef = React4.useRef(null);
+  const leftFrozenHeaderCanvasRef = React4.useRef(null);
+  const leftScrollHeaderCanvasRef = React4.useRef(null);
   const cornerHeaderCanvasRef = React4.useRef(null);
   const selectionOverlayRef = React4.useRef(null);
   const activeValidationOverlayRef = React4.useRef(null);
@@ -21008,16 +21279,31 @@ function XlsxGrid({
       liveZoomTranslateX2,
       liveZoomTranslateY2
     );
-    const topHeaderCanvas = topHeaderCanvasRef.current;
-    if (topHeaderCanvas) {
-      topHeaderCanvas.style.transform = scrollDeltaX !== 0 ? `translate3d(${scrollDeltaX}px, 0, 0)` : "";
-      topHeaderCanvas.style.willChange = scrollDeltaX !== 0 ? "transform" : "";
-    }
-    const leftHeaderCanvas = leftHeaderCanvasRef.current;
-    if (leftHeaderCanvas) {
-      leftHeaderCanvas.style.transform = scrollDeltaY !== 0 ? `translate3d(0, ${scrollDeltaY}px, 0)` : "";
-      leftHeaderCanvas.style.willChange = scrollDeltaY !== 0 ? "transform" : "";
-    }
+    applyCanvasTransform(
+      topScrollHeaderCanvasRef.current,
+      scrollDeltaX + liveZoomTranslateX2,
+      liveZoomTranslateY2
+    );
+    applyCanvasTransform(
+      topFrozenHeaderCanvasRef.current,
+      liveZoomTranslateX2,
+      liveZoomTranslateY2
+    );
+    applyCanvasTransform(
+      leftScrollHeaderCanvasRef.current,
+      liveZoomTranslateX2,
+      scrollDeltaY + liveZoomTranslateY2
+    );
+    applyCanvasTransform(
+      leftFrozenHeaderCanvasRef.current,
+      liveZoomTranslateX2,
+      liveZoomTranslateY2
+    );
+    applyCanvasTransform(
+      cornerHeaderCanvasRef.current,
+      liveZoomTranslateX2,
+      liveZoomTranslateY2
+    );
   }, [zoomScale]);
   const updateLiveGestureZoomState = React4.useCallback((nextState) => {
     const resolvedState = typeof nextState === "function" ? nextState(liveGestureZoomRef.current) : nextState;
@@ -21148,6 +21434,22 @@ function XlsxGrid({
       scrollRef.current.style.cursor = "";
     }
   }, []);
+  const getBodyBlitBufferCanvas = React4.useCallback((pane) => {
+    let bufferCanvas = bodyBlitBufferCanvasRef.current[pane];
+    if (!bufferCanvas && typeof document !== "undefined") {
+      bufferCanvas = document.createElement("canvas");
+      bodyBlitBufferCanvasRef.current[pane] = bufferCanvas;
+    }
+    return bufferCanvas;
+  }, []);
+  const getHeaderBlitBufferCanvas = React4.useCallback((axis) => {
+    let bufferCanvas = headerBlitBufferCanvasRef.current[axis];
+    if (!bufferCanvas && typeof document !== "undefined") {
+      bufferCanvas = document.createElement("canvas");
+      headerBlitBufferCanvasRef.current[axis] = bufferCanvas;
+    }
+    return bufferCanvas;
+  }, []);
   const visibleRows = React4.useMemo(() => {
     return buildVisibleAxisIndices(
       activeSheet?.visibleRows ?? [],
@@ -21862,14 +22164,14 @@ function XlsxGrid({
   const handleScrollerScroll = React4.useCallback((event) => {
     const currentScroller = event.currentTarget;
     cachedScrollerRectRef.current = null;
-    syncDrawingViewport(currentScroller, { immediate: !experimentalCanvas });
+    syncDrawingViewport(currentScroller, { immediate: true });
     if (currentScroller.scrollHeight - (currentScroller.scrollTop + currentScroller.clientHeight) < OPEN_GRID_VERTICAL_EDGE_PX) {
       setDisplayRowLimit((current) => current + OPEN_GRID_ROW_GROWTH);
     }
     if (currentScroller.scrollWidth - (currentScroller.scrollLeft + currentScroller.clientWidth) < OPEN_GRID_HORIZONTAL_EDGE_PX) {
       setDisplayColLimit((current) => current + OPEN_GRID_COL_GROWTH);
     }
-  }, [experimentalCanvas, syncDrawingViewport]);
+  }, [syncDrawingViewport]);
   React4.useEffect(() => {
     const scroller = scrollRef.current;
     if (!scroller || !enableGestureZoom) {
@@ -22136,7 +22438,7 @@ function XlsxGrid({
     const geometryCell = resolvePointerCellFromGeometry(clientX, clientY);
     const hitCell = resolvePointerCellFromHitTest(clientX, clientY);
     const actualRow = hitCell && rowIndexByActual.has(hitCell.row) ? hitCell.row : geometryCell?.row;
-    const actualCol = geometryCell?.col ?? hitCell?.col;
+    const actualCol = hitCell?.col ?? geometryCell?.col;
     if (actualRow === void 0 || actualCol === void 0) {
       return null;
     }
@@ -23734,6 +24036,54 @@ function XlsxGrid({
     rowPrefixSums,
     stickyTopByRow
   ]);
+  const canvasColumnHeaderCells = React4.useMemo(
+    () => canvasVisibleColItems.flatMap((column) => {
+      const rect = resolveCanvasColumnHeaderRect(column.actualCol);
+      if (!rect) {
+        return [];
+      }
+      const isFrozen = stickyLeftByCol.has(column.actualCol);
+      return [{
+        actualCol: column.actualCol,
+        height: displayHeaderHeight,
+        isFrozen,
+        left: rect.left,
+        localLeft: rect.left - (isFrozen ? displayRowHeaderWidth : frozenPaneRight),
+        width: rect.width
+      }];
+    }),
+    [
+      canvasVisibleColItems,
+      displayHeaderHeight,
+      displayRowHeaderWidth,
+      frozenPaneRight,
+      resolveCanvasColumnHeaderRect,
+      stickyLeftByCol
+    ]
+  );
+  const canvasRowHeaderCells = React4.useMemo(
+    () => canvasVisibleRowItems.flatMap((row) => {
+      const rect = resolveCanvasRowHeaderRect(row.actualRow);
+      if (!rect) {
+        return [];
+      }
+      const isFrozen = stickyTopByRow.has(row.actualRow);
+      return [{
+        actualRow: row.actualRow,
+        height: rect.height,
+        isFrozen,
+        localTop: rect.top - (isFrozen ? displayHeaderHeight : frozenPaneBottom),
+        top: rect.top
+      }];
+    }),
+    [
+      canvasVisibleRowItems,
+      displayHeaderHeight,
+      frozenPaneBottom,
+      resolveCanvasRowHeaderRect,
+      stickyTopByRow
+    ]
+  );
   const resolveCanvasColumnResizeTarget = React4.useCallback((clientX) => {
     if (!canResizeHeaders) {
       return null;
@@ -23743,17 +24093,26 @@ function XlsxGrid({
       return null;
     }
     const localX = clientX - scrollerRect.left;
-    for (const column of canvasVisibleColItems) {
-      const rect = resolveCanvasColumnHeaderRect(column.actualCol);
-      if (!rect) {
-        continue;
+    for (const column of canvasColumnHeaderCells) {
+      if (Math.abs(localX - (column.left + column.width)) <= CANVAS_RESIZE_HIT_SLOP_PX) {
+        return { actualCol: column.actualCol, width: column.width };
       }
-      if (Math.abs(localX - (rect.left + rect.width)) <= CANVAS_RESIZE_HIT_SLOP_PX) {
-        return { actualCol: column.actualCol, width: rect.width };
+    }
+    return null;
+  }, [canResizeHeaders, canvasColumnHeaderCells]);
+  const resolveCanvasColumnHeaderTarget = React4.useCallback((clientX) => {
+    const scrollerRect = scrollRef.current?.getBoundingClientRect();
+    if (!scrollerRect) {
+      return null;
+    }
+    const localX = clientX - scrollerRect.left;
+    for (const column of canvasColumnHeaderCells) {
+      if (localX >= column.left && localX <= column.left + column.width) {
+        return column.actualCol;
       }
     }
     return null;
-  }, [canResizeHeaders, canvasVisibleColItems, resolveCanvasColumnHeaderRect]);
+  }, [canvasColumnHeaderCells]);
   const resolveCanvasRowResizeTarget = React4.useCallback((clientY) => {
     if (!canResizeHeaders) {
       return null;
@@ -23763,17 +24122,26 @@ function XlsxGrid({
       return null;
     }
     const localY = clientY - scrollerRect.top;
-    for (const row of canvasVisibleRowItems) {
-      const rect = resolveCanvasRowHeaderRect(row.actualRow);
-      if (!rect) {
-        continue;
+    for (const row of canvasRowHeaderCells) {
+      if (Math.abs(localY - (row.top + row.height)) <= CANVAS_RESIZE_HIT_SLOP_PX) {
+        return { actualRow: row.actualRow, height: row.height };
       }
-      if (Math.abs(localY - (rect.top + rect.height)) <= CANVAS_RESIZE_HIT_SLOP_PX) {
-        return { actualRow: row.actualRow, height: rect.height };
+    }
+    return null;
+  }, [canResizeHeaders, canvasRowHeaderCells]);
+  const resolveCanvasRowHeaderTarget = React4.useCallback((clientY) => {
+    const scrollerRect = scrollRef.current?.getBoundingClientRect();
+    if (!scrollerRect) {
+      return null;
+    }
+    const localY = clientY - scrollerRect.top;
+    for (const row of canvasRowHeaderCells) {
+      if (localY >= row.top && localY <= row.top + row.height) {
+        return row.actualRow;
       }
     }
     return null;
-  }, [canResizeHeaders, canvasVisibleRowItems, resolveCanvasRowHeaderRect]);
+  }, [canvasRowHeaderCells]);
   const handleCanvasColumnHeaderPointerMove = React4.useCallback((event) => {
     if (resizeStateRef.current?.type === "column") {
       event.currentTarget.style.cursor = "col-resize";
@@ -23876,17 +24244,17 @@ function XlsxGrid({
       startColumnResize(event.pointerId, resizeTarget.actualCol, resizeTarget.width, event.clientX);
       return;
     }
-    const cell = resolvePointerCellFromClient(event.clientX, event.clientY);
-    if (!cell) {
+    const actualCol = resolveCanvasColumnHeaderTarget(event.clientX);
+    if (actualCol === null) {
       return;
     }
     event.preventDefault();
     focusGrid();
     const currentSelection = selectionRef.current;
-    const anchorCol = event.shiftKey && currentSelection ? currentSelection.start.col : cell.col;
+    const anchorCol = event.shiftKey && currentSelection ? currentSelection.start.col : actualCol;
     const initialRange = normalizeRange2({
       start: { row: firstVisibleRow, col: anchorCol },
-      end: { row: lastVisibleRow, col: cell.col }
+      end: { row: lastVisibleRow, col: actualCol }
     });
     const anchorColIndex = colIndexByActual.get(anchorCol);
     if (anchorColIndex === void 0) {
@@ -23896,7 +24264,7 @@ function XlsxGrid({
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
-      { row: firstVisibleRow, col: cell.col },
+      { row: firstVisibleRow, col: actualCol },
       {
         contentScaleX: 1,
         contentScaleY: 1,
@@ -23917,9 +24285,8 @@ function XlsxGrid({
     firstVisibleRow,
     focusGrid,
     lastVisibleRow,
-    resolveCanvasColumnHeaderRect,
+    resolveCanvasColumnHeaderTarget,
     resolveCanvasColumnResizeTarget,
-    resolvePointerCellFromClient,
     rowPrefixSums,
     startCellSelection
   ]);
@@ -23934,17 +24301,17 @@ function XlsxGrid({
       startRowResize(event.pointerId, resizeTarget.actualRow, resizeTarget.height, event.clientY);
       return;
     }
-    const cell = resolvePointerCellFromClient(event.clientX, event.clientY);
-    if (!cell) {
+    const actualRow = resolveCanvasRowHeaderTarget(event.clientY);
+    if (actualRow === null) {
       return;
     }
     event.preventDefault();
     focusGrid();
     const currentSelection = selectionRef.current;
-    const anchorRow = event.shiftKey && currentSelection ? currentSelection.start.row : cell.row;
+    const anchorRow = event.shiftKey && currentSelection ? currentSelection.start.row : actualRow;
     const initialRange = normalizeRange2({
       start: { row: anchorRow, col: firstVisibleCol },
-      end: { row: cell.row, col: lastVisibleCol }
+      end: { row: actualRow, col: lastVisibleCol }
     });
     const anchorRowIndex = rowIndexByActual.get(anchorRow);
     if (anchorRowIndex === void 0) {
@@ -23954,7 +24321,7 @@ function XlsxGrid({
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
-      { row: cell.row, col: firstVisibleCol },
+      { row: actualRow, col: firstVisibleCol },
       {
         contentScaleX: 1,
         contentScaleY: 1,
@@ -23974,8 +24341,8 @@ function XlsxGrid({
     firstVisibleCol,
     focusGrid,
     lastVisibleCol,
+    resolveCanvasRowHeaderTarget,
     resolveCanvasRowResizeTarget,
-    resolvePointerCellFromClient,
     rowIndexByActual,
     rowPrefixSums,
     startCellSelection
@@ -23985,7 +24352,7 @@ function XlsxGrid({
       return;
     }
     const dpr = typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio || 1);
-    function configureCanvas(canvas, width, height) {
+    function configureCanvas(canvas, width, height, options) {
       if (!canvas) {
         return null;
       }
@@ -24008,7 +24375,9 @@ function XlsxGrid({
         return null;
       }
       context.setTransform(dpr, 0, 0, dpr, 0, 0);
-      context.clearRect(0, 0, width, height);
+      if (options?.clear !== false) {
+        context.clearRect(0, 0, width, height);
+      }
       return context;
     }
     const bodyWidth = Math.max(0, drawingViewport.width);
@@ -24040,12 +24409,24 @@ function XlsxGrid({
       rangeSignature,
       rowHeaderWidth,
       rowSignature: nextBodyCanvasSignature.rowSignature,
+      viewportLeft: drawingViewport.left,
+      viewportTop: drawingViewport.top,
       zoomFactor
     };
     const previousBodyCanvasSignature = paintedBodyCanvasSignatureRef.current;
     const previousHeaderCanvasSignature = paintedHeaderCanvasSignatureRef.current;
+    const previousPaintedViewport = paintedDrawingViewportRef.current;
     const shouldRepaintBody = !(previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bodyHeight === nextBodyCanvasSignature.bodyHeight && previousBodyCanvasSignature.bodyWidth === nextBodyCanvasSignature.bodyWidth && previousBodyCanvasSignature.colSignature === nextBodyCanvasSignature.colSignature && previousBodyCanvasSignature.getCellData === nextBodyCanvasSignature.getCellData && previousBodyCanvasSignature.headerHeight === nextBodyCanvasSignature.headerHeight && previousBodyCanvasSignature.palette === nextBodyCanvasSignature.palette && previousBodyCanvasSignature.rowHeaderWidth === nextBodyCanvasSignature.rowHeaderWidth && previousBodyCanvasSignature.rowSignature === nextBodyCanvasSignature.rowSignature && previousBodyCanvasSignature.zoomFactor === nextBodyCanvasSignature.zoomFactor);
-    const shouldRepaintHeaders = !(previousHeaderCanvasSignature && previousHeaderCanvasSignature.activeSheet === nextHeaderCanvasSignature.activeSheet && previousHeaderCanvasSignature.bodyHeight === nextHeaderCanvasSignature.bodyHeight && previousHeaderCanvasSignature.bodyWidth === nextHeaderCanvasSignature.bodyWidth && previousHeaderCanvasSignature.colSignature === nextHeaderCanvasSignature.colSignature && previousHeaderCanvasSignature.headerHeight === nextHeaderCanvasSignature.headerHeight && previousHeaderCanvasSignature.palette === nextHeaderCanvasSignature.palette && previousHeaderCanvasSignature.rangeSignature === nextHeaderCanvasSignature.rangeSignature && previousHeaderCanvasSignature.rowHeaderWidth === nextHeaderCanvasSignature.rowHeaderWidth && previousHeaderCanvasSignature.rowSignature === nextHeaderCanvasSignature.rowSignature && previousHeaderCanvasSignature.zoomFactor === nextHeaderCanvasSignature.zoomFactor);
+    const shouldRepaintHeaders = !(previousHeaderCanvasSignature && previousHeaderCanvasSignature.activeSheet === nextHeaderCanvasSignature.activeSheet && previousHeaderCanvasSignature.bodyHeight === nextHeaderCanvasSignature.bodyHeight && previousHeaderCanvasSignature.bodyWidth === nextHeaderCanvasSignature.bodyWidth && previousHeaderCanvasSignature.colSignature === nextHeaderCanvasSignature.colSignature && previousHeaderCanvasSignature.headerHeight === nextHeaderCanvasSignature.headerHeight && previousHeaderCanvasSignature.palette === nextHeaderCanvasSignature.palette && previousHeaderCanvasSignature.rangeSignature === nextHeaderCanvasSignature.rangeSignature && previousHeaderCanvasSignature.rowHeaderWidth === nextHeaderCanvasSignature.rowHeaderWidth && previousHeaderCanvasSignature.rowSignature === nextHeaderCanvasSignature.rowSignature && previousHeaderCanvasSignature.viewportLeft === nextHeaderCanvasSignature.viewportLeft && previousHeaderCanvasSignature.viewportTop === nextHeaderCanvasSignature.viewportTop && previousHeaderCanvasSignature.zoomFactor === nextHeaderCanvasSignature.zoomFactor);
+    const canBlitBody = Boolean(
+      shouldRepaintBody && previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bodyHeight === nextBodyCanvasSignature.bodyHeight && previousBodyCanvasSignature.bodyWidth === nextBodyCanvasSignature.bodyWidth && previousBodyCanvasSignature.getCellData === nextBodyCanvasSignature.getCellData && previousBodyCanvasSignature.headerHeight === nextBodyCanvasSignature.headerHeight && previousBodyCanvasSignature.palette === nextBodyCanvasSignature.palette && previousBodyCanvasSignature.rowHeaderWidth === nextBodyCanvasSignature.rowHeaderWidth && previousBodyCanvasSignature.zoomFactor === nextBodyCanvasSignature.zoomFactor
+    );
+    const canBlitTopHeader = Boolean(
+      shouldRepaintHeaders && previousHeaderCanvasSignature && previousHeaderCanvasSignature.activeSheet === nextHeaderCanvasSignature.activeSheet && previousHeaderCanvasSignature.bodyHeight === nextHeaderCanvasSignature.bodyHeight && previousHeaderCanvasSignature.bodyWidth === nextHeaderCanvasSignature.bodyWidth && previousHeaderCanvasSignature.headerHeight === nextHeaderCanvasSignature.headerHeight && previousHeaderCanvasSignature.palette === nextHeaderCanvasSignature.palette && previousHeaderCanvasSignature.rangeSignature === nextHeaderCanvasSignature.rangeSignature && previousHeaderCanvasSignature.rowHeaderWidth === nextHeaderCanvasSignature.rowHeaderWidth && previousHeaderCanvasSignature.zoomFactor === nextHeaderCanvasSignature.zoomFactor
+    );
+    const canBlitLeftHeader = Boolean(
+      shouldRepaintHeaders && previousHeaderCanvasSignature && previousHeaderCanvasSignature.activeSheet === nextHeaderCanvasSignature.activeSheet && previousHeaderCanvasSignature.bodyHeight === nextHeaderCanvasSignature.bodyHeight && previousHeaderCanvasSignature.bodyWidth === nextHeaderCanvasSignature.bodyWidth && previousHeaderCanvasSignature.headerHeight === nextHeaderCanvasSignature.headerHeight && previousHeaderCanvasSignature.palette === nextHeaderCanvasSignature.palette && previousHeaderCanvasSignature.rangeSignature === nextHeaderCanvasSignature.rangeSignature && previousHeaderCanvasSignature.rowHeaderWidth === nextHeaderCanvasSignature.rowHeaderWidth && previousHeaderCanvasSignature.zoomFactor === nextHeaderCanvasSignature.zoomFactor
+    );
     if (!shouldRepaintBody && !shouldRepaintHeaders) {
       return;
     }
@@ -24057,6 +24438,10 @@ function XlsxGrid({
     const leftBodyCanvasHeight2 = scrollBodyCanvasHeight2;
     const cornerBodyCanvasWidth2 = leftBodyCanvasWidth2;
     const cornerBodyCanvasHeight2 = topBodyCanvasHeight2;
+    const topFrozenHeaderCanvasWidth2 = leftBodyCanvasWidth2;
+    const topScrollHeaderCanvasWidth2 = scrollBodyCanvasWidth2;
+    const leftFrozenHeaderCanvasHeight2 = topBodyCanvasHeight2;
+    const leftScrollHeaderCanvasHeight2 = scrollBodyCanvasHeight2;
     const paneBounds = {
       corner: {
         height: cornerBodyCanvasHeight2,
@@ -24084,29 +24469,50 @@ function XlsxGrid({
       }
     };
     const bodyContexts = shouldRepaintBody ? {
-      corner: configureCanvas(cornerBodyCanvasRef.current, cornerBodyCanvasWidth2, cornerBodyCanvasHeight2),
-      left: configureCanvas(leftBodyCanvasRef.current, leftBodyCanvasWidth2, leftBodyCanvasHeight2),
-      scroll: configureCanvas(scrollBodyCanvasRef.current, scrollBodyCanvasWidth2, scrollBodyCanvasHeight2),
-      top: configureCanvas(topBodyCanvasRef.current, topBodyCanvasWidth2, topBodyCanvasHeight2)
+      corner: configureCanvas(cornerBodyCanvasRef.current, cornerBodyCanvasWidth2, cornerBodyCanvasHeight2, { clear: !canBlitBody }),
+      left: configureCanvas(leftBodyCanvasRef.current, leftBodyCanvasWidth2, leftBodyCanvasHeight2, { clear: !canBlitBody }),
+      scroll: configureCanvas(scrollBodyCanvasRef.current, scrollBodyCanvasWidth2, scrollBodyCanvasHeight2, { clear: !canBlitBody }),
+      top: configureCanvas(topBodyCanvasRef.current, topBodyCanvasWidth2, topBodyCanvasHeight2, { clear: !canBlitBody })
     } : {
       corner: null,
       left: null,
       scroll: null,
       top: null
     };
-    const topHeaderContext = shouldRepaintHeaders ? configureCanvas(topHeaderCanvasRef.current, bodyWidth, headerHeight) : null;
-    const leftHeaderContext = shouldRepaintHeaders ? configureCanvas(leftHeaderCanvasRef.current, rowHeaderWidth, bodyHeight) : null;
+    const topHeaderContexts = shouldRepaintHeaders ? {
+      frozen: configureCanvas(topFrozenHeaderCanvasRef.current, topFrozenHeaderCanvasWidth2, headerHeight),
+      scroll: configureCanvas(topScrollHeaderCanvasRef.current, topScrollHeaderCanvasWidth2, headerHeight, { clear: !canBlitTopHeader })
+    } : {
+      frozen: null,
+      scroll: null
+    };
+    const leftHeaderContexts = shouldRepaintHeaders ? {
+      frozen: configureCanvas(leftFrozenHeaderCanvasRef.current, rowHeaderWidth, leftFrozenHeaderCanvasHeight2),
+      scroll: configureCanvas(leftScrollHeaderCanvasRef.current, rowHeaderWidth, leftScrollHeaderCanvasHeight2, { clear: !canBlitLeftHeader })
+    } : {
+      frozen: null,
+      scroll: null
+    };
     const cornerContext = shouldRepaintHeaders ? configureCanvas(cornerHeaderCanvasRef.current, rowHeaderWidth, headerHeight) : null;
-    if (shouldRepaintBody && (!bodyContexts.scroll || !bodyContexts.top || !bodyContexts.left || !bodyContexts.corner) || shouldRepaintHeaders && (!topHeaderContext || !leftHeaderContext || !cornerContext)) {
+    if (shouldRepaintBody && (!bodyContexts.scroll || !bodyContexts.top || !bodyContexts.left || !bodyContexts.corner) || shouldRepaintHeaders && (!cornerContext || topFrozenHeaderCanvasWidth2 > 0 && !topHeaderContexts.frozen || topScrollHeaderCanvasWidth2 > 0 && !topHeaderContexts.scroll || leftFrozenHeaderCanvasHeight2 > 0 && !leftHeaderContexts.frozen || leftScrollHeaderCanvasHeight2 > 0 && !leftHeaderContexts.scroll)) {
       return;
     }
     const showGridLines = activeSheet?.showGridLines ?? true;
+    const sheetSurface = resolveSheetSurface(activeSheet, palette);
     const deferredSpillTextsByPane = {
       corner: [],
       left: [],
       scroll: [],
       top: []
     };
+    const bodyDirtyRectsByPane = {
+      corner: [],
+      left: [],
+      scroll: [],
+      top: []
+    };
+    let topScrollHeaderDirtyRects = buildFullCanvasDirtyRect(topScrollHeaderCanvasWidth2, headerHeight);
+    let leftScrollHeaderDirtyRects = buildFullCanvasDirtyRect(rowHeaderWidth, leftScrollHeaderCanvasHeight2);
     const cellPaneOrder = ["scroll", "top", "left", "corner"];
     if (shouldRepaintBody) {
       for (const pane of Object.keys(bodyContexts)) {
@@ -24115,14 +24521,44 @@ function XlsxGrid({
         if (!context || bounds.width <= 0 || bounds.height <= 0) {
           continue;
         }
-        context.fillStyle = resolveSheetSurface(activeSheet, palette);
-        context.fillRect(0, 0, bounds.width, bounds.height);
+        let dirtyRects = buildFullCanvasDirtyRect(bounds.width, bounds.height);
+        if (canBlitBody) {
+          const bufferCanvas = getBodyBlitBufferCanvas(pane);
+          const deltaX = pane === "scroll" || pane === "top" ? drawingViewport.left - previousPaintedViewport.left : 0;
+          const deltaY = pane === "scroll" || pane === "left" ? drawingViewport.top - previousPaintedViewport.top : 0;
+          if (bufferCanvas) {
+            const blittedDirtyRects = blitCanvasWithScrollDelta(
+              pane === "corner" ? cornerBodyCanvasRef.current : pane === "left" ? leftBodyCanvasRef.current : pane === "top" ? topBodyCanvasRef.current : scrollBodyCanvasRef.current,
+              context,
+              bufferCanvas,
+              dpr,
+              bounds.width,
+              bounds.height,
+              deltaX,
+              deltaY
+            );
+            if (blittedDirtyRects) {
+              dirtyRects = blittedDirtyRects;
+            }
+          }
+        } else {
+          context.clearRect(0, 0, bounds.width, bounds.height);
+        }
+        bodyDirtyRectsByPane[pane] = dirtyRects;
+        if (dirtyRects.length === 0) {
+          continue;
+        }
+        context.fillStyle = sheetSurface;
+        for (const dirtyRect of dirtyRects) {
+          context.fillRect(dirtyRect.left, dirtyRect.top, dirtyRect.width, dirtyRect.height);
+        }
       }
       for (const pane of cellPaneOrder) {
         const paneContext = bodyContexts[pane];
         const paneBoundsForCell = paneBounds[pane];
+        const paneDirtyRects = bodyDirtyRectsByPane[pane];
         const paneAxisItems = canvasPaneAxisItems[pane];
-        if (!paneContext || paneBoundsForCell.width <= 0 || paneBoundsForCell.height <= 0 || paneAxisItems.rows.length === 0 || paneAxisItems.cols.length === 0) {
+        if (!paneContext || paneDirtyRects.length === 0 || paneBoundsForCell.width <= 0 || paneBoundsForCell.height <= 0 || paneAxisItems.rows.length === 0 || paneAxisItems.cols.length === 0) {
           continue;
         }
         const drawnMergedAnchorKeys = /* @__PURE__ */ new Set();
@@ -24162,11 +24598,14 @@ function XlsxGrid({
             if (localRect.left + drawableWidth < 0 || localRect.top + localRect.height < 0 || localRect.left > paneBoundsForCell.width || localRect.top > paneBoundsForCell.height) {
               continue;
             }
+            if (!intersectsCanvasDirtyRects(localRect.left, localRect.top, drawableWidth, localRect.height, paneDirtyRects)) {
+              continue;
+            }
             const cellStyle = cellData.style;
             const canvasCellStyle = cellData.canvas ?? buildCanvasCellStyleCache(cellStyle);
-            const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellStyle.backgroundColor === "string" ? cellStyle.backgroundColor : resolveSheetSurface(activeSheet, palette));
+            const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellStyle.backgroundColor === "string" ? cellStyle.backgroundColor : sheetSurface);
             const gradientFill = !cellData.conditionalColorScale && typeof cellStyle.backgroundImage === "string" ? resolveCanvasGradientFill(paneContext, localRect, cellStyle.backgroundImage) : null;
-            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellStyle.backgroundColor === "string" && cellStyle.backgroundColor !== resolveSheetSurface(activeSheet, palette);
+            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellStyle.backgroundColor === "string" && cellStyle.backgroundColor !== sheetSurface;
             paneContext.fillStyle = gradientFill ?? fillColor;
             paneContext.fillRect(localRect.left, localRect.top, localRect.width, localRect.height);
             if (cellData.chartHighlight) {
@@ -24520,57 +24959,141 @@ function XlsxGrid({
         }
       }
     }
-    if (shouldRepaintHeaders && topHeaderContext && leftHeaderContext && cornerContext) {
-      topHeaderContext.fillStyle = palette.headerSurface;
-      topHeaderContext.fillRect(0, 0, bodyWidth, headerHeight);
-      topHeaderContext.strokeStyle = palette.border;
-      topHeaderContext.lineWidth = 1;
-      for (const colItem of canvasVisibleColItems) {
-        const rect = resolveCanvasColumnHeaderRect(colItem.actualCol);
-        if (!rect || rect.left + rect.width < displayRowHeaderWidth || rect.left > bodyWidth) {
+    if (shouldRepaintHeaders && cornerContext) {
+      const topFrozenHeaderContext = topHeaderContexts.frozen;
+      const topScrollHeaderContext = topHeaderContexts.scroll;
+      const leftFrozenHeaderContext = leftHeaderContexts.frozen;
+      const leftScrollHeaderContext = leftHeaderContexts.scroll;
+      if (canBlitTopHeader) {
+        const bufferCanvas = getHeaderBlitBufferCanvas("top");
+        if (bufferCanvas && topScrollHeaderContext && topScrollHeaderCanvasRef.current) {
+          const blittedDirtyRects = blitCanvasWithScrollDelta(
+            topScrollHeaderCanvasRef.current,
+            topScrollHeaderContext,
+            bufferCanvas,
+            dpr,
+            topScrollHeaderCanvasWidth2,
+            headerHeight,
+            drawingViewport.left - previousPaintedViewport.left,
+            0
+          );
+          if (blittedDirtyRects) {
+            topScrollHeaderDirtyRects = blittedDirtyRects;
+          }
+        }
+      }
+      if (canBlitLeftHeader) {
+        const bufferCanvas = getHeaderBlitBufferCanvas("left");
+        if (bufferCanvas && leftScrollHeaderContext && leftScrollHeaderCanvasRef.current) {
+          const blittedDirtyRects = blitCanvasWithScrollDelta(
+            leftScrollHeaderCanvasRef.current,
+            leftScrollHeaderContext,
+            bufferCanvas,
+            dpr,
+            rowHeaderWidth,
+            leftScrollHeaderCanvasHeight2,
+            0,
+            drawingViewport.top - previousPaintedViewport.top
+          );
+          if (blittedDirtyRects) {
+            leftScrollHeaderDirtyRects = blittedDirtyRects;
+          }
+        }
+      }
+      if (topFrozenHeaderContext && topFrozenHeaderCanvasWidth2 > 0) {
+        topFrozenHeaderContext.fillStyle = palette.headerSurface;
+        topFrozenHeaderContext.fillRect(0, 0, topFrozenHeaderCanvasWidth2, headerHeight);
+      }
+      if (topScrollHeaderContext && topScrollHeaderCanvasWidth2 > 0) {
+        topScrollHeaderContext.fillStyle = palette.headerSurface;
+        for (const dirtyRect of topScrollHeaderDirtyRects) {
+          topScrollHeaderContext.fillRect(dirtyRect.left, dirtyRect.top, dirtyRect.width, dirtyRect.height);
+        }
+      }
+      if (topFrozenHeaderContext) {
+        topFrozenHeaderContext.strokeStyle = palette.border;
+        topFrozenHeaderContext.lineWidth = 1;
+      }
+      if (topScrollHeaderContext) {
+        topScrollHeaderContext.strokeStyle = palette.border;
+        topScrollHeaderContext.lineWidth = 1;
+      }
+      for (const column of canvasColumnHeaderCells) {
+        const paneContext = column.isFrozen ? topFrozenHeaderContext : topScrollHeaderContext;
+        if (!paneContext) {
+          continue;
+        }
+        if (column.localLeft + column.width < 0 || column.localLeft > (column.isFrozen ? topFrozenHeaderCanvasWidth2 : topScrollHeaderCanvasWidth2)) {
+          continue;
+        }
+        if (!column.isFrozen && !intersectsCanvasDirtyRects(column.localLeft, 0, column.width, column.height, topScrollHeaderDirtyRects)) {
+          continue;
+        }
+        const selected = normalizedVisibleRange && column.actualCol >= normalizedVisibleRange.start.col && column.actualCol <= normalizedVisibleRange.end.col;
+        paneContext.fillStyle = selected ? selectionHeaderSurface : palette.headerSurface;
+        paneContext.fillRect(column.localLeft, 0, column.width, column.height);
+        paneContext.strokeStyle = palette.border;
+        paneContext.beginPath();
+        paneContext.moveTo(column.localLeft + column.width - 0.5, 0);
+        paneContext.lineTo(column.localLeft + column.width - 0.5, column.height);
+        paneContext.moveTo(column.localLeft, column.height - 0.5);
+        paneContext.lineTo(column.localLeft + column.width, column.height - 0.5);
+        paneContext.stroke();
+        paneContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
+        paneContext.fillStyle = palette.mutedText;
+        paneContext.textAlign = "center";
+        paneContext.textBaseline = "middle";
+        paneContext.fillText(
+          columnLabel2(column.actualCol),
+          column.localLeft + column.width / 2,
+          column.height / 2
+        );
+      }
+      if (leftFrozenHeaderContext && leftFrozenHeaderCanvasHeight2 > 0) {
+        leftFrozenHeaderContext.fillStyle = palette.rowHeaderSurface;
+        leftFrozenHeaderContext.fillRect(0, 0, rowHeaderWidth, leftFrozenHeaderCanvasHeight2);
+      }
+      if (leftScrollHeaderContext && leftScrollHeaderCanvasHeight2 > 0) {
+        leftScrollHeaderContext.fillStyle = palette.rowHeaderSurface;
+        for (const dirtyRect of leftScrollHeaderDirtyRects) {
+          leftScrollHeaderContext.fillRect(dirtyRect.left, dirtyRect.top, dirtyRect.width, dirtyRect.height);
+        }
+      }
+      if (leftFrozenHeaderContext) {
+        leftFrozenHeaderContext.strokeStyle = palette.border;
+        leftFrozenHeaderContext.lineWidth = 1;
+      }
+      if (leftScrollHeaderContext) {
+        leftScrollHeaderContext.strokeStyle = palette.border;
+        leftScrollHeaderContext.lineWidth = 1;
+      }
+      for (const row of canvasRowHeaderCells) {
+        const paneContext = row.isFrozen ? leftFrozenHeaderContext : leftScrollHeaderContext;
+        if (!paneContext) {
           continue;
         }
-        const selected = normalizedVisibleRange && colItem.actualCol >= normalizedVisibleRange.start.col && colItem.actualCol <= normalizedVisibleRange.end.col;
-        topHeaderContext.fillStyle = selected ? selectionHeaderSurface : palette.headerSurface;
-        topHeaderContext.fillRect(rect.left, 0, rect.width, headerHeight);
-        topHeaderContext.strokeStyle = palette.border;
-        topHeaderContext.beginPath();
-        topHeaderContext.moveTo(rect.left + rect.width - 0.5, 0);
-        topHeaderContext.lineTo(rect.left + rect.width - 0.5, headerHeight);
-        topHeaderContext.moveTo(rect.left, headerHeight - 0.5);
-        topHeaderContext.lineTo(rect.left + rect.width, headerHeight - 0.5);
-        topHeaderContext.stroke();
-        topHeaderContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
-        topHeaderContext.fillStyle = palette.mutedText;
-        topHeaderContext.textAlign = "center";
-        topHeaderContext.textBaseline = "middle";
-        topHeaderContext.fillText(columnLabel2(colItem.actualCol), rect.left + rect.width / 2, headerHeight / 2);
-      }
-      leftHeaderContext.fillStyle = palette.rowHeaderSurface;
-      leftHeaderContext.fillRect(0, 0, rowHeaderWidth, bodyHeight);
-      leftHeaderContext.strokeStyle = palette.border;
-      leftHeaderContext.lineWidth = 1;
-      for (const rowItem of canvasVisibleRowItems) {
-        const rect = resolveCanvasRowHeaderRect(rowItem.actualRow);
-        if (!rect || rect.top + rect.height < displayHeaderHeight || rect.top > bodyHeight) {
+        if (row.localTop + row.height < 0 || row.localTop > (row.isFrozen ? leftFrozenHeaderCanvasHeight2 : leftScrollHeaderCanvasHeight2)) {
           continue;
         }
-        const selected = normalizedVisibleRange && rowItem.actualRow >= normalizedVisibleRange.start.row && rowItem.actualRow <= normalizedVisibleRange.end.row;
-        leftHeaderContext.fillStyle = selected ? selectionHeaderSurface : palette.rowHeaderSurface;
-        leftHeaderContext.fillRect(0, rect.top, rowHeaderWidth, rect.height);
-        leftHeaderContext.beginPath();
-        leftHeaderContext.moveTo(0, rect.top + rect.height - 0.5);
-        leftHeaderContext.lineTo(rowHeaderWidth, rect.top + rect.height - 0.5);
-        leftHeaderContext.moveTo(rowHeaderWidth - 0.5, rect.top);
-        leftHeaderContext.lineTo(rowHeaderWidth - 0.5, rect.top + rect.height);
-        leftHeaderContext.stroke();
-        leftHeaderContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
-        leftHeaderContext.fillStyle = palette.mutedText;
-        leftHeaderContext.textAlign = "center";
-        leftHeaderContext.textBaseline = "middle";
-        leftHeaderContext.fillText(`${rowItem.actualRow + 1}`, rowHeaderWidth / 2, rect.top + rect.height / 2);
-      }
-      cornerContext.fillStyle = palette.rowHeaderSurface;
+        if (!row.isFrozen && !intersectsCanvasDirtyRects(0, row.localTop, rowHeaderWidth, row.height, leftScrollHeaderDirtyRects)) {
+          continue;
+        }
+        const selected = normalizedVisibleRange && row.actualRow >= normalizedVisibleRange.start.row && row.actualRow <= normalizedVisibleRange.end.row;
+        paneContext.fillStyle = selected ? selectionHeaderSurface : palette.rowHeaderSurface;
+        paneContext.fillRect(0, row.localTop, rowHeaderWidth, row.height);
+        paneContext.beginPath();
+        paneContext.moveTo(0, row.localTop + row.height - 0.5);
+        paneContext.lineTo(rowHeaderWidth, row.localTop + row.height - 0.5);
+        paneContext.moveTo(rowHeaderWidth - 0.5, row.localTop);
+        paneContext.lineTo(rowHeaderWidth - 0.5, row.localTop + row.height);
+        paneContext.stroke();
+        paneContext.font = `600 ${11 * zoomFactor}px ui-sans-serif, system-ui, sans-serif`;
+        paneContext.fillStyle = palette.mutedText;
+        paneContext.textAlign = "center";
+        paneContext.textBaseline = "middle";
+        paneContext.fillText(`${row.actualRow + 1}`, rowHeaderWidth / 2, row.localTop + row.height / 2);
+      }
+      cornerContext.fillStyle = palette.headerSurface;
       cornerContext.fillRect(0, 0, rowHeaderWidth, headerHeight);
       cornerContext.strokeStyle = palette.border;
       cornerContext.lineWidth = 1;
@@ -24592,7 +25115,9 @@ function XlsxGrid({
   }, [
     activeSheet,
     applyCanvasViewportCompensation,
+    canvasColumnHeaderCells,
     canvasPaneAxisItems,
+    canvasRowHeaderCells,
     canvasVisibleColItems,
     canvasVisibleRowItems,
     colIndexByActual,
@@ -24607,11 +25132,13 @@ function XlsxGrid({
     drawingViewport.height,
     drawingViewport.width,
     experimentalCanvas,
+    frozenPaneBottom,
+    frozenPaneRight,
     getCellData,
+    getBodyBlitBufferCanvas,
+    getHeaderBlitBufferCanvas,
     palette,
     resolveCellDisplayRect,
-    resolveCanvasColumnHeaderRect,
-    resolveCanvasRowHeaderRect,
     resolveMergeAnchorCell,
     resizeGuide,
     rowIndexByActual,
@@ -24849,7 +25376,18 @@ function XlsxGrid({
   const canvasSelectionTransition = shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1), width 120ms cubic-bezier(0.22, 1, 0.36, 1), height 120ms cubic-bezier(0.22, 1, 0.36, 1), opacity 100ms linear" : "none";
   const rowColSpan = renderedCols.length + 1 + (leadingColumnSpacerWidth > 0 ? 1 : 0) + (trailingColumnSpacerWidth > 0 ? 1 : 0);
   const gutterSeparatorShadow = `inset -1px 0 0 ${palette.border}, inset 0 -1px 0 ${palette.border}`;
-  const canvasHeaderOverlayZIndex = 1e5;
+  const maxDrawingOverlayZIndex = Math.max(
+    0,
+    ...shapes.map((shape) => shape.zIndex + 20),
+    ...formControls.map((control) => control.zIndex + 20),
+    ...images.map((image) => image.zIndex + 22),
+    ...charts.map((chart) => chart.zIndex + 22)
+  );
+  const rowHeaderOverlayZIndex = Math.max(35, maxDrawingOverlayZIndex + 1);
+  const canvasHeaderOverlayZIndex = Math.max(50, rowHeaderOverlayZIndex + 1);
+  const stickyHeaderOverlayZIndex = canvasHeaderOverlayZIndex + 1;
+  const cornerHeaderOverlayZIndex = canvasHeaderOverlayZIndex + 2;
+  const frozenRowHeaderOverlayZIndex = rowHeaderOverlayZIndex;
   const headerCellStyle = scaleCssProperties({
     backgroundColor: palette.headerSurface,
     borderBottom: "none",
@@ -24866,7 +25404,7 @@ function XlsxGrid({
     top: 0,
     userSelect: "none",
     whiteSpace: "nowrap",
-    zIndex: 50
+    zIndex: canvasHeaderOverlayZIndex
   }, zoomFactor);
   const columnResizeHandleStyle = scaleCssProperties({
     backgroundColor: "transparent",
@@ -24905,6 +25443,10 @@ function XlsxGrid({
   const leftBodyCanvasHeight = scrollBodyCanvasHeight;
   const cornerBodyCanvasWidth = leftBodyCanvasWidth;
   const cornerBodyCanvasHeight = topBodyCanvasHeight;
+  const topFrozenHeaderCanvasWidth = leftBodyCanvasWidth;
+  const topScrollHeaderCanvasWidth = scrollBodyCanvasWidth;
+  const leftFrozenHeaderCanvasHeight = topBodyCanvasHeight;
+  const leftScrollHeaderCanvasHeight = scrollBodyCanvasHeight;
   const canvasBodyBaseStyle = {
     cursor: "cell",
     pointerEvents: "auto",
@@ -24940,22 +25482,38 @@ function XlsxGrid({
     top: displayHeaderHeight,
     zIndex: 31
   };
-  const canvasTopHeaderStyle = {
+  const canvasHeaderBaseStyle = {
     cursor: "default",
-    display: drawingViewport.width > 0 && drawingViewport.height > 0 ? "block" : "none",
-    left: 0,
     pointerEvents: "auto",
     position: "absolute",
+    transformOrigin: "0 0"
+  };
+  const canvasTopFrozenHeaderStyle = {
+    ...canvasHeaderBaseStyle,
+    display: topFrozenHeaderCanvasWidth > 0 && drawingViewport.height > 0 ? "block" : "none",
+    left: displayRowHeaderWidth,
+    top: 0,
+    zIndex: stickyHeaderOverlayZIndex
+  };
+  const canvasTopScrollHeaderStyle = {
+    ...canvasHeaderBaseStyle,
+    display: topScrollHeaderCanvasWidth > 0 && drawingViewport.height > 0 ? "block" : "none",
+    left: frozenPaneRight,
     top: 0,
     zIndex: canvasHeaderOverlayZIndex
   };
-  const canvasLeftHeaderStyle = {
-    cursor: "default",
-    display: drawingViewport.width > 0 && drawingViewport.height > 0 ? "block" : "none",
+  const canvasLeftFrozenHeaderStyle = {
+    ...canvasHeaderBaseStyle,
+    display: leftFrozenHeaderCanvasHeight > 0 && drawingViewport.width > 0 ? "block" : "none",
     left: 0,
-    pointerEvents: "auto",
-    position: "absolute",
-    top: 0,
+    top: displayHeaderHeight,
+    zIndex: stickyHeaderOverlayZIndex
+  };
+  const canvasLeftScrollHeaderStyle = {
+    ...canvasHeaderBaseStyle,
+    display: leftScrollHeaderCanvasHeight > 0 && drawingViewport.width > 0 ? "block" : "none",
+    left: 0,
+    top: frozenPaneBottom,
     zIndex: canvasHeaderOverlayZIndex
   };
   const canvasCornerHeaderStyle = {
@@ -24964,7 +25522,8 @@ function XlsxGrid({
     pointerEvents: "none",
     position: "absolute",
     top: 0,
-    zIndex: canvasHeaderOverlayZIndex + 1
+    transformOrigin: "0 0",
+    zIndex: cornerHeaderOverlayZIndex
   };
   const editingOverlayRect = experimentalCanvas && editingCell ? resolveCellDisplayRect(editingCell) : null;
   const activeCellAdornment = experimentalCanvas && activeCell ? renderCellAdornment(activeCell) : null;
@@ -26110,7 +26669,7 @@ function XlsxGrid({
                             pointerEvents: "none",
                             position: "absolute",
                             top: 0,
-                            transform: `translate(${-drawingViewport.left}px, ${-drawingViewport.top}px)`,
+                            transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
                             width: totalWidth
                           },
                           children: paneDrawingNodes.scroll
@@ -26125,7 +26684,7 @@ function XlsxGrid({
                             pointerEvents: "none",
                             position: "absolute",
                             top: 0,
-                            transform: `translate(${-drawingViewport.left}px, ${-displayHeaderHeight}px)`,
+                            transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
                             width: totalWidth
                           },
                           children: paneDrawingNodes.top
@@ -26140,7 +26699,7 @@ function XlsxGrid({
                             pointerEvents: "none",
                             position: "absolute",
                             top: 0,
-                            transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top}px)`,
+                            transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
                             width: totalWidth
                           },
                           children: paneDrawingNodes.left
@@ -26167,21 +26726,41 @@ function XlsxGrid({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "canvas",
                       {
-                        ref: topHeaderCanvasRef,
+                        ref: topFrozenHeaderCanvasRef,
                         onPointerLeave: handleCanvasHeaderPointerLeave,
                         onPointerMove: handleCanvasColumnHeaderPointerMove,
                         onPointerDown: handleCanvasColumnHeaderPointerDown,
-                        style: canvasTopHeaderStyle
+                        style: canvasTopFrozenHeaderStyle
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "canvas",
+                      {
+                        ref: topScrollHeaderCanvasRef,
+                        onPointerLeave: handleCanvasHeaderPointerLeave,
+                        onPointerMove: handleCanvasColumnHeaderPointerMove,
+                        onPointerDown: handleCanvasColumnHeaderPointerDown,
+                        style: canvasTopScrollHeaderStyle
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "canvas",
+                      {
+                        ref: leftFrozenHeaderCanvasRef,
+                        onPointerLeave: handleCanvasHeaderPointerLeave,
+                        onPointerMove: handleCanvasRowHeaderPointerMove,
+                        onPointerDown: handleCanvasRowHeaderPointerDown,
+                        style: canvasLeftFrozenHeaderStyle
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "canvas",
                       {
-                        ref: leftHeaderCanvasRef,
+                        ref: leftScrollHeaderCanvasRef,
                         onPointerLeave: handleCanvasHeaderPointerLeave,
                         onPointerMove: handleCanvasRowHeaderPointerMove,
                         onPointerDown: handleCanvasRowHeaderPointerDown,
-                        style: canvasLeftHeaderStyle
+                        style: canvasLeftScrollHeaderStyle
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
@@ -26278,7 +26857,7 @@ function XlsxGrid({
                         )),
                         trailingColumnSpacerWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: trailingColumnSpacerWidth } }) : null
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { style: { position: "sticky", top: 0, zIndex: 50 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { style: { position: "sticky", top: 0, zIndex: canvasHeaderOverlayZIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                           "th",
                           {
@@ -26287,7 +26866,7 @@ function XlsxGrid({
                               backgroundColor: palette.headerSurface,
                               left: 0,
                               width: displayRowHeaderWidth,
-                              zIndex: 60
+                              zIndex: cornerHeaderOverlayZIndex
                             }
                           }
                         ),
@@ -26301,7 +26880,7 @@ function XlsxGrid({
                             style: {
                               ...headerCellStyle,
                               left: stickyLeftByCol.get(column.actualCol),
-                              zIndex: stickyLeftByCol.has(column.actualCol) ? 55 : headerCellStyle.zIndex
+                              zIndex: stickyLeftByCol.has(column.actualCol) ? stickyHeaderOverlayZIndex : headerCellStyle.zIndex
                             },
                             children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
                               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -26356,6 +26935,7 @@ function XlsxGrid({
                                 actualRow,
                                 editingCell,
                                 editingValue,
+                                frozenRowHeaderZIndex: frozenRowHeaderOverlayZIndex,
                                 getCellData,
                                 leadingSpacerWidth: leadingColumnSpacerWidth,
                                 onCellClick: handleCellClick,
@@ -26372,6 +26952,7 @@ function XlsxGrid({
                                 readOnly,
                                 renderCellAdornment,
                                 rowHeight: virtualRow.size,
+                                rowHeaderZIndex: rowHeaderOverlayZIndex,
                                 rowHeaderWidth: displayRowHeaderWidth,
                                 stickyLeftByCol,
                                 stickyTop: stickyTopByRow.get(actualRow),