@extend-ai/react-xlsx 0.13.4 → 0.14.1

package/dist/index.cjs

@@ -3642,7 +3642,6 @@ 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 CTRL_PROP_REL_TYPE = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/ctrlProp";
 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;
@@ -5085,6 +5084,124 @@ function parseSpreadsheetBooleanNode(node) {
   }
   return parseSpreadsheetBooleanValue(node.getAttribute("val") ?? node.textContent);
 }
+function mapDukeFormControlAnchor(anchor) {
+  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
+    }
+  };
+}
+function mapDukeFormControlKind(kind) {
+  switch (kind.kind) {
+    case "button":
+      return { caption: kind.caption, kind: "button", label: normalizeControlLabel(kind.caption) };
+    case "checkbox":
+      return {
+        caption: kind.caption,
+        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,
+        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) };
+    case "groupBox":
+      return {
+        caption: kind.caption,
+        kind: "group-box",
+        label: normalizeControlLabel(kind.caption),
+        no3D: kind.no3D
+      };
+    case "listBox":
+      return {
+        inputRange: kind.inputRange,
+        kind: "listbox",
+        linkedCell: kind.cellLink,
+        no3D: kind.no3D,
+        selected: [...kind.selected],
+        selection: kind.selection
+      };
+    case "dropdown":
+      return {
+        inputRange: kind.inputRange,
+        kind: "dropdown",
+        lines: kind.lines,
+        linkedCell: kind.cellLink,
+        no3D: kind.no3D,
+        selected: kind.selected
+      };
+    case "scrollbar":
+      return {
+        horizontal: kind.horizontal,
+        increment: kind.increment,
+        kind: "scrollbar",
+        linkedCell: kind.cellLink,
+        max: kind.max,
+        min: kind.min,
+        page: kind.page,
+        value: kind.value
+      };
+    case "spinner":
+      return {
+        increment: kind.increment,
+        kind: "spinner",
+        linkedCell: kind.cellLink,
+        max: kind.max,
+        min: kind.min,
+        value: kind.value
+      };
+  }
+}
+function mapDukeFormControl(control, controlIndex, workbookSheetIndex) {
+  return {
+    anchor: mapDukeFormControlAnchor(control.anchor),
+    controlIndex,
+    dukeAnchor: { ...control.anchor },
+    editAs: control.anchor.editAs,
+    hidden: false,
+    id: `form-control-${workbookSheetIndex}-${controlIndex}`,
+    locked: control.locked,
+    name: control.name,
+    printable: control.printable,
+    sheetIndex: workbookSheetIndex,
+    workbookSheetIndex,
+    zIndex: controlIndex + 1,
+    ...mapDukeFormControlKind(control.kind)
+  };
+}
+function collectWorkbookFormControls(workbook) {
+  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)) : [];
+    } catch {
+      return [];
+    }
+  });
+}
 function parseFormControlKind(rawType) {
   const normalized = (rawType ?? "").trim().toLowerCase();
   switch (normalized) {
@@ -5850,27 +5967,10 @@ function parseSheetFormControlNodes(archive, sheetPath) {
   }
   return getLocalElements(sheetDocument, "control").map((controlNode) => ({
     anchor: parseAnchor(getFirstDescendant(controlNode, "anchor") ?? controlNode),
-    controlRelationshipId: getRelationshipId(controlNode),
     name: controlNode.getAttribute("name") ?? void 0,
     shapeId: parseFormControlShapeId(controlNode.getAttribute("shapeId"))
   }));
 }
-function parseCtrlPropDocument(archive, ctrlPropPath) {
-  const xml = readArchiveText2(archive, ctrlPropPath);
-  if (!xml) {
-    return null;
-  }
-  const document2 = parseXml2(xml);
-  const root = document2?.documentElement;
-  if (!root) {
-    return null;
-  }
-  return {
-    checked: parseSpreadsheetBooleanValue(root.getAttribute("checked")),
-    linkedCell: root.getAttribute("fmlaLink") ?? void 0,
-    objectType: root.getAttribute("objectType") ?? void 0
-  };
-}
 function parseVmlFormControls(archive, vmlDrawingPath) {
   const xml = readArchiveText2(archive, vmlDrawingPath);
   if (!xml) {
@@ -5928,21 +6028,18 @@ function parseSheetFormControls(archive, sheetPath, sheetRelationships, workbook
     if (!controlNode.anchor) {
       return;
     }
-    const ctrlPropRelationship = controlNode.controlRelationshipId ? sheetRelationships.get(controlNode.controlRelationshipId) ?? null : null;
-    const ctrlPropPath = ctrlPropRelationship?.type === CTRL_PROP_REL_TYPE ? ctrlPropRelationship.target : null;
-    const ctrlProp = ctrlPropPath ? parseCtrlPropDocument(archive, ctrlPropPath) : null;
     const vmlControl = controlNode.shapeId !== null ? vmlControlsByShapeId.get(controlNode.shapeId) ?? null : null;
-    const kind = parseFormControlKind(ctrlProp?.objectType ?? vmlControl?.objectType);
+    const kind = parseFormControlKind(vmlControl?.objectType);
     parsedControls.push({
       anchor: controlNode.anchor,
-      checked: ctrlProp?.checked ?? vmlControl?.checked,
+      checked: vmlControl?.checked,
       fontFamily: vmlControl?.fontFamily,
       fontSizePt: vmlControl?.fontSizePt,
       hidden: vmlControl?.hidden ?? false,
       id: `form-control-${workbookSheetIndex}-${index}`,
       kind,
       label: vmlControl?.label,
-      linkedCell: ctrlProp?.linkedCell ?? vmlControl?.linkedCell,
+      linkedCell: vmlControl?.linkedCell,
       name: controlNode.name,
       sheetIndex: workbookSheetIndex,
       textAlign: vmlControl?.textAlign,
@@ -6028,6 +6125,92 @@ function enrichFormControlsWithHiddenShapes(formControls, shapes, sheetState) {
     };
   });
 }
+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 revokeWorkbookImageAssets(assets) {
   if (!assets) {
     return;
@@ -6060,7 +6243,7 @@ function parseWorkbookStructureAssetsFromArchive(archive, options) {
     workbookSheets
   };
 }
-function parseWorkbookImageAssets(bytes) {
+function parseWorkbookImageAssets(bytes, workbookOrFormControls) {
   const archive = (0, import_fflate2.unzipSync)(bytes);
   const {
     contentTypes,
@@ -6079,6 +6262,7 @@ function parseWorkbookImageAssets(bytes) {
   const shapesByWorkbookSheetIndex = [];
   const sheetOrigins = [];
   const imageOriginsById = /* @__PURE__ */ new Map();
+  const dukeFormControlsByWorkbookSheetIndex = Array.isArray(workbookOrFormControls) ? workbookOrFormControls : collectWorkbookFormControls(workbookOrFormControls);
   workbookSheets.forEach((sheet, workbookSheetIndex) => {
     const sheetRelationships = parseRelationships(archive, relsPathForDocument(sheet.path), sheet.path);
     const attachments = [];
@@ -6124,7 +6308,10 @@ function parseWorkbookImageAssets(bytes) {
       shapeList,
       sheetStatesByWorkbookSheetIndex[workbookSheetIndex] ?? null
     );
-    formControlsByWorkbookSheetIndex[workbookSheetIndex] = enrichedFormControlList;
+    formControlsByWorkbookSheetIndex[workbookSheetIndex] = mergeDukeAndParsedFormControls(
+      dukeFormControlsByWorkbookSheetIndex[workbookSheetIndex] ?? [],
+      enrichedFormControlList
+    );
     imagesByWorkbookSheetIndex[workbookSheetIndex] = imageList;
     shapesByWorkbookSheetIndex[workbookSheetIndex] = visibleShapeList;
     sheetOrigins[workbookSheetIndex] = attachments.length > 0 ? {
@@ -7199,6 +7386,144 @@ function parseA1RangeReference2(reference) {
   }
   return normalizeRange({ start, end });
 }
+function resolveWorkbookReference(workbook, defaultWorkbookSheetIndex, rawReference, resolvingNamedRange = false) {
+  const reference = rawReference.trim().replace(/^=/, "");
+  if (!reference) {
+    return null;
+  }
+  let workbookSheetIndex = defaultWorkbookSheetIndex;
+  let rangeReference = reference;
+  const bangIndex = reference.lastIndexOf("!");
+  if (bangIndex >= 0) {
+    let sheetName = reference.slice(0, bangIndex).trim();
+    rangeReference = reference.slice(bangIndex + 1).trim();
+    if (sheetName.startsWith("'") && sheetName.endsWith("'")) {
+      sheetName = sheetName.slice(1, -1).replace(/''/g, "'");
+    }
+    const resolvedSheetIndex = workbook.sheetIndex(sheetName);
+    if (resolvedSheetIndex === void 0) {
+      return null;
+    }
+    workbookSheetIndex = resolvedSheetIndex;
+  } else if (!resolvingNamedRange) {
+    const namedRange = workbook.getNamedRange(reference);
+    if (namedRange) {
+      return resolveWorkbookReference(workbook, defaultWorkbookSheetIndex, namedRange, true);
+    }
+  }
+  const range = parseA1RangeReference2(rangeReference.replace(/\$/g, ""));
+  if (!range || workbookSheetIndex < 0 || workbookSheetIndex >= workbook.sheetCount) {
+    return null;
+  }
+  try {
+    return {
+      range,
+      workbookSheetIndex,
+      worksheet: workbook.getSheet(workbookSheetIndex)
+    };
+  } catch {
+    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 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 [];
+  }
+  let startPosition = targetPosition;
+  while (startPosition > 0) {
+    const control = controls[optionIndexes[startPosition] ?? -1];
+    if (control?.kind.kind === "optionButton" && control.kind.firstInGroup) {
+      break;
+    }
+    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;
+    }
+    endPosition += 1;
+  }
+  return optionIndexes.slice(startPosition, endPosition);
+}
+function resolveLinkedCellValue(controls, controlIndex) {
+  const control = controls[controlIndex];
+  if (!control) {
+    return void 0;
+  }
+  switch (control.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;
+    default:
+      return void 0;
+  }
+}
+function syncFormControlLinkedCell(workbook, workbookSheetIndex, controls, controlIndex) {
+  const control = controls[controlIndex];
+  if (!control) {
+    return;
+  }
+  const cellLink = getFormControlCellLink(control.kind);
+  const value = resolveLinkedCellValue(controls, controlIndex);
+  if (!cellLink || value === void 0) {
+    return;
+  }
+  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;
+  }
+  target.worksheet.setCell(cellAddressToA1(target.range.start), value);
+}
 function parseWorksheetFreezePanes(worksheet) {
   const rawFreezePanes = worksheet.freezePanes;
   const row = typeof rawFreezePanes?.row === "number" && rawFreezePanes.row >= 0 ? rawFreezePanes.row : null;
@@ -7965,7 +8290,7 @@ function createBasicWorkbookAssets(workbook) {
   const objectUrls = [];
   return {
     archive: {},
-    formControlsByWorkbookSheetIndex: Array.from({ length: workbook.sheetCount }, () => []),
+    formControlsByWorkbookSheetIndex: collectWorkbookFormControls(workbook),
     imageOriginsById: /* @__PURE__ */ new Map(),
     imagesByWorkbookSheetIndex: collectWorksheetApiImages(workbook, objectUrls),
     namedCellStyleByName: {},
@@ -7983,7 +8308,7 @@ function loadWorkbookImageAssets(bytes, workbook, skipXmlParsing = false) {
   if (shouldSkipXmlParsingForWorkbook(bytes, skipXmlParsing) || !isZipWorkbook(bytes)) {
     return createBasicWorkbookAssets(workbook);
   }
-  const parsedAssets = parseWorkbookImageAssets(bytes);
+  const parsedAssets = parseWorkbookImageAssets(bytes, workbook);
   const apiImagesByWorkbookSheetIndex = collectWorksheetApiImages(workbook, parsedAssets.objectUrls);
   const imagesByWorkbookSheetIndex = Array.from(
     { length: Math.max(workbook.sheetCount, parsedAssets.imagesByWorkbookSheetIndex.length, apiImagesByWorkbookSheetIndex.length) },
@@ -8300,6 +8625,12 @@ function useXlsxViewerController(options) {
     };
   }, [skipXmlParsing]);
   const refreshWorkbookState = React.useCallback((targetWorkbook) => {
+    const currentFormControls = imageAssetsRef.current?.formControlsByWorkbookSheetIndex ?? [];
+    const nextFormControls = refreshWorkbookFormControls(targetWorkbook, currentFormControls);
+    if (imageAssetsRef.current) {
+      imageAssetsRef.current.formControlsByWorkbookSheetIndex = nextFormControls;
+    }
+    setFormControlsByWorkbookSheetIndex(nextFormControls);
     const nextSheets = buildSheetList(
       targetWorkbook,
       imageAssetsRef.current?.sheetStatesByWorkbookSheetIndex,
@@ -8421,12 +8752,24 @@ function useXlsxViewerController(options) {
           if (!effectiveSkipXmlParsing && hasIncompleteWorkerChartSnapshot(snapshot)) {
             throw new Error("Worker chart payload incomplete");
           }
+          const workerImageAssets = effectiveSkipXmlParsing ? null : parseWorkbookImageAssets(
+            new Uint8Array(buffer),
+            snapshot.formControlsByWorkbookSheetIndex
+          );
+          if (!isCurrent || abortController.signal.aborted) {
+            revokeWorkbookImageAssets(workerImageAssets);
+            return;
+          }
+          setImageAssets(workerImageAssets);
           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);
@@ -8646,6 +8989,7 @@ function useXlsxViewerController(options) {
         setChartsheets(snapshot.chartsheets);
         setTabs(snapshot.tabs);
         chartAssetsRef.current = null;
+        setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
         setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
         setShouldAutoCalculate(false);
         setIsWorkerBacked(true);
@@ -8767,6 +9111,20 @@ function useXlsxViewerController(options) {
     }
     return workbook.getSheet(activeSheet.workbookSheetIndex);
   }, [activeSheet, workbook]);
+  const getFormControlWorksheet = React.useCallback((sheetIndex = activeSheetIndex) => {
+    const targetSheet = sheets[sheetIndex];
+    if (!workbook || !targetSheet) {
+      return null;
+    }
+    try {
+      return {
+        workbookSheetIndex: targetSheet.workbookSheetIndex,
+        worksheet: workbook.getSheet(targetSheet.workbookSheetIndex)
+      };
+    } catch {
+      return null;
+    }
+  }, [activeSheetIndex, sheets, workbook]);
   const tables = React.useMemo(
     () => isWorkerBacked ? workerTablesByWorkbookSheetIndex[activeSheet?.workbookSheetIndex ?? -1] ?? [] : mapWorksheetTables(getActiveWorksheet()),
     [activeSheet?.workbookSheetIndex, getActiveWorksheet, isWorkerBacked, revision, workerTablesByWorkbookSheetIndex]
@@ -8906,6 +9264,33 @@ function useXlsxViewerController(options) {
     return (formControlsByWorkbookSheetIndex[targetSheet.workbookSheetIndex] ?? []).map(mapPublicFormControl);
   }, [activeSheetIndex, formControlsByWorkbookSheetIndex, mapPublicFormControl, sheets]);
   const formControls = React.useMemo(() => getSheetFormControls(activeSheetIndex), [activeSheetIndex, getSheetFormControls]);
+  const getFormControlItems = React.useCallback((controlIndex, sheetIndex = activeSheetIndex) => {
+    const target = getFormControlWorksheet(sheetIndex);
+    if (!workbook || !target) {
+      const targetSheet = sheets[sheetIndex];
+      if (!targetSheet) {
+        return [];
+      }
+      const control2 = (formControlsByWorkbookSheetIndex[targetSheet.workbookSheetIndex] ?? []).find((entry) => entry.controlIndex === controlIndex);
+      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;
+    if (!inputRange) {
+      return [];
+    }
+    const source = resolveWorkbookReference(workbook, target.workbookSheetIndex, inputRange);
+    if (!source) {
+      return [];
+    }
+    const items = [];
+    for (let row = source.range.start.row; row <= source.range.end.row; row += 1) {
+      for (let col = source.range.start.col; col <= source.range.end.col; col += 1) {
+        items.push(source.worksheet.getFormattedValueAt(row, col));
+      }
+    }
+    return items;
+  }, [activeSheetIndex, formControlsByWorkbookSheetIndex, getFormControlWorksheet, sheets, workbook]);
   const getSheetShapes = React.useCallback((sheetIndex = activeSheetIndex) => {
     const targetSheet = sheets[sheetIndex];
     if (!targetSheet) {
@@ -9303,6 +9688,89 @@ function useXlsxViewerController(options) {
     redoStackRef.current = [];
     setHistoryRevision((current) => current + 1);
   }, [createHistoryEntry]);
+  const addFormControl = React.useCallback((input, sheetIndex = activeSheetIndex) => {
+    const target = getFormControlWorksheet(sheetIndex);
+    if (readOnly || !workbook || !target) {
+      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" }
+          });
+        }
+      }
+    }
+    syncFormControlLinkedCell(
+      workbook,
+      target.workbookSheetIndex,
+      target.worksheet.formControls,
+      controlIndex
+    );
+    maybeRecalculateWorkbook(workbook);
+    refreshWorkbookState(workbook);
+    return controlIndex;
+  }, [activeSheetIndex, getFormControlWorksheet, maybeRecalculateWorkbook, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
+  const updateFormControl = React.useCallback((controlIndex, patch, sheetIndex = activeSheetIndex) => {
+    const target = getFormControlWorksheet(sheetIndex);
+    const currentControl = target?.worksheet.formControls[controlIndex];
+    if (readOnly || !workbook || !target || !currentControl) {
+      return false;
+    }
+    recordHistoryBeforeMutation();
+    const nextInput = {
+      ...formControlInputFromDukeControl(currentControl),
+      ...patch,
+      anchor: patch.anchor ? { ...patch.anchor } : { ...currentControl.anchor },
+      kind: patch.kind ? { ...patch.kind } : { ...currentControl.kind }
+    };
+    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.setFormControl(controlIndex, nextInput);
+    syncFormControlLinkedCell(
+      workbook,
+      target.workbookSheetIndex,
+      target.worksheet.formControls,
+      controlIndex
+    );
+    maybeRecalculateWorkbook(workbook);
+    refreshWorkbookState(workbook);
+    return true;
+  }, [activeSheetIndex, getFormControlWorksheet, maybeRecalculateWorkbook, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
+  const removeFormControl = React.useCallback((controlIndex, sheetIndex = activeSheetIndex) => {
+    const target = getFormControlWorksheet(sheetIndex);
+    if (readOnly || !workbook || !target || !target.worksheet.formControls[controlIndex]) {
+      return false;
+    }
+    recordHistoryBeforeMutation();
+    target.worksheet.removeFormControl(controlIndex);
+    refreshWorkbookState(workbook);
+    return true;
+  }, [activeSheetIndex, getFormControlWorksheet, readOnly, recordHistoryBeforeMutation, refreshWorkbookState, workbook]);
   const recordCellEditHistory = React.useCallback((cell, before, after) => {
     if (!activeSheet || isApplyingHistoryRef.current) {
       return;
@@ -10111,8 +10579,15 @@ function useXlsxViewerController(options) {
     }
     workbook.addSheet(candidate);
     sheetOriginsRef.current = [...sheetOriginsRef.current, null];
+    setFormControlsByWorkbookSheetIndex((current) => [...current, []]);
     setImagesByWorkbookSheetIndex((current) => [...current, []]);
     setShapesByWorkbookSheetIndex((current) => [...current, []]);
+    if (imageAssetsRef.current) {
+      imageAssetsRef.current.formControlsByWorkbookSheetIndex = [
+        ...imageAssetsRef.current.formControlsByWorkbookSheetIndex,
+        []
+      ];
+    }
     const nextSheets = buildSheetList(
       workbook,
       imageAssetsRef.current?.sheetStatesByWorkbookSheetIndex,
@@ -10142,9 +10617,13 @@ function useXlsxViewerController(options) {
     recordHistoryBeforeMutation();
     workbook.removeSheet(activeSheet.workbookSheetIndex);
     sheetOriginsRef.current = sheetOriginsRef.current.filter((_, index) => index !== activeSheet.workbookSheetIndex);
+    setFormControlsByWorkbookSheetIndex((current) => current.filter((_, index) => index !== activeSheet.workbookSheetIndex));
     setImagesByWorkbookSheetIndex((current) => current.filter((_, index) => index !== activeSheet.workbookSheetIndex));
     setShapesByWorkbookSheetIndex((current) => current.filter((_, index) => index !== activeSheet.workbookSheetIndex));
     if (imageAssetsRef.current) {
+      imageAssetsRef.current.formControlsByWorkbookSheetIndex = imageAssetsRef.current.formControlsByWorkbookSheetIndex.filter(
+        (_, index) => index !== activeSheet.workbookSheetIndex
+      );
       imageAssetsRef.current.sheetStatesByWorkbookSheetIndex = imageAssetsRef.current.sheetStatesByWorkbookSheetIndex.filter(
         (_, index) => index !== activeSheet.workbookSheetIndex
       );
@@ -10445,6 +10924,7 @@ function useXlsxViewerController(options) {
       activeSheetIndex,
       activeTab,
       activeTabIndex,
+      addFormControl,
       addSheet,
       canRedo,
       canDownload: Boolean(file ?? src),
@@ -10484,6 +10964,7 @@ function useXlsxViewerController(options) {
       getClipboardData,
       getCellDisplayValue: getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
       getCellSnapshotAsync: isWorkerBacked ? getCellSnapshotAsync : void 0,
       getActiveWorksheet,
       getRowsBatchAsync: isWorkerBacked ? getRowsBatchAsync : void 0,
@@ -10501,6 +10982,7 @@ function useXlsxViewerController(options) {
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       recalculate,
       redo,
@@ -10551,6 +11033,7 @@ function useXlsxViewerController(options) {
       undo,
       unmergeSelection,
       updateChart,
+      updateFormControl,
       workbook,
       zoomIn,
       zoomOut,
@@ -10563,6 +11046,7 @@ function useXlsxViewerController(options) {
       activeSheetIndex,
       activeTab,
       activeTabIndex,
+      addFormControl,
       addSheet,
       canLoadDeferred,
       canRedo,
@@ -10599,6 +11083,7 @@ function useXlsxViewerController(options) {
       getClipboardData,
       getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
       getCellSnapshotAsync,
       getActiveWorksheet,
       historyRevision,
@@ -10616,6 +11101,7 @@ function useXlsxViewerController(options) {
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       recalculate,
       redo,
@@ -10666,6 +11152,7 @@ function useXlsxViewerController(options) {
       undo,
       unmergeSelection,
       updateChart,
+      updateFormControl,
       workbook,
       zoomIn,
       zoomOut,
@@ -20338,6 +20825,40 @@ function getCellBooleanValue(worksheet, row, col) {
   }
   return null;
 }
+function getBatchedCellNumericValue(cell) {
+  if (!cell) {
+    return null;
+  }
+  const text = cell.value.trim();
+  if (text.length === 0) {
+    return null;
+  }
+  if (text.toLowerCase() === "true") {
+    return 1;
+  }
+  if (text.toLowerCase() === "false") {
+    return 0;
+  }
+  const value = Number(text.replace(/,/g, ""));
+  return Number.isFinite(value) ? value : null;
+}
+function getBatchedCellBooleanValue(cell) {
+  if (!cell) {
+    return null;
+  }
+  const text = cell.value.trim().toLowerCase();
+  if (text.length === 0) {
+    return null;
+  }
+  if (text === "true") {
+    return true;
+  }
+  if (text === "false") {
+    return false;
+  }
+  const value = Number(text);
+  return Number.isFinite(value) ? value !== 0 : null;
+}
 function parseA1RangeReference3(reference) {
   const [startRef, endRef = startRef] = reference.split(":");
   const start = parseA1CellReference3(startRef ?? "");
@@ -21637,13 +22158,90 @@ function renderConditionalIcon(icon, scale = 1) {
     }
   );
 }
-function renderCheckboxControl(checked, palette, scale = 1) {
+function isFormControlChecked(control) {
+  return control.state ? control.state === "checked" : Boolean(control.checked);
+}
+function isFormControlMixed(control) {
+  return control.state === "mixed";
+}
+function buildFormControlKindInput(control) {
+  switch (control.kind) {
+    case "button":
+      return { caption: control.caption ?? control.label ?? "", kind: "button" };
+    case "checkbox":
+      return {
+        caption: control.caption ?? control.label ?? "",
+        cellLink: control.linkedCell,
+        kind: "checkbox",
+        no3D: control.no3D ?? false,
+        state: control.state ?? (control.checked ? "checked" : "unchecked")
+      };
+    case "radio":
+      return {
+        caption: control.caption ?? control.label ?? "",
+        cellLink: control.linkedCell,
+        firstInGroup: control.firstInGroup,
+        kind: "optionButton",
+        no3D: control.no3D ?? false,
+        state: control.state === "checked" ? "checked" : "unchecked"
+      };
+    case "label":
+      return { caption: control.caption ?? control.label ?? "", kind: "label" };
+    case "group-box":
+      return {
+        caption: control.caption ?? control.label ?? "",
+        kind: "groupBox",
+        no3D: control.no3D ?? false
+      };
+    case "listbox":
+      return {
+        cellLink: control.linkedCell,
+        inputRange: control.inputRange,
+        kind: "listBox",
+        no3D: control.no3D ?? false,
+        selected: Array.isArray(control.selected) ? control.selected : control.selected === void 0 ? [] : [control.selected],
+        selection: control.selection ?? "single"
+      };
+    case "dropdown":
+      return {
+        cellLink: control.linkedCell,
+        inputRange: control.inputRange,
+        kind: "dropdown",
+        lines: control.lines ?? 8,
+        no3D: control.no3D ?? false,
+        selected: typeof control.selected === "number" ? control.selected : void 0
+      };
+    case "scrollbar":
+      return {
+        cellLink: control.linkedCell,
+        horizontal: control.horizontal ?? true,
+        increment: control.increment ?? 1,
+        kind: "scrollbar",
+        max: control.max ?? 100,
+        min: control.min ?? 0,
+        page: control.page ?? 10,
+        value: control.value ?? control.min ?? 0
+      };
+    case "spinner":
+      return {
+        cellLink: control.linkedCell,
+        increment: control.increment ?? 1,
+        kind: "spinner",
+        max: control.max ?? 100,
+        min: control.min ?? 0,
+        value: control.value ?? control.min ?? 0
+      };
+    default:
+      return null;
+  }
+}
+function renderCheckboxControl(checked, palette, scale = 1, mixed = false) {
   const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
-  const fill = checked ? paletteIsDark(palette) ? "#60a5fa" : "#2563eb" : "transparent";
+  const fill = checked || mixed ? paletteIsDark(palette) ? "#60a5fa" : "#2563eb" : "transparent";
   const check = paletteIsDark(palette) ? "#020617" : "#ffffff";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { "aria-hidden": "true", height: 14 * scale, style: { display: "block" }, viewBox: "0 0 16 16", width: 14 * scale, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { fill, height: 11, rx: 2, ry: 2, stroke, strokeWidth: 1.2, width: 11, x: 2.5, y: 2.5 }),
-    checked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    mixed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 8h6", fill: "none", stroke: check, strokeLinecap: "round", strokeWidth: 1.8 }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "path",
       {
         d: "M5 8.1 7.1 10.2 11.3 5.8",
@@ -21813,6 +22411,8 @@ function drawStaticFormControl(context, control, rect, palette, zoomFactor, shee
   const textColor = control.textColor ?? "#000000";
   const fontSizePx = Math.max(9 * zoomFactor, (control.fontSizePt ?? 9) * 96 / 72 * zoomFactor);
   const iconSize = Math.min(14 * zoomFactor, Math.max(0, rect.height - 4 * zoomFactor));
+  const controlChecked = isFormControlChecked(control);
+  const controlMixed = isFormControlMixed(control);
   context.save();
   context.font = `400 ${fontSizePx}px ${control.fontFamily ?? "Calibri, sans-serif"}`;
   context.textBaseline = "middle";
@@ -21853,14 +22453,19 @@ function drawStaticFormControl(context, control, rect, palette, zoomFactor, shee
   const textRightInset = control.kind === "dropdown" ? 18 * zoomFactor : 6 * zoomFactor;
   if (control.kind === "checkbox") {
     context.strokeRect(rect.left + 2 * zoomFactor, rect.top + (rect.height - iconSize) / 2, iconSize, iconSize);
-    if (control.checked) {
+    if (controlChecked || controlMixed) {
       context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
       context.fillRect(rect.left + 2 * zoomFactor + 1.5, rect.top + (rect.height - iconSize) / 2 + 1.5, Math.max(0, iconSize - 3), Math.max(0, iconSize - 3));
       context.strokeStyle = paletteIsDark(palette) ? "#020617" : "#ffffff";
       context.beginPath();
-      context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.24, rect.top + rect.height / 2 + iconSize * 0.06);
-      context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.45, rect.top + rect.height / 2 + iconSize * 0.26);
-      context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.8, rect.top + rect.height / 2 - iconSize * 0.2);
+      if (controlMixed) {
+        context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.25, rect.top + rect.height / 2);
+        context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.75, rect.top + rect.height / 2);
+      } else {
+        context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.24, rect.top + rect.height / 2 + iconSize * 0.06);
+        context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.45, rect.top + rect.height / 2 + iconSize * 0.26);
+        context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.8, rect.top + rect.height / 2 - iconSize * 0.2);
+      }
       context.stroke();
     }
     textLeft += iconSize + 4 * zoomFactor;
@@ -21868,7 +22473,7 @@ function drawStaticFormControl(context, control, rect, palette, zoomFactor, shee
     context.beginPath();
     context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize / 2, 0, Math.PI * 2);
     context.stroke();
-    if (control.checked) {
+    if (controlChecked) {
       context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
       context.beginPath();
       context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize * 0.25, 0, Math.PI * 2);
@@ -22504,7 +23109,10 @@ function XlsxGrid({
   getCellStyle,
   loadingComponent,
   loadingState,
+  onFormControlAction,
+  onFormControlChange,
   renderChartLoading,
+  renderFormControl,
   palette,
   renderImage,
   renderImageSelection,
@@ -22541,6 +23149,7 @@ function XlsxGrid({
     getRowsBatchAsync,
     getClipboardData,
     getCellDisplayValue: getControllerCellDisplayValue,
+    getFormControlItems,
     images,
     shapes,
     isLoadDeferred,
@@ -22578,9 +23187,13 @@ function XlsxGrid({
     sortTable,
     tables,
     undo,
+    updateFormControl,
     workbook,
     zoomScale
   } = controller;
+  const formControlItemsById = React4.useMemo(() => new Map(
+    formControls.flatMap((control) => control.controlIndex !== void 0 && (control.kind === "dropdown" || control.kind === "listbox") ? [[control.id, getFormControlItems(control.controlIndex, control.sheetIndex)]] : [])
+  ), [formControls, getFormControlItems]);
   const canResizeHeaders = !readOnly || allowResizeInReadOnly;
   const scrollRef = React4.useRef(null);
   const wrapperRef = React4.useRef(null);
@@ -25064,14 +25677,7 @@ function XlsxGrid({
     () => shouldBakeCanvasStaticDrawings ? shapeRects.filter(({ shape }) => shape.hyperlink) : shapeRects,
     [shapeRects, shouldBakeCanvasStaticDrawings]
   );
-  const bakedFormControlRects = React4.useMemo(
-    () => shouldBakeCanvasStaticDrawings ? formControlRects : [],
-    [formControlRects, shouldBakeCanvasStaticDrawings]
-  );
-  const domFormControlRects = React4.useMemo(
-    () => shouldBakeCanvasStaticDrawings ? [] : formControlRects,
-    [formControlRects, shouldBakeCanvasStaticDrawings]
-  );
+  const domFormControlRects = formControlRects;
   const bakedImageRects = React4.useMemo(
     () => shouldBakeCanvasImages ? imageRects.filter(({ image }) => !image.hyperlink && selectedImageId !== image.id) : [],
     [imageRects, selectedImageId, shouldBakeCanvasImages]
@@ -25088,11 +25694,9 @@ function XlsxGrid({
       return "";
     }
     const shapeSignature = bakedShapeRects.map(({ rect, shape }) => `s:${shape.id}:${shape.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
-    const controlSignature = bakedFormControlRects.map(({ control, rect }) => `f:${control.id}:${control.zIndex}:${Boolean(control.checked)}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
     const imageSignature = bakedImageRects.map(({ image, rect }) => `i:${image.id}:${image.src}:${image.zIndex}:${Math.round(rect.left)}:${Math.round(rect.top)}:${Math.round(rect.width)}:${Math.round(rect.height)}`).join("|");
-    return `${revision}:${canvasImageLoadVersion}:${shapeSignature}:${controlSignature}:${imageSignature}`;
+    return `${revision}:${canvasImageLoadVersion}:${shapeSignature}:${imageSignature}`;
   }, [
-    bakedFormControlRects,
     bakedImageRects,
     bakedShapeRects,
     canvasImageLoadVersion,
@@ -26627,12 +27231,6 @@ function XlsxGrid({
         shape,
         zIndex: shape.zIndex
       })),
-      ...bakedFormControlRects.map(({ control, rect }) => ({
-        control,
-        kind: "formControl",
-        rect,
-        zIndex: control.zIndex
-      })),
       ...bakedImageRects.map(({ image, rect }) => ({
         image,
         kind: "image",
@@ -26783,90 +27381,6 @@ function XlsxGrid({
       drawBakedShapeText(context, shape, localLeft, localTop, rect.width, rect.height);
       context.restore();
     };
-    const drawBakedFormControl = (context, control, rect) => {
-      const label = resolveFormControlLabel(control);
-      const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
-      const textColor = control.textColor ?? "#000000";
-      const fontSizePx = Math.max(9 * zoomFactor, (control.fontSizePt ?? 9) * 96 / 72 * zoomFactor);
-      const iconSize = Math.min(14 * zoomFactor, Math.max(0, rect.height - 4 * zoomFactor));
-      context.save();
-      context.font = `400 ${fontSizePx}px ${control.fontFamily ?? "Calibri, sans-serif"}`;
-      context.textBaseline = "middle";
-      context.fillStyle = textColor;
-      context.strokeStyle = stroke;
-      context.lineWidth = Math.max(1, zoomFactor);
-      if (control.kind === "group-box") {
-        const labelInset = label ? Math.max(7, fontSizePx * 0.5) : 0;
-        drawCanvasRoundedRect(context, rect.left, rect.top + labelInset, rect.width, Math.max(0, rect.height - labelInset), 2 * zoomFactor);
-        context.stroke();
-        if (label) {
-          context.fillStyle = SHEET_SURFACE;
-          const labelWidth = Math.min(rect.width - 16 * zoomFactor, measureCanvasTextWidth(context, label) + 8 * zoomFactor);
-          context.fillRect(rect.left + 8 * zoomFactor, rect.top, labelWidth, fontSizePx * 1.2);
-          context.fillStyle = textColor;
-          context.textAlign = "left";
-          context.fillText(label, rect.left + 12 * zoomFactor, rect.top + fontSizePx * 0.55);
-        }
-        context.restore();
-        return;
-      }
-      if (control.kind === "button" || control.kind === "dropdown" || control.kind === "editbox" || control.kind === "listbox" || control.kind === "scrollbar" || control.kind === "spinner" || control.kind === "unknown") {
-        if (control.kind === "button") {
-          const gradient = context.createLinearGradient(rect.left, rect.top, rect.left, rect.top + rect.height);
-          gradient.addColorStop(0, "#f8fafc");
-          gradient.addColorStop(1, "#e2e8f0");
-          context.fillStyle = gradient;
-        } else {
-          context.fillStyle = "transparent";
-        }
-        drawCanvasRoundedRect(context, rect.left, rect.top, rect.width, rect.height, control.kind === "button" ? 4 * zoomFactor : 2 * zoomFactor);
-        if (control.kind === "button") {
-          context.fill();
-        }
-        context.stroke();
-      }
-      let textLeft = rect.left + 2 * zoomFactor;
-      const textRightInset = control.kind === "dropdown" ? 18 * zoomFactor : 6 * zoomFactor;
-      if (control.kind === "checkbox") {
-        context.strokeRect(rect.left + 2 * zoomFactor, rect.top + (rect.height - iconSize) / 2, iconSize, iconSize);
-        if (control.checked) {
-          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
-          context.fillRect(rect.left + 2 * zoomFactor + 1.5, rect.top + (rect.height - iconSize) / 2 + 1.5, Math.max(0, iconSize - 3), Math.max(0, iconSize - 3));
-          context.strokeStyle = paletteIsDark(palette) ? "#020617" : "#ffffff";
-          context.beginPath();
-          context.moveTo(rect.left + 2 * zoomFactor + iconSize * 0.24, rect.top + rect.height / 2 + iconSize * 0.06);
-          context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.45, rect.top + rect.height / 2 + iconSize * 0.26);
-          context.lineTo(rect.left + 2 * zoomFactor + iconSize * 0.8, rect.top + rect.height / 2 - iconSize * 0.2);
-          context.stroke();
-        }
-        textLeft += iconSize + 4 * zoomFactor;
-      } else if (control.kind === "radio") {
-        context.beginPath();
-        context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize / 2, 0, Math.PI * 2);
-        context.stroke();
-        if (control.checked) {
-          context.fillStyle = paletteIsDark(palette) ? "#60a5fa" : "#2563eb";
-          context.beginPath();
-          context.arc(rect.left + 2 * zoomFactor + iconSize / 2, rect.top + rect.height / 2, iconSize * 0.25, 0, Math.PI * 2);
-          context.fill();
-        }
-        textLeft += iconSize + 4 * zoomFactor;
-      }
-      if (label) {
-        const maxTextWidth = Math.max(0, rect.left + rect.width - textLeft - textRightInset);
-        const text = truncateCanvasText(context, label, maxTextWidth);
-        context.fillStyle = textColor;
-        context.textAlign = control.textAlign === "right" ? "right" : control.textAlign === "center" ? "center" : "left";
-        const textX = context.textAlign === "right" ? rect.left + rect.width - textRightInset : context.textAlign === "center" ? textLeft + maxTextWidth / 2 : textLeft;
-        context.fillText(text, textX, rect.top + rect.height / 2);
-      }
-      if (control.kind === "dropdown") {
-        context.fillStyle = textColor;
-        context.textAlign = "center";
-        context.fillText("\u25BC", rect.left + rect.width - 10 * zoomFactor, rect.top + rect.height / 2);
-      }
-      context.restore();
-    };
     const drawBakedCanvasDrawings = (pane, context, dirtyRects) => {
       if (bakedCanvasDrawingEntries.length === 0 || dirtyRects.length === 0) {
         return;
@@ -26881,8 +27395,6 @@ function XlsxGrid({
         }
         if (entry.kind === "shape") {
           drawBakedShape(context, entry.shape, localRect);
-        } else if (entry.kind === "formControl") {
-          drawBakedFormControl(context, entry.control, localRect);
         } else {
           const imageElement = getCanvasImage(entry.image);
           if (imageElement) {
@@ -27576,7 +28088,6 @@ function XlsxGrid({
     activeSheet,
     applyCanvasViewportCompensation,
     bakedCanvasDrawingSignature,
-    bakedFormControlRects,
     bakedImageRects,
     bakedShapeRects,
     canvasColumnHeaderCells,
@@ -28159,10 +28670,22 @@ function XlsxGrid({
     const fontSizePx = Math.max(9 * zoomFactor, (control.fontSizePt ?? 9) * 96 / 72 * zoomFactor);
     const stroke = paletteIsDark(palette) ? "#cbd5e1" : "#475569";
     const textColor = control.textColor ?? "#000000";
+    const canMutateControl = !readOnly && control.controlIndex !== void 0 && [
+      "checkbox",
+      "dropdown",
+      "listbox",
+      "radio",
+      "scrollbar",
+      "spinner"
+    ].includes(control.kind);
+    const canActivateButton = !readOnly && control.kind === "button" && Boolean(onFormControlAction);
+    const isInteractiveControl = canMutateControl || canActivateButton;
+    const controlItems = formControlItemsById.get(control.id) ?? [];
     const commonStyle = {
       alignItems: control.kind === "group-box" ? "stretch" : "center",
       color: textColor,
       contain: "layout paint",
+      cursor: isInteractiveControl ? "pointer" : void 0,
       display: "flex",
       fontFamily: control.fontFamily ?? "Calibri, sans-serif",
       fontSize: fontSizePx,
@@ -28173,12 +28696,98 @@ function XlsxGrid({
       left: rect.left,
       lineHeight: 1.2,
       overflow: "hidden",
-      pointerEvents: "none",
+      pointerEvents: isInteractiveControl ? "auto" : "none",
       position: "absolute",
       top: rect.top,
       width: rect.width,
       zIndex: isFrozenDrawing ? control.zIndex + 20 : control.zIndex
     };
+    const stopControlPointerEvent = (event) => {
+      event.stopPropagation();
+    };
+    const commitControlKind = (kind, nextControl) => {
+      if (readOnly || control.controlIndex === void 0) {
+        return false;
+      }
+      const didUpdate = updateFormControl(control.controlIndex, { kind }, control.sheetIndex);
+      if (didUpdate) {
+        onFormControlChange?.({
+          control: { ...control, ...nextControl },
+          previousControl: control,
+          type: "change"
+        });
+      }
+      return didUpdate;
+    };
+    const setControlState = (state = "unchecked") => {
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind === "checkbox") {
+        return commitControlKind(
+          { ...kind, state },
+          { checked: state === "checked", state }
+        );
+      }
+      if (kind?.kind === "optionButton" && state !== "mixed") {
+        return commitControlKind(
+          { ...kind, state },
+          { checked: state === "checked", state }
+        );
+      }
+      return false;
+    };
+    const setControlSelected = (selected) => {
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind === "dropdown") {
+        const nextSelected = typeof selected === "number" ? selected : void 0;
+        return commitControlKind(
+          { ...kind, selected: nextSelected },
+          { selected: nextSelected }
+        );
+      }
+      if (kind?.kind === "listBox") {
+        const nextSelected = Array.isArray(selected) ? selected : typeof selected === "number" ? [selected] : [];
+        return commitControlKind(
+          { ...kind, selected: nextSelected },
+          { selected: nextSelected }
+        );
+      }
+      return false;
+    };
+    const setControlValue = (value) => {
+      if (!Number.isFinite(value)) {
+        return false;
+      }
+      const kind = buildFormControlKindInput(control);
+      if (kind?.kind !== "scrollbar" && kind?.kind !== "spinner") {
+        return false;
+      }
+      const nextValue = Math.max(kind.min, Math.min(kind.max, value));
+      return commitControlKind({ ...kind, value: nextValue }, { value: nextValue });
+    };
+    const activateControl = () => {
+      if (!readOnly && control.kind === "button") {
+        onFormControlAction?.({ control, type: "activate" });
+      }
+    };
+    if (renderFormControl) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(React4.Fragment, { children: renderFormControl({
+        activate: activateControl,
+        checked: isFormControlChecked(control),
+        control,
+        disabled: !isInteractiveControl,
+        items: controlItems,
+        label: controlLabel,
+        mixed: isFormControlMixed(control),
+        readOnly,
+        rect,
+        setSelected: setControlSelected,
+        setState: setControlState,
+        setValue: setControlValue,
+        stopPropagation: stopControlPointerEvent,
+        style: commonStyle,
+        zoomFactor
+      }) }, `${pane}-${control.id}`);
+    }
     if (control.kind === "group-box") {
       const hasLabel = controlLabel.length > 0;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -28220,15 +28829,83 @@ function XlsxGrid({
         `${pane}-${control.id}`
       );
     }
-    let content;
     if (control.kind === "radio") {
-      content = renderRadioControl(Boolean(control.checked), palette, zoomFactor);
-    } else if (control.kind === "checkbox") {
-      content = renderCheckboxControl(Boolean(control.checked), palette, zoomFactor);
-    } else if (control.kind === "button") {
+      const checked = isFormControlChecked(control);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
+          "aria-checked": checked,
+          disabled: !readOnly && control.controlIndex === void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            if (!checked) {
+              setControlState("checked");
+            }
+          },
+          onPointerDown: stopControlPointerEvent,
+          role: "radio",
+          style: {
+            ...commonStyle,
+            background: "transparent",
+            border: 0,
+            boxSizing: "border-box",
+            padding: `0 ${Math.max(1, zoomFactor)}px`
+          },
+          tabIndex: readOnly ? -1 : void 0,
+          type: "button",
+          children: [
+            renderRadioControl(checked, palette, zoomFactor),
+            controlLabel ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }) : null
+          ]
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    if (control.kind === "checkbox") {
+      const checked = isFormControlChecked(control);
+      const mixed = isFormControlMixed(control);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
+          "aria-checked": mixed ? "mixed" : checked,
+          disabled: !readOnly && control.controlIndex === void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            const nextState = checked && !mixed ? "unchecked" : "checked";
+            setControlState(nextState);
+          },
+          onPointerDown: stopControlPointerEvent,
+          role: "checkbox",
+          style: {
+            ...commonStyle,
+            background: "transparent",
+            border: 0,
+            boxSizing: "border-box",
+            padding: `0 ${Math.max(1, zoomFactor)}px`
+          },
+          tabIndex: readOnly ? -1 : void 0,
+          type: "button",
+          children: [
+            renderCheckboxControl(checked, palette, zoomFactor, mixed),
+            controlLabel ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }) : null
+          ]
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    if (control.kind === "button") {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
+        "button",
         {
+          "aria-disabled": readOnly || !onFormControlAction,
+          disabled: !readOnly && !onFormControlAction,
+          onClick: (event) => {
+            event.stopPropagation();
+            activateControl();
+          },
+          onPointerDown: stopControlPointerEvent,
           style: {
             ...commonStyle,
             background: "linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)",
@@ -28239,68 +28916,157 @@ function XlsxGrid({
             padding: `0 ${6 * zoomFactor}px`,
             textAlign: "center"
           },
+          tabIndex: readOnly ? -1 : void 0,
+          type: "button",
           children: controlLabel
         },
         `${pane}-${control.id}`
       );
-    } else if (control.kind === "dropdown") {
+    }
+    if (control.kind === "dropdown") {
+      const selected = typeof control.selected === "number" ? control.selected : void 0;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
+        "select",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          "aria-label": controlLabel || control.name || "Dropdown form control",
+          disabled: !readOnly && (control.controlIndex === void 0 || controlItems.length === 0),
+          onChange: (event) => {
+            event.stopPropagation();
+            const nextSelected = event.currentTarget.value === "" ? void 0 : Number(event.currentTarget.value);
+            setControlSelected(nextSelected);
+          },
+          onClick: stopControlPointerEvent,
+          onPointerDown: stopControlPointerEvent,
           style: {
             ...commonStyle,
+            backgroundColor: SHEET_SURFACE,
             border: `${Math.max(1, zoomFactor)}px solid ${stroke}`,
             borderRadius: 2 * zoomFactor,
             boxSizing: "border-box",
-            justifyContent: "space-between",
-            padding: `0 ${6 * zoomFactor}px`
+            padding: `0 ${4 * zoomFactor}px`
           },
+          tabIndex: readOnly ? -1 : void 0,
+          value: selected === void 0 ? "" : String(selected),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", style: { fontSize: fontSizePx * 0.85 }, children: "\u25BC" })
+            selected === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: controlLabel }) : null,
+            controlItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: index, children: item }, index))
           ]
         },
         `${pane}-${control.id}`
       );
-    } else if (control.kind === "editbox" || control.kind === "listbox" || control.kind === "scrollbar" || control.kind === "spinner" || control.kind === "unknown") {
+    }
+    if (control.kind === "listbox") {
+      const selected = Array.isArray(control.selected) ? control.selected : control.selected === void 0 ? [] : [control.selected];
+      const allowsMultipleSelection = (control.selection ?? "single") !== "single";
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "div",
+        "select",
         {
+          "aria-disabled": readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          "aria-label": controlLabel || control.name || "List box form control",
+          disabled: !readOnly && (control.controlIndex === void 0 || controlItems.length === 0),
+          multiple: allowsMultipleSelection,
+          onChange: (event) => {
+            event.stopPropagation();
+            const nextSelected = Array.from(event.currentTarget.selectedOptions, (option) => Number(option.value));
+            setControlSelected(nextSelected);
+          },
+          onClick: stopControlPointerEvent,
+          onPointerDown: stopControlPointerEvent,
+          size: Math.max(2, Math.min(controlItems.length || 2, Math.floor(rect.height / Math.max(1, fontSizePx * 1.45)))),
           style: {
             ...commonStyle,
+            alignItems: void 0,
+            backgroundColor: SHEET_SURFACE,
             border: `${Math.max(1, zoomFactor)}px solid ${stroke}`,
             borderRadius: 2 * zoomFactor,
             boxSizing: "border-box",
-            padding: `0 ${6 * zoomFactor}px`
+            display: "block",
+            padding: 0
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel })
+          tabIndex: readOnly ? -1 : void 0,
+          value: allowsMultipleSelection ? selected.map(String) : selected[0] === void 0 ? "" : String(selected[0]),
+          children: controlItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: index, children: item }, index))
         },
         `${pane}-${control.id}`
       );
-    } else {
-      content = null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    if (control.kind === "scrollbar") {
+      const min = control.min ?? 0;
+      const max = Math.max(min, control.max ?? 100);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
+          "aria-label": controlLabel || control.name || "Scrollbar form control",
+          disabled: !readOnly && control.controlIndex === void 0,
+          max,
+          min,
+          onChange: (event) => {
+            event.stopPropagation();
+            setControlValue(event.currentTarget.valueAsNumber);
+          },
+          onClick: stopControlPointerEvent,
+          onPointerDown: stopControlPointerEvent,
+          step: Math.max(1, control.increment ?? 1),
+          style: {
+            ...commonStyle,
+            accentColor: paletteIsDark(palette) ? "#60a5fa" : "#2563eb",
+            boxSizing: "border-box",
+            padding: 0,
+            writingMode: control.horizontal === false ? "vertical-lr" : void 0
+          },
+          tabIndex: readOnly ? -1 : void 0,
+          type: "range",
+          value: Math.max(min, Math.min(max, control.value ?? min))
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    if (control.kind === "spinner") {
+      const min = control.min ?? 0;
+      const max = Math.max(min, control.max ?? 100);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          "aria-disabled": readOnly || control.controlIndex === void 0,
+          "aria-label": controlLabel || control.name || "Spinner form control",
+          disabled: !readOnly && control.controlIndex === void 0,
+          max,
+          min,
+          onChange: (event) => {
+            event.stopPropagation();
+            setControlValue(event.currentTarget.valueAsNumber);
+          },
+          onClick: stopControlPointerEvent,
+          onPointerDown: stopControlPointerEvent,
+          step: Math.max(1, control.increment ?? 1),
+          style: {
+            ...commonStyle,
+            backgroundColor: SHEET_SURFACE,
+            border: `${Math.max(1, zoomFactor)}px solid ${stroke}`,
+            borderRadius: 2 * zoomFactor,
+            boxSizing: "border-box",
+            padding: `0 ${4 * zoomFactor}px`
+          },
+          tabIndex: readOnly ? -1 : void 0,
+          type: "number",
+          value: Math.max(min, Math.min(max, control.value ?? min))
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         style: {
           ...commonStyle,
+          border: control.kind === "editbox" || control.kind === "unknown" ? `${Math.max(1, zoomFactor)}px solid ${stroke}` : void 0,
+          borderRadius: 2 * zoomFactor,
+          boxSizing: "border-box",
           padding: `0 ${Math.max(1, zoomFactor)}px`
         },
-        children: [
-          content,
-          controlLabel ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: controlLabel
-            }
-          ) : null
-        ]
+        children: controlLabel ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }) : null
       },
       `${pane}-${control.id}`
     );
@@ -28587,7 +29353,7 @@ function XlsxGrid({
   };
   const drawingViewportCacheSignature = `${Math.floor(drawingViewport.left / CANVAS_VIEWPORT_OVERSCAN_PX)}:${Math.floor(drawingViewport.top / CANVAS_VIEWPORT_OVERSCAN_PX)}:${drawingViewport.width}:${drawingViewport.height}`;
   const previousPaneDrawingNodes = paneDrawingNodesCacheRef.current;
-  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === domFormControlRects && previousPaneDrawingNodes.shapeRects === domShapeRects && previousPaneDrawingNodes.imageRects === domImageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.selectedChartElement === selectedChartElement && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
+  const canReusePaneDrawingNodes = previousPaneDrawingNodes !== null && previousPaneDrawingNodes.showImages === showImages && previousPaneDrawingNodes.updateFormControl === updateFormControl && previousPaneDrawingNodes.chartRects === chartRects && previousPaneDrawingNodes.formControlRects === domFormControlRects && previousPaneDrawingNodes.formControlItemsById === formControlItemsById && previousPaneDrawingNodes.shapeRects === domShapeRects && previousPaneDrawingNodes.imageRects === domImageRects && previousPaneDrawingNodes.selectedChartId === selectedChartId && previousPaneDrawingNodes.selectedImageId === selectedImageId && previousPaneDrawingNodes.readOnly === readOnly && previousPaneDrawingNodes.onFormControlAction === onFormControlAction && previousPaneDrawingNodes.onFormControlChange === onFormControlChange && previousPaneDrawingNodes.selectionStroke === selectionStroke && previousPaneDrawingNodes.renderChartLoading === renderChartLoading && previousPaneDrawingNodes.renderFormControl === renderFormControl && previousPaneDrawingNodes.renderImage === renderImage && previousPaneDrawingNodes.renderImageSelection === renderImageSelection && previousPaneDrawingNodes.isChartsLoading === isChartsLoading && previousPaneDrawingNodes.selectedChartElement === selectedChartElement && previousPaneDrawingNodes.palette === palette && previousPaneDrawingNodes.drawingViewportSignature === drawingViewportCacheSignature;
   const paneDrawingNodes = canReusePaneDrawingNodes ? previousPaneDrawingNodes.value : !showImages ? {
     corner: null,
     left: null,
@@ -28623,12 +29389,16 @@ function XlsxGrid({
     paneDrawingNodesCacheRef.current = {
       chartRects,
       drawingViewportSignature: drawingViewportCacheSignature,
+      formControlItemsById,
       formControlRects: domFormControlRects,
       imageRects: domImageRects,
       isChartsLoading,
+      onFormControlAction,
+      onFormControlChange,
       palette,
       readOnly,
       renderChartLoading,
+      renderFormControl,
       renderImage,
       renderImageSelection,
       selectedChartElement,
@@ -28637,6 +29407,7 @@ function XlsxGrid({
       selectionStroke,
       shapeRects: domShapeRects,
       showImages,
+      updateFormControl,
       value: paneDrawingNodes
     };
   }
@@ -29863,7 +30634,10 @@ function XlsxViewerInner({
   isDark = false,
   loadingComponent,
   loadingState,
+  onFormControlAction,
+  onFormControlChange,
   renderChartLoading,
+  renderFormControl,
   renderImage,
   renderImageSelection,
   renderScroller,
@@ -29925,8 +30699,11 @@ function XlsxViewerInner({
             getCellStyle,
             loadingComponent,
             loadingState,
+            onFormControlAction,
+            onFormControlChange,
             palette,
             renderChartLoading,
+            renderFormControl,
             renderImage,
             renderImageSelection,
             renderScroller,
@@ -30031,6 +30808,7 @@ function useXlsxViewerZoom() {
 }
 function useXlsxViewerEditing() {
   const {
+    addFormControl,
     addSheet,
     canRedo,
     canUndo,
@@ -30038,14 +30816,18 @@ function useXlsxViewerEditing() {
     copySelectionToClipboard,
     defineNamedRange,
     fillSelection,
+    formControls,
     getClipboardData,
     getCellDisplayValue: getCellDisplayValue2,
     getCellFormula,
+    getFormControlItems,
+    getSheetFormControls,
     mergeSelection,
     pasteFromClipboard,
     pasteStructuredClipboardData,
     pasteText,
     removeActiveSheet,
+    removeFormControl,
     readOnly,
     redo,
     selectedCellFormula,
@@ -30062,10 +30844,12 @@ function useXlsxViewerEditing() {
     setSelectedCellStyle,
     setSelectedCellValue,
     undo,
-    unmergeSelection
+    unmergeSelection,
+    updateFormControl
   } = useXlsxViewer();
   return React4.useMemo(
     () => ({
+      addFormControl,
       addSheet,
       canRedo,
       canUndo,
@@ -30073,14 +30857,18 @@ function useXlsxViewerEditing() {
       copySelectionToClipboard,
       defineNamedRange,
       fillSelection,
+      formControls,
       getClipboardData,
       getCellDisplayValue: getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
+      getSheetFormControls,
       mergeSelection,
       pasteFromClipboard,
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       redo,
       selectedCellFormula,
@@ -30097,9 +30885,11 @@ function useXlsxViewerEditing() {
       setSelectedCellStyle,
       setSelectedCellValue,
       undo,
-      unmergeSelection
+      unmergeSelection,
+      updateFormControl
     }),
     [
+      addFormControl,
       addSheet,
       canRedo,
       canUndo,
@@ -30107,14 +30897,18 @@ function useXlsxViewerEditing() {
       copySelectionToClipboard,
       defineNamedRange,
       fillSelection,
+      formControls,
       getClipboardData,
       getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
+      getSheetFormControls,
       mergeSelection,
       pasteFromClipboard,
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       redo,
       selectedCellFormula,
@@ -30131,7 +30925,8 @@ function useXlsxViewerEditing() {
       setSelectedCellStyle,
       setSelectedCellValue,
       undo,
-      unmergeSelection
+      unmergeSelection,
+      updateFormControl
     ]
   );
 }
@@ -30329,20 +31124,87 @@ function useXlsxViewerCharts() {
   );
 }
 function useXlsxViewerThumbnails(options = {}) {
-  const { getSheetFormControls, getSheetImages, getSheetShapes, workbook, sheets } = useXlsxViewer();
+  const {
+    getRowsBatchAsync,
+    getSheetFormControls,
+    getSheetImages,
+    getSheetShapes,
+    workbook,
+    sheets
+  } = useXlsxViewer();
   const { isDark } = React4.useContext(ViewerAppearanceContext);
   const palette = useViewerPalette(isDark);
   const includeHeaders = options.includeHeaders ?? true;
   const resolution = options.resolution;
   const thumbnailImageCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const workerThumbnailRowBatchCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const workerThumbnailRowBatchRequestRef = React4.useRef(
+    /* @__PURE__ */ new Map()
+  );
   const isMountedRef = React4.useRef(false);
   const [thumbnailImageLoadVersion, setThumbnailImageLoadVersion] = React4.useState(0);
+  const [workerThumbnailRowBatchVersion, setWorkerThumbnailRowBatchVersion] = React4.useState(0);
   React4.useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
+  React4.useEffect(() => {
+    const currentSheets = new Set(sheets);
+    for (const sheet of workerThumbnailRowBatchCacheRef.current.keys()) {
+      if (!currentSheets.has(sheet)) {
+        workerThumbnailRowBatchCacheRef.current.delete(sheet);
+      }
+    }
+    for (const sheet of workerThumbnailRowBatchRequestRef.current.keys()) {
+      if (!currentSheets.has(sheet)) {
+        workerThumbnailRowBatchRequestRef.current.delete(sheet);
+      }
+    }
+  }, [sheets]);
+  const getWorkerThumbnailRowBatch = React4.useCallback((sheet, startRow, endRow) => {
+    const cachedBatch = workerThumbnailRowBatchCacheRef.current.get(sheet);
+    if (cachedBatch && startRow >= cachedBatch.startRow && endRow <= cachedBatch.endRow) {
+      return cachedBatch;
+    }
+    if (!getRowsBatchAsync) {
+      return null;
+    }
+    const pendingRequest = workerThumbnailRowBatchRequestRef.current.get(sheet);
+    if (!pendingRequest) {
+      const request = {
+        endRow: Math.max(endRow, cachedBatch?.endRow ?? endRow),
+        startRow: Math.min(startRow, cachedBatch?.startRow ?? startRow)
+      };
+      workerThumbnailRowBatchRequestRef.current.set(sheet, request);
+      void getRowsBatchAsync(
+        sheet.workbookSheetIndex,
+        request.startRow,
+        request.endRow - request.startRow + 1
+      ).then((rows) => {
+        if (workerThumbnailRowBatchRequestRef.current.get(sheet) !== request) {
+          return;
+        }
+        workerThumbnailRowBatchRequestRef.current.delete(sheet);
+        if (!rows) {
+          return;
+        }
+        workerThumbnailRowBatchCacheRef.current.set(
+          sheet,
+          buildWorksheetBatchWindow(rows, sheet, request.startRow, request.endRow)
+        );
+        if (isMountedRef.current) {
+          setWorkerThumbnailRowBatchVersion((version) => version + 1);
+        }
+      }).catch(() => {
+        if (workerThumbnailRowBatchRequestRef.current.get(sheet) === request) {
+          workerThumbnailRowBatchRequestRef.current.delete(sheet);
+        }
+      });
+    }
+    return null;
+  }, [getRowsBatchAsync]);
   const getThumbnailImage = React4.useCallback((image) => {
     if (typeof Image === "undefined") {
       return null;
@@ -30568,6 +31430,10 @@ function useXlsxViewerThumbnails(options = {}) {
         if (!canvas) {
           return false;
         }
+        const workerRowBatch = worksheet ? null : getWorkerThumbnailRowBatch(sheet, sourceRange.start.row, sourceRange.end.row);
+        if (!worksheet && !workerRowBatch) {
+          return false;
+        }
         const context = canvas.getContext("2d", { alpha: false });
         if (!context) {
           return false;
@@ -30604,9 +31470,6 @@ function useXlsxViewerThumbnails(options = {}) {
           context.fillRect(0, headerHeight, rowHeaderWidth, Math.max(1, rowAxis.totalSize));
           context.fillRect(0, 0, rowHeaderWidth, headerHeight);
         }
-        if (!worksheet) {
-          return true;
-        }
         const conditionalFormatMetricsCache = /* @__PURE__ */ new Map();
         const cellRenderCache = /* @__PURE__ */ new Map();
         const getCellData = (row, col) => {
@@ -30615,7 +31478,9 @@ function useXlsxViewerThumbnails(options = {}) {
           if (cached) {
             return cached;
           }
-          if (worksheet.isMergedSecondary(row, col)) {
+          const batchCoversRow = workerRowBatch ? row >= workerRowBatch.startRow && row <= workerRowBatch.endRow : false;
+          const batchedCell = batchCoversRow ? workerRowBatch?.cells.get(cacheKey) : void 0;
+          if (batchedCell?.isMergedSecondary || worksheet?.isMergedSecondary(row, col)) {
             const mergedSecondaryData = {
               isMergedSecondary: true,
               style: {},
@@ -30624,53 +31489,34 @@ function useXlsxViewerThumbnails(options = {}) {
             cellRenderCache.set(cacheKey, mergedSecondaryData);
             return mergedSecondaryData;
           }
-          const merge = worksheet.getMergeSpan(row, col);
+          const merge = worksheet ? worksheet.getMergeSpan(row, col) : batchedCell?.mergeSpan;
           const inheritedStyle = resolveInheritedCellStyle2(sheet, row, col);
-          const worksheetStyle = worksheet.getCellStyleAt(row, col) ?? null;
+          const worksheetStyle = worksheet ? worksheet.getCellStyleAt(row, col) ?? null : batchedCell?.style ?? null;
           const mergedStyle = mergeResolvedCellStyle(inheritedStyle, worksheetStyle, { replaceXfSubtrees: true });
           const alignment = mergedStyle?.alignment;
           const sparkline = sparklineByCell.get(cacheKey) ?? null;
+          const getNumericValue = (targetRow, targetCol) => worksheet ? getCellNumericValue(worksheet, targetRow, targetCol) : getBatchedCellNumericValue(workerRowBatch?.cells.get(`${targetRow}:${targetCol}`));
           const sparklineValues = sparkline ? sparkline.range.start.row === sparkline.range.end.row ? Array.from(
             { length: Math.abs(sparkline.range.end.col - sparkline.range.start.col) + 1 },
-            (_, index) => getCellNumericValue(
-              worksheet,
+            (_, index) => getNumericValue(
               sparkline.range.start.row,
               Math.min(sparkline.range.start.col, sparkline.range.end.col) + index
             )
           ) : Array.from(
             { length: Math.abs(sparkline.range.end.row - sparkline.range.start.row) + 1 },
-            (_, index) => getCellNumericValue(
-              worksheet,
+            (_, index) => getNumericValue(
               Math.min(sparkline.range.start.row, sparkline.range.end.row) + index,
               sparkline.range.start.col
             )
           ) : null;
-          const checkboxState = mergedStyle?.cellControl ? getCellBooleanValue(worksheet, row, col) : null;
+          const checkboxState = mergedStyle?.cellControl ? worksheet ? getCellBooleanValue(worksheet, row, col) : getBatchedCellBooleanValue(batchedCell) : null;
           const nextData = {
             canvas: void 0,
             checkboxState,
             colSpan: merge?.colSpan,
-            conditionalColorScale: resolveConditionalColorScaleForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
-            conditionalDataBar: resolveConditionalDataBarForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
-            conditionalIcon: resolveConditionalIconForCell(
-              row,
-              col,
-              worksheet,
-              sheet,
-              conditionalFormatMetricsCache
-            ),
+            conditionalColorScale: worksheet ? resolveConditionalColorScaleForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
+            conditionalDataBar: worksheet ? resolveConditionalDataBarForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
+            conditionalIcon: worksheet ? resolveConditionalIconForCell(row, col, worksheet, sheet, conditionalFormatMetricsCache) : null,
             isMergedSecondary: false,
             rowSpan: merge?.rowSpan,
             sparkline: sparkline && sparklineValues ? { config: sparkline, values: sparklineValues } : null,
@@ -30678,7 +31524,7 @@ function useXlsxViewerThumbnails(options = {}) {
               showGridLines
             }),
             textRotationDeg: resolveSpreadsheetTextRotation(alignment?.textRotation),
-            value: sparkline ? "" : checkboxState !== null ? "" : getCellDisplayValue(worksheet, row, col, sheet)
+            value: sparkline ? "" : checkboxState !== null ? "" : worksheet ? getCellDisplayValue(worksheet, row, col, sheet) : batchedCell?.value ?? ""
           };
           nextData.canvas = buildCanvasCellStyleCache(nextData.style);
           cellRenderCache.set(cacheKey, nextData);
@@ -30952,12 +31798,14 @@ function useXlsxViewerThumbnails(options = {}) {
     getSheetFormControls,
     getSheetImages,
     getSheetShapes,
+    getWorkerThumbnailRowBatch,
     getThumbnailImage,
     includeHeaders,
     palette,
     resolution,
     sheets,
     thumbnailImageLoadVersion,
+    workerThumbnailRowBatchVersion,
     workbook
   ]);
   const paintThumbnail = React4.useCallback(