@extend-ai/react-xlsx 0.2.0 → 0.3.0

package/dist/index.js

@@ -5929,21 +5929,35 @@ function getSheetsWasmModule() {
 }
 
 // src/worker-client.ts
+function createAbortError() {
+  if (typeof DOMException !== "undefined") {
+    return new DOMException("Aborted", "AbortError");
+  }
+  const error = new Error("Aborted");
+  error.name = "AbortError";
+  return error;
+}
 var XlsxWorkerClient = class {
   worker;
   nextRequestId = 1;
   pendingRequests = /* @__PURE__ */ new Map();
+  disposed = false;
   constructor() {
     this.worker = new Worker(new URL("./xlsx-worker.js", import.meta.url), { type: "module" });
     this.worker.addEventListener("message", this.handleMessage);
     this.worker.addEventListener("error", this.handleError);
   }
   dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
     this.worker.removeEventListener("message", this.handleMessage);
     this.worker.removeEventListener("error", this.handleError);
     this.worker.terminate();
+    const abortError = createAbortError();
     for (const request of this.pendingRequests.values()) {
-      request.reject(new Error("Worker was disposed."));
+      request.reject(abortError);
     }
     this.pendingRequests.clear();
   }
@@ -5979,6 +5993,10 @@ var XlsxWorkerClient = class {
   }
   request(message, transfer = []) {
     return new Promise((resolve, reject) => {
+      if (this.disposed) {
+        reject(createAbortError());
+        return;
+      }
       const id = this.nextRequestId;
       this.nextRequestId += 1;
       this.pendingRequests.set(id, { reject, resolve });
@@ -6610,12 +6628,26 @@ function parseClipboardText(text) {
   }
   return rows.map((row) => row.split("	"));
 }
-async function resolveWorkbookBuffer({ file, src }) {
+function createAbortError2() {
+  if (typeof DOMException !== "undefined") {
+    return new DOMException("Aborted", "AbortError");
+  }
+  const error = new Error("Aborted");
+  error.name = "AbortError";
+  return error;
+}
+function isAbortError(error) {
+  return error instanceof Error && error.name === "AbortError";
+}
+async function resolveWorkbookBuffer({ file, src }, signal) {
   let buffer;
+  if (signal?.aborted) {
+    throw createAbortError2();
+  }
   if (file) {
     buffer = file;
   } else if (src) {
-    const response = await fetch(src);
+    const response = await fetch(src, { signal });
     if (!response.ok) {
       throw new Error(`Failed to fetch workbook (status ${response.status})`);
     }
@@ -7380,10 +7412,13 @@ function useXlsxViewerController(options) {
       } catch {
         triggerFallback();
       }
-    }).catch(() => {
+    }).catch((error2) => {
       if (workerTimeoutHandle !== null) {
         window.clearTimeout(workerTimeoutHandle);
       }
+      if (isAbortError(error2)) {
+        return;
+      }
       triggerFallback();
     });
   }, [getWorkerClient, hasIncompleteWorkerChartSnapshot, setChartAssets, workerSupported]);
@@ -7453,6 +7488,7 @@ function useXlsxViewerController(options) {
       return;
     }
     let isCurrent = true;
+    const abortController = new AbortController();
     setIsLoading(true);
     setError(null);
     clearImageAssets();
@@ -7477,11 +7513,9 @@ function useXlsxViewerController(options) {
     setSortState(null);
     setZoomScaleOverridesByTabId({});
     setRevision(0);
-    if (!workerSupported) {
-      disposeWorkerClient();
-    }
-    void resolveWorkbookBuffer({ file, src }).then(async (buffer) => {
-      if (!isCurrent) {
+    disposeWorkerClient();
+    void resolveWorkbookBuffer({ file, src }, abortController.signal).then(async (buffer) => {
+      if (!isCurrent || abortController.signal.aborted) {
         return;
       }
       if (maxFileSizeBytes > 0 && buffer.byteLength > maxFileSizeBytes) {
@@ -7507,7 +7541,7 @@ function useXlsxViewerController(options) {
       if (shouldUseWorkerForLoad) {
         try {
           const snapshot = await getWorkerClient().loadWorkbook(buffer);
-          if (!isCurrent) {
+          if (!isCurrent || abortController.signal.aborted) {
             return;
           }
           if (hasIncompleteWorkerChartSnapshot(snapshot)) {
@@ -7527,6 +7561,9 @@ function useXlsxViewerController(options) {
           setIsLoading(false);
           return;
         } catch (workerError) {
+          if (!isCurrent || isAbortError(workerError)) {
+            return;
+          }
           if (!shouldFallbackFromWorkerError(workerError)) {
             throw workerError;
           }
@@ -7534,7 +7571,7 @@ function useXlsxViewerController(options) {
         }
       }
       const { imageAssets: nextImageAssets, parsedWorkbook: nextParsedWorkbook } = await loadWorkbookOnMainThread(buffer);
-      if (!isCurrent) {
+      if (!isCurrent || abortController.signal.aborted) {
         revokeWorkbookImageAssets(nextImageAssets);
         return;
       }
@@ -7556,7 +7593,7 @@ function useXlsxViewerController(options) {
       setSortState(null);
       setIsLoading(false);
     }).catch((nextError) => {
-      if (!isCurrent) {
+      if (!isCurrent || isAbortError(nextError)) {
         return;
       }
       setWorkbook(null);
@@ -7572,9 +7609,8 @@ function useXlsxViewerController(options) {
     });
     return () => {
       isCurrent = false;
-      if (!workerSupported) {
-        disposeWorkerClient();
-      }
+      abortController.abort();
+      disposeWorkerClient();
     };
   }, [
     clearChartAssets,
@@ -7740,6 +7776,9 @@ function useXlsxViewerController(options) {
         setIsChartsLoading(false);
         setIsLoading(false);
       }).catch(async (workerError) => {
+        if (isAbortError(workerError)) {
+          return;
+        }
         if (!shouldFallbackFromWorkerError(workerError)) {
           throw workerError;
         }
@@ -9422,9 +9461,6 @@ function useXlsxViewerController(options) {
 // src/XlsxViewer.tsx
 import * as React4 from "react";
 import {
-  elementScroll,
-  observeElementOffset,
-  observeElementRect,
   useVirtualizer
 } from "@tanstack/react-virtual";
 
@@ -15888,21 +15924,68 @@ var IMAGE_HANDLE_CURSOR = {
   sw: "nesw-resize",
   w: "ew-resize"
 };
-function observeZoomedElementRect(instance, zoomFactor, cb) {
-  return observeElementRect(instance, (rect) => {
-    cb({
-      height: rect.height / zoomFactor,
-      width: rect.width / zoomFactor
-    });
+var NUMERIC_LENGTH_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "borderRadius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "bottom",
+  "fontSize",
+  "gap",
+  "height",
+  "left",
+  "letterSpacing",
+  "margin",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "outlineOffset",
+  "outlineWidth",
+  "padding",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "right",
+  "textIndent",
+  "top",
+  "width"
+]);
+function scaleCssLengthExpression(value, scale) {
+  if (scale === 1) {
+    return value;
+  }
+  return value.replace(/(-?\d*\.?\d+)(px|pt)\b/g, (_, rawNumber, unit) => {
+    const nextValue = Number.parseFloat(rawNumber);
+    if (!Number.isFinite(nextValue)) {
+      return `${rawNumber}${unit}`;
+    }
+    return `${nextValue * scale}${unit}`;
   });
 }
-function observeZoomedElementOffset(instance, zoomFactor, cb) {
-  return observeElementOffset(instance, (offset, isScrolling) => {
-    cb(offset / zoomFactor, isScrolling);
+function scaleCssProperties(style, scale) {
+  if (scale === 1) {
+    return style;
+  }
+  const nextStyle = {};
+  Object.entries(style).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      nextStyle[key] = scaleCssLengthExpression(value, scale);
+      return;
+    }
+    if (typeof value === "number" && NUMERIC_LENGTH_STYLE_KEYS.has(key)) {
+      nextStyle[key] = value * scale;
+      return;
+    }
+    nextStyle[key] = value;
   });
-}
-function scrollToZoomedOffset(offset, zoomFactor, options, instance) {
-  elementScroll(offset * zoomFactor, options, instance);
+  return nextStyle;
 }
 function formatZoomScale(zoomScale) {
   return `${Math.round(zoomScale)}%`;
@@ -16139,7 +16222,9 @@ function resolveAxisStartOffset(actualIndex, actualIndices, sizes, indexByActual
   return sumBeforeActualIndex(actualIndices, sizes, actualIndex);
 }
 function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWidths, options) {
-  const resolveMarkerLeft = (col, colOffsetEmu) => ROW_HEADER_WIDTH + resolveAxisStartOffset(
+  const headerHeight = options?.headerHeight ?? HEADER_HEIGHT;
+  const rowHeaderWidth = options?.rowHeaderWidth ?? ROW_HEADER_WIDTH;
+  const resolveMarkerLeft = (col, colOffsetEmu) => rowHeaderWidth + resolveAxisStartOffset(
     col,
     visibleCols,
     colWidths,
@@ -16147,7 +16232,7 @@ function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWi
     options?.colPrefixSums,
     options?.actualColPrefixSums
   ) + emuToPixels(colOffsetEmu);
-  const resolveMarkerTop = (row, rowOffsetEmu) => HEADER_HEIGHT + resolveAxisStartOffset(
+  const resolveMarkerTop = (row, rowOffsetEmu) => headerHeight + resolveAxisStartOffset(
     row,
     visibleRows,
     rowHeights,
@@ -16158,8 +16243,8 @@ function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWi
   if (anchor.kind === "absolute") {
     return {
       height: Math.max(1, emuToPixels(anchor.sizeEmu.cy)),
-      left: ROW_HEADER_WIDTH + emuToPixels(anchor.positionEmu.x),
-      top: HEADER_HEIGHT + emuToPixels(anchor.positionEmu.y),
+      left: rowHeaderWidth + emuToPixels(anchor.positionEmu.x),
+      top: headerHeight + emuToPixels(anchor.positionEmu.y),
       width: Math.max(1, emuToPixels(anchor.sizeEmu.cx))
     };
   }
@@ -16239,14 +16324,18 @@ function rectIntersectsViewport(rect, viewport, overscan = 240) {
   const rectBottom = rect.top + rect.height;
   return rectRight >= viewportLeft && rect.left <= viewportRight && rectBottom >= viewportTop && rect.top <= viewportBottom;
 }
-function resolveFrozenDrawingPane(rect, frozenRows, frozenCols, actualRowHeights, actualColWidths, freezePanes, stickyTopByRow, stickyLeftByCol) {
+function resolveFrozenDrawingPane(rect, frozenRows, frozenCols, actualRowHeights, actualColWidths, freezePanes, stickyTopByRow, stickyLeftByCol, options) {
+  const headerHeight = options?.headerHeight ?? HEADER_HEIGHT;
+  const rowHeaderWidth = options?.rowHeaderWidth ?? ROW_HEADER_WIDTH;
+  const defaultRowHeight = options?.defaultRowHeight ?? DEFAULT_ROW_HEIGHT2;
+  const defaultColWidth = options?.defaultColWidth ?? DEFAULT_COL_WIDTH2;
   const frozenPaneBottom = freezePanes?.row && freezePanes.row > 0 && frozenRows.length > 0 ? frozenRows.reduce(
-    (max, row) => Math.max(max, (stickyTopByRow.get(row) ?? HEADER_HEIGHT) + (actualRowHeights[row] ?? DEFAULT_ROW_HEIGHT2)),
-    HEADER_HEIGHT
+    (max, row) => Math.max(max, (stickyTopByRow.get(row) ?? headerHeight) + (actualRowHeights[row] ?? defaultRowHeight)),
+    headerHeight
   ) : null;
   const frozenPaneRight = freezePanes?.col && freezePanes.col > 0 && frozenCols.length > 0 ? frozenCols.reduce(
-    (max, col) => Math.max(max, (stickyLeftByCol.get(col) ?? ROW_HEADER_WIDTH) + (actualColWidths[col] ?? DEFAULT_COL_WIDTH2)),
-    ROW_HEADER_WIDTH
+    (max, col) => Math.max(max, (stickyLeftByCol.get(col) ?? rowHeaderWidth) + (actualColWidths[col] ?? defaultColWidth)),
+    rowHeaderWidth
   ) : null;
   const freezeTop = frozenPaneBottom !== null && rect.top + rect.height <= frozenPaneBottom + 0.5;
   const freezeLeft = frozenPaneRight !== null && rect.left + rect.width <= frozenPaneRight + 0.5;
@@ -16261,8 +16350,8 @@ function resolveFrozenDrawingPane(rect, frozenRows, frozenCols, actualRowHeights
   }
   return "scroll";
 }
-function buildShapeContainerStyle(shape, rect) {
-  const borderWidth = shape.stroke?.none ? 0 : Math.max(0, shape.stroke?.widthPx ?? 0);
+function buildShapeContainerStyle(shape, rect, viewerScale = 1) {
+  const borderWidth = shape.stroke?.none ? 0 : Math.max(0, shape.stroke?.widthPx ?? 0) * viewerScale;
   const strokeColor = shape.stroke?.color ?? "transparent";
   const fillColor = shape.fill?.none ? "transparent" : shape.fill?.color ?? "transparent";
   const hasVisibleText = shape.paragraphs.some((paragraph) => paragraph.runs.some((run) => run.text.trim().length > 0));
@@ -16275,7 +16364,7 @@ function buildShapeContainerStyle(shape, rect) {
   if (shape.geometry === "ellipse") {
     borderRadius = "9999px";
   } else if (shape.geometry === "roundRect") {
-    borderRadius = 12;
+    borderRadius = 12 * viewerScale;
   }
   return {
     alignItems: shape.textBox?.verticalAlign === "middle" ? "center" : shape.textBox?.verticalAlign === "bottom" ? "flex-end" : "flex-start",
@@ -17203,25 +17292,29 @@ function renderShapeParagraph(paragraph, index, fallbackAlign = "left", textScal
     index
   );
 }
-function clampImageRect(rect) {
+function clampImageRect(rect, options) {
+  const contentOffsetLeft = options?.contentOffsetLeft ?? ROW_HEADER_WIDTH;
+  const contentOffsetTop = options?.contentOffsetTop ?? HEADER_HEIGHT;
+  const minSizePx = options?.minSizePx ?? IMAGE_MIN_SIZE_PX;
   return {
-    height: Math.max(IMAGE_MIN_SIZE_PX, rect.height),
-    left: Math.max(ROW_HEADER_WIDTH, rect.left),
-    top: Math.max(HEADER_HEIGHT, rect.top),
-    width: Math.max(IMAGE_MIN_SIZE_PX, rect.width)
+    height: Math.max(minSizePx, rect.height),
+    left: Math.max(contentOffsetLeft, rect.left),
+    top: Math.max(contentOffsetTop, rect.top),
+    width: Math.max(minSizePx, rect.width)
   };
 }
-function resolveImageHandleStyle(position, stroke, surface) {
-  const offset = IMAGE_HANDLE_SIZE_PX / 2;
+function resolveImageHandleStyle(position, stroke, surface, scale = 1) {
+  const handleSize = IMAGE_HANDLE_SIZE_PX * scale;
+  const offset = handleSize / 2;
   const style = {
     backgroundColor: surface,
-    border: `1px solid ${stroke}`,
-    borderRadius: 6,
+    border: `${Math.max(1, scale)}px solid ${stroke}`,
+    borderRadius: 6 * scale,
     cursor: IMAGE_HANDLE_CURSOR[position],
-    height: IMAGE_HANDLE_SIZE_PX,
+    height: handleSize,
     pointerEvents: "auto",
     position: "absolute",
-    width: IMAGE_HANDLE_SIZE_PX
+    width: handleSize
   };
   if (position.includes("n")) {
     style.top = -offset;
@@ -18677,7 +18770,8 @@ function buildConditionalIcon(iconSet, iconId) {
       };
   }
 }
-function renderConditionalIcon(icon) {
+function renderConditionalIcon(icon, scale = 1) {
+  const iconSize = 14 * scale;
   if (icon.shape === "arrow") {
     const fill = icon.color ?? "#111827";
     const stroke = icon.borderColor ?? darkenColor3(fill, 0.32);
@@ -18685,10 +18779,10 @@ function renderConditionalIcon(icon) {
       "svg",
       {
         "aria-hidden": "true",
-        height: 14,
+        height: iconSize,
         style: { display: "block" },
         viewBox: "0 0 16 16",
-        width: 14,
+        width: iconSize,
         children: /* @__PURE__ */ jsx3("g", { transform: `rotate(${icon.rotationDeg ?? 0} 8 8)`, children: /* @__PURE__ */ jsx3(
           "path",
           {
@@ -18710,12 +18804,12 @@ function renderConditionalIcon(icon) {
           alignItems: "center",
           color: icon.color ?? "#111827",
           display: "inline-flex",
-          fontSize: 13,
+          fontSize: 13 * scale,
           fontWeight: 700,
-          height: 14,
+          height: iconSize,
           justifyContent: "center",
           lineHeight: 1,
-          width: 14
+          width: iconSize
         },
         children: icon.glyph
       }
@@ -18729,17 +18823,17 @@ function renderConditionalIcon(icon) {
         border: icon.borderColor ? `1px solid ${icon.borderColor}` : "none",
         borderRadius: "999px",
         display: "inline-block",
-        height: 12,
-        width: 12
+        height: 12 * scale,
+        width: 12 * scale
       }
     }
   );
 }
-function renderCheckboxControl(checked, palette) {
+function renderCheckboxControl(checked, palette, scale = 1) {
   const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
   const fill = checked ? paletteIsDark(palette) ? "#60a5fa" : "#2563eb" : "transparent";
   const check = paletteIsDark(palette) ? "#020617" : "#ffffff";
-  return /* @__PURE__ */ jsxs3("svg", { "aria-hidden": "true", height: 14, style: { display: "block" }, viewBox: "0 0 16 16", width: 14, children: [
+  return /* @__PURE__ */ jsxs3("svg", { "aria-hidden": "true", height: 14 * scale, style: { display: "block" }, viewBox: "0 0 16 16", width: 14 * scale, children: [
     /* @__PURE__ */ jsx3("rect", { fill, height: 11, rx: 2, ry: 2, stroke, strokeWidth: 1.2, width: 11, x: 2.5, y: 2.5 }),
     checked ? /* @__PURE__ */ jsx3(
       "path",
@@ -18937,10 +19031,12 @@ function GridRow({
   readOnly,
   renderCellAdornment,
   rowHeight,
+  rowHeaderWidth,
   stickyLeftByCol,
   stickyTop,
   trailingSpacerWidth,
-  visibleCols
+  visibleCols,
+  zoomFactor
 }) {
   const gutterSeparatorShadow = `inset -1px 0 0 ${palette.border}, inset 0 -1px 0 ${palette.border}`;
   return /* @__PURE__ */ jsxs3("tr", { "data-xlsx-row": actualRow, style: { height: rowHeight }, children: [
@@ -18956,17 +19052,17 @@ function GridRow({
           boxSizing: "border-box",
           boxShadow: gutterSeparatorShadow,
           color: palette.mutedText,
-          fontSize: "11px",
+          fontSize: scaleCssLengthExpression("11px", zoomFactor),
           height: rowHeight,
           left: 0,
           maxHeight: rowHeight,
-          minWidth: ROW_HEADER_WIDTH,
-          padding: "2px 4px",
+          minWidth: rowHeaderWidth,
+          padding: scaleCssLengthExpression("2px 4px", zoomFactor),
           position: "sticky",
           top: stickyTop,
           textAlign: "center",
           userSelect: "none",
-          width: ROW_HEADER_WIDTH,
+          width: rowHeaderWidth,
           zIndex: stickyTop !== void 0 ? 45 : 35
         },
         children: /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
@@ -18977,9 +19073,9 @@ function GridRow({
               onPointerDown: (event) => onRowResizePointerDown(event, actualRow, rowHeight),
               style: {
                 backgroundColor: "transparent",
-                bottom: -8,
+                bottom: -8 * zoomFactor,
                 cursor: "row-resize",
-                height: 16,
+                height: 16 * zoomFactor,
                 left: 0,
                 position: "absolute",
                 width: "100%",
@@ -19080,7 +19176,7 @@ function GridRow({
         cellContentStyle.zIndex = 1;
       }
       if (trailingInset > 0) {
-        cellContentStyle.paddingRight = trailingInset + 4;
+        cellContentStyle.paddingRight = (trailingInset + 4) * zoomFactor;
       }
       if (cellData.conditionalIcon) {
         cellContentStyle.position = "relative";
@@ -19114,13 +19210,13 @@ function GridRow({
                 "aria-hidden": "true",
                 style: {
                   alignItems: "center",
-                  bottom: 4,
+                  bottom: 4 * zoomFactor,
                   display: "flex",
-                  left: 4,
+                  left: 4 * zoomFactor,
                   pointerEvents: "none",
                   position: "absolute",
-                  right: 4,
-                  top: 4,
+                  right: 4 * zoomFactor,
+                  top: 4 * zoomFactor,
                   zIndex: 0
                 },
                 children: /* @__PURE__ */ jsx3(
@@ -19149,12 +19245,12 @@ function GridRow({
                   justifyContent: "center",
                   pointerEvents: "none",
                   position: "absolute",
-                  right: conditionalIconRight,
+                  right: conditionalIconRight * zoomFactor,
                   top: "50%",
                   transform: "translateY(-50%)",
                   zIndex: 2
                 },
-                children: renderConditionalIcon(cellData.conditionalIcon)
+                children: renderConditionalIcon(cellData.conditionalIcon, zoomFactor)
               }
             ) : null,
             isEditing ? /* @__PURE__ */ jsx3(
@@ -19183,7 +19279,7 @@ function GridRow({
                   height: "100%",
                   margin: 0,
                   outline: "none",
-                  padding: DEFAULT_CELL_PADDING,
+                  padding: scaleCssLengthExpression(DEFAULT_CELL_PADDING, zoomFactor),
                   width: "100%"
                 },
                 value: editingValue
@@ -19225,7 +19321,7 @@ function GridRow({
                   pointerEvents: "none",
                   width: "100%"
                 },
-                children: renderCheckboxControl(cellData.checkboxState, palette)
+                children: renderCheckboxControl(cellData.checkboxState, palette, zoomFactor)
               }
             ) : /* @__PURE__ */ jsx3("div", { style: cellContentStyle, children: cellData.value })
           ]
@@ -19248,7 +19344,7 @@ function GridRow({
   ] });
 }
 var MemoGridRow = React4.memo(GridRow, (prev, next) => {
-  if (prev.actualRow !== next.actualRow || prev.rowHeight !== next.rowHeight || prev.palette !== next.palette || prev.readOnly !== next.readOnly || prev.visibleCols !== next.visibleCols || prev.leadingSpacerWidth !== next.leadingSpacerWidth || prev.stickyLeftByCol !== next.stickyLeftByCol || prev.stickyTop !== next.stickyTop || prev.trailingSpacerWidth !== next.trailingSpacerWidth || prev.getCellData !== next.getCellData || prev.onCellClick !== next.onCellClick || prev.onCellDoubleClick !== next.onCellDoubleClick || prev.onCellPointerDown !== next.onCellPointerDown || prev.onEditingCancel !== next.onEditingCancel || prev.onEditingCommit !== next.onEditingCommit || prev.onEditingValueChange !== next.onEditingValueChange || prev.onRowHeaderRef !== next.onRowHeaderRef || prev.onRowPointerDown !== next.onRowPointerDown || prev.onRowResizePointerDown !== next.onRowResizePointerDown || prev.renderCellAdornment !== next.renderCellAdornment) {
+  if (prev.actualRow !== next.actualRow || prev.rowHeight !== next.rowHeight || prev.palette !== next.palette || prev.readOnly !== next.readOnly || prev.visibleCols !== next.visibleCols || prev.leadingSpacerWidth !== next.leadingSpacerWidth || prev.rowHeaderWidth !== next.rowHeaderWidth || prev.stickyLeftByCol !== next.stickyLeftByCol || prev.stickyTop !== next.stickyTop || prev.trailingSpacerWidth !== next.trailingSpacerWidth || prev.zoomFactor !== next.zoomFactor || prev.getCellData !== next.getCellData || prev.onCellClick !== next.onCellClick || prev.onCellDoubleClick !== next.onCellDoubleClick || prev.onCellPointerDown !== next.onCellPointerDown || prev.onEditingCancel !== next.onEditingCancel || prev.onEditingCommit !== next.onEditingCommit || prev.onEditingValueChange !== next.onEditingValueChange || prev.onRowHeaderRef !== next.onRowHeaderRef || prev.onRowPointerDown !== next.onRowPointerDown || prev.onRowResizePointerDown !== next.onRowResizePointerDown || prev.renderCellAdornment !== next.renderCellAdornment) {
     return false;
   }
   const prevEditingCol = prev.editingCell?.row === prev.actualRow ? prev.editingCell.col : -1;
@@ -19425,20 +19521,25 @@ function XlsxGrid({
   );
   const hiddenRowSet = React4.useMemo(() => new Set(activeSheet?.hiddenRows ?? []), [activeSheet?.hiddenRows]);
   const hiddenColSet = React4.useMemo(() => new Set(activeSheet?.hiddenCols ?? []), [activeSheet?.hiddenCols]);
+  const displayDefaultRowHeight = DEFAULT_ROW_HEIGHT2 * zoomFactor;
+  const displayDefaultColWidth = DEFAULT_COL_WIDTH2 * zoomFactor;
+  const displayHeaderHeight = HEADER_HEIGHT * zoomFactor;
+  const displayRowHeaderWidth = ROW_HEADER_WIDTH * zoomFactor;
+  const displayImageMinSize = IMAGE_MIN_SIZE_PX * zoomFactor;
   const syncDrawingViewport = React4.useCallback((scroller) => {
     if (!scroller) {
       return;
     }
     setDrawingViewport((current) => {
       const next = {
-        height: scroller.clientHeight / zoomFactor,
-        left: scroller.scrollLeft / zoomFactor,
-        top: scroller.scrollTop / zoomFactor,
-        width: scroller.clientWidth / zoomFactor
+        height: scroller.clientHeight,
+        left: scroller.scrollLeft,
+        top: scroller.scrollTop,
+        width: scroller.clientWidth
       };
       return current.left === next.left && current.top === next.top && current.width === next.width && current.height === next.height ? current : next;
     });
-  }, [zoomFactor]);
+  }, []);
   const visibleRows = React4.useMemo(() => {
     return buildVisibleAxisIndices(
       activeSheet?.visibleRows ?? [],
@@ -19592,47 +19693,54 @@ function XlsxGrid({
       revision
     ]
   );
-  const effectiveColWidths = React4.useMemo(
-    () => visibleCols.map((col) => actualColWidths[col] ?? DEFAULT_COL_WIDTH2),
-    [actualColWidths, visibleCols]
+  const displayActualColWidths = React4.useMemo(
+    () => actualColWidths.map((width) => width * zoomFactor),
+    [actualColWidths, zoomFactor]
+  );
+  const displayActualRowHeights = React4.useMemo(
+    () => actualRowHeights.map((height) => height * zoomFactor),
+    [actualRowHeights, zoomFactor]
   );
-  const effectiveRowHeights = React4.useMemo(
-    () => visibleRows.map((row) => actualRowHeights[row] ?? DEFAULT_ROW_HEIGHT2),
-    [actualRowHeights, visibleRows]
+  const displayEffectiveColWidths = React4.useMemo(
+    () => visibleCols.map((col) => displayActualColWidths[col] ?? displayDefaultColWidth),
+    [displayActualColWidths, displayDefaultColWidth, visibleCols]
+  );
+  const displayEffectiveRowHeights = React4.useMemo(
+    () => visibleRows.map((row) => displayActualRowHeights[row] ?? displayDefaultRowHeight),
+    [displayActualRowHeights, displayDefaultRowHeight, visibleRows]
   );
   const rowIndexByActual = React4.useMemo(() => new Map(visibleRows.map((row, index) => [row, index])), [visibleRows]);
   const colIndexByActual = React4.useMemo(() => new Map(visibleCols.map((col, index) => [col, index])), [visibleCols]);
   const visibleRowsRef = React4.useRef(visibleRows);
   const visibleColsRef = React4.useRef(visibleCols);
-  const effectiveRowHeightsRef = React4.useRef(effectiveRowHeights);
-  const effectiveColWidthsRef = React4.useRef(effectiveColWidths);
-  const rowPrefixSums = React4.useMemo(() => buildPrefixSums(effectiveRowHeights), [effectiveRowHeights]);
-  const colPrefixSums = React4.useMemo(() => buildPrefixSums(effectiveColWidths), [effectiveColWidths]);
-  const actualRowPrefixSums = React4.useMemo(() => buildPrefixSums(actualRowHeights), [actualRowHeights]);
-  const actualColPrefixSums = React4.useMemo(() => buildPrefixSums(actualColWidths), [actualColWidths]);
+  const effectiveRowHeightsRef = React4.useRef(displayEffectiveRowHeights);
+  const effectiveColWidthsRef = React4.useRef(displayEffectiveColWidths);
+  const rowPrefixSums = React4.useMemo(() => buildPrefixSums(displayEffectiveRowHeights), [displayEffectiveRowHeights]);
+  const colPrefixSums = React4.useMemo(() => buildPrefixSums(displayEffectiveColWidths), [displayEffectiveColWidths]);
+  const actualRowPrefixSums = React4.useMemo(() => buildPrefixSums(displayActualRowHeights), [displayActualRowHeights]);
+  const actualColPrefixSums = React4.useMemo(() => buildPrefixSums(displayActualColWidths), [displayActualColWidths]);
   const stickyTopByRow = React4.useMemo(
-    () => buildStickyOffsets(frozenRows, actualRowHeights, HEADER_HEIGHT),
-    [actualRowHeights, frozenRows]
+    () => buildStickyOffsets(frozenRows, displayActualRowHeights, displayHeaderHeight),
+    [displayActualRowHeights, displayHeaderHeight, frozenRows]
   );
   const stickyLeftByCol = React4.useMemo(
-    () => buildStickyOffsets(frozenCols, actualColWidths, ROW_HEADER_WIDTH),
-    [actualColWidths, frozenCols]
+    () => buildStickyOffsets(frozenCols, displayActualColWidths, displayRowHeaderWidth),
+    [displayActualColWidths, displayRowHeaderWidth, frozenCols]
   );
   const frozenPaneBottom = React4.useMemo(
     () => frozenRows.length > 0 ? frozenRows.reduce(
-      (max, row) => Math.max(max, (stickyTopByRow.get(row) ?? HEADER_HEIGHT) + (actualRowHeights[row] ?? DEFAULT_ROW_HEIGHT2)),
-      HEADER_HEIGHT
-    ) : HEADER_HEIGHT,
-    [actualRowHeights, frozenRows, stickyTopByRow]
+      (max, row) => Math.max(max, (stickyTopByRow.get(row) ?? displayHeaderHeight) + (displayActualRowHeights[row] ?? displayDefaultRowHeight)),
+      displayHeaderHeight
+    ) : displayHeaderHeight,
+    [displayActualRowHeights, displayDefaultRowHeight, displayHeaderHeight, frozenRows, stickyTopByRow]
   );
   const frozenPaneRight = React4.useMemo(
     () => frozenCols.length > 0 ? frozenCols.reduce(
-      (max, col) => Math.max(max, (stickyLeftByCol.get(col) ?? ROW_HEADER_WIDTH) + (actualColWidths[col] ?? DEFAULT_COL_WIDTH2)),
-      ROW_HEADER_WIDTH
-    ) : ROW_HEADER_WIDTH,
-    [actualColWidths, frozenCols, stickyLeftByCol]
+      (max, col) => Math.max(max, (stickyLeftByCol.get(col) ?? displayRowHeaderWidth) + (displayActualColWidths[col] ?? displayDefaultColWidth)),
+      displayRowHeaderWidth
+    ) : displayRowHeaderWidth,
+    [displayActualColWidths, displayDefaultColWidth, displayRowHeaderWidth, frozenCols, stickyLeftByCol]
   );
-  const useNativeZoomForStickyLayout = zoomFactor !== 1;
   const rowPrefixSumsRef = React4.useRef(rowPrefixSums);
   const colPrefixSumsRef = React4.useRef(colPrefixSums);
   const firstVisibleRow = visibleRows[0];
@@ -19640,6 +19748,12 @@ function XlsxGrid({
   const firstVisibleCol = visibleCols[0];
   const lastVisibleCol = visibleCols[visibleCols.length - 1];
   const displayedSelection = fillPreviewRange ?? normalizedSelection;
+  const toLogicalRect = React4.useCallback((rect) => ({
+    height: rect.height / zoomFactor,
+    left: rect.left / zoomFactor,
+    top: rect.top / zoomFactor,
+    width: rect.width / zoomFactor
+  }), [zoomFactor]);
   const drawingExtents = React4.useMemo(() => {
     const imageExtents = images.reduce(
       (current, image) => {
@@ -19681,24 +19795,18 @@ function XlsxGrid({
   const shouldVirtualizeCols = !activeSheet?.hasHorizontalMerges && frozenCols.length === 0;
   const rowVirtualizer = useVirtualizer({
     count: visibleRows.length,
-    estimateSize: (index) => effectiveRowHeights[index] ?? DEFAULT_ROW_HEIGHT2,
+    estimateSize: (index) => displayEffectiveRowHeights[index] ?? displayDefaultRowHeight,
     getScrollElement: () => scrollRef.current,
     getItemKey: (index) => visibleRows[index] ?? index,
-    observeElementOffset: (instance, cb) => observeZoomedElementOffset(instance, zoomFactor, cb),
-    observeElementRect: (instance, cb) => observeZoomedElementRect(instance, zoomFactor, cb),
-    overscan: 10,
-    scrollToFn: (offset, options, instance) => scrollToZoomedOffset(offset, zoomFactor, options, instance)
+    overscan: 10
   });
   const colVirtualizer = useVirtualizer({
     count: visibleCols.length,
-    estimateSize: (index) => effectiveColWidths[index] ?? DEFAULT_COL_WIDTH2,
+    estimateSize: (index) => displayEffectiveColWidths[index] ?? displayDefaultColWidth,
     getScrollElement: () => scrollRef.current,
     getItemKey: (index) => visibleCols[index] ?? index,
     horizontal: true,
-    observeElementOffset: (instance, cb) => observeZoomedElementOffset(instance, zoomFactor, cb),
-    observeElementRect: (instance, cb) => observeZoomedElementRect(instance, zoomFactor, cb),
-    overscan: 6,
-    scrollToFn: (offset, options, instance) => scrollToZoomedOffset(offset, zoomFactor, options, instance)
+    overscan: 6
   });
   const currentRowVirtualItems = rowVirtualizer.getVirtualItems();
   const currentColVirtualItems = colVirtualizer.getVirtualItems();
@@ -19834,11 +19942,11 @@ function XlsxGrid({
   React4.useEffect(() => {
     visibleRowsRef.current = visibleRows;
     visibleColsRef.current = visibleCols;
-    effectiveRowHeightsRef.current = effectiveRowHeights;
-    effectiveColWidthsRef.current = effectiveColWidths;
+    effectiveRowHeightsRef.current = displayEffectiveRowHeights;
+    effectiveColWidthsRef.current = displayEffectiveColWidths;
     rowPrefixSumsRef.current = rowPrefixSums;
     colPrefixSumsRef.current = colPrefixSums;
-  }, [colPrefixSums, effectiveColWidths, effectiveRowHeights, rowPrefixSums, visibleCols, visibleRows]);
+  }, [colPrefixSums, displayEffectiveColWidths, displayEffectiveRowHeights, rowPrefixSums, visibleCols, visibleRows]);
   React4.useLayoutEffect(() => {
     const scroller = scrollRef.current;
     const previousZoomFactor = previousZoomFactorRef.current;
@@ -19963,13 +20071,13 @@ function XlsxGrid({
     const currentScroller = event.currentTarget;
     cachedScrollerRectRef.current = null;
     syncDrawingViewport(currentScroller);
-    if ((currentScroller.scrollHeight - (currentScroller.scrollTop + currentScroller.clientHeight)) / zoomFactor < OPEN_GRID_VERTICAL_EDGE_PX) {
+    if (currentScroller.scrollHeight - (currentScroller.scrollTop + currentScroller.clientHeight) < OPEN_GRID_VERTICAL_EDGE_PX) {
       setDisplayRowLimit((current) => current + OPEN_GRID_ROW_GROWTH);
     }
-    if ((currentScroller.scrollWidth - (currentScroller.scrollLeft + currentScroller.clientWidth)) / zoomFactor < OPEN_GRID_HORIZONTAL_EDGE_PX) {
+    if (currentScroller.scrollWidth - (currentScroller.scrollLeft + currentScroller.clientWidth) < OPEN_GRID_HORIZONTAL_EDGE_PX) {
       setDisplayColLimit((current) => current + OPEN_GRID_COL_GROWTH);
     }
-  }, [syncDrawingViewport, zoomFactor]);
+  }, [syncDrawingViewport]);
   React4.useEffect(() => {
     if (!openTableMenu) {
       return;
@@ -20008,24 +20116,24 @@ function XlsxGrid({
     }
     const pointerOffsetX = clientX - scrollerRect.left;
     const pointerOffsetY = clientY - scrollerRect.top;
-    const localX = pointerOffsetX / zoomFactor + (pointerOffsetX >= frozenPaneRight * zoomFactor ? scroller.scrollLeft / zoomFactor : 0);
-    const localY = pointerOffsetY / zoomFactor + (pointerOffsetY >= frozenPaneBottom * zoomFactor ? scroller.scrollTop / zoomFactor : 0);
-    const rowContentOffset = localY - HEADER_HEIGHT;
-    const colContentOffset = localX - ROW_HEADER_WIDTH;
+    const localX = pointerOffsetX + (pointerOffsetX >= frozenPaneRight ? scroller.scrollLeft : 0);
+    const localY = pointerOffsetY + (pointerOffsetY >= frozenPaneBottom ? scroller.scrollTop : 0);
+    const rowContentOffset = localY - displayHeaderHeight;
+    const colContentOffset = localX - displayRowHeaderWidth;
     let geometryCell = null;
-    if (localY >= HEADER_HEIGHT && localX < ROW_HEADER_WIDTH) {
+    if (localY >= displayHeaderHeight && localX < displayRowHeaderWidth) {
       const rowIndex = findIndexForOffsetPrefix(rowPrefixSumsCurrent, rowContentOffset);
       const actualRow = visibleRowsCurrent[rowIndex];
       if (actualRow !== void 0 && firstVisibleColRef.current !== void 0) {
         geometryCell = { row: actualRow, col: firstVisibleColRef.current };
       }
-    } else if (localY < HEADER_HEIGHT && localX >= ROW_HEADER_WIDTH) {
+    } else if (localY < displayHeaderHeight && localX >= displayRowHeaderWidth) {
       const colIndex = findIndexForOffsetPrefix(colPrefixSumsCurrent, colContentOffset);
       const actualCol = visibleColsCurrent[colIndex];
       if (actualCol !== void 0 && firstVisibleRowRef.current !== void 0) {
         geometryCell = { row: firstVisibleRowRef.current, col: actualCol };
       }
-    } else if (localY >= HEADER_HEIGHT && localX >= ROW_HEADER_WIDTH) {
+    } else if (localY >= displayHeaderHeight && localX >= displayRowHeaderWidth) {
       const rowIndex = findIndexForOffsetPrefix(rowPrefixSumsCurrent, rowContentOffset);
       const colIndex = findIndexForOffsetPrefix(colPrefixSumsCurrent, colContentOffset);
       const actualRow = visibleRowsCurrent[rowIndex];
@@ -20035,7 +20143,7 @@ function XlsxGrid({
       }
     }
     return geometryCell;
-  }, [frozenPaneBottom, frozenPaneRight, zoomFactor]);
+  }, [displayHeaderHeight, displayRowHeaderWidth, frozenPaneBottom, frozenPaneRight]);
   const resolvePointerCellFromHitTest = React4.useCallback((clientX, clientY) => {
     const elementsAtPoint = typeof document.elementsFromPoint === "function" ? document.elementsFromPoint(clientX, clientY) : [document.elementFromPoint(clientX, clientY)].filter((element) => Boolean(element));
     for (const element of elementsAtPoint) {
@@ -20095,59 +20203,59 @@ function XlsxGrid({
     if (rowIndex === void 0 || colIndex === void 0) {
       return null;
     }
-    const logicalWidth = effectiveColWidths[colIndex] ?? DEFAULT_COL_WIDTH2;
-    const logicalHeight = effectiveRowHeights[rowIndex] ?? DEFAULT_ROW_HEIGHT2;
-    const contentScaleX = Math.max(1e-4, rect.width > 0 ? rect.width / logicalWidth : zoomFactor);
-    const contentScaleY = Math.max(1e-4, rect.height > 0 ? rect.height / logicalHeight : zoomFactor);
+    const displayWidth = displayEffectiveColWidths[colIndex] ?? displayDefaultColWidth;
+    const displayHeight = displayEffectiveRowHeights[rowIndex] ?? displayDefaultRowHeight;
+    const contentScaleX = Math.max(1e-4, rect.width > 0 ? rect.width / displayWidth : 1);
+    const contentScaleY = Math.max(1e-4, rect.height > 0 ? rect.height / displayHeight : 1);
     return {
       contentScaleX,
       contentScaleY,
-      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset((clientX - rect.left) / contentScaleX, logicalWidth),
-      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, logicalHeight)
+      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset((clientX - rect.left) / contentScaleX, displayWidth),
+      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, displayHeight)
     };
-  }, [colIndexByActual, colPrefixSums, effectiveColWidths, effectiveRowHeights, rowIndexByActual, rowPrefixSums, zoomFactor]);
+  }, [colIndexByActual, colPrefixSums, displayDefaultColWidth, displayDefaultRowHeight, displayEffectiveColWidths, displayEffectiveRowHeights, rowIndexByActual, rowPrefixSums]);
   const resolveRowPointerOrigin = React4.useCallback((actualRow, rect, clientY) => {
     const rowIndex = rowIndexByActual.get(actualRow);
     if (rowIndex === void 0) {
       return null;
     }
-    const logicalHeight = effectiveRowHeights[rowIndex] ?? DEFAULT_ROW_HEIGHT2;
-    const contentScaleY = Math.max(1e-4, rect.height > 0 ? rect.height / logicalHeight : zoomFactor);
+    const displayHeight = displayEffectiveRowHeights[rowIndex] ?? displayDefaultRowHeight;
+    const contentScaleY = Math.max(1e-4, rect.height > 0 ? rect.height / displayHeight : 1);
     return {
-      contentScaleX: Math.max(1e-4, zoomFactor),
+      contentScaleX: 1,
       contentScaleY,
       originContentX: colPrefixSums[0] ?? 0,
-      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, logicalHeight)
+      originContentY: (rowPrefixSums[rowIndex] ?? 0) + clampContentOffset((clientY - rect.top) / contentScaleY, displayHeight)
     };
-  }, [colPrefixSums, effectiveRowHeights, rowIndexByActual, rowPrefixSums, zoomFactor]);
+  }, [colPrefixSums, displayDefaultRowHeight, displayEffectiveRowHeights, rowIndexByActual, rowPrefixSums]);
   const resolveColumnPointerOrigin = React4.useCallback((actualCol, rect, clientX) => {
     const colIndex = colIndexByActual.get(actualCol);
     if (colIndex === void 0) {
       return null;
     }
-    const logicalWidth = effectiveColWidths[colIndex] ?? DEFAULT_COL_WIDTH2;
-    const contentScaleX = Math.max(1e-4, rect.width > 0 ? rect.width / logicalWidth : zoomFactor);
+    const displayWidth = displayEffectiveColWidths[colIndex] ?? displayDefaultColWidth;
+    const contentScaleX = Math.max(1e-4, rect.width > 0 ? rect.width / displayWidth : 1);
     return {
       contentScaleX,
-      contentScaleY: Math.max(1e-4, zoomFactor),
-      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset((clientX - rect.left) / contentScaleX, logicalWidth),
+      contentScaleY: 1,
+      originContentX: (colPrefixSums[colIndex] ?? 0) + clampContentOffset((clientX - rect.left) / contentScaleX, displayWidth),
       originContentY: rowPrefixSums[0] ?? 0
     };
-  }, [colIndexByActual, colPrefixSums, effectiveColWidths, rowPrefixSums, zoomFactor]);
+  }, [colIndexByActual, colPrefixSums, displayDefaultColWidth, displayEffectiveColWidths, rowPrefixSums]);
   const applyColumnPreview = React4.useCallback((actualCol, widthPx) => {
     const colElement = colElementRefs.current.get(actualCol);
     if (colElement) {
       colElement.style.width = widthPx === null ? "" : `${widthPx}px`;
     }
     const baseIndex = visibleCols.indexOf(actualCol);
-    const baseWidth = baseIndex >= 0 ? effectiveColWidths[baseIndex] ?? DEFAULT_COL_WIDTH2 : DEFAULT_COL_WIDTH2;
+    const baseWidth = baseIndex >= 0 ? displayEffectiveColWidths[baseIndex] ?? displayDefaultColWidth : displayDefaultColWidth;
     const previewWidth = widthPx ?? baseWidth;
-    const baseTotalWidth = effectiveColWidths.reduce((sum, width) => sum + width, 0) + ROW_HEADER_WIDTH;
+    const baseTotalWidth = displayEffectiveColWidths.reduce((sum, width) => sum + width, 0) + displayRowHeaderWidth;
     const widthDelta = previewWidth - baseWidth;
     if (tableRef.current) {
       tableRef.current.style.width = `${baseTotalWidth + widthDelta}px`;
     }
-  }, [effectiveColWidths, visibleCols]);
+  }, [displayDefaultColWidth, displayEffectiveColWidths, displayRowHeaderWidth, visibleCols]);
   const applyRowPreview = React4.useCallback((actualRow, heightPx) => {
     const rowElement = rowElementRefs.current.get(actualRow) ?? wrapperRef.current?.querySelector(`tr[data-xlsx-row="${actualRow}"]`) ?? null;
     if (rowElement) {
@@ -20324,7 +20432,7 @@ function XlsxGrid({
   const viewportRowBatch = getRowsBatchAsync ? asyncViewportRowBatch : syncViewportRowBatch;
   React4.useEffect(() => {
     cellRenderCacheRef.current.clear();
-  }, [activeSheetIndex, displayColLimit, displayRowLimit, palette, revision, viewportRowBatch, worksheet]);
+  }, [activeSheetIndex, displayColLimit, displayRowLimit, palette, revision, viewportRowBatch, worksheet, zoomFactor]);
   React4.useEffect(() => {
     setAsyncViewportRowBatch(null);
   }, [activeSheetIndex, revision]);
@@ -20346,7 +20454,7 @@ function XlsxGrid({
     if (!worksheet && !batchedCell) {
       const emptyData = {
         isMergedSecondary: false,
-        style: {
+        style: scaleCssProperties({
           backgroundColor: resolveSheetSurface(activeSheet, palette),
           borderBottom: "none",
           borderRight: "none",
@@ -20354,7 +20462,7 @@ function XlsxGrid({
           padding: DEFAULT_CELL_PADDING,
           verticalAlign: "bottom",
           whiteSpace: "nowrap"
-        },
+        }, zoomFactor),
         value: ""
       };
       cellRenderCacheRef.current.set(cacheKey, emptyData);
@@ -20433,9 +20541,9 @@ function XlsxGrid({
       isTableHeader: Boolean(table && row >= table.start.row && row < table.start.row + headerRowCount),
       rowSpan: merge?.rowSpan,
       sparkline: sparkline && sparklineValues ? { config: sparkline, values: sparklineValues } : null,
-      style: buildCellStyle(mergedStyle, palette, activeSheet?.themePalette, {
+      style: scaleCssProperties(buildCellStyle(mergedStyle, palette, activeSheet?.themePalette, {
         showGridLines: activeSheet?.showGridLines
-      }),
+      }), zoomFactor),
       validation: resolveCellDataValidation(row, col, activeSheet),
       value: sparkline ? "" : checkboxState !== null ? "" : batchCoversRow || !worksheet ? batchedCell?.value ?? "" : getCellDisplayValue(worksheet, row, col, activeSheet)
     };
@@ -20445,7 +20553,7 @@ function XlsxGrid({
         const horizontalPadding = getHorizontalPadding(nextData.style.padding);
         const textWidth = measureTextWidth(nextData.value, nextData.style);
         const requiredWidth = textWidth + horizontalPadding + 2;
-        let availableWidth = effectiveColWidths[startColIndex] ?? DEFAULT_COL_WIDTH2;
+        let availableWidth = displayEffectiveColWidths[startColIndex] ?? displayDefaultColWidth;
         if (requiredWidth > availableWidth) {
           for (let nextColIndex = startColIndex + 1; nextColIndex < visibleCols.length; nextColIndex += 1) {
             const nextActualCol = visibleCols[nextColIndex];
@@ -20456,12 +20564,12 @@ function XlsxGrid({
             if (!canReceiveOverflowText(neighborData)) {
               break;
             }
-            availableWidth += effectiveColWidths[nextColIndex] ?? DEFAULT_COL_WIDTH2;
+            availableWidth += displayEffectiveColWidths[nextColIndex] ?? displayDefaultColWidth;
             if (requiredWidth <= availableWidth) {
               break;
             }
           }
-          if (availableWidth > (effectiveColWidths[startColIndex] ?? DEFAULT_COL_WIDTH2)) {
+          if (availableWidth > (displayEffectiveColWidths[startColIndex] ?? displayDefaultColWidth)) {
             nextData.spillWidth = Math.max(0, availableWidth - horizontalPadding);
           }
         }
@@ -20469,7 +20577,7 @@ function XlsxGrid({
     }
     cellRenderCacheRef.current.set(cacheKey, nextData);
     return nextData;
-  }, [activeSheet, colIndexByActual, effectiveColWidths, effectiveTables, palette, sparklinesByCell, viewportRowBatch, visibleCols, worksheet]);
+  }, [activeSheet, colIndexByActual, displayDefaultColWidth, displayEffectiveColWidths, effectiveTables, palette, sparklinesByCell, viewportRowBatch, visibleCols, worksheet, zoomFactor]);
   React4.useEffect(() => {
     conditionalFormatMetricsCacheRef.current.clear();
   }, [activeSheet?.conditionalFormatRules, activeSheet?.workbookSheetIndex, revision]);
@@ -20487,11 +20595,11 @@ function XlsxGrid({
     }
     return {
       height: sumPrefixRange(rowPrefixSums, startRowIndex, endRowIndex),
-      left: ROW_HEADER_WIDTH + sumPrefixRange(colPrefixSums, 0, startColIndex - 1),
-      top: HEADER_HEIGHT + sumPrefixRange(rowPrefixSums, 0, startRowIndex - 1),
+      left: displayRowHeaderWidth + sumPrefixRange(colPrefixSums, 0, startColIndex - 1),
+      top: displayHeaderHeight + sumPrefixRange(rowPrefixSums, 0, startRowIndex - 1),
       width: sumPrefixRange(colPrefixSums, startColIndex, endColIndex)
     };
-  }, [colIndexByActual, colPrefixSums, displayedSelection, rowIndexByActual, rowPrefixSums]);
+  }, [colIndexByActual, colPrefixSums, displayHeaderHeight, displayRowHeaderWidth, displayedSelection, rowIndexByActual, rowPrefixSums]);
   const resolvedSelectionOverlay = selectionOverlay;
   const virtualCols = React4.useMemo(
     () => shouldVirtualizeCols ? colVirtualizer.getVirtualItems().map((virtualCol) => ({
@@ -20504,10 +20612,10 @@ function XlsxGrid({
       end: colPrefixSums[index + 1] ?? 0,
       index,
       key: visibleCols[index] ?? index,
-      size: effectiveColWidths[index] ?? DEFAULT_COL_WIDTH2,
+      size: displayEffectiveColWidths[index] ?? displayDefaultColWidth,
       start: colPrefixSums[index] ?? 0
     })),
-    [colPrefixSums, colVirtualizer, effectiveColWidths, shouldVirtualizeCols, visibleCols]
+    [colPrefixSums, colVirtualizer, displayDefaultColWidth, displayEffectiveColWidths, shouldVirtualizeCols, visibleCols]
   );
   const renderedCols = React4.useMemo(
     () => {
@@ -20526,7 +20634,7 @@ function XlsxGrid({
       });
       return columns;
     },
-    [effectiveColWidths, virtualCols, visibleCols]
+    [virtualCols, visibleCols]
   );
   const totalContentWidth = colPrefixSums[colPrefixSums.length - 1] ?? 0;
   const leadingColumnSpacerWidth = shouldVirtualizeCols ? virtualCols[0]?.start ?? 0 : 0;
@@ -20534,12 +20642,14 @@ function XlsxGrid({
   const imageRects = React4.useMemo(
     () => showImages ? images.map((image) => ({
       image,
-      rect: imagePreviewRect && imagePreviewRect.id === image.id ? imagePreviewRect.rect : resolveImageRect(image, visibleRows, visibleCols, effectiveRowHeights, effectiveColWidths, {
+      rect: imagePreviewRect && imagePreviewRect.id === image.id ? imagePreviewRect.rect : resolveImageRect(image, visibleRows, visibleCols, displayEffectiveRowHeights, displayEffectiveColWidths, {
         actualColPrefixSums,
         actualRowPrefixSums,
         colIndexByActual,
         colPrefixSums,
+        headerHeight: displayHeaderHeight,
         rowIndexByActual,
+        rowHeaderWidth: displayRowHeaderWidth,
         rowPrefixSums
       })
     })) : [],
@@ -20548,8 +20658,10 @@ function XlsxGrid({
       colPrefixSums,
       actualColPrefixSums,
       actualRowPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       imagePreviewRect,
       images,
       rowIndexByActual,
@@ -20561,12 +20673,14 @@ function XlsxGrid({
   );
   const shapeRects = React4.useMemo(
     () => showImages ? shapes.map((shape) => ({
-      rect: resolveAnchoredRect(shape.anchor, visibleRows, visibleCols, effectiveRowHeights, effectiveColWidths, {
+      rect: resolveAnchoredRect(shape.anchor, visibleRows, visibleCols, displayEffectiveRowHeights, displayEffectiveColWidths, {
         actualColPrefixSums,
         actualRowPrefixSums,
         colIndexByActual,
         colPrefixSums,
+        headerHeight: displayHeaderHeight,
         rowIndexByActual,
+        rowHeaderWidth: displayRowHeaderWidth,
         rowPrefixSums
       }),
       shape
@@ -20576,8 +20690,10 @@ function XlsxGrid({
       colPrefixSums,
       actualColPrefixSums,
       actualRowPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       rowIndexByActual,
       rowPrefixSums,
       shapes,
@@ -20589,12 +20705,14 @@ function XlsxGrid({
   const chartRects = React4.useMemo(
     () => showImages ? charts.map((chart) => ({
       chart,
-      rect: chartPreviewRect && chartPreviewRect.id === chart.id ? chartPreviewRect.rect : resolveAnchoredRect(chart.anchor, visibleRows, visibleCols, effectiveRowHeights, effectiveColWidths, {
+      rect: chartPreviewRect && chartPreviewRect.id === chart.id ? chartPreviewRect.rect : resolveAnchoredRect(chart.anchor, visibleRows, visibleCols, displayEffectiveRowHeights, displayEffectiveColWidths, {
         actualColPrefixSums,
         actualRowPrefixSums,
         colIndexByActual,
         colPrefixSums,
+        headerHeight: displayHeaderHeight,
         rowIndexByActual,
+        rowHeaderWidth: displayRowHeaderWidth,
         rowPrefixSums
       })
     })) : [],
@@ -20605,8 +20723,10 @@ function XlsxGrid({
       charts,
       colIndexByActual,
       colPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       rowIndexByActual,
       rowPrefixSums,
       showImages,
@@ -20652,15 +20772,15 @@ function XlsxGrid({
     if (startRowIndex === void 0 || endRowIndex === void 0 || startColIndex === void 0 || endColIndex === void 0) {
       return null;
     }
-    let left = ROW_HEADER_WIDTH + sumPrefixRange(colPrefixSums, 0, startColIndex - 1);
-    let top = HEADER_HEIGHT + sumPrefixRange(rowPrefixSums, 0, startRowIndex - 1);
+    let left = displayRowHeaderWidth + sumPrefixRange(colPrefixSums, 0, startColIndex - 1);
+    let top = displayHeaderHeight + sumPrefixRange(rowPrefixSums, 0, startRowIndex - 1);
     let width = sumPrefixRange(colPrefixSums, startColIndex, endColIndex);
     let height = sumPrefixRange(rowPrefixSums, startRowIndex, endRowIndex);
     const columnPreview = columnPreviewRef.current;
     if (columnPreview) {
       const previewIndex = colIndexByActual.get(columnPreview.actualIndex);
       if (previewIndex !== void 0) {
-        const baseWidth = effectiveColWidths[previewIndex] ?? DEFAULT_COL_WIDTH2;
+        const baseWidth = displayEffectiveColWidths[previewIndex] ?? displayDefaultColWidth;
         const widthDelta = columnPreview.size - baseWidth;
         if (previewIndex < startColIndex) {
           left += widthDelta;
@@ -20674,7 +20794,7 @@ function XlsxGrid({
     if (rowPreview) {
       const previewIndex = rowIndexByActual.get(rowPreview.actualIndex);
       if (previewIndex !== void 0) {
-        const baseHeight = effectiveRowHeights[previewIndex] ?? DEFAULT_ROW_HEIGHT2;
+        const baseHeight = displayEffectiveRowHeights[previewIndex] ?? displayDefaultRowHeight;
         const heightDelta = rowPreview.size - baseHeight;
         if (previewIndex < startRowIndex) {
           top += heightDelta;
@@ -20686,11 +20806,11 @@ function XlsxGrid({
     }
     return {
       height: Math.max(0, height),
-      left: Math.max(ROW_HEADER_WIDTH, left),
-      top: Math.max(HEADER_HEIGHT, top),
+      left: Math.max(displayRowHeaderWidth, left),
+      top: Math.max(displayHeaderHeight, top),
       width: Math.max(0, width)
     };
-  }, [colIndexByActual, colPrefixSums, effectiveColWidths, effectiveRowHeights, rowIndexByActual, rowPrefixSums]);
+  }, [colIndexByActual, colPrefixSums, displayDefaultColWidth, displayDefaultRowHeight, displayEffectiveColWidths, displayEffectiveRowHeights, displayHeaderHeight, displayRowHeaderWidth, rowIndexByActual, rowPrefixSums]);
   const resolveMountedRangeOverlayRect = React4.useCallback((range, geometryRect) => {
     const normalized = normalizeRange2(range);
     const startRect = resolveMountedCellOverlayRectForAddress(normalized.start);
@@ -20707,11 +20827,11 @@ function XlsxGrid({
     const bottom = bottomRect ? bottomRect.top + bottomRect.height : geometryRect.top + geometryRect.height;
     return {
       height: Math.max(0, bottom - top),
-      left: Math.max(ROW_HEADER_WIDTH, left),
-      top: Math.max(HEADER_HEIGHT, top),
+      left: Math.max(displayRowHeaderWidth, left),
+      top: Math.max(displayHeaderHeight, top),
       width: Math.max(0, right - left)
     };
-  }, [resolveMountedCellOverlayRectForAddress]);
+  }, [displayHeaderHeight, displayRowHeaderWidth, resolveMountedCellOverlayRectForAddress]);
   const resolveDragPreviewRect = React4.useCallback((range) => {
     const dragState = selectionDragRef.current;
     if (!dragState || !dragState.didDrag || dragState.axis !== "cell" || !dragState.originOverlayRect) {
@@ -20829,11 +20949,11 @@ function XlsxGrid({
     overlay.style.visibility = "visible";
     const fillHandle = fillHandleRef.current;
     if (fillHandle) {
-      fillHandle.style.left = `${nextRect.left + nextRect.width - 4}px`;
-      fillHandle.style.top = `${nextRect.top + nextRect.height - 4}px`;
+      fillHandle.style.left = `${nextRect.left + nextRect.width - 4 * zoomFactor}px`;
+      fillHandle.style.top = `${nextRect.top + nextRect.height - 4 * zoomFactor}px`;
     }
     applyHeaderSelection(range);
-  }, [applyHeaderSelection, resolveDragPreviewRect, resolveGeometryOverlayRect, resolveOverlayRect]);
+  }, [applyHeaderSelection, resolveDragPreviewRect, resolveGeometryOverlayRect, resolveOverlayRect, zoomFactor]);
   const applyPreviewOverlayFromElement = React4.useCallback((element, range) => {
     const overlay = selectionOverlayRef.current;
     if (!overlay) {
@@ -20852,11 +20972,11 @@ function XlsxGrid({
     overlay.style.visibility = "visible";
     const fillHandle = fillHandleRef.current;
     if (fillHandle) {
-      fillHandle.style.left = `${nextRect.left + nextRect.width - 4}px`;
-      fillHandle.style.top = `${nextRect.top + nextRect.height - 4}px`;
+      fillHandle.style.left = `${nextRect.left + nextRect.width - 4 * zoomFactor}px`;
+      fillHandle.style.top = `${nextRect.top + nextRect.height - 4 * zoomFactor}px`;
     }
     applyHeaderSelection(range);
-  }, [applyHeaderSelection, resolveMountedCellOverlayRect, resolveOverlayRect]);
+  }, [applyHeaderSelection, resolveMountedCellOverlayRect, resolveOverlayRect, zoomFactor]);
   const syncActiveValidationOverlay = React4.useCallback((cell) => {
     const overlay = activeValidationOverlayRef.current;
     if (!overlay || !cell || editingCellRef.current || selectionDragRef.current || fillDragRef.current) {
@@ -20874,11 +20994,11 @@ function XlsxGrid({
       overlay.style.visibility = "hidden";
       return;
     }
-    overlay.style.left = `${rect.left + rect.width - 16}px`;
+    overlay.style.left = `${rect.left + rect.width - 16 * zoomFactor}px`;
     overlay.style.top = `${rect.top + rect.height / 2}px`;
     overlay.style.opacity = "1";
     overlay.style.visibility = "visible";
-  }, [getCellData, resolveOverlayRect]);
+  }, [getCellData, resolveOverlayRect, zoomFactor]);
   const commitSelectionRange = React4.useCallback((range) => {
     const normalized = normalizeRange2(range);
     if (selectionRef.current && rangesEqual(selectionRef.current, normalized) && isSameCell(activeCellRef.current, normalized.end) && selectedChartIdRef.current === null && selectedImageIdRef.current === null) {
@@ -20916,7 +21036,7 @@ function XlsxGrid({
       }
       pendingResizePreviewRef.current = {
         actualIndex: state.actualIndex,
-        size: state.type === "column" ? Math.max(DEFAULT_COL_WIDTH2 / 2, state.initialPx + (event.clientX - state.startPosition) / zoomFactor) : Math.max(DEFAULT_ROW_HEIGHT2 / 1.5, state.initialPx + (event.clientY - state.startPosition) / zoomFactor),
+        size: state.type === "column" ? Math.max(displayDefaultColWidth / 2, state.initialPx + (event.clientX - state.startPosition)) : Math.max(displayDefaultRowHeight / 1.5, state.initialPx + (event.clientY - state.startPosition)),
         type: state.type
       };
       if (resizeFrameRef.current !== null) {
@@ -20963,9 +21083,9 @@ function XlsxGrid({
         }
         if (preview && preview.actualIndex === resizeState.actualIndex && preview.type === resizeState.type) {
           if (preview.type === "column") {
-            controller.resizeColumn(preview.actualIndex, preview.size);
+            controller.resizeColumn(preview.actualIndex, preview.size / zoomFactor);
           } else {
-            controller.resizeRow(preview.actualIndex, preview.size);
+            controller.resizeRow(preview.actualIndex, preview.size / zoomFactor);
           }
         }
       }
@@ -20982,7 +21102,7 @@ function XlsxGrid({
         resizeFrameRef.current = null;
       }
     };
-  }, [applyColumnPreview, applyRowPreview, controller, refreshOverlayFromCurrentSelection, rowVirtualizer, shouldVirtualizeRows, zoomFactor]);
+  }, [applyColumnPreview, applyRowPreview, controller, displayDefaultColWidth, displayDefaultRowHeight, refreshOverlayFromCurrentSelection, rowVirtualizer, shouldVirtualizeRows, zoomFactor]);
   function buildDraggedSelectionRange(dragState, cell) {
     if (dragState.axis === "row") {
       if (firstVisibleCol === void 0 || lastVisibleCol === void 0) {
@@ -21311,21 +21431,21 @@ function XlsxGrid({
           color: palette.mutedText,
           cursor: "pointer",
           display: "inline-flex",
-          fontSize: 10,
-          height: 16,
+          fontSize: 10 * zoomFactor,
+          height: 16 * zoomFactor,
           justifyContent: "center",
           padding: 0,
           position: "absolute",
-          right: 4,
-          top: 3,
-          width: 16,
+          right: 4 * zoomFactor,
+          top: 3 * zoomFactor,
+          width: 16 * zoomFactor,
           zIndex: 6
         },
         type: "button",
         children: direction === "ascending" ? "\u25B2" : direction === "descending" ? "\u25BC" : "\u25BE"
       }
     );
-  }, [effectiveTables, palette.mutedText, sortState]);
+  }, [effectiveTables, palette.mutedText, sortState, zoomFactor]);
   const startChartMove = React4.useCallback((event, chart, rect) => {
     if (event.button !== 0) {
       return;
@@ -21531,7 +21651,7 @@ function XlsxGrid({
     end: rowPrefixSums[index + 1] ?? 0,
     index,
     key: actualRow,
-    size: effectiveRowHeights[index] ?? DEFAULT_ROW_HEIGHT2,
+    size: displayEffectiveRowHeights[index] ?? displayDefaultRowHeight,
     start: rowPrefixSums[index] ?? 0
   })) : (() => {
     const renderedRowsByIndex = /* @__PURE__ */ new Map();
@@ -21552,27 +21672,25 @@ function XlsxGrid({
         end: rowPrefixSums[index + 1] ?? 0,
         index,
         key: visibleRows[index] ?? index,
-        size: effectiveRowHeights[index] ?? DEFAULT_ROW_HEIGHT2,
+        size: displayEffectiveRowHeights[index] ?? displayDefaultRowHeight,
         start: rowPrefixSums[index] ?? 0
       });
     });
     return Array.from(renderedRowsByIndex.values()).sort((left, right) => left.index - right.index);
   })();
   const totalHeight = shouldVirtualizeRows ? rowVirtualizer.getTotalSize() : rowPrefixSums[rowPrefixSums.length - 1] ?? 0;
-  const totalWidth = totalContentWidth + ROW_HEADER_WIDTH;
-  const sheetContentHeight = HEADER_HEIGHT + totalHeight;
-  const zoomedSheetHeight = sheetContentHeight * zoomFactor;
-  const zoomedSheetWidth = totalWidth * zoomFactor;
+  const totalWidth = totalContentWidth + displayRowHeaderWidth;
+  const sheetContentHeight = displayHeaderHeight + totalHeight;
   const { fill: selectionFill, header: selectionHeaderSurface, stroke: selectionStroke } = resolveSelectionColors({
     palette,
     selectionColor,
     selectionFillColor,
     selectionHeaderColor
   });
-  const selectionBorderWidth = 1;
+  const selectionBorderWidth = Math.max(1, zoomFactor);
   const rowColSpan = renderedCols.length + 1 + (leadingColumnSpacerWidth > 0 ? 1 : 0) + (trailingColumnSpacerWidth > 0 ? 1 : 0);
   const gutterSeparatorShadow = `inset -1px 0 0 ${palette.border}, inset 0 -1px 0 ${palette.border}`;
-  const headerCellStyle = {
+  const headerCellStyle = scaleCssProperties({
     backgroundColor: palette.headerSurface,
     borderBottom: "none",
     borderRight: "none",
@@ -21589,8 +21707,8 @@ function XlsxGrid({
     userSelect: "none",
     whiteSpace: "nowrap",
     zIndex: 50
-  };
-  const columnResizeHandleStyle = {
+  }, zoomFactor);
+  const columnResizeHandleStyle = scaleCssProperties({
     backgroundColor: "transparent",
     cursor: "col-resize",
     position: "absolute",
@@ -21599,17 +21717,23 @@ function XlsxGrid({
     width: 16,
     height: "100%",
     zIndex: 5
-  };
+  }, zoomFactor);
   function resolveDrawingPane(rect) {
     return resolveFrozenDrawingPane(
       rect,
       frozenRows,
       frozenCols,
-      actualRowHeights,
-      actualColWidths,
+      displayActualRowHeights,
+      displayActualColWidths,
       activeSheet?.freezePanes ?? null,
       stickyTopByRow,
-      stickyLeftByCol
+      stickyLeftByCol,
+      {
+        defaultColWidth: displayDefaultColWidth,
+        defaultRowHeight: displayDefaultRowHeight,
+        headerHeight: displayHeaderHeight,
+        rowHeaderWidth: displayRowHeaderWidth
+      }
     );
   }
   function renderShapeDrawing(shape, rect, pane) {
@@ -21626,12 +21750,12 @@ function XlsxGrid({
     const groupScaleX = shape.scaleX ?? 1;
     const groupScaleY = shape.scaleY ?? 1;
     const strokeScale = Math.max(groupScaleX, groupScaleY);
-    const textScale = strokeScale;
+    const textScale = strokeScale * zoomFactor;
     const textWidth = groupScaleX !== 0 ? rect.width / groupScaleX : rect.width;
     const textHeight = groupScaleY !== 0 ? rect.height / groupScaleY : rect.height;
     const vectorShape = resolveShapeVector(shape);
     const strokeColor = shape.stroke?.none ? "transparent" : shape.stroke?.color ?? "transparent";
-    const scaledStrokeWidth = (shape.stroke?.widthPx ?? (shape.geometry === "line" ? 2 : 1)) * strokeScale;
+    const scaledStrokeWidth = (shape.stroke?.widthPx ?? (shape.geometry === "line" ? 2 : 1)) * strokeScale * zoomFactor;
     const headMarkerId = `${shape.id}-${pane}-head-marker`;
     const tailMarkerId = `${shape.id}-${pane}-tail-marker`;
     const headMarker = vectorShape ? resolveShapeLineEndMarker(
@@ -21651,7 +21775,7 @@ function XlsxGrid({
       vectorShape.viewBox
     ) : null;
     const style = {
-      ...buildShapeContainerStyle(shape, rect),
+      ...buildShapeContainerStyle(shape, rect, zoomFactor),
       ...vectorShape ? {
         backgroundColor: "transparent",
         border: "none"
@@ -21714,13 +21838,13 @@ function XlsxGrid({
                 display: "flex",
                 flex: 1,
                 flexDirection: "column",
-                gap: 2,
+                gap: 2 * zoomFactor,
                 height: textHeight,
                 justifyContent: shape.textBox?.verticalAlign === "middle" ? "center" : shape.textBox?.verticalAlign === "bottom" ? "flex-end" : "flex-start",
-                paddingBottom: inset?.bottom ?? 4,
-                paddingLeft: inset?.left ?? 6,
-                paddingRight: inset?.right ?? 6,
-                paddingTop: inset?.top ?? 4,
+                paddingBottom: (inset?.bottom ?? 4) * zoomFactor,
+                paddingLeft: (inset?.left ?? 6) * zoomFactor,
+                paddingRight: (inset?.right ?? 6) * zoomFactor,
+                paddingTop: (inset?.top ?? 4) * zoomFactor,
                 pointerEvents: "none",
                 position: "relative",
                 transform: groupScaleX !== 1 || groupScaleY !== 1 ? `scale(${groupScaleX}, ${groupScaleY})` : void 0,
@@ -21792,8 +21916,8 @@ function XlsxGrid({
             "div",
             {
               style: {
-                border: `1px solid ${selectionStroke}`,
-                boxShadow: `0 0 0 1px ${palette.surface}`,
+                border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
+                boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
                 boxSizing: "border-box",
                 inset: 0,
                 pointerEvents: "none",
@@ -21803,7 +21927,7 @@ function XlsxGrid({
                 "div",
                 {
                   onPointerDown: (event) => startImageResize(event, image, rect, position),
-                  style: resolveImageHandleStyle(position, selectionStroke, palette.surface)
+                  style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
                 },
                 position
               )) : null
@@ -21815,7 +21939,7 @@ function XlsxGrid({
                 startImageResize(event, image, rect, position);
               }
             },
-            style: canEditImage ? resolveImageHandleStyle(position, selectionStroke, palette.surface) : { ...resolveImageHandleStyle(position, selectionStroke, palette.surface), display: "none" }
+            style: canEditImage ? resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor) : { ...resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor), display: "none" }
           }),
           image,
           rect
@@ -21823,8 +21947,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1px solid ${selectionStroke}`,
-              boxShadow: `0 0 0 1px ${palette.surface}`,
+              border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
+              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
               boxSizing: "border-box",
               inset: 0,
               pointerEvents: "none",
@@ -21834,7 +21958,7 @@ function XlsxGrid({
               "div",
               {
                 onPointerDown: (event) => startImageResize(event, image, rect, position),
-                style: resolveImageHandleStyle(position, selectionStroke, palette.surface)
+                style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
               },
               position
             )) : null
@@ -21896,8 +22020,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1px solid ${selectionStroke}`,
-              boxShadow: `0 0 0 1px ${palette.surface}`,
+              border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
+              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
               boxSizing: "border-box",
               inset: 0,
               pointerEvents: "none",
@@ -21907,7 +22031,7 @@ function XlsxGrid({
               "div",
               {
                 onPointerDown: (event) => startChartResize(event, chart, rect, position),
-                style: resolveImageHandleStyle(position, selectionStroke, palette.surface)
+                style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
               },
               position
             )) : null
@@ -22143,8 +22267,8 @@ function XlsxGrid({
       if (!interaction) {
         return;
       }
-      const deltaX = (event.clientX - interaction.startClientX) / zoomFactor;
-      const deltaY = (event.clientY - interaction.startClientY) / zoomFactor;
+      const deltaX = event.clientX - interaction.startClientX;
+      const deltaY = event.clientY - interaction.startClientY;
       if (!interaction.didMove && (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3)) {
         interaction.didMove = true;
       }
@@ -22153,7 +22277,12 @@ function XlsxGrid({
           ...interaction.baseRect,
           left: interaction.baseRect.left + deltaX,
           top: interaction.baseRect.top + deltaY
-        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, IMAGE_MIN_SIZE_PX)
+        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, displayImageMinSize),
+        {
+          contentOffsetLeft: displayRowHeaderWidth,
+          contentOffsetTop: displayHeaderHeight,
+          minSizePx: displayImageMinSize
+        }
       );
       scheduleImagePreviewRect({ id: interaction.imageId, rect: nextRect });
     };
@@ -22188,7 +22317,7 @@ function XlsxGrid({
         if (interaction.didMove) {
           skipNextImageClickRef.current = interaction.imageId;
         }
-        setImageRect(interaction.imageId, preview.rect);
+        setImageRect(interaction.imageId, toLogicalRect(preview.rect));
       }
       imagePreviewRectRef.current = null;
       setImagePreviewRect(null);
@@ -22208,8 +22337,8 @@ function XlsxGrid({
       if (!interaction) {
         return;
       }
-      const deltaX = (event.clientX - interaction.startClientX) / zoomFactor;
-      const deltaY = (event.clientY - interaction.startClientY) / zoomFactor;
+      const deltaX = event.clientX - interaction.startClientX;
+      const deltaY = event.clientY - interaction.startClientY;
       if (!interaction.didMove && (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3)) {
         interaction.didMove = true;
       }
@@ -22218,7 +22347,12 @@ function XlsxGrid({
           ...interaction.baseRect,
           left: interaction.baseRect.left + deltaX,
           top: interaction.baseRect.top + deltaY
-        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, 48)
+        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, 48 * zoomFactor),
+        {
+          contentOffsetLeft: displayRowHeaderWidth,
+          contentOffsetTop: displayHeaderHeight,
+          minSizePx: 48 * zoomFactor
+        }
       );
       scheduleChartPreviewRect({ id: interaction.chartId, rect: nextRect });
     };
@@ -22253,7 +22387,7 @@ function XlsxGrid({
         if (interaction.didMove) {
           skipNextChartClickRef.current = interaction.chartId;
         }
-        setChartRect(interaction.chartId, preview.rect);
+        setChartRect(interaction.chartId, toLogicalRect(preview.rect));
       }
       chartPreviewRectRef.current = null;
       setChartPreviewRect(null);
@@ -22435,8 +22569,8 @@ function XlsxGrid({
             minHeight: "100%",
             minWidth: "100%",
             position: "relative",
-            width: zoomedSheetWidth,
-            height: zoomedSheetHeight
+            width: totalWidth,
+            height: sheetContentHeight
           },
           children: /* @__PURE__ */ jsxs3(
             "div",
@@ -22447,9 +22581,6 @@ function XlsxGrid({
                 left: 0,
                 position: "absolute",
                 top: 0,
-                transform: void 0,
-                transformOrigin: "top left",
-                zoom: useNativeZoomForStickyLayout ? zoomFactor : void 0,
                 width: totalWidth
               },
               children: [
@@ -22472,7 +22603,7 @@ function XlsxGrid({
                     },
                     children: [
                       /* @__PURE__ */ jsxs3("colgroup", { children: [
-                        /* @__PURE__ */ jsx3("col", { style: { width: ROW_HEADER_WIDTH } }),
+                        /* @__PURE__ */ jsx3("col", { style: { width: displayRowHeaderWidth } }),
                         leadingColumnSpacerWidth > 0 ? /* @__PURE__ */ jsx3("col", { style: { width: leadingColumnSpacerWidth } }) : null,
                         renderedCols.map((column) => /* @__PURE__ */ jsx3(
                           "col",
@@ -22498,7 +22629,7 @@ function XlsxGrid({
                               ...headerCellStyle,
                               backgroundColor: palette.headerSurface,
                               left: 0,
-                              width: ROW_HEADER_WIDTH,
+                              width: displayRowHeaderWidth,
                               zIndex: 60
                             }
                           }
@@ -22573,10 +22704,12 @@ function XlsxGrid({
                                 readOnly,
                                 renderCellAdornment,
                                 rowHeight: virtualRow.size,
+                                rowHeaderWidth: displayRowHeaderWidth,
                                 stickyLeftByCol,
                                 stickyTop: stickyTopByRow.get(actualRow),
                                 trailingSpacerWidth: trailingColumnSpacerWidth,
-                                visibleCols: renderedCols
+                                visibleCols: renderedCols,
+                                zoomFactor
                               },
                               virtualRow.key
                             )
@@ -22625,16 +22758,16 @@ function XlsxGrid({
                       alignItems: "center",
                       color: palette.mutedText,
                       display: "inline-flex",
-                      fontSize: 10,
+                      fontSize: 10 * zoomFactor,
                       fontWeight: 700,
-                      height: 16,
+                      height: 16 * zoomFactor,
                       justifyContent: "center",
                       opacity: 0,
                       pointerEvents: "none",
                       position: "absolute",
                       transform: "translateY(-50%)",
                       visibility: "hidden",
-                      width: 12,
+                      width: 12 * zoomFactor,
                       zIndex: 26
                     },
                     children: "\u25BE"
@@ -22654,16 +22787,16 @@ function XlsxGrid({
                     },
                     style: {
                       backgroundColor: selectionStroke,
-                      border: `1px solid ${palette.surface}`,
+                      border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
                       contain: "layout paint",
                       cursor: "crosshair",
                       display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
-                      height: 8,
-                      left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 : 0,
+                      height: 8 * zoomFactor,
+                      left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
                       pointerEvents: "auto",
                       position: "absolute",
-                      top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 : 0,
-                      width: 8,
+                      top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
+                      width: 8 * zoomFactor,
                       zIndex: 25
                     }
                   }
@@ -22674,7 +22807,7 @@ function XlsxGrid({
                     ref: tableMenuRef,
                     style: {
                       color: palette.text,
-                      left: Math.max(ROW_HEADER_WIDTH + 4, openTableMenuState.left),
+                      left: Math.max(displayRowHeaderWidth + 4 * zoomFactor, openTableMenuState.left),
                       position: "absolute",
                       top: openTableMenuState.top,
                       zIndex: 50