@extend-ai/react-xlsx 0.1.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)}%`;
@@ -15981,6 +16064,7 @@ function darkenColor3(color, ratio) {
   return mixRgbColor3(color, "#000000", ratio);
 }
 var ViewerContext = React4.createContext(null);
+var ViewerAppearanceContext = React4.createContext({ isDark: false });
 function classNames(...values) {
   return values.filter(Boolean).join(" ");
 }
@@ -16138,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,
@@ -16146,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,
@@ -16157,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))
     };
   }
@@ -16238,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;
@@ -16260,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));
@@ -16274,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",
@@ -17202,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;
@@ -17242,40 +17336,8 @@ function resolveImageHandleStyle(position, stroke, surface) {
   }
   return style;
 }
-function resolveIsDarkMode() {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  const classList = document.documentElement.classList;
-  if (classList.contains("dark")) {
-    return true;
-  }
-  if (classList.contains("light")) {
-    return false;
-  }
-  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useViewerPalette() {
-  const [isDarkMode, setIsDarkMode] = React4.useState(resolveIsDarkMode);
-  React4.useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const update = () => setIsDarkMode(resolveIsDarkMode());
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const observer = new MutationObserver(update);
-    observer.observe(document.documentElement, {
-      attributeFilter: ["class", "data-theme"],
-      attributes: true
-    });
-    mediaQuery.addEventListener?.("change", update);
-    update();
-    return () => {
-      observer.disconnect();
-      mediaQuery.removeEventListener?.("change", update);
-    };
-  }, []);
-  return isDarkMode ? DARK_PALETTE : LIGHT_PALETTE;
+function useViewerPalette(isDark = false) {
+  return isDark ? DARK_PALETTE : LIGHT_PALETTE;
 }
 function columnLabel2(col) {
   let label = "";
@@ -18120,6 +18182,57 @@ function DefaultTableHeaderMenu({
     }
   );
 }
+function SegmentedControl({
+  items,
+  onValueChange,
+  palette,
+  value
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "aria-label": "Workbook sheets",
+      role: "tablist",
+      style: {
+        alignItems: "center",
+        backgroundColor: palette.sheetInactiveSurface,
+        border: `1px solid ${palette.strongBorder}`,
+        borderRadius: 10,
+        display: "inline-flex",
+        gap: 2,
+        minHeight: 36,
+        padding: 2
+      },
+      children: items.map((item) => {
+        const selected = item.id === value;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            "aria-selected": selected,
+            onClick: () => onValueChange(item.id),
+            role: "tab",
+            style: {
+              backgroundColor: selected ? palette.sheetActiveSurface : "transparent",
+              border: "none",
+              borderRadius: 8,
+              boxShadow: selected ? palette.shadow : "none",
+              color: selected ? palette.sheetActiveText : palette.sheetInactiveText,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: selected ? 600 : 500,
+              padding: "7px 12px",
+              transition: "background-color 120ms ease, color 120ms ease, box-shadow 120ms ease",
+              whiteSpace: "nowrap"
+            },
+            type: "button",
+            children: item.label
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
 function DefaultToolbar({ controller, palette }) {
   const {
     activeTabIndex,
@@ -18241,19 +18354,26 @@ function DefaultToolbar({ controller, palette }) {
             canDownload ? /* @__PURE__ */ jsx3(
               "button",
               {
+                "aria-label": "Download workbook",
                 onClick: download,
                 style: {
+                  alignItems: "center",
                   background: palette.buttonSurface,
                   border: `1px solid ${palette.strongBorder}`,
                   borderRadius: 8,
                   color: palette.buttonText,
                   cursor: "pointer",
-                  fontSize: 12,
+                  display: "inline-flex",
+                  fontSize: 16,
                   fontWeight: 500,
-                  padding: "6px 10px"
+                  height: 32,
+                  justifyContent: "center",
+                  padding: 0,
+                  width: 32
                 },
+                title: "Download workbook",
                 type: "button",
-                children: "Download"
+                children: "\u2193"
               }
             ) : null
           ] })
@@ -18266,32 +18386,18 @@ function DefaultToolbar({ controller, palette }) {
         style: {
           backgroundColor: palette.subtleSurface,
           borderBottom: `1px solid ${palette.border}`,
-          display: "flex",
-          gap: 6,
           overflowX: "auto",
           padding: "8px 12px"
         },
-        children: tabs.map((tab, index) => /* @__PURE__ */ jsx3(
-          "button",
+        children: /* @__PURE__ */ jsx3(
+          SegmentedControl,
           {
-            onClick: () => setActiveTabIndex(index),
-            style: {
-              backgroundColor: index === activeTabIndex ? palette.sheetActiveSurface : palette.sheetInactiveSurface,
-              border: `1px solid ${index === activeTabIndex ? palette.strongBorder : "transparent"}`,
-              borderRadius: 8,
-              boxShadow: index === activeTabIndex ? palette.shadow : "none",
-              color: index === activeTabIndex ? palette.sheetActiveText : palette.sheetInactiveText,
-              cursor: "pointer",
-              fontSize: 12,
-              fontWeight: 500,
-              padding: "6px 12px",
-              whiteSpace: "nowrap"
-            },
-            type: "button",
-            children: tab.name
-          },
-          tab.id
-        ))
+            items: tabs.map((tab, index) => ({ id: String(index), label: tab.name })),
+            onValueChange: (value) => setActiveTabIndex(Number(value)),
+            palette,
+            value: String(activeTabIndex)
+          }
+        )
       }
     ) : null
   ] });
@@ -18664,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);
@@ -18672,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",
           {
@@ -18697,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
       }
@@ -18716,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",
@@ -18924,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: [
@@ -18943,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: [
@@ -18964,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%",
@@ -19067,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";
@@ -19101,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(
@@ -19136,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(
@@ -19170,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
@@ -19212,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 })
           ]
@@ -19235,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;
@@ -19412,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 ?? [],
@@ -19579,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 displayEffectiveColWidths = React4.useMemo(
+    () => visibleCols.map((col) => displayActualColWidths[col] ?? displayDefaultColWidth),
+    [displayActualColWidths, displayDefaultColWidth, visibleCols]
   );
-  const effectiveRowHeights = React4.useMemo(
-    () => visibleRows.map((row) => actualRowHeights[row] ?? DEFAULT_ROW_HEIGHT2),
-    [actualRowHeights, visibleRows]
+  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];
@@ -19627,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) => {
@@ -19668,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();
@@ -19821,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;
@@ -19950,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;
@@ -19995,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];
@@ -20022,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) {
@@ -20082,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) {
@@ -20311,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]);
@@ -20333,7 +20454,7 @@ function XlsxGrid({
     if (!worksheet && !batchedCell) {
       const emptyData = {
         isMergedSecondary: false,
-        style: {
+        style: scaleCssProperties({
           backgroundColor: resolveSheetSurface(activeSheet, palette),
           borderBottom: "none",
           borderRight: "none",
@@ -20341,7 +20462,7 @@ function XlsxGrid({
           padding: DEFAULT_CELL_PADDING,
           verticalAlign: "bottom",
           whiteSpace: "nowrap"
-        },
+        }, zoomFactor),
         value: ""
       };
       cellRenderCacheRef.current.set(cacheKey, emptyData);
@@ -20420,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)
     };
@@ -20432,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];
@@ -20443,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);
           }
         }
@@ -20456,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]);
@@ -20474,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) => ({
@@ -20491,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(
     () => {
@@ -20513,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;
@@ -20521,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
       })
     })) : [],
@@ -20535,8 +20658,10 @@ function XlsxGrid({
       colPrefixSums,
       actualColPrefixSums,
       actualRowPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       imagePreviewRect,
       images,
       rowIndexByActual,
@@ -20548,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
@@ -20563,8 +20690,10 @@ function XlsxGrid({
       colPrefixSums,
       actualColPrefixSums,
       actualRowPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       rowIndexByActual,
       rowPrefixSums,
       shapes,
@@ -20576,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
       })
     })) : [],
@@ -20592,8 +20723,10 @@ function XlsxGrid({
       charts,
       colIndexByActual,
       colPrefixSums,
-      effectiveColWidths,
-      effectiveRowHeights,
+      displayHeaderHeight,
+      displayEffectiveColWidths,
+      displayEffectiveRowHeights,
+      displayRowHeaderWidth,
       rowIndexByActual,
       rowPrefixSums,
       showImages,
@@ -20639,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;
@@ -20661,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;
@@ -20673,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);
@@ -20694,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) {
@@ -20816,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) {
@@ -20839,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) {
@@ -20861,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) {
@@ -20903,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) {
@@ -20950,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);
           }
         }
       }
@@ -20969,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) {
@@ -21298,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;
@@ -21518,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();
@@ -21539,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.5;
+  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",
@@ -21576,8 +21707,8 @@ function XlsxGrid({
     userSelect: "none",
     whiteSpace: "nowrap",
     zIndex: 50
-  };
-  const columnResizeHandleStyle = {
+  }, zoomFactor);
+  const columnResizeHandleStyle = scaleCssProperties({
     backgroundColor: "transparent",
     cursor: "col-resize",
     position: "absolute",
@@ -21586,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) {
@@ -21613,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(
@@ -21638,7 +21775,7 @@ function XlsxGrid({
       vectorShape.viewBox
     ) : null;
     const style = {
-      ...buildShapeContainerStyle(shape, rect),
+      ...buildShapeContainerStyle(shape, rect, zoomFactor),
       ...vectorShape ? {
         backgroundColor: "transparent",
         border: "none"
@@ -21701,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,
@@ -21779,8 +21916,8 @@ function XlsxGrid({
             "div",
             {
               style: {
-                border: `1.5px 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",
@@ -21790,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
@@ -21802,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
@@ -21810,8 +21947,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1.5px 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",
@@ -21821,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
@@ -21883,8 +22020,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1.5px 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",
@@ -21894,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
@@ -22130,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;
       }
