@extend-ai/react-xlsx 0.13.3 → 0.14.0

package/dist/index.js

@@ -3592,7 +3592,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;
@@ -5035,6 +5034,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) {
@@ -5800,27 +5917,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) {
@@ -5878,21 +5978,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,
@@ -5978,6 +6075,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;
@@ -6010,7 +6193,7 @@ function parseWorkbookStructureAssetsFromArchive(archive, options) {
     workbookSheets
   };
 }
-function parseWorkbookImageAssets(bytes) {
+function parseWorkbookImageAssets(bytes, workbook) {
   const archive = unzipSync(bytes);
   const {
     contentTypes,
@@ -6029,6 +6212,7 @@ function parseWorkbookImageAssets(bytes) {
   const shapesByWorkbookSheetIndex = [];
   const sheetOrigins = [];
   const imageOriginsById = /* @__PURE__ */ new Map();
+  const dukeFormControlsByWorkbookSheetIndex = collectWorkbookFormControls(workbook);
   workbookSheets.forEach((sheet, workbookSheetIndex) => {
     const sheetRelationships = parseRelationships(archive, relsPathForDocument(sheet.path), sheet.path);
     const attachments = [];
@@ -6074,7 +6258,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 ? {
@@ -7148,6 +7335,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;
@@ -7914,7 +8239,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: {},
@@ -7932,7 +8257,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) },
@@ -8249,6 +8574,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,
@@ -8376,6 +8707,7 @@ function useXlsxViewerController(options) {
           setChartsheets(snapshot.chartsheets);
           setTabs(snapshot.tabs);
           chartAssetsRef.current = null;
+          setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
           setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
           setShouldAutoCalculate(false);
           setIsWorkerBacked(true);
@@ -8595,6 +8927,7 @@ function useXlsxViewerController(options) {
         setChartsheets(snapshot.chartsheets);
         setTabs(snapshot.tabs);
         chartAssetsRef.current = null;
+        setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
         setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
         setShouldAutoCalculate(false);
         setIsWorkerBacked(true);
@@ -8716,6 +9049,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]
@@ -8855,6 +9202,28 @@ 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) {
+      return [];
+    }
+    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, getFormControlWorksheet, workbook]);
   const getSheetShapes = React.useCallback((sheetIndex = activeSheetIndex) => {
     const targetSheet = sheets[sheetIndex];
     if (!targetSheet) {
@@ -9252,6 +9621,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;
@@ -10060,8 +10512,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,
@@ -10091,9 +10550,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
       );
@@ -10394,6 +10857,7 @@ function useXlsxViewerController(options) {
       activeSheetIndex,
       activeTab,
       activeTabIndex,
+      addFormControl,
       addSheet,
       canRedo,
       canDownload: Boolean(file ?? src),
@@ -10433,6 +10897,7 @@ function useXlsxViewerController(options) {
       getClipboardData,
       getCellDisplayValue: getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
       getCellSnapshotAsync: isWorkerBacked ? getCellSnapshotAsync : void 0,
       getActiveWorksheet,
       getRowsBatchAsync: isWorkerBacked ? getRowsBatchAsync : void 0,
@@ -10450,6 +10915,7 @@ function useXlsxViewerController(options) {
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       recalculate,
       redo,
@@ -10500,6 +10966,7 @@ function useXlsxViewerController(options) {
       undo,
       unmergeSelection,
       updateChart,
+      updateFormControl,
       workbook,
       zoomIn,
       zoomOut,
@@ -10512,6 +10979,7 @@ function useXlsxViewerController(options) {
       activeSheetIndex,
       activeTab,
       activeTabIndex,
+      addFormControl,
       addSheet,
       canLoadDeferred,
       canRedo,
@@ -10548,6 +11016,7 @@ function useXlsxViewerController(options) {
       getClipboardData,
       getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
       getCellSnapshotAsync,
       getActiveWorksheet,
       historyRevision,
@@ -10565,6 +11034,7 @@ function useXlsxViewerController(options) {
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       recalculate,
       redo,
@@ -10615,6 +11085,7 @@ function useXlsxViewerController(options) {
       undo,
       unmergeSelection,
       updateChart,
+      updateFormControl,
       workbook,
       zoomIn,
       zoomOut,
@@ -21603,13 +22074,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__ */ jsxs3("svg", { "aria-hidden": "true", height: 14 * scale, style: { display: "block" }, viewBox: "0 0 16 16", width: 14 * scale, children: [
     /* @__PURE__ */ jsx3("rect", { fill, height: 11, rx: 2, ry: 2, stroke, strokeWidth: 1.2, width: 11, x: 2.5, y: 2.5 }),
-    checked ? /* @__PURE__ */ jsx3(
+    mixed ? /* @__PURE__ */ jsx3("path", { d: "M5 8h6", fill: "none", stroke: check, strokeLinecap: "round", strokeWidth: 1.8 }) : checked ? /* @__PURE__ */ jsx3(
       "path",
       {
         d: "M5 8.1 7.1 10.2 11.3 5.8",
@@ -21779,6 +22327,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";
@@ -21819,14 +22369,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;
@@ -21834,7 +22389,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);
@@ -22470,6 +23025,8 @@ function XlsxGrid({
   getCellStyle,
   loadingComponent,
   loadingState,
+  onFormControlAction,
+  onFormControlChange,
   renderChartLoading,
   palette,
   renderImage,
@@ -22507,6 +23064,7 @@ function XlsxGrid({
     getRowsBatchAsync,
     getClipboardData,
     getCellDisplayValue: getControllerCellDisplayValue,
+    getFormControlItems,
     images,
     shapes,
     isLoadDeferred,
@@ -22544,9 +23102,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);
@@ -25054,7 +25616,7 @@ 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 controlSignature = bakedFormControlRects.map(({ control, rect }) => `f:${control.id}:${control.zIndex}:${control.state ?? 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}`;
   }, [
@@ -26755,6 +27317,8 @@ function XlsxGrid({
       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";
@@ -26795,14 +27359,19 @@ function XlsxGrid({
       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;
@@ -26810,7 +27379,7 @@ function XlsxGrid({
         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);
@@ -26989,8 +27558,7 @@ function XlsxGrid({
             const canvasCellStyle = cellData.canvas ?? buildCanvasCellStyleCache(cellStyle);
             const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellStyle.backgroundColor === "string" ? cellStyle.backgroundColor : sheetSurface);
             const gradientFill = !cellData.conditionalColorScale && typeof cellStyle.backgroundImage === "string" ? resolveCanvasGradientFill(paneContext, localRect, cellStyle.backgroundImage) : null;
-            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellStyle.backgroundColor === "string" && cellStyle.backgroundColor !== sheetSurface;
-            if (hasExplicitCellFill || cellData.chartHighlight) {
+            if (cellData.chartHighlight) {
               flushPendingGridlines();
             }
             paneContext.fillStyle = gradientFill ?? fillColor;
@@ -27038,7 +27606,7 @@ function XlsxGrid({
             const bottomNeighborTopBorder = bottomNeighborData?.isMergedSecondary ? null : bottomNeighborData?.canvas?.topBorder ?? parseCanvasBorderDeclaration(bottomNeighborData?.style.borderTop);
             const resolvedRightBorder = resolveCanvasBoundaryBorder(rightBorder, rightNeighborLeftBorder);
             const resolvedBottomBorder = resolveCanvasBoundaryBorder(bottomBorder, bottomNeighborTopBorder);
-            if (showGridLines && !hasExplicitCellFill && (!resolvedRightBorder || !resolvedBottomBorder)) {
+            if (showGridLines && (!resolvedRightBorder || !resolvedBottomBorder)) {
               enqueueGridlinePath();
               if (!resolvedRightBorder) {
                 paneContext.moveTo(localRect.left + localRect.width - 0.5, localRect.top);
@@ -28126,10 +28694,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,
@@ -28140,12 +28720,28 @@ 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 (control.controlIndex === void 0) {
+        return;
+      }
+      const didUpdate = updateFormControl(control.controlIndex, { kind }, control.sheetIndex);
+      if (didUpdate) {
+        onFormControlChange?.({
+          control: { ...control, ...nextControl },
+          previousControl: control,
+          type: "change"
+        });
+      }
+    };
     if (control.kind === "group-box") {
       const hasLabel = controlLabel.length > 0;
       return /* @__PURE__ */ jsx3(
@@ -28187,15 +28783,88 @@ 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);
+      const kind = buildFormControlKindInput(control);
+      return /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          "aria-checked": checked,
+          disabled: readOnly || control.controlIndex === void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            if (!checked && kind?.kind === "optionButton") {
+              commitControlKind(
+                { ...kind, state: "checked" },
+                { checked: true, state: "checked" }
+              );
+            }
+          },
+          onPointerDown: stopControlPointerEvent,
+          role: "radio",
+          style: {
+            ...commonStyle,
+            background: "transparent",
+            border: 0,
+            boxSizing: "border-box",
+            padding: `0 ${Math.max(1, zoomFactor)}px`
+          },
+          type: "button",
+          children: [
+            renderRadioControl(checked, palette, zoomFactor),
+            controlLabel ? /* @__PURE__ */ jsx3("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);
+      const kind = buildFormControlKindInput(control);
+      return /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          "aria-checked": mixed ? "mixed" : checked,
+          disabled: readOnly || control.controlIndex === void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            if (kind?.kind === "checkbox") {
+              const nextState = checked && !mixed ? "unchecked" : "checked";
+              commitControlKind(
+                { ...kind, state: nextState },
+                { checked: nextState === "checked", state: nextState }
+              );
+            }
+          },
+          onPointerDown: stopControlPointerEvent,
+          role: "checkbox",
+          style: {
+            ...commonStyle,
+            background: "transparent",
+            border: 0,
+            boxSizing: "border-box",
+            padding: `0 ${Math.max(1, zoomFactor)}px`
+          },
+          type: "button",
+          children: [
+            renderCheckboxControl(checked, palette, zoomFactor, mixed),
+            controlLabel ? /* @__PURE__ */ jsx3("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }) : null
+          ]
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    if (control.kind === "button") {
       return /* @__PURE__ */ jsx3(
-        "div",
+        "button",
         {
+          disabled: readOnly || !onFormControlAction,
+          onClick: (event) => {
+            event.stopPropagation();
+            onFormControlAction?.({ control, type: "activate" });
+          },
+          onPointerDown: stopControlPointerEvent,
           style: {
             ...commonStyle,
             background: "linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)",
@@ -28206,68 +28875,168 @@ function XlsxGrid({
             padding: `0 ${6 * zoomFactor}px`,
             textAlign: "center"
           },
+          type: "button",
           children: controlLabel
         },
         `${pane}-${control.id}`
       );
-    } else if (control.kind === "dropdown") {
+    }
+    if (control.kind === "dropdown") {
+      const kind = buildFormControlKindInput(control);
+      const selected = typeof control.selected === "number" ? control.selected : void 0;
       return /* @__PURE__ */ jsxs3(
-        "div",
+        "select",
         {
+          "aria-label": controlLabel || control.name || "Dropdown form control",
+          disabled: readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          onChange: (event) => {
+            event.stopPropagation();
+            if (kind?.kind === "dropdown") {
+              const nextSelected = event.currentTarget.value === "" ? void 0 : Number(event.currentTarget.value);
+              commitControlKind(
+                { ...kind, selected: nextSelected },
+                { selected: 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`
           },
+          value: selected === void 0 ? "" : String(selected),
           children: [
-            /* @__PURE__ */ jsx3("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }),
-            /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { fontSize: fontSizePx * 0.85 }, children: "\u25BC" })
+            selected === void 0 ? /* @__PURE__ */ jsx3("option", { value: "", children: controlLabel }) : null,
+            controlItems.map((item, index) => /* @__PURE__ */ jsx3("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 kind = buildFormControlKindInput(control);
+      const selected = Array.isArray(control.selected) ? control.selected : control.selected === void 0 ? [] : [control.selected];
+      const allowsMultipleSelection = (control.selection ?? "single") !== "single";
       return /* @__PURE__ */ jsx3(
-        "div",
+        "select",
         {
+          "aria-label": controlLabel || control.name || "List box form control",
+          disabled: readOnly || control.controlIndex === void 0 || controlItems.length === 0,
+          multiple: allowsMultipleSelection,
+          onChange: (event) => {
+            event.stopPropagation();
+            if (kind?.kind === "listBox") {
+              const nextSelected = Array.from(event.currentTarget.selectedOptions, (option) => Number(option.value));
+              commitControlKind(
+                { ...kind, selected: nextSelected },
+                { selected: 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__ */ jsx3("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel })
+          value: allowsMultipleSelection ? selected.map(String) : selected[0] === void 0 ? "" : String(selected[0]),
+          children: controlItems.map((item, index) => /* @__PURE__ */ jsx3("option", { value: index, children: item }, index))
         },
         `${pane}-${control.id}`
       );
-    } else {
-      content = null;
     }
-    return /* @__PURE__ */ jsxs3(
+    if (control.kind === "scrollbar") {
+      const kind = buildFormControlKindInput(control);
+      const min = control.min ?? 0;
+      const max = Math.max(min, control.max ?? 100);
+      return /* @__PURE__ */ jsx3(
+        "input",
+        {
+          "aria-label": controlLabel || control.name || "Scrollbar form control",
+          disabled: readOnly || control.controlIndex === void 0,
+          max,
+          min,
+          onChange: (event) => {
+            event.stopPropagation();
+            if (kind?.kind === "scrollbar") {
+              const value = event.currentTarget.valueAsNumber;
+              commitControlKind({ ...kind, value }, { value });
+            }
+          },
+          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
+          },
+          type: "range",
+          value: Math.max(min, Math.min(max, control.value ?? min))
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    if (control.kind === "spinner") {
+      const kind = buildFormControlKindInput(control);
+      const min = control.min ?? 0;
+      const max = Math.max(min, control.max ?? 100);
+      return /* @__PURE__ */ jsx3(
+        "input",
+        {
+          "aria-label": controlLabel || control.name || "Spinner form control",
+          disabled: readOnly || control.controlIndex === void 0,
+          max,
+          min,
+          onChange: (event) => {
+            event.stopPropagation();
+            if (kind?.kind === "spinner" && Number.isFinite(event.currentTarget.valueAsNumber)) {
+              const value = Math.max(min, Math.min(max, event.currentTarget.valueAsNumber));
+              commitControlKind({ ...kind, value }, { value });
+            }
+          },
+          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`
+          },
+          type: "number",
+          value: Math.max(min, Math.min(max, control.value ?? min))
+        },
+        `${pane}-${control.id}`
+      );
+    }
+    return /* @__PURE__ */ jsx3(
       "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__ */ jsx3(
-            "span",
-            {
-              style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: controlLabel
-            }
-          ) : null
-        ]
+        children: controlLabel ? /* @__PURE__ */ jsx3("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: controlLabel }) : null
       },
       `${pane}-${control.id}`
     );
@@ -29830,6 +30599,8 @@ function XlsxViewerInner({
   isDark = false,
   loadingComponent,
   loadingState,
+  onFormControlAction,
+  onFormControlChange,
   renderChartLoading,
   renderImage,
   renderImageSelection,
@@ -29892,6 +30663,8 @@ function XlsxViewerInner({
             getCellStyle,
             loadingComponent,
             loadingState,
+            onFormControlAction,
+            onFormControlChange,
             palette,
             renderChartLoading,
             renderImage,
@@ -29998,6 +30771,7 @@ function useXlsxViewerZoom() {
 }
 function useXlsxViewerEditing() {
   const {
+    addFormControl,
     addSheet,
     canRedo,
     canUndo,
@@ -30005,14 +30779,18 @@ function useXlsxViewerEditing() {
     copySelectionToClipboard,
     defineNamedRange,
     fillSelection,
+    formControls,
     getClipboardData,
     getCellDisplayValue: getCellDisplayValue2,
     getCellFormula,
+    getFormControlItems,
+    getSheetFormControls,
     mergeSelection,
     pasteFromClipboard,
     pasteStructuredClipboardData,
     pasteText,
     removeActiveSheet,
+    removeFormControl,
     readOnly,
     redo,
     selectedCellFormula,
@@ -30029,10 +30807,12 @@ function useXlsxViewerEditing() {
     setSelectedCellStyle,
     setSelectedCellValue,
     undo,
-    unmergeSelection
+    unmergeSelection,
+    updateFormControl
   } = useXlsxViewer();
   return React4.useMemo(
     () => ({
+      addFormControl,
       addSheet,
       canRedo,
       canUndo,
@@ -30040,14 +30820,18 @@ function useXlsxViewerEditing() {
       copySelectionToClipboard,
       defineNamedRange,
       fillSelection,
+      formControls,
       getClipboardData,
       getCellDisplayValue: getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
+      getSheetFormControls,
       mergeSelection,
       pasteFromClipboard,
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       redo,
       selectedCellFormula,
@@ -30064,9 +30848,11 @@ function useXlsxViewerEditing() {
       setSelectedCellStyle,
       setSelectedCellValue,
       undo,
-      unmergeSelection
+      unmergeSelection,
+      updateFormControl
     }),
     [
+      addFormControl,
       addSheet,
       canRedo,
       canUndo,
@@ -30074,14 +30860,18 @@ function useXlsxViewerEditing() {
       copySelectionToClipboard,
       defineNamedRange,
       fillSelection,
+      formControls,
       getClipboardData,
       getCellDisplayValue2,
       getCellFormula,
+      getFormControlItems,
+      getSheetFormControls,
       mergeSelection,
       pasteFromClipboard,
       pasteStructuredClipboardData,
       pasteText,
       removeActiveSheet,
+      removeFormControl,
       readOnly,
       redo,
       selectedCellFormula,
@@ -30098,7 +30888,8 @@ function useXlsxViewerEditing() {
       setSelectedCellStyle,
       setSelectedCellValue,
       undo,
-      unmergeSelection
+      unmergeSelection,
+      updateFormControl
     ]
   );
 }
@@ -30684,7 +31475,6 @@ function useXlsxViewerThumbnails(options = {}) {
             const canvasCellStyle = cellData.canvas ?? buildCanvasCellStyleCache(cellData.style);
             const gradientFill = typeof cellData.style.backgroundImage === "string" ? resolveCanvasGradientFill(context, rect, cellData.style.backgroundImage) : null;
             const fillColor = cellData.conditionalColorScale?.color ?? (typeof cellData.style.backgroundColor === "string" ? cellData.style.backgroundColor : thumbnailSheetSurface);
-            const hasExplicitCellFill = cellData.conditionalColorScale !== null || gradientFill !== null || typeof cellData.style.backgroundColor === "string" && cellData.style.backgroundColor !== thumbnailSheetSurface;
             context.fillStyle = gradientFill ?? fillColor;
             context.fillRect(rect.left, rect.top, rect.width, rect.height);
             if (cellData.conditionalDataBar) {
@@ -30709,7 +31499,7 @@ function useXlsxViewerThumbnails(options = {}) {
                 }
               }
             }
-            if (showGridLines && !hasExplicitCellFill) {
+            if (showGridLines) {
               context.strokeStyle = palette.border;
               context.lineWidth = 1;
               context.beginPath();