@extend-ai/react-xlsx 0.14.1 → 0.15.1

package/dist/index.cjs

@@ -2006,7 +2006,7 @@ function normalizeChartExLegend(raw) {
     return null;
   }
   const legend = raw;
-  const position = typeof legend.pos === "string" ? normalizeLegendPosition(String(legend.pos)) : void 0;
+  const position = typeof legend.position === "string" ? normalizeLegendPosition(String(legend.position)) : void 0;
   return {
     overlay: typeof legend.overlay === "boolean" ? legend.overlay : void 0,
     position,
@@ -2127,11 +2127,11 @@ function buildChartExHistogramBins(values, rawSeries, sortByFrequency) {
     return [];
   }
   const rawRecord = rawSeries && typeof rawSeries === "object" ? rawSeries : null;
-  const layoutProperties = rawRecord?.layoutPr && typeof rawRecord.layoutPr === "object" ? rawRecord.layoutPr : null;
+  const layoutProperties = rawRecord?.layoutProperties && typeof rawRecord.layoutProperties === "object" ? rawRecord.layoutProperties : null;
   const rawBinning = layoutProperties?.binning && typeof layoutProperties.binning === "object" ? layoutProperties.binning : null;
   const minValue = Math.min(...values);
   const maxValue = Math.max(...values);
-  const explicitWidth = typeof rawBinning?.binWidth === "number" && Number.isFinite(rawBinning.binWidth) && rawBinning.binWidth > 0 ? rawBinning.binWidth : typeof rawBinning?.width === "number" && Number.isFinite(rawBinning.width) && rawBinning.width > 0 ? rawBinning.width : void 0;
+  const explicitWidth = typeof rawBinning?.binSize === "number" && Number.isFinite(rawBinning.binSize) && rawBinning.binSize > 0 ? rawBinning.binSize : void 0;
   const explicitCount = typeof rawBinning?.binCount === "number" && Number.isFinite(rawBinning.binCount) && rawBinning.binCount > 0 ? rawBinning.binCount : typeof rawBinning?.count === "number" && Number.isFinite(rawBinning.count) && rawBinning.count > 0 ? rawBinning.count : void 0;
   const closedRight = rawBinning?.intervalClosed === "r" || rawBinning?.intervalClosed === "right";
   const mean = values.reduce((sum, value) => sum + value, 0) / values.length;
@@ -2184,7 +2184,7 @@ function buildChartExHistogramSeries(series, rawSeries, sortByFrequency) {
   const layout = resolveChartExSeriesLayout(rawSeries);
   const rawRecord = rawSeries && typeof rawSeries === "object" ? rawSeries : null;
   const hasBinning = Boolean(
-    layout === "clusteredColumn" && rawRecord?.layoutPr && typeof rawRecord.layoutPr === "object" && rawRecord.layoutPr.binning != null
+    layout === "clusteredColumn" && rawRecord?.layoutProperties && typeof rawRecord.layoutProperties === "object" && rawRecord.layoutProperties.binning != null
   );
   if (!hasBinning) {
     return series;
@@ -2396,7 +2396,8 @@ function collapseChartExPointSeries(chartType, series) {
   ];
 }
 function normalizeChartExChart(workbook, workbookSheetIndex, visibleSheetIndex, raw, index, themePalette) {
-  const chart = raw && typeof raw === "object" ? raw : {};
+  const drawing = raw && typeof raw === "object" ? raw : {};
+  const chart = drawing.chartEx && typeof drawing.chartEx === "object" ? drawing.chartEx : {};
   const plotArea = chart.plotArea && typeof chart.plotArea === "object" ? chart.plotArea : {};
   const rawSeries = Array.isArray(plotArea.series) ? plotArea.series : [];
   const seriesLayouts = rawSeries.map(resolveChartExSeriesLayout);
@@ -2451,7 +2452,7 @@ function normalizeChartExChart(workbook, workbookSheetIndex, visibleSheetIndex,
     }
   ] : [];
   const normalizedChart = {
-    anchor: normalizeChartAnchor(chart.anchor),
+    anchor: normalizeChartAnchor(drawing.anchor),
     autoTitleDeleted: void 0,
     axes,
     axisLabelColor: void 0,
@@ -2475,7 +2476,7 @@ function normalizeChartExChart(workbook, workbookSheetIndex, visibleSheetIndex,
     id: `chart-ex-${workbookSheetIndex}-${index}`,
     is3d: void 0,
     legend: normalizeChartExLegend(chart.legend),
-    name: chartTitle,
+    name: typeof drawing.name === "string" ? drawing.name : chartTitle,
     overlap: void 0,
     plotVisibleOnly: void 0,
     raw: chart,
@@ -2503,7 +2504,7 @@ function normalizeChartExChart(workbook, workbookSheetIndex, visibleSheetIndex,
     view3d: void 0,
     wireframe: void 0,
     workbookSheetIndex,
-    zIndex: index
+    zIndex: Array.isArray(drawing.drawingPath) && typeof drawing.drawingPath[0] === "number" ? drawing.drawingPath[0] + 1 : index + 1
   };
   applyBuiltinChartDefaults(normalizedChart, themePalette);
   return normalizedChart;
@@ -2624,10 +2625,11 @@ function normalizeChartReference(raw) {
     return null;
   }
   const record = raw;
+  const values = Array.isArray(record.numbers) ? record.numbers : Array.isArray(record.strings) ? record.strings : void 0;
   return {
     formula: typeof record.formula === "string" ? record.formula : void 0,
     refType: typeof record.refType === "string" ? record.refType : void 0,
-    values: Array.isArray(record.values) ? record.values : void 0
+    values
   };
 }
 function normalizeChartAxis(raw) {
@@ -2647,8 +2649,8 @@ function normalizeChartAxis(raw) {
     logBase: typeof axis.logBase === "number" ? axis.logBase : void 0,
     orientation: typeof axis.orientation === "string" ? axis.orientation : void 0,
     majorUnit: typeof axis.majorUnit === "number" ? axis.majorUnit : void 0,
-    max: typeof axis.max === "number" ? axis.max : void 0,
-    min: typeof axis.min === "number" ? axis.min : void 0,
+    max: typeof axis.maximum === "number" ? axis.maximum : void 0,
+    min: typeof axis.minimum === "number" ? axis.minimum : void 0,
     majorGridlines: typeof axis.majorGridlines === "boolean" ? axis.majorGridlines : void 0,
     majorTickMark: typeof axis.majorTickMark === "string" ? axis.majorTickMark : void 0,
     minorUnit: typeof axis.minorUnit === "number" ? axis.minorUnit : void 0,
@@ -2771,11 +2773,11 @@ function normalizeChartDataLabels(raw) {
     pointLabels: pointLabels && pointLabels.length > 0 ? pointLabels : void 0,
     raw: labels,
     showBubbleSize: typeof labels.showBubbleSize === "boolean" ? labels.showBubbleSize : void 0,
-    showCategoryName: typeof labels.showCategoryName === "boolean" ? labels.showCategoryName : void 0,
+    showCategoryName: typeof (labels.showCategoryName ?? labels.visibilityCategoryName) === "boolean" ? Boolean(labels.showCategoryName ?? labels.visibilityCategoryName) : void 0,
     showLegendKey: typeof labels.showLegendKey === "boolean" ? labels.showLegendKey : void 0,
     showPercent: typeof labels.showPercent === "boolean" ? labels.showPercent : void 0,
-    showSeriesName: typeof labels.showSeriesName === "boolean" ? labels.showSeriesName : void 0,
-    showValue: typeof labels.showValue === "boolean" ? labels.showValue : void 0
+    showSeriesName: typeof (labels.showSeriesName ?? labels.visibilitySeriesName) === "boolean" ? Boolean(labels.showSeriesName ?? labels.visibilitySeriesName) : void 0,
+    showValue: typeof (labels.showValue ?? labels.visibilityValue) === "boolean" ? Boolean(labels.showValue ?? labels.visibilityValue) : void 0
   };
 }
 function normalizeChartAnchor(raw) {
@@ -2787,19 +2789,52 @@ function normalizeChartAnchor(raw) {
     };
   }
   const anchor = raw;
-  const fromCol = typeof anchor.fromCol === "number" ? anchor.fromCol : 0;
-  const fromColOffsetEmu = typeof anchor.fromColOffset === "number" ? anchor.fromColOffset : 0;
-  const fromRow = typeof anchor.fromRow === "number" ? anchor.fromRow : 0;
-  const fromRowOffsetEmu = typeof anchor.fromRowOffset === "number" ? anchor.fromRowOffset : 0;
-  const rawToCol = typeof anchor.toCol === "number" ? anchor.toCol : null;
-  const rawToColOffsetEmu = typeof anchor.toColOffset === "number" ? anchor.toColOffset : 0;
-  const rawToRow = typeof anchor.toRow === "number" ? anchor.toRow : null;
-  const rawToRowOffsetEmu = typeof anchor.toRowOffset === "number" ? anchor.toRowOffset : 0;
-  const hasExplicitTo = rawToCol !== null && rawToRow !== null;
-  const collapsedWidth = hasExplicitTo && (rawToCol < fromCol || rawToCol === fromCol && rawToColOffsetEmu <= fromColOffsetEmu);
-  const collapsedHeight = hasExplicitTo && (rawToRow < fromRow || rawToRow === fromRow && rawToRowOffsetEmu <= fromRowOffsetEmu);
-  const fallbackToCol = Math.max(fromCol + 8, 8);
-  const fallbackToRow = Math.max(fromRow + 15, 15);
+  const from = anchor.from && typeof anchor.from === "object" ? anchor.from : null;
+  if (anchor.type === "oneCell") {
+    return {
+      from: {
+        col: typeof from?.col === "number" ? from.col : 0,
+        colOffsetEmu: typeof from?.colOffsetEmu === "number" ? from.colOffsetEmu : 0,
+        row: typeof from?.row === "number" ? from.row : 0,
+        rowOffsetEmu: typeof from?.rowOffsetEmu === "number" ? from.rowOffsetEmu : 0
+      },
+      kind: "one-cell",
+      sizeEmu: {
+        cx: typeof anchor.widthEmu === "number" ? anchor.widthEmu : 0,
+        cy: typeof anchor.heightEmu === "number" ? anchor.heightEmu : 0
+      }
+    };
+  }
+  if (anchor.type === "absolute") {
+    return {
+      kind: "absolute",
+      positionEmu: {
+        x: typeof anchor.xEmu === "number" ? anchor.xEmu : 0,
+        y: typeof anchor.yEmu === "number" ? anchor.yEmu : 0
+      },
+      sizeEmu: {
+        cx: typeof anchor.widthEmu === "number" ? anchor.widthEmu : 0,
+        cy: typeof anchor.heightEmu === "number" ? anchor.heightEmu : 0
+      }
+    };
+  }
+  const to = anchor.to && typeof anchor.to === "object" ? anchor.to : null;
+  const fromColValue = from?.col;
+  const fromColOffsetValue = from?.colOffsetEmu;
+  const fromRowValue = from?.row;
+  const fromRowOffsetValue = from?.rowOffsetEmu;
+  const toColValue = to?.col;
+  const toColOffsetValue = to?.colOffsetEmu;
+  const toRowValue = to?.row;
+  const toRowOffsetValue = to?.rowOffsetEmu;
+  const fromCol = typeof fromColValue === "number" ? fromColValue : 0;
+  const fromColOffsetEmu = typeof fromColOffsetValue === "number" ? fromColOffsetValue : 0;
+  const fromRow = typeof fromRowValue === "number" ? fromRowValue : 0;
+  const fromRowOffsetEmu = typeof fromRowOffsetValue === "number" ? fromRowOffsetValue : 0;
+  const rawToCol = typeof toColValue === "number" ? toColValue : 0;
+  const rawToColOffsetEmu = typeof toColOffsetValue === "number" ? toColOffsetValue : 0;
+  const rawToRow = typeof toRowValue === "number" ? toRowValue : 0;
+  const rawToRowOffsetEmu = typeof toRowOffsetValue === "number" ? toRowOffsetValue : 0;
   return {
     kind: "two-cell",
     from: {
@@ -2809,10 +2844,10 @@ function normalizeChartAnchor(raw) {
       rowOffsetEmu: fromRowOffsetEmu
     },
     to: {
-      col: !hasExplicitTo || collapsedWidth ? fallbackToCol : rawToCol,
-      colOffsetEmu: !hasExplicitTo || collapsedWidth ? 0 : rawToColOffsetEmu,
-      row: !hasExplicitTo || collapsedHeight ? fallbackToRow : rawToRow,
-      rowOffsetEmu: !hasExplicitTo || collapsedHeight ? 0 : rawToRowOffsetEmu
+      col: rawToCol,
+      colOffsetEmu: rawToColOffsetEmu,
+      row: rawToRow,
+      rowOffsetEmu: rawToRowOffsetEmu
     }
   };
 }
@@ -2926,7 +2961,7 @@ function normalizeChartTypeGroup(workbook, workbookSheetIndex, chartId, raw, ind
     chartType: typeof group.chartType === "string" ? group.chartType : "ColumnClustered",
     dataLabels: normalizeChartDataLabels(group.dataLabels),
     gapWidth: typeof group.gapWidth === "number" && Number.isFinite(group.gapWidth) ? group.gapWidth : void 0,
-    is3d: typeof group.is3d === "boolean" ? group.is3d : void 0,
+    is3d: typeof group.is3D === "boolean" ? group.is3D : void 0,
     overlap: typeof group.overlap === "number" && Number.isFinite(group.overlap) ? group.overlap : void 0,
     raw: group,
     series: rawSeries.map((entry, seriesIndex) => normalizeChartSeries(workbook, workbookSheetIndex, `${chartId}-group-${index}`, entry, seriesIndex)),
@@ -3080,20 +3115,25 @@ function applyChartOrigins(chartsByWorkbookSheetIndex, chartOriginsById, archive
   }
 }
 function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkbookSheetIndex, showHiddenSheets = false) {
+  const excludedChartIds = /* @__PURE__ */ new Set();
   const chartsByWorkbookSheetIndex = Array.from({ length: workbook.sheetCount }, (_, workbookSheetIndex) => {
     const worksheet = workbook.getSheet(workbookSheetIndex);
-    const rawCharts = Array.isArray(worksheet.charts) ? worksheet.charts : [];
-    const rawChartsEx = Array.isArray(worksheet.chartsEx) ? worksheet.chartsEx : [];
+    const rawCharts = worksheet.charts;
+    const rawChartsEx = worksheet.chartsEx;
     const visibleSheetIndex = visibleSheetIndexByWorkbookSheetIndex.get(workbookSheetIndex) ?? workbookSheetIndex;
     const classicCharts = rawCharts.map((rawChart, chartIndex) => {
       const chartId = `chart-${workbookSheetIndex}-${chartIndex}`;
-      const chart = rawChart && typeof rawChart === "object" ? rawChart : {};
-      const rawView3d = chart.view3d && typeof chart.view3d === "object" ? chart.view3d : null;
+      if (rawChart.hidden || !rawChart.anchor) {
+        excludedChartIds.add(chartId);
+      }
+      const drawing = rawChart && typeof rawChart === "object" ? rawChart : {};
+      const chart = drawing.chart && typeof drawing.chart === "object" ? drawing.chart : {};
+      const rawView3d = chart.view3D && typeof chart.view3D === "object" ? chart.view3D : null;
       const rawSeries = Array.isArray(chart.series) ? chart.series : [];
       const chartLevelDataLabels = normalizeChartDataLabels(chart.dataLabels);
       const firstSeriesDataLabels = rawSeries.length > 0 && rawSeries[0] && typeof rawSeries[0] === "object" ? normalizeChartDataLabels(rawSeries[0].dataLabels) : null;
       return {
-        anchor: normalizeChartAnchor(chart.anchor),
+        anchor: normalizeChartAnchor(drawing.anchor),
         autoTitleDeleted: typeof chart.autoTitleDeleted === "boolean" ? chart.autoTitleDeleted : void 0,
         axes: Array.isArray(chart.axes) ? chart.axes.map(normalizeChartAxis).filter((value) => Boolean(value)) : [],
         axisLabelColor: void 0,
@@ -3114,12 +3154,12 @@ function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkb
         gapWidth: typeof chart.gapWidth === "number" ? chart.gapWidth : void 0,
         holeSize: typeof chart.holeSize === "number" ? chart.holeSize : void 0,
         id: chartId,
-        is3d: typeof chart.is3d === "boolean" ? chart.is3d : void 0,
+        is3d: typeof chart.is3D === "boolean" ? chart.is3D : void 0,
         legend: normalizeLegend(chart.legend) ? {
           ...normalizeLegend(chart.legend),
           position: normalizeLegendPosition(normalizeLegend(chart.legend)?.position)
         } : null,
-        name: typeof chart.name === "string" ? chart.name : void 0,
+        name: typeof drawing.name === "string" ? drawing.name : void 0,
         overlap: typeof chart.overlap === "number" ? chart.overlap : void 0,
         plotVisibleOnly: typeof chart.plotVisibleOnly === "boolean" ? chart.plotVisibleOnly : void 0,
         raw: chart,
@@ -3153,17 +3193,23 @@ function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkb
         } : void 0,
         wireframe: typeof chart.wireframe === "boolean" ? chart.wireframe : void 0,
         workbookSheetIndex,
-        zIndex: 200 + chartIndex
+        zIndex: Array.isArray(drawing.drawingPath) && typeof drawing.drawingPath[0] === "number" ? drawing.drawingPath[0] + 1 : chartIndex + 1
       };
     });
-    const modernCharts = rawChartsEx.map((rawChartEx, chartExIndex) => normalizeChartExChart(
-      workbook,
-      workbookSheetIndex,
-      visibleSheetIndex,
-      rawChartEx,
-      chartExIndex,
-      imageAssets?.themePalette ?? null
-    ));
+    const modernCharts = rawChartsEx.map((rawChartEx, chartExIndex) => {
+      const chartId = `chart-ex-${workbookSheetIndex}-${chartExIndex}`;
+      if (rawChartEx.hidden || !rawChartEx.anchor) {
+        excludedChartIds.add(chartId);
+      }
+      return normalizeChartExChart(
+        workbook,
+        workbookSheetIndex,
+        visibleSheetIndex,
+        rawChartEx,
+        chartExIndex,
+        imageAssets?.themePalette ?? null
+      );
+    });
     return [...classicCharts, ...modernCharts];
   });
   const chartsheets = Array.isArray(workbook.chartsheets) ? workbook.chartsheets.map((entry, index) => normalizeChartsheet(entry, index)) : [];
@@ -3171,6 +3217,12 @@ function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkb
   const chartOriginsById = /* @__PURE__ */ new Map();
   if (imageAssets) {
     applyChartOrigins(chartsByWorkbookSheetIndex, chartOriginsById, imageAssets.archive, imageAssets.sheetOrigins);
+    for (let index = 0; index < chartsByWorkbookSheetIndex.length; index += 1) {
+      chartsByWorkbookSheetIndex[index] = (chartsByWorkbookSheetIndex[index] ?? []).filter((chart) => !excludedChartIds.has(chart.id));
+    }
+    for (const id of excludedChartIds) {
+      chartOriginsById.delete(id);
+    }
     for (const charts of chartsByWorkbookSheetIndex) {
       for (const chart of charts) {
         applyChartStyleFromXml(chart, chart.chartPath, imageAssets.archive, imageAssets.themePalette);
@@ -3178,6 +3230,9 @@ function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkb
       }
     }
   } else {
+    for (let index = 0; index < chartsByWorkbookSheetIndex.length; index += 1) {
+      chartsByWorkbookSheetIndex[index] = (chartsByWorkbookSheetIndex[index] ?? []).filter((chart) => !excludedChartIds.has(chart.id));
+    }
     for (const charts of chartsByWorkbookSheetIndex) {
       for (const chart of charts) {
         applyBuiltinChartDefaults(chart, null);
@@ -3410,6 +3465,7 @@ function updateWorkbookChartAnchor(imageAssets, chartAssets, chartId, anchor) {
   }
   updateAnchorNode(anchorNode, anchor);
   imageAssets.archive[normalizeArchivePath(origin.drawingPath)] = (0, import_fflate.strToU8)(serializeXml(drawingDocument));
+  imageAssets.dirtyArchivePaths.add(normalizeArchivePath(origin.drawingPath));
   return true;
 }
 function updateWorkbookChartDefinition(imageAssets, chartAssets, chartId, patch) {
@@ -3464,6 +3520,7 @@ function updateWorkbookChartDefinition(imageAssets, chartAssets, chartId, patch)
   );
   updateAxisNode(getLocalChildren(plotAreaNode, "valAx")[0] ?? null, patch.valueAxis);
   imageAssets.archive[normalizeArchivePath(origin.chartPath)] = (0, import_fflate.strToU8)(serializeXml(chartDocument));
+  imageAssets.dirtyArchivePaths.add(normalizeArchivePath(origin.chartPath));
   return true;
 }
 
@@ -3641,7 +3698,6 @@ var PKG_REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
 var SPREADSHEET_NS = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
 var CONTENT_TYPES_NS = "http://schemas.openxmlformats.org/package/2006/content-types";
 var DRAWING_REL_TYPE = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing";
-var VML_DRAWING_REL_TYPE = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/vmlDrawing";
 var IMAGE_REL_TYPE = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image";
 var DRAWING_CONTENT_TYPE = "application/vnd.openxmlformats-officedocument.drawing+xml";
 var EMU_PER_PIXEL2 = 9525;
@@ -5068,71 +5124,174 @@ function parseMarker(node) {
     rowOffsetEmu
   };
 }
-function parseSpreadsheetBooleanValue(value) {
-  if (value === null || value === void 0) {
+function dukeDrawingAnchorToXlsxAnchor(anchor) {
+  if (anchor.type === "absolute") {
+    return {
+      kind: "absolute",
+      positionEmu: { x: anchor.xEmu, y: anchor.yEmu },
+      sizeEmu: { cx: anchor.widthEmu, cy: anchor.heightEmu }
+    };
+  }
+  const from = {
+    col: anchor.from.col,
+    colOffsetEmu: anchor.from.colOffsetEmu ?? 0,
+    row: anchor.from.row,
+    rowOffsetEmu: anchor.from.rowOffsetEmu ?? 0
+  };
+  if (anchor.type === "oneCell") {
+    return {
+      from,
+      kind: "one-cell",
+      sizeEmu: { cx: anchor.widthEmu, cy: anchor.heightEmu }
+    };
+  }
+  return {
+    from,
+    kind: "two-cell",
+    to: {
+      col: anchor.to.col,
+      colOffsetEmu: anchor.to.colOffsetEmu ?? 0,
+      row: anchor.to.row,
+      rowOffsetEmu: anchor.to.rowOffsetEmu ?? 0
+    }
+  };
+}
+function xlsxAnchorToDukeDrawingAnchor(anchor, editAs) {
+  if (anchor.kind === "absolute") {
+    return {
+      heightEmu: anchor.sizeEmu.cy,
+      type: "absolute",
+      widthEmu: anchor.sizeEmu.cx,
+      xEmu: anchor.positionEmu.x,
+      yEmu: anchor.positionEmu.y
+    };
+  }
+  const from = {
+    col: anchor.from.col,
+    colOffsetEmu: anchor.from.colOffsetEmu,
+    row: anchor.from.row,
+    rowOffsetEmu: anchor.from.rowOffsetEmu
+  };
+  if (anchor.kind === "one-cell") {
+    return {
+      from,
+      heightEmu: anchor.sizeEmu.cy,
+      type: "oneCell",
+      widthEmu: anchor.sizeEmu.cx
+    };
+  }
+  return {
+    editAs,
+    from,
+    to: {
+      col: anchor.to.col,
+      colOffsetEmu: anchor.to.colOffsetEmu,
+      row: anchor.to.row,
+      rowOffsetEmu: anchor.to.rowOffsetEmu
+    },
+    type: "twoCell"
+  };
+}
+function mapDukeDrawingColor(color) {
+  if (!color) {
     return void 0;
   }
-  const normalized = value.trim().toLowerCase();
-  if (!normalized) {
-    return true;
+  switch (color.colorType) {
+    case "auto":
+      return { colorType: "auto" };
+    case "rgb":
+      return { b: color.b, colorType: "rgb", g: color.g, r: color.r };
+    case "argb":
+      return { a: color.a, b: color.b, colorType: "argb", g: color.g, r: color.r };
+    case "theme":
+      return { colorType: "theme", themeIndex: color.index, tint: color.tint };
+    case "indexed":
+      return { colorType: "indexed", paletteIndex: color.index };
+  }
+}
+function mapDukeDrawingFont(font) {
+  if (!font) {
+    return void 0;
   }
-  return !["0", "false", "none", "off", "unchecked"].includes(normalized);
+  return {
+    bold: font.bold,
+    charset: font.charset,
+    color: mapDukeDrawingColor(font.color),
+    family: font.family,
+    italic: font.italic,
+    name: font.name,
+    scheme: font.scheme,
+    size: font.size,
+    strikethrough: font.strikethrough,
+    underline: font.underline,
+    verticalAlign: font.verticalAlign
+  };
 }
-function parseSpreadsheetBooleanNode(node) {
-  if (!node) {
+function mapDukeDrawingText(text) {
+  return {
+    horizontalAlignment: text.horizontalAlignment,
+    runs: text.runs.map((run) => ({ font: mapDukeDrawingFont(run.font), text: run.text })),
+    verticalAlignment: text.verticalAlignment
+  };
+}
+function resolveDukeDrawingColor(color, themePalette) {
+  if (!color) {
     return void 0;
   }
-  return parseSpreadsheetBooleanValue(node.getAttribute("val") ?? node.textContent);
+  switch (color.colorType) {
+    case "rgb":
+      return resolveWorkbookColor({ rgb: [color.r, color.g, color.b].map((value) => value.toString(16).padStart(2, "0")).join("") }) ?? void 0;
+    case "argb":
+      return resolveWorkbookColor({ argb: [color.a, color.r, color.g, color.b].map((value) => value.toString(16).padStart(2, "0")).join("") }) ?? void 0;
+    case "theme":
+      return resolveWorkbookColor({ theme: color.index, tint: color.tint }, themePalette) ?? void 0;
+    default:
+      return void 0;
+  }
 }
-function mapDukeFormControlAnchor(anchor) {
+function resolveDukeDrawingText(text, themePalette) {
+  const caption = mapDukeDrawingText(text);
+  const label = normalizeControlLabel(text.runs.map((run) => run.text).join(""));
+  const firstStyledRun = text.runs.find((run) => run.font)?.font;
+  const horizontalAlignment = text.horizontalAlignment;
   return {
-    from: {
-      col: anchor.fromCol,
-      colOffsetEmu: anchor.fromColOffset,
-      row: anchor.fromRow,
-      rowOffsetEmu: anchor.fromRowOffset
-    },
-    kind: "two-cell",
-    to: {
-      col: anchor.toCol,
-      colOffsetEmu: anchor.toColOffset,
-      row: anchor.toRow,
-      rowOffsetEmu: anchor.toRowOffset
-    }
+    caption,
+    fontFamily: firstStyledRun?.name,
+    fontSizePt: firstStyledRun?.size,
+    label,
+    textAlign: horizontalAlignment === "left" || horizontalAlignment === "center" || horizontalAlignment === "right" ? horizontalAlignment : void 0,
+    textColor: resolveDukeDrawingColor(firstStyledRun?.color, themePalette)
   };
 }
-function mapDukeFormControlKind(kind) {
+function mapDukeFormControlKind(kind, themePalette) {
   switch (kind.kind) {
     case "button":
-      return { caption: kind.caption, kind: "button", label: normalizeControlLabel(kind.caption) };
+      return { ...resolveDukeDrawingText(kind.caption, themePalette), kind: "button" };
     case "checkbox":
       return {
-        caption: kind.caption,
+        ...resolveDukeDrawingText(kind.caption, themePalette),
         checked: kind.state === "checked",
         kind: "checkbox",
-        label: normalizeControlLabel(kind.caption),
         linkedCell: kind.cellLink,
         no3D: kind.no3D,
         state: kind.state
       };
     case "optionButton":
       return {
-        caption: kind.caption,
+        ...resolveDukeDrawingText(kind.caption, themePalette),
         checked: kind.state === "checked",
         firstInGroup: kind.firstInGroup,
         kind: "radio",
-        label: normalizeControlLabel(kind.caption),
         linkedCell: kind.cellLink,
         no3D: kind.no3D,
         state: kind.state
       };
     case "label":
-      return { caption: kind.caption, kind: "label", label: normalizeControlLabel(kind.caption) };
+      return { ...resolveDukeDrawingText(kind.caption, themePalette), kind: "label" };
     case "groupBox":
       return {
-        caption: kind.caption,
+        ...resolveDukeDrawingText(kind.caption, themePalette),
         kind: "group-box",
-        label: normalizeControlLabel(kind.caption),
         no3D: kind.no3D
       };
     case "listBox":
@@ -5173,92 +5332,47 @@ function mapDukeFormControlKind(kind) {
         min: kind.min,
         value: kind.value
       };
+    case "unknown":
+      return {
+        ...resolveDukeDrawingText(kind.caption, themePalette),
+        kind: kind.objectType.toLowerCase() === "editbox" ? "editbox" : "unknown",
+        legacyObjectType: kind.legacyObjectType,
+        objectType: kind.objectType,
+        rawObj: kind.rawObj,
+        rawProperties: kind.rawProperties
+      };
   }
 }
-function mapDukeFormControl(control, controlIndex, workbookSheetIndex) {
+function mapDukeFormControl(control, controlIndex, workbookSheetIndex, themePalette) {
   return {
-    anchor: mapDukeFormControlAnchor(control.anchor),
+    altText: control.altText,
+    anchor: dukeDrawingAnchorToXlsxAnchor(control.anchor),
     controlIndex,
-    dukeAnchor: { ...control.anchor },
-    editAs: control.anchor.editAs,
-    hidden: false,
+    editAs: control.anchor.type === "twoCell" ? control.anchor.editAs : void 0,
+    hidden: control.hidden,
     id: `form-control-${workbookSheetIndex}-${controlIndex}`,
     locked: control.locked,
+    macroName: control.formControl.macroName,
     name: control.name,
     printable: control.printable,
+    rawClientData: control.formControl.rawClientData,
     sheetIndex: workbookSheetIndex,
+    title: control.title,
     workbookSheetIndex,
-    zIndex: controlIndex + 1,
-    ...mapDukeFormControlKind(control.kind)
+    zIndex: (control.drawingPath[0] ?? controlIndex) + 1,
+    ...mapDukeFormControlKind(control.formControl.kind, themePalette)
   };
 }
-function collectWorkbookFormControls(workbook) {
+function collectWorkbookFormControls(workbook, themePalette) {
   return Array.from({ length: workbook.sheetCount }, (_, workbookSheetIndex) => {
     try {
       const controls = workbook.getSheet(workbookSheetIndex).formControls;
-      return Array.isArray(controls) ? controls.map((control, controlIndex) => mapDukeFormControl(control, controlIndex, workbookSheetIndex)) : [];
+      return Array.isArray(controls) ? controls.flatMap((control, controlIndex) => control.anchor ? [mapDukeFormControl(control, controlIndex, workbookSheetIndex, themePalette)] : []) : [];
     } catch {
       return [];
     }
   });
 }
-function parseFormControlKind(rawType) {
-  const normalized = (rawType ?? "").trim().toLowerCase();
-  switch (normalized) {
-    case "button":
-      return "button";
-    case "checkbox":
-      return "checkbox";
-    case "drop":
-      return "dropdown";
-    case "editbox":
-      return "editbox";
-    case "gbox":
-      return "group-box";
-    case "label":
-      return "label";
-    case "list":
-      return "listbox";
-    case "radio":
-      return "radio";
-    case "scroll":
-      return "scrollbar";
-    case "spin":
-      return "spinner";
-    default:
-      return "unknown";
-  }
-}
-function parseFormControlShapeId(value) {
-  const match = (value ?? "").match(/(\d+)(?!.*\d)/);
-  if (!match) {
-    return null;
-  }
-  const parsed = Number(match[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-}
-function parseCssDeclarationValue(styleText, property) {
-  if (!styleText) {
-    return null;
-  }
-  const pattern = new RegExp(`${property}\\s*:\\s*([^;]+)`, "i");
-  const match = pattern.exec(styleText);
-  return match?.[1]?.trim() ?? null;
-}
-function parseControlTextAlign(styleText) {
-  const value = parseCssDeclarationValue(styleText, "text-align")?.toLowerCase();
-  if (value === "center" || value === "right") {
-    return value;
-  }
-  return value === "left" ? "left" : void 0;
-}
-function parseVmlFontSizePt(value) {
-  const parsed = Number(value ?? Number.NaN);
-  if (!Number.isFinite(parsed) || parsed <= 0) {
-    return void 0;
-  }
-  return parsed > 40 ? parsed / 20 : parsed;
-}
 function normalizeControlLabel(label) {
   if (!label) {
     return void 0;
@@ -5266,16 +5380,6 @@ function normalizeControlLabel(label) {
   const normalized = label.replace(/\u00a0/g, " ").replace(/\s+/g, " ").trim();
   return normalized.length > 0 ? normalized : void 0;
 }
-function isPlaceholderFormControlName(name) {
-  const normalized = normalizeControlLabel(name)?.toLowerCase();
-  if (!normalized) {
-    return false;
-  }
-  return /^(option button|group box|check box|drop down|dropdown|list box|edit box|scroll bar|spinner|spin button|button)\s+\d+$/.test(normalized);
-}
-function resolveNamedFormControlLabel(name) {
-  return isPlaceholderFormControlName(name) ? void 0 : normalizeControlLabel(name);
-}
 function parseAnchor(anchorNode) {
   if (anchorNode.localName === "anchor") {
     const from = parseMarker(getFirstChild(anchorNode, "from"));
@@ -5956,260 +6060,8 @@ function parseDrawingObjects(archive, contentTypes, drawingPath, objectUrls, wor
     shapes
   };
 }
-function parseSheetFormControlNodes(archive, sheetPath) {
-  const sheetXml = readArchiveText2(archive, sheetPath);
-  if (!sheetXml) {
-    return [];
-  }
-  const sheetDocument = parseXml2(sheetXml);
-  if (!sheetDocument) {
-    return [];
-  }
-  return getLocalElements(sheetDocument, "control").map((controlNode) => ({
-    anchor: parseAnchor(getFirstDescendant(controlNode, "anchor") ?? controlNode),
-    name: controlNode.getAttribute("name") ?? void 0,
-    shapeId: parseFormControlShapeId(controlNode.getAttribute("shapeId"))
-  }));
-}
-function parseVmlFormControls(archive, vmlDrawingPath) {
-  const xml = readArchiveText2(archive, vmlDrawingPath);
-  if (!xml) {
-    return /* @__PURE__ */ new Map();
-  }
-  const document2 = parseXml2(xml);
-  if (!document2) {
-    return /* @__PURE__ */ new Map();
-  }
-  const controls = /* @__PURE__ */ new Map();
-  for (const shapeNode of getLocalElements(document2, "shape")) {
-    const clientDataNode = getFirstChild(shapeNode, "ClientData");
-    if (!clientDataNode) {
-      continue;
-    }
-    const shapeId = parseFormControlShapeId(
-      shapeNode.getAttributeNS("urn:schemas-microsoft-com:office:office", "spid") ?? shapeNode.getAttribute("o:spid") ?? shapeNode.getAttribute("spid") ?? shapeNode.getAttribute("id")
-    );
-    if (shapeId === null) {
-      continue;
-    }
-    const styleText = shapeNode.getAttribute("style");
-    const textboxNode = getFirstChild(shapeNode, "textbox");
-    const fontNode = textboxNode ? getFirstDescendant(textboxNode, "font") : null;
-    const textContainerNode = textboxNode ? getFirstDescendant(textboxNode, "div") : null;
-    const label = normalizeControlLabel(textboxNode?.textContent);
-    const zIndex = Number(parseCssDeclarationValue(styleText, "z-index") ?? Number.NaN);
-    controls.set(shapeId, {
-      checked: parseSpreadsheetBooleanNode(getFirstChild(clientDataNode, "Checked")),
-      fontFamily: fontNode?.getAttribute("face") ?? void 0,
-      fontSizePt: parseVmlFontSizePt(fontNode?.getAttribute("size")),
-      hidden: (parseCssDeclarationValue(styleText, "visibility") ?? "").toLowerCase() === "hidden",
-      label,
-      linkedCell: normalizeControlLabel(getFirstChild(clientDataNode, "FmlaLink")?.textContent),
-      objectType: clientDataNode.getAttribute("ObjectType") ?? void 0,
-      shapeId,
-      textAlign: parseControlTextAlign(textContainerNode?.getAttribute("style")),
-      textColor: fontNode?.getAttribute("color") ?? void 0,
-      zIndex: Number.isFinite(zIndex) ? zIndex : controls.size + 1
-    });
-  }
-  return controls;
-}
-function parseSheetFormControls(archive, sheetPath, sheetRelationships, workbookSheetIndex, zIndexBase) {
-  const controlNodes = parseSheetFormControlNodes(archive, sheetPath);
-  if (controlNodes.length === 0) {
-    return [];
-  }
-  const legacyDrawingRelationship = [...sheetRelationships.values()].find(
-    (relationship) => relationship.type === VML_DRAWING_REL_TYPE
-  );
-  const vmlControlsByShapeId = legacyDrawingRelationship ? parseVmlFormControls(archive, legacyDrawingRelationship.target) : /* @__PURE__ */ new Map();
-  const parsedControls = [];
-  controlNodes.forEach((controlNode, index) => {
-    if (!controlNode.anchor) {
-      return;
-    }
-    const vmlControl = controlNode.shapeId !== null ? vmlControlsByShapeId.get(controlNode.shapeId) ?? null : null;
-    const kind = parseFormControlKind(vmlControl?.objectType);
-    parsedControls.push({
-      anchor: controlNode.anchor,
-      checked: vmlControl?.checked,
-      fontFamily: vmlControl?.fontFamily,
-      fontSizePt: vmlControl?.fontSizePt,
-      hidden: vmlControl?.hidden ?? false,
-      id: `form-control-${workbookSheetIndex}-${index}`,
-      kind,
-      label: vmlControl?.label,
-      linkedCell: vmlControl?.linkedCell,
-      name: controlNode.name,
-      sheetIndex: workbookSheetIndex,
-      textAlign: vmlControl?.textAlign,
-      textColor: vmlControl?.textColor,
-      workbookSheetIndex,
-      zIndex: zIndexBase + (vmlControl?.zIndex ?? index + 1)
-    });
-  });
-  return parsedControls.sort((left, right) => left.zIndex - right.zIndex);
-}
-function flattenShapeText(shape) {
-  const text = shape.paragraphs.flatMap((paragraph) => paragraph.runs.map((run) => run.text)).join(" ");
-  return normalizeControlLabel(text);
-}
-function rectArea(rect) {
-  return Math.max(0, rect.cx) * Math.max(0, rect.cy);
-}
-function rectIntersectionArea(left, right) {
-  const overlapX = Math.max(0, Math.min(left.x + left.cx, right.x + right.cx) - Math.max(left.x, right.x));
-  const overlapY = Math.max(0, Math.min(left.y + left.cy, right.y + right.cy) - Math.max(left.y, right.y));
-  return overlapX * overlapY;
-}
-function rectCenterDistance(left, right) {
-  const leftCenterX = left.x + left.cx / 2;
-  const leftCenterY = left.y + left.cy / 2;
-  const rightCenterX = right.x + right.cx / 2;
-  const rightCenterY = right.y + right.cy / 2;
-  return Math.hypot(leftCenterX - rightCenterX, leftCenterY - rightCenterY);
-}
-function findHiddenShapeControlMatch(control, shapes, sheetState) {
-  const controlRect = anchorToAbsoluteRect(control.anchor, sheetState);
-  const controlArea = Math.max(1, rectArea(controlRect));
-  const placeholderName = isPlaceholderFormControlName(control.name);
-  let bestMatch = null;
-  let bestScore = Number.NEGATIVE_INFINITY;
-  shapes.forEach((shape) => {
-    if (!shape.hidden) {
-      return;
-    }
-    const shapeRect = anchorToAbsoluteRect(shape.anchor, sheetState);
-    const shapeArea = Math.max(1, rectArea(shapeRect));
-    const intersectionArea = rectIntersectionArea(controlRect, shapeRect);
-    const overlapScore = intersectionArea / Math.min(controlArea, shapeArea);
-    const distance = rectCenterDistance(controlRect, shapeRect);
-    const maxDimension = Math.max(controlRect.cx, controlRect.cy, shapeRect.cx, shapeRect.cy, 1);
-    const distanceScore = distance / maxDimension;
-    const textLabel = flattenShapeText(shape);
-    const sameName = normalizeControlLabel(shape.name)?.toLowerCase() === normalizeControlLabel(control.name)?.toLowerCase();
-    let score = overlapScore * 4 - distanceScore;
-    if (sameName) {
-      score += 1;
-    }
-    if (control.kind === "group-box") {
-      score += textLabel ? -3 : 0.5;
-      score += shape.stroke?.none ? -1.5 : 0.75;
-    } else {
-      score += textLabel ? 2 : -1;
-      score += shape.stroke?.none ? 0.2 : -0.5;
-    }
-    if (!placeholderName && textLabel && textLabel === resolveNamedFormControlLabel(control.name)) {
-      score += 0.5;
-    }
-    if (score > bestScore) {
-      bestMatch = shape;
-      bestScore = score;
-    }
-  });
-  return bestScore >= 0.25 ? bestMatch : null;
-}
-function enrichFormControlsWithHiddenShapes(formControls, shapes, sheetState) {
-  return formControls.map((control) => {
-    const matchedShape = findHiddenShapeControlMatch(control, shapes, sheetState);
-    const matchedLabel = matchedShape ? flattenShapeText(matchedShape) : void 0;
-    const fallbackLabel = resolveNamedFormControlLabel(control.name);
-    let resolvedAnchor = control.anchor;
-    if (matchedShape && (control.kind === "group-box" || matchedLabel || isPlaceholderFormControlName(control.name))) {
-      resolvedAnchor = matchedShape.anchor;
-    }
-    return {
-      ...control,
-      anchor: resolvedAnchor,
-      label: control.label ?? matchedLabel ?? fallbackLabel
-    };
-  });
-}
-function getFormControlAnchorStart(anchor) {
-  return anchor.kind === "absolute" ? null : { col: anchor.from.col, row: anchor.from.row };
-}
-function scoreParsedFormControlMatch(dukeControl, parsedControl, parsedIndex) {
-  if (dukeControl.kind !== parsedControl.kind && parsedControl.kind !== "unknown") {
-    return Number.NEGATIVE_INFINITY;
-  }
-  let score = 10;
-  const dukeName = normalizeControlLabel(dukeControl.name)?.toLowerCase();
-  const parsedName = normalizeControlLabel(parsedControl.name)?.toLowerCase();
-  if (dukeName && parsedName) {
-    if (dukeName !== parsedName) {
-      return Number.NEGATIVE_INFINITY;
-    }
-    score += 100;
-  }
-  const dukeStart = getFormControlAnchorStart(dukeControl.anchor);
-  const parsedStart = getFormControlAnchorStart(parsedControl.anchor);
-  if (dukeStart && parsedStart && dukeStart.col === parsedStart.col && dukeStart.row === parsedStart.row) {
-    score += 40;
-  }
-  if (dukeControl.controlIndex === parsedIndex) {
-    score += 5;
-  }
-  return score;
-}
-function areDukeFormControlAnchorsEqual(left, right) {
-  if (!left || !right) {
-    return true;
-  }
-  return left.editAs === right.editAs && left.fromCol === right.fromCol && left.fromColOffset === right.fromColOffset && left.fromRow === right.fromRow && left.fromRowOffset === right.fromRowOffset && left.toCol === right.toCol && left.toColOffset === right.toColOffset && left.toRow === right.toRow && left.toRowOffset === right.toRowOffset;
-}
-function mergeDukeAndParsedFormControls(dukeControls, parsedControls, keepUnmatchedParsedControl = () => true) {
-  const usedParsedIndexes = /* @__PURE__ */ new Set();
-  const mergedControls = dukeControls.map((dukeControl) => {
-    let bestIndex = -1;
-    let bestScore = Number.NEGATIVE_INFINITY;
-    parsedControls.forEach((parsedControl2, parsedIndex) => {
-      if (usedParsedIndexes.has(parsedIndex)) {
-        return;
-      }
-      const score = scoreParsedFormControlMatch(dukeControl, parsedControl2, parsedIndex);
-      if (score > bestScore) {
-        bestIndex = parsedIndex;
-        bestScore = score;
-      }
-    });
-    const parsedControl = bestIndex >= 0 && bestScore >= 10 ? parsedControls[bestIndex] : null;
-    if (!parsedControl) {
-      return dukeControl;
-    }
-    usedParsedIndexes.add(bestIndex);
-    const dukeAnchorChanged = !areDukeFormControlAnchorsEqual(
-      parsedControl.dukeAnchor,
-      dukeControl.dukeAnchor
-    );
-    return {
-      ...parsedControl,
-      ...dukeControl,
-      anchor: dukeAnchorChanged ? dukeControl.anchor : parsedControl.anchor,
-      fontFamily: parsedControl.fontFamily,
-      fontSizePt: parsedControl.fontSizePt,
-      hidden: parsedControl.hidden,
-      id: parsedControl.id,
-      label: dukeControl.label ?? parsedControl.label,
-      name: dukeControl.name ?? parsedControl.name,
-      textAlign: parsedControl.textAlign,
-      textColor: parsedControl.textColor,
-      zIndex: parsedControl.zIndex
-    };
-  });
-  parsedControls.forEach((parsedControl, parsedIndex) => {
-    if (!usedParsedIndexes.has(parsedIndex) && keepUnmatchedParsedControl(parsedControl)) {
-      mergedControls.push(parsedControl);
-    }
-  });
-  return mergedControls.sort((left, right) => left.zIndex - right.zIndex);
-}
-function refreshWorkbookFormControls(workbook, currentControlsByWorkbookSheetIndex) {
-  const dukeControlsByWorkbookSheetIndex = collectWorkbookFormControls(workbook);
-  return dukeControlsByWorkbookSheetIndex.map((dukeControls, workbookSheetIndex) => mergeDukeAndParsedFormControls(
-    dukeControls,
-    currentControlsByWorkbookSheetIndex[workbookSheetIndex] ?? [],
-    (control) => control.controlIndex === void 0
-  ));
+function refreshWorkbookFormControls(workbook, _currentControlsByWorkbookSheetIndex, themePalette) {
+  return collectWorkbookFormControls(workbook, themePalette);
 }
 function revokeWorkbookImageAssets(assets) {
   if (!assets) {
@@ -6243,7 +6095,7 @@ function parseWorkbookStructureAssetsFromArchive(archive, options) {
     workbookSheets
   };
 }
-function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
+function parseWorkbookImageAssets(bytes, workbook) {
   const archive = (0, import_fflate2.unzipSync)(bytes);
   const {
     contentTypes,
@@ -6262,7 +6114,7 @@ function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
   const shapesByWorkbookSheetIndex = [];
   const sheetOrigins = [];
   const imageOriginsById = /* @__PURE__ */ new Map();
-  const dukeFormControlsByWorkbookSheetIndex = Array.isArray(workbookOrFormControls) ? workbookOrFormControls : collectWorkbookFormControls(workbookOrFormControls);
+  const formControls = workbook ? collectWorkbookFormControls(workbook, themePalette) : [];
   workbookSheets.forEach((sheet, workbookSheetIndex) => {
     const sheetRelationships = parseRelationships(archive, relsPathForDocument(sheet.path), sheet.path);
     const attachments = [];
@@ -6295,23 +6147,8 @@ function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
         mediaPaths: drawingImages.mediaPaths
       });
     }
-    const formControlList = parseSheetFormControls(
-      archive,
-      sheet.path,
-      sheetRelationships,
-      workbookSheetIndex,
-      zIndexBase
-    );
     const visibleShapeList = shapeList.filter((shape) => !shape.hidden);
-    const enrichedFormControlList = enrichFormControlsWithHiddenShapes(
-      formControlList,
-      shapeList,
-      sheetStatesByWorkbookSheetIndex[workbookSheetIndex] ?? null
-    );
-    formControlsByWorkbookSheetIndex[workbookSheetIndex] = mergeDukeAndParsedFormControls(
-      dukeFormControlsByWorkbookSheetIndex[workbookSheetIndex] ?? [],
-      enrichedFormControlList
-    );
+    formControlsByWorkbookSheetIndex[workbookSheetIndex] = formControls[workbookSheetIndex] ?? [];
     imagesByWorkbookSheetIndex[workbookSheetIndex] = imageList;
     shapesByWorkbookSheetIndex[workbookSheetIndex] = visibleShapeList;
     sheetOrigins[workbookSheetIndex] = attachments.length > 0 ? {
@@ -6321,6 +6158,7 @@ function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
   });
   return {
     archive,
+    dirtyArchivePaths: /* @__PURE__ */ new Set(),
     formControlsByWorkbookSheetIndex,
     imageOriginsById,
     imagesByWorkbookSheetIndex,
@@ -6383,6 +6221,7 @@ function updateWorkbookImageAnchor(assets, imageId, anchor) {
     }
     updateAnchorNode2(anchorNode, anchor);
     assets.archive[attachment.drawingPath] = (0, import_fflate2.strToU8)(serializeXml2(drawingDocument));
+    assets.dirtyArchivePaths.add(normalizeArchivePath2(attachment.drawingPath));
     const imageList = assets.imagesByWorkbookSheetIndex[origin.workbookSheetIndex] ?? [];
     const imageIndex = imageList.findIndex((image) => image.id === imageId);
     if (imageIndex >= 0) {
@@ -6499,7 +6338,7 @@ function appendSheetDrawingReference(sheetDocument, relationshipId) {
   worksheet.appendChild(drawingNode);
 }
 function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
-  if (!sourceAssets || sheetOrigins.every((origin) => !origin?.attachments.length)) {
+  if (!sourceAssets || sourceAssets.dirtyArchivePaths.size === 0) {
     return cloneBytes(savedBytes);
   }
   try {
@@ -6511,7 +6350,8 @@ function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
       return cloneBytes(savedBytes);
     }
     sheetOrigins.forEach((origin, workbookSheetIndex) => {
-      if (!origin?.attachments.length) {
+      const hasDirtyAttachment = origin?.attachments.some((attachment) => sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(attachment.drawingPath)) || attachment.drawingRelsPath && sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(attachment.drawingRelsPath)) || attachment.mediaPaths.some((path) => sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(path))));
+      if (!origin?.attachments.length || !hasDirtyAttachment) {
         return;
       }
       const currentSheet = workbookSheets[workbookSheetIndex];
@@ -6563,6 +6403,14 @@ function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
       archive[relsPath] = (0, import_fflate2.strToU8)(serializeXml2(relDocument));
       mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, relsPath);
     });
+    for (const dirtyPath of sourceAssets.dirtyArchivePaths) {
+      const bytes = sourceAssets.archive[dirtyPath];
+      if (!bytes) {
+        continue;
+      }
+      archive[dirtyPath] = cloneBytes(bytes);
+      mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, dirtyPath);
+    }
     const hasDrawingOverride = getLocalElements(targetContentTypesDocument, "Override").some(
       (node) => node.getAttribute("ContentType") === DRAWING_CONTENT_TYPE
     );
@@ -6953,6 +6801,204 @@ function cloneArrayBufferForTransfer(buffer) {
   return buffer.slice(0);
 }
 
+// src/zip-entry-names.ts
+var BACKSLASH_BYTE = 92;
+var FORWARD_SLASH_BYTE = 47;
+var END_OF_CENTRAL_DIRECTORY_SIGNATURE = 101010256;
+var CENTRAL_FILE_HEADER_SIGNATURE = 33639248;
+var LOCAL_FILE_HEADER_SIGNATURE = 67324752;
+var END_OF_CENTRAL_DIRECTORY_LENGTH = 22;
+var CENTRAL_FILE_HEADER_LENGTH = 46;
+var LOCAL_FILE_HEADER_LENGTH = 30;
+var MAX_ZIP_COMMENT_LENGTH = 65535;
+var ZIP16_SENTINEL = 65535;
+var ZIP32_SENTINEL = 4294967295;
+function findEndOfCentralDirectoryOffset(view) {
+  const firstPossibleOffset = Math.max(
+    0,
+    view.byteLength - END_OF_CENTRAL_DIRECTORY_LENGTH - MAX_ZIP_COMMENT_LENGTH
+  );
+  for (let offset = view.byteLength - END_OF_CENTRAL_DIRECTORY_LENGTH; offset >= firstPossibleOffset; offset -= 1) {
+    if (view.getUint32(offset, true) !== END_OF_CENTRAL_DIRECTORY_SIGNATURE) {
+      continue;
+    }
+    const commentLength = view.getUint16(offset + 20, true);
+    if (offset + END_OF_CENTRAL_DIRECTORY_LENGTH + commentLength === view.byteLength) {
+      return offset;
+    }
+  }
+  return null;
+}
+function readCentralDirectoryInfo(view) {
+  if (view.byteLength < END_OF_CENTRAL_DIRECTORY_LENGTH) {
+    return null;
+  }
+  const endOfCentralDirectoryOffset = findEndOfCentralDirectoryOffset(view);
+  if (endOfCentralDirectoryOffset === null) {
+    return null;
+  }
+  const diskNumber = view.getUint16(endOfCentralDirectoryOffset + 4, true);
+  const centralDirectoryDiskNumber = view.getUint16(endOfCentralDirectoryOffset + 6, true);
+  const entriesOnDisk = view.getUint16(endOfCentralDirectoryOffset + 8, true);
+  const entryCount = view.getUint16(endOfCentralDirectoryOffset + 10, true);
+  const centralDirectorySize = view.getUint32(endOfCentralDirectoryOffset + 12, true);
+  const centralDirectoryOffset = view.getUint32(endOfCentralDirectoryOffset + 16, true);
+  if (diskNumber !== 0 || centralDirectoryDiskNumber !== 0 || entriesOnDisk !== entryCount || entryCount === ZIP16_SENTINEL || centralDirectorySize === ZIP32_SENTINEL || centralDirectoryOffset === ZIP32_SENTINEL) {
+    return null;
+  }
+  const centralDirectoryEndOffset = centralDirectoryOffset + centralDirectorySize;
+  if (centralDirectoryOffset > endOfCentralDirectoryOffset || centralDirectoryEndOffset > endOfCentralDirectoryOffset || centralDirectoryEndOffset > view.byteLength) {
+    return null;
+  }
+  return {
+    endOffset: centralDirectoryEndOffset,
+    entryCount,
+    offset: centralDirectoryOffset
+  };
+}
+function readCentralDirectoryEntry(view, centralDirectoryEndOffset, offset) {
+  if (offset < 0 || offset + CENTRAL_FILE_HEADER_LENGTH > centralDirectoryEndOffset || offset + CENTRAL_FILE_HEADER_LENGTH > view.byteLength || view.getUint32(offset, true) !== CENTRAL_FILE_HEADER_SIGNATURE) {
+    return null;
+  }
+  const nameLength = view.getUint16(offset + 28, true);
+  const extraLength = view.getUint16(offset + 30, true);
+  const commentLength = view.getUint16(offset + 32, true);
+  const nameStart = offset + CENTRAL_FILE_HEADER_LENGTH;
+  const nameEnd = nameStart + nameLength;
+  const nextOffset = nameEnd + extraLength + commentLength;
+  if (nameEnd > centralDirectoryEndOffset || nextOffset > centralDirectoryEndOffset) {
+    return null;
+  }
+  return {
+    diskNumberStart: view.getUint16(offset + 34, true),
+    localHeaderOffset: view.getUint32(offset + 42, true),
+    nameEnd,
+    nameStart,
+    nextOffset
+  };
+}
+function entryNameUsesBackslash(bytes, entry) {
+  for (let cursor = entry.nameStart; cursor < entry.nameEnd; cursor += 1) {
+    if (bytes[cursor] === BACKSLASH_BYTE) {
+      return true;
+    }
+  }
+  return false;
+}
+function centralDirectoryUsesBackslashSeparators(bytes, view, centralDirectory) {
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry) {
+      return null;
+    }
+    if (entryNameUsesBackslash(bytes, entry)) {
+      return true;
+    }
+    offset = entry.nextOffset;
+  }
+  return false;
+}
+function normalizedEntryNameKey(bytes, entry) {
+  let key = "";
+  for (let cursor = entry.nameStart; cursor < entry.nameEnd; cursor += 1) {
+    const byte = bytes[cursor] === BACKSLASH_BYTE ? FORWARD_SLASH_BYTE : bytes[cursor];
+    key += String.fromCharCode(byte);
+  }
+  return key;
+}
+function validateEntryNamePatches(bytes, view, centralDirectory) {
+  const normalizedNames = /* @__PURE__ */ new Set();
+  const localHeaderOffsets = /* @__PURE__ */ new Set();
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry || entry.diskNumberStart !== 0 || entry.localHeaderOffset === ZIP32_SENTINEL || entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH > centralDirectory.offset || localHeaderOffsets.has(entry.localHeaderOffset)) {
+      return false;
+    }
+    localHeaderOffsets.add(entry.localHeaderOffset);
+    const normalizedName = normalizedEntryNameKey(bytes, entry);
+    if (normalizedNames.has(normalizedName)) {
+      return false;
+    }
+    normalizedNames.add(normalizedName);
+    if (!entryNameUsesBackslash(bytes, entry)) {
+      offset = entry.nextOffset;
+      continue;
+    }
+    if (view.getUint32(entry.localHeaderOffset, true) !== LOCAL_FILE_HEADER_SIGNATURE) {
+      return false;
+    }
+    const localNameLength = view.getUint16(entry.localHeaderOffset + 26, true);
+    const localNameStart = entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH;
+    const localNameEnd = localNameStart + localNameLength;
+    if (localNameLength !== entry.nameEnd - entry.nameStart || localNameEnd > centralDirectory.offset) {
+      return false;
+    }
+    for (let nameIndex = 0; nameIndex < localNameLength; nameIndex += 1) {
+      const centralNameOffset = entry.nameStart + nameIndex;
+      const localNameOffset = localNameStart + nameIndex;
+      if (bytes[centralNameOffset] !== bytes[localNameOffset]) {
+        return false;
+      }
+    }
+    offset = entry.nextOffset;
+  }
+  return true;
+}
+function patchEntryNameSeparators(bytes, view, centralDirectory) {
+  let offset = centralDirectory.offset;
+  for (let index = 0; index < centralDirectory.entryCount; index += 1) {
+    const entry = readCentralDirectoryEntry(view, centralDirectory.endOffset, offset);
+    if (!entry) {
+      return;
+    }
+    if (entryNameUsesBackslash(bytes, entry)) {
+      const localNameStart = entry.localHeaderOffset + LOCAL_FILE_HEADER_LENGTH;
+      for (let nameIndex = 0; nameIndex < entry.nameEnd - entry.nameStart; nameIndex += 1) {
+        const centralNameOffset = entry.nameStart + nameIndex;
+        if (bytes[centralNameOffset] === BACKSLASH_BYTE) {
+          bytes[centralNameOffset] = FORWARD_SLASH_BYTE;
+          bytes[localNameStart + nameIndex] = FORWARD_SLASH_BYTE;
+        }
+      }
+    }
+    offset = entry.nextOffset;
+  }
+}
+function normalizeZipEntryNames(bytes) {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const centralDirectory = readCentralDirectoryInfo(view);
+  if (!centralDirectory || centralDirectoryUsesBackslashSeparators(bytes, view, centralDirectory) !== true) {
+    return bytes;
+  }
+  if (!validateEntryNamePatches(bytes, view, centralDirectory)) {
+    return bytes;
+  }
+  const normalizedBytes = new Uint8Array(bytes.byteLength);
+  normalizedBytes.set(bytes);
+  const normalizedView = new DataView(
+    normalizedBytes.buffer,
+    normalizedBytes.byteOffset,
+    normalizedBytes.byteLength
+  );
+  patchEntryNameSeparators(normalizedBytes, normalizedView, centralDirectory);
+  return normalizedBytes;
+}
+function normalizeWorkbookArrayBuffer(buffer) {
+  const bytes = new Uint8Array(buffer);
+  const normalizedBytes = normalizeZipEntryNames(bytes);
+  if (normalizedBytes === bytes) {
+    return buffer;
+  }
+  if (normalizedBytes.byteOffset === 0 && normalizedBytes.byteLength === normalizedBytes.buffer.byteLength && normalizedBytes.buffer instanceof ArrayBuffer) {
+    return normalizedBytes.buffer;
+  }
+  const normalizedBuffer = new ArrayBuffer(normalizedBytes.byteLength);
+  new Uint8Array(normalizedBuffer).set(normalizedBytes);
+  return normalizedBuffer;
+}
+
 // src/controller.tsx
 var FORMULA_COUNT_THRESHOLD = 1e3;
 var DEFAULT_ROW_HEIGHT = 24;
@@ -6969,8 +7015,6 @@ var DEFAULT_MAX_FILE_SIZE_BYTES = 25 * 1024 * 1024;
 var MAX_INTERACTIVE_WORKSHEET_XML_BYTES = 200 * 1024 * 1024;
 var MAX_INTERACTIVE_SHARED_STRINGS_BYTES = 50 * 1024 * 1024;
 var MAX_INTERACTIVE_TOTAL_XML_BYTES = 256 * 1024 * 1024;
-var EMU_PER_PIXEL3 = 9525;
-var IMAGE_BATCH_ROW_COUNT = 256;
 var DEFAULT_ZOOM_SCALE = 100;
 var MIN_ZOOM_SCALE = 10;
 var MAX_ZOOM_SCALE = 400;
@@ -7425,104 +7469,175 @@ function resolveWorkbookReference(workbook, defaultWorkbookSheetIndex, rawRefere
     return null;
   }
 }
-function formControlInputFromDukeControl(control) {
-  return {
-    anchor: { ...control.anchor },
-    kind: { ...control.kind },
-    locked: control.locked,
-    name: control.name,
-    printable: control.printable
-  };
-}
-function getFormControlCellLink(kind) {
-  return "cellLink" in kind ? kind.cellLink : void 0;
+function parseColorHex(hex) {
+  const normalized = hex?.replace(/^#/, "");
+  return normalized && /^[0-9a-f]{6}$/i.test(normalized) ? [0, 2, 4].map((offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16)) : null;
 }
-function anchorContainsControl(group, control) {
-  const groupAnchor = group.anchor;
-  const controlAnchor = control.anchor;
-  return controlAnchor.fromCol >= groupAnchor.fromCol && controlAnchor.fromCol <= groupAnchor.toCol && controlAnchor.fromRow >= groupAnchor.fromRow && controlAnchor.fromRow <= groupAnchor.toRow;
-}
-function resolveOptionButtonGroupIndexes(controls, targetIndex) {
-  const target = controls[targetIndex];
-  if (!target || target.kind.kind !== "optionButton") {
-    return [];
-  }
-  if (target.kind.cellLink) {
-    const targetCellLink = target.kind.cellLink;
-    return controls.flatMap((control, index) => control.kind.kind === "optionButton" && control.kind.cellLink === targetCellLink ? [index] : []);
-  }
-  const containingGroups = controls.map((control, index) => ({ control, index })).filter(({ control }) => control.kind.kind === "groupBox" && anchorContainsControl(control, target)).sort((left, right) => {
-    const leftArea = (left.control.anchor.toCol - left.control.anchor.fromCol) * (left.control.anchor.toRow - left.control.anchor.fromRow);
-    const rightArea = (right.control.anchor.toCol - right.control.anchor.fromCol) * (right.control.anchor.toRow - right.control.anchor.fromRow);
-    return leftArea - rightArea;
-  });
-  const containingGroup = containingGroups[0]?.control;
-  if (containingGroup) {
-    return controls.flatMap((control, index) => control.kind.kind === "optionButton" && anchorContainsControl(containingGroup, control) ? [index] : []);
-  }
-  const optionIndexes = controls.flatMap((control, index) => control.kind.kind === "optionButton" ? [index] : []);
-  const targetPosition = optionIndexes.indexOf(targetIndex);
-  if (targetPosition < 0) {
-    return [];
+function xlsxColorToDukeColor(color) {
+  if (!color) {
+    return void 0;
   }
-  let startPosition = targetPosition;
-  while (startPosition > 0) {
-    const control = controls[optionIndexes[startPosition] ?? -1];
-    if (control?.kind.kind === "optionButton" && control.kind.firstInGroup) {
-      break;
+  const normalizedHex = color.hex?.replace(/^#/, "");
+  const colorType = color.colorType ?? (normalizedHex?.length === 8 ? "argb" : normalizedHex?.length === 6 ? "rgb" : void 0) ?? (color.r !== void 0 && color.g !== void 0 && color.b !== void 0 ? color.a !== void 0 ? "argb" : "rgb" : void 0) ?? (color.themeIndex !== void 0 ? "theme" : color.paletteIndex !== void 0 ? "indexed" : void 0);
+  switch (colorType) {
+    case "auto":
+      return { colorType: "auto" };
+    case "rgb": {
+      const channels = color.r !== void 0 && color.g !== void 0 && color.b !== void 0 ? [color.r, color.g, color.b] : parseColorHex(color.hex);
+      return channels ? { b: channels[2], colorType: "rgb", g: channels[1], r: channels[0] } : void 0;
     }
-    startPosition -= 1;
-  }
-  let endPosition = targetPosition + 1;
-  while (endPosition < optionIndexes.length) {
-    const control = controls[optionIndexes[endPosition] ?? -1];
-    if (control?.kind.kind === "optionButton" && control.kind.firstInGroup) {
-      break;
+    case "argb": {
+      const normalized = color.hex?.replace(/^#/, "");
+      const channels = normalized && /^[0-9a-f]{8}$/i.test(normalized) ? [0, 2, 4, 6].map((offset) => Number.parseInt(normalized.slice(offset, offset + 2), 16)) : color.a !== void 0 && color.r !== void 0 && color.g !== void 0 && color.b !== void 0 ? [color.a, color.r, color.g, color.b] : null;
+      return channels ? { a: channels[0], b: channels[3], colorType: "argb", g: channels[2], r: channels[1] } : void 0;
     }
-    endPosition += 1;
+    case "theme":
+      return color.themeIndex === void 0 ? void 0 : { colorType: "theme", index: color.themeIndex, tint: color.tint ?? 0 };
+    case "indexed":
+      return color.paletteIndex === void 0 ? void 0 : { colorType: "indexed", index: color.paletteIndex };
   }
-  return optionIndexes.slice(startPosition, endPosition);
 }
-function resolveLinkedCellValue(controls, controlIndex) {
-  const control = controls[controlIndex];
-  if (!control) {
-    return void 0;
+function xlsxFontToDukeFont(font) {
+  return {
+    bold: font.bold,
+    charset: font.charset,
+    color: xlsxColorToDukeColor(font.color),
+    family: font.family,
+    italic: font.italic,
+    name: font.name,
+    scheme: font.scheme,
+    size: font.size,
+    strikethrough: font.strikethrough,
+    underline: font.underline,
+    verticalAlign: font.verticalAlign
+  };
+}
+function xlsxCaptionToDukeText(caption) {
+  if (typeof caption === "string") {
+    return { runs: [{ text: caption }] };
   }
-  switch (control.kind.kind) {
+  return {
+    horizontalAlignment: caption.horizontalAlignment,
+    runs: caption.runs.map((run) => ({
+      font: run.font ? xlsxFontToDukeFont(run.font) : void 0,
+      text: run.text
+    })),
+    verticalAlignment: caption.verticalAlignment
+  };
+}
+function xlsxFormControlKindToDukeKind(kind) {
+  switch (kind.kind) {
+    case "button":
+    case "label":
+      return { caption: xlsxCaptionToDukeText(kind.caption), kind: kind.kind };
     case "checkbox":
-      return control.kind.state === "mixed" ? "#N/A" : control.kind.state === "checked";
-    case "optionButton": {
-      const groupIndexes = resolveOptionButtonGroupIndexes(controls, controlIndex);
-      const checkedIndex = groupIndexes.find((index) => controls[index]?.kind.kind === "optionButton" && controls[index]?.kind.state === "checked");
-      const groupPosition = checkedIndex === void 0 ? -1 : groupIndexes.indexOf(checkedIndex);
-      return groupPosition >= 0 ? groupPosition + 1 : "";
-    }
-    case "dropdown":
-      return control.kind.selected === void 0 ? "" : control.kind.selected + 1;
-    case "listBox":
-      return control.kind.selection === "single" && control.kind.selected.length === 1 ? (control.kind.selected[0] ?? -1) + 1 : "";
-    case "scrollbar":
-    case "spinner":
-      return control.kind.value;
+      return { ...kind, caption: xlsxCaptionToDukeText(kind.caption) };
+    case "optionButton":
+      return { ...kind, caption: xlsxCaptionToDukeText(kind.caption) };
+    case "groupBox":
+      return { ...kind, caption: xlsxCaptionToDukeText(kind.caption) };
+    case "editbox":
+      return {
+        caption: xlsxCaptionToDukeText(kind.caption),
+        kind: "unknown",
+        legacyObjectType: kind.legacyObjectType,
+        objectType: "EditBox",
+        rawObj: kind.rawObj,
+        rawProperties: kind.rawProperties
+      };
+    case "unknown":
+      return {
+        caption: kind.caption ? xlsxCaptionToDukeText(kind.caption) : void 0,
+        kind: "unknown",
+        legacyObjectType: kind.legacyObjectType,
+        objectType: kind.objectType,
+        rawObj: kind.rawObj,
+        rawProperties: kind.rawProperties
+      };
     default:
-      return void 0;
+      return { ...kind };
   }
 }
-function syncFormControlLinkedCell(workbook, workbookSheetIndex, controls, controlIndex) {
-  const control = controls[controlIndex];
-  if (!control) {
-    return;
+function dukeFormControlKindToInput(kind) {
+  if (kind.kind === "optionButton") {
+    return { ...kind, state: kind.state === "checked" ? "checked" : "unchecked" };
   }
-  const cellLink = getFormControlCellLink(control.kind);
-  const value = resolveLinkedCellValue(controls, controlIndex);
-  if (!cellLink || value === void 0) {
-    return;
+  if (kind.kind === "unknown") {
+    return {
+      caption: kind.caption,
+      kind: "unknown",
+      legacyObjectType: kind.legacyObjectType,
+      objectType: kind.objectType,
+      rawObj: kind.rawObj,
+      rawProperties: kind.rawProperties
+    };
   }
-  const target = resolveWorkbookReference(workbook, workbookSheetIndex, cellLink);
-  if (!target || target.range.start.row !== target.range.end.row || target.range.start.col !== target.range.end.col) {
-    return;
+  return { ...kind };
+}
+function formControlInputFromDukeControl(control) {
+  return {
+    altText: control.altText,
+    ...control.anchor ? { anchor: control.anchor } : { transform: control.transform },
+    formControl: {
+      kind: dukeFormControlKindToInput(control.formControl.kind),
+      macroName: control.formControl.macroName,
+      rawClientData: control.formControl.rawClientData
+    },
+    hidden: control.hidden,
+    kind: "formControl",
+    locked: control.locked,
+    name: control.name,
+    printable: control.printable,
+    title: control.title
+  };
+}
+function xlsxFormControlInputToDukeDrawing(input) {
+  return {
+    altText: input.altText,
+    anchor: xlsxAnchorToDukeDrawingAnchor(input.anchor, input.editAs),
+    formControl: {
+      kind: xlsxFormControlKindToDukeKind(input.kind),
+      macroName: input.macroName,
+      rawClientData: input.rawClientData
+    },
+    hidden: input.hidden,
+    kind: "formControl",
+    locked: input.locked,
+    name: input.name,
+    printable: input.printable,
+    title: input.title
+  };
+}
+function reconcileCheckedOptionButtons(worksheet) {
+  const checkedPaths = worksheet.formControls.flatMap((control) => control.formControl.kind.kind === "optionButton" && control.formControl.kind.state === "checked" ? [control.drawingPath] : []);
+  for (const path of checkedPaths) {
+    const current = worksheet.formControls.find((control) => control.drawingPath.length === path.length && control.drawingPath.every((segment, index) => segment === path[index]));
+    if (current?.formControl.kind.kind === "optionButton" && current.formControl.kind.state === "checked") {
+      worksheet.setFormControlCheckState(current.drawingPath, "checked");
+    }
+  }
+}
+function formControlInteractionChanged(current, next) {
+  if (current.kind !== next.kind) {
+    return true;
+  }
+  if ("cellLink" in current && "cellLink" in next && current.cellLink !== next.cellLink) {
+    return true;
+  }
+  switch (current.kind) {
+    case "checkbox":
+    case "optionButton":
+      return next.kind === current.kind && current.state !== next.state;
+    case "dropdown":
+      return next.kind === "dropdown" && current.selected !== next.selected;
+    case "listBox":
+      return next.kind === "listBox" && (current.selection !== next.selection || current.selected.length !== next.selected.length || current.selected.some((value, index) => value !== next.selected[index]));
+    case "scrollbar":
+    case "spinner":
+      return next.kind === current.kind && current.value !== next.value;
+    default:
+      return false;
   }
-  target.worksheet.setCell(cellAddressToA1(target.range.start), value);
 }
 function parseWorksheetFreezePanes(worksheet) {
   const rawFreezePanes = worksheet.freezePanes;
@@ -7856,9 +7971,6 @@ function scheduleLowPriorityTask(task) {
   const timeoutHandle = window.setTimeout(task, 0);
   return () => window.clearTimeout(timeoutHandle);
 }
-function asFiniteNumber(value) {
-  return typeof value === "number" && Number.isFinite(value) ? value : null;
-}
 function inferImageMimeType(source) {
   if (source.startsWith("data:")) {
     const separatorIndex = source.indexOf(";");
@@ -7882,18 +7994,27 @@ function inferImageMimeType(source) {
   return "image/png";
 }
 function inferWorksheetDirectImageMimeType(info) {
-  const format = typeof info.format === "string" ? info.format.trim().toLowerCase() : "";
+  const format = info.format;
   if (format === "gif") {
     return "image/gif";
   }
-  if (format === "jpg" || format === "jpeg") {
+  if (format === "jpeg") {
     return "image/jpeg";
   }
   if (format === "svg") {
     return "image/svg+xml";
   }
-  if (format === "webp") {
-    return "image/webp";
+  if (format === "bmp") {
+    return "image/bmp";
+  }
+  if (format === "tiff") {
+    return "image/tiff";
+  }
+  if (format === "emf") {
+    return "image/emf";
+  }
+  if (format === "wmf") {
+    return "image/wmf";
   }
   if (format === "png") {
     return "image/png";
@@ -7915,323 +8036,108 @@ function createWorksheetDirectImageSource(data, mimeType, objectUrls) {
   objectUrls.push(objectUrl);
   return objectUrl;
 }
-function buildWorksheetDirectImageAnchor(rawAnchor, widthEmu, heightEmu) {
-  const anchor = rawAnchor && typeof rawAnchor === "object" ? rawAnchor : {};
-  const fromCol = asFiniteNumber(anchor.fromCol) ?? 0;
-  const fromRow = asFiniteNumber(anchor.fromRow) ?? 0;
-  const fromColOffset = asFiniteNumber(anchor.fromColOffset) ?? 0;
-  const fromRowOffset = asFiniteNumber(anchor.fromRowOffset) ?? 0;
-  const toCol = asFiniteNumber(anchor.toCol);
-  const toRow = asFiniteNumber(anchor.toRow);
-  const toColOffset = asFiniteNumber(anchor.toColOffset) ?? 0;
-  const toRowOffset = asFiniteNumber(anchor.toRowOffset) ?? 0;
-  if (toCol !== null && toRow !== null) {
-    return {
-      from: {
-        col: Math.max(0, Math.round(fromCol)),
-        colOffsetEmu: Math.max(0, Math.round(fromColOffset)),
-        row: Math.max(0, Math.round(fromRow)),
-        rowOffsetEmu: Math.max(0, Math.round(fromRowOffset))
-      },
-      kind: "two-cell",
-      to: {
-        col: Math.max(0, Math.round(toCol)),
-        colOffsetEmu: Math.max(0, Math.round(toColOffset)),
-        row: Math.max(0, Math.round(toRow)),
-        rowOffsetEmu: Math.max(0, Math.round(toRowOffset))
-      }
-    };
-  }
-  return {
-    from: {
-      col: Math.max(0, Math.round(fromCol)),
-      colOffsetEmu: Math.max(0, Math.round(fromColOffset)),
-      row: Math.max(0, Math.round(fromRow)),
-      rowOffsetEmu: Math.max(0, Math.round(fromRowOffset))
-    },
-    kind: "one-cell",
-    sizeEmu: {
-      cx: Math.max(EMU_PER_PIXEL3, Math.round(widthEmu)),
-      cy: Math.max(EMU_PER_PIXEL3, Math.round(heightEmu))
-    }
-  };
-}
-function normalizeWorksheetDirectShapeParagraphs(rawParagraphs, fallbackText) {
-  const normalizedParagraphs = [];
-  if (Array.isArray(rawParagraphs)) {
-    for (const entry of rawParagraphs) {
-      const paragraph = entry && typeof entry === "object" ? entry : {};
-      const runs = [];
-      if (Array.isArray(paragraph.runs)) {
-        for (const runEntry of paragraph.runs) {
-          const run = runEntry && typeof runEntry === "object" ? runEntry : {};
-          const text2 = typeof run.text === "string" ? run.text : "";
-          if (!text2) {
-            continue;
-          }
-          runs.push({
-            bold: typeof run.bold === "boolean" ? run.bold : void 0,
-            color: typeof run.color === "string" && run.color.trim() ? run.color : void 0,
-            fontFamily: typeof run.fontFamily === "string" && run.fontFamily.trim() ? run.fontFamily : void 0,
-            fontSizePt: asFiniteNumber(run.fontSizePt) ?? void 0,
-            italic: typeof run.italic === "boolean" ? run.italic : void 0,
-            text: text2,
-            underline: typeof run.underline === "boolean" ? run.underline : void 0
-          });
-        }
-      }
-      if (runs.length === 0) {
-        continue;
-      }
-      const align = paragraph.align;
-      normalizedParagraphs.push({
-        align: align === "center" || align === "justify" || align === "left" || align === "right" ? align : void 0,
-        runs
-      });
+function buildWorksheetDirectApiImage(worksheet, workbookSheetIndex, drawing, objectUrls) {
+  const hasSvgCompanion = Boolean(drawing.image.svgMediaPath);
+  let mimeType = inferWorksheetDirectImageMimeType(drawing.image);
+  let data;
+  try {
+    const svgData = drawing.image.format === "svg" || hasSvgCompanion ? worksheet.drawingSvgData(drawing.drawingPath) : void 0;
+    if (svgData) {
+      data = svgData;
+      mimeType = "image/svg+xml";
+    } else {
+      data = worksheet.drawingImageData(drawing.drawingPath);
     }
-  }
-  if (normalizedParagraphs.length > 0) {
-    return normalizedParagraphs;
-  }
-  const text = typeof fallbackText === "string" ? fallbackText : "";
-  return text ? [{ runs: [{ text }] }] : [];
-}
-function buildWorksheetDirectApiShape(workbookSheetIndex, info, zIndex) {
-  const fill = info.fill && typeof info.fill === "object" ? {
-    color: typeof info.fill.color === "string" && info.fill.color.trim() ? info.fill.color : void 0,
-    none: typeof info.fill.none === "boolean" ? info.fill.none : void 0,
-    opacity: asFiniteNumber(info.fill.opacity) ?? void 0
-  } : void 0;
-  const stroke = info.stroke && typeof info.stroke === "object" ? {
-    color: typeof info.stroke.color === "string" && info.stroke.color.trim() ? info.stroke.color : void 0,
-    dash: typeof info.stroke.dash === "string" && info.stroke.dash.trim() ? info.stroke.dash : void 0,
-    headEndType: typeof info.stroke.headEndType === "string" && info.stroke.headEndType.trim() ? info.stroke.headEndType : void 0,
-    none: typeof info.stroke.none === "boolean" ? info.stroke.none : void 0,
-    opacity: asFiniteNumber(info.stroke.opacity) ?? void 0,
-    tailEndType: typeof info.stroke.tailEndType === "string" && info.stroke.tailEndType.trim() ? info.stroke.tailEndType : void 0,
-    widthPx: asFiniteNumber(info.stroke.widthPx) ?? void 0
-  } : void 0;
-  const rawSvgViewBox = info.svgViewBox && typeof info.svgViewBox === "object" ? info.svgViewBox : null;
-  const rawTextBox = info.textBox && typeof info.textBox === "object" ? info.textBox : null;
-  const rawInset = rawTextBox?.insetPx && typeof rawTextBox.insetPx === "object" ? rawTextBox.insetPx : null;
-  return {
-    anchor: buildWorksheetDirectImageAnchor(
-      info.anchor,
-      DEFAULT_COL_WIDTH * EMU_PER_PIXEL3,
-      DEFAULT_ROW_HEIGHT * EMU_PER_PIXEL3
-    ),
-    description: typeof info.description === "string" && info.description.trim() ? info.description : void 0,
-    fill,
-    flipH: typeof info.flipH === "boolean" ? info.flipH : void 0,
-    flipV: typeof info.flipV === "boolean" ? info.flipV : void 0,
-    geometry: typeof info.geometry === "string" && info.geometry.trim() ? info.geometry : "rect",
-    geometryAdjustments: info.geometryAdjustments && typeof info.geometryAdjustments === "object" ? Object.fromEntries(
-      Object.entries(info.geometryAdjustments).map(([key, value]) => [key, asFiniteNumber(value)]).filter((entry) => typeof entry[1] === "number")
-    ) : void 0,
-    hyperlink: typeof info.hyperlink === "string" && info.hyperlink.trim() ? info.hyperlink : void 0,
-    id: `shape-${workbookSheetIndex}-${String(info.id ?? zIndex)}`,
-    name: typeof info.name === "string" && info.name.trim() ? info.name : void 0,
-    paragraphs: normalizeWorksheetDirectShapeParagraphs(info.paragraphs, info.text),
-    rotationDeg: asFiniteNumber(info.rotationDeg) ?? void 0,
-    scaleX: asFiniteNumber(info.scaleX) ?? void 0,
-    scaleY: asFiniteNumber(info.scaleY) ?? void 0,
-    sheetIndex: workbookSheetIndex,
-    svgPath: typeof info.svgPath === "string" && info.svgPath.trim() ? info.svgPath : void 0,
-    svgViewBox: rawSvgViewBox && asFiniteNumber(rawSvgViewBox.width) !== null && asFiniteNumber(rawSvgViewBox.height) !== null ? {
-      height: asFiniteNumber(rawSvgViewBox.height) ?? 0,
-      width: asFiniteNumber(rawSvgViewBox.width) ?? 0
-    } : void 0,
-    stroke,
-    textBox: rawTextBox ? {
-      horizontalAlign: rawTextBox.horizontalAlign === "center" || rawTextBox.horizontalAlign === "left" ? rawTextBox.horizontalAlign : void 0,
-      insetPx: rawInset ? {
-        bottom: asFiniteNumber(rawInset.bottom) ?? 0,
-        left: asFiniteNumber(rawInset.left) ?? 0,
-        right: asFiniteNumber(rawInset.right) ?? 0,
-        top: asFiniteNumber(rawInset.top) ?? 0
-      } : void 0,
-      verticalAlign: rawTextBox.verticalAlign === "bottom" || rawTextBox.verticalAlign === "middle" || rawTextBox.verticalAlign === "top" ? rawTextBox.verticalAlign : void 0
-    } : void 0,
-    workbookSheetIndex,
-    zIndex
-  };
-}
-function buildWorksheetApiImage(workbookSheetIndex, row, col, info, zIndex) {
-  if (typeof info.source !== "string" || !info.source) {
+  } catch {
     return null;
   }
-  const width = Math.max(1, Math.round(asFiniteNumber(info.width) ?? DEFAULT_COL_WIDTH));
-  const height = Math.max(1, Math.round(asFiniteNumber(info.height) ?? DEFAULT_ROW_HEIGHT));
-  const description = typeof info.altText === "string" && info.altText.trim() ? info.altText : void 0;
-  return {
-    anchor: {
-      from: {
-        col,
-        colOffsetEmu: 0,
-        row,
-        rowOffsetEmu: 0
-      },
-      kind: "one-cell",
-      sizeEmu: {
-        cx: width * EMU_PER_PIXEL3,
-        cy: height * EMU_PER_PIXEL3
-      }
-    },
-    description,
-    editable: false,
-    id: `worksheet-image-${workbookSheetIndex}-${row}-${col}-${zIndex}`,
-    mimeType: inferImageMimeType(info.source),
-    sheetIndex: workbookSheetIndex,
-    src: info.source,
-    workbookSheetIndex,
-    zIndex
-  };
-}
-function buildWorksheetDirectApiImage(workbookSheetIndex, info, zIndex, objectUrls) {
-  const mimeType = inferWorksheetDirectImageMimeType(info);
-  const src = createWorksheetDirectImageSource(info.data, mimeType, objectUrls);
+  const src = createWorksheetDirectImageSource(data, mimeType, objectUrls);
   if (!src) {
     return null;
   }
-  const widthEmu = Math.max(EMU_PER_PIXEL3, Math.round(asFiniteNumber(info.widthEmu) ?? DEFAULT_COL_WIDTH * EMU_PER_PIXEL3));
-  const heightEmu = Math.max(EMU_PER_PIXEL3, Math.round(asFiniteNumber(info.heightEmu) ?? DEFAULT_ROW_HEIGHT * EMU_PER_PIXEL3));
+  const zIndex = (drawing.drawingPath[0] ?? 0) + 1;
   return {
-    anchor: buildWorksheetDirectImageAnchor(info.anchor, widthEmu, heightEmu),
+    anchor: dukeDrawingAnchorToXlsxAnchor(drawing.anchor),
+    description: drawing.altText,
     editable: false,
-    id: `worksheet-image-${workbookSheetIndex}-${String(info.id ?? zIndex)}`,
-    mediaPath: typeof info.mediaPath === "string" && info.mediaPath.trim() ? info.mediaPath : void 0,
+    id: `worksheet-image-${workbookSheetIndex}-${drawing.drawingPath.join("-")}`,
+    mediaPath: drawing.image.mediaPath || void 0,
     mimeType,
-    name: typeof info.name === "string" && info.name.trim() ? info.name : void 0,
+    name: drawing.name,
     sheetIndex: workbookSheetIndex,
     src,
     workbookSheetIndex,
     zIndex
   };
 }
-function collectWorksheetBatchImages(workbook) {
-  const imagesByWorkbookSheetIndex = Array.from({ length: workbook.sheetCount }, () => []);
-  for (let workbookSheetIndex = 0; workbookSheetIndex < workbook.sheetCount; workbookSheetIndex += 1) {
-    const worksheet = workbook.getSheet(workbookSheetIndex);
-    if (typeof worksheet.getRowsBatch !== "function") {
-      continue;
-    }
-    const usedRange = worksheet.usedRange();
-    const maxRow = usedRange?.[2] ?? -1;
-    if (maxRow < 0) {
-      continue;
-    }
-    let zIndex = 1;
-    let sheetFailed = false;
-    for (let startRow = 0; startRow <= maxRow; startRow += IMAGE_BATCH_ROW_COUNT) {
-      let rows;
-      try {
-        rows = worksheet.getRowsBatch(startRow, IMAGE_BATCH_ROW_COUNT, { includeImages: true });
-      } catch {
-        sheetFailed = true;
-        break;
-      }
-      if (!Array.isArray(rows)) {
-        continue;
-      }
-      for (const rowEntry of rows) {
-        const row = typeof rowEntry.index === "number" ? rowEntry.index : null;
-        if (row === null || !Array.isArray(rowEntry.cells)) {
-          continue;
-        }
-        for (const cellEntry of rowEntry.cells) {
-          const col = typeof cellEntry.col === "number" ? cellEntry.col : null;
-          if (col === null || !cellEntry.image || typeof cellEntry.image !== "object") {
-            continue;
-          }
-          const image = buildWorksheetApiImage(workbookSheetIndex, row, col, cellEntry.image, zIndex);
-          if (!image) {
-            continue;
-          }
-          imagesByWorkbookSheetIndex[workbookSheetIndex].push(image);
-          zIndex += 1;
-        }
-      }
-    }
-    if (sheetFailed) {
-      imagesByWorkbookSheetIndex[workbookSheetIndex] = [];
-    }
-  }
-  return imagesByWorkbookSheetIndex;
-}
 function collectWorksheetApiImages(workbook, objectUrls) {
   const directImagesByWorkbookSheetIndex = Array.from({ length: workbook.sheetCount }, () => []);
-  let didUseDirectImages = false;
   for (let workbookSheetIndex = 0; workbookSheetIndex < workbook.sheetCount; workbookSheetIndex += 1) {
     const worksheet = workbook.getSheet(workbookSheetIndex);
-    const rawImages = Array.isArray(worksheet.images) ? worksheet.images : [];
+    const rawImages = worksheet.images;
     if (rawImages.length === 0) {
       continue;
     }
-    const nextImages = rawImages.map((info, index) => buildWorksheetDirectApiImage(workbookSheetIndex, info, index + 1, objectUrls)).filter((image) => Boolean(image));
+    const nextImages = rawImages.filter((drawing) => !drawing.hidden && Boolean(drawing.anchor)).map((drawing) => buildWorksheetDirectApiImage(worksheet, workbookSheetIndex, drawing, objectUrls)).filter((image) => Boolean(image));
     if (nextImages.length > 0) {
       directImagesByWorkbookSheetIndex[workbookSheetIndex] = nextImages;
-      didUseDirectImages = true;
     }
   }
-  if (didUseDirectImages) {
-    return directImagesByWorkbookSheetIndex;
-  }
-  return collectWorksheetBatchImages(workbook);
-}
-function collectWorksheetApiShapes(workbook) {
-  return Array.from({ length: workbook.sheetCount }, (_, workbookSheetIndex) => {
-    const worksheet = workbook.getSheet(workbookSheetIndex);
-    const rawShapes = Array.isArray(worksheet.shapes) ? worksheet.shapes : [];
-    return rawShapes.map((shape, index) => buildWorksheetDirectApiShape(workbookSheetIndex, shape, index + 1));
-  });
+  return directImagesByWorkbookSheetIndex;
 }
-function mergeParsedAndApiImages(parsedImages, apiImages) {
-  if (parsedImages.length === 0) {
-    return apiImages;
-  }
-  if (apiImages.length === 0) {
-    return parsedImages;
+function imageAnchorKey(anchor) {
+  if (anchor.kind === "absolute") {
+    return [
+      "absolute",
+      Math.round(anchor.positionEmu.x),
+      Math.round(anchor.positionEmu.y),
+      Math.round(anchor.sizeEmu.cx),
+      Math.round(anchor.sizeEmu.cy)
+    ].join(":");
   }
-  const normalizeTextKey = (value) => value?.trim().toLowerCase() ?? "";
-  const anchorKey = (anchor) => {
-    if (anchor.kind === "absolute") {
-      return [
-        "absolute",
-        Math.round(anchor.positionEmu.x),
-        Math.round(anchor.positionEmu.y),
-        Math.round(anchor.sizeEmu.cx),
-        Math.round(anchor.sizeEmu.cy)
-      ].join(":");
-    }
-    if (anchor.kind === "one-cell") {
-      return [
-        "one",
-        anchor.from.col,
-        anchor.from.row,
-        Math.round(anchor.from.colOffsetEmu),
-        Math.round(anchor.from.rowOffsetEmu),
-        Math.round(anchor.sizeEmu.cx),
-        Math.round(anchor.sizeEmu.cy)
-      ].join(":");
-    }
+  if (anchor.kind === "one-cell") {
     return [
-      "two",
+      "one",
       anchor.from.col,
       anchor.from.row,
       Math.round(anchor.from.colOffsetEmu),
       Math.round(anchor.from.rowOffsetEmu),
-      anchor.to.col,
-      anchor.to.row,
-      Math.round(anchor.to.colOffsetEmu),
-      Math.round(anchor.to.rowOffsetEmu)
+      Math.round(anchor.sizeEmu.cx),
+      Math.round(anchor.sizeEmu.cy)
     ].join(":");
-  };
+  }
+  return [
+    "two",
+    anchor.from.col,
+    anchor.from.row,
+    Math.round(anchor.from.colOffsetEmu),
+    Math.round(anchor.from.rowOffsetEmu),
+    anchor.to.col,
+    anchor.to.row,
+    Math.round(anchor.to.colOffsetEmu),
+    Math.round(anchor.to.rowOffsetEmu)
+  ].join(":");
+}
+function collectHiddenWorksheetImageAnchors(workbook) {
+  return Array.from({ length: workbook.sheetCount }, (_, workbookSheetIndex) => new Set(
+    workbook.getSheet(workbookSheetIndex).images.flatMap((drawing) => drawing.hidden && drawing.anchor ? [imageAnchorKey(dukeDrawingAnchorToXlsxAnchor(drawing.anchor))] : [])
+  ));
+}
+function mergeParsedAndApiImages(parsedImages, apiImages, hiddenAnchorKeys) {
+  const visibleParsedImages = parsedImages.filter((image) => !hiddenAnchorKeys.has(imageAnchorKey(image.anchor)));
+  if (visibleParsedImages.length === 0) {
+    return apiImages;
+  }
+  if (apiImages.length === 0) {
+    return visibleParsedImages;
+  }
+  const normalizeTextKey = (value) => value?.trim().toLowerCase() ?? "";
   const imageKeys = (image) => {
     const keys = [
-      `${normalizeTextKey(image.mediaPath)}|${normalizeTextKey(image.name)}|${anchorKey(image.anchor)}`,
-      `${normalizeTextKey(image.mediaPath)}|${anchorKey(image.anchor)}`,
-      `${normalizeTextKey(image.name)}|${anchorKey(image.anchor)}`,
-      `${anchorKey(image.anchor)}`
+      `${normalizeTextKey(image.mediaPath)}|${normalizeTextKey(image.name)}|${imageAnchorKey(image.anchor)}`,
+      `${normalizeTextKey(image.mediaPath)}|${imageAnchorKey(image.anchor)}`,
+      `${normalizeTextKey(image.name)}|${imageAnchorKey(image.anchor)}`,
+      `${imageAnchorKey(image.anchor)}`
     ];
     return keys.filter((key, index) => key && keys.indexOf(key) === index);
   };
@@ -8261,7 +8167,7 @@ function mergeParsedAndApiImages(parsedImages, apiImages) {
     }
     return null;
   };
-  const merged = parsedImages.map((image) => {
+  const merged = visibleParsedImages.map((image) => {
     const apiImage = takeApiMatch(image);
     if (!apiImage) {
       return image;
@@ -8272,7 +8178,8 @@ function mergeParsedAndApiImages(parsedImages, apiImages) {
       mediaPath: apiImage.mediaPath ?? image.mediaPath,
       mimeType: apiImage.mimeType,
       name: apiImage.name ?? image.name,
-      src: apiImage.src
+      src: apiImage.src,
+      zIndex: apiImage.zIndex
     };
   });
   return merged;
@@ -8290,12 +8197,13 @@ function createBasicWorkbookAssets(workbook) {
   const objectUrls = [];
   return {
     archive: {},
+    dirtyArchivePaths: /* @__PURE__ */ new Set(),
     formControlsByWorkbookSheetIndex: collectWorkbookFormControls(workbook),
     imageOriginsById: /* @__PURE__ */ new Map(),
     imagesByWorkbookSheetIndex: collectWorksheetApiImages(workbook, objectUrls),
     namedCellStyleByName: {},
     objectUrls,
-    shapesByWorkbookSheetIndex: collectWorksheetApiShapes(workbook),
+    shapesByWorkbookSheetIndex: Array.from({ length: workbook.sheetCount }, () => []),
     sheetOrigins: Array.from({ length: workbook.sheetCount }, () => null),
     sheetStatesByWorkbookSheetIndex: Array.from({ length: workbook.sheetCount }, () => null),
     styleById: {},
@@ -8310,12 +8218,17 @@ function loadWorkbookImageAssets(bytes, workbook, skipXmlParsing = false) {
   }
   const parsedAssets = parseWorkbookImageAssets(bytes, workbook);
   const apiImagesByWorkbookSheetIndex = collectWorksheetApiImages(workbook, parsedAssets.objectUrls);
+  const hiddenImageAnchorsByWorkbookSheetIndex = collectHiddenWorksheetImageAnchors(workbook);
   const imagesByWorkbookSheetIndex = Array.from(
     { length: Math.max(workbook.sheetCount, parsedAssets.imagesByWorkbookSheetIndex.length, apiImagesByWorkbookSheetIndex.length) },
     (_, index) => {
       const parsedImages = parsedAssets.imagesByWorkbookSheetIndex[index] ?? [];
       const apiImages = apiImagesByWorkbookSheetIndex[index] ?? [];
-      return mergeParsedAndApiImages(parsedImages, apiImages);
+      return mergeParsedAndApiImages(
+        parsedImages,
+        apiImages,
+        hiddenImageAnchorsByWorkbookSheetIndex[index] ?? /* @__PURE__ */ new Set()
+      );
     }
   );
   return {
@@ -8626,7 +8539,11 @@ function useXlsxViewerController(options) {
   }, [skipXmlParsing]);
   const refreshWorkbookState = React.useCallback((targetWorkbook) => {
     const currentFormControls = imageAssetsRef.current?.formControlsByWorkbookSheetIndex ?? [];
-    const nextFormControls = refreshWorkbookFormControls(targetWorkbook, currentFormControls);
+    const nextFormControls = refreshWorkbookFormControls(
+      targetWorkbook,
+      currentFormControls,
+      imageAssetsRef.current?.themePalette
+    );
     if (imageAssetsRef.current) {
       imageAssetsRef.current.formControlsByWorkbookSheetIndex = nextFormControls;
     }
@@ -8725,6 +8642,7 @@ function useXlsxViewerController(options) {
       if (maxFileSizeBytes > 0 && buffer.byteLength > maxFileSizeBytes) {
         throw new XlsxFileSizeLimitExceededError(buffer.byteLength, maxFileSizeBytes);
       }
+      buffer = normalizeWorkbookArrayBuffer(buffer);
       const preflight = preflightWorkbookBuffer(buffer);
       if (preflight?.tooLarge) {
         throw createWorkbookTooLargeError(preflight);
@@ -8752,24 +8670,19 @@ function useXlsxViewerController(options) {
           if (!effectiveSkipXmlParsing && hasIncompleteWorkerChartSnapshot(snapshot)) {
             throw new Error("Worker chart payload incomplete");
           }
-          const workerImageAssets = effectiveSkipXmlParsing ? null : parseWorkbookImageAssets(
-            new Uint8Array(buffer),
-            snapshot.formControlsByWorkbookSheetIndex
-          );
+          const workerImageAssets = effectiveSkipXmlParsing ? null : parseWorkbookImageAssets(new Uint8Array(buffer));
           if (!isCurrent || abortController.signal.aborted) {
             revokeWorkbookImageAssets(workerImageAssets);
             return;
           }
           setImageAssets(workerImageAssets);
+          setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
           setWorkbook(null);
           setSheets(snapshot.sheets);
           setChartsByWorkbookSheetIndex(snapshot.chartsByWorkbookSheetIndex);
           setChartsheets(snapshot.chartsheets);
           setTabs(snapshot.tabs);
           chartAssetsRef.current = null;
-          if (!workerImageAssets) {
-            setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
-          }
           setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
           setShouldAutoCalculate(false);
           setIsWorkerBacked(true);
@@ -9275,7 +9188,8 @@ function useXlsxViewerController(options) {
       return control2?.items?.slice() ?? [];
     }
     const control = target.worksheet.formControls[controlIndex];
-    const inputRange = control?.kind.kind === "listBox" || control?.kind.kind === "dropdown" ? control.kind.inputRange : void 0;
+    const kind = control?.formControl.kind;
+    const inputRange = kind?.kind === "listBox" || kind?.kind === "dropdown" ? kind.inputRange : void 0;
     if (!inputRange) {
       return [];
     }
@@ -9694,30 +9608,17 @@ function useXlsxViewerController(options) {
       return null;
     }
     recordHistoryBeforeMutation();
-    const controlIndex = target.worksheet.addFormControl(input);
-    const controls = target.worksheet.formControls;
-    const addedControl = controls[controlIndex];
-    if (addedControl?.kind.kind === "optionButton" && addedControl.kind.state === "checked") {
-      const groupIndexes = resolveOptionButtonGroupIndexes(controls, controlIndex);
-      for (const siblingIndex of groupIndexes) {
-        if (siblingIndex === controlIndex) {
-          continue;
-        }
-        const sibling = target.worksheet.formControls[siblingIndex];
-        if (sibling?.kind.kind === "optionButton" && sibling.kind.state !== "unchecked") {
-          target.worksheet.setFormControl(siblingIndex, {
-            ...formControlInputFromDukeControl(sibling),
-            kind: { ...sibling.kind, state: "unchecked" }
-          });
-        }
-      }
+    target.worksheet.addDrawing(xlsxFormControlInputToDukeDrawing(input));
+    const controlIndex = target.worksheet.formControlCount - 1;
+    const addedControl = target.worksheet.formControls[controlIndex];
+    const addedKind = addedControl?.formControl.kind;
+    if (addedControl && (addedKind?.kind === "checkbox" || addedKind?.kind === "optionButton")) {
+      target.worksheet.setFormControlCheckState(addedControl.drawingPath, addedKind.state);
+    } else if (addedKind?.kind === "groupBox") {
+      reconcileCheckedOptionButtons(target.worksheet);
+    } else if (addedKind && "cellLink" in addedKind && addedKind.cellLink) {
+      workbook.syncFormControls();
     }
-    syncFormControlLinkedCell(
-      workbook,
-      target.workbookSheetIndex,
-      target.worksheet.formControls,
-      controlIndex
-    );
     maybeRecalculateWorkbook(workbook);
     refreshWorkbookState(workbook);
     return controlIndex;
@@ -9729,34 +9630,51 @@ function useXlsxViewerController(options) {
       return false;
     }
     recordHistoryBeforeMutation();
+    const currentInput = formControlInputFromDukeControl(currentControl);
+    if (currentInput.kind !== "formControl" || !currentControl.anchor) {
+      return false;
+    }
+    const nextAnchor = patch.anchor ? xlsxAnchorToDukeDrawingAnchor(
+      patch.anchor,
+      patch.editAs ?? (currentControl.anchor.type === "twoCell" ? currentControl.anchor.editAs : void 0)
+    ) : patch.editAs !== void 0 && currentControl.anchor.type === "twoCell" ? { ...currentControl.anchor, editAs: patch.editAs } : currentControl.anchor;
+    let nextKind = patch.kind ? xlsxFormControlKindToDukeKind(patch.kind) : dukeFormControlKindToInput(currentControl.formControl.kind);
+    if (currentControl.formControl.kind.kind === "unknown" && nextKind.kind === "unknown") {
+      nextKind = {
+        ...nextKind,
+        legacyObjectType: nextKind.legacyObjectType ?? currentControl.formControl.kind.legacyObjectType,
+        rawObj: nextKind.rawObj ?? currentControl.formControl.kind.rawObj,
+        rawProperties: nextKind.rawProperties ?? currentControl.formControl.kind.rawProperties
+      };
+    }
     const nextInput = {
-      ...formControlInputFromDukeControl(currentControl),
-      ...patch,
-      anchor: patch.anchor ? { ...patch.anchor } : { ...currentControl.anchor },
-      kind: patch.kind ? { ...patch.kind } : { ...currentControl.kind }
+      altText: "altText" in patch ? patch.altText : currentControl.altText,
+      anchor: nextAnchor,
+      formControl: {
+        ...currentInput.formControl,
+        kind: nextKind,
+        macroName: "macroName" in patch ? patch.macroName : currentControl.formControl.macroName,
+        rawClientData: "rawClientData" in patch ? patch.rawClientData : currentControl.formControl.rawClientData
+      },
+      hidden: "hidden" in patch ? patch.hidden : currentControl.hidden,
+      kind: "formControl",
+      locked: "locked" in patch ? patch.locked : currentControl.locked,
+      name: "name" in patch ? patch.name : currentControl.name,
+      printable: "printable" in patch ? patch.printable : currentControl.printable,
+      title: "title" in patch ? patch.title : currentControl.title
     };
-    if (nextInput.kind.kind === "optionButton" && nextInput.kind.state === "checked") {
-      const groupIndexes = resolveOptionButtonGroupIndexes(target.worksheet.formControls, controlIndex);
-      for (const siblingIndex of groupIndexes) {
-        if (siblingIndex === controlIndex) {
-          continue;
-        }
-        const sibling = target.worksheet.formControls[siblingIndex];
-        if (sibling?.kind.kind === "optionButton" && sibling.kind.state !== "unchecked") {
-          target.worksheet.setFormControl(siblingIndex, {
-            ...formControlInputFromDukeControl(sibling),
-            kind: { ...sibling.kind, state: "unchecked" }
-          });
-        }
-      }
+    target.worksheet.setDrawing(currentControl.drawingPath, nextInput);
+    const updatedControl = target.worksheet.formControls[controlIndex];
+    const updatedKind = updatedControl?.formControl.kind;
+    const interactionChanged = updatedKind ? formControlInteractionChanged(currentControl.formControl.kind, updatedKind) : false;
+    const groupTopologyChanged = patch.anchor !== void 0 || updatedKind !== void 0 && updatedKind.kind !== currentControl.formControl.kind.kind && (updatedKind.kind === "groupBox" || currentControl.formControl.kind.kind === "groupBox");
+    if (interactionChanged && updatedControl && (updatedKind?.kind === "checkbox" || updatedKind?.kind === "optionButton")) {
+      target.worksheet.setFormControlCheckState(updatedControl.drawingPath, updatedKind.state);
+    } else if (groupTopologyChanged) {
+      reconcileCheckedOptionButtons(target.worksheet);
+    } else if (interactionChanged && updatedKind && "cellLink" in updatedKind && updatedKind.cellLink) {
+      workbook.syncFormControls();
     }
-    target.worksheet.setFormControl(controlIndex, nextInput);
-    syncFormControlLinkedCell(
-      workbook,
-      target.workbookSheetIndex,
-      target.worksheet.formControls,
-      controlIndex
-    );
     maybeRecalculateWorkbook(workbook);
     refreshWorkbookState(workbook);
     return true;
@@ -9767,10 +9685,16 @@ function useXlsxViewerController(options) {
       return false;
     }
     recordHistoryBeforeMutation();
-    target.worksheet.removeFormControl(controlIndex);
+    const removedControl = target.worksheet.formControls[controlIndex];
+    const removedKind = removedControl.formControl.kind.kind;
+    target.worksheet.removeDrawing(removedControl.drawingPath);
+    if (removedKind === "groupBox" || removedKind === "optionButton") {
+      reconcileCheckedOptionButtons(target.worksheet);
+      maybeRecalculateWorkbook(workbook);
+    }
     refreshWorkbookState(workbook);
     return true;
-  }, [activeSheetIndex, getFormControlWorksheet, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
+  }, [activeSheetIndex, getFormControlWorksheet, maybeRecalculateWorkbook, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
   const recordCellEditHistory = React.useCallback((cell, before, after) => {
     if (!activeSheet || isApplyingHistoryRef.current) {
       return;
@@ -17948,7 +17872,7 @@ var THUMBNAIL_MAX_COLS = 80;
 var THUMBNAIL_MAX_SOURCE_HEIGHT_PX = 900;
 var THUMBNAIL_MAX_SOURCE_WIDTH_PX = 1440;
 var LIVE_ZOOM_COMMIT_IDLE_MS = 48;
-var WHEEL_ZOOM_SENSITIVITY = 25e-5;
+var WHEEL_ZOOM_SENSITIVITY = 25e-4;
 var WHEEL_LINE_DELTA_PX = 16;
 var CHART_SOURCE_HIGHLIGHT_COLORS = ["#2563eb", "#dc2626", "#7c3aed", "#059669", "#ea580c", "#db2777"];
 var CHART_SOURCE_HIGHLIGHT_COLOR_BY_ROLE = {
@@ -18991,6 +18915,7 @@ function resolveAxisStartOffset(actualIndex, actualIndices, sizes, indexByActual
 function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWidths, options) {
   const headerHeight = options?.headerHeight ?? HEADER_HEIGHT;
   const rowHeaderWidth = options?.rowHeaderWidth ?? ROW_HEADER_WIDTH;
+  const anchorZoomFactor = options?.zoomFactor ?? 1;
   const resolveMarkerLeft = (col, colOffsetEmu) => rowHeaderWidth + resolveAxisStartOffset(
     col,
     visibleCols,
@@ -18998,7 +18923,7 @@ function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWi
     options?.colIndexByActual,
     options?.colPrefixSums,
     options?.actualColPrefixSums
-  ) + emuToPixels(colOffsetEmu);
+  ) + emuToPixels(colOffsetEmu) * anchorZoomFactor;
   const resolveMarkerTop = (row, rowOffsetEmu) => headerHeight + resolveAxisStartOffset(
     row,
     visibleRows,
@@ -19006,21 +18931,21 @@ function resolveAnchoredRect(anchor, visibleRows, visibleCols, rowHeights, colWi
     options?.rowIndexByActual,
     options?.rowPrefixSums,
     options?.actualRowPrefixSums
-  ) + emuToPixels(rowOffsetEmu);
+  ) + emuToPixels(rowOffsetEmu) * anchorZoomFactor;
   if (anchor.kind === "absolute") {
     return {
-      height: Math.max(1, emuToPixels(anchor.sizeEmu.cy)),
-      left: rowHeaderWidth + emuToPixels(anchor.positionEmu.x),
-      top: headerHeight + emuToPixels(anchor.positionEmu.y),
-      width: Math.max(1, emuToPixels(anchor.sizeEmu.cx))
+      height: Math.max(1, emuToPixels(anchor.sizeEmu.cy) * anchorZoomFactor),
+      left: rowHeaderWidth + emuToPixels(anchor.positionEmu.x) * anchorZoomFactor,
+      top: headerHeight + emuToPixels(anchor.positionEmu.y) * anchorZoomFactor,
+      width: Math.max(1, emuToPixels(anchor.sizeEmu.cx) * anchorZoomFactor)
     };
   }
   if (anchor.kind === "one-cell") {
     return {
-      height: Math.max(1, emuToPixels(anchor.sizeEmu.cy)),
+      height: Math.max(1, emuToPixels(anchor.sizeEmu.cy) * anchorZoomFactor),
       left: resolveMarkerLeft(anchor.from.col, anchor.from.colOffsetEmu),
       top: resolveMarkerTop(anchor.from.row, anchor.from.rowOffsetEmu),
-      width: Math.max(1, emuToPixels(anchor.sizeEmu.cx))
+      width: Math.max(1, emuToPixels(anchor.sizeEmu.cx) * anchorZoomFactor)
     };
   }
   const left = resolveMarkerLeft(anchor.from.col, anchor.from.colOffsetEmu);
@@ -22180,7 +22105,6 @@ function buildFormControlKindInput(control) {
       return {
         caption: control.caption ?? control.label ?? "",
         cellLink: control.linkedCell,
-        firstInGroup: control.firstInGroup,
         kind: "optionButton",
         no3D: control.no3D ?? false,
         state: control.state === "checked" ? "checked" : "unchecked"
@@ -23226,6 +23150,7 @@ function XlsxGrid({
   const canvasCornerOverlayContentRef = React4.useRef(null);
   const canvasImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
   const selectionOverlayRef = React4.useRef(null);
+  const canvasSelectionLayerRef = React4.useRef(null);
   const activeValidationOverlayRef = React4.useRef(null);
   const fillHandleRef = React4.useRef(null);
   const tableMenuRef = React4.useRef(null);
@@ -23251,9 +23176,11 @@ function XlsxGrid({
   const liveGestureZoomRef = React4.useRef(null);
   const pendingLiveGestureZoomStateRef = React4.useRef(null);
   const liveGestureZoomFrameRef = React4.useRef(null);
+  const liveGestureZoomTransformFrameRef = React4.useRef(null);
   const pendingZoomAnchorRef = React4.useRef(null);
   const liveZoomCommitTimerRef = React4.useRef(null);
   const pendingLiveZoomCommitRef = React4.useRef(null);
+  const gestureScrollerRectRef = React4.useRef(null);
   const touchPinchStateRef = React4.useRef(null);
   const safariPinchStartZoomRef = React4.useRef(null);
   const canvasTransformStyleCacheRef = React4.useRef(/* @__PURE__ */ new WeakMap());
@@ -23337,7 +23264,10 @@ function XlsxGrid({
   const setInteractionMode = React4.useCallback((mode) => {
     interactionModeRef.current = mode;
   }, []);
-  const worksheet = getActiveWorksheet();
+  const worksheet = React4.useMemo(
+    () => getActiveWorksheet(),
+    [activeSheetIndex, getActiveWorksheet, revision]
+  );
   const mergedRegions = React4.useMemo(() => {
     const regions = [];
     const rawMergedRegions = Array.isArray(worksheet?.mergedRegions) ? worksheet.mergedRegions : [];
@@ -23417,8 +23347,31 @@ function XlsxGrid({
     const liveZoomScale2 = isLiveZooming2 ? Math.max(0.1, currentLiveGestureZoom.targetZoomScale / currentLiveGestureZoom.baseZoomScale) : 1;
     const scrollDeltaX = paintedViewport.left - nextLiveViewport.left;
     const scrollDeltaY = paintedViewport.top - nextLiveViewport.top;
-    const liveZoomTranslateX2 = isLiveZooming2 ? currentLiveGestureZoom.anchor.x * (1 - liveZoomScale2) : 0;
-    const liveZoomTranslateY2 = isLiveZooming2 ? currentLiveGestureZoom.anchor.y * (1 - liveZoomScale2) : 0;
+    const resolveClampedLiveZoomAnchor = (scrollOffset, viewportSize, scrollExtent, gestureAnchor) => {
+      if (!isLiveZooming2 || liveZoomScale2 === 1) {
+        return gestureAnchor;
+      }
+      const targetScrollExtent = Math.max(viewportSize, scrollExtent * liveZoomScale2);
+      const targetScrollOffset = clampValue(
+        (scrollOffset + gestureAnchor) * liveZoomScale2 - gestureAnchor,
+        0,
+        Math.max(0, targetScrollExtent - viewportSize)
+      );
+      return (scrollOffset * liveZoomScale2 - targetScrollOffset) / (1 - liveZoomScale2);
+    };
+    const scroller = scrollRef.current;
+    const liveZoomAnchorX = resolveClampedLiveZoomAnchor(
+      nextLiveViewport.left,
+      nextLiveViewport.width,
+      scroller?.scrollWidth ?? nextLiveViewport.width,
+      currentLiveGestureZoom?.anchor.x ?? 0
+    );
+    const liveZoomAnchorY = resolveClampedLiveZoomAnchor(
+      nextLiveViewport.top,
+      nextLiveViewport.height,
+      scroller?.scrollHeight ?? nextLiveViewport.height,
+      currentLiveGestureZoom?.anchor.y ?? 0
+    );
     const applyElementTransform = (element, transform, willChange, transformOrigin = null) => {
       if (!element) {
         return;
@@ -23439,7 +23392,10 @@ function XlsxGrid({
         willChange
       });
     };
-    const applyCanvasTransform = (canvas, translateX, translateY) => {
+    const resolveLiveTranslation = (baseTranslation, anchor, origin) => baseTranslation * liveZoomScale2 + (anchor - origin) * (1 - liveZoomScale2);
+    const applyCanvasTransform = (canvas, baseTranslateX, baseTranslateY, originX, originY, anchorX, anchorY) => {
+      const translateX = resolveLiveTranslation(baseTranslateX, anchorX, originX);
+      const translateY = resolveLiveTranslation(baseTranslateY, anchorY, originY);
       const shouldTransform = translateX !== 0 || translateY !== 0 || liveZoomScale2 !== 1;
       applyElementTransform(
         canvas,
@@ -23447,85 +23403,169 @@ function XlsxGrid({
         shouldTransform ? "transform" : ""
       );
     };
-    const applyOverlayTransform = (element, translateX, translateY) => {
+    const applyOverlayTransform = (element, baseTranslateX, baseTranslateY, paneLeft, paneTop, anchorX, anchorY) => {
+      const translateX = resolveLiveTranslation(baseTranslateX, anchorX, paneLeft);
+      const translateY = resolveLiveTranslation(baseTranslateY, anchorY, paneTop);
       applyElementTransform(
         element,
-        liveZoomScale2 !== 1 ? `translate3d(${translateX + liveZoomTranslateX2}px, ${translateY + liveZoomTranslateY2}px, 0) scale(${liveZoomScale2})` : `translate3d(${translateX}px, ${translateY}px, 0)`,
+        liveZoomScale2 !== 1 ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${liveZoomScale2})` : `translate3d(${baseTranslateX}px, ${baseTranslateY}px, 0)`,
         "transform",
         "0 0"
       );
     };
+    const liveScrollBodyViewportWidth = Math.max(0, nextLiveViewport.width - liveFrozenPaneRight);
+    const liveScrollBodyViewportHeight = Math.max(0, nextLiveViewport.height - liveFrozenPaneBottom);
+    const liveScrollBodyCanvasLeft = liveFrozenPaneRight - Math.min(CANVAS_SCROLL_BUFFER_PX, liveScrollBodyViewportWidth);
+    const liveScrollBodyCanvasTop = liveFrozenPaneBottom - Math.min(CANVAS_SCROLL_BUFFER_PX, liveScrollBodyViewportHeight);
+    const selectionLayerTranslateX = (nextLiveViewport.left + liveZoomAnchorX) * (1 - liveZoomScale2);
+    const selectionLayerTranslateY = (nextLiveViewport.top + liveZoomAnchorY) * (1 - liveZoomScale2);
+    const shouldTransformSelectionLayer = experimentalCanvas && isLiveZooming2 && liveZoomScale2 !== 1;
+    applyElementTransform(
+      canvasSelectionLayerRef.current,
+      shouldTransformSelectionLayer ? `translate3d(${selectionLayerTranslateX}px, ${selectionLayerTranslateY}px, 0) scale(${liveZoomScale2})` : "",
+      shouldTransformSelectionLayer ? "transform" : "",
+      "0 0"
+    );
     applyCanvasTransform(
       scrollBodyCanvasRef.current,
-      scrollDeltaX + liveZoomTranslateX2,
-      scrollDeltaY + liveZoomTranslateY2
+      scrollDeltaX,
+      scrollDeltaY,
+      liveScrollBodyCanvasLeft,
+      liveScrollBodyCanvasTop,
+      liveZoomAnchorX,
+      liveZoomAnchorY
     );
     applyCanvasTransform(
       topBodyCanvasRef.current,
-      scrollDeltaX + liveZoomTranslateX2,
-      liveZoomTranslateY2
+      scrollDeltaX,
+      0,
+      liveScrollBodyCanvasLeft,
+      liveDisplayHeaderHeight,
+      liveZoomAnchorX,
+      0
     );
     applyCanvasTransform(
       leftBodyCanvasRef.current,
-      liveZoomTranslateX2,
-      scrollDeltaY + liveZoomTranslateY2
+      0,
+      scrollDeltaY,
+      liveDisplayRowHeaderWidth,
+      liveScrollBodyCanvasTop,
+      0,
+      liveZoomAnchorY
     );
     applyCanvasTransform(
       cornerBodyCanvasRef.current,
-      liveZoomTranslateX2,
-      liveZoomTranslateY2
+      0,
+      0,
+      liveDisplayRowHeaderWidth,
+      liveDisplayHeaderHeight,
+      0,
+      0
     );
     applyCanvasTransform(
       topScrollHeaderCanvasRef.current,
-      scrollDeltaX + liveZoomTranslateX2,
-      liveZoomTranslateY2
+      scrollDeltaX,
+      0,
+      liveScrollBodyCanvasLeft,
+      0,
+      liveZoomAnchorX,
+      0
     );
     applyCanvasTransform(
       topFrozenHeaderCanvasRef.current,
-      liveZoomTranslateX2,
-      liveZoomTranslateY2
+      0,
+      0,
+      liveDisplayRowHeaderWidth,
+      0,
+      0,
+      0
     );
     applyCanvasTransform(
       leftScrollHeaderCanvasRef.current,
-      liveZoomTranslateX2,
-      scrollDeltaY + liveZoomTranslateY2
+      0,
+      scrollDeltaY,
+      0,
+      liveScrollBodyCanvasTop,
+      0,
+      liveZoomAnchorY
     );
     applyCanvasTransform(
       leftFrozenHeaderCanvasRef.current,
-      liveZoomTranslateX2,
-      liveZoomTranslateY2
+      0,
+      0,
+      0,
+      liveDisplayHeaderHeight,
+      0,
+      0
     );
     applyCanvasTransform(
       cornerHeaderCanvasRef.current,
-      liveZoomTranslateX2,
-      liveZoomTranslateY2
+      0,
+      0,
+      0,
+      0,
+      0,
+      0
     );
     applyOverlayTransform(
       canvasScrollOverlayContentRef.current,
       -nextLiveViewport.left - liveFrozenPaneRight,
-      -nextLiveViewport.top - liveFrozenPaneBottom
+      -nextLiveViewport.top - liveFrozenPaneBottom,
+      liveFrozenPaneRight,
+      liveFrozenPaneBottom,
+      liveZoomAnchorX,
+      liveZoomAnchorY
     );
     applyOverlayTransform(
       canvasTopOverlayContentRef.current,
       -nextLiveViewport.left - liveFrozenPaneRight,
-      -liveDisplayHeaderHeight
+      -liveDisplayHeaderHeight,
+      liveFrozenPaneRight,
+      liveDisplayHeaderHeight,
+      liveZoomAnchorX,
+      0
     );
     applyOverlayTransform(
       canvasLeftOverlayContentRef.current,
       -liveDisplayRowHeaderWidth,
-      -nextLiveViewport.top - liveFrozenPaneBottom
+      -nextLiveViewport.top - liveFrozenPaneBottom,
+      liveDisplayRowHeaderWidth,
+      liveFrozenPaneBottom,
+      0,
+      liveZoomAnchorY
     );
     applyOverlayTransform(
       canvasCornerOverlayContentRef.current,
       -liveDisplayRowHeaderWidth,
-      -liveDisplayHeaderHeight
+      -liveDisplayHeaderHeight,
+      liveDisplayRowHeaderWidth,
+      liveDisplayHeaderHeight,
+      0,
+      0
     );
-  }, [zoomScale]);
+  }, [experimentalCanvas, zoomScale]);
   const updateLiveGestureZoomState = React4.useCallback((nextState) => {
-    const resolvedState = typeof nextState === "function" ? nextState(liveGestureZoomRef.current) : nextState;
+    const previousState = liveGestureZoomRef.current;
+    const resolvedState = typeof nextState === "function" ? nextState(previousState) : nextState;
     liveGestureZoomRef.current = resolvedState;
+    const shouldApplyTransformImmediately = !experimentalCanvas || previousState === null || resolvedState === null;
+    if (shouldApplyTransformImmediately) {
+      if (liveGestureZoomTransformFrameRef.current !== null) {
+        window.cancelAnimationFrame(liveGestureZoomTransformFrameRef.current);
+        liveGestureZoomTransformFrameRef.current = null;
+      }
+      applyCanvasViewportCompensation();
+    } else if (liveGestureZoomTransformFrameRef.current === null) {
+      liveGestureZoomTransformFrameRef.current = window.requestAnimationFrame(() => {
+        liveGestureZoomTransformFrameRef.current = null;
+        applyCanvasViewportCompensation();
+      });
+    }
+    const shouldSyncReactState = !experimentalCanvas || previousState === null !== (resolvedState === null);
+    if (!shouldSyncReactState) {
+      return;
+    }
     pendingLiveGestureZoomStateRef.current = resolvedState;
-    applyCanvasViewportCompensation();
     if (liveGestureZoomFrameRef.current !== null) {
       return;
     }
@@ -23535,7 +23575,7 @@ function XlsxGrid({
       pendingLiveGestureZoomStateRef.current = null;
       setLiveGestureZoom(pendingState);
     });
-  }, [applyCanvasViewportCompensation]);
+  }, [applyCanvasViewportCompensation, experimentalCanvas]);
   const clearLiveZoomCommitTimer = React4.useCallback(() => {
     if (liveZoomCommitTimerRef.current !== null) {
       window.clearTimeout(liveZoomCommitTimerRef.current);
@@ -23548,6 +23588,7 @@ function XlsxGrid({
     pendingZoomAnchorRef.current = null;
     touchPinchStateRef.current = null;
     safariPinchStartZoomRef.current = null;
+    gestureScrollerRectRef.current = null;
     gestureZoomScaleRef.current = committedZoomScaleRef.current;
     updateLiveGestureZoomState(null);
   }, [clearLiveZoomCommitTimer, updateLiveGestureZoomState]);
@@ -24162,6 +24203,10 @@ function XlsxGrid({
       window.cancelAnimationFrame(liveGestureZoomFrameRef.current);
       liveGestureZoomFrameRef.current = null;
     }
+    if (liveGestureZoomTransformFrameRef.current !== null) {
+      window.cancelAnimationFrame(liveGestureZoomTransformFrameRef.current);
+      liveGestureZoomTransformFrameRef.current = null;
+    }
     if (drawingViewportFrameRef.current !== null) {
       window.cancelAnimationFrame(drawingViewportFrameRef.current);
       drawingViewportFrameRef.current = null;
@@ -24425,6 +24470,7 @@ function XlsxGrid({
   const handleScrollerScroll = React4.useCallback((event) => {
     const currentScroller = event.currentTarget;
     cachedScrollerRectRef.current = null;
+    gestureScrollerRectRef.current = null;
     const paintedViewport = paintedDrawingViewportRef.current;
     const shouldSyncDrawingViewportImmediately = Math.abs(currentScroller.scrollLeft - paintedViewport.left) > CANVAS_IMMEDIATE_VIEWPORT_SYNC_THRESHOLD_PX || Math.abs(currentScroller.scrollTop - paintedViewport.top) > CANVAS_IMMEDIATE_VIEWPORT_SYNC_THRESHOLD_PX;
     syncDrawingViewport(currentScroller, { immediate: shouldSyncDrawingViewportImmediately });
@@ -24459,7 +24505,9 @@ function XlsxGrid({
         return;
       }
       event.preventDefault();
-      const anchor = resolveEventAnchor(event.clientX, event.clientY, scroller.getBoundingClientRect());
+      const scrollerRect = gestureScrollerRectRef.current ?? scroller.getBoundingClientRect();
+      gestureScrollerRectRef.current = scrollerRect;
+      const anchor = resolveEventAnchor(event.clientX, event.clientY, scrollerRect);
       updateLiveGestureZoomTarget(
         gestureZoomScaleRef.current * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY),
         anchor
@@ -24479,10 +24527,12 @@ function XlsxGrid({
         return;
       }
       event.preventDefault();
+      const scrollerRect = scroller.getBoundingClientRect();
+      gestureScrollerRectRef.current = scrollerRect;
       const anchor = resolveEventAnchor(
         (firstTouch.clientX + secondTouch.clientX) / 2,
         (firstTouch.clientY + secondTouch.clientY) / 2,
-        scroller.getBoundingClientRect()
+        scrollerRect
       );
       clearLiveZoomCommitTimer();
       updateLiveGestureZoomState({
@@ -24510,10 +24560,12 @@ function XlsxGrid({
         return;
       }
       event.preventDefault();
+      const scrollerRect = gestureScrollerRectRef.current ?? scroller.getBoundingClientRect();
+      gestureScrollerRectRef.current = scrollerRect;
       const anchor = resolveEventAnchor(
         (firstTouch.clientX + secondTouch.clientX) / 2,
         (firstTouch.clientY + secondTouch.clientY) / 2,
-        scroller.getBoundingClientRect()
+        scrollerRect
       );
       updateLiveGestureZoomTarget(
         pinchState.startZoomScale * distance / pinchState.startDistance,
@@ -24534,10 +24586,12 @@ function XlsxGrid({
     const handleGestureStart = (event) => {
       const gestureEvent = event;
       event.preventDefault();
+      const scrollerRect = scroller.getBoundingClientRect();
+      gestureScrollerRectRef.current = scrollerRect;
       const anchor = resolveEventAnchor(
         gestureEvent.clientX,
         gestureEvent.clientY,
-        scroller.getBoundingClientRect()
+        scrollerRect
       );
       clearLiveZoomCommitTimer();
       safariPinchStartZoomRef.current = committedZoomScaleRef.current;
@@ -24555,10 +24609,12 @@ function XlsxGrid({
         return;
       }
       event.preventDefault();
+      const scrollerRect = gestureScrollerRectRef.current ?? scroller.getBoundingClientRect();
+      gestureScrollerRectRef.current = scrollerRect;
       const anchor = resolveEventAnchor(
         gestureEvent.clientX,
         gestureEvent.clientY,
-        scroller.getBoundingClientRect()
+        scrollerRect
       );
       updateLiveGestureZoomTarget(startZoomScale * gestureEvent.scale, anchor);
     };
@@ -25552,7 +25608,8 @@ function XlsxGrid({
         headerHeight: displayHeaderHeight,
         rowIndexByActual,
         rowHeaderWidth: displayRowHeaderWidth,
-        rowPrefixSums
+        rowPrefixSums,
+        zoomFactor
       })
     })) : [],
     [
@@ -25570,7 +25627,8 @@ function XlsxGrid({
       rowPrefixSums,
       showImages,
       visibleCols,
-      visibleRows
+      visibleRows,
+      zoomFactor
     ]
   );
   const shapeRects = React4.useMemo(
@@ -25583,7 +25641,8 @@ function XlsxGrid({
         headerHeight: displayHeaderHeight,
         rowIndexByActual,
         rowHeaderWidth: displayRowHeaderWidth,
-        rowPrefixSums
+        rowPrefixSums,
+        zoomFactor
       }),
       shape
     })) : [],
@@ -25601,7 +25660,8 @@ function XlsxGrid({
       shapes,
       showImages,
       visibleCols,
-      visibleRows
+      visibleRows,
+      zoomFactor
     ]
   );
   const formControlRects = React4.useMemo(
@@ -25615,7 +25675,8 @@ function XlsxGrid({
         headerHeight: displayHeaderHeight,
         rowIndexByActual,
         rowHeaderWidth: displayRowHeaderWidth,
-        rowPrefixSums
+        rowPrefixSums,
+        zoomFactor
       })
     })) : [],
     [
@@ -25632,7 +25693,8 @@ function XlsxGrid({
       rowPrefixSums,
       showImages,
       visibleCols,
-      visibleRows
+      visibleRows,
+      zoomFactor
     ]
   );
   const chartRects = React4.useMemo(
@@ -25646,7 +25708,8 @@ function XlsxGrid({
         headerHeight: displayHeaderHeight,
         rowIndexByActual,
         rowHeaderWidth: displayRowHeaderWidth,
-        rowPrefixSums
+        rowPrefixSums,
+        zoomFactor
       })
     })) : [],
     [
@@ -25664,7 +25727,8 @@ function XlsxGrid({
       rowPrefixSums,
       showImages,
       visibleCols,
-      visibleRows
+      visibleRows,
+      zoomFactor
     ]
   );
   const shouldBakeCanvasStaticDrawings = Boolean(experimentalCanvas && readOnly && showImages);
@@ -27120,6 +27184,8 @@ function XlsxGrid({
       palette,
       rowHeaderWidth,
       rowSignature: buildRenderedAxisSignature(canvasVisibleRowItems, (item) => item.index),
+      viewportLeft: drawingViewport.left,
+      viewportTop: drawingViewport.top,
       zoomFactor
     };
     const nextHeaderCanvasSignature = {
@@ -27139,7 +27205,7 @@ function XlsxGrid({
     const previousBodyCanvasSignature = paintedBodyCanvasSignatureRef.current;
     const previousHeaderCanvasSignature = paintedHeaderCanvasSignatureRef.current;
     const previousPaintedViewport = paintedDrawingViewportRef.current;
-    const shouldRepaintBody = !(previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bakedDrawingSignature === nextBodyCanvasSignature.bakedDrawingSignature && previousBodyCanvasSignature.bodyHeight === nextBodyCanvasSignature.bodyHeight && previousBodyCanvasSignature.bodyWidth === nextBodyCanvasSignature.bodyWidth && previousBodyCanvasSignature.colSignature === nextBodyCanvasSignature.colSignature && previousBodyCanvasSignature.getCellData === nextBodyCanvasSignature.getCellData && previousBodyCanvasSignature.headerHeight === nextBodyCanvasSignature.headerHeight && previousBodyCanvasSignature.palette === nextBodyCanvasSignature.palette && previousBodyCanvasSignature.rowHeaderWidth === nextBodyCanvasSignature.rowHeaderWidth && previousBodyCanvasSignature.rowSignature === nextBodyCanvasSignature.rowSignature && previousBodyCanvasSignature.zoomFactor === nextBodyCanvasSignature.zoomFactor);
+    const shouldRepaintBody = !(previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bakedDrawingSignature === nextBodyCanvasSignature.bakedDrawingSignature && previousBodyCanvasSignature.bodyHeight === nextBodyCanvasSignature.bodyHeight && previousBodyCanvasSignature.bodyWidth === nextBodyCanvasSignature.bodyWidth && previousBodyCanvasSignature.colSignature === nextBodyCanvasSignature.colSignature && previousBodyCanvasSignature.getCellData === nextBodyCanvasSignature.getCellData && previousBodyCanvasSignature.headerHeight === nextBodyCanvasSignature.headerHeight && previousBodyCanvasSignature.palette === nextBodyCanvasSignature.palette && previousBodyCanvasSignature.rowHeaderWidth === nextBodyCanvasSignature.rowHeaderWidth && previousBodyCanvasSignature.rowSignature === nextBodyCanvasSignature.rowSignature && previousBodyCanvasSignature.viewportLeft === nextBodyCanvasSignature.viewportLeft && previousBodyCanvasSignature.viewportTop === nextBodyCanvasSignature.viewportTop && previousBodyCanvasSignature.zoomFactor === nextBodyCanvasSignature.zoomFactor);
     const shouldRepaintHeaders = !(previousHeaderCanvasSignature && previousHeaderCanvasSignature.activeSheet === nextHeaderCanvasSignature.activeSheet && previousHeaderCanvasSignature.bodyHeight === nextHeaderCanvasSignature.bodyHeight && previousHeaderCanvasSignature.bodyWidth === nextHeaderCanvasSignature.bodyWidth && previousHeaderCanvasSignature.colSignature === nextHeaderCanvasSignature.colSignature && previousHeaderCanvasSignature.headerHeight === nextHeaderCanvasSignature.headerHeight && previousHeaderCanvasSignature.palette === nextHeaderCanvasSignature.palette && previousHeaderCanvasSignature.rangeSignature === nextHeaderCanvasSignature.rangeSignature && previousHeaderCanvasSignature.rowHeaderWidth === nextHeaderCanvasSignature.rowHeaderWidth && previousHeaderCanvasSignature.rowSignature === nextHeaderCanvasSignature.rowSignature && previousHeaderCanvasSignature.viewportLeft === nextHeaderCanvasSignature.viewportLeft && previousHeaderCanvasSignature.viewportTop === nextHeaderCanvasSignature.viewportTop && previousHeaderCanvasSignature.zoomFactor === nextHeaderCanvasSignature.zoomFactor);
     const canBlitBody = Boolean(
       shouldRepaintBody && previousBodyCanvasSignature && previousBodyCanvasSignature.activeSheet === nextBodyCanvasSignature.activeSheet && previousBodyCanvasSignature.bakedDrawingSignature === nextBodyCanvasSignature.bakedDrawingSignature && previousBodyCanvasSignature.bodyHeight === nextBodyCanvasSignature.bodyHeight && previousBodyCanvasSignature.bodyWidth === nextBodyCanvasSignature.bodyWidth && previousBodyCanvasSignature.getCellData === nextBodyCanvasSignature.getCellData && previousBodyCanvasSignature.headerHeight === nextBodyCanvasSignature.headerHeight && previousBodyCanvasSignature.palette === nextBodyCanvasSignature.palette && previousBodyCanvasSignature.rowHeaderWidth === nextBodyCanvasSignature.rowHeaderWidth && previousBodyCanvasSignature.zoomFactor === nextBodyCanvasSignature.zoomFactor
@@ -28366,7 +28432,8 @@ function XlsxGrid({
   const headerLabelLiveScale = isLiveZooming ? liveZoomScale : 1;
   const selectionBorderWidth = Math.max(1, zoomFactor);
   const shouldAnimateCanvasSelection = experimentalCanvas && enableCanvasSelectionAnimation;
-  const canvasSelectionTransition = shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1), width 120ms cubic-bezier(0.22, 1, 0.36, 1), height 120ms cubic-bezier(0.22, 1, 0.36, 1), opacity 100ms linear" : "none";
+  const shouldAnimateCanvasSelectionGeometry = shouldAnimateCanvasSelection && liveGestureZoom === null;
+  const canvasSelectionTransition = shouldAnimateCanvasSelectionGeometry ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1), width 120ms cubic-bezier(0.22, 1, 0.36, 1), height 120ms cubic-bezier(0.22, 1, 0.36, 1), opacity 100ms linear" : "none";
   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 maxDrawingOverlayZIndex = Math.max(
@@ -30485,81 +30552,101 @@ function XlsxGrid({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
-                ref: selectionOverlayRef,
+                ref: canvasSelectionLayerRef,
                 style: {
-                  backgroundColor: selectionFill,
-                  boxSizing: "border-box",
-                  boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
-                  contain: "layout paint",
-                  height: resolvedSelectionOverlay?.height ?? 0,
-                  left: resolvedSelectionOverlay?.left ?? 0,
-                  opacity: resolvedSelectionOverlay ? 1 : 0,
+                  height: 0,
+                  left: 0,
+                  overflow: "visible",
                   pointerEvents: "none",
                   position: "absolute",
-                  top: resolvedSelectionOverlay?.top ?? 0,
-                  transition: canvasSelectionTransition,
-                  visibility: resolvedSelectionOverlay ? "visible" : "hidden",
-                  willChange: shouldAnimateCanvasSelection ? "left, top, width, height" : void 0,
-                  width: resolvedSelectionOverlay?.width ?? 0,
+                  top: 0,
+                  transformOrigin: "0 0",
+                  transition: "none",
+                  width: 0,
                   zIndex: 24
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                ref: activeValidationOverlayRef,
-                "aria-hidden": "true",
-                style: {
-                  alignItems: "center",
-                  color: palette.mutedText,
-                  display: "inline-flex",
-                  fontSize: 10 * zoomFactor,
-                  fontWeight: 700,
-                  height: 16 * zoomFactor,
-                  justifyContent: "center",
-                  opacity: 0,
-                  pointerEvents: "none",
-                  position: "absolute",
-                  transform: "translateY(-50%)",
-                  visibility: "hidden",
-                  width: 12 * zoomFactor,
-                  zIndex: 26
-                },
-                children: "\u25BE"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                ref: fillHandleRef,
-                onPointerDown: (event) => {
-                  if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
-                    return;
-                  }
-                  event.preventDefault();
-                  event.stopPropagation();
-                  startFillDrag(event.pointerId, normalizedSelection);
                 },
-                style: {
-                  backgroundColor: selectionStroke,
-                  border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
-                  contain: "layout paint",
-                  cursor: "crosshair",
-                  display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
-                  height: 8 * zoomFactor,
-                  left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
-                  pointerEvents: "auto",
-                  position: "absolute",
-                  top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
-                  transition: shouldAnimateCanvasSelection ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
-                  willChange: shouldAnimateCanvasSelection ? "left, top" : void 0,
-                  width: 8 * zoomFactor,
-                  zIndex: 25
-                }
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: selectionOverlayRef,
+                      style: {
+                        backgroundColor: selectionFill,
+                        boxSizing: "border-box",
+                        boxShadow: `inset 0 0 0 ${selectionBorderWidth}px ${selectionStroke}`,
+                        contain: "layout paint",
+                        height: resolvedSelectionOverlay?.height ?? 0,
+                        left: resolvedSelectionOverlay?.left ?? 0,
+                        opacity: resolvedSelectionOverlay ? 1 : 0,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        top: resolvedSelectionOverlay?.top ?? 0,
+                        transition: canvasSelectionTransition,
+                        visibility: resolvedSelectionOverlay ? "visible" : "hidden",
+                        willChange: shouldAnimateCanvasSelectionGeometry ? "left, top, width, height" : void 0,
+                        width: resolvedSelectionOverlay?.width ?? 0,
+                        zIndex: 24
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: activeValidationOverlayRef,
+                      "aria-hidden": "true",
+                      style: {
+                        alignItems: "center",
+                        color: palette.mutedText,
+                        display: "inline-flex",
+                        fontSize: 10 * zoomFactor,
+                        fontWeight: 700,
+                        height: 16 * zoomFactor,
+                        justifyContent: "center",
+                        opacity: 0,
+                        pointerEvents: "none",
+                        position: "absolute",
+                        transform: "translateY(-50%)",
+                        visibility: "hidden",
+                        width: 12 * zoomFactor,
+                        zIndex: 26
+                      },
+                      children: "\u25BE"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      ref: fillHandleRef,
+                      onPointerDown: (event) => {
+                        if (readOnly || event.button !== 0 || !normalizedSelection || !resolvedSelectionOverlay) {
+                          return;
+                        }
+                        event.preventDefault();
+                        event.stopPropagation();
+                        startFillDrag(event.pointerId, normalizedSelection);
+                      },
+                      style: {
+                        backgroundColor: selectionStroke,
+                        border: `${Math.max(1, zoomFactor)}px solid ${palette.surface}`,
+                        contain: "layout paint",
+                        cursor: "crosshair",
+                        display: !readOnly && resolvedSelectionOverlay ? "block" : "none",
+                        height: 8 * zoomFactor,
+                        left: resolvedSelectionOverlay ? resolvedSelectionOverlay.left + resolvedSelectionOverlay.width - 4 * zoomFactor : 0,
+                        pointerEvents: "auto",
+                        position: "absolute",
+                        top: resolvedSelectionOverlay ? resolvedSelectionOverlay.top + resolvedSelectionOverlay.height - 4 * zoomFactor : 0,
+                        transition: shouldAnimateCanvasSelectionGeometry ? "left 120ms cubic-bezier(0.22, 1, 0.36, 1), top 120ms cubic-bezier(0.22, 1, 0.36, 1)" : "none",
+                        willChange: shouldAnimateCanvasSelectionGeometry ? "left, top" : void 0,
+                        width: 8 * zoomFactor,
+                        zIndex: 25
+                      }
+                    }
+                  )
+                ]
               }
             ),
             resizeGuide ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(