@@ -22140,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 });
     };
@@ -22175,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);
@@ -22195,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;
       }
@@ -22205,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 });
     };
@@ -22240,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);
@@ -22422,8 +22569,8 @@ function XlsxGrid({
             minHeight: "100%",
             minWidth: "100%",
             position: "relative",
-            width: zoomedSheetWidth,
-            height: zoomedSheetHeight
+            width: totalWidth,
+            height: sheetContentHeight
           },
           children: /* @__PURE__ */ jsxs3(
             "div",
@@ -22434,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: [
@@ -22459,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",
@@ -22485,7 +22629,7 @@ function XlsxGrid({
                               ...headerCellStyle,
                               backgroundColor: palette.headerSurface,
                               left: 0,
-                              width: ROW_HEADER_WIDTH,
+                              width: displayRowHeaderWidth,
                               zIndex: 60
                             }
                           }
@@ -22560,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
                             )
@@ -22612,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"
@@ -22641,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
                     }
                   }
@@ -22661,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
@@ -22701,7 +22847,8 @@ function XlsxViewerInner({
   emptyState,
   errorState,
   fileTooLargeState,
-  height = "100%",
+  height,
+  isDark = false,
   loadingComponent,
   loadingState,
   renderChartLoading,
@@ -22716,15 +22863,14 @@ function XlsxViewerInner({
   showDefaultToolbar = true,
   toolbar
 }) {
-  const palette = useViewerPalette();
-  return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
+  const palette = useViewerPalette(isDark);
+  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classNames("react-xlsx-viewer", className),
       style: {
         blockSize: height,
         backgroundColor: palette.surface,
-        border: `1px solid ${palette.border}`,
         borderRadius: rounded ? 12 : 0,
         color: palette.text,
         display: "flex",
@@ -22762,7 +22908,7 @@ function XlsxViewerInner({
         ) })
       ]
     }
-  ) });
+  ) }) });
 }
 function XlsxViewerWithInlineController(props) {
   const controller = useXlsxViewerController(props);
@@ -22770,16 +22916,17 @@ function XlsxViewerWithInlineController(props) {
 }
 function XlsxViewerProviderWithInlineController({
   children,
+  isDark = false,
   ...options
 }) {
   const controller = useXlsxViewerController(options);
-  return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children });
+  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children }) });
 }
-function XlsxViewerProvider({ children, controller, ...options }) {
+function XlsxViewerProvider({ children, controller, isDark = false, ...options }) {
   if (controller) {
-    return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children });
+    return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children }) });
   }
-  return /* @__PURE__ */ jsx3(XlsxViewerProviderWithInlineController, { ...options, children });
+  return /* @__PURE__ */ jsx3(XlsxViewerProviderWithInlineController, { ...options, isDark, children });
 }
 function useXlsxViewer() {
   const context = React4.useContext(ViewerContext);
@@ -23105,7 +23252,8 @@ function XlsxViewer(props) {
 }
 function DefaultXlsxToolbar() {
   const controller = useXlsxViewer();
-  const palette = useViewerPalette();
+  const { isDark } = React4.useContext(ViewerAppearanceContext);
+  const palette = useViewerPalette(isDark);
   return /* @__PURE__ */ jsx3(DefaultToolbar, { controller, palette });
 }
 export {