@extend-ai/react-xlsx 0.8.2 → 0.8.4

package/dist/index.cjs

@@ -4575,6 +4575,10 @@ function parseSheetState(archive, path, options) {
   let hasVerticalMerges = false;
   let maxHorizontalMergeEndCol = -1;
   let maxVerticalMergeEndRow = -1;
+  let minContentCol = Number.POSITIVE_INFINITY;
+  let minContentRow = Number.POSITIVE_INFINITY;
+  let maxContentCol = -1;
+  let maxContentRow = -1;
   const columnWidthCharacterWidthPx = measureColumnCharacterWidthPx(
     options?.defaultFont?.family,
     options?.defaultFont?.sizePt
@@ -4587,6 +4591,26 @@ function parseSheetState(archive, path, options) {
     sheetViewNode?.getAttribute("zoomScale") ?? sheetViewNode?.getAttribute("zoomScaleNormal") ?? Number.NaN
   );
   const zoomScale = Number.isFinite(rawZoomScale) && rawZoomScale > 0 ? rawZoomScale : 100;
+  const trackContentCell = (cellRef) => {
+    if (!cellRef) {
+      return;
+    }
+    const cell = parseA1CellReference(cellRef);
+    if (!cell) {
+      return;
+    }
+    minContentCol = Math.min(minContentCol, cell.col);
+    minContentRow = Math.min(minContentRow, cell.row);
+    maxContentCol = Math.max(maxContentCol, cell.col);
+    maxContentRow = Math.max(maxContentRow, cell.row);
+  };
+  const isMeaningfulCellNode = (cellNode) => {
+    if (getFirstChild(cellNode, "f") || getFirstChild(cellNode, "is")) {
+      return true;
+    }
+    const valueNode = getFirstChild(cellNode, "v");
+    return Boolean(valueNode && (valueNode.textContent ?? "").length > 0);
+  };
   getLocalElements(document2, "row").forEach((rowNode) => {
     const rowIndex = Number(rowNode.getAttribute("r") ?? 0) - 1;
     const height = Number(rowNode.getAttribute("ht") ?? Number.NaN);
@@ -4601,17 +4625,36 @@ function parseSheetState(archive, path, options) {
     if (rowIndex >= 0 && isHidden) {
       hiddenRows.add(rowIndex);
     }
-    if (includeCachedFormulaValues) {
-      getChildElements(rowNode, "c").forEach((cellNode) => {
+    getChildElements(rowNode, "c").forEach((cellNode) => {
+      const cellRef = cellNode.getAttribute("r");
+      if (isMeaningfulCellNode(cellNode)) {
+        trackContentCell(cellRef);
+      }
+      if (includeCachedFormulaValues) {
         const formulaNode = getFirstChild(cellNode, "f");
         const valueNode = getFirstChild(cellNode, "v");
-        const cellRef = cellNode.getAttribute("r");
         if (formulaNode && valueNode && cellRef) {
           cachedFormulaValues[cellRef] = valueNode.textContent ?? "";
         }
-      });
+      }
+    });
+  });
+  getLocalElements(document2, "mergeCell").forEach((mergeNode) => {
+    const reference = mergeNode.getAttribute("ref");
+    const range = reference ? parseA1RangeReference(reference) : null;
+    if (!range) {
+      return;
+    }
+    if (range.end.col > range.start.col) {
+      hasHorizontalMerges = true;
+      maxHorizontalMergeEndCol = Math.max(maxHorizontalMergeEndCol, range.end.col);
+    }
+    if (range.end.row > range.start.row) {
+      hasVerticalMerges = true;
+      maxVerticalMergeEndRow = Math.max(maxVerticalMergeEndRow, range.end.row);
     }
   });
+  const maxMetadataCol = Math.max(maxContentCol, maxHorizontalMergeEndCol, 0) + 256;
   getLocalElements(document2, "col").forEach((colNode) => {
     const min = Number(colNode.getAttribute("min") ?? 0) - 1;
     const max = Number(colNode.getAttribute("max") ?? 0) - 1;
@@ -4623,7 +4666,7 @@ function parseSheetState(archive, path, options) {
         return;
       }
     }
-    for (let col = min; col <= max; col += 1) {
+    for (let col = min; col <= Math.min(max, maxMetadataCol); col += 1) {
       if (col >= 0) {
         if (Number.isFinite(width)) {
           const widthPx = sheetColumnWidthToPixels(width, columnWidthCharacterWidthPx);
@@ -4638,21 +4681,6 @@ function parseSheetState(archive, path, options) {
       }
     }
   });
-  getLocalElements(document2, "mergeCell").forEach((mergeNode) => {
-    const reference = mergeNode.getAttribute("ref");
-    const range = reference ? parseA1RangeReference(reference) : null;
-    if (!range) {
-      return;
-    }
-    if (range.end.col > range.start.col) {
-      hasHorizontalMerges = true;
-      maxHorizontalMergeEndCol = Math.max(maxHorizontalMergeEndCol, range.end.col);
-    }
-    if (range.end.row > range.start.row) {
-      hasVerticalMerges = true;
-      maxVerticalMergeEndRow = Math.max(maxVerticalMergeEndRow, range.end.row);
-    }
-  });
   return {
     cachedFormulaValues,
     columnWidthCharacterWidthPx,
@@ -4665,6 +4693,10 @@ function parseSheetState(archive, path, options) {
     hasVerticalMerges,
     maxHorizontalMergeEndCol,
     maxVerticalMergeEndRow,
+    maxContentCol,
+    maxContentRow,
+    minContentCol: Number.isFinite(minContentCol) ? minContentCol : -1,
+    minContentRow: Number.isFinite(minContentRow) ? minContentRow : -1,
     hiddenCols: [...hiddenCols].sort((left, right) => left - right),
     hiddenRows: [...hiddenRows].sort((left, right) => left - right),
     rowHeightOverridesPx,
@@ -6694,6 +6726,20 @@ function resolveDisplayFileName(src, fileName) {
     return lastSegment;
   }
 }
+function resolveSheetDisplayUsedRange(usedRange, sheetState) {
+  const [minRow, minCol, maxRow, maxCol] = usedRange;
+  const maxMeaningfulRow = Math.max(sheetState?.maxContentRow ?? -1, sheetState?.maxVerticalMergeEndRow ?? -1);
+  const maxMeaningfulCol = Math.max(sheetState?.maxContentCol ?? -1, sheetState?.maxHorizontalMergeEndCol ?? -1);
+  if (maxMeaningfulRow < 0 && maxMeaningfulCol < 0) {
+    return usedRange;
+  }
+  return [
+    sheetState?.minContentRow !== void 0 && sheetState.minContentRow >= 0 ? Math.min(minRow, sheetState.minContentRow) : minRow,
+    sheetState?.minContentCol !== void 0 && sheetState.minContentCol >= 0 ? Math.min(minCol, sheetState.minContentCol) : minCol,
+    maxMeaningfulRow >= 0 ? Math.min(maxRow, maxMeaningfulRow) : maxRow,
+    maxMeaningfulCol >= 0 ? Math.min(maxCol, maxMeaningfulCol) : maxCol
+  ];
+}
 function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette, styleById, namedCellStyleByName, tableStyleByName, showHiddenSheets = false) {
   const sheets = [];
   for (let index = 0; index < workbook.sheetCount; index += 1) {
@@ -6760,7 +6806,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
       });
       continue;
     }
-    const [minRow, minCol, maxRow, maxCol] = usedRange;
+    const [minRow, minCol, maxRow, maxCol] = resolveSheetDisplayUsedRange(usedRange, sheetState);
     let visibleRowsCache = null;
     let visibleColsCache = null;
     let rowHeightsCache = null;
@@ -16502,7 +16548,11 @@ var SELECTION_DRAG_THRESHOLD_PX = 4;
 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 CANVAS_VIEWPORT_OVERSCAN_PX = 480;
+var CANVAS_SCROLL_BUFFER_PX = 480;
+var CANVAS_DEFERRED_VIEWPORT_SYNC_THRESHOLD_PX = CANVAS_SCROLL_BUFFER_PX - 96;
+var CANVAS_IMMEDIATE_VIEWPORT_SYNC_THRESHOLD_PX = CANVAS_SCROLL_BUFFER_PX * 1.5;
+var CANVAS_DIRTY_CELL_CULL_MARGIN_PX = CANVAS_VIEWPORT_OVERSCAN_PX * 2;
 var THUMBNAIL_DEFAULT_MAX_DIMENSION = 192;
 var THUMBNAIL_FALLBACK_ROWS = 12;
 var THUMBNAIL_FALLBACK_COLS = 8;
@@ -16517,6 +16567,12 @@ var CHART_SOURCE_HIGHLIGHT_COLORS = ["#2563eb", "#dc2626", "#7c3aed", "#059669",
 var SHEET_SURFACE = "#ffffff";
 var DEFAULT_CELL_PADDING = "0 4px";
 var IMAGE_HANDLE_POSITIONS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var CANVAS_CELL_STYLE_CACHE_LIMIT = 4096;
+var CANVAS_TEXT_MEASURE_CACHE_LIMIT = 2e4;
+var CANVAS_TEXT_TRUNCATE_CACHE_LIMIT = 4096;
+var CANVAS_TEXT_WRAP_CACHE_LIMIT = 2048;
+var CANVAS_PATH2D_CACHE_LIMIT = 512;
+var EMPTY_VIRTUAL_ITEMS = [];
 var IMAGE_HANDLE_CURSOR = {
   e: "ew-resize",
   n: "ns-resize",
@@ -16560,6 +16616,50 @@ var NUMERIC_LENGTH_STYLE_KEYS = /* @__PURE__ */ new Set([
   "top",
   "width"
 ]);
+var canvasCellStyleCache = /* @__PURE__ */ new Map();
+var canvasTextMeasureCache = /* @__PURE__ */ new Map();
+var canvasTextTruncateCache = /* @__PURE__ */ new Map();
+var canvasTextWrapCache = /* @__PURE__ */ new Map();
+var canvasPath2DCache = /* @__PURE__ */ new Map();
+function rememberBoundedCacheValue(cache, key, value, limit) {
+  if (cache.size >= limit) {
+    const oldestKey = cache.keys().next().value;
+    if (oldestKey !== void 0) {
+      cache.delete(oldestKey);
+    }
+  }
+  cache.set(key, value);
+  return value;
+}
+function roundCanvasCacheWidth(width) {
+  return Math.round(width * 4) / 4;
+}
+function measureCanvasTextWidth(context, text) {
+  if (text.length === 0) {
+    return 0;
+  }
+  const cacheKey = `${context.font}\0${text}`;
+  const cached = canvasTextMeasureCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  return rememberBoundedCacheValue(
+    canvasTextMeasureCache,
+    cacheKey,
+    context.measureText(text).width,
+    CANVAS_TEXT_MEASURE_CACHE_LIMIT
+  );
+}
+function getCachedCanvasPath2D(path) {
+  if (typeof Path2D === "undefined") {
+    return null;
+  }
+  const cached = canvasPath2DCache.get(path);
+  if (cached) {
+    return cached;
+  }
+  return rememberBoundedCacheValue(canvasPath2DCache, path, new Path2D(path), CANVAS_PATH2D_CACHE_LIMIT);
+}
 function scaleCssLengthExpression(value, scale) {
   if (scale === 1) {
     return value;
@@ -16740,7 +16840,6 @@ function strokeCanvasBorderSide(context, side, rect, border) {
   const right = rect.left + rect.width;
   const top = rect.top;
   const bottom = rect.top + rect.height;
-  context.save();
   context.strokeStyle = border.color;
   context.lineWidth = border.width;
   applyCanvasBorderDash(context, border.style, border.width);
@@ -16770,13 +16869,22 @@ function strokeCanvasBorderSide(context, side, rect, border) {
   } else {
     strokeLine(0);
   }
-  context.restore();
+  context.setLineDash([]);
+  context.lineCap = "butt";
+  context.lineWidth = 1;
 }
 function truncateCanvasText(context, text, maxWidth) {
   if (maxWidth <= 0 || text.length === 0) {
     return "";
   }
-  if (context.measureText(text).width <= maxWidth) {
+  const roundedMaxWidth = roundCanvasCacheWidth(maxWidth);
+  const cacheKey = `${context.font}\0${roundedMaxWidth}\0${text}`;
+  const cached = canvasTextTruncateCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  if (measureCanvasTextWidth(context, text) <= maxWidth) {
+    rememberBoundedCacheValue(canvasTextTruncateCache, cacheKey, text, CANVAS_TEXT_TRUNCATE_CACHE_LIMIT);
     return text;
   }
   const ellipsis = "\u2026";
@@ -16785,13 +16893,18 @@ function truncateCanvasText(context, text, maxWidth) {
   while (low < high) {
     const mid = Math.ceil((low + high) / 2);
     const candidate = `${text.slice(0, mid)}${ellipsis}`;
-    if (context.measureText(candidate).width <= maxWidth) {
+    if (measureCanvasTextWidth(context, candidate) <= maxWidth) {
       low = mid;
     } else {
       high = mid - 1;
     }
   }
-  return low <= 0 ? ellipsis : `${text.slice(0, low)}${ellipsis}`;
+  return rememberBoundedCacheValue(
+    canvasTextTruncateCache,
+    cacheKey,
+    low <= 0 ? ellipsis : `${text.slice(0, low)}${ellipsis}`,
+    CANVAS_TEXT_TRUNCATE_CACHE_LIMIT
+  );
 }
 function resolveCanvasFontSizePx(style, fallbackSize = 12) {
   const rawFontSize = style.fontSize;
@@ -16850,7 +16963,7 @@ function resolveCanvasWrapIndex(context, text, maxWidth) {
   while (low <= high) {
     const mid = Math.floor((low + high) / 2);
     const candidate = text.slice(0, mid);
-    if (context.measureText(candidate).width <= maxWidth) {
+    if (measureCanvasTextWidth(context, candidate) <= maxWidth) {
       best = mid;
       low = mid + 1;
     } else {
@@ -16867,6 +16980,12 @@ function wrapCanvasText(context, text, maxWidth) {
     return text.replace(/\r\n?/g, "\n").split("\n");
   }
   const normalized = text.replace(/\r\n?/g, "\n");
+  const roundedMaxWidth = roundCanvasCacheWidth(maxWidth);
+  const cacheKey = `${context.font}\0${roundedMaxWidth}\0${normalized}`;
+  const cached = canvasTextWrapCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
   const paragraphs = normalized.split("\n");
   const lines = [];
   for (const paragraph of paragraphs) {
@@ -16876,7 +16995,7 @@ function wrapCanvasText(context, text, maxWidth) {
     }
     let remaining = paragraph;
     while (remaining.length > 0) {
-      if (context.measureText(remaining).width <= maxWidth) {
+      if (measureCanvasTextWidth(context, remaining) <= maxWidth) {
         lines.push(remaining);
         break;
       }
@@ -16894,10 +17013,31 @@ function wrapCanvasText(context, text, maxWidth) {
       remaining = remaining.slice(breakIndex).replace(/^\s+/g, "");
     }
   }
-  return lines;
+  return rememberBoundedCacheValue(canvasTextWrapCache, cacheKey, lines, CANVAS_TEXT_WRAP_CACHE_LIMIT);
 }
 function buildCanvasCellStyleCache(style) {
-  return {
+  const cacheKey = [
+    style.font,
+    style.fontStyle,
+    style.fontWeight,
+    style.fontSize,
+    style.fontFamily,
+    style.borderTop,
+    style.borderRight,
+    style.borderBottom,
+    style.borderLeft,
+    style.padding,
+    style.textAlign,
+    style.color,
+    style.textDecoration,
+    style.textOverflow,
+    style.whiteSpace
+  ].map((value) => value == null ? "" : String(value)).join("
");
+  const cached = canvasCellStyleCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  return rememberBoundedCacheValue(canvasCellStyleCache, cacheKey, {
     baseFont: resolveCanvasFont(style, 12),
     bottomBorder: parseCanvasBorderDeclaration(style.borderBottom),
     leftBorder: parseCanvasBorderDeclaration(style.borderLeft),
@@ -16909,7 +17049,7 @@ function buildCanvasCellStyleCache(style) {
     textOverflowEllipsis: style.textOverflow === "ellipsis",
     topBorder: parseCanvasBorderDeclaration(style.borderTop),
     usesWrappedText: style.whiteSpace === "pre-wrap"
-  };
+  }, CANVAS_CELL_STYLE_CACHE_LIMIT);
 }
 function splitCssGradientArgs(value) {
   const parts = [];
@@ -18418,6 +18558,44 @@ function resolveShapeVector(shape) {
   }
   return buildPresetShapePath(shape);
 }
+function drawCanvasRoundedRect(context, left, top, width, height, radius) {
+  const safeRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+  context.beginPath();
+  context.moveTo(left + safeRadius, top);
+  context.lineTo(left + width - safeRadius, top);
+  context.quadraticCurveTo(left + width, top, left + width, top + safeRadius);
+  context.lineTo(left + width, top + height - safeRadius);
+  context.quadraticCurveTo(left + width, top + height, left + width - safeRadius, top + height);
+  context.lineTo(left + safeRadius, top + height);
+  context.quadraticCurveTo(left, top + height, left, top + height - safeRadius);
+  context.lineTo(left, top + safeRadius);
+  context.quadraticCurveTo(left, top, left + safeRadius, top);
+  context.closePath();
+}
+function applyCanvasShapeDash(context, dash, lineWidth) {
+  if (!dash) {
+    context.setLineDash([]);
+    return;
+  }
+  const unit = Math.max(1, lineWidth);
+  switch (dash) {
+    case "dash":
+      context.setLineDash([4 * unit, 3 * unit]);
+      break;
+    case "dashDot":
+      context.setLineDash([4 * unit, 2 * unit, unit, 2 * unit]);
+      break;
+    case "dot":
+      context.setLineDash([unit, 2 * unit]);
+      break;
+    case "lgDash":
+      context.setLineDash([8 * unit, 3 * unit]);
+      break;
+    default:
+      context.setLineDash([]);
+      break;
+  }
+}
 function resolveShapeLineEndMarker(type, markerId, color, strokeWidth, rect, viewBox) {
   if (type !== "triangle") {
     return null;
@@ -19020,12 +19198,12 @@ function measureTextWidth(value, style) {
     return value.length * 7;
   }
   textMeasureCanvas ??= document.createElement("canvas");
-  const context = textMeasureCanvas.getContext("2d");
+  const context = textMeasureCanvas.getContext("2d", { alpha: false });
   if (!context) {
     return value.length * 7;
   }
   context.font = buildCanvasFont(style);
-  return context.measureText(value).width;
+  return measureCanvasTextWidth(context, value);
 }
 function measureWrappedTextHeight(value, style, widthPx) {
   if (!value) {
@@ -19039,7 +19217,7 @@ function measureWrappedTextHeight(value, style, widthPx) {
     return fallbackLineCount * lineHeight + padding.top + padding.bottom;
   }
   textMeasureCanvas ??= document.createElement("canvas");
-  const context = textMeasureCanvas.getContext("2d");
+  const context = textMeasureCanvas.getContext("2d", { alpha: false });
   if (!context) {
     return fallbackLineCount * lineHeight + padding.top + padding.bottom;
   }
@@ -20137,7 +20315,7 @@ function blitCanvasWithScrollDelta(canvas, context, bufferCanvas, dpr, width, he
   if (bufferCanvas.height !== deviceHeight) {
     bufferCanvas.height = deviceHeight;
   }
-  const bufferContext = bufferCanvas.getContext("2d");
+  const bufferContext = bufferCanvas.getContext("2d", { alpha: false });
   if (!bufferContext) {
     return null;
   }
@@ -20988,12 +21166,14 @@ function XlsxGrid({
   renderImageSelection,
   renderTableHeaderMenu,
   enableGestureZoom = true,
-  experimentalCanvas = false,
+  experimentalCanvas = true,
   selectionColor,
   selectionFillColor,
   selectionHeaderColor,
   showImages = true
 }) {
+  const xlsxCanvasProfileTarget = typeof window !== "undefined" ? window.__xlsxCanvasProfile : void 0;
+  const xlsxGridRenderStart = xlsxCanvasProfileTarget ? performance.now() : 0;
   const {
     activeCell,
     activeSheet,
@@ -21077,6 +21257,11 @@ function XlsxGrid({
   const leftFrozenHeaderCanvasRef = React4.useRef(null);
   const leftScrollHeaderCanvasRef = React4.useRef(null);
   const cornerHeaderCanvasRef = React4.useRef(null);
+  const canvasScrollOverlayContentRef = React4.useRef(null);
+  const canvasTopOverlayContentRef = React4.useRef(null);
+  const canvasLeftOverlayContentRef = React4.useRef(null);
+  const canvasCornerOverlayContentRef = React4.useRef(null);
+  const canvasImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
   const selectionOverlayRef = React4.useRef(null);
   const activeValidationOverlayRef = React4.useRef(null);
   const fillHandleRef = React4.useRef(null);
@@ -21105,6 +21290,7 @@ function XlsxGrid({
   const pendingLiveZoomCommitRef = React4.useRef(null);
   const touchPinchStateRef = React4.useRef(null);
   const safariPinchStartZoomRef = React4.useRef(null);
+  const canvasTransformStyleCacheRef = React4.useRef(/* @__PURE__ */ new WeakMap());
   const displayedSelectionRef = React4.useRef(null);
   const firstVisibleColRef = React4.useRef(void 0);
   const lastVisibleColRef = React4.useRef(void 0);
@@ -21130,12 +21316,19 @@ function XlsxGrid({
   const [fillPreviewRange, setFillPreviewRange] = React4.useState(null);
   const [chartPreviewRect, setChartPreviewRect] = React4.useState(null);
   const [liveGestureZoom, setLiveGestureZoom] = React4.useState(null);
+  const [canvasImageLoadVersion, setCanvasImageLoadVersion] = React4.useState(0);
   const liveDrawingViewportRef = React4.useRef({
     height: 0,
     left: 0,
     top: 0,
     width: 0
   });
+  const canvasLayoutMetricsRef = React4.useRef({
+    displayHeaderHeight: HEADER_HEIGHT,
+    displayRowHeaderWidth: ROW_HEADER_WIDTH,
+    frozenPaneBottom: HEADER_HEIGHT,
+    frozenPaneRight: ROW_HEADER_WIDTH
+  });
   const paintedDrawingViewportRef = React4.useRef({
     height: 0,
     left: 0,
@@ -21245,6 +21438,12 @@ function XlsxGrid({
   const applyCanvasViewportCompensation = React4.useCallback((liveViewport) => {
     const nextLiveViewport = liveViewport ?? liveDrawingViewportRef.current;
     const paintedViewport = paintedDrawingViewportRef.current;
+    const {
+      displayHeaderHeight: liveDisplayHeaderHeight,
+      displayRowHeaderWidth: liveDisplayRowHeaderWidth,
+      frozenPaneBottom: liveFrozenPaneBottom,
+      frozenPaneRight: liveFrozenPaneRight
+    } = canvasLayoutMetricsRef.current;
     const currentLiveGestureZoom = liveGestureZoomRef.current;
     const isLiveZooming2 = currentLiveGestureZoom !== null && zoomScale === currentLiveGestureZoom.baseZoomScale;
     const liveZoomScale2 = isLiveZooming2 ? Math.max(0.1, currentLiveGestureZoom.targetZoomScale / currentLiveGestureZoom.baseZoomScale) : 1;
@@ -21252,12 +21451,41 @@ function XlsxGrid({
     const scrollDeltaY = paintedViewport.top - nextLiveViewport.top;
     const liveZoomTranslateX2 = isLiveZooming2 ? currentLiveGestureZoom.anchor.x * (1 - liveZoomScale2) : 0;
     const liveZoomTranslateY2 = isLiveZooming2 ? currentLiveGestureZoom.anchor.y * (1 - liveZoomScale2) : 0;
-    const applyCanvasTransform = (canvas, translateX, translateY) => {
-      if (!canvas) {
+    const applyElementTransform = (element, transform, willChange, transformOrigin = null) => {
+      if (!element) {
         return;
       }
-      canvas.style.transform = translateX !== 0 || translateY !== 0 || liveZoomScale2 !== 1 ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${liveZoomScale2})` : "";
-      canvas.style.willChange = translateX !== 0 || translateY !== 0 || liveZoomScale2 !== 1 ? "transform" : "";
+      const cached = canvasTransformStyleCacheRef.current.get(element);
+      if (cached?.transform !== transform || element.style.transform !== transform) {
+        element.style.transform = transform;
+      }
+      if (cached?.willChange !== willChange || element.style.willChange !== willChange) {
+        element.style.willChange = willChange;
+      }
+      if (transformOrigin !== null && (cached?.transformOrigin !== transformOrigin || element.style.transformOrigin !== transformOrigin)) {
+        element.style.transformOrigin = transformOrigin;
+      }
+      canvasTransformStyleCacheRef.current.set(element, {
+        transform,
+        transformOrigin,
+        willChange
+      });
+    };
+    const applyCanvasTransform = (canvas, translateX, translateY) => {
+      const shouldTransform = translateX !== 0 || translateY !== 0 || liveZoomScale2 !== 1;
+      applyElementTransform(
+        canvas,
+        shouldTransform ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${liveZoomScale2})` : "",
+        shouldTransform ? "transform" : ""
+      );
+    };
+    const applyOverlayTransform = (element, translateX, translateY) => {
+      applyElementTransform(
+        element,
+        liveZoomScale2 !== 1 ? `translate3d(${translateX + liveZoomTranslateX2}px, ${translateY + liveZoomTranslateY2}px, 0) scale(${liveZoomScale2})` : `translate3d(${translateX}px, ${translateY}px, 0)`,
+        "transform",
+        "0 0"
+      );
     };
     applyCanvasTransform(
       scrollBodyCanvasRef.current,
@@ -21304,6 +21532,26 @@ function XlsxGrid({
       liveZoomTranslateX2,
       liveZoomTranslateY2
     );
+    applyOverlayTransform(
+      canvasScrollOverlayContentRef.current,
+      -nextLiveViewport.left - liveFrozenPaneRight,
+      -nextLiveViewport.top - liveFrozenPaneBottom
+    );
+    applyOverlayTransform(
+      canvasTopOverlayContentRef.current,
+      -nextLiveViewport.left - liveFrozenPaneRight,
+      -liveDisplayHeaderHeight
+    );
+    applyOverlayTransform(
+      canvasLeftOverlayContentRef.current,
+      -liveDisplayRowHeaderWidth,
+      -nextLiveViewport.top - liveFrozenPaneBottom
+    );
+    applyOverlayTransform(
+      canvasCornerOverlayContentRef.current,
+      -liveDisplayRowHeaderWidth,
+      -liveDisplayHeaderHeight
+    );
   }, [zoomScale]);
   const updateLiveGestureZoomState = React4.useCallback((nextState) => {
     const resolvedState = typeof nextState === "function" ? nextState(liveGestureZoomRef.current) : nextState;
@@ -21406,6 +21654,11 @@ function XlsxGrid({
     if (matchesLiveViewport && matchesStateViewport) {
       return;
     }
+    const shouldCommitDeferredViewport = !matchesStateViewport && (stateViewport.width !== nextViewport.width || stateViewport.height !== nextViewport.height || Math.abs(nextViewport.left - stateViewport.left) >= CANVAS_DEFERRED_VIEWPORT_SYNC_THRESHOLD_PX || Math.abs(nextViewport.top - stateViewport.top) >= CANVAS_DEFERRED_VIEWPORT_SYNC_THRESHOLD_PX);
+    if (!shouldCommitDeferredViewport) {
+      pendingDrawingViewportRef.current = null;
+      return;
+    }
     pendingDrawingViewportRef.current = nextViewport;
     if (drawingViewportFrameRef.current !== null) {
       return;
@@ -21693,6 +21946,12 @@ function XlsxGrid({
     ) : displayRowHeaderWidth,
     [displayActualColWidths, displayDefaultColWidth, displayRowHeaderWidth, frozenCols, stickyLeftByCol]
   );
+  canvasLayoutMetricsRef.current = {
+    displayHeaderHeight,
+    displayRowHeaderWidth,
+    frozenPaneBottom,
+    frozenPaneRight
+  };
   const rowPrefixSumsRef = React4.useRef(rowPrefixSums);
   const colPrefixSumsRef = React4.useRef(colPrefixSums);
   const firstVisibleRow = visibleRows[0];
@@ -21744,6 +22003,7 @@ function XlsxGrid({
   }, [charts, images, shapes]);
   const shouldVirtualizeRows = visibleRows.length > 0;
   const shouldVirtualizeCols = visibleCols.length > 0 && frozenCols.length === 0;
+  const shouldUseDomVirtualizer = !experimentalCanvas;
   const getScrollElement = React4.useCallback(() => scrollRef.current, []);
   const estimateRowSize = React4.useCallback(
     (index) => displayEffectiveRowHeights[index] ?? displayDefaultRowHeight,
@@ -21757,6 +22017,7 @@ function XlsxGrid({
   const getColItemKey = React4.useCallback((index) => visibleCols[index] ?? index, [visibleCols]);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: visibleRows.length,
+    enabled: shouldUseDomVirtualizer,
     estimateSize: estimateRowSize,
     getScrollElement,
     getItemKey: getRowItemKey,
@@ -21764,14 +22025,15 @@ function XlsxGrid({
   });
   const colVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: visibleCols.length,
+    enabled: shouldUseDomVirtualizer,
     estimateSize: estimateColSize,
     getScrollElement,
     getItemKey: getColItemKey,
     horizontal: true,
     overscan: 6
   });
-  const currentRowVirtualItems = rowVirtualizer.getVirtualItems();
-  const currentColVirtualItems = colVirtualizer.getVirtualItems();
+  const currentRowVirtualItems = shouldUseDomVirtualizer ? rowVirtualizer.getVirtualItems() : EMPTY_VIRTUAL_ITEMS;
+  const currentColVirtualItems = shouldUseDomVirtualizer ? colVirtualizer.getVirtualItems() : EMPTY_VIRTUAL_ITEMS;
   const frozenRowVirtualIndices = React4.useMemo(
     () => frozenRows.map((row) => rowIndexByActual.get(row)).filter((index) => index !== void 0),
     [frozenRows, rowIndexByActual]
@@ -22007,10 +22269,12 @@ function XlsxGrid({
       scroller.scrollTop = scroller.scrollTop / previousZoomFactor * zoomFactor;
     }
     previousZoomFactorRef.current = zoomFactor;
-    rowVirtualizer.measure();
-    colVirtualizer.measure();
+    if (shouldUseDomVirtualizer) {
+      rowVirtualizer.measure();
+      colVirtualizer.measure();
+    }
     syncDrawingViewport(scroller, { immediate: true });
-  }, [syncDrawingViewport, zoomFactor]);
+  }, [shouldUseDomVirtualizer, syncDrawingViewport, zoomFactor]);
   React4.useLayoutEffect(() => {
     syncDrawingViewport(scrollRef.current, { immediate: true });
   }, [activeSheet, activeTabIndex, displayColLimit, displayRowLimit, syncDrawingViewport, zoomFactor]);
@@ -22106,7 +22370,7 @@ function XlsxGrid({
     const initialUsedCol = resolveFirstUsedVisibleIndex(visibleCols, activeSheet?.minUsedCol ?? -1);
     const initialScrollTop = initialUsedRow > 0 ? sumPrefixRange(actualRowPrefixSums, 0, initialUsedRow - 1) : 0;
     const initialScrollLeft = initialUsedCol > 0 ? sumPrefixRange(actualColPrefixSums, 0, initialUsedCol - 1) : 0;
-    if (shouldVirtualizeRows) {
+    if (shouldUseDomVirtualizer && shouldVirtualizeRows) {
       rowVirtualizer.scrollToOffset(initialScrollTop);
     } else if (scrollRef.current) {
       scrollRef.current.scrollTop = initialScrollTop;
@@ -22114,7 +22378,7 @@ function XlsxGrid({
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = initialScrollLeft;
     }
-    if (shouldVirtualizeCols && frozenCols.length === 0) {
+    if (shouldUseDomVirtualizer && shouldVirtualizeCols && frozenCols.length === 0) {
       colVirtualizer.scrollToOffset(initialScrollLeft);
     }
     if (scrollRef.current) {
@@ -22135,6 +22399,7 @@ function XlsxGrid({
     isWorkerBacked,
     shouldVirtualizeCols,
     shouldVirtualizeRows,
+    shouldUseDomVirtualizer,
     syncDrawingViewport,
     rowVirtualizer,
     visibleCols,
@@ -22154,24 +22419,40 @@ function XlsxGrid({
     setPendingNavigation(null);
   }, [activeSheetIndex, pendingNavigation, selectCell]);
   React4.useEffect(() => {
-    if (shouldVirtualizeRows) {
+    if (shouldUseDomVirtualizer && shouldVirtualizeRows) {
       rowVirtualizer.measure();
     }
-    if (shouldVirtualizeCols) {
+    if (shouldUseDomVirtualizer && shouldVirtualizeCols) {
       colVirtualizer.measure();
     }
-  }, [activeSheetIndex, revision, shouldVirtualizeCols, shouldVirtualizeRows, visibleCols.length, visibleRows.length]);
+  }, [
+    activeSheetIndex,
+    revision,
+    shouldUseDomVirtualizer,
+    shouldVirtualizeCols,
+    shouldVirtualizeRows,
+    visibleCols.length,
+    visibleRows.length
+  ]);
   const handleScrollerScroll = React4.useCallback((event) => {
     const currentScroller = event.currentTarget;
     cachedScrollerRectRef.current = null;
-    syncDrawingViewport(currentScroller, { immediate: true });
+    const paintedViewport = paintedDrawingViewportRef.current;
+    const shouldSyncDrawingViewportImmediately = Math.abs(currentScroller.scrollLeft - paintedViewport.left) > CANVAS_IMMEDIATE_VIEWPORT_SYNC_THRESHOLD_PX || Math.abs(currentScroller.scrollTop - paintedViewport.top) > CANVAS_IMMEDIATE_VIEWPORT_SYNC_THRESHOLD_PX;
+    syncDrawingViewport(currentScroller, { immediate: shouldSyncDrawingViewportImmediately });
     if (currentScroller.scrollHeight - (currentScroller.scrollTop + currentScroller.clientHeight) < OPEN_GRID_VERTICAL_EDGE_PX) {
-      setDisplayRowLimit((current) => current + OPEN_GRID_ROW_GROWTH);
+      setDisplayRowLimit((current) => {
+        const nextLimit = current + OPEN_GRID_ROW_GROWTH;
+        return readOnly && current < maxRowDisplayLimit ? Math.min(maxRowDisplayLimit, nextLimit) : nextLimit;
+      });
     }
     if (currentScroller.scrollWidth - (currentScroller.scrollLeft + currentScroller.clientWidth) < OPEN_GRID_HORIZONTAL_EDGE_PX) {
-      setDisplayColLimit((current) => current + OPEN_GRID_COL_GROWTH);
+      setDisplayColLimit((current) => {
+        const nextLimit = current + OPEN_GRID_COL_GROWTH;
+        return readOnly && current < maxColDisplayLimit ? Math.min(maxColDisplayLimit, nextLimit) : nextLimit;
+      });
     }
-  }, [syncDrawingViewport]);
+  }, [maxColDisplayLimit, maxRowDisplayLimit, readOnly, syncDrawingViewport]);
   React4.useEffect(() => {
     const scroller = scrollRef.current;
     if (!scroller || !enableGestureZoom) {
@@ -22428,17 +22709,17 @@ function XlsxGrid({
   }, []);
   const resolvePointerCellFromClient = React4.useCallback((clientX, clientY) => {
     const geometryCell = resolvePointerCellFromGeometry(clientX, clientY);
-    if (geometryCell && !worksheet?.isMergedSecondary(geometryCell.row, geometryCell.col)) {
-      return resolveMergeAnchorCell(geometryCell);
+    if (geometryCell) {
+      return geometryCell;
     }
-    const resolvedCell = resolvePointerCellFromHitTest(clientX, clientY) ?? geometryCell;
+    const resolvedCell = resolvePointerCellFromHitTest(clientX, clientY);
     return resolvedCell ? resolveMergeAnchorCell(resolvedCell) : null;
-  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, worksheet]);
+  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest]);
   const resolveDraggedSelectionCell = React4.useCallback((dragState, clientX, clientY) => {
     const geometryCell = resolvePointerCellFromGeometry(clientX, clientY);
     const hitCell = resolvePointerCellFromHitTest(clientX, clientY);
-    const actualRow = hitCell && rowIndexByActual.has(hitCell.row) ? hitCell.row : geometryCell?.row;
-    const actualCol = hitCell?.col ?? geometryCell?.col;
+    const actualRow = geometryCell?.row ?? (hitCell && rowIndexByActual.has(hitCell.row) ? hitCell.row : void 0);
+    const actualCol = geometryCell?.col ?? hitCell?.col;
     if (actualRow === void 0 || actualCol === void 0) {
       return null;
     }
@@ -22448,8 +22729,8 @@ function XlsxGrid({
     if (dragState.axis === "column") {
       return { row: dragState.originCell.row, col: actualCol };
     }
-    return resolveMergeAnchorCell({ row: actualRow, col: actualCol });
-  }, [resolveMergeAnchorCell, resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, rowIndexByActual]);
+    return { row: actualRow, col: actualCol };
+  }, [resolvePointerCellFromGeometry, resolvePointerCellFromHitTest, rowIndexByActual]);
   const resolveCellPointerOrigin = React4.useCallback((cell, rect, clientX, clientY) => {
     const rowIndex = rowIndexByActual.get(cell.row);
     const colIndex = colIndexByActual.get(cell.col);
@@ -22467,6 +22748,40 @@ function XlsxGrid({
       originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, displayHeight)
     };
   }, [colIndexByActual, colPrefixSums, displayDefaultColWidth, displayDefaultRowHeight, displayEffectiveColWidths, displayEffectiveRowHeights, rowIndexByActual, rowPrefixSums]);
+  const resolveCellPointerOriginFromClient = React4.useCallback((cell, clientX, clientY) => {
+    const scroller = scrollRef.current;
+    const rowIndex = rowIndexByActual.get(cell.row);
+    const colIndex = colIndexByActual.get(cell.col);
+    if (!scroller || rowIndex === void 0 || colIndex === void 0) {
+      return null;
+    }
+    const scrollerRect = cachedScrollerRectRef.current ?? scroller.getBoundingClientRect();
+    const pointerOffsetX = clientX - scrollerRect.left;
+    const pointerOffsetY = clientY - scrollerRect.top;
+    const localX = pointerOffsetX + (pointerOffsetX >= frozenPaneRight ? scroller.scrollLeft : 0);
+    const localY = pointerOffsetY + (pointerOffsetY >= frozenPaneBottom ? scroller.scrollTop : 0);
+    const displayWidth = displayEffectiveColWidths[colIndex] ?? displayDefaultColWidth;
+    const displayHeight = displayEffectiveRowHeights[rowIndex] ?? displayDefaultRowHeight;
+    return {
+      contentScaleX: 1,
+      contentScaleY: 1,
+      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset(localX - displayRowHeaderWidth - (colPrefixSums[colIndex] ?? 0), displayWidth),
+      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset(localY - displayHeaderHeight - (rowPrefixSums[rowIndex] ?? 0), displayHeight)
+    };
+  }, [
+    colIndexByActual,
+    colPrefixSums,
+    displayDefaultColWidth,
+    displayDefaultRowHeight,
+    displayEffectiveColWidths,
+    displayEffectiveRowHeights,
+    displayHeaderHeight,
+    displayRowHeaderWidth,
+    frozenPaneBottom,
+    frozenPaneRight,
+    rowIndexByActual,
+    rowPrefixSums
+  ]);
   const resolveRowPointerOrigin = React4.useCallback((actualRow, rect, clientY) => {
     const rowIndex = rowIndexByActual.get(actualRow);
     if (rowIndex === void 0) {
@@ -23043,14 +23358,14 @@ function XlsxGrid({
       },
       left: {
         cols: frozenColItems,
-        rows: frozenRows.length > 0 ? canvasVisibleRowItems : scrollRowItems
+        rows: scrollRowItems
       },
       scroll: {
-        cols: frozenCols.length > 0 ? canvasVisibleColItems : scrollColItems,
-        rows: frozenRows.length > 0 ? canvasVisibleRowItems : scrollRowItems
+        cols: scrollColItems,
+        rows: scrollRowItems
       },
       top: {
-        cols: frozenCols.length > 0 ? canvasVisibleColItems : scrollColItems,
+        cols: scrollColItems,
         rows: frozenRowItems
       }
     };
@@ -23184,6 +23499,51 @@ function XlsxGrid({
       visibleRows
     ]
   );
+  const shouldBakeCanvasStaticDrawings = Boolean(experimentalCanvas && readOnly && showImages);
+  const shouldBakeCanvasImages = Boolean(shouldBakeCanvasStaticDrawings && !renderImage && !renderImageSelection);
+  const bakedShapeRects = React4.useMemo(
+    () => shouldBakeCanvasStaticDrawings ? shapeRects.filter(({ shape }) => !shape.hyperlink) : [],
+    [shapeRects, shouldBakeCanvasStaticDrawings]
+  );
+  const domShapeRects = React4.useMemo(
+    () => shouldBakeCanvasStaticDrawings ? shapeRects.filter(({ shape }) => shape.hyperlink) : shapeRects,
+    [shapeRects, shouldBakeCanvasStaticDrawings]
+  );
+  const bakedFormControlRects = React4.useMemo(
+    () => shouldBakeCanvasStaticDrawings ? formControlRects : [],
+    [formControlRects, shouldBakeCanvasStaticDrawings]
+  );
+  const domFormControlRects = React4.useMemo(
+    () => shouldBakeCanvasStaticDrawings ? [] : formControlRects,
+    [formControlRects, shouldBakeCanvasStaticDrawings]
+  );
+  const bakedImageRects = React4.useMemo(
+    () => shouldBakeCanvasImages ? imageRects.filter(({ image }) => !image.hyperlink && selectedImageId !== image.id) : [],
+    [imageRects, selectedImageId, shouldBakeCanvasImages]
+  );
+  const domImageRects = React4.useMemo(
+    () => shouldBakeCanvasImages ? imageRects.filter(({ image }) => image.hyperlink || selectedImageId === image.id) : imageRects,
+    [imageRects, selectedImageId, shouldBakeCanvasImages]
+  );
+  const hasCanvasDomDrawingOverlays = Boolean(
+    showImages && (chartRects.length > 0 || domShapeRects.length > 0 || domFormControlRects.length > 0 || domImageRects.length > 0)
+  );
+  const bakedCanvasDrawingSignature = React4.useMemo(() => {
+    if (!shouldBakeCanvasStaticDrawings) {
+      return "";
+    }
+    const shapeSignature = bakedShapeRects.map(({ rect, shape }) => `s:${shape.id}:${shape.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
+    const controlSignature = bakedFormControlRects.map(({ control, rect }) => `f:${control.id}:${control.zIndex}:${Boolean(control.checked)}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
+    const imageSignature = bakedImageRects.map(({ image, rect }) => `i:${image.id}:${image.src}:${image.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
+    return `${revision}:${canvasImageLoadVersion}:${shapeSignature}:${controlSignature}:${imageSignature}`;
+  }, [
+    bakedFormControlRects,
+    bakedImageRects,
+    bakedShapeRects,
+    canvasImageLoadVersion,
+    revision,
+    shouldBakeCanvasStaticDrawings
+  ]);
   const resolveMountedCellOverlayRect = React4.useCallback((element) => {
     const wrapper = wrapperRef.current;
     if (!wrapper) {
@@ -23215,10 +23575,11 @@ function XlsxGrid({
   }, [resolveMountedCellOverlayRect]);
   const resolveGeometryOverlayRect = React4.useCallback((range) => {
     const normalized = normalizeRange2(range);
-    const startCell = resolveMergeAnchorCell(normalized.start);
     const isSingleCellSelection = normalized.start.row === normalized.end.row && normalized.start.col === normalized.end.col;
-    const merge = isSingleCellSelection ? worksheet?.getMergeSpan(startCell.row, startCell.col) : null;
-    const endCell = isSingleCellSelection ? {
+    const isMergedSecondarySelection = isSingleCellSelection ? worksheet?.isMergedSecondary(normalized.start.row, normalized.start.col) === true : false;
+    const startCell = isSingleCellSelection && !isMergedSecondarySelection ? resolveMergeAnchorCell(normalized.start) : normalized.start;
+    const merge = isSingleCellSelection && !isMergedSecondarySelection ? worksheet?.getMergeSpan(startCell.row, startCell.col) : null;
+    const endCell = isSingleCellSelection && !isMergedSecondarySelection ? {
       row: startCell.row + Math.max(1, merge?.rowSpan ?? 1) - 1,
       col: startCell.col + Math.max(1, merge?.colSpan ?? 1) - 1
     } : normalized.end;
@@ -23850,13 +24211,14 @@ function XlsxGrid({
     }
     event.preventDefault();
     focusGrid();
+    const targetCell = event.currentTarget.colSpan > 1 || event.currentTarget.rowSpan > 1 ? resolvePointerCellFromGeometry(event.clientX, event.clientY) ?? cell : cell;
     const currentSelection = selectionRef.current;
-    const anchor = event.shiftKey && currentSelection ? currentSelection.start : cell;
-    const initialRange = normalizeRange2({ start: anchor, end: cell });
-    const isActive = isSameCell(activeCellRef.current, cell);
+    const anchor = event.shiftKey && currentSelection ? currentSelection.start : targetCell;
+    const initialRange = normalizeRange2({ start: anchor, end: targetCell });
+    const isActive = isSameCell(activeCellRef.current, targetCell);
     const committedOnPointerDown = !isActive || !editingCellRef.current;
-    const pointerOrigin = resolveCellPointerOrigin(cell, event.currentTarget.getBoundingClientRect(), event.clientX, event.clientY);
-    const originOverlayRect = resolveMountedCellOverlayRect(event.currentTarget);
+    const pointerOrigin = targetCell.row === cell.row && targetCell.col === cell.col ? resolveCellPointerOrigin(cell, event.currentTarget.getBoundingClientRect(), event.clientX, event.clientY) : resolveCellPointerOriginFromClient(targetCell, event.clientX, event.clientY);
+    const originOverlayRect = targetCell.row === cell.row && targetCell.col === cell.col ? resolveMountedCellOverlayRect(event.currentTarget) : resolveOverlayRect(initialRange);
     if (!pointerOrigin) {
       return;
     }
@@ -23864,7 +24226,7 @@ function XlsxGrid({
       event.pointerId,
       anchor,
       "cell",
-      cell,
+      targetCell,
       pointerOrigin,
       originOverlayRect,
       committedOnPointerDown,
@@ -23872,11 +24234,25 @@ function XlsxGrid({
       event.clientX,
       event.clientY
     );
-    applyPreviewOverlayFromElement(event.currentTarget, initialRange);
+    if (targetCell.row === cell.row && targetCell.col === cell.col) {
+      applyPreviewOverlayFromElement(event.currentTarget, initialRange);
+    } else {
+      applyPreviewOverlay(initialRange);
+    }
     if (committedOnPointerDown) {
       commitSelectionRange(initialRange);
     }
-  }, [applyPreviewOverlayFromElement, commitSelectionRange, focusGrid, resolveCellPointerOrigin, resolveMountedCellOverlayRect]);
+  }, [
+    applyPreviewOverlay,
+    applyPreviewOverlayFromElement,
+    commitSelectionRange,
+    focusGrid,
+    resolveCellPointerOrigin,
+    resolveCellPointerOriginFromClient,
+    resolveMountedCellOverlayRect,
+    resolveOverlayRect,
+    resolvePointerCellFromGeometry
+  ]);
   const handleRowPointerDown = React4.useCallback((event, actualRow) => {
     if (event.button !== 0 || firstVisibleCol === void 0 || lastVisibleCol === void 0) {
       return;
@@ -24036,6 +24412,24 @@ function XlsxGrid({
     rowPrefixSums,
     stickyTopByRow
   ]);
+  const scrollBodyViewportWidth = Math.max(0, drawingViewport.width - frozenPaneRight);
+  const scrollBodyViewportHeight = Math.max(0, drawingViewport.height - frozenPaneBottom);
+  const canvasScrollBufferX = Math.min(CANVAS_SCROLL_BUFFER_PX, scrollBodyViewportWidth);
+  const canvasScrollBufferY = Math.min(CANVAS_SCROLL_BUFFER_PX, scrollBodyViewportHeight);
+  const scrollBodyCanvasLeft = frozenPaneRight - canvasScrollBufferX;
+  const scrollBodyCanvasTop = frozenPaneBottom - canvasScrollBufferY;
+  const scrollBodyCanvasWidth = scrollBodyViewportWidth + canvasScrollBufferX * 2;
+  const scrollBodyCanvasHeight = scrollBodyViewportHeight + canvasScrollBufferY * 2;
+  const topBodyCanvasWidth = scrollBodyCanvasWidth;
+  const topBodyCanvasHeight = Math.max(0, frozenPaneBottom - displayHeaderHeight);
+  const leftBodyCanvasWidth = Math.max(0, frozenPaneRight - displayRowHeaderWidth);
+  const leftBodyCanvasHeight = scrollBodyCanvasHeight;
+  const cornerBodyCanvasWidth = leftBodyCanvasWidth;
+  const cornerBodyCanvasHeight = topBodyCanvasHeight;
+  const topFrozenHeaderCanvasWidth = leftBodyCanvasWidth;
+  const topScrollHeaderCanvasWidth = scrollBodyCanvasWidth;
+  const leftFrozenHeaderCanvasHeight = topBodyCanvasHeight;
+  const leftScrollHeaderCanvasHeight = scrollBodyCanvasHeight;
   const canvasColumnHeaderCells = React4.useMemo(
     () => canvasVisibleColItems.flatMap((column) => {
       const rect = resolveCanvasColumnHeaderRect(column.actualCol);
@@ -24048,7 +24442,7 @@ function XlsxGrid({
         height: displayHeaderHeight,
         isFrozen,
         left: rect.left,
-        localLeft: rect.left - (isFrozen ? displayRowHeaderWidth : frozenPaneRight),
+        localLeft: rect.left - (isFrozen ? displayRowHeaderWidth : scrollBodyCanvasLeft),
         width: rect.width
       }];
     }),
@@ -24056,8 +24450,8 @@ function XlsxGrid({
       canvasVisibleColItems,
       displayHeaderHeight,
       displayRowHeaderWidth,
-      frozenPaneRight,
       resolveCanvasColumnHeaderRect,
+      scrollBodyCanvasLeft,
       stickyLeftByCol
     ]
   );
@@ -24072,15 +24466,15 @@ function XlsxGrid({
         actualRow: row.actualRow,
         height: rect.height,
         isFrozen,
-        localTop: rect.top - (isFrozen ? displayHeaderHeight : frozenPaneBottom),
+        localTop: rect.top - (isFrozen ? displayHeaderHeight : scrollBodyCanvasTop),
         top: rect.top
       }];
     }),
     [
       canvasVisibleRowItems,
       displayHeaderHeight,
-      frozenPaneBottom,
       resolveCanvasRowHeaderRect,
+      scrollBodyCanvasTop,
       stickyTopByRow
     ]
   );
@@ -24347,10 +24741,46 @@ function XlsxGrid({
     rowPrefixSums,
     startCellSelection
   ]);
+  const getCanvasImage = React4.useCallback((image) => {
+    if (typeof Image === "undefined") {
+      return null;
+    }
+    const cacheKey = image.id;
+    const cached = canvasImageCacheRef.current.get(cacheKey);
+    if (cached && cached.src === image.src) {
+      return cached.loaded && !cached.failed ? cached.image : null;
+    }
+    const imageElement = new Image();
+    const entry = {
+      failed: false,
+      image: imageElement,
+      loaded: false,
+      src: image.src
+    };
+    canvasImageCacheRef.current.set(cacheKey, entry);
+    imageElement.onload = () => {
+      entry.loaded = true;
+      setCanvasImageLoadVersion((version) => version + 1);
+    };
+    imageElement.onerror = () => {
+      entry.failed = true;
+      setCanvasImageLoadVersion((version) => version + 1);
+    };
+    imageElement.src = image.src;
+    return null;
+  }, []);
   React4.useLayoutEffect(() => {
     if (!experimentalCanvas) {
       return;
     }
+    const canvasProfileTarget = typeof window !== "undefined" ? window.__xlsxCanvasProfile : void 0;
+    const canvasProfileStart = canvasProfileTarget ? performance.now() : 0;
+    let canvasProfileBodyStart = 0;
+    let canvasProfileBodyMs = 0;
+    let canvasProfileCulledCells = 0;
+    let canvasProfileDirtyRects = 0;
+    let canvasProfileLookedUpCells = 0;
+    let canvasProfilePaintedCells = 0;
     const dpr = typeof window === "undefined" ? 1 : Math.max(1, window.devicePixelRatio || 1);
     function configureCanvas(canvas, width, height, options) {
       if (!canvas) {
@@ -24370,7 +24800,7 @@ function XlsxGrid({
       if (canvas.style.height !== `${height}px`) {
         canvas.style.height = `${height}px`;
       }
-      const context = canvas.getContext("2d");
+      const context = canvas.getContext("2d", { alpha: false });
       if (!context) {
         return null;
       }
@@ -24389,6 +24819,7 @@ function XlsxGrid({
     const rangeSignature = buildRangeSignature(normalizedVisibleRange);
     const nextBodyCanvasSignature = {
       activeSheet: activeSheet ?? null,
+      bakedDrawingSignature: bakedCanvasDrawingSignature,
       bodyHeight,
       bodyWidth,
       colSignature: buildRenderedAxisSignature(canvasVisibleColItems, (item) => item.index),
@@ -24416,10 +24847,10 @@ function XlsxGrid({
     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 shouldRepaintBody = !(previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bakedDrawingSignature === nextBodyCanvasSignature.bakedDrawingSignature && 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.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
+      shouldRepaintBody && previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bakedDrawingSignature === nextBodyCanvasSignature.bakedDrawingSignature && 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
@@ -24430,49 +24861,37 @@ function XlsxGrid({
     if (!shouldRepaintBody && !shouldRepaintHeaders) {
       return;
     }
-    const scrollBodyCanvasWidth2 = Math.max(0, drawingViewport.width - frozenPaneRight);
-    const scrollBodyCanvasHeight2 = Math.max(0, drawingViewport.height - frozenPaneBottom);
-    const topBodyCanvasWidth2 = scrollBodyCanvasWidth2;
-    const topBodyCanvasHeight2 = Math.max(0, frozenPaneBottom - displayHeaderHeight);
-    const leftBodyCanvasWidth2 = Math.max(0, frozenPaneRight - displayRowHeaderWidth);
-    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,
+        height: cornerBodyCanvasHeight,
         left: displayRowHeaderWidth,
         top: displayHeaderHeight,
-        width: cornerBodyCanvasWidth2
+        width: cornerBodyCanvasWidth
       },
       left: {
-        height: leftBodyCanvasHeight2,
+        height: leftBodyCanvasHeight,
         left: displayRowHeaderWidth,
-        top: frozenPaneBottom,
-        width: leftBodyCanvasWidth2
+        top: scrollBodyCanvasTop,
+        width: leftBodyCanvasWidth
       },
       scroll: {
-        height: scrollBodyCanvasHeight2,
-        left: frozenPaneRight,
-        top: frozenPaneBottom,
-        width: scrollBodyCanvasWidth2
+        height: scrollBodyCanvasHeight,
+        left: scrollBodyCanvasLeft,
+        top: scrollBodyCanvasTop,
+        width: scrollBodyCanvasWidth
       },
       top: {
-        height: topBodyCanvasHeight2,
-        left: frozenPaneRight,
+        height: topBodyCanvasHeight,
+        left: scrollBodyCanvasLeft,
         top: displayHeaderHeight,
-        width: topBodyCanvasWidth2
+        width: topBodyCanvasWidth
       }
     };
     const bodyContexts = shouldRepaintBody ? {
-      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: configureCanvas(cornerBodyCanvasRef.current, cornerBodyCanvasWidth, cornerBodyCanvasHeight, { clear: !canBlitBody }),
+      left: configureCanvas(leftBodyCanvasRef.current, leftBodyCanvasWidth, leftBodyCanvasHeight, { clear: !canBlitBody }),
+      scroll: configureCanvas(scrollBodyCanvasRef.current, scrollBodyCanvasWidth, scrollBodyCanvasHeight, { clear: !canBlitBody }),
+      top: configureCanvas(topBodyCanvasRef.current, topBodyCanvasWidth, topBodyCanvasHeight, { clear: !canBlitBody })
     } : {
       corner: null,
       left: null,
@@ -24480,21 +24899,21 @@ function XlsxGrid({
       top: null
     };
     const topHeaderContexts = shouldRepaintHeaders ? {
-      frozen: configureCanvas(topFrozenHeaderCanvasRef.current, topFrozenHeaderCanvasWidth2, headerHeight),
-      scroll: configureCanvas(topScrollHeaderCanvasRef.current, topScrollHeaderCanvasWidth2, headerHeight, { clear: !canBlitTopHeader })
+      frozen: configureCanvas(topFrozenHeaderCanvasRef.current, topFrozenHeaderCanvasWidth, headerHeight),
+      scroll: configureCanvas(topScrollHeaderCanvasRef.current, topScrollHeaderCanvasWidth, 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: configureCanvas(leftFrozenHeaderCanvasRef.current, rowHeaderWidth, leftFrozenHeaderCanvasHeight),
+      scroll: configureCanvas(leftScrollHeaderCanvasRef.current, rowHeaderWidth, leftScrollHeaderCanvasHeight, { 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 && (!cornerContext || topFrozenHeaderCanvasWidth2 > 0 && !topHeaderContexts.frozen || topScrollHeaderCanvasWidth2 > 0 && !topHeaderContexts.scroll || leftFrozenHeaderCanvasHeight2 > 0 && !leftHeaderContexts.frozen || leftScrollHeaderCanvasHeight2 > 0 && !leftHeaderContexts.scroll)) {
+    if (shouldRepaintBody && (!bodyContexts.scroll || !bodyContexts.top || !bodyContexts.left || !bodyContexts.corner) || shouldRepaintHeaders && (!cornerContext || topFrozenHeaderCanvasWidth > 0 && !topHeaderContexts.frozen || topScrollHeaderCanvasWidth > 0 && !topHeaderContexts.scroll || leftFrozenHeaderCanvasHeight > 0 && !leftHeaderContexts.frozen || leftScrollHeaderCanvasHeight > 0 && !leftHeaderContexts.scroll)) {
       return;
     }
     const showGridLines = activeSheet?.showGridLines ?? true;
@@ -24511,10 +24930,282 @@ function XlsxGrid({
       scroll: [],
       top: []
     };
-    let topScrollHeaderDirtyRects = buildFullCanvasDirtyRect(topScrollHeaderCanvasWidth2, headerHeight);
-    let leftScrollHeaderDirtyRects = buildFullCanvasDirtyRect(rowHeaderWidth, leftScrollHeaderCanvasHeight2);
+    let topScrollHeaderDirtyRects = buildFullCanvasDirtyRect(topScrollHeaderCanvasWidth, headerHeight);
+    let leftScrollHeaderDirtyRects = buildFullCanvasDirtyRect(rowHeaderWidth, leftScrollHeaderCanvasHeight);
+    const bakedCanvasDrawingEntries = shouldBakeCanvasStaticDrawings ? [
+      ...bakedShapeRects.map(({ rect, shape }) => ({
+        kind: "shape",
+        rect,
+        shape,
+        zIndex: shape.zIndex
+      })),
+      ...bakedFormControlRects.map(({ control, rect }) => ({
+        control,
+        kind: "formControl",
+        rect,
+        zIndex: control.zIndex
+      })),
+      ...bakedImageRects.map(({ image, rect }) => ({
+        image,
+        kind: "image",
+        rect,
+        zIndex: image.zIndex
+      }))
+    ].sort((left, right) => left.zIndex - right.zIndex) : [];
+    const resolveBakedCanvasLocalRect = (rect, pane) => {
+      const bounds = paneBounds[pane];
+      const scrollX = pane === "scroll" || pane === "top" ? drawingViewport.left : 0;
+      const scrollY = pane === "scroll" || pane === "left" ? drawingViewport.top : 0;
+      return {
+        height: rect.height,
+        left: rect.left - scrollX - bounds.left,
+        top: rect.top - scrollY - bounds.top,
+        width: rect.width
+      };
+    };
+    const drawBakedShapeText = (context, shape, left, top, width, height) => {
+      if (shape.paragraphs.length === 0) {
+        return;
+      }
+      const inset = shape.textBox?.insetPx;
+      const paddingLeft = (inset?.left ?? 6) * zoomFactor;
+      const paddingRight = (inset?.right ?? 6) * zoomFactor;
+      const paddingTop = (inset?.top ?? 4) * zoomFactor;
+      const paddingBottom = (inset?.bottom ?? 4) * zoomFactor;
+      const textLeft = left + paddingLeft;
+      const textTop = top + paddingTop;
+      const textWidth = Math.max(0, width - paddingLeft - paddingRight);
+      const textHeight = Math.max(0, height - paddingTop - paddingBottom);
+      if (textWidth <= 0 || textHeight <= 0) {
+        return;
+      }
+      const lineMetrics = shape.paragraphs.map((paragraph) => {
+        const lineHeight = Math.max(
+          12 * zoomFactor,
+          ...paragraph.runs.map((run) => (run.fontSizePt ?? 11) * 96 / 72 * zoomFactor * 1.2)
+        );
+        const widthPx = paragraph.runs.reduce((total, run) => {
+          const fontSize = (run.fontSizePt ?? 11) * 96 / 72 * zoomFactor;
+          context.font = `${run.italic ? "italic " : ""}${run.bold ? "700 " : "400 "}${fontSize}px ${run.fontFamily ?? "Calibri, sans-serif"}`;
+          return total + measureCanvasTextWidth(context, run.text);
+        }, 0);
+        return { lineHeight, widthPx };
+      });
+      const totalTextHeight = lineMetrics.reduce((total, metric) => total + metric.lineHeight, 0);
+      let y = textTop;
+      if (shape.textBox?.verticalAlign === "middle") {
+        y = textTop + Math.max(0, (textHeight - totalTextHeight) / 2);
+      } else if (shape.textBox?.verticalAlign === "bottom") {
+        y = textTop + Math.max(0, textHeight - totalTextHeight);
+      }
+      context.save();
+      context.beginPath();
+      context.rect(textLeft, textTop, textWidth, textHeight);
+      context.clip();
+      context.textBaseline = "middle";
+      shape.paragraphs.forEach((paragraph, paragraphIndex) => {
+        const metric = lineMetrics[paragraphIndex] ?? { lineHeight: 14 * zoomFactor, widthPx: 0 };
+        let x = textLeft;
+        const align = paragraph.align ?? shape.textBox?.horizontalAlign ?? "left";
+        if (align === "center") {
+          x = textLeft + Math.max(0, (textWidth - metric.widthPx) / 2);
+        } else if (align === "right") {
+          x = textLeft + Math.max(0, textWidth - metric.widthPx);
+        }
+        paragraph.runs.forEach((run) => {
+          const fontSize = (run.fontSizePt ?? 11) * 96 / 72 * zoomFactor;
+          context.font = `${run.italic ? "italic " : ""}${run.bold ? "700 " : "400 "}${fontSize}px ${run.fontFamily ?? "Calibri, sans-serif"}`;
+          context.fillStyle = run.color ?? "#000000";
+          context.textAlign = "left";
+          const textY = y + metric.lineHeight / 2;
+          context.fillText(run.text, x, textY);
+          if (run.underline && run.text.length > 0) {
+            const textWidthPx = measureCanvasTextWidth(context, run.text);
+            context.strokeStyle = run.color ?? "#000000";
+            context.lineWidth = Math.max(1, zoomFactor * 0.75);
+            context.beginPath();
+            context.moveTo(x, textY + Math.max(2, fontSize * 0.28));
+            context.lineTo(x + textWidthPx, textY + Math.max(2, fontSize * 0.28));
+            context.stroke();
+          }
+          x += measureCanvasTextWidth(context, run.text);
+        });
+        y += metric.lineHeight;
+      });
+      context.restore();
+    };
+    const drawBakedShape = (context, shape, rect) => {
+      const fillColor = shape.fill?.none ? "transparent" : shape.fill?.color ?? "transparent";
+      const strokeColor = shape.stroke?.none ? "transparent" : shape.stroke?.color ?? "transparent";
+      const lineWidth = Math.max(0, (shape.stroke?.widthPx ?? (shape.geometry === "line" ? 2 : 1)) * zoomFactor);
+      const vectorShape = resolveShapeVector(shape);
+      const opacity = Math.min(shape.fill?.opacity ?? 1, shape.stroke?.opacity ?? 1);
+      context.save();
+      context.translate(rect.left + rect.width / 2, rect.top + rect.height / 2);
+      if (shape.rotationDeg) {
+        context.rotate(shape.rotationDeg * Math.PI / 180);
+      }
+      context.scale(shape.flipH ? -1 : 1, shape.flipV ? -1 : 1);
+      context.globalAlpha *= opacity;
+      context.lineWidth = lineWidth;
+      context.strokeStyle = strokeColor;
+      context.fillStyle = fillColor;
+      applyCanvasShapeDash(context, shape.stroke?.dash, lineWidth);
+      const localLeft = -rect.width / 2;
+      const localTop = -rect.height / 2;
+      if (vectorShape && typeof Path2D !== "undefined") {
+        context.save();
+        context.translate(localLeft, localTop);
+        context.scale(
+          rect.width / Math.max(1, vectorShape.viewBox.width),
+          rect.height / Math.max(1, vectorShape.viewBox.height)
+        );
+        const path = getCachedCanvasPath2D(vectorShape.path);
+        if (!path) {
+          context.restore();
+          context.restore();
+          return;
+        }
+        if (fillColor !== "transparent") {
+          context.fill(path);
+        }
+        if (strokeColor !== "transparent" && lineWidth > 0) {
+          context.stroke(path);
+        }
+        context.restore();
+      } else if (shape.geometry === "ellipse") {
+        context.beginPath();
+        context.ellipse(0, 0, rect.width / 2, rect.height / 2, 0, 0, Math.PI * 2);
+        if (fillColor !== "transparent") {
+          context.fill();
+        }
+        if (strokeColor !== "transparent" && lineWidth > 0) {
+          context.stroke();
+        }
+      } else {
+        const radius = shape.geometry === "roundRect" ? 12 * zoomFactor : 0;
+        drawCanvasRoundedRect(context, localLeft, localTop, rect.width, rect.height, radius);
+        if (fillColor !== "transparent") {
+          context.fill();
+        }
+        if (strokeColor !== "transparent" && lineWidth > 0) {
+          context.stroke();
+        }
+      }
+      drawBakedShapeText(context, shape, localLeft, localTop, rect.width, rect.height);
+      context.restore();
+    };
+    const drawBakedFormControl = (context, control, rect) => {
+      const label = resolveFormControlLabel(control);
+      const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
+      const textColor = control.textColor ?? "#000000";
+      const fontSizePx = Math.max(9 * zoomFactor, (control.fontSizePt ?? 9) * 96 / 72 * zoomFactor);
+      const iconSize = Math.min(14 * zoomFactor, Math.max(0, rect.height - 4 * zoomFactor));
+      context.save();
+      context.font = `400 ${fontSizePx}px ${control.fontFamily ?? "Calibri, sans-serif"}`;
+      context.textBaseline = "middle";
+      context.fillStyle = textColor;
+      context.strokeStyle = stroke;
+      context.lineWidth = Math.max(1, zoomFactor);
+      if (control.kind === "group-box") {
+        const labelInset = label ? Math.max(7, fontSizePx * 0.5) : 0;
+        drawCanvasRoundedRect(context, rect.left, rect.top + labelInset, rect.width, Math.max(0, rect.height - labelInset), 2 * zoomFactor);
+        context.stroke();
+        if (label) {
+          context.fillStyle = SHEET_SURFACE;
+          const labelWidth = Math.min(rect.width - 16 * zoomFactor, measureCanvasTextWidth(context, label) + 8 * zoomFactor);
+          context.fillRect(rect.left + 8 * zoomFactor, rect.top, labelWidth, fontSizePx * 1.2);
+          context.fillStyle = textColor;
+          context.textAlign = "left";
+          context.fillText(label, rect.left + 12 * zoomFactor, rect.top + fontSizePx * 0.55);
+        }
+        context.restore();
+        return;
+      }
+      if (control.kind === "button" || control.kind === "dropdown" || control.kind === "editbox" || control.kind === "listbox" || control.kind === "scrollbar" || control.kind === "spinner" || control.kind === "unknown") {
+        if (control.kind === "button") {
+          const gradient = context.createLinearGradient(rect.left, rect.top, rect.left, rect.top + rect.height);
+          gradient.addColorStop(0, "#f8fafc");
+          gradient.addColorStop(1, "#e2e8f0");
+          context.fillStyle = gradient;
+        } else {
+          context.fillStyle = "transparent";
+        }
+        drawCanvasRoundedRect(context, rect.left, rect.top, rect.width, rect.height, control.kind === "button" ? 4 * zoomFactor : 2 * zoomFactor);
+        if (control.kind === "button") {
+          context.fill();
+        }
+        context.stroke();
+      }
+      let textLeft = rect.left + 2 * zoomFactor;
+      const textRightInset = control.kind === "dropdown" ? 18 * zoomFactor : 6 * zoomFactor;
+      if (control.kind === "checkbox") {
+        context.strokeRect(rect.left + 2 * zoomFactor, rect.top + (rect.height - iconSize) / 2, iconSize, iconSize);
+        if (control.checked) {
+          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
+          context.fillRect(rect.left + 2 * zoomFactor + 1.5, rect.top + (rect.height - iconSize) / 2 + 1.5, Math.max(0, iconSize - 3), Math.max(0, iconSize - 3));
+          context.strokeStyle = paletteIsDark(palette) ? "#020617" : "#ffffff";
+          context.beginPath();
+          context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.24, rect.top + rect.height / 2 + iconSize * 0.06);
+          context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.45, rect.top + rect.height / 2 + iconSize * 0.26);
+          context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.8, rect.top + rect.height / 2 - iconSize * 0.2);
+          context.stroke();
+        }
+        textLeft += iconSize + 4 * zoomFactor;
+      } else if (control.kind === "radio") {
+        context.beginPath();
+        context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize / 2, 0, Math.PI * 2);
+        context.stroke();
+        if (control.checked) {
+          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
+          context.beginPath();
+          context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize * 0.25, 0, Math.PI * 2);
+          context.fill();
+        }
+        textLeft += iconSize + 4 * zoomFactor;
+      }
+      if (label) {
+        const maxTextWidth = Math.max(0, rect.left + rect.width - textLeft - textRightInset);
+        const text = truncateCanvasText(context, label, maxTextWidth);
+        context.fillStyle = textColor;
+        context.textAlign = control.textAlign === "right" ? "right" : control.textAlign === "center" ? "center" : "left";
+        const textX = context.textAlign === "right" ? rect.left + rect.width - textRightInset : context.textAlign === "center" ? textLeft + maxTextWidth / 2 : textLeft;
+        context.fillText(text, textX, rect.top + rect.height / 2);
+      }
+      if (control.kind === "dropdown") {
+        context.fillStyle = textColor;
+        context.textAlign = "center";
+        context.fillText("\u25BC", rect.left + rect.width - 10 * zoomFactor, rect.top + rect.height / 2);
+      }
+      context.restore();
+    };
+    const drawBakedCanvasDrawings = (pane, context, dirtyRects) => {
+      if (bakedCanvasDrawingEntries.length === 0 || dirtyRects.length === 0) {
+        return;
+      }
+      for (const entry of bakedCanvasDrawingEntries) {
+        if (resolveDrawingPane(entry.rect) !== pane) {
+          continue;
+        }
+        const localRect = resolveBakedCanvasLocalRect(entry.rect, pane);
+        if (localRect.left + localRect.width < 0 || localRect.top + localRect.height < 0 || localRect.left > paneBounds[pane].width || localRect.top > paneBounds[pane].height || !intersectsCanvasDirtyRects(localRect.left, localRect.top, localRect.width, localRect.height, dirtyRects)) {
+          continue;
+        }
+        if (entry.kind === "shape") {
+          drawBakedShape(context, entry.shape, localRect);
+        } else if (entry.kind === "formControl") {
+          drawBakedFormControl(context, entry.control, localRect);
+        } else {
+          const imageElement = getCanvasImage(entry.image);
+          if (imageElement) {
+            context.drawImage(imageElement, localRect.left, localRect.top, localRect.width, localRect.height);
+          }
+        }
+      }
+    };
     const cellPaneOrder = ["scroll", "top", "left", "corner"];
     if (shouldRepaintBody) {
+      canvasProfileBodyStart = canvasProfileTarget ? performance.now() : 0;
       for (const pane of Object.keys(bodyContexts)) {
         const context = bodyContexts[pane];
         const bounds = paneBounds[pane];
@@ -24545,6 +25236,7 @@ function XlsxGrid({
           context.clearRect(0, 0, bounds.width, bounds.height);
         }
         bodyDirtyRectsByPane[pane] = dirtyRects;
+        canvasProfileDirtyRects += dirtyRects.length;
         if (dirtyRects.length === 0) {
           continue;
         }
@@ -24561,6 +25253,22 @@ function XlsxGrid({
         if (!paneContext || paneDirtyRects.length === 0 || paneBoundsForCell.width <= 0 || paneBoundsForCell.height <= 0 || paneAxisItems.rows.length === 0 || paneAxisItems.cols.length === 0) {
           continue;
         }
+        let hasPendingGridlinePath = false;
+        const enqueueGridlinePath = () => {
+          if (!hasPendingGridlinePath) {
+            paneContext.beginPath();
+            hasPendingGridlinePath = true;
+          }
+        };
+        const flushPendingGridlines = () => {
+          if (!hasPendingGridlinePath) {
+            return;
+          }
+          paneContext.strokeStyle = palette.border;
+          paneContext.lineWidth = 1;
+          paneContext.stroke();
+          hasPendingGridlinePath = false;
+        };
         const drawnMergedAnchorKeys = /* @__PURE__ */ new Set();
         for (const rowItem of paneAxisItems.rows) {
           for (const colItem of paneAxisItems.cols) {
@@ -24568,6 +25276,33 @@ function XlsxGrid({
             const anchorCell = resolveMergeAnchorCell(cell);
             const anchorKey = `${anchorCell.row}:${anchorCell.col}`;
             let drawCell = anchorCell;
+            const drawRowIndex = rowIndexByActual.get(drawCell.row);
+            const drawColIndex = colIndexByActual.get(drawCell.col);
+            if (drawRowIndex === void 0 || drawColIndex === void 0) {
+              continue;
+            }
+            const baseCellLeft = displayRowHeaderWidth + (colPrefixSums[drawColIndex] ?? 0);
+            const baseCellTop = displayHeaderHeight + (rowPrefixSums[drawRowIndex] ?? 0);
+            const useFrozenHorizontalPosition = pane === "left" || pane === "corner";
+            const useFrozenVerticalPosition = pane === "top" || pane === "corner";
+            const roughLocalRect = {
+              height: displayEffectiveRowHeights[drawRowIndex] ?? rowItem.size,
+              left: (useFrozenHorizontalPosition ? stickyLeftByCol.get(drawCell.col) ?? baseCellLeft - drawingViewport.left : baseCellLeft - drawingViewport.left) - paneBoundsForCell.left,
+              top: (useFrozenVerticalPosition ? stickyTopByRow.get(drawCell.row) ?? baseCellTop - drawingViewport.top : baseCellTop - drawingViewport.top) - paneBoundsForCell.top,
+              width: displayEffectiveColWidths[drawColIndex] ?? colItem.size
+            };
+            const isMergedSecondaryProbe = anchorCell.row !== cell.row || anchorCell.col !== cell.col;
+            if (!isMergedSecondaryProbe && !intersectsCanvasDirtyRects(
+              roughLocalRect.left - CANVAS_DIRTY_CELL_CULL_MARGIN_PX,
+              roughLocalRect.top - CANVAS_DIRTY_CELL_CULL_MARGIN_PX,
+              roughLocalRect.width + CANVAS_DIRTY_CELL_CULL_MARGIN_PX * 2,
+              roughLocalRect.height + CANVAS_DIRTY_CELL_CULL_MARGIN_PX * 2,
+              paneDirtyRects
+            )) {
+              canvasProfileCulledCells += 1;
+              continue;
+            }
+            canvasProfileLookedUpCells += 1;
             let cellData = getCellData(drawCell.row, drawCell.col);
             if ((cellData.colSpan || cellData.rowSpan) && drawnMergedAnchorKeys.has(anchorKey)) {
               continue;
@@ -24578,16 +25313,9 @@ function XlsxGrid({
             if (cellData.colSpan || cellData.rowSpan) {
               drawnMergedAnchorKeys.add(anchorKey);
             }
-            const drawRowIndex = rowIndexByActual.get(drawCell.row);
-            const drawColIndex = colIndexByActual.get(drawCell.col);
-            if (drawRowIndex === void 0 || drawColIndex === void 0) {
-              continue;
-            }
             const displayRect = cellData.colSpan || cellData.rowSpan ? resolveCellDisplayRect(drawCell) : null;
-            const baseLeft = displayRect?.left ?? displayRowHeaderWidth + (colPrefixSums[drawColIndex] ?? 0);
-            const baseTop = displayRect?.top ?? displayHeaderHeight + (rowPrefixSums[drawRowIndex] ?? 0);
-            const useFrozenHorizontalPosition = pane === "left" || pane === "corner";
-            const useFrozenVerticalPosition = pane === "top" || pane === "corner";
+            const baseLeft = displayRect?.left ?? baseCellLeft;
+            const baseTop = displayRect?.top ?? baseCellTop;
             const localRect = {
               height: displayRect?.height ?? (displayEffectiveRowHeights[drawRowIndex] ?? rowItem.size),
               left: (useFrozenHorizontalPosition ? stickyLeftByCol.get(drawCell.col) ?? baseLeft - drawingViewport.left : baseLeft - drawingViewport.left) - paneBoundsForCell.left,
@@ -24599,13 +25327,18 @@ function XlsxGrid({
               continue;
             }
             if (!intersectsCanvasDirtyRects(localRect.left, localRect.top, drawableWidth, localRect.height, paneDirtyRects)) {
+              canvasProfileCulledCells += 1;
               continue;
             }
+            canvasProfilePaintedCells += 1;
             const cellStyle = cellData.style;
             const canvasCellStyle = cellData.canvas ?? buildCanvasCellStyleCache(cellStyle);
             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 !== sheetSurface;
+            if (hasExplicitCellFill || cellData.chartHighlight) {
+              flushPendingGridlines();
+            }
             paneContext.fillStyle = gradientFill ?? fillColor;
             paneContext.fillRect(localRect.left, localRect.top, localRect.width, localRect.height);
             if (cellData.chartHighlight) {
@@ -24651,10 +25384,8 @@ function XlsxGrid({
             const bottomNeighborTopBorder = bottomNeighborData?.isMergedSecondary ? null : bottomNeighborData?.canvas?.topBorder ?? parseCanvasBorderDeclaration(bottomNeighborData?.style.borderTop);
             const resolvedRightBorder = resolveCanvasBoundaryBorder(rightBorder, rightNeighborLeftBorder);
             const resolvedBottomBorder = resolveCanvasBoundaryBorder(bottomBorder, bottomNeighborTopBorder);
-            if (showGridLines && !hasExplicitCellFill) {
-              paneContext.strokeStyle = palette.border;
-              paneContext.lineWidth = 1;
-              paneContext.beginPath();
+            if (showGridLines && !hasExplicitCellFill && (!resolvedRightBorder || !resolvedBottomBorder)) {
+              enqueueGridlinePath();
               if (!resolvedRightBorder) {
                 paneContext.moveTo(localRect.left + localRect.width - 0.5, localRect.top);
                 paneContext.lineTo(localRect.left + localRect.width - 0.5, localRect.top + localRect.height);
@@ -24663,7 +25394,9 @@ function XlsxGrid({
                 paneContext.moveTo(localRect.left, localRect.top + localRect.height - 0.5);
                 paneContext.lineTo(localRect.left + localRect.width, localRect.top + localRect.height - 0.5);
               }
-              paneContext.stroke();
+            }
+            if (topBorder || resolvedRightBorder || resolvedBottomBorder || leftBorder || cellData.chartHighlight) {
+              flushPendingGridlines();
             }
             if (topBorder && drawRowIndex === 0) {
               strokeCanvasBorderSide(paneContext, "top", localRect, topBorder);
@@ -24696,17 +25429,26 @@ function XlsxGrid({
                 strokeCanvasBorderSide(paneContext, "left", localRect, highlightBorder);
               }
             }
+            const rawText = cellData.value ?? "";
+            const shouldDrawCanvasContent = cellData.checkboxState != null || cellData.sparkline || rawText.length > 0 || cellData.conditionalIcon || cellData.isTableHeader;
+            if (!shouldDrawCanvasContent) {
+              continue;
+            }
             const padding = canvasCellStyle.padding;
             const contentLeft = localRect.left + padding.left;
             const contentTop = localRect.top + padding.top;
             const contentWidth = Math.max(0, localRect.width - padding.left - padding.right);
             const contentHeight = Math.max(0, localRect.height - padding.top - padding.bottom);
+            if (contentWidth <= 0 || contentHeight <= 0) {
+              continue;
+            }
             const activeFontSizePx = cellData.shrinkToFitFontSizePx ?? resolveCanvasFontSizePx(cellStyle, 12 * zoomFactor);
             const textClipOverscan = Math.max(
               1,
               zoomFactor * 1.5,
               activeFontSizePx * (cellData.textRotationDeg ? 0.75 : 0.18)
             );
+            flushPendingGridlines();
             paneContext.save();
             paneContext.beginPath();
             paneContext.rect(
@@ -24838,7 +25580,6 @@ function XlsxGrid({
               const trailingInset = (cellData.conditionalIcon ? 18 * zoomFactor : 0) + (cellData.isTableHeader ? 16 * zoomFactor : 0);
               const spillMaxWidth = cellData.spillWidth && cellData.spillWidth > 0 ? Math.max(0, cellData.spillWidth - trailingInset) : null;
               const maxTextWidth = spillMaxWidth ?? Math.max(0, contentWidth - trailingInset);
-              const rawText = cellData.value ?? "";
               const textColor = canvasCellStyle.textColor;
               const shouldEllipsizeText = canvasCellStyle.textOverflowEllipsis;
               const shouldWrapText = canvasCellStyle.usesWrappedText || rawText.includes("\n");
@@ -24870,7 +25611,7 @@ function XlsxGrid({
                   const textY = textBlockTop + lineIndex * lineHeight + lineHeight / 2;
                   paneContext.fillText(line, textX, textY);
                   if (canvasCellStyle.textDecoration?.includes("underline") && line.length > 0) {
-                    const measured = Math.min(maxTextWidth, paneContext.measureText(line).width);
+                    const measured = Math.min(maxTextWidth, measureCanvasTextWidth(paneContext, line));
                     const underlineStartX = align === "right" ? textX - measured : align === "center" ? textX - measured / 2 : textX;
                     paneContext.beginPath();
                     paneContext.moveTo(underlineStartX, textY + Math.max(2, lineHeight * 0.24));
@@ -24904,7 +25645,7 @@ function XlsxGrid({
                 const textY = contentTop + contentHeight / 2;
                 paneContext.fillText(text, textX, textY);
                 if (canvasCellStyle.textDecoration?.includes("underline") && text.length > 0) {
-                  const measured = shouldEllipsizeText ? Math.min(maxTextWidth, paneContext.measureText(text).width) : paneContext.measureText(text).width;
+                  const measured = shouldEllipsizeText ? Math.min(maxTextWidth, measureCanvasTextWidth(paneContext, text)) : measureCanvasTextWidth(paneContext, text);
                   const underlineStartX = align === "right" ? textX - measured : align === "center" ? textX - measured / 2 : textX;
                   paneContext.beginPath();
                   paneContext.moveTo(underlineStartX, textY + 6 * zoomFactor);
@@ -24929,6 +25670,7 @@ function XlsxGrid({
             paneContext.restore();
           }
         }
+        flushPendingGridlines();
       }
       for (const pane of cellPaneOrder) {
         const paneContext = bodyContexts[pane];
@@ -24946,7 +25688,7 @@ function XlsxGrid({
           paneContext.textBaseline = "middle";
           paneContext.fillText(spillText.text, spillText.textX, spillText.textY);
           if (spillText.textDecoration?.includes("underline") && spillText.text.length > 0) {
-            const measured = spillText.ellipsize ? Math.min(spillText.maxWidth, paneContext.measureText(spillText.text).width) : paneContext.measureText(spillText.text).width;
+            const measured = spillText.ellipsize ? Math.min(spillText.maxWidth, measureCanvasTextWidth(paneContext, spillText.text)) : measureCanvasTextWidth(paneContext, spillText.text);
             const underlineStartX = spillText.align === "right" ? spillText.textX - measured : spillText.align === "center" ? spillText.textX - measured / 2 : spillText.textX;
             paneContext.beginPath();
             paneContext.moveTo(underlineStartX, spillText.underlineY);
@@ -24958,6 +25700,14 @@ function XlsxGrid({
           paneContext.restore();
         }
       }
+      for (const pane of cellPaneOrder) {
+        const paneContext = bodyContexts[pane];
+        if (!paneContext) {
+          continue;
+        }
+        drawBakedCanvasDrawings(pane, paneContext, bodyDirtyRectsByPane[pane]);
+      }
+      canvasProfileBodyMs = canvasProfileTarget ? performance.now() - canvasProfileBodyStart : 0;
     }
     if (shouldRepaintHeaders && cornerContext) {
       const topFrozenHeaderContext = topHeaderContexts.frozen;
@@ -24972,7 +25722,7 @@ function XlsxGrid({
             topScrollHeaderContext,
             bufferCanvas,
             dpr,
-            topScrollHeaderCanvasWidth2,
+            topScrollHeaderCanvasWidth,
             headerHeight,
             drawingViewport.left - previousPaintedViewport.left,
             0
@@ -24991,7 +25741,7 @@ function XlsxGrid({
             bufferCanvas,
             dpr,
             rowHeaderWidth,
-            leftScrollHeaderCanvasHeight2,
+            leftScrollHeaderCanvasHeight,
             0,
             drawingViewport.top - previousPaintedViewport.top
           );
@@ -25000,11 +25750,11 @@ function XlsxGrid({
           }
         }
       }
-      if (topFrozenHeaderContext && topFrozenHeaderCanvasWidth2 > 0) {
+      if (topFrozenHeaderContext && topFrozenHeaderCanvasWidth > 0) {
         topFrozenHeaderContext.fillStyle = palette.headerSurface;
-        topFrozenHeaderContext.fillRect(0, 0, topFrozenHeaderCanvasWidth2, headerHeight);
+        topFrozenHeaderContext.fillRect(0, 0, topFrozenHeaderCanvasWidth, headerHeight);
       }
-      if (topScrollHeaderContext && topScrollHeaderCanvasWidth2 > 0) {
+      if (topScrollHeaderContext && topScrollHeaderCanvasWidth > 0) {
         topScrollHeaderContext.fillStyle = palette.headerSurface;
         for (const dirtyRect of topScrollHeaderDirtyRects) {
           topScrollHeaderContext.fillRect(dirtyRect.left, dirtyRect.top, dirtyRect.width, dirtyRect.height);
@@ -25023,7 +25773,7 @@ function XlsxGrid({
         if (!paneContext) {
           continue;
         }
-        if (column.localLeft + column.width < 0 || column.localLeft > (column.isFrozen ? topFrozenHeaderCanvasWidth2 : topScrollHeaderCanvasWidth2)) {
+        if (column.localLeft + column.width < 0 || column.localLeft > (column.isFrozen ? topFrozenHeaderCanvasWidth : topScrollHeaderCanvasWidth)) {
           continue;
         }
         if (!column.isFrozen && !intersectsCanvasDirtyRects(column.localLeft, 0, column.width, column.height, topScrollHeaderDirtyRects)) {
@@ -25049,11 +25799,11 @@ function XlsxGrid({
           column.height / 2
         );
       }
-      if (leftFrozenHeaderContext && leftFrozenHeaderCanvasHeight2 > 0) {
+      if (leftFrozenHeaderContext && leftFrozenHeaderCanvasHeight > 0) {
         leftFrozenHeaderContext.fillStyle = palette.rowHeaderSurface;
-        leftFrozenHeaderContext.fillRect(0, 0, rowHeaderWidth, leftFrozenHeaderCanvasHeight2);
+        leftFrozenHeaderContext.fillRect(0, 0, rowHeaderWidth, leftFrozenHeaderCanvasHeight);
       }
-      if (leftScrollHeaderContext && leftScrollHeaderCanvasHeight2 > 0) {
+      if (leftScrollHeaderContext && leftScrollHeaderCanvasHeight > 0) {
         leftScrollHeaderContext.fillStyle = palette.rowHeaderSurface;
         for (const dirtyRect of leftScrollHeaderDirtyRects) {
           leftScrollHeaderContext.fillRect(dirtyRect.left, dirtyRect.top, dirtyRect.width, dirtyRect.height);
@@ -25072,7 +25822,7 @@ function XlsxGrid({
         if (!paneContext) {
           continue;
         }
-        if (row.localTop + row.height < 0 || row.localTop > (row.isFrozen ? leftFrozenHeaderCanvasHeight2 : leftScrollHeaderCanvasHeight2)) {
+        if (row.localTop + row.height < 0 || row.localTop > (row.isFrozen ? leftFrozenHeaderCanvasHeight : leftScrollHeaderCanvasHeight)) {
           continue;
         }
         if (!row.isFrozen && !intersectsCanvasDirtyRects(0, row.localTop, rowHeaderWidth, row.height, leftScrollHeaderDirtyRects)) {
@@ -25112,9 +25862,29 @@ function XlsxGrid({
       paintedHeaderCanvasSignatureRef.current = nextHeaderCanvasSignature;
     }
     applyCanvasViewportCompensation();
+    if (canvasProfileTarget) {
+      canvasProfileTarget.push({
+        bodyMs: canvasProfileBodyMs,
+        culledCells: canvasProfileCulledCells,
+        dirtyRects: canvasProfileDirtyRects,
+        lookedUpCells: canvasProfileLookedUpCells,
+        paintedCells: canvasProfilePaintedCells,
+        repaintBody: shouldRepaintBody,
+        repaintHeaders: shouldRepaintHeaders,
+        renderToLayoutMs: canvasProfileStart - xlsxGridRenderStart,
+        totalMs: performance.now() - canvasProfileStart
+      });
+      if (canvasProfileTarget.length > 500) {
+        canvasProfileTarget.splice(0, canvasProfileTarget.length - 500);
+      }
+    }
   }, [
     activeSheet,
     applyCanvasViewportCompensation,
+    bakedCanvasDrawingSignature,
+    bakedFormControlRects,
+    bakedImageRects,
+    bakedShapeRects,
     canvasColumnHeaderCells,
     canvasPaneAxisItems,
     canvasRowHeaderCells,
@@ -25135,15 +25905,16 @@ function XlsxGrid({
     frozenPaneBottom,
     frozenPaneRight,
     getCellData,
+    getCanvasImage,
     getBodyBlitBufferCanvas,
     getHeaderBlitBufferCanvas,
     palette,
     resolveCellDisplayRect,
     resolveMergeAnchorCell,
-    resizeGuide,
     rowIndexByActual,
     rowPrefixSums,
     selectionHeaderSurface,
+    shouldBakeCanvasStaticDrawings,
     stickyLeftByCol,
     stickyTopByRow,
     visibleCols,
@@ -25361,7 +26132,7 @@ function XlsxGrid({
       start: virtualRow?.start ?? (rowPrefixSums[index] ?? 0)
     };
   });
-  const totalHeight = shouldVirtualizeRows ? rowVirtualizer.getTotalSize() : rowPrefixSums[rowPrefixSums.length - 1] ?? 0;
+  const totalHeight = shouldUseDomVirtualizer && shouldVirtualizeRows ? rowVirtualizer.getTotalSize() : rowPrefixSums[rowPrefixSums.length - 1] ?? 0;
   const totalWidth = totalContentWidth + displayRowHeaderWidth;
   const sheetContentHeight = displayHeaderHeight + totalHeight;
   const isLiveZooming = liveGestureZoom !== null && zoomScale === liveGestureZoom.baseZoomScale;
@@ -25435,18 +26206,6 @@ function XlsxGrid({
     width: 0,
     zIndex: canvasHeaderOverlayZIndex
   };
-  const scrollBodyCanvasWidth = Math.max(0, drawingViewport.width - frozenPaneRight);
-  const scrollBodyCanvasHeight = Math.max(0, drawingViewport.height - frozenPaneBottom);
-  const topBodyCanvasWidth = scrollBodyCanvasWidth;
-  const topBodyCanvasHeight = Math.max(0, frozenPaneBottom - displayHeaderHeight);
-  const leftBodyCanvasWidth = Math.max(0, frozenPaneRight - displayRowHeaderWidth);
-  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",
@@ -25458,13 +26217,13 @@ function XlsxGrid({
   const canvasScrollBodyStyle = {
     ...canvasBodyBaseStyle,
     display: scrollBodyCanvasWidth > 0 && scrollBodyCanvasHeight > 0 ? "block" : "none",
-    left: frozenPaneRight,
-    top: frozenPaneBottom
+    left: scrollBodyCanvasLeft,
+    top: scrollBodyCanvasTop
   };
   const canvasTopBodyStyle = {
     ...canvasBodyBaseStyle,
     display: topBodyCanvasWidth > 0 && topBodyCanvasHeight > 0 ? "block" : "none",
-    left: frozenPaneRight,
+    left: scrollBodyCanvasLeft,
     top: displayHeaderHeight,
     zIndex: 30
   };
@@ -25472,7 +26231,7 @@ function XlsxGrid({
     ...canvasBodyBaseStyle,
     display: leftBodyCanvasWidth > 0 && leftBodyCanvasHeight > 0 ? "block" : "none",
     left: displayRowHeaderWidth,
-    top: frozenPaneBottom,
+    top: scrollBodyCanvasTop,
     zIndex: 30
   };
   const canvasCornerBodyStyle = {
@@ -25498,7 +26257,7 @@ function XlsxGrid({
   const canvasTopScrollHeaderStyle = {
     ...canvasHeaderBaseStyle,
     display: topScrollHeaderCanvasWidth > 0 && drawingViewport.height > 0 ? "block" : "none",
-    left: frozenPaneRight,
+    left: scrollBodyCanvasLeft,
     top: 0,
     zIndex: canvasHeaderOverlayZIndex
   };
@@ -25513,7 +26272,7 @@ function XlsxGrid({
     ...canvasHeaderBaseStyle,
     display: leftScrollHeaderCanvasHeight > 0 && drawingViewport.width > 0 ? "block" : "none",
     left: 0,
-    top: frozenPaneBottom,
+    top: scrollBodyCanvasTop,
     zIndex: canvasHeaderOverlayZIndex
   };
   const canvasCornerHeaderStyle = {
@@ -26069,26 +26828,26 @@ function XlsxGrid({
   };
   const canvasScrollOverlayPaneStyle = {
     ...canvasOverlayPaneBaseStyle,
-    display: scrollBodyCanvasWidth > 0 && scrollBodyCanvasHeight > 0 ? "block" : "none",
-    height: scrollBodyCanvasHeight,
+    display: scrollBodyViewportWidth > 0 && scrollBodyViewportHeight > 0 ? "block" : "none",
+    height: scrollBodyViewportHeight,
     left: frozenPaneRight,
     top: frozenPaneBottom,
-    width: scrollBodyCanvasWidth,
+    width: scrollBodyViewportWidth,
     zIndex: 20
   };
   const canvasTopOverlayPaneStyle = {
     ...canvasOverlayPaneBaseStyle,
-    display: topBodyCanvasWidth > 0 && topBodyCanvasHeight > 0 ? "block" : "none",
+    display: scrollBodyViewportWidth > 0 && topBodyCanvasHeight > 0 ? "block" : "none",
     height: topBodyCanvasHeight,
     left: frozenPaneRight,
     top: displayHeaderHeight,
-    width: topBodyCanvasWidth,
+    width: scrollBodyViewportWidth,
     zIndex: 35
   };
   const canvasLeftOverlayPaneStyle = {
     ...canvasOverlayPaneBaseStyle,
-    display: leftBodyCanvasWidth > 0 && leftBodyCanvasHeight > 0 ? "block" : "none",
-    height: leftBodyCanvasHeight,
+    display: leftBodyCanvasWidth > 0 && scrollBodyViewportHeight > 0 ? "block" : "none",
+    height: scrollBodyViewportHeight,
     left: displayRowHeaderWidth,
     top: frozenPaneBottom,
     width: leftBodyCanvasWidth,
@@ -26103,8 +26862,9 @@ function XlsxGrid({
     width: cornerBodyCanvasWidth,
     zIndex: 36
   };
+  const drawingViewportCacheSignature = `${Math.floor(drawingViewport.left / CANVAS_VIEWPORT_OVERSCAN_PX)}:${Math.floor(drawingViewport.top / CANVAS_VIEWPORT_OVERSCAN_PX)}:${drawingViewport.width}:${drawingViewport.height}`;
   const previousPaneDrawingNodes = paneDrawingNodesCacheRef.current;
-  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === formControlRects && previousPaneDrawingNodes.shapeRects === shapeRects && previousPaneDrawingNodes.imageRects === imageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewport.left === drawingViewport.left && previousPaneDrawingNodes.drawingViewport.top === drawingViewport.top && previousPaneDrawingNodes.drawingViewport.width === drawingViewport.width && previousPaneDrawingNodes.drawingViewport.height === drawingViewport.height;
+  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === domFormControlRects && previousPaneDrawingNodes.shapeRects === domShapeRects && previousPaneDrawingNodes.imageRects === domImageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
   const paneDrawingNodes = canReusePaneDrawingNodes ? previousPaneDrawingNodes.value : !showImages ? {
     corner: null,
     left: null,
@@ -26113,35 +26873,35 @@ function XlsxGrid({
   } : {
     corner: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       chartRects.map(({ chart, rect }) => renderChartDrawing(chart, rect, "corner")),
-      shapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "corner")),
-      formControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "corner")),
-      imageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "corner"))
+      domShapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "corner")),
+      domFormControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "corner")),
+      domImageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "corner"))
     ] }),
     left: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       chartRects.map(({ chart, rect }) => renderChartDrawing(chart, rect, "left")),
-      shapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "left")),
-      formControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "left")),
-      imageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "left"))
+      domShapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "left")),
+      domFormControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "left")),
+      domImageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "left"))
     ] }),
     scroll: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       chartRects.map(({ chart, rect }) => renderChartDrawing(chart, rect, "scroll")),
-      shapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "scroll")),
-      formControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "scroll")),
-      imageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "scroll"))
+      domShapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "scroll")),
+      domFormControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "scroll")),
+      domImageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "scroll"))
     ] }),
     top: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       chartRects.map(({ chart, rect }) => renderChartDrawing(chart, rect, "top")),
-      shapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "top")),
-      formControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "top")),
-      imageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "top"))
+      domShapeRects.map(({ shape, rect }) => renderShapeDrawing(shape, rect, "top")),
+      domFormControlRects.map(({ control, rect }) => renderFormControlDrawing(control, rect, "top")),
+      domImageRects.map(({ image, rect }) => renderImageDrawing(image, rect, "top"))
     ] })
   };
   if (!canReusePaneDrawingNodes) {
     paneDrawingNodesCacheRef.current = {
       chartRects,
-      drawingViewport,
-      formControlRects,
-      imageRects,
+      drawingViewportSignature: drawingViewportCacheSignature,
+      formControlRects: domFormControlRects,
+      imageRects: domImageRects,
       isChartsLoading,
       palette,
       readOnly,
@@ -26151,7 +26911,7 @@ function XlsxGrid({
       selectedChartId,
       selectedImageId,
       selectionStroke,
-      shapeRects,
+      shapeRects: domShapeRects,
       showImages,
       value: paneDrawingNodes
     };
@@ -26659,10 +27419,11 @@ function XlsxGrid({
                         style: canvasCornerBodyStyle
                       }
                     ),
-                    showImages ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                    hasCanvasDomDrawingOverlays ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasScrollOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "div",
                         {
+                          ref: canvasScrollOverlayContentRef,
                           style: {
                             height: sheetContentHeight,
                             left: 0,
@@ -26670,6 +27431,7 @@ function XlsxGrid({
                             position: "absolute",
                             top: 0,
                             transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
+                            transformOrigin: "0 0",
                             width: totalWidth
                           },
                           children: paneDrawingNodes.scroll
@@ -26678,6 +27440,7 @@ function XlsxGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasTopOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "div",
                         {
+                          ref: canvasTopOverlayContentRef,
                           style: {
                             height: sheetContentHeight,
                             left: 0,
@@ -26685,6 +27448,7 @@ function XlsxGrid({
                             position: "absolute",
                             top: 0,
                             transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
+                            transformOrigin: "0 0",
                             width: totalWidth
                           },
                           children: paneDrawingNodes.top
@@ -26693,6 +27457,7 @@ function XlsxGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasLeftOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "div",
                         {
+                          ref: canvasLeftOverlayContentRef,
                           style: {
                             height: sheetContentHeight,
                             left: 0,
@@ -26700,6 +27465,7 @@ function XlsxGrid({
                             position: "absolute",
                             top: 0,
                             transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
+                            transformOrigin: "0 0",
                             width: totalWidth
                           },
                           children: paneDrawingNodes.left
@@ -26708,6 +27474,7 @@ function XlsxGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasCornerOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "div",
                         {
+                          ref: canvasCornerOverlayContentRef,
                           style: {
                             height: sheetContentHeight,
                             left: 0,
@@ -26715,6 +27482,7 @@ function XlsxGrid({
                             position: "absolute",
                             top: 0,
                             transform: `translate(${-displayRowHeaderWidth}px, ${-displayHeaderHeight}px)`,
+                            transformOrigin: "0 0",
                             width: totalWidth
                           },
                           children: paneDrawingNodes.corner
@@ -27121,7 +27889,7 @@ function XlsxViewerInner({
   enableCanvasSelectionAnimation = true,
   enableGestureZoom = true,
   errorState,
-  experimentalCanvas = false,
+  experimentalCanvas = true,
   fileTooLargeState,
   height,
   isDark = false,
@@ -27634,7 +28402,7 @@ function useXlsxViewerThumbnails(options = {}) {
         if (!canvas) {
           return false;
         }
-        const context = canvas.getContext("2d");
+        const context = canvas.getContext("2d", { alpha: false });
         if (!context) {
           return false;
         }
@@ -27658,9 +28426,10 @@ function useXlsxViewerThumbnails(options = {}) {
         }
         context.setTransform(dpr * scale, 0, 0, dpr * scale, 0, 0);
         context.clearRect(0, 0, Math.max(1, sourceWidth), Math.max(1, sourceHeight));
+        const thumbnailSheetSurface = resolveSheetSurface(sheet, palette);
         context.fillStyle = palette.canvas;
         context.fillRect(0, 0, Math.max(1, sourceWidth), Math.max(1, sourceHeight));
-        context.fillStyle = resolveSheetSurface(sheet, palette);
+        context.fillStyle = thumbnailSheetSurface;
         context.fillRect(rowHeaderWidth, headerHeight, Math.max(1, colAxis.totalSize), Math.max(1, rowAxis.totalSize));
         if (includeHeaders) {
           context.fillStyle = palette.headerSurface;
@@ -27781,8 +28550,8 @@ function useXlsxViewerThumbnails(options = {}) {
             };
             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);
+            const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellData.style.backgroundColor === "string" ? cellData.style.backgroundColor : thumbnailSheetSurface);
+            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellData.style.backgroundColor === "string" && cellData.style.backgroundColor !== thumbnailSheetSurface;
             context.fillStyle = gradientFill ?? fillColor;
             context.fillRect(rect.left, rect.top, rect.width, rect.height);
             if (cellData.conditionalDataBar) {
@@ -27837,12 +28606,19 @@ function useXlsxViewerThumbnails(options = {}) {
             if (canvasCellStyle.leftBorder) {
               strokeCanvasBorderSide(context, "left", rect, canvasCellStyle.leftBorder);
             }
+            const rawText = cellData.value ?? "";
+            const shouldDrawThumbnailContent = cellData.checkboxState != null || cellData.sparkline || rawText.length > 0 || cellData.conditionalIcon;
+            if (!shouldDrawThumbnailContent) {
+              continue;
+            }
             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 ?? "";
+            if (contentWidth <= 0 || contentHeight <= 0) {
+              continue;
+            }
             context.save();
             context.beginPath();
             context.rect(contentLeft, contentTop, contentWidth, contentHeight);