@extend-ai/react-xlsx 0.7.0 → 0.8.1

package/dist/index.cjs

@@ -41,6 +41,7 @@ __export(index_exports, {
   useXlsxViewerImages: () => useXlsxViewerImages,
   useXlsxViewerSelection: () => useXlsxViewerSelection,
   useXlsxViewerTables: () => useXlsxViewerTables,
+  useXlsxViewerThumbnails: () => useXlsxViewerThumbnails,
   useXlsxViewerZoom: () => useXlsxViewerZoom
 });
 module.exports = __toCommonJS(index_exports);
@@ -4267,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 [];
@@ -6880,17 +6904,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,
@@ -6899,17 +6924,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(".");
@@ -7040,7 +7095,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})`);
     }
@@ -7596,6 +7661,7 @@ function downloadUrl(src, fileName) {
 }
 function useXlsxViewerController(options) {
   const {
+    allowResizeInReadOnly = false,
     deferLoadingAboveBytes = DEFAULT_DEFER_LOADING_ABOVE_BYTES,
     file,
     fileName,
@@ -7649,6 +7715,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]);
@@ -8943,7 +9010,7 @@ function useXlsxViewerController(options) {
     refreshWorkbookState(workbook);
   }, [refreshWorkbookState, workbook]);
   const resizeColumn = React.useCallback((col, widthPx) => {
-    if (readOnly || !workbook || !activeSheet) {
+    if (readOnly && !canResizeReadOnly || !workbook || !activeSheet) {
       return;
     }
     recordHistoryBeforeMutation();
@@ -8953,9 +9020,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();
@@ -8965,7 +9032,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;
@@ -16348,6 +16415,13 @@ var IMAGE_MIN_SIZE_PX = 16;
 var IMAGE_HANDLE_SIZE_PX = 10;
 var CANVAS_RESIZE_HIT_SLOP_PX = 8;
 var CANVAS_VIEWPORT_OVERSCAN_PX = 240;
+var THUMBNAIL_DEFAULT_MAX_DIMENSION = 192;
+var THUMBNAIL_FALLBACK_ROWS = 12;
+var THUMBNAIL_FALLBACK_COLS = 8;
+var THUMBNAIL_MAX_ROWS = 200;
+var THUMBNAIL_MAX_COLS = 80;
+var THUMBNAIL_MAX_SOURCE_HEIGHT_PX = 900;
+var THUMBNAIL_MAX_SOURCE_WIDTH_PX = 1440;
 var LIVE_ZOOM_COMMIT_IDLE_MS = 48;
 var WHEEL_ZOOM_SENSITIVITY = 25e-5;
 var WHEEL_LINE_DELTA_PX = 16;
@@ -18354,6 +18428,97 @@ function resolveImageHandleStyle(position, stroke, surface, scale = 1) {
 function useViewerPalette(isDark = false) {
   return isDark ? DARK_PALETTE : LIGHT_PALETTE;
 }
+function normalizeThumbnailResolution(resolution) {
+  if (typeof resolution === "number" && Number.isFinite(resolution) && resolution > 0) {
+    return {
+      maxHeight: resolution,
+      maxWidth: resolution
+    };
+  }
+  const resolvedObject = typeof resolution === "object" && resolution ? resolution : void 0;
+  return {
+    maxHeight: resolvedObject?.maxHeight && Number.isFinite(resolvedObject.maxHeight) && resolvedObject.maxHeight > 0 ? resolvedObject.maxHeight : THUMBNAIL_DEFAULT_MAX_DIMENSION,
+    maxWidth: resolvedObject?.maxWidth && Number.isFinite(resolvedObject.maxWidth) && resolvedObject.maxWidth > 0 ? resolvedObject.maxWidth : THUMBNAIL_DEFAULT_MAX_DIMENSION
+  };
+}
+function resolveThumbnailOutputSize(sourceWidth, sourceHeight, resolution) {
+  const normalized = normalizeThumbnailResolution(resolution);
+  const safeSourceWidth = Math.max(1, sourceWidth);
+  const safeSourceHeight = Math.max(1, sourceHeight);
+  const scale = Math.min(
+    normalized.maxWidth / safeSourceWidth,
+    normalized.maxHeight / safeSourceHeight,
+    1
+  );
+  return {
+    height: Math.max(1, Math.round(safeSourceHeight * scale)),
+    maxHeight: normalized.maxHeight,
+    maxWidth: normalized.maxWidth,
+    scale,
+    width: Math.max(1, Math.round(safeSourceWidth * scale))
+  };
+}
+function resolveThumbnailAxisIndices({
+  fallbackCount,
+  getSizePx,
+  maxCount,
+  maxLogicalPixels,
+  maxUsedIndex,
+  minUsedIndex,
+  precomputed
+}) {
+  const sourceIndices = precomputed.length > 0 ? precomputed : Array.from({
+    length: Math.max(fallbackCount, Math.max(0, maxUsedIndex + 1))
+  }, (_, index) => index);
+  const hasUsedRange = maxUsedIndex >= minUsedIndex && maxUsedIndex >= 0;
+  const preferredStart = hasUsedRange ? Math.max(0, minUsedIndex) : 0;
+  const preferredEnd = hasUsedRange ? maxUsedIndex : Math.max(0, preferredStart + fallbackCount - 1);
+  const picked = [];
+  let totalSize = 0;
+  for (const actualIndex of sourceIndices) {
+    if (actualIndex < preferredStart) {
+      continue;
+    }
+    if (hasUsedRange && actualIndex > preferredEnd) {
+      break;
+    }
+    const size = Math.max(1, getSizePx(actualIndex));
+    picked.push(actualIndex);
+    totalSize += size;
+    if (picked.length >= maxCount || totalSize >= maxLogicalPixels) {
+      break;
+    }
+  }
+  if (picked.length > 0) {
+    return picked;
+  }
+  for (const actualIndex of sourceIndices) {
+    const size = Math.max(1, getSizePx(actualIndex));
+    picked.push(actualIndex);
+    totalSize += size;
+    if (picked.length >= fallbackCount || picked.length >= maxCount || totalSize >= maxLogicalPixels) {
+      break;
+    }
+  }
+  return picked.length > 0 ? picked : [0];
+}
+function buildThumbnailAxisItems(actualIndices, getSizePx) {
+  const items = [];
+  let offset = 0;
+  for (const actualIndex of actualIndices) {
+    const size = Math.max(1, getSizePx(actualIndex));
+    items.push({
+      actualIndex,
+      size,
+      start: offset
+    });
+    offset += size;
+  }
+  return {
+    items,
+    totalSize: offset
+  };
+}
 function columnLabel2(col) {
   let label = "";
   let nextValue = col;
@@ -19260,7 +19425,6 @@ function getTableHeaderColumn(table, row, col) {
   return table.columns[index] ?? null;
 }
 function DefaultTableHeaderMenu({
-  close,
   direction,
   sortAscending,
   sortDescending
@@ -19282,10 +19446,7 @@ function DefaultTableHeaderMenu({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
-            onClick: () => {
-              sortAscending();
-              close();
-            },
+            onClick: sortAscending,
             style: {
               background: direction === "ascending" ? "var(--xlsx-menu-active)" : "transparent",
               border: "none",
@@ -19303,10 +19464,7 @@ function DefaultTableHeaderMenu({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
-            onClick: () => {
-              sortDescending();
-              close();
-            },
+            onClick: sortDescending,
             style: {
               background: direction === "descending" ? "var(--xlsx-menu-active)" : "transparent",
               border: "none",
@@ -19325,6 +19483,25 @@ function DefaultTableHeaderMenu({
     }
   );
 }
+function resolveTableHeaderTriggerStyle(palette, zoomFactor) {
+  return {
+    alignItems: "center",
+    background: "transparent",
+    border: "none",
+    color: palette.mutedText,
+    cursor: "pointer",
+    display: "inline-flex",
+    fontSize: 10 * zoomFactor,
+    height: 16 * zoomFactor,
+    justifyContent: "center",
+    padding: 0,
+    position: "absolute",
+    right: 4 * zoomFactor,
+    top: 3 * zoomFactor,
+    width: 16 * zoomFactor,
+    zIndex: 6
+  };
+}
 function SegmentedControl({
   items,
   onValueChange,
@@ -19833,6 +20010,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("|")}`;
 }
