@extend-ai/react-xlsx 0.10.4 → 0.12.0

package/dist/index.cjs

@@ -6473,7 +6473,7 @@ function getSheetsWasmModule() {
   if (!wasmModulePromise) {
     wasmModulePromise = import("@dukelib/sheets-wasm").then(async (mod) => {
       if (configuredWasmSource !== void 0) {
-        await mod.default(configuredWasmSource);
+        await mod.default({ module_or_path: configuredWasmSource });
       } else {
         await mod.default();
       }
@@ -7212,6 +7212,22 @@ function pushHistoryEntry(stack, entry) {
 function normalizeCellValue(value) {
   return value ?? "";
 }
+function cloneCellStyle(style) {
+  if (!style || typeof style !== "object") {
+    return style;
+  }
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(style);
+    } catch {
+    }
+  }
+  try {
+    return JSON.parse(JSON.stringify(style));
+  } catch {
+    return style;
+  }
+}
 function coerceUserEnteredValue(value) {
   const trimmed = value.trim();
   if (!trimmed) {
@@ -7234,9 +7250,12 @@ function coerceUserEnteredValue(value) {
 function applyCellMutationState(worksheet, cell, state) {
   if (state.formula) {
     worksheet.setFormula(cellAddressToA1(cell), state.formula);
-    return;
+  } else {
+    worksheet.setCell(cellAddressToA1(cell), normalizeCellValue(state.value));
+  }
+  if (state.style && typeof state.style === "object") {
+    worksheet.setCellStyleAt(cell.row, cell.col, state.style);
   }
-  worksheet.setCell(cellAddressToA1(cell), normalizeCellValue(state.value));
 }
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -7968,7 +7987,11 @@ function useXlsxViewerController(options) {
     return false;
   }, []);
   const ensureChartAssetsHydrated = React.useCallback((targetWorkbook, targetSheets) => {
-    if (chartAssetsRef.current || !targetWorkbook || !imageAssetsRef.current) {
+    const currentAssets = chartAssetsRef.current;
+    if (currentAssets && (currentAssets.chartOriginsById.size > 0 || !targetWorkbook || !imageAssetsRef.current)) {
+      return currentAssets;
+    }
+    if (!targetWorkbook || !imageAssetsRef.current) {
       return chartAssetsRef.current;
     }
     const assets = loadWorkbookChartAssets(
@@ -8943,6 +8966,7 @@ function useXlsxViewerController(options) {
     }
     return {
       formula: worksheet.getFormulaAt(cell.row, cell.col) ?? null,
+      style: worksheet.getCellStyleAt(cell.row, cell.col),
       value: worksheet.getCellAt(cell.row, cell.col).toJs()
     };
   }, [getActiveWorksheet]);
@@ -9087,6 +9111,7 @@ function useXlsxViewerController(options) {
       for (let col = startCol; col <= endCol; col += 1) {
         cells.push({
           formula: worksheet.getFormulaAt(row, col) ?? null,
+          style: worksheet.getCellStyleAt(row, col),
           value: worksheet.getCellAt(row, col).toJs()
         });
       }
@@ -9253,11 +9278,27 @@ function useXlsxViewerController(options) {
   }, [getColumnWidthPx, getRowHeightPx]);
   const setChartRect = React.useCallback((id, rect) => {
     const hydratedChartAssets = ensureChartAssetsHydrated(workbook, sheets);
+    console.info("[react-xlsx debug] setChartRect", {
+      hasActiveSheet: Boolean(activeSheet),
+      hasHydratedChartAssets: Boolean(hydratedChartAssets),
+      hasImageAssets: Boolean(imageAssetsRef.current),
+      hasWorkbook: Boolean(workbook),
+      id,
+      readOnly,
+      rect
+    });
     if (readOnly || !workbook || !activeSheet || !imageAssetsRef.current || !hydratedChartAssets) {
       return;
     }
     const worksheet = workbook.getSheet(activeSheet.workbookSheetIndex);
     const currentChart = getChartById(id);
+    console.info("[react-xlsx debug] currentChart", {
+      activeWorkbookSheetIndex: activeSheet.workbookSheetIndex,
+      editable: currentChart?.editable,
+      found: Boolean(currentChart),
+      originCount: hydratedChartAssets.chartOriginsById.size,
+      workbookSheetIndex: currentChart?.workbookSheetIndex
+    });
     if (!currentChart || currentChart.editable === false || currentChart.workbookSheetIndex !== activeSheet.workbookSheetIndex) {
       return;
     }
@@ -9268,7 +9309,8 @@ function useXlsxViewerController(options) {
       getRowHeightPx: (row) => getRowHeightPx(worksheet, row)
     });
     recordHistoryBeforeMutation();
-    updateWorkbookChartAnchor(imageAssetsRef.current, hydratedChartAssets, id, nextAnchor);
+    const didUpdateAnchor = updateWorkbookChartAnchor(imageAssetsRef.current, hydratedChartAssets, id, nextAnchor);
+    console.info("[react-xlsx debug] updateWorkbookChartAnchor", { didUpdateAnchor, nextAnchor });
     hydratedChartAssets.chartsByWorkbookSheetIndex = hydratedChartAssets.chartsByWorkbookSheetIndex.map((sheetCharts) => sheetCharts.map((chart) => chart.id === id ? { ...chart, anchor: nextAnchor } : chart));
     setChartsByWorkbookSheetIndex((current) => current.map((sheetCharts) => sheetCharts.map((chart) => chart.id === id ? { ...chart, anchor: nextAnchor } : chart)));
     setRevision((current) => current + 1);
@@ -9484,8 +9526,12 @@ function useXlsxViewerController(options) {
           continue;
         }
         worksheet.setCell(cellAddressToA1({ row, col }), "");
+        const after = captureCellMutationState(cell);
+        if (!after) {
+          continue;
+        }
         mutations.push({
-          after: { formula: null, value: "" },
+          after,
           before,
           cell
         });
@@ -9516,9 +9562,13 @@ function useXlsxViewerController(options) {
     }
     const nextValue = coerceUserEnteredValue(value);
     worksheet.setCell(cellAddressToA1(cell), nextValue);
+    const after = captureCellMutationState(cell);
+    if (!after) {
+      return;
+    }
     maybeRecalculateWorkbook(workbook);
     refreshWorkbookState(workbook);
-    recordCellEditHistory(cell, before, { formula: null, value: nextValue });
+    recordCellEditHistory(cell, before, after);
   }, [captureCellMutationState, getActiveWorksheet, maybeRecalculateWorkbook, readOnly, recordCellEditHistory, refreshWorkbookState, workbook]);
   const setCellFormula = React.useCallback((cell, formula) => {
     const worksheet = getActiveWorksheet();
@@ -9535,13 +9585,31 @@ function useXlsxViewerController(options) {
     } else {
       worksheet.setFormula(cellAddressToA1(cell), formula);
     }
+    const after = captureCellMutationState(cell);
+    if (!after) {
+      return;
+    }
     maybeRecalculateWorkbook(workbook);
     refreshWorkbookState(workbook);
-    recordCellEditHistory(cell, before, {
-      formula: trimmedFormula || null,
-      value: trimmedFormula ? null : ""
-    });
+    recordCellEditHistory(cell, before, after);
   }, [captureCellMutationState, getActiveWorksheet, maybeRecalculateWorkbook, readOnly, recordCellEditHistory, refreshWorkbookState, workbook]);
+  const setCellStyle = React.useCallback((cell, style) => {
+    const worksheet = getActiveWorksheet();
+    if (readOnly || !worksheet || !workbook) {
+      return;
+    }
+    const before = captureCellMutationState(cell);
+    if (!before) {
+      return;
+    }
+    worksheet.setCellStyleAt(cell.row, cell.col, style);
+    const after = captureCellMutationState(cell);
+    if (!after) {
+      return;
+    }
+    refreshWorkbookState(workbook);
+    recordCellEditHistory(cell, before, after);
+  }, [captureCellMutationState, getActiveWorksheet, readOnly, recordCellEditHistory, refreshWorkbookState, workbook]);
   const setSelectedCellValue = React.useCallback((value) => {
     if (!activeCell) {
       return;
@@ -9554,6 +9622,51 @@ function useXlsxViewerController(options) {
     }
     setCellFormula(activeCell, formula);
   }, [activeCell, setCellFormula]);
+  const setSelectedCellStyle = React.useCallback((style) => {
+    if (!activeCell) {
+      return;
+    }
+    setCellStyle(activeCell, style);
+  }, [activeCell, setCellStyle]);
+  const setRangeStyle = React.useCallback((range, style) => {
+    const worksheet = getActiveWorksheet();
+    if (readOnly || !worksheet || !workbook) {
+      return;
+    }
+    const normalized = normalizeRange(range);
+    const beforeStates = [];
+    for (let row = normalized.start.row; row <= normalized.end.row; row += 1) {
+      for (let col = normalized.start.col; col <= normalized.end.col; col += 1) {
+        const cell = { row, col };
+        const before = captureCellMutationState(cell);
+        if (!before) {
+          continue;
+        }
+        beforeStates.push({
+          before,
+          cell
+        });
+      }
+    }
+    if (beforeStates.length === 0) {
+      return;
+    }
+    worksheet.setRangeStyle(rangeToA1(normalized), style);
+    const mutations = [];
+    for (const mutation of beforeStates) {
+      const after = captureCellMutationState(mutation.cell);
+      if (!after) {
+        continue;
+      }
+      mutations.push({
+        after,
+        before: mutation.before,
+        cell: mutation.cell
+      });
+    }
+    refreshWorkbookState(workbook);
+    recordRangeEditHistory(mutations, selection, activeCell);
+  }, [activeCell, captureCellMutationState, getActiveWorksheet, readOnly, recordRangeEditHistory, refreshWorkbookState, selection, workbook]);
   const fillSelection = React.useCallback((targetRange) => {
     const worksheet = getActiveWorksheet();
     if (readOnly || !worksheet || !workbook || !selection) {
@@ -9580,19 +9693,22 @@ function useXlsxViewerController(options) {
         const sourceRow = sourceRange.start.row + (row - nextRange.start.row) % sourceHeight;
         const sourceCol = sourceRange.start.col + (col - nextRange.start.col) % sourceWidth;
         const sourceFormula = worksheet.getFormulaAt(sourceRow, sourceCol);
+        const sourceStyle = cloneCellStyle(worksheet.getCellStyleAt(sourceRow, sourceCol));
         if (sourceFormula) {
           worksheet.setFormula(cellAddressToA1(targetCell), sourceFormula);
-          mutations.push({
-            after: { formula: sourceFormula, value: null },
-            before,
-            cell: targetCell
-          });
+        } else {
+          const sourceValue = normalizeCellValue(worksheet.getCellAt(sourceRow, sourceCol).toJs());
+          worksheet.setCell(cellAddressToA1(targetCell), sourceValue);
+        }
+        if (sourceStyle && typeof sourceStyle === "object") {
+          worksheet.setCellStyleAt(targetCell.row, targetCell.col, sourceStyle);
+        }
+        const after = captureCellMutationState(targetCell);
+        if (!after) {
           continue;
         }
-        const sourceValue = normalizeCellValue(worksheet.getCellAt(sourceRow, sourceCol).toJs());
-        worksheet.setCell(cellAddressToA1(targetCell), sourceValue);
         mutations.push({
-          after: { formula: null, value: sourceValue },
+          after,
           before,
           cell: targetCell
         });
@@ -9732,16 +9848,24 @@ function useXlsxViewerController(options) {
         }
         if (rawValue.startsWith("=") && rawValue.length > 1) {
           worksheet.setFormula(cellAddressToA1(nextCell), rawValue);
+          const after = captureCellMutationState(nextCell);
+          if (!after) {
+            continue;
+          }
           mutations.push({
-            after: { formula: rawValue, value: null },
+            after,
             before,
             cell: nextCell
           });
         } else {
           const nextValue = coerceUserEnteredValue(rawValue);
           worksheet.setCell(cellAddressToA1(nextCell), nextValue);
+          const after = captureCellMutationState(nextCell);
+          if (!after) {
+            continue;
+          }
           mutations.push({
-            after: { formula: null, value: nextValue },
+            after,
             before,
             cell: nextCell
           });
@@ -9792,8 +9916,12 @@ function useXlsxViewerController(options) {
       if (cell.formula) {
         worksheet.setFormula(cellAddressToA1(nextCell), cell.formula);
         if (before) {
+          const after = captureCellMutationState(nextCell);
+          if (!after) {
+            continue;
+          }
           mutations.push({
-            after: { formula: cell.formula, value: null },
+            after,
             before,
             cell: nextCell
           });
@@ -9801,8 +9929,12 @@ function useXlsxViewerController(options) {
       } else {
         worksheet.setCell(cellAddressToA1(nextCell), cell.value);
         if (before) {
+          const after = captureCellMutationState(nextCell);
+          if (!after) {
+            continue;
+          }
           mutations.push({
-            after: { formula: null, value: cell.value },
+            after,
             before,
             cell: nextCell
           });
@@ -10019,7 +10151,9 @@ function useXlsxViewerController(options) {
       resizeColumn,
       resizeRow,
       setCellFormula,
+      setCellStyle,
       setCellValue,
+      setRangeStyle,
       setZoomScale,
       setChartRect,
       setImageRect,
@@ -10038,6 +10172,7 @@ function useXlsxViewerController(options) {
       setActiveSheetIndex,
       setActiveTabIndex,
       setSelectedCellFormula,
+      setSelectedCellStyle,
       setSelectedCellValue,
       sheets,
       shapes,
@@ -10121,7 +10256,9 @@ function useXlsxViewerController(options) {
       resizeColumn,
       resizeRow,
       setCellFormula,
+      setCellStyle,
       setCellValue,
+      setRangeStyle,
       setZoomScale,
       setChartRect,
       setImageRect,
@@ -10140,6 +10277,7 @@ function useXlsxViewerController(options) {
       setActiveSheetIndex,
       setActiveTabIndex,
       setSelectedCellFormula,
+      setSelectedCellStyle,
       setSelectedCellValue,
       sheets,
       shapes,
@@ -16618,6 +16756,9 @@ var WHEEL_ZOOM_SENSITIVITY = 25e-5;
 var WHEEL_LINE_DELTA_PX = 16;
 var CHART_SOURCE_HIGHLIGHT_COLORS = ["#2563eb", "#dc2626", "#7c3aed", "#059669", "#ea580c", "#db2777"];
 var SHEET_SURFACE = "#ffffff";
+var DRAWING_SELECTION_STROKE = "#64748b";
+var DRAWING_SELECTION_HANDLE_FILL = "#ffffff";
+var DRAWING_SELECTION_HANDLE_SHADOW = "rgba(15, 23, 42, 0.18)";
 var DEFAULT_CELL_PADDING = "0 4px";
 var IMAGE_HANDLE_POSITIONS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var CANVAS_CELL_STYLE_CACHE_LIMIT = 4096;
@@ -16703,6 +16844,38 @@ function measureCanvasTextWidth(context, text) {
     CANVAS_TEXT_MEASURE_CACHE_LIMIT
   );
 }
+function drawCanvasTextDecorations(context, {
+  align,
+  color,
+  decoration,
+  ellipsize = false,
+  lineThroughY,
+  maxWidth,
+  text,
+  textX,
+  underlineY,
+  zoomFactor
+}) {
+  if (!decoration || text.length === 0) {
+    return;
+  }
+  const measured = ellipsize && maxWidth !== void 0 ? Math.min(maxWidth, measureCanvasTextWidth(context, text)) : measureCanvasTextWidth(context, text);
+  const startX = align === "right" ? textX - measured : align === "center" ? textX - measured / 2 : textX;
+  context.strokeStyle = color;
+  context.lineWidth = Math.max(1, zoomFactor * 0.75);
+  if (decoration.includes("underline")) {
+    context.beginPath();
+    context.moveTo(startX, underlineY);
+    context.lineTo(startX + measured, underlineY);
+    context.stroke();
+  }
+  if (decoration.includes("line-through")) {
+    context.beginPath();
+    context.moveTo(startX, lineThroughY);
+    context.lineTo(startX + measured, lineThroughY);
+    context.stroke();
+  }
+}
 function getCachedCanvasPath2D(path) {
   if (typeof Path2D === "undefined") {
     return null;
@@ -18748,7 +18921,9 @@ function resolveImageHandleStyle(position, stroke, surface, scale = 1) {
   const style = {
     backgroundColor: surface,
     border: `${Math.max(1, scale)}px solid ${stroke}`,
-    borderRadius: 6 * scale,
+    borderRadius: 3 * scale,
+    boxShadow: `0 1px ${3 * scale}px ${DRAWING_SELECTION_HANDLE_SHADOW}`,
+    boxSizing: "border-box",
     cursor: IMAGE_HANDLE_CURSOR[position],
     height: handleSize,
     pointerEvents: "auto",
@@ -21545,6 +21720,7 @@ function XlsxGrid({
   enableCanvasSelectionAnimation = true,
   errorState,
   fileTooLargeState,
+  getCellStyle,
   loadingComponent,
   loadingState,
   renderChartLoading,
@@ -23504,7 +23680,7 @@ function XlsxGrid({
   const viewportRowBatch = getRowsBatchAsync ? asyncViewportRowBatch : syncViewportRowBatch;
   React4.useEffect(() => {
     cellRenderCacheRef.current.clear();
-  }, [activeSheetIndex, displayColLimit, displayRowLimit, palette, revision, viewportRowBatch, worksheet, zoomFactor]);
+  }, [activeSheetIndex, displayColLimit, displayRowLimit, getCellStyle, palette, revision, viewportRowBatch, worksheet, zoomFactor]);
   React4.useEffect(() => {
     setAsyncViewportRowBatch(null);
   }, [activeSheetIndex, revision]);
@@ -23629,6 +23805,29 @@ function XlsxGrid({
       validation: resolveCellDataValidation(row, col, activeSheet),
       value: sparkline ? "" : checkboxState !== null ? "" : batchCoversRow || !worksheet ? batchedCell?.value ?? "" : getCellDisplayValue(worksheet, row, col, activeSheet)
     };
+    if (getCellStyle) {
+      const styleOverrides = getCellStyle({
+        cell: { row, col },
+        hasChartHighlight: Boolean(nextData.chartHighlight),
+        hasConditionalFormat: Boolean(
+          nextData.conditionalColorScale || nextData.conditionalDataBar || nextData.conditionalIcon
+        ),
+        hasHyperlink: Boolean(nextData.hyperlink),
+        hasValidation: Boolean(nextData.validation),
+        isMerged: Boolean(nextData.colSpan || nextData.rowSpan),
+        isTableHeader: Boolean(nextData.isTableHeader),
+        resolvedStyle: { ...nextData.style },
+        sheetName: activeSheet?.name ?? "",
+        value: nextData.value,
+        workbookSheetIndex: activeSheet?.workbookSheetIndex ?? -1
+      });
+      if (styleOverrides) {
+        nextData.style = { ...nextData.style, ...styleOverrides };
+        if (nextData.conditionalColorScale && (styleOverrides.backgroundColor !== void 0 || styleOverrides.background !== void 0)) {
+          nextData.conditionalColorScale = null;
+        }
+      }
+    }
     nextData.canvas = buildCanvasCellStyleCache(nextData.style);
     if (canCellTextOverflow(nextData)) {
       const startColIndex = colIndexByActual.get(col);
@@ -23714,6 +23913,7 @@ function XlsxGrid({
     displayDefaultColWidth,
     displayEffectiveColWidths,
     effectiveTables,
+    getCellStyle,
     palette,
     sparklinesByCell,
     viewportRowBatch,
@@ -26238,16 +26438,17 @@ function XlsxGrid({
                 wrappedLines.forEach((line, lineIndex) => {
                   const textY = textBlockTop + lineIndex * lineHeight + lineHeight / 2;
                   paneContext.fillText(line, textX, textY);
-                  if (canvasCellStyle.textDecoration?.includes("underline") && line.length > 0) {
-                    const measured = Math.min(maxTextWidth, measureCanvasTextWidth(paneContext, line));
-                    const underlineStartX = align === "right" ? textX - measured : align === "center" ? textX - measured / 2 : textX;
-                    paneContext.beginPath();
-                    paneContext.moveTo(underlineStartX, textY + Math.max(2, lineHeight * 0.24));
-                    paneContext.lineTo(underlineStartX + measured, textY + Math.max(2, lineHeight * 0.24));
-                    paneContext.strokeStyle = textColor;
-                    paneContext.lineWidth = Math.max(1, zoomFactor * 0.75);
-                    paneContext.stroke();
-                  }
+                  drawCanvasTextDecorations(paneContext, {
+                    align,
+                    color: textColor,
+                    decoration: canvasCellStyle.textDecoration,
+                    lineThroughY: textY,
+                    maxWidth: maxTextWidth,
+                    text: line,
+                    textX,
+                    underlineY: textY + Math.max(2, lineHeight * 0.24),
+                    zoomFactor
+                  });
                 });
               } else if (spillMaxWidth != null) {
                 const text = shouldEllipsizeText ? truncateCanvasText(paneContext, rawText, maxTextWidth) : rawText;
@@ -26266,22 +26467,25 @@ function XlsxGrid({
                   textDecoration: canvasCellStyle.textDecoration,
                   textX,
                   textY,
+                  lineThroughY: textY,
                   underlineY: textY + 6 * zoomFactor
                 });
               } else {
                 const text = cellData.shrinkToFit ? rawText : shouldEllipsizeText ? truncateCanvasText(paneContext, rawText, maxTextWidth) : rawText;
                 const textY = contentTop + contentHeight / 2;
                 paneContext.fillText(text, textX, textY);
-                if (canvasCellStyle.textDecoration?.includes("underline") && text.length > 0) {
-                  const measured = shouldEllipsizeText ? Math.min(maxTextWidth, measureCanvasTextWidth(paneContext, text)) : measureCanvasTextWidth(paneContext, text);
-                  const underlineStartX = align === "right" ? textX - measured : align === "center" ? textX - measured / 2 : textX;
-                  paneContext.beginPath();
-                  paneContext.moveTo(underlineStartX, textY + 6 * zoomFactor);
-                  paneContext.lineTo(underlineStartX + measured, textY + 6 * zoomFactor);
-                  paneContext.strokeStyle = textColor;
-                  paneContext.lineWidth = Math.max(1, zoomFactor * 0.75);
-                  paneContext.stroke();
-                }
+                drawCanvasTextDecorations(paneContext, {
+                  align,
+                  color: textColor,
+                  decoration: canvasCellStyle.textDecoration,
+                  ellipsize: shouldEllipsizeText,
+                  lineThroughY: textY,
+                  maxWidth: maxTextWidth,
+                  text,
+                  textX,
+                  underlineY: textY + 6 * zoomFactor,
+                  zoomFactor
+                });
               }
             }
             if (cellData.conditionalIcon) {
@@ -26315,16 +26519,18 @@ function XlsxGrid({
           paneContext.textAlign = spillText.align;
           paneContext.textBaseline = "middle";
           paneContext.fillText(spillText.text, spillText.textX, spillText.textY);
-          if (spillText.textDecoration?.includes("underline") && spillText.text.length > 0) {
-            const measured = spillText.ellipsize ? Math.min(spillText.maxWidth, measureCanvasTextWidth(paneContext, spillText.text)) : measureCanvasTextWidth(paneContext, spillText.text);
-            const underlineStartX = spillText.align === "right" ? spillText.textX - measured : spillText.align === "center" ? spillText.textX - measured / 2 : spillText.textX;
-            paneContext.beginPath();
-            paneContext.moveTo(underlineStartX, spillText.underlineY);
-            paneContext.lineTo(underlineStartX + measured, spillText.underlineY);
-            paneContext.strokeStyle = spillText.color;
-            paneContext.lineWidth = Math.max(1, zoomFactor * 0.75);
-            paneContext.stroke();
-          }
+          drawCanvasTextDecorations(paneContext, {
+            align: spillText.align,
+            color: spillText.color,
+            decoration: spillText.textDecoration,
+            ellipsize: spillText.ellipsize,
+            lineThroughY: spillText.lineThroughY,
+            maxWidth: spillText.maxWidth,
+            text: spillText.text,
+            textX: spillText.textX,
+            underlineY: spillText.underlineY,
+            zoomFactor
+          });
           paneContext.restore();
         }
       }
@@ -27233,6 +27439,7 @@ function XlsxGrid({
     }
     const isFrozenDrawing = pane !== "scroll";
     const canEditImage = !readOnly && image.editable !== false;
+    const drawingSelectionSurface = paletteIsDark(palette) ? palette.canvas : DRAWING_SELECTION_HANDLE_FILL;
     const style = {
       contain: "layout paint",
       height: rect.height,
@@ -27264,6 +27471,7 @@ function XlsxGrid({
       {
         style: {
           ...style,
+          contain: "layout",
           overflow: "visible",
           pointerEvents: "none",
           zIndex: isFrozenDrawing ? image.zIndex + 22 : image.zIndex + 2
@@ -27273,8 +27481,8 @@ function XlsxGrid({
             "div",
             {
               style: {
-                border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
-                boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
+                border: `${Math.max(1, zoomFactor)}px solid ${DRAWING_SELECTION_STROKE}`,
+                boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${drawingSelectionSurface}`,
                 boxSizing: "border-box",
                 inset: 0,
                 pointerEvents: "none",
@@ -27284,7 +27492,7 @@ function XlsxGrid({
                 "div",
                 {
                   onPointerDown: (event) => startImageResize(event, image, rect, position),
-                  style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
+                  style: resolveImageHandleStyle(position, DRAWING_SELECTION_STROKE, drawingSelectionSurface, zoomFactor)
                 },
                 position
               )) : null
@@ -27296,7 +27504,7 @@ function XlsxGrid({
                 startImageResize(event, image, rect, position);
               }
             },
-            style: canEditImage ? resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor) : { ...resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor), display: "none" }
+            style: canEditImage ? resolveImageHandleStyle(position, DRAWING_SELECTION_STROKE, drawingSelectionSurface, zoomFactor) : { ...resolveImageHandleStyle(position, DRAWING_SELECTION_STROKE, drawingSelectionSurface, zoomFactor), display: "none" }
           }),
           image,
           rect
@@ -27304,8 +27512,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
-              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
+              border: `${Math.max(1, zoomFactor)}px solid ${DRAWING_SELECTION_STROKE}`,
+              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${drawingSelectionSurface}`,
               boxSizing: "border-box",
               inset: 0,
               pointerEvents: "none",
@@ -27315,7 +27523,7 @@ function XlsxGrid({
               "div",
               {
                 onPointerDown: (event) => startImageResize(event, image, rect, position),
-                style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
+                style: resolveImageHandleStyle(position, DRAWING_SELECTION_STROKE, drawingSelectionSurface, zoomFactor)
               },
               position
             )) : null
@@ -27353,6 +27561,7 @@ function XlsxGrid({
     }
     const isFrozenDrawing = pane !== "scroll";
     const canEditChart = !readOnly && chart.editable !== false;
+    const drawingSelectionSurface = paletteIsDark(palette) ? palette.canvas : DRAWING_SELECTION_HANDLE_FILL;
     const style = {
       contain: "layout paint",
       height: rect.height,
@@ -27369,6 +27578,7 @@ function XlsxGrid({
       {
         style: {
           ...style,
+          contain: "layout",
           overflow: "visible",
           pointerEvents: "none",
           zIndex: isFrozenDrawing ? chart.zIndex + 22 : chart.zIndex + 2
@@ -27377,8 +27587,8 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `${Math.max(1, zoomFactor)}px solid ${selectionStroke}`,
-              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${palette.surface}`,
+              border: `${Math.max(1, zoomFactor)}px solid ${DRAWING_SELECTION_STROKE}`,
+              boxShadow: `0 0 0 ${Math.max(1, zoomFactor)}px ${drawingSelectionSurface}`,
               boxSizing: "border-box",
               inset: 0,
               pointerEvents: "none",
@@ -27388,7 +27598,7 @@ function XlsxGrid({
               "div",
               {
                 onPointerDown: (event) => startChartResize(event, chart, rect, position),
-                style: resolveImageHandleStyle(position, selectionStroke, palette.surface, zoomFactor)
+                style: resolveImageHandleStyle(position, DRAWING_SELECTION_STROKE, drawingSelectionSurface, zoomFactor)
               },
               position
             )) : null
@@ -27668,6 +27878,22 @@ function XlsxGrid({
   }
   function installImageInteractionListeners(pointerId) {
     imageInteractionCleanupRef.current?.();
+    const resolveInteractionRect = (interaction, clientX, clientY) => {
+      const deltaX = clientX - interaction.startClientX;
+      const deltaY = clientY - interaction.startClientY;
+      return clampImageRect(
+        interaction.type === "move" ? {
+          ...interaction.baseRect,
+          left: interaction.baseRect.left + deltaX,
+          top: interaction.baseRect.top + deltaY
+        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, displayImageMinSize),
+        {
+          contentOffsetLeft: displayRowHeaderWidth,
+          contentOffsetTop: displayHeaderHeight,
+          minSizePx: displayImageMinSize
+        }
+      );
+    };
     const handlePointerMove = (event) => {
       if (event.pointerId !== pointerId) {
         return;
@@ -27681,18 +27907,7 @@ function XlsxGrid({
       if (!interaction.didMove && (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3)) {
         interaction.didMove = true;
       }
-      const nextRect = clampImageRect(
-        interaction.type === "move" ? {
-          ...interaction.baseRect,
-          left: interaction.baseRect.left + deltaX,
-          top: interaction.baseRect.top + deltaY
-        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, displayImageMinSize),
-        {
-          contentOffsetLeft: displayRowHeaderWidth,
-          contentOffsetTop: displayHeaderHeight,
-          minSizePx: displayImageMinSize
-        }
-      );
+      const nextRect = resolveInteractionRect(interaction, event.clientX, event.clientY);
       scheduleImagePreviewRect({ id: interaction.imageId, rect: nextRect });
     };
     const cleanup = () => {
@@ -27715,18 +27930,20 @@ function XlsxGrid({
         imagePreviewRectRef.current = pendingPreview;
         setImagePreviewRect(pendingPreview);
       }
-      const preview = pendingPreview ?? imagePreviewRectRef.current;
+      const finalRect = interaction ? resolveInteractionRect(interaction, event.clientX, event.clientY) : null;
       imageInteractionRef.current = null;
       imageInteractionCleanupRef.current = null;
       setInteractionMode("idle");
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
       cleanup();
-      if (interaction && preview && preview.id === interaction.imageId) {
+      if (interaction) {
         if (interaction.didMove) {
           skipNextImageClickRef.current = interaction.imageId;
         }
-        setImageRect(interaction.imageId, toLogicalRect(preview.rect));
+        if (interaction.didMove && finalRect) {
+          setImageRect(interaction.imageId, toLogicalRect(finalRect));
+        }
       }
       imagePreviewRectRef.current = null;
       setImagePreviewRect(null);
@@ -27738,6 +27955,22 @@ function XlsxGrid({
   }
   function installChartInteractionListeners(pointerId) {
     chartInteractionCleanupRef.current?.();
+    const resolveInteractionRect = (interaction, clientX, clientY) => {
+      const deltaX = clientX - interaction.startClientX;
+      const deltaY = clientY - interaction.startClientY;
+      return clampImageRect(
+        interaction.type === "move" ? {
+          ...interaction.baseRect,
+          left: interaction.baseRect.left + deltaX,
+          top: interaction.baseRect.top + deltaY
+        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, 48 * zoomFactor),
+        {
+          contentOffsetLeft: displayRowHeaderWidth,
+          contentOffsetTop: displayHeaderHeight,
+          minSizePx: 48 * zoomFactor
+        }
+      );
+    };
     const handlePointerMove = (event) => {
       if (event.pointerId !== pointerId) {
         return;
@@ -27751,18 +27984,7 @@ function XlsxGrid({
       if (!interaction.didMove && (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3)) {
         interaction.didMove = true;
       }
-      const nextRect = clampImageRect(
-        interaction.type === "move" ? {
-          ...interaction.baseRect,
-          left: interaction.baseRect.left + deltaX,
-          top: interaction.baseRect.top + deltaY
-        } : resizeImageRect(interaction.baseRect, interaction.handle, deltaX, deltaY, 48 * zoomFactor),
-        {
-          contentOffsetLeft: displayRowHeaderWidth,
-          contentOffsetTop: displayHeaderHeight,
-          minSizePx: 48 * zoomFactor
-        }
-      );
+      const nextRect = resolveInteractionRect(interaction, event.clientX, event.clientY);
       scheduleChartPreviewRect({ id: interaction.chartId, rect: nextRect });
     };
     const cleanup = () => {
@@ -27785,18 +28007,20 @@ function XlsxGrid({
         chartPreviewRectRef.current = pendingPreview;
         setChartPreviewRect(pendingPreview);
       }
-      const preview = pendingPreview ?? chartPreviewRectRef.current;
+      const finalRect = interaction ? resolveInteractionRect(interaction, event.clientX, event.clientY) : null;
       chartInteractionRef.current = null;
       chartInteractionCleanupRef.current = null;
       setInteractionMode("idle");
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
       cleanup();
-      if (interaction && preview && preview.id === interaction.chartId) {
+      if (interaction) {
         if (interaction.didMove) {
           skipNextChartClickRef.current = interaction.chartId;
         }
-        setChartRect(interaction.chartId, toLogicalRect(preview.rect));
+        if (interaction.didMove && finalRect) {
+          setChartRect(interaction.chartId, toLogicalRect(finalRect));
+        }
       }
       chartPreviewRectRef.current = null;
       setChartPreviewRect(null);
@@ -28099,7 +28323,6 @@ function XlsxGrid({
   }
   gridKeyboardHandlerRef.current = handleGridKeyDown;
   const scrollerViewportProps = {
-    key: activeTabIndex,
     ref: scrollRef,
     "aria-colcount": Math.max(activeSheet?.colCount ?? 0, displayColLimit),
     "aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight Home End PageUp PageDown Control+Home Control+End",
@@ -28737,7 +28960,7 @@ function XlsxGrid({
       )
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { backgroundColor: palette.canvas, display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: renderScroller ? renderScroller({ children: scrollerContent, viewportProps: scrollerViewportProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...scrollerViewportProps, children: scrollerContent }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { backgroundColor: palette.canvas, display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: renderScroller ? renderScroller({ children: scrollerContent, viewportProps: scrollerViewportProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...scrollerViewportProps, children: scrollerContent }, activeTabIndex) });
 }
 function XlsxViewerInner({
   allowResizeInReadOnly = false,
@@ -28749,6 +28972,7 @@ function XlsxViewerInner({
   errorState,
   experimentalCanvas = true,
   fileTooLargeState,
+  getCellStyle,
   height,
   isDark = false,
   loadingComponent,
@@ -28812,6 +29036,7 @@ function XlsxViewerInner({
             errorState,
             experimentalCanvas,
             fileTooLargeState,
+            getCellStyle,
             loadingComponent,
             loadingState,
             palette,
@@ -28940,8 +29165,11 @@ function useXlsxViewerEditing() {
     selectedFormula,
     selectedValue,
     setCellFormula,
+    setCellStyle,
     setCellValue,
+    setRangeStyle,
     setSelectedCellFormula,
+    setSelectedCellStyle,
     setSelectedCellValue,
     undo,
     unmergeSelection
@@ -28968,8 +29196,11 @@ function useXlsxViewerEditing() {
       selectedFormula,
       selectedValue,
       setCellFormula,
+      setCellStyle,
       setCellValue,
+      setRangeStyle,
       setSelectedCellFormula,
+      setSelectedCellStyle,
       setSelectedCellValue,
       undo,
       unmergeSelection
@@ -28995,8 +29226,11 @@ function useXlsxViewerEditing() {
       selectedFormula,
       selectedValue,
       setCellFormula,
+      setCellStyle,
       setCellValue,
+      setRangeStyle,
       setSelectedCellFormula,
+      setSelectedCellStyle,
       setSelectedCellValue,
       undo,
       unmergeSelection