@extend-ai/react-xlsx 0.16.6 → 0.17.1

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   XlsxViewer: () => XlsxViewer,
   XlsxViewerProvider: () => XlsxViewerProvider,
   initWasm: () => initWasm,
+  parseXlsxRange: () => parseXlsxRange,
   setWasmSource: () => setWasmSource,
   useXlsxViewer: () => useXlsxViewer,
   useXlsxViewerCharts: () => useXlsxViewerCharts,
@@ -3631,7 +3632,7 @@ function resolveWorkbookColor(color, themePalette) {
   if (directHex) {
     return normalizeHexColor2(directHex);
   }
-  const themeValue = color.theme;
+  const themeValue = color.theme ?? color.themeIndex;
   const numericTheme = typeof themeValue === "number" ? themeValue : typeof themeValue === "string" && themeValue.trim().length > 0 ? Number(themeValue) : Number.NaN;
   const themeColor = Number.isFinite(numericTheme) ? themePalette?.colorsByIndex[numericTheme] ?? null : null;
   if (!themeColor) {
@@ -3789,7 +3790,8 @@ function resolveWorksheetMergeMetadata(worksheet) {
     hasHorizontalMerges: false,
     hasVerticalMerges: false,
     maxHorizontalMergeEndCol: -1,
-    maxVerticalMergeEndRow: -1
+    maxVerticalMergeEndRow: -1,
+    mergedRanges: []
   };
   const mergedRegions = Array.isArray(worksheet.mergedRegions) ? worksheet.mergedRegions : [];
   for (const rawRegion of mergedRegions) {
@@ -3820,6 +3822,7 @@ function resolveWorksheetMergeMetadata(worksheet) {
     if (!range) {
       continue;
     }
+    mergeMetadata.mergedRanges.push(range);
     if (range.end.col > range.start.col) {
       mergeMetadata.hasHorizontalMerges = true;
       mergeMetadata.maxHorizontalMergeEndCol = Math.max(mergeMetadata.maxHorizontalMergeEndCol, range.end.col);
@@ -4257,6 +4260,12 @@ function parseSpreadsheetFont(node) {
     return void 0;
   }
   const font = {};
+  for (const [tag, property] of [["b", "bold"], ["i", "italic"], ["strike", "strikethrough"]]) {
+    const flag = getFirstChild(node, tag);
+    if (flag) {
+      font[property] = hasEnabledSpreadsheetFlag(flag);
+    }
+  }
   const size = getFirstChild(node, "sz")?.getAttribute("val");
   const name = getFirstChild(node, "name")?.getAttribute("val");
   const family = getFirstChild(node, "family")?.getAttribute("val");
@@ -4264,15 +4273,6 @@ function parseSpreadsheetFont(node) {
   const charset = getFirstChild(node, "charset")?.getAttribute("val");
   const verticalAlign = getFirstChild(node, "vertAlign")?.getAttribute("val");
   const color = parseSpreadsheetColor(getFirstChild(node, "color"));
-  if (hasEnabledSpreadsheetFlag(getFirstChild(node, "b"))) {
-    font.bold = true;
-  }
-  if (hasEnabledSpreadsheetFlag(getFirstChild(node, "i"))) {
-    font.italic = true;
-  }
-  if (hasEnabledSpreadsheetFlag(getFirstChild(node, "strike"))) {
-    font.strikethrough = true;
-  }
   if (getFirstChild(node, "u")) {
     font.underline = getFirstChild(node, "u")?.getAttribute("val") ?? "single";
   }
@@ -4521,7 +4521,14 @@ function parseWorkbookStyles(archive) {
   const styleById = {};
   const tableStyleByName = {};
   getChildElements(cellXfsNode, "xf").forEach((xfNode, index) => {
-    styleById[index] = parseResolvedXfStyle(xfNode, fonts, fills, borders, checkboxComplementIndices);
+    const style = parseResolvedXfStyle(xfNode, fonts, fills, borders, checkboxComplementIndices);
+    const overrides = {};
+    for (const component of ["font", "fill", "border"]) {
+      if (Number(xfNode.getAttribute(`${component}Id`) ?? 0) > 0 && xfNode.getAttribute(`apply${component[0].toUpperCase()}${component.slice(1)}`) !== "0") {
+        Object.assign(overrides, { [component]: style[component] });
+      }
+    }
+    styleById[index] = { ...style, tableStyleOverrides: overrides };
   });
   getChildElements(cellStylesNode ?? document2.documentElement, "cellStyle").forEach((cellStyleNode) => {
     const name = cellStyleNode.getAttribute("name");
@@ -4865,6 +4872,7 @@ function parseSheetState(archive, path, options) {
   const rowHeightOverridesPx = {};
   const colWidthOverridesPx = {};
   const rowStyleIds = {};
+  const cellStyleIds = {};
   const colStyleIds = {};
   let minContentCol = Number.POSITIVE_INFINITY;
   let minContentRow = Number.POSITIVE_INFINITY;
@@ -4914,6 +4922,10 @@ function parseSheetState(archive, path, options) {
     }
     getChildElements(rowNode, "c").forEach((cellNode) => {
       const cellRef = cellNode.getAttribute("r");
+      const cellStyleId = Number(cellNode.getAttribute("s") ?? Number.NaN);
+      if (cellRef && Number.isFinite(cellStyleId)) {
+        cellStyleIds[cellRef] = cellStyleId;
+      }
       if (isMeaningfulCellNode(cellNode)) {
         trackContentCell(cellRef);
       }
@@ -4952,6 +4964,7 @@ function parseSheetState(archive, path, options) {
   return {
     autoFilterRanges,
     cachedFormulaValues,
+    cellStyleIds,
     columnWidthCharacterWidthPx,
     colWidthOverridesPx,
     colStyleIds,
@@ -6723,6 +6736,102 @@ function tryRecalculate(workbook) {
   }
 }
 
+// src/range-reference.ts
+var XLSX_MAX_ROWS = 1048576;
+var XLSX_MAX_COLUMNS = 16384;
+function parseColumn(value) {
+  let column = 0;
+  for (const character of value.toUpperCase()) {
+    column = column * 26 + character.charCodeAt(0) - 64;
+  }
+  return column > 0 && column <= XLSX_MAX_COLUMNS ? column - 1 : null;
+}
+function parseRow(value) {
+  const row = Number(value);
+  return row > 0 && row <= XLSX_MAX_ROWS ? row - 1 : null;
+}
+function parseCell(value) {
+  const match = /^\$?([a-z]{1,3})\$?([1-9]\d{0,6})$/i.exec(value);
+  if (!match) {
+    return null;
+  }
+  const col = parseColumn(match[1]);
+  const row = parseRow(match[2]);
+  return col === null || row === null ? null : { col, row };
+}
+function parseXlsxRange(reference) {
+  if (typeof reference !== "string") {
+    return null;
+  }
+  let address = reference.trim().replace(/^=\s*/, "");
+  let sheetName = null;
+  if (address.startsWith("'")) {
+    const match = /^'((?:[^']|'')+)'!(.+)$/.exec(address);
+    if (!match) {
+      return null;
+    }
+    sheetName = match[1].replace(/''/g, "'");
+    address = match[2];
+  } else if (address.includes("!")) {
+    const match = /^([^\s'!\[\]:*?/\\+,;(){}=<>"&^%\-]+)!(.+)$/.exec(address);
+    if (!match) {
+      return null;
+    }
+    sheetName = match[1];
+    address = match[2];
+  }
+  if (sheetName !== null && (sheetName.length > 31 || /[\[\]:*?/\\\u0000-\u001f]/.test(sheetName) || sheetName.startsWith("'") || sheetName.endsWith("'"))) {
+    return null;
+  }
+  const parts = address.split(":");
+  if (parts.length > 2) {
+    return null;
+  }
+  const start = parseCell(parts[0]);
+  const end = parseCell(parts[1] ?? parts[0]);
+  if (start && end) {
+    return {
+      kind: "cells",
+      range: {
+        start: { col: Math.min(start.col, end.col), row: Math.min(start.row, end.row) },
+        end: { col: Math.max(start.col, end.col), row: Math.max(start.row, end.row) }
+      },
+      sheetName
+    };
+  }
+  const columns = /^\$?([a-z]{1,3}):\$?([a-z]{1,3})$/i.exec(address);
+  if (columns) {
+    const first = parseColumn(columns[1]);
+    const last = parseColumn(columns[2]);
+    if (first !== null && last !== null) {
+      return {
+        kind: "columns",
+        range: {
+          start: { col: Math.min(first, last), row: 0 },
+          end: { col: Math.max(first, last), row: XLSX_MAX_ROWS - 1 }
+        },
+        sheetName
+      };
+    }
+  }
+  const rows = /^\$?([1-9]\d{0,6}):\$?([1-9]\d{0,6})$/.exec(address);
+  if (rows) {
+    const first = parseRow(rows[1]);
+    const last = parseRow(rows[2]);
+    if (first !== null && last !== null) {
+      return {
+        kind: "rows",
+        range: {
+          start: { col: 0, row: Math.min(first, last) },
+          end: { col: XLSX_MAX_COLUMNS - 1, row: Math.max(first, last) }
+        },
+        sheetName
+      };
+    }
+  }
+  return null;
+}
+
 // src/wasm.ts
 var wasmModulePromise = null;
 var hasConfiguredWasmSource = false;
@@ -7345,6 +7454,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
         hasVerticalMerges: mergeMetadata.hasVerticalMerges,
         maxHorizontalMergeEndCol: mergeMetadata.maxHorizontalMergeEndCol,
         maxVerticalMergeEndRow: mergeMetadata.maxVerticalMergeEndRow,
+        mergedRanges: mergeMetadata.mergedRanges,
         hiddenCols: [],
         hiddenRows: [],
         minUsedCol: -1,
@@ -7358,6 +7468,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
         colCount: 0,
         rowHeightOverridesPx: sheetState?.rowHeightOverridesPx ?? {},
         rowStyleIds: sheetState?.rowStyleIds ?? {},
+        cellStyleIds: sheetState?.cellStyleIds ?? {},
         styleById: styleById ?? {},
         sparklines: sheetState?.sparklines ?? [],
         tableStyleByName: tableStyleByName ?? {},
@@ -7432,6 +7543,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
       hasVerticalMerges: mergeMetadata.hasVerticalMerges,
       maxHorizontalMergeEndCol: mergeMetadata.maxHorizontalMergeEndCol,
       maxVerticalMergeEndRow: mergeMetadata.maxVerticalMergeEndRow,
+      mergedRanges: mergeMetadata.mergedRanges,
       hiddenCols: resolveWorksheetHiddenCols(worksheet, maxCol),
       hiddenRows: resolveWorksheetHiddenRows(worksheet, maxRow),
       minUsedCol: minCol,
@@ -7443,6 +7555,7 @@ function buildSheetList(workbook, sheetStatesByWorkbookSheetIndex, themePalette,
       namedCellStyleByName: namedCellStyleByName ?? {},
       rowHeightOverridesPx: sheetState?.rowHeightOverridesPx ?? {},
       rowStyleIds: sheetState?.rowStyleIds ?? {},
+      cellStyleIds: sheetState?.cellStyleIds ?? {},
       showGridLines: sheetState?.showGridLines ?? true,
       styleById: styleById ?? {},
       sparklines: sheetState?.sparklines ?? [],
@@ -8433,6 +8546,7 @@ function useXlsxViewerController(options) {
   const [zoomScaleOverridesByTabId, setZoomScaleOverridesByTabId] = React.useState({});
   const [activeCell, setActiveCell] = React.useState(null);
   const [selection, setSelection] = React.useState(null);
+  const [highlightedRanges, setHighlightedRanges] = React.useState([]);
   const [selectedChartId, setSelectedChartId] = React.useState(null);
   const [selectedChartElement, setSelectedChartElement] = React.useState(null);
   const [selectedImageId, setSelectedImageId] = React.useState(null);
@@ -8718,6 +8832,7 @@ function useXlsxViewerController(options) {
       setActiveTabIndexState(0);
       setActiveCell(null);
       setSelection(null);
+      setHighlightedRanges([]);
       setSelectedChartId(null);
       setSelectedChartElement(null);
       setSelectedImageId(null);
@@ -8747,6 +8862,7 @@ function useXlsxViewerController(options) {
     setActiveTabIndexState(0);
     setActiveCell(null);
     setSelection(null);
+    setHighlightedRanges([]);
     setSelectedChartId(null);
     setSelectedChartElement(null);
     setSelectedImageId(null);
@@ -8938,6 +9054,41 @@ function useXlsxViewerController(options) {
       return index;
     });
   }, [tabs]);
+  const highlightRanges = React.useCallback((references, options2 = {}) => {
+    const inputs = typeof references === "string" ? [references] : references;
+    if (!Array.isArray(inputs) || isLoading || error) {
+      return false;
+    }
+    const nextHighlights = [];
+    let firstSheetIndex = activeSheetIndex;
+    for (const reference of inputs) {
+      const parsed = parseXlsxRange(reference);
+      if (!parsed) {
+        return false;
+      }
+      const requestedSheetName = parsed.sheetName?.toLowerCase();
+      const sheetIndex = requestedSheetName === void 0 ? options2.sheetIndex ?? activeSheetIndex : sheets.findIndex((sheet2) => sheet2.name.toLowerCase() === requestedSheetName);
+      const sheet = Number.isInteger(sheetIndex) ? sheets[sheetIndex] : void 0;
+      if (!sheet) {
+        return false;
+      }
+      if (nextHighlights.length === 0) {
+        firstSheetIndex = sheetIndex;
+      }
+      nextHighlights.push({
+        ...parsed,
+        autoScroll: nextHighlights.length === 0 && (options2.autoScroll ?? true),
+        sheetName: sheet.name,
+        workbookSheetIndex: sheet.workbookSheetIndex
+      });
+    }
+    setHighlightedRanges(nextHighlights);
+    if (nextHighlights[0]?.autoScroll) {
+      setActiveSheetIndex(firstSheetIndex);
+    }
+    return true;
+  }, [activeSheetIndex, error, isLoading, setActiveSheetIndex, sheets]);
+  const clearHighlightedRanges = React.useCallback(() => setHighlightedRanges([]), []);
   const setZoomScale = React.useCallback((nextZoomScale) => {
     const normalizedZoomScale = clampZoomScale(nextZoomScale);
     setZoomScaleOverridesByTabId((current) => {
@@ -9868,7 +10019,7 @@ function useXlsxViewerController(options) {
       return;
     }
     const dataStartRow = targetTable.start.row + Math.max(targetTable.headerRowCount, 1);
-    const totalsRowOffset = targetTable.totalsRowShown ? Math.max(targetTable.totalsRowCount, 1) : 0;
+    const totalsRowOffset = targetTable.totalsRowCount;
     const dataEndRow = targetTable.end.row - totalsRowOffset;
     const startCol = targetTable.start.col;
     const endCol = targetTable.end.col;
@@ -10996,6 +11147,9 @@ function useXlsxViewerController(options) {
       clearSelectedCells,
       clearSelectedImage,
       clearSelection,
+      clearHighlightedRanges,
+      highlightRanges,
+      highlightedRanges,
       continueDeferredLoad,
       copySelectionToClipboard,
       defaultZoomScale,
@@ -11116,6 +11270,9 @@ function useXlsxViewerController(options) {
       clearSelectedCells,
       clearSelectedImage,
       continueDeferredLoad,
+      clearHighlightedRanges,
+      highlightRanges,
+      highlightedRanges,
       copySelectionToClipboard,
       defaultZoomScale,
       deferredLoadFileSize,
@@ -11799,6 +11956,62 @@ function growScrollDisplayLimit(current, growth, maximum, readOnly) {
   return readOnly ? Math.max(current, Math.min(maximum, nextLimit)) : nextLimit;
 }
 
+// src/range-highlight.ts
+function expandHighlightedRange(range, mergedRanges) {
+  const expanded = { start: { ...range.start }, end: { ...range.end } };
+  let changed;
+  do {
+    changed = false;
+    for (const merged of mergedRanges) {
+      if (merged.end.row < expanded.start.row || merged.start.row > expanded.end.row || merged.end.col < expanded.start.col || merged.start.col > expanded.end.col) {
+        continue;
+      }
+      const startRow = Math.min(expanded.start.row, merged.start.row);
+      const startCol = Math.min(expanded.start.col, merged.start.col);
+      const endRow = Math.max(expanded.end.row, merged.end.row);
+      const endCol = Math.max(expanded.end.col, merged.end.col);
+      if (startRow !== expanded.start.row || startCol !== expanded.start.col || endRow !== expanded.end.row || endCol !== expanded.end.col) {
+        expanded.start = { row: startRow, col: startCol };
+        expanded.end = { row: endRow, col: endCol };
+        changed = true;
+      }
+    }
+  } while (changed);
+  return expanded;
+}
+function lowerBound(indices, value) {
+  let low = 0;
+  let high = indices.length;
+  while (low < high) {
+    const middle = low + high >>> 1;
+    if (indices[middle] < value) {
+      low = middle + 1;
+    } else {
+      high = middle;
+    }
+  }
+  return low;
+}
+function getHighlightAxisExtent(indices, prefixSums, start, end) {
+  const first = lowerBound(indices, start);
+  const afterLast = lowerBound(indices, end + 1);
+  if (first >= afterLast) {
+    return null;
+  }
+  return { start: prefixSums[first] ?? 0, end: prefixSums[afterLast] ?? 0 };
+}
+function getHighlightScrollOffset(start, end, frozenExtent, viewportExtent, currentOffset) {
+  if (end <= frozenExtent || viewportExtent <= frozenExtent) {
+    return currentOffset;
+  }
+  const scrollableStart = Math.max(start, frozenExtent);
+  const availableExtent = viewportExtent - frozenExtent;
+  if (scrollableStart < currentOffset + frozenExtent || end - scrollableStart > availableExtent) {
+    return Math.max(0, scrollableStart - frozenExtent);
+  }
+  return end > currentOffset + viewportExtent ? end - viewportExtent : currentOffset;
+}
+
 // src/chart-renderer.tsx
 var import_d3_hierarchy = require("d3-hierarchy");
 var import_d3_geo = require("d3-geo");
@@ -18607,6 +18820,17 @@ function resolveViewerPalette(isDark = false, headerBackgroundColor, headerTextC
 
 // src/XlsxViewer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var RANGE_HIGHLIGHT_STYLES = `
+:where(.react-xlsx-range-highlight) {
+  background: var(--xlsx-highlight-fill, rgb(59 130 246 / 8%));
+  border: var(--xlsx-highlight-border, var(--xlsx-highlight-default-border-width, 1px) solid #3b82f6);
+  border-radius: var(--xlsx-highlight-radius, 2px);
+}
+:where(.react-xlsx-range-highlight[data-dark="true"]) {
+  background: var(--xlsx-highlight-fill, rgb(147 197 253 / 12%));
+  border: var(--xlsx-highlight-border, var(--xlsx-highlight-default-border-width, 1px) solid #93c5fd);
+}
+`;
 var DEFAULT_ROW_HEIGHT2 = 24;
 var DEFAULT_COL_WIDTH2 = 80;
 var HEADER_HEIGHT = 24;
@@ -18959,7 +19183,8 @@ function applyCanvasBorderDash(context, style, width) {
   context.setLineDash([]);
 }
 function strokeCanvasBorderSide(context, side, rect, border) {
-  const halfWidth = border.width / 2;
+  const strokeWidth = border.style === "double" ? border.width / 3 : border.width;
+  const halfWidth = strokeWidth / 2;
   const left = rect.left;
   const right = rect.left + rect.width;
   const top = rect.top;
@@ -18985,8 +19210,8 @@ function strokeCanvasBorderSide(context, side, rect, border) {
     context.stroke();
   };
   if (border.style === "double") {
-    const inset = Math.max(1, border.width);
-    context.lineWidth = Math.max(1, border.width / 3);
+    const inset = border.width - strokeWidth;
+    context.lineWidth = strokeWidth;
     context.setLineDash([]);
     strokeLine(0);
     strokeLine(inset);
@@ -21899,6 +22124,43 @@ function mergeResolvedCellStyle(base, overlay, options) {
   }
   return nextStyle;
 }
+function resolveCellTableOverrides(rawStyle, sheet, row, col) {
+  const styleId = sheet?.cellStyleIds?.[cellAddressToA12({ row, col })] ?? sheet?.rowStyleIds[row] ?? sheet?.colStyleIds[col];
+  const declared = styleId === void 0 ? void 0 : sheet?.styleById[styleId]?.tableStyleOverrides;
+  const overrides = {};
+  const font = asRecord(rawStyle?.font);
+  if (font) {
+    const explicitFont = {};
+    const fontDefaults = {
+      name: "Calibri",
+      size: 11,
+      bold: false,
+      italic: false,
+      underline: "none",
+      strikethrough: false,
+      verticalAlign: "baseline"
+    };
+    for (const [key, value] of Object.entries(font)) {
+      const isExplicit = declared ? Object.hasOwn(declared.font ?? {}, key) : key === "color" ? asRecord(value)?.colorType !== "auto" : value !== fontDefaults[key];
+      if (isExplicit) {
+        explicitFont[key] = value;
+      }
+    }
+    overrides.font = explicitFont;
+  }
+  const fill = asRecord(rawStyle?.fill);
+  if (fill && fill.fillType !== "none") {
+    overrides.fill = fill;
+  }
+  const border = asRecord(rawStyle?.border);
+  if (border) {
+    overrides.border = Object.fromEntries(Object.entries(border).filter(([, edge]) => {
+      const style = asRecord(edge)?.style;
+      return typeof style === "string" && style !== "none";
+    }));
+  }
+  return overrides;
+}
 function resolveBorderEdgePriority(edge) {
   const style = typeof edge?.style === "string" ? edge.style : "none";
   const stylePriority = {
@@ -22027,7 +22289,7 @@ function resolveTableCellStyle(table, row, col, activeSheet) {
     return null;
   }
   const headerRowCount = Math.max(table.headerRowCount, 1);
-  const totalsRowCount = table.totalsRowShown ? Math.max(table.totalsRowCount, 1) : 0;
+  const totalsRowCount = table.totalsRowCount;
   const headerEndRow = table.start.row + headerRowCount - 1;
   const totalsStartRow = table.end.row - totalsRowCount + 1;
   const bodyStartRow = headerEndRow + 1;
@@ -24098,6 +24360,7 @@ function XlsxGrid({
   errorState,
   fileTooLargeState,
   getCellStyle,
+  highlightClassName,
   loadingComponent,
   loadingState,
   onFormControlAction,
@@ -24142,6 +24405,7 @@ function XlsxGrid({
     getClipboardData,
     getCellDisplayValue: getControllerCellDisplayValue,
     getFormControlItems,
+    highlightedRanges,
     images,
     shapes,
     isLoadDeferred,
@@ -24188,6 +24452,7 @@ function XlsxGrid({
   ), [formControls, getFormControlItems]);
   const canResizeHeaders = !readOnly || allowResizeInReadOnly;
   const scrollRef = React4.useRef(null);
+  const scrolledHighlightRef = React4.useRef(null);
   const wrapperRef = React4.useRef(null);
   const tableRef = React4.useRef(null);
   const gridKeyboardActiveRef = React4.useRef(false);
@@ -24376,6 +24641,10 @@ function XlsxGrid({
   const resolveMergeAnchorCell = React4.useCallback((cell) => {
     return mergedSecondaryAnchorMap.get(`${cell.row}:${cell.col}`) ?? cell;
   }, [mergedSecondaryAnchorMap]);
+  const highlightedCellRanges = React4.useMemo(
+    () => highlightedRanges.flatMap((highlight, index) => activeSheet?.workbookSheetIndex === highlight.workbookSheetIndex ? [{ highlight, index, range: expandHighlightedRange(highlight.range, activeSheet?.mergedRanges ?? mergedRegions) }] : []),
+    [activeSheet?.mergedRanges, activeSheet?.workbookSheetIndex, highlightedRanges, mergedRegions]
+  );
   const normalizedSelection = React4.useMemo(() => selection ? normalizeRange2(selection) : null, [selection]);
   const zoomFactor = React4.useMemo(() => Math.max(0.1, zoomScale / 100), [zoomScale]);
   const previousZoomFactorRef = React4.useRef(zoomFactor);
@@ -24415,7 +24684,7 @@ function XlsxGrid({
       frozenPaneRight: liveFrozenPaneRight
     } = canvasLayoutMetricsRef.current;
     const currentLiveGestureZoom = liveGestureZoomRef.current;
-    const isLiveZooming2 = currentLiveGestureZoom !== null && zoomScale === currentLiveGestureZoom.baseZoomScale;
+    const isLiveZooming2 = experimentalCanvas && currentLiveGestureZoom !== null && zoomScale === currentLiveGestureZoom.baseZoomScale;
     const liveZoomScale2 = isLiveZooming2 ? Math.max(0.1, currentLiveGestureZoom.targetZoomScale / currentLiveGestureZoom.baseZoomScale) : 1;
     const scrollDeltaX = paintedViewport.left - nextLiveViewport.left;
     const scrollDeltaY = paintedViewport.top - nextLiveViewport.top;
@@ -25386,7 +25655,7 @@ function XlsxGrid({
   }, [shouldUseDomVirtualizer, syncDrawingViewport, zoomFactor]);
   React4.useLayoutEffect(() => {
     syncDrawingViewport(scrollRef.current, { immediate: true });
-  }, [activeSheet, activeTabIndex, displayColLimit, displayRowLimit, syncDrawingViewport, zoomFactor]);
+  }, [activeSheet, activeTabIndex, displayColLimit, displayRowLimit, highlightedCellRanges, syncDrawingViewport, zoomFactor]);
   React4.useLayoutEffect(() => {
     const scroller = scrollRef.current;
     if (!scroller) {
@@ -26344,7 +26613,10 @@ function XlsxGrid({
       });
       const targetTable = getTableAtCell(effectiveTables, targetRow, targetCol);
       const targetTableStyle = resolveTableCellStyle(targetTable, targetRow, targetCol, activeSheet);
-      const resolvedStyle = mergeResolvedCellStyle(targetRawStyle, targetTableStyle);
+      const resolvedStyle = targetTableStyle ? mergeResolvedCellStyle(
+        mergeResolvedCellStyle(targetRawStyle, targetTableStyle),
+        resolveCellTableOverrides(targetRawStyle, activeSheet, targetRow, targetCol)
+      ) : targetRawStyle;
       cellBaseRawStyleCacheRef.current.set(targetCacheKey, resolvedStyle);
       return resolvedStyle;
     };
@@ -26530,11 +26802,11 @@ function XlsxGrid({
           if (textWidth > availableTextWidth) {
             const baseFontSizePx = resolveCanvasFontSizePx(nextData.style, 12 * zoomFactor);
             const minimumFontSizePx = Math.max(6 * zoomFactor, baseFontSizePx * 0.4);
-            let lowerBound = minimumFontSizePx;
+            let lowerBound2 = minimumFontSizePx;
             let upperBound = baseFontSizePx;
             let bestFontSizePx = minimumFontSizePx;
-            while (upperBound - lowerBound > 0.25) {
-              const candidateFontSizePx = (lowerBound + upperBound) / 2;
+            while (upperBound - lowerBound2 > 0.25) {
+              const candidateFontSizePx = (lowerBound2 + upperBound) / 2;
               const candidateStyle = {
                 ...nextData.style,
                 font: void 0,
@@ -26543,7 +26815,7 @@ function XlsxGrid({
               const candidateWidth = measureTextWidth(nextData.value, candidateStyle);
               if (candidateWidth <= availableTextWidth) {
                 bestFontSizePx = candidateFontSizePx;
-                lowerBound = candidateFontSizePx;
+                lowerBound2 = candidateFontSizePx;
               } else {
                 upperBound = candidateFontSizePx;
               }
@@ -26594,6 +26866,51 @@ function XlsxGrid({
     };
   }, [colIndexByActual, colPrefixSums, displayHeaderHeight, displayRowHeaderWidth, displayedSelection, rowIndexByActual, rowPrefixSums]);
   const resolvedSelectionOverlay = selectionOverlay;
+  const rangeHighlightRects = React4.useMemo(() => highlightedCellRanges.map(({ highlight, index, range }) => {
+    const rows = getHighlightAxisExtent(visibleRows, rowPrefixSums, range.start.row, range.end.row);
+    const cols = getHighlightAxisExtent(visibleCols, colPrefixSums, range.start.col, range.end.col);
+    return {
+      highlight,
+      index,
+      range,
+      rect: rows && cols ? {
+        height: rows.end - rows.start,
+        left: displayRowHeaderWidth + cols.start,
+        top: displayHeaderHeight + rows.start,
+        width: cols.end - cols.start
+      } : null
+    };
+  }), [colPrefixSums, displayHeaderHeight, displayRowHeaderWidth, highlightedCellRanges, rowPrefixSums, visibleCols, visibleRows]);
+  React4.useEffect(() => {
+    let requiredRows = 0;
+    let requiredCols = 0;
+    for (const { highlight, range } of highlightedCellRanges) {
+      if (highlight.kind !== "columns") {
+        requiredRows = Math.max(requiredRows, Math.min(XLSX_MAX_ROWS, range.end.row + OPEN_GRID_ROW_PADDING + 1));
+      }
+      if (highlight.kind !== "rows") {
+        requiredCols = Math.max(requiredCols, Math.min(XLSX_MAX_COLUMNS, range.end.col + OPEN_GRID_COL_PADDING + 1));
+      }
+    }
+    setDisplayRowLimit((current) => Math.max(current, requiredRows));
+    setDisplayColLimit((current) => Math.max(current, requiredCols));
+  }, [activeSheet?.maxUsedCol, activeSheet?.maxUsedRow, highlightedCellRanges, activeSheetIndex, isWorkerBacked]);
+  React4.useEffect(() => {
+    const scroller = scrollRef.current;
+    const target = rangeHighlightRects.find(({ highlight: highlight2 }) => highlight2.autoScroll);
+    if (!scroller || !target?.rect || scrolledHighlightRef.current === target.highlight || isLoading || scroller.clientWidth === 0 || scroller.clientHeight === 0 || target.highlight.kind !== "columns" && displayRowLimit <= target.range.end.row || target.highlight.kind !== "rows" && displayColLimit <= target.range.end.col) {
+      return;
+    }
+    const { highlight, rect } = target;
+    if (highlight.kind !== "columns") {
+      scroller.scrollTop = getHighlightScrollOffset(rect.top, rect.top + rect.height, frozenPaneBottom, scroller.clientHeight, scroller.scrollTop);
+    }
+    if (highlight.kind !== "rows") {
+      scroller.scrollLeft = getHighlightScrollOffset(rect.left, rect.left + rect.width, frozenPaneRight, scroller.clientWidth, scroller.scrollLeft);
+    }
+    scrolledHighlightRef.current = highlight;
+    syncDrawingViewport(scroller, { immediate: true });
+  }, [displayColLimit, displayRowLimit, drawingViewport.height, drawingViewport.width, frozenPaneBottom, frozenPaneRight, isLoading, rangeHighlightRects, syncDrawingViewport]);
   const { fill: selectionFill, header: selectionHeaderSurface, stroke: selectionStroke } = React4.useMemo(() => resolveSelectionColors({
     palette,
     selectionColor,
@@ -28670,6 +28987,14 @@ function XlsxGrid({
           hasPendingGridlinePath = false;
         };
         const drawnMergedAnchorKeys = /* @__PURE__ */ new Set();
+        const deferredDoubleBorders = [];
+        const drawCellBorder = (side, rect, border) => {
+          if (border.style === "double") {
+            deferredDoubleBorders.push({ side, rect, border });
+          } else {
+            strokeCanvasBorderSide(paneContext, side, rect, border);
+          }
+        };
         for (const rowItem of paneAxisItems.rows) {
           for (const colItem of paneAxisItems.cols) {
             const cell = { row: rowItem.actualRow, col: colItem.actualCol };
@@ -28816,16 +29141,24 @@ function XlsxGrid({
               flushPendingGridlines();
             }
             if (topBorder && drawRowIndex === 0) {
-              strokeCanvasBorderSide(paneContext, "top", localRect, topBorder);
+              drawCellBorder("top", localRect, topBorder);
             }
             if (resolvedRightBorder) {
-              strokeCanvasBorderSide(paneContext, "right", localRect, resolvedRightBorder);
+              if (resolvedRightBorder.style === "double" && resolvedRightBorder === rightNeighborLeftBorder) {
+                drawCellBorder("left", { ...localRect, left: localRect.left + localRect.width }, resolvedRightBorder);
+              } else {
+                drawCellBorder("right", localRect, resolvedRightBorder);
+              }
             }
             if (resolvedBottomBorder) {
-              strokeCanvasBorderSide(paneContext, "bottom", localRect, resolvedBottomBorder);
+              if (resolvedBottomBorder.style === "double" && resolvedBottomBorder === bottomNeighborTopBorder) {
+                drawCellBorder("top", { ...localRect, top: localRect.top + localRect.height }, resolvedBottomBorder);
+              } else {
+                drawCellBorder("bottom", localRect, resolvedBottomBorder);
+              }
             }
             if (leftBorder && drawColIndex === 0) {
-              strokeCanvasBorderSide(paneContext, "left", localRect, leftBorder);
+              drawCellBorder("left", localRect, leftBorder);
             }
             if (cellData.chartHighlight) {
               const highlightBorder = {
@@ -29098,6 +29431,9 @@ function XlsxGrid({
           }
         }
         flushPendingGridlines();
+        for (const { side, rect, border } of deferredDoubleBorders) {
+          strokeCanvasBorderSide(paneContext, side, rect, border);
+        }
       }
       for (const pane of cellPaneOrder) {
         const paneContext = bodyContexts[pane];
@@ -29609,6 +29945,7 @@ function XlsxGrid({
     backgroundColor: palette.headerSurface,
     borderBottom: "none",
     borderRight: "none",
+    boxSizing: "border-box",
     boxShadow: gutterSeparatorShadow,
     color: palette.headerText,
     fontSize: "11px",
@@ -31300,6 +31637,51 @@ function XlsxGrid({
       width: "100%"
     }
   };
+  const rangeHighlightNodes = rangeHighlightRects.flatMap(({ index, rect }) => rect ? [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: classNames("react-xlsx-range-highlight", highlightClassName),
+        "data-dark": paletteIsDark(palette) ? "true" : void 0,
+        "data-xlsx-range-highlight": index,
+        style: {
+          ...rect,
+          ["--xlsx-highlight-default-border-width"]: `${selectionBorderWidth}px`,
+          boxSizing: "border-box",
+          pointerEvents: "none",
+          position: "absolute",
+          zIndex: maxDrawingOverlayZIndex + 1
+        }
+      },
+      index
+    )
+  ] : []);
+  const drawingOverlayPanes = experimentalCanvas && hasCanvasDomDrawingOverlays || rangeHighlightNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...canvasBodyViewportLayerStyle, zIndex: experimentalCanvas ? 23 : 34 }, children: [
+    { pane: "scroll", style: canvasScrollOverlayPaneStyle, ref: canvasScrollOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -drawingViewport.top - frozenPaneBottom },
+    { pane: "top", style: canvasTopOverlayPaneStyle, ref: canvasTopOverlayContentRef, left: -drawingViewport.left - frozenPaneRight, top: -displayHeaderHeight },
+    { pane: "left", style: canvasLeftOverlayPaneStyle, ref: canvasLeftOverlayContentRef, left: -displayRowHeaderWidth, top: -drawingViewport.top - frozenPaneBottom },
+    { pane: "corner", style: canvasCornerOverlayPaneStyle, ref: canvasCornerOverlayContentRef, left: -displayRowHeaderWidth, top: -displayHeaderHeight }
+  ].map(({ pane, style, ref, left, top }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        height: sheetContentHeight,
+        left: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        transform: `translate(${left}px, ${top}px)`,
+        transformOrigin: "0 0",
+        width: totalWidth
+      },
+      children: [
+        experimentalCanvas ? paneDrawingNodes[pane] : null,
+        rangeHighlightNodes
+      ]
+    }
+  ) }, pane)) }) : null;
   const scrollerContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
@@ -31333,6 +31715,7 @@ function XlsxGrid({
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: cornerOverlayStyle, children: paneDrawingNodes.corner }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: scrollOverlayStyle, children: paneDrawingNodes.scroll })
             ] }) : null,
+            drawingOverlayPanes,
             experimentalCanvas ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasBodyViewportLayerStyle, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -31374,77 +31757,7 @@ function XlsxGrid({
                     onPointerDown: handleCanvasBodyPointerDown,
                     style: canvasCornerBodyStyle
                   }
-                ),
-                hasCanvasDomDrawingOverlays ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasScrollOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasScrollOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.scroll
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasTopOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasTopOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-drawingViewport.left - frozenPaneRight}px, ${-displayHeaderHeight}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.top
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasLeftOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasLeftOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-displayRowHeaderWidth}px, ${-drawingViewport.top - frozenPaneBottom}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.left
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: canvasCornerOverlayPaneStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "div",
-                    {
-                      ref: canvasCornerOverlayContentRef,
-                      style: {
-                        height: sheetContentHeight,
-                        left: 0,
-                        pointerEvents: "none",
-                        position: "absolute",
-                        top: 0,
-                        transform: `translate(${-displayRowHeaderWidth}px, ${-displayHeaderHeight}px)`,
-                        transformOrigin: "0 0",
-                        width: totalWidth
-                      },
-                      children: paneDrawingNodes.corner
-                    }
-                  ) })
-                ] }) : null
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: canvasHeaderViewportLayerStyle, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -31890,6 +32203,7 @@ function XlsxGrid({
 }
 function XlsxViewerInner({
   allowResizeInReadOnly = false,
+  autoScrollToHighlightedRanges = true,
   className,
   controller,
   emptyState,
@@ -31902,6 +32216,8 @@ function XlsxViewerInner({
   headerBackgroundColor,
   headerTextColor,
   height,
+  highlightClassName,
+  highlightedRanges,
   isDark = false,
   loadingComponent,
   loadingState,
@@ -31924,6 +32240,26 @@ function XlsxViewerInner({
 }) {
   const palette = useViewerPalette(isDark, headerBackgroundColor, headerTextColor);
   const { displayFileName, error } = controller;
+  const appliedHighlightRef = React4.useRef(null);
+  const { clearHighlightedRanges, file, highlightRanges, isLoading, sheets, src } = controller;
+  React4.useEffect(() => {
+    if (isLoading || highlightedRanges === void 0) {
+      appliedHighlightRef.current = null;
+      return;
+    }
+    if (highlightedRanges !== null && sheets.length === 0) {
+      return;
+    }
+    const referenceKey = JSON.stringify(typeof highlightedRanges === "string" ? [highlightedRanges] : highlightedRanges ?? []);
+    const previous = appliedHighlightRef.current;
+    if (previous && previous.referenceKey === referenceKey && previous.autoScroll === autoScrollToHighlightedRanges && previous.file === file && previous.src === src && previous.clear === clearHighlightedRanges) {
+      return;
+    }
+    appliedHighlightRef.current = { autoScroll: autoScrollToHighlightedRanges, clear: clearHighlightedRanges, file, referenceKey, src };
+    if (highlightedRanges === null || !highlightRanges(highlightedRanges, { autoScroll: autoScrollToHighlightedRanges })) {
+      clearHighlightedRanges();
+    }
+  }, [autoScrollToHighlightedRanges, clearHighlightedRanges, file, highlightRanges, highlightedRanges, isLoading, sheets.length, src]);
   const customFileTooLarge = error instanceof XlsxFileSizeLimitExceededError ? renderCustomFileTooLarge(
     fileTooLargeState,
     {
@@ -31956,6 +32292,7 @@ function XlsxViewerInner({
         width: "100%"
       },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: RANGE_HIGHLIGHT_STYLES }),
         resolveToolbar(toolbar, showDefaultToolbar, controller, palette),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flex: 1, minHeight: 0, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           XlsxGrid,
@@ -31969,6 +32306,7 @@ function XlsxViewerInner({
             experimentalCanvas,
             fileTooLargeState,
             getCellStyle,
+            highlightClassName,
             loadingComponent,
             loadingState,
             onFormControlAction,
@@ -33126,6 +33464,7 @@ function DefaultXlsxToolbar() {
   XlsxViewer,
   XlsxViewerProvider,
   initWasm,
+  parseXlsxRange,
   setWasmSource,
   useXlsxViewer,
   useXlsxViewerCharts,