@@ -20692,8 +20972,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);
@@ -20897,16 +21189,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;
@@ -21037,6 +21344,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 ?? [],
@@ -21751,14 +22074,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) {
@@ -23539,6 +23862,30 @@ function XlsxGrid({
       return null;
     }
     const direction = sortState && sortState.tableName === table.name && sortState.columnIndex === tableColumn.index ? sortState.direction : null;
+    const triggerIcon = direction === "ascending" ? "\u25B2" : direction === "descending" ? "\u25BC" : "\u25BE";
+    if (renderTableHeaderMenu) {
+      return renderTableHeaderMenu({
+        cell,
+        column: tableColumn,
+        direction,
+        sortAscending: () => sortTable(table.name, tableColumn.index, "ascending"),
+        sortDescending: () => sortTable(table.name, tableColumn.index, "descending"),
+        table,
+        triggerIcon,
+        triggerProps: {
+          "aria-haspopup": "menu",
+          "aria-label": `Open menu for ${tableColumn.name}`,
+          onClick: (event) => {
+            event.stopPropagation();
+          },
+          onPointerDown: (event) => {
+            event.stopPropagation();
+          },
+          style: resolveTableHeaderTriggerStyle(palette, zoomFactor),
+          type: "button"
+        }
+      });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
@@ -23554,27 +23901,13 @@ function XlsxGrid({
           );
         },
         style: {
-          alignItems: "center",
-          background: "transparent",
-          border: "none",
-          color: palette.mutedText,
-          cursor: "pointer",
-          display: "inline-flex",
-          fontSize: 10 * zoomFactor,
-          height: 16 * zoomFactor,
-          justifyContent: "center",
-          padding: 0,
-          position: "absolute",
-          right: 4 * zoomFactor,
-          top: 3 * zoomFactor,
-          width: 16 * zoomFactor,
-          zIndex: 6
+          ...resolveTableHeaderTriggerStyle(palette, zoomFactor)
         },
         type: "button",
-        children: direction === "ascending" ? "\u25B2" : direction === "descending" ? "\u25BC" : "\u25BE"
+        children: triggerIcon
       }
     );
-  }, [effectiveTables, palette.mutedText, sortState, zoomFactor]);
+  }, [effectiveTables, palette, renderTableHeaderMenu, sortState, sortTable, zoomFactor]);
   const resolveCanvasColumnHeaderRect = React4.useCallback((actualCol) => {
     const colIndex = colIndexByActual.get(actualCol);
     if (colIndex === void 0) {
@@ -23613,6 +23946,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;
@@ -23622,17 +24003,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;
@@ -23642,17 +24032,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";
@@ -23755,17 +24154,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) {
@@ -23775,7 +24174,7 @@ function XlsxGrid({
       event.pointerId,
       { row: firstVisibleRow, col: anchorCol },
       "column",
-      { row: firstVisibleRow, col: cell.col },
+      { row: firstVisibleRow, col: actualCol },
       {
         contentScaleX: 1,
         contentScaleY: 1,
@@ -23796,9 +24195,8 @@ function XlsxGrid({
     firstVisibleRow,
     focusGrid,
     lastVisibleRow,
-    resolveCanvasColumnHeaderRect,
+    resolveCanvasColumnHeaderTarget,
     resolveCanvasColumnResizeTarget,
-    resolvePointerCellFromClient,
     rowPrefixSums,
     startCellSelection
   ]);
@@ -23813,17 +24211,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) {
@@ -23833,7 +24231,7 @@ function XlsxGrid({
       event.pointerId,
       { row: anchorRow, col: firstVisibleCol },
       "row",
-      { row: cell.row, col: firstVisibleCol },
+      { row: actualRow, col: firstVisibleCol },
       {
         contentScaleX: 1,
         contentScaleY: 1,
@@ -23853,8 +24251,8 @@ function XlsxGrid({
     firstVisibleCol,
     focusGrid,
     lastVisibleCol,
+    resolveCanvasRowHeaderTarget,
     resolveCanvasRowResizeTarget,
-    resolvePointerCellFromClient,
     rowIndexByActual,
     rowPrefixSums,
     startCellSelection
@@ -23864,7 +24262,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;
       }
@@ -23887,7 +24285,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);
@@ -23919,12 +24319,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;
     }
@@ -23936,6 +24348,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,
@@ -23963,29 +24379,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)) {
@@ -23994,14 +24431,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();
@@ -24041,11 +24508,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) {
@@ -24399,55 +24869,139 @@ 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;
+        }
+        if (row.localTop + row.height < 0 || row.localTop > (row.isFrozen ? leftFrozenHeaderCanvasHeight2 : leftScrollHeaderCanvasHeight2)) {
           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.isFrozen && !intersectsCanvasDirtyRects(0, row.localTop, rowHeaderWidth, row.height, leftScrollHeaderDirtyRects)) {
           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);
+        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.rowHeaderSurface;
       cornerContext.fillRect(0, 0, rowHeaderWidth, headerHeight);
@@ -24471,7 +25025,9 @@ function XlsxGrid({
   }, [
     activeSheet,
     applyCanvasViewportCompensation,
+    canvasColumnHeaderCells,
     canvasPaneAxisItems,
+    canvasRowHeaderCells,
     canvasVisibleColItems,
     canvasVisibleRowItems,
     colIndexByActual,
@@ -24486,11 +25042,13 @@ function XlsxGrid({
     drawingViewport.height,
     drawingViewport.width,
     experimentalCanvas,
+    frozenPaneBottom,
+    frozenPaneRight,
     getCellData,
+    getBodyBlitBufferCanvas,
+    getHeaderBlitBufferCanvas,
     palette,
     resolveCellDisplayRect,
-    resolveCanvasColumnHeaderRect,
-    resolveCanvasRowHeaderRect,
     resolveMergeAnchorCell,
     resizeGuide,
     rowIndexByActual,
@@ -24784,6 +25342,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",
@@ -24819,22 +25381,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: canvasHeaderOverlayZIndex + 1
+  };
+  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: canvasHeaderOverlayZIndex + 1
+  };
+  const canvasLeftScrollHeaderStyle = {
+    ...canvasHeaderBaseStyle,
+    display: leftScrollHeaderCanvasHeight > 0 && drawingViewport.width > 0 ? "block" : "none",
+    left: 0,
+    top: frozenPaneBottom,
     zIndex: canvasHeaderOverlayZIndex
   };
   const canvasCornerHeaderStyle = {
@@ -24843,6 +25421,7 @@ function XlsxGrid({
     pointerEvents: "none",
     position: "absolute",
     top: 0,
+    transformOrigin: "0 0",
     zIndex: canvasHeaderOverlayZIndex + 1
   };
   const editingOverlayRect = experimentalCanvas && editingCell ? resolveCellDisplayRect(editingCell) : null;
@@ -25989,7 +26568,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
@@ -26004,7 +26583,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
@@ -26019,7 +26598,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
@@ -26046,21 +26625,41 @@ function XlsxGrid({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "canvas",
                       {
-                        ref: topHeaderCanvasRef,
+                        ref: topFrozenHeaderCanvasRef,
+                        onPointerLeave: handleCanvasHeaderPointerLeave,
+                        onPointerMove: handleCanvasColumnHeaderPointerMove,
+                        onPointerDown: handleCanvasColumnHeaderPointerDown,
+                        style: canvasTopFrozenHeaderStyle
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "canvas",
+                      {
+                        ref: topScrollHeaderCanvasRef,
                         onPointerLeave: handleCanvasHeaderPointerLeave,
                         onPointerMove: handleCanvasColumnHeaderPointerMove,
                         onPointerDown: handleCanvasColumnHeaderPointerDown,
-                        style: canvasTopHeaderStyle
+                        style: canvasTopScrollHeaderStyle
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "canvas",
                       {
-                        ref: leftHeaderCanvasRef,
+                        ref: leftFrozenHeaderCanvasRef,
                         onPointerLeave: handleCanvasHeaderPointerLeave,
                         onPointerMove: handleCanvasRowHeaderPointerMove,
                         onPointerDown: handleCanvasRowHeaderPointerDown,
-                        style: canvasLeftHeaderStyle
+                        style: canvasLeftFrozenHeaderStyle
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "canvas",
+                      {
+                        ref: leftScrollHeaderCanvasRef,
+                        onPointerLeave: handleCanvasHeaderPointerLeave,
+                        onPointerMove: handleCanvasRowHeaderPointerMove,
+                        onPointerDown: handleCanvasRowHeaderPointerDown,
+                        style: canvasLeftScrollHeaderStyle
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { ref: cornerHeaderCanvasRef, style: canvasCornerHeaderStyle })
@@ -26370,7 +26969,7 @@ function XlsxGrid({
                     }
                   }
                 ) : null,
-                openTableMenuState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                !renderTableHeaderMenu && openTableMenuState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
                     ref: tableMenuRef,
@@ -26381,22 +26980,23 @@ function XlsxGrid({
                       top: openTableMenuState.top,
                       zIndex: 50
                     },
-                    children: renderTableHeaderMenu ? renderTableHeaderMenu({
-                      close: () => setOpenTableMenu(null),
-                      column: openTableMenuState.column,
-                      direction: sortState && sortState.tableName === openTableMenuState.table.name && sortState.columnIndex === openTableMenuState.column.index ? sortState.direction : null,
-                      sortAscending: () => sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "ascending"),
-                      sortDescending: () => sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "descending"),
-                      table: openTableMenuState.table
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       DefaultTableHeaderMenu,
                       {
-                        close: () => setOpenTableMenu(null),
+                        cell: { col: openTableMenuState.column.index + openTableMenuState.table.start.col, row: openTableMenuState.table.start.row },
                         column: openTableMenuState.column,
                         direction: sortState && sortState.tableName === openTableMenuState.table.name && sortState.columnIndex === openTableMenuState.column.index ? sortState.direction : null,
-                        sortAscending: () => sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "ascending"),
-                        sortDescending: () => sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "descending"),
-                        table: openTableMenuState.table
+                        sortAscending: () => {
+                          sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "ascending");
+                          setOpenTableMenu(null);
+                        },
+                        sortDescending: () => {
+                          sortTable(openTableMenuState.table.name, openTableMenuState.column.index, "descending");
+                          setOpenTableMenu(null);
+                        },
+                        table: openTableMenuState.table,
+                        triggerIcon: "\u25BE",
+                        triggerProps: { type: "button" }
                       }
                     )
                   }
@@ -26827,6 +27427,476 @@ function useXlsxViewerCharts() {
     ]
   );
 }
+function useXlsxViewerThumbnails(options = {}) {
+  const { workbook, sheets } = useXlsxViewer();
+  const { isDark } = React4.useContext(ViewerAppearanceContext);
+  const palette = useViewerPalette(isDark);
+  const includeHeaders = options.includeHeaders ?? true;
+  const resolution = options.resolution;
+  const thumbnails = React4.useMemo(() => {
+    return sheets.map((sheet, sheetIndex) => {
+      const worksheet = workbook?.getSheet(sheet.workbookSheetIndex) ?? null;
+      const showGridLines = sheet.showGridLines ?? true;
+      const hiddenRowSet = new Set(sheet.hiddenRows ?? []);
+      const hiddenColSet = new Set(sheet.hiddenCols ?? []);
+      const visibleRows = buildVisibleAxisIndices(
+        sheet.visibleRows ?? [],
+        Math.max(THUMBNAIL_FALLBACK_ROWS, (sheet.maxUsedRow ?? -1) + THUMBNAIL_FALLBACK_ROWS + 1),
+        sheet.maxUsedRow ?? -1,
+        hiddenRowSet
+      );
+      const visibleCols = buildVisibleAxisIndices(
+        sheet.visibleCols ?? [],
+        Math.max(THUMBNAIL_FALLBACK_COLS, (sheet.maxUsedCol ?? -1) + THUMBNAIL_FALLBACK_COLS + 1),
+        sheet.maxUsedCol ?? -1,
+        hiddenColSet
+      );
+      const resolveColumnWidthPx = (actualCol) => {
+        if (worksheet && !worksheet.isColumnHidden(actualCol)) {
+          const width = worksheet.getColumnWidth(actualCol);
+          if (width !== void 0 && width !== null) {
+            return Math.max(
+              resolveRenderedSheetAxisPixels(resolveSheetColumnWidthPixels(width, sheet.columnWidthCharacterWidthPx), showGridLines),
+              DEFAULT_COL_WIDTH2 / 2
+            );
+          }
+        }
+        return Math.max(
+          resolveRenderedSheetAxisPixels(
+            sheet.colWidthOverridesPx[actualCol] ?? sheet.defaultColWidthPx ?? DEFAULT_COL_WIDTH2,
+            showGridLines
+          ),
+          DEFAULT_COL_WIDTH2 / 2
+        );
+      };
+      const resolveRowHeightPx = (actualRow) => {
+        if (worksheet && !worksheet.isRowHidden(actualRow)) {
+          const height = worksheet.getRowHeight(actualRow);
+          if (height !== void 0 && height !== null) {
+            return Math.max(
+              resolveRenderedSheetAxisPixels(resolveSheetRowHeightPixels(height), showGridLines),
+              DEFAULT_ROW_HEIGHT2 / 1.5
+            );
+          }
+        }
+        return Math.max(
+          resolveRenderedSheetAxisPixels(
+            sheet.rowHeightOverridesPx[actualRow] ?? sheet.defaultRowHeightPx ?? DEFAULT_ROW_HEIGHT2,
+            showGridLines
+          ),
+          DEFAULT_ROW_HEIGHT2 / 1.5
+        );
+      };
+      const previewRows = resolveThumbnailAxisIndices({
+        fallbackCount: THUMBNAIL_FALLBACK_ROWS,
+        getSizePx: resolveRowHeightPx,
+        maxCount: THUMBNAIL_MAX_ROWS,
+        maxLogicalPixels: THUMBNAIL_MAX_SOURCE_HEIGHT_PX,
+        maxUsedIndex: sheet.maxUsedRow ?? -1,
+        minUsedIndex: Math.max(0, sheet.minUsedRow ?? 0),
+        precomputed: visibleRows
+      });
+      const previewCols = resolveThumbnailAxisIndices({
+        fallbackCount: THUMBNAIL_FALLBACK_COLS,
+        getSizePx: resolveColumnWidthPx,
+        maxCount: THUMBNAIL_MAX_COLS,
+        maxLogicalPixels: THUMBNAIL_MAX_SOURCE_WIDTH_PX,
+        maxUsedIndex: sheet.maxUsedCol ?? -1,
+        minUsedIndex: Math.max(0, sheet.minUsedCol ?? 0),
+        precomputed: visibleCols
+      });
+      const rowAxis = buildThumbnailAxisItems(previewRows, resolveRowHeightPx);
+      const colAxis = buildThumbnailAxisItems(previewCols, resolveColumnWidthPx);
+      const rowItemByActual = new Map(rowAxis.items.map((item) => [item.actualIndex, item]));
+      const colItemByActual = new Map(colAxis.items.map((item) => [item.actualIndex, item]));
+      const headerHeight = includeHeaders ? HEADER_HEIGHT : 0;
+      const rowHeaderWidth = includeHeaders ? ROW_HEADER_WIDTH : 0;
+      const sourceWidth = rowHeaderWidth + colAxis.totalSize;
+      const sourceHeight = headerHeight + rowAxis.totalSize;
+      const outputSize = resolveThumbnailOutputSize(sourceWidth, sourceHeight, resolution);
+      const sourceRange = {
+        start: {
+          col: previewCols[0] ?? 0,
+          row: previewRows[0] ?? 0
+        },
+        end: {
+          col: previewCols[previewCols.length - 1] ?? 0,
+          row: previewRows[previewRows.length - 1] ?? 0
+        }
+      };
+      const sparklineByCell = new Map(
+        (sheet.sparklines ?? []).map((sparkline) => [`${sparkline.target.row}:${sparkline.target.col}`, sparkline])
+      );
+      const paint = (canvas) => {
+        if (!canvas) {
+          return false;
+        }
+        const context = canvas.getContext("2d");
+        if (!context) {
+          return false;
+        }
+        const dpr = typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio || 1);
+        const outputWidth = outputSize.width;
+        const outputHeight = outputSize.height;
+        const scale = outputSize.scale;
+        const deviceWidth = Math.max(1, Math.round(outputWidth * dpr));
+        const deviceHeight = Math.max(1, Math.round(outputHeight * dpr));
+        if (canvas.width !== deviceWidth) {
+          canvas.width = deviceWidth;
+        }
+        if (canvas.height !== deviceHeight) {
+          canvas.height = deviceHeight;
+        }
+        if (canvas.style.width !== `${outputWidth}px`) {
+          canvas.style.width = `${outputWidth}px`;
+        }
+        if (canvas.style.height !== `${outputHeight}px`) {
+          canvas.style.height = `${outputHeight}px`;
+        }
+        context.setTransform(dpr * scale, 0, 0, dpr * scale, 0, 0);
+        context.clearRect(0, 0, Math.max(1, sourceWidth), Math.max(1, sourceHeight));
+        context.fillStyle = palette.canvas;
+        context.fillRect(0, 0, Math.max(1, sourceWidth), Math.max(1, sourceHeight));
+        context.fillStyle = resolveSheetSurface(sheet, palette);
+        context.fillRect(rowHeaderWidth, headerHeight, Math.max(1, colAxis.totalSize), Math.max(1, rowAxis.totalSize));
+        if (includeHeaders) {
+          context.fillStyle = palette.headerSurface;
+          context.fillRect(rowHeaderWidth, 0, Math.max(1, colAxis.totalSize), headerHeight);
+          context.fillStyle = palette.rowHeaderSurface;
+          context.fillRect(0, headerHeight, rowHeaderWidth, Math.max(1, rowAxis.totalSize));
+          context.fillRect(0, 0, rowHeaderWidth, headerHeight);
+        }
+        if (!worksheet) {
+          return true;
+        }
+        const conditionalFormatMetricsCache = /* @__PURE__ */ new Map();
+        const cellRenderCache = /* @__PURE__ */ new Map();
+        const getCellData = (row, col) => {
+          const cacheKey = `${row}:${col}`;
+          const cached = cellRenderCache.get(cacheKey);
+          if (cached) {
+            return cached;
+          }
+          if (worksheet.isMergedSecondary(row, col)) {
+            const mergedSecondaryData = {
+              isMergedSecondary: true,
+              style: {},
+              value: ""
+            };
+            cellRenderCache.set(cacheKey, mergedSecondaryData);
+            return mergedSecondaryData;
+          }
+          const merge = worksheet.getMergeSpan(row, col);
+          const inheritedStyle = resolveInheritedCellStyle2(sheet, row, col);
+          const worksheetStyle = worksheet.getCellStyleAt(row, col) ?? null;
+          const mergedStyle = mergeResolvedCellStyle(inheritedStyle, worksheetStyle, { replaceXfSubtrees: true });
+          const alignment = mergedStyle?.alignment;
+          const sparkline = sparklineByCell.get(cacheKey) ?? null;
+          const sparklineValues = sparkline ? sparkline.range.start.row === sparkline.range.end.row ? Array.from(
+            { length: Math.abs(sparkline.range.end.col - sparkline.range.start.col) + 1 },
+            (_, index) => getCellNumericValue(
+              worksheet,
+              sparkline.range.start.row,
+              Math.min(sparkline.range.start.col, sparkline.range.end.col) + index
+            )
+          ) : Array.from(
+            { length: Math.abs(sparkline.range.end.row - sparkline.range.start.row) + 1 },
+            (_, index) => getCellNumericValue(
+              worksheet,
+              Math.min(sparkline.range.start.row, sparkline.range.end.row) + index,
+              sparkline.range.start.col
+            )
+          ) : null;
+          const checkboxState = mergedStyle?.cellControl ? getCellBooleanValue(worksheet, row, col) : null;
+          const nextData = {
+            canvas: void 0,
+            checkboxState,
+            colSpan: merge?.colSpan,
+            conditionalColorScale: resolveConditionalColorScaleForCell(
+              row,
+              col,
+              worksheet,
+              sheet,
+              conditionalFormatMetricsCache
+            ),
+            conditionalDataBar: resolveConditionalDataBarForCell(
+              row,
+              col,
+              worksheet,
+              sheet,
+              conditionalFormatMetricsCache
+            ),
+            conditionalIcon: resolveConditionalIconForCell(
+              row,
+              col,
+              worksheet,
+              sheet,
+              conditionalFormatMetricsCache
+            ),
+            isMergedSecondary: false,
+            rowSpan: merge?.rowSpan,
+            sparkline: sparkline && sparklineValues ? { config: sparkline, values: sparklineValues } : null,
+            style: buildCellStyle(mergedStyle, palette, sheet.themePalette, {
+              showGridLines
+            }),
+            textRotationDeg: resolveSpreadsheetTextRotation(alignment?.textRotation),
+            value: sparkline ? "" : checkboxState !== null ? "" : getCellDisplayValue(worksheet, row, col, sheet)
+          };
+          nextData.canvas = buildCanvasCellStyleCache(nextData.style);
+          cellRenderCache.set(cacheKey, nextData);
+          return nextData;
+        };
+        for (const rowItem of rowAxis.items) {
+          for (const colItem of colAxis.items) {
+            const cellData = getCellData(rowItem.actualIndex, colItem.actualIndex);
+            if (cellData.isMergedSecondary) {
+              continue;
+            }
+            const colSpan = Math.max(1, cellData.colSpan ?? 1);
+            const rowSpan = Math.max(1, cellData.rowSpan ?? 1);
+            let width = colItem.size;
+            let height = rowItem.size;
+            for (let colOffset = 1; colOffset < colSpan; colOffset += 1) {
+              const nextCol = colItemByActual.get(colItem.actualIndex + colOffset);
+              if (!nextCol) {
+                break;
+              }
+              width += nextCol.size;
+            }
+            for (let rowOffset = 1; rowOffset < rowSpan; rowOffset += 1) {
+              const nextRow = rowItemByActual.get(rowItem.actualIndex + rowOffset);
+              if (!nextRow) {
+                break;
+              }
+              height += nextRow.size;
+            }
+            const rect = {
+              height,
+              left: rowHeaderWidth + colItem.start,
+              top: headerHeight + rowItem.start,
+              width
+            };
+            const canvasCellStyle = cellData.canvas ?? buildCanvasCellStyleCache(cellData.style);
+            const gradientFill = typeof cellData.style.backgroundImage === "string" ? resolveCanvasGradientFill(context, rect, cellData.style.backgroundImage) : null;
+            const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellData.style.backgroundColor === "string" ? cellData.style.backgroundColor : resolveSheetSurface(sheet, palette));
+            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellData.style.backgroundColor === "string" && cellData.style.backgroundColor !== resolveSheetSurface(sheet, palette);
+            context.fillStyle = gradientFill ?? fillColor;
+            context.fillRect(rect.left, rect.top, rect.width, rect.height);
+            if (cellData.conditionalDataBar) {
+              const barLeft = rect.left + 4;
+              const barTop = rect.top + 4;
+              const barWidth = Math.max(0, (rect.width - 8) * (cellData.conditionalDataBar.widthPercent / 100));
+              const barHeight = Math.max(0, rect.height - 8);
+              if (barWidth > 0 && barHeight > 0) {
+                context.fillStyle = resolveCanvasDataBarFill(
+                  context,
+                  barLeft,
+                  barTop,
+                  barWidth,
+                  barHeight,
+                  cellData.conditionalDataBar
+                );
+                context.fillRect(barLeft, barTop, barWidth, barHeight);
+                if (cellData.conditionalDataBar.border !== false && cellData.conditionalDataBar.borderColor) {
+                  context.strokeStyle = cellData.conditionalDataBar.borderColor;
+                  context.lineWidth = 1;
+                  context.strokeRect(barLeft + 0.5, barTop + 0.5, Math.max(0, barWidth - 1), Math.max(0, barHeight - 1));
+                }
+              }
+            }
+            if (showGridLines && !hasExplicitCellFill) {
+              context.strokeStyle = palette.border;
+              context.lineWidth = 1;
+              context.beginPath();
+              if (colItem.start === 0) {
+                context.moveTo(rect.left + 0.5, rect.top);
+                context.lineTo(rect.left + 0.5, rect.top + rect.height);
+              }
+              if (rowItem.start === 0) {
+                context.moveTo(rect.left, rect.top + 0.5);
+                context.lineTo(rect.left + rect.width, rect.top + 0.5);
+              }
+              context.moveTo(rect.left + rect.width - 0.5, rect.top);
+              context.lineTo(rect.left + rect.width - 0.5, rect.top + rect.height);
+              context.moveTo(rect.left, rect.top + rect.height - 0.5);
+              context.lineTo(rect.left + rect.width, rect.top + rect.height - 0.5);
+              context.stroke();
+            }
+            if (canvasCellStyle.topBorder) {
+              strokeCanvasBorderSide(context, "top", rect, canvasCellStyle.topBorder);
+            }
+            if (canvasCellStyle.rightBorder) {
+              strokeCanvasBorderSide(context, "right", rect, canvasCellStyle.rightBorder);
+            }
+            if (canvasCellStyle.bottomBorder) {
+              strokeCanvasBorderSide(context, "bottom", rect, canvasCellStyle.bottomBorder);
+            }
+            if (canvasCellStyle.leftBorder) {
+              strokeCanvasBorderSide(context, "left", rect, canvasCellStyle.leftBorder);
+            }
+            const padding = canvasCellStyle.padding;
+            const contentLeft = rect.left + padding.left;
+            const contentTop = rect.top + padding.top;
+            const contentWidth = Math.max(0, rect.width - padding.left - padding.right);
+            const contentHeight = Math.max(0, rect.height - padding.top - padding.bottom);
+            const rawText = cellData.value ?? "";
+            context.save();
+            context.beginPath();
+            context.rect(contentLeft, contentTop, contentWidth, contentHeight);
+            context.clip();
+            context.font = canvasCellStyle.baseFont;
+            context.fillStyle = canvasCellStyle.textColor;
+            context.textBaseline = "middle";
+            if (cellData.checkboxState != null) {
+              const boxSize = Math.min(14, contentWidth, contentHeight);
+              const boxLeft = rect.left + (rect.width - boxSize) / 2;
+              const boxTop = rect.top + (rect.height - boxSize) / 2;
+              context.strokeStyle = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
+              context.lineWidth = 1.25;
+              context.strokeRect(boxLeft, boxTop, boxSize, boxSize);
+              if (cellData.checkboxState) {
+                context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
+                context.fillRect(boxLeft + 1.5, boxTop + 1.5, Math.max(0, boxSize - 3), Math.max(0, boxSize - 3));
+              }
+            } else if (cellData.sparkline) {
+              const sparkline = cellData.sparkline.config;
+              const sparklineValues = cellData.sparkline.values;
+              const points = sparklineValues.map((value, index) => ({ index, value })).filter((entry) => typeof entry.value === "number" && Number.isFinite(entry.value));
+              if (points.length > 1) {
+                const minValue = Math.min(...points.map((entry) => entry.value));
+                const maxValue = Math.max(...points.map((entry) => entry.value));
+                const sparkLeft = contentLeft + 1;
+                const sparkTop = contentTop + 2;
+                const sparkWidth = Math.max(1, contentWidth - 2);
+                const sparkHeight = Math.max(1, contentHeight - 4);
+                const xStep = points.length > 1 ? sparkWidth / (points.length - 1) : 0;
+                context.strokeStyle = sparkline.color ?? "#2563eb";
+                context.lineCap = "round";
+                context.lineJoin = "round";
+                context.lineWidth = 1.25;
+                context.beginPath();
+                points.forEach((entry, index) => {
+                  const x = sparkLeft + index * xStep;
+                  const y = sparkTop + sparkHeight - clampSparklineValue(entry.value, minValue, maxValue) * sparkHeight;
+                  if (index === 0) {
+                    context.moveTo(x, y);
+                  } else {
+                    context.lineTo(x, y);
+                  }
+                });
+                context.stroke();
+              }
+            } else if (rawText.length > 0) {
+              const align = canvasCellStyle.textAlign;
+              context.textAlign = align;
+              const textX = align === "right" ? contentLeft + contentWidth : align === "center" ? contentLeft + contentWidth / 2 : contentLeft;
+              const textY = contentTop + contentHeight / 2;
+              const trailingInset = cellData.conditionalIcon ? 18 : 0;
+              const maxTextWidth = Math.max(0, contentWidth - trailingInset);
+              if (cellData.textRotationDeg) {
+                const rotationOriginX = contentLeft + contentWidth / 2;
+                context.save();
+                context.translate(rotationOriginX, textY);
+                context.rotate(cellData.textRotationDeg * Math.PI / 180);
+                context.fillText(
+                  rawText,
+                  align === "right" ? contentWidth / 2 : align === "center" ? 0 : -(contentWidth / 2),
+                  0
+                );
+                context.restore();
+              } else if (canvasCellStyle.usesWrappedText || rawText.includes("\n")) {
+                const lines = wrapCanvasText(context, rawText, maxTextWidth);
+                const lineHeight = resolveCanvasLineHeight(cellData.style, 12);
+                const textBlockHeight = lines.length * lineHeight;
+                let textBlockTop = contentTop;
+                if (cellData.style.verticalAlign === "middle") {
+                  textBlockTop = contentTop + (contentHeight - textBlockHeight) / 2;
+                } else if (cellData.style.verticalAlign !== "top") {
+                  textBlockTop = contentTop + contentHeight - textBlockHeight;
+                }
+                lines.forEach((line, lineIndex) => {
+                  context.fillText(line, textX, textBlockTop + lineIndex * lineHeight + lineHeight / 2);
+                });
+              } else {
+                const text = canvasCellStyle.textOverflowEllipsis ? truncateCanvasText(context, rawText, maxTextWidth) : rawText;
+                context.fillText(text, textX, textY);
+              }
+            }
+            if (cellData.conditionalIcon) {
+              const iconSize = 10;
+              const iconX = rect.left + rect.width - (padding.right + iconSize + 4);
+              const iconY = rect.top + rect.height / 2;
+              drawCanvasConditionalIcon(context, cellData.conditionalIcon, iconX + iconSize / 2, iconY, iconSize);
+            }
+            context.restore();
+          }
+        }
+        if (includeHeaders) {
+          context.strokeStyle = palette.border;
+          context.lineWidth = 1;
+          context.font = "600 11px ui-sans-serif, system-ui, sans-serif";
+          context.fillStyle = palette.mutedText;
+          context.textBaseline = "middle";
+          for (const colItem of colAxis.items) {
+            const left = rowHeaderWidth + colItem.start;
+            context.beginPath();
+            context.moveTo(left + colItem.size - 0.5, 0);
+            context.lineTo(left + colItem.size - 0.5, headerHeight);
+            context.moveTo(left, headerHeight - 0.5);
+            context.lineTo(left + colItem.size, headerHeight - 0.5);
+            context.stroke();
+            context.textAlign = "center";
+            context.fillText(columnLabel2(colItem.actualIndex), left + colItem.size / 2, headerHeight / 2);
+          }
+          for (const rowItem of rowAxis.items) {
+            const top = headerHeight + rowItem.start;
+            context.beginPath();
+            context.moveTo(0, top + rowItem.size - 0.5);
+            context.lineTo(rowHeaderWidth, top + rowItem.size - 0.5);
+            context.moveTo(rowHeaderWidth - 0.5, top);
+            context.lineTo(rowHeaderWidth - 0.5, top + rowItem.size);
+            context.stroke();
+            context.textAlign = "center";
+            context.fillText(`${rowItem.actualIndex + 1}`, rowHeaderWidth / 2, top + rowItem.size / 2);
+          }
+          context.beginPath();
+          context.moveTo(rowHeaderWidth - 0.5, 0);
+          context.lineTo(rowHeaderWidth - 0.5, headerHeight);
+          context.moveTo(0, headerHeight - 0.5);
+          context.lineTo(rowHeaderWidth, headerHeight - 0.5);
+          context.stroke();
+        }
+        return true;
+      };
+      const plan = {
+        aspectRatio: sourceWidth / Math.max(1, sourceHeight),
+        contentHeight: rowAxis.totalSize,
+        contentWidth: colAxis.totalSize,
+        height: outputSize.height,
+        paint,
+        sourceRange,
+        width: outputSize.width
+      };
+      return {
+        ...plan,
+        sheet,
+        sheetIndex,
+        workbookSheetIndex: sheet.workbookSheetIndex
+      };
+    });
+  }, [includeHeaders, palette, resolution, sheets, workbook]);
+  const paintThumbnail = React4.useCallback(
+    (sheetIndex, canvas) => thumbnails[sheetIndex]?.paint(canvas) ?? false,
+    [thumbnails]
+  );
+  return React4.useMemo(
+    () => ({
+      paintThumbnail,
+      thumbnails
+    }),
+    [paintThumbnail, thumbnails]
+  );
+}
 function XlsxViewer(props) {
   const contextController = React4.useContext(ViewerContext);
   if (props.controller) {
@@ -26856,6 +27926,7 @@ function DefaultXlsxToolbar() {
   useXlsxViewerImages,
   useXlsxViewerSelection,
   useXlsxViewerTables,
+  useXlsxViewerThumbnails,
   useXlsxViewerZoom
 });
 //# sourceMappingURL=index.cjs